/* Drei Schriften aus dem Design der App, selbst ausgeliefert statt von Googles
   Servern: Beim Aufruf geht keine Anfrage an Dritte, die Datenschutzerklärung
   kann das so zusagen. Alle drei stehen unter der SIL Open Font License 1.1,
   Lizenztext in schrift/OFL.txt. Jede Datei ist ein Variable Font (latin). */
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:500 800; font-display:swap;
  src:url('schrift/jakarta-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600 800; font-display:swap;
  src:url('schrift/bricolage-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('schrift/grotesk-latin.woff2') format('woff2');
}

/* ═══════════════════════════════════════════════════════════════
   Tokens, der helle Modus "Coach" der App, 1:1 aus
   src/app/lib/theme-manager.ts (LIGHT_COLORS), Design-Canvas "Taxo App".
   Jeder Akzent kommt zweimal vor: als FLAECHE in der leuchtenden
   Design-Farbe und als TEXT in einer abgedunkelten Variante, die auf Creme
   und Karten 4,5:1 erreicht, Amber als Schrift auf Creme kaeme auf 1,9:1.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#F0EBE1;          /* Creme */
  --card:#FBF8F2;        /* surface */
  --card-alt:#FFFDF9;    /* surface2 */
  --chip:#EFE6D4;        /* Chips, Icon-Kacheln */
  --border:#E6DDCB;
  --lines:#E4DAC6;       /* Fortschrittsbalken-Hintergrund */

  --text:#17130E;        /* Tinte, 15,56:1 auf Creme */
  --muted:#756648;       /*  4,71:1 auf Creme, 5,28:1 auf Karte */
  --dim:#756648;

  /* Schrift AUF Akzentflaechen. Im Amber-System gewinnt Dunkel ueberall:
     Amber 9,14 statt 2,03 · Teal 5,62 statt 3,30 · Rot 4,74 statt 3,91 */
  --auf-farbe:#1A1206;

  --amber:#F5A623;   --amber-floor:#D98B12;  --amber-text:#926012;
  --amber2:#E06A00;  --amber2-floor:#B85600; --amber2-text:#AD5000;
  --teal:#0E9F8E;    --teal-floor:#0B7568;   --teal-text:#077468;
  --red:#E5484D;     --red-text:#B8393D;
  --correct:#34A853; --correct-text:#237639;

  --font:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-display:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --font-zahl:'Space Grotesk','Plus Jakarta Sans',system-ui,sans-serif;
  --radius:18px; --radius-lg:24px;
  --wrap:1120px;
  --schatten:0 2px 8px rgba(23,19,14,.05), 0 12px 28px rgba(23,19,14,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-weight:500; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* Platz fuer die feste Leiste unten auf dem Handy, inkl. Home-Balken des iPhones */
  padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px));
}
@media (min-width:900px){body{padding-bottom:0}}
img,svg{max-width:100%;height:auto;display:block}

h1,h2{margin:0;font-family:var(--font-display);font-weight:800;line-height:1.1;letter-spacing:-.02em}
h3{margin:0;font-weight:800;line-height:1.2;letter-spacing:-.01em}
p{margin:0}
strong{font-weight:800}
.zahl-schrift{font-family:var(--font-zahl);font-weight:700;letter-spacing:-.01em}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* Fokus, Tinte auf Creme: 15,56:1, weit ueber den 3:1 aus WCAG 1.4.11 */
:focus-visible{outline:3px solid var(--text);outline-offset:3px;border-radius:8px}

.skip{
  position:absolute;top:-100px;left:0;z-index:99;
  min-width:44px;min-height:44px;
  background:var(--text);color:var(--bg);
  padding:14px 20px;border-radius:0 0 var(--radius) 0;font-weight:800;text-decoration:none;
}
.skip:focus{top:0}

/* ─── 3D-Button, Boden 3px, Padding 16px, 15px, Radius 18 (DuoButton.tsx) ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:44px; padding:16px 24px; border-radius:18px; border:0;
  font-family:var(--font); font-size:15px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transform:translateY(0); transition:transform .1s ease-out, box-shadow .1s ease-out;
}
.btn-primary{background:var(--amber);color:var(--auf-farbe);box-shadow:0 3px 0 var(--amber-floor)}
.btn-primary:active{transform:translateY(3px);box-shadow:0 0 0 var(--amber-floor)}
/* Tinte mit Amber-Schrift: der Knopf auf den Amber-Karten der App ("Los geht's") */
.btn-ink{background:var(--text);color:var(--amber);box-shadow:0 3px 0 #000}
.btn-ink:active{transform:translateY(3px);box-shadow:0 0 0 #000}
.btn-ghost{
  background:var(--card-alt);color:var(--text);
  box-shadow:0 3px 0 var(--border); border:2px solid var(--border);
}
.btn-ghost:active{transform:translateY(3px);box-shadow:0 0 0 var(--border)}

/* ─── Kopfzeile ─────────────────────────────────────────────── */
.kopf{
  position:sticky;top:0;z-index:20;
  background:rgba(240,235,225,.97); backdrop-filter:blur(12px);
  border-bottom:2px solid var(--border);
}
.kopf .wrap{display:flex;align-items:center;gap:16px;min-height:64px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);
  min-height:44px;font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.marke img{width:36px;height:36px;border-radius:10px}
.kopf nav{margin-left:auto;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.kopf nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  color:var(--muted);text-decoration:none;font-size:15px;font-weight:700;border-radius:12px;
}
.kopf nav a:hover{color:var(--text);background:var(--chip)}
.kopf nav a.betont{
  background:var(--amber);color:var(--auf-farbe);margin-left:8px;padding:0 18px;
  box-shadow:0 3px 0 var(--amber-floor);font-weight:800;
}
.kopf nav a.betont:hover{background:var(--amber);color:var(--auf-farbe)}
@media (max-width:879px){.kopf nav a:not(.sprachen){display:none}} /* Handy, nur die Sprach-Chips bleiben im Kopf, der Weg zur App steckt im Hero-Abzeichen und in der festen Leiste unten */

/* ─── Feste Leiste unten (nur Handy) ────────────────────────── */
.leiste{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:rgba(251,248,242,.96); backdrop-filter:blur(10px);
  border-top:2px solid var(--border);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  display:flex;align-items:center;gap:14px;
}
.leiste .txt{flex:1;min-width:0}
.leiste b{display:block;font-size:14px;font-weight:800;line-height:1.2}
.leiste span{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.leiste .btn{padding:12px 18px;font-size:13px;flex:none}
@media (min-width:900px){.leiste{display:none}}

/* ─── Hero ──────────────────────────────────────────────────── */
.hero{padding:36px 0 8px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-40% 15% auto -25%;height:620px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(245,166,35,.18),transparent 72%);
}
.hero .wrap{position:relative}
.hero-gitter{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px 36px;
  width:fit-content;max-width:100%;margin-inline:auto;
}
.hero-gitter > :first-child{flex:0 1 38rem;max-width:38rem;min-width:min(100%,18rem)}
.hero .phone{width:min(240px,100%);max-width:240px;margin:0}
@media (min-width:900px){
  .hero-gitter{gap:40px}
  .hero .phone{width:260px;max-width:260px}
}
.hero h1{font-size:clamp(34px,7.4vw,58px);max-width:16ch}
.hero .lead{margin-top:18px;max-width:54ch;font-size:clamp(16px,2.4vw,19px);color:var(--muted);font-weight:500}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--amber);color:var(--auf-farbe);margin-bottom:22px;
}
.chip .punkt{width:8px;height:8px;border-radius:50%;background:var(--auf-farbe)}

.aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hinweis{margin-top:20px;max-width:56ch;font-size:14px;color:var(--dim)}
/* Store-Badges oben: gleiche Hoehe wie unten, rundum mindestens ein Viertel Hoehe Luft */
.hero-stores{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:26px}
.hero-stores .badge{display:block;height:48px;width:auto}
.hero-stores + .hinweis{margin-top:14px}

/* ─── Handy-Rahmen ──────────────────────────────────────────── */
/* Gezeichnet wie ein aktuelles iPhone: Titanrahmen (heller Ring), schwarzer
   Bildschirmrand, stark gerundete Ecken, links Aktions- und Lautstaerketasten,
   rechts die Seitentaste. Die Screenshots bringen Statusleiste und Dynamic
   Island schon mit, der Rahmen kommt nur aus CSS. Eckenradius etwa 14 % der
   Bildschirmbreite, wie beim Geraet; die Tasten sind Verlaeufe ohne Wiederholung. */
.phone{
  --rahmen:#5A4B36; --ecke:32px; --rand:10px;
  position:relative; width:100%; max-width:260px; margin-inline:auto; padding:var(--rand); background:#1A1206;
  border-radius:calc(var(--ecke) + var(--rand));
  box-shadow:0 0 0 2px var(--rahmen), 0 0 0 3px rgba(26,18,6,.45), 0 22px 44px rgba(23,19,14,.26);
}
.phone img{display:block;width:100%;height:auto;border-radius:var(--ecke);background:#1A1206}
.phone::before,.phone::after{
  content:""; position:absolute; top:0; bottom:0; width:3px; pointer-events:none;
  background-repeat:no-repeat; background-image:linear-gradient(var(--rahmen),var(--rahmen));
}
.phone::before{
  left:-5px; border-radius:2px 0 0 2px;
  background-image:linear-gradient(var(--rahmen),var(--rahmen)),linear-gradient(var(--rahmen),var(--rahmen)),linear-gradient(var(--rahmen),var(--rahmen));
  background-size:3px 4%,3px 7.5%,3px 7.5%; background-position:0 16%,0 24%,0 33%;
}
.phone::after{right:-5px; border-radius:0 2px 2px 0; background-size:3px 11%; background-position:0 27%}
@media (min-width:900px){.phone{--ecke:42px;--rand:12px}}

/* ─── Zahlen ────────────────────────────────────────────────── */
.zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:34px;
  list-style:none;padding:0}
.zahl{
  background:var(--card-alt);border:2px solid var(--border);border-radius:var(--radius-lg);
  padding:18px 12px;text-align:center;box-shadow:var(--schatten);
}
.zahl b{display:block;font-family:var(--font-zahl);font-size:clamp(26px,6.2vw,36px);font-weight:700;
  line-height:1;color:var(--text);letter-spacing:-.02em}
.zahl span{display:block;margin-top:8px;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--amber-text);hyphens:auto;overflow-wrap:anywhere}

/* ─── Abschnitte ────────────────────────────────────────────── */
section{padding:40px 0}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-text)}
section h2{font-size:clamp(26px,5vw,40px);margin-top:12px;max-width:20ch}
section h2+p{margin-top:14px;max-width:62ch;color:var(--muted);font-size:clamp(15px,2.2vw,17px)}

/* Text und Handy als ein Klumpen, nur so breit wie der Inhalt. Kein 1fr-Rest,
   der in LTR und RTL eine Creme-Leere oder eine Wortspalte macht. */
.feature{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:24px 36px;
  width:fit-content;max-width:100%;margin-inline:auto;
}
.feature > :not(.phone){flex:0 1 36rem;max-width:36rem;min-width:min(100%,18rem)}
.feature .phone{flex:0 0 auto;width:min(240px,100%);max-width:240px;margin:0;order:1}
@media (min-width:900px){
  .feature{gap:36px}
  .feature .phone{width:260px;max-width:260px;order:0}
  .feature.gedreht .phone{order:0}
}
.feature ul{margin:20px 0 0;padding-left:22px;color:var(--muted);font-size:15px}
.feature li{margin-top:8px}
.feature li strong{color:var(--text)}
.feature .aktionen{margin-top:26px}
.neu{
  display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;vertical-align:middle;
  background:var(--amber);color:var(--auf-farbe);font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;
}

.gitter{display:grid;gap:14px;margin-top:32px;grid-template-columns:1fr}
@media (min-width:640px){.gitter{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.gitter-3{grid-template-columns:repeat(3,1fr)}}

.karte{
  background:var(--card);border:2px solid var(--border);border-radius:var(--radius);
  padding:22px;box-shadow:var(--schatten);height:100%;
}
.karte h3{font-size:18px;display:flex;align-items:center;gap:10px} /* nowrap: der Titel bricht neben dem Symbol um, nicht darunter */
/* Die Widmung: Taxo links, Text rechts, auf dem Handy untereinander */
.herkunft{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:flex-start;padding:28px;
  border-color:var(--amber);background:var(--card-alt)}
.herkunft img{flex:none;width:84px;height:84px}
.herkunft > div{flex:1 1 280px}
.herkunft h2{font-size:clamp(24px,4vw,32px);margin-top:6px}
.herkunft p:not(.eyebrow){margin-top:12px;color:var(--muted);max-width:62ch}
.karte p{margin-top:10px;color:var(--muted);font-size:15px}
/* Werbung fuers eigene Haus: gleiche Karte wie die Widmung, mit der CS-Marke statt Taxo */
.herkunft.cs{border-color:var(--border)}
.cs-marke{flex:none;width:84px;height:84px;border-radius:24px;box-shadow:0 10px 24px rgba(108,75,255,.25)}

.marker{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 10px;border-radius:11px;
  background:var(--amber);color:var(--auf-farbe);
  font-family:var(--font-zahl);font-size:14px;font-weight:700;flex:none;
}

/* ─── Quiz ──────────────────────────────────────────────────── */
.quiz{
  background:var(--card-alt);border:2px solid var(--border);border-radius:var(--radius-lg);
  padding:24px 20px;box-shadow:var(--schatten);margin-top:24px;max-width:none;
}
.quiz-leiste{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.quiz-balken{flex:1;height:12px;border-radius:12px;background:var(--lines);overflow:hidden}
.quiz-balken i{display:block;height:100%;background:var(--amber);border-radius:12px;
  transition:width .25s ease-out}
.quiz-zaehler{font-family:var(--font-zahl);font-size:13px;font-weight:700;color:var(--muted);flex:none}
.quiz-kopf{display:flex;gap:14px;align-items:flex-start}
.quiz-kopf img{width:52px;height:52px;border-radius:14px;flex:none}
.quiz-frage{
  font-family:var(--font-zahl);font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.01em;
}
.quiz-woher{margin-top:8px;font-size:12px;font-weight:800;color:var(--amber-text);
  letter-spacing:.06em;text-transform:uppercase}
.quiz-optionen{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.quiz-opt{
  width:100%;min-height:56px;display:flex;align-items:center;gap:14px;text-align:left;
  background:var(--card);border:2px solid var(--border);border-radius:16px;
  padding:12px 16px;cursor:pointer;color:var(--text);
  font-family:var(--font);font-size:15px;font-weight:700;line-height:1.35;
  box-shadow:0 3px 0 var(--border);
}
.quiz-opt .nr{
  flex:none;width:28px;height:28px;border-radius:9px;background:var(--chip);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-zahl);font-size:13px;font-weight:700;color:var(--text);
}
.quiz-opt:hover:not([disabled]){border-color:var(--amber);box-shadow:0 3px 0 var(--amber-floor)}
.quiz-opt[data-stand="richtig"]{background:var(--correct);border-color:var(--correct);color:var(--auf-farbe);box-shadow:none}
.quiz-opt[data-stand="falsch"]{background:var(--red);border-color:var(--red);color:var(--auf-farbe);box-shadow:none}
.quiz-opt[data-stand] .nr{background:rgba(255,255,255,.55);color:var(--auf-farbe)}
.quiz-opt[disabled]{cursor:default}
.quiz-ergebnis{margin-top:18px}
.quiz-ergebnis:empty{margin:0}
.quiz-box{
  background:var(--chip);border-radius:14px;padding:16px 18px;
  border-left:6px solid var(--amber);
}
.quiz-box b{display:block;font-size:15px;font-weight:800;margin-bottom:6px}
.quiz-box p{color:var(--text);font-size:15px}
.quiz-weiter{margin-top:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.quiz-schluss b{display:block;font-family:var(--font-zahl);font-size:22px;font-weight:700;margin-bottom:6px}
/* Sprachhilfe im Quiz auf EN/AR: dieselbe Karte wie in der App, Frage bleibt deutsch.
   Volle Quizbreite, nicht in der Kopfzeile neben dem Icon. Auf schmalem Schirm
   stehen die Übersetzungen untereinander, sonst wird aus 1fr eine Wortspalte. */
.quiz-hilfe{
  margin-top:14px;background:var(--chip);border-radius:14px;padding:14px 16px;
  border:2px solid var(--border);direction:ltr;text-align:left;
  unicode-bidi:isolate;min-width:0;
}
.quiz-hilfe .chip-hilfe{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;
  padding:4px 10px;border-radius:999px;background:var(--amber);color:var(--auf-farbe);
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.quiz-hilfe .wort{font-weight:800;color:var(--text);margin-bottom:6px}
.quiz-hilfe .einfach{font-size:14px;color:var(--text);margin-bottom:10px;line-height:1.45}
.quiz-hilfe dl{margin:0;display:grid;grid-template-columns:1fr;gap:8px 0;font-size:14px}
.quiz-hilfe dt{color:var(--muted);font-weight:700;font-size:12px}
.quiz-hilfe dd{margin:0;color:var(--text);line-height:1.45;overflow-wrap:break-word;min-width:0}
.quiz-hilfe dd[dir="rtl"]{text-align:right;unicode-bidi:isolate}
@media (min-width:560px){
  .quiz-hilfe dl{grid-template-columns:minmax(7em,max-content) minmax(12ch,1fr);gap:6px 14px;align-items:baseline}
  .quiz-hilfe dt{font-size:14px;white-space:nowrap}
}
.quiz-frage mark{
  background:transparent;color:inherit;text-decoration:underline;text-decoration-thickness:2px;
  text-decoration-color:var(--amber-floor);text-underline-offset:3px;
}

/* ─── Prüfungsbereiche: elf Abschnitte, wie auf der Route ───── */
.bereich{position:relative;padding-left:22px}
.bereich::before{
  content:"";position:absolute;left:0;top:18px;bottom:18px;width:6px;border-radius:6px;
  background:var(--amber);
}
.bereich .nr{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber-text);margin-bottom:6px}
.bereich h3{font-size:17px;color:var(--text)}
.bereich .zaehler{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;
  font-family:var(--font-zahl);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.bereich .zaehler span{background:var(--chip);color:var(--text);padding:5px 11px;border-radius:999px}

/* ─── Bundesländer ──────────────────────────────────────────── */
.laender{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.laender li{
  min-height:44px;display:inline-flex;align-items:center;
  background:var(--card);border:2px solid var(--border);border-radius:999px;padding:6px 14px;
  font-size:14px;font-weight:700;
}

/* ─── Panel ─────────────────────────────────────────────────── */
.panel{
  background:var(--card-alt);border:2px solid var(--border);border-radius:var(--radius-lg);
  padding:26px 22px;box-shadow:var(--schatten);margin-top:26px;
}
.panel-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.panel-zahlen div{text-align:center}
.panel-zahlen b{display:block;font-family:var(--font-zahl);font-size:clamp(23px,5.6vw,32px);font-weight:700;
  color:var(--text);line-height:1;letter-spacing:-.02em}
.panel-zahlen span{display:block;margin-top:8px;font-size:12px;font-weight:800;color:var(--amber-text);
  letter-spacing:.06em;text-transform:uppercase}
.panel>p{margin-top:22px;color:var(--muted);font-size:15px}

/* ─── Prüfungs-Ablauf ───────────────────────────────────────── */
.ablauf{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:760px){
  .ablauf{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
  /* Nur die IHK-Zeile Teil 1 | Pause | Teil 2, nicht die drei Schritte. */
  .ablauf-pruefung{grid-template-columns:1fr auto 1fr}
}
.ablauf li{background:var(--card);border:2px solid var(--border);border-radius:16px;padding:18px;
  box-shadow:var(--schatten);min-width:0;display:flex;flex-direction:column;height:100%}
.ablauf .marke-teil{
  display:inline-block;padding:4px 11px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--amber);color:var(--auf-farbe);
}
.ablauf li.teal .marke-teil{background:var(--teal)}
.ablauf b{display:block;margin-top:10px;font-size:17px;font-weight:800}
.ablauf p{margin-top:6px;color:var(--muted);font-size:14px}
.ablauf .pause{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:transparent;border:2px dashed var(--lines);min-width:110px;box-shadow:none;
}
.ablauf .pause b{margin:0;font-family:var(--font-zahl);font-size:16px;font-weight:700;color:var(--amber-text)}
.ablauf .pause span{font-size:12px;font-weight:700;color:var(--muted);margin-top:4px}

/* ─── Tempo ─────────────────────────────────────────────────── */
.tempo{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px}
@media (min-width:760px){.tempo{grid-template-columns:repeat(5,1fr)}}
.tempo li{background:var(--card);border:2px solid var(--border);border-radius:16px;padding:16px 14px;
  box-shadow:var(--schatten)}
.tempo b{display:block;font-family:var(--font-zahl);font-size:22px;font-weight:700;color:var(--text);line-height:1.1}
.tempo .was{display:block;margin-top:4px;font-size:14px;font-weight:800;color:var(--text)}
.tempo .wofuer{display:block;margin-top:2px;font-size:13px;font-weight:600;color:var(--muted)}
.tempo li.empfohlen{border-color:var(--amber)}
.tempo .tipp{
  display:inline-block;margin-top:10px;padding:4px 10px;border-radius:999px;
  background:var(--amber);color:var(--auf-farbe);
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}

/* ─── Liste mit Haken ───────────────────────────────────────── */
.liste{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:760px){.liste{grid-template-columns:repeat(2,1fr)}}
.liste li{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--card);border:2px solid var(--border);border-radius:14px;padding:14px 16px;
  box-shadow:var(--schatten);
}
.liste b{display:block;font-size:15px;font-weight:800}
.liste p{color:var(--muted);font-size:14px;margin-top:4px}
.haken{
  flex:none;width:24px;height:24px;border-radius:8px;
  background:var(--correct);color:var(--auf-farbe);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;
}

/* ─── Stempel ───────────────────────────────────────────────── */
.stempel{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.stempel li{
  display:inline-flex;align-items:center;min-height:44px;
  background:var(--card);border:2px solid var(--border);border-radius:999px;padding:6px 16px;
  font-size:14px;font-weight:700;
}
.stempel li.mehr{background:var(--chip);border-color:var(--chip);color:var(--text)}

/* ─── Ligen ─────────────────────────────────────────────────── */
.ligen{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.ligen{grid-template-columns:repeat(5,1fr)}}
.ligen li{
  background:var(--card);border:2px solid var(--border);border-radius:14px;padding:12px 10px;
  text-align:center;min-height:44px;
}
.ligen b{display:block;font-size:14px;font-weight:800}
.ligen span{display:block;margin-top:2px;font-family:var(--font-zahl);font-size:12px;font-weight:700;color:var(--muted)}
.ligen li:first-child{border-color:var(--amber)}
.ligen li:last-child{background:var(--text);border-color:var(--text);color:var(--bg)}
.ligen li:last-child span{color:var(--amber)}

/* ─── Preise ────────────────────────────────────────────────── */
.preise{display:grid;gap:16px;margin-top:32px;grid-template-columns:1fr;max-width:900px}
@media (min-width:700px){.preise{grid-template-columns:repeat(2,1fr)}}
.preis{
  background:var(--card-alt);border:2px solid var(--border);border-radius:var(--radius-lg);
  padding:26px 22px;box-shadow:var(--schatten);display:flex;flex-direction:column;
}
.preis.plus{border-color:var(--amber);background:var(--card)}
.preis .titel{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-text)}
.preis .betrag{margin-top:8px;font-family:var(--font-zahl);font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em}
.preis .betrag small{font-family:var(--font);font-size:15px;font-weight:700;color:var(--muted);letter-spacing:0}
.preis .oder{margin-top:6px;font-size:14px;font-weight:700;color:var(--muted)}
.preis ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px;flex:1}
.preis li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--text)}
.preis li .haken{margin-top:1px}
.preis li.grenze .haken{background:var(--chip);color:var(--text)}
.preis .fuss{margin-top:20px;font-size:13px;color:var(--dim)}

/* ─── FAQ ───────────────────────────────────────────────────── */
.faq{margin-top:30px;display:grid;gap:10px;max-width:840px}
.faq details{background:var(--card);border:2px solid var(--border);border-radius:16px;
  box-shadow:var(--schatten)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:56px;padding:14px 18px;cursor:pointer;list-style:none;
  font-size:16px;font-weight:800;border-radius:14px;
}
.faq summary::-webkit-details-marker{display:none}
/* Plus und Minus als gezeichnete Balken, kein Schriftzeichen: Glyphen sitzen je
   nach Schrift und Browser zu hoch (iOS Safari), Balken sitzen immer mittig. */
.faq summary::after{
  content:"";flex:none;width:28px;height:28px;border-radius:9px;
  background:
    linear-gradient(var(--auf-farbe),var(--auf-farbe)) center/12px 2.5px no-repeat,
    linear-gradient(var(--auf-farbe),var(--auf-farbe)) center/2.5px 12px no-repeat,
    var(--amber);
}
.faq details[open] summary::after{
  background:linear-gradient(var(--auf-farbe),var(--auf-farbe)) center/12px 2.5px no-repeat, var(--amber);
}
.faq details[open] summary{color:var(--amber-text)}
.faq .antwort{padding:0 18px 18px;color:var(--muted);font-size:15px;max-width:66ch}

/* ─── Schluss-CTA ───────────────────────────────────────────── */
.schluss{
  background:var(--amber);border-radius:28px;padding:44px 26px;text-align:center;
  color:var(--auf-farbe);box-shadow:0 6px 0 var(--amber-floor);
}
.schluss img{width:96px;height:96px;border-radius:24px;margin:0 auto 20px;
  box-shadow:0 8px 24px rgba(23,19,14,.18)}
/* Start-Clip aus App Store Connect (7 s, stumm, laeuft einmal) in einem iPhone,
   Titanrand als Verlauf, Dynamic Island, Seitenverhaeltnis wie ein echter Bildschirm. */
.iphone{position:relative;width:196px;height:426px;margin:0 auto 26px;padding:3px;border-radius:30px;
  background:linear-gradient(155deg,#6E6E73 0%,#2C2C2E 26%,#8E8E93 52%,#2C2C2E 78%,#6E6E73 100%);
  box-shadow:0 18px 40px rgba(23,19,14,.3), 0 2px 6px rgba(23,19,14,.2)}
.iphone video{display:block;width:100%;height:100%;object-fit:cover;border-radius:27px;background:#0A0700}
.iphone-island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:60px;height:18px;
  border-radius:12px;background:#000;z-index:2}
/* Seitentasten wie am Geraet. Links Action-Taste, Lauter, Leiser. Rechts Ein-Aus und Kamerataste.
   Hoehen in Prozent, damit sie bei jeder Rahmengroesse sitzen. */
.iphone .t{position:absolute;width:3px}
.iphone .t.links{left:-2px;border-radius:2px 0 0 2px;background:linear-gradient(to left,#17171A 0%,#7D7D82 55%,#3A3A3C 100%)}
.iphone .t.rechts{right:-2px;border-radius:0 2px 2px 0;background:linear-gradient(to right,#17171A 0%,#7D7D82 55%,#3A3A3C 100%)}
.iphone .t.aktion{top:18.5%;height:4.6%}
.iphone .t.lauter{top:26.2%;height:7.4%}
.iphone .t.leiser{top:35.4%;height:7.4%}
.iphone .t.power{top:26.8%;height:11.2%}
.iphone .t.kamera{top:41.4%;height:5.8%;width:3px;background:linear-gradient(to right,#2A2A2C 0%,#9A9AA0 55%,#4A4A4C 100%)}
@media (min-width:700px){
  .iphone{width:232px;height:504px;border-radius:35px;padding:4px}
  .iphone video{border-radius:31px}
  .iphone-island{top:13px;width:71px;height:21px;border-radius:14px}
}
.schluss .eyebrow{color:var(--auf-farbe);opacity:.85}
.schluss h2{margin:12px auto 0;max-width:18ch;color:var(--auf-farbe)}
.schluss>p{margin:16px auto 0;max-width:56ch;color:var(--auf-farbe);font-size:clamp(15px,2.2vw,17px)}
/* Preise und Plus-Handy als ein Block, nicht 200px Handy in 1120px Creme. */
.preise-reihe{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:24px 28px;
  margin-top:28px;
}
.preise-reihe .preise{margin-top:0;flex:1 1 34rem;max-width:44rem}
.preise-reihe .gratis-bild{margin:0}

.qr{display:none}

/* Plus-Figure: nur so breit wie Handy plus Text, zentriert. */
.gratis-bild{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  width:fit-content;max-width:100%;margin:24px auto 0;padding:0;
}
.gratis-bild img{
  flex:none;width:220px;max-width:min(220px,100%);height:auto;
  border-radius:22px;border:2px solid var(--border);
}
.gratis-bild figcaption{
  margin:0;max-width:28ch;min-width:0;width:auto;
  text-align:center;font-size:14px;color:var(--dim);overflow-wrap:break-word;
}
.kopf nav a.sprachen{border:2px solid var(--border);border-radius:999px;padding:6px 12px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.kopf nav a.sprachen:hover{border-color:var(--amber)}
@media (max-width:879px){
  .kopf nav a.sprachen{display:inline-flex;align-items:center;padding:0 12px;min-width:44px;min-height:44px}
}

.ohne-app{margin:26px auto 0;max-width:660px;text-align:left;
  background:var(--card);border:2px solid var(--border);border-radius:18px;padding:20px 22px}
.ohne-app h3{font-size:18px;margin:0}
.ohne-app p{margin:8px 0 0;color:var(--muted);font-size:15px}
.ohne-app ul{margin:14px 0 0;padding-left:20px;color:var(--muted);font-size:15px}
.ohne-app li+li{margin-top:8px}
/* Links im Fliesstext. Ohne diese Regel stehen sie in der Voreinstellung des
   Browsers da, also blau und unterstrichen, mitten in einer cremefarbenen Seite
   mit Bernstein als Akzent. Derselbe Stil wie im Fussbereich und in der
   IHK-Tabelle, dort stand er schon. Knoepfe sind ausgenommen. */
.wrap p a:not(.btn), .wrap li a:not(.btn), .wrap figcaption a:not(.btn){
  color:var(--text);font-weight:700;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--amber-floor)}
.wrap p a:not(.btn):hover, .wrap li a:not(.btn):hover{text-decoration-color:var(--text)}

.ohne-app a{color:var(--text);font-weight:700}

/* Eintragen fuer die Android-Benachrichtigung. Steht im Block ohne-app und wandert
   deshalb auf Android mit nach oben, ohne eigenes Skript. */
.warteliste{margin-top:18px;padding-top:16px;border-top:2px solid var(--border)}
.warteliste label{display:block;font-weight:800;font-size:15px}
.warteliste .zeile{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.warteliste input{flex:1 1 200px;min-width:0;min-height:48px;padding:12px 14px;
  font-family:var(--font);font-size:16px;font-weight:600;color:var(--text);
  background:var(--bg);border:2px solid var(--border);border-radius:12px}
.warteliste input::placeholder{color:var(--dim)}
.warteliste .btn{flex:0 0 auto}
.warteliste .hinweis{margin-top:10px;max-width:none}
.warteliste[data-stand="fehler"] input{border-color:var(--amber)}

.stores{display:grid;gap:14px;margin:30px auto 0;grid-template-columns:1fr;max-width:660px}
@media (min-width:620px){.stores{grid-template-columns:repeat(2,1fr)}}
.store{
  background:var(--card-alt);border-radius:var(--radius-lg);color:var(--text);
  padding:20px;display:flex;align-items:center;gap:16px;text-align:left;
  box-shadow:0 3px 0 var(--amber-floor);
}
.store .wo{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-text)}
.store .wann{font-size:13px;font-weight:600;color:var(--muted);margin-top:3px}
/* Offizielles Store-Badge, unveraendert, mindestens 40px hoch, rundum ein Viertel
   Hoehe Abstand (Apples Vorgabe); die Kachel liefert den Abstand ueber ihr Padding. */
.store .badge{display:block;height:48px;width:auto;margin:10px 0 8px}
.schluss .hinweis{color:var(--auf-farbe);opacity:.85}

/* ─── Fusszeile ─────────────────────────────────────────────── */
footer{border-top:2px solid var(--border);padding:30px 0 46px;color:var(--dim);font-size:14px}
footer .wrap{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
footer .rechtslinks{display:flex;flex-wrap:wrap;gap:0 20px}
footer .rechtslinks a{min-width:44px}
footer .widmung{width:100%;margin-top:12px;font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--text);line-height:1.5}
footer .firma{font-family:var(--font);font-weight:700;font-size:14px;color:var(--muted)}
footer .marken{width:100%;margin-top:18px;font-size:12px;line-height:1.6;color:var(--dim)}
footer a{color:var(--text);font-weight:700;text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:44px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ─── IHK-Übersicht ─────────────────────────────────────────── */
.filter{display:grid;gap:10px;margin-top:26px;grid-template-columns:1fr}
.filter label{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.filter input,.filter select{
  width:100%;min-height:52px;padding:0 16px;font:inherit;font-size:16px;color:var(--text);
  background:var(--card);border:2px solid var(--border);border-radius:14px;
}
.filter input:focus-visible,.filter select:focus-visible{border-color:var(--amber)}
.treffer{margin-top:14px;font-weight:800;color:var(--muted);font-size:14px}

.tabellenrahmen{margin-top:16px;overflow-x:auto;border:2px solid var(--border);border-radius:18px;background:var(--card)}
table.ihk{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
table.ihk th,table.ihk td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
table.ihk thead th{
  position:sticky;top:0;background:var(--chip);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text);border-bottom:2px solid var(--border)
}
table.ihk tbody tr:last-child th,table.ihk tbody tr:last-child td{border-bottom:0}
table.ihk tbody th{font-weight:800}
/* Volle Zielhoehe fuer den Finger, WCAG 2.5.8. Der Name ist der Link, die
   Zeile bleibt schmal, deshalb waechst nur die Hoehe. */
table.ihk tbody th a{display:inline-flex;align-items:center;min-height:44px;color:var(--text);text-decoration:underline;text-underline-offset:3px}
table.ihk tbody th a:hover{color:var(--amber-tief)}
table.ihk .sitz{display:block;font-weight:600;font-size:13px;color:var(--muted);margin-top:2px}
table.ihk .land{color:var(--muted);white-space:nowrap}
table.ihk .betrag{font-weight:800;white-space:nowrap}
table.ihk .offen{color:var(--muted);font-weight:600}
table.ihk .frist{color:var(--muted);max-width:34ch}
.versteckt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (min-width:700px){
  .filter{grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:12px}
}

/* Arabisch. Plus Jakarta und Bricolage decken Arabisch nicht ab, deshalb
   Systemschriften mit Glyphen (Geeza Pro auf Apple, Segoe UI Historic und
   Noto auf anderen Geraeten). Kein Nachladen von Googles Schrift-Servern.
   Deutscher Pruefungsstoff bleibt links (lang=de), die App-Schirme werden
   nicht gespiegelt. */
html[dir="rtl"]{
  --font:'Plus Jakarta Sans','Geeza Pro','SF Arabic','Segoe UI Historic','Noto Naskh Arabic','Noto Sans Arabic',Tahoma,sans-serif;
  --font-display:'Bricolage Grotesque','Plus Jakarta Sans','Geeza Pro','SF Arabic','Segoe UI Historic','Noto Naskh Arabic',sans-serif;
}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{letter-spacing:0}
html[dir="rtl"] .chip,html[dir="rtl"] .eyebrow,html[dir="rtl"] .zahl span,html[dir="rtl"] .preis .titel,html[dir="rtl"] .store .wo,html[dir="rtl"] .quiz-hilfe .chip-hilfe{
  letter-spacing:0;text-transform:none
}
html[dir="rtl"] [lang="de"]{
  direction:ltr;
  unicode-bidi:isolate;
  text-align:left;
  font-family:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
html[dir="rtl"] .kopf nav{margin-left:0;margin-right:auto}
html[dir="rtl"] .kopf nav a.betont{margin-left:0;margin-right:8px}
html[dir="rtl"] .phone,html[dir="rtl"] .gratis-bild img{direction:ltr}
html[dir="rtl"] .feature ul,html[dir="rtl"] .ohne-app ul{padding-left:0;padding-inline-start:20px}
html[dir="rtl"] .qr p,html[dir="rtl"] .ohne-app,html[dir="rtl"] .store,html[dir="rtl"] footer .wrap{
  text-align:start
}
html[dir="rtl"] table.ihk th,html[dir="rtl"] table.ihk td{text-align:start}