/* KI-Führerschein — App Shell & Design System (aus DESIGN.md extrahiert)
   Alles unter #kif-app gescoped, alle Custom Properties und Klassen mit kif- Präfix.
   Grund: der Kurs muss später sauber unter z.B. /kurs in eine größere Website
   einbettbar sein, ohne mit deren --acc/--ink/.window/.panel etc. zu kollidieren. */

/* General Sans — LOKAL ausgeliefert, nicht vom CDN.
   Der Kurs lief vorher über api.fontshare.com; damit hätte jeder Schülerbrowser
   IP-Adresse, User-Agent und Referrer an einen Drittanbieter geschickt, für den
   es keinen AVV gibt. Das widerspricht der Kernaussage des Produkts ("kein
   personenbezogenes Einzeldatum verlässt den Browser", CLAUDE.md) und wäre in
   der Prüfung durch die schulische Datenschutzbeauftragte der erste Treffer.
   Nebeneffekte: kein render-blockierender Fremd-Request beim Start, und das nie
   benutzte Gewicht 300 wird gar nicht erst geladen.
   Nur woff2 — jeder Browser, der ES-Module und CSS-Custom-Properties kann
   (Voraussetzung dieser App), kann auch woff2.
   Lizenz: ITF Free Font License, Selbsthosting erlaubt; Dateien stammen vom
   offiziellen Fontshare-CDN. */
@font-face{
  font-family:'General Sans';src:url('fonts/general-sans-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'General Sans';src:url('fonts/general-sans-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'General Sans';src:url('fonts/general-sans-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

/* Reset + Fallback-Hintergrund auf html/body selbst (nicht nur #kif-app):
   ohne das malt Chromium im OS-Dark-Mode jeden nicht abgedeckten Pixel
   schwarz statt weiß, sobald vh-Rundung zwischen Browsern minimal abweicht. */
html, body{
  margin:0; padding:0;
  min-height:100vh; min-height:100dvh;
  background:oklch(0.19 0.020 52); /* = --kif-bg Theme A, Fallback bevor #kif-app rendert */
}
html{ color-scheme:dark; } /* App ist immer dunkel (auch Kontrast-Modus) — kein Browser-Auto-Invert */
*, *::before, *::after{ box-sizing:border-box } /* global, statt nur #kif-app-Nachkommen */

#kif-app{
  --kif-glass:oklch(0.90 0.014 76 / .12); --kif-glass-2:oklch(0.93 0.018 76 / .20); --kif-glass-3:oklch(0.95 0.020 76 / .28);
  --kif-win:oklch(0.88 0.014 78 / .085); --kif-solid:oklch(0.30 0.020 62 / .55); --kif-solid-2:oklch(0.34 0.022 62 / .62);
  --kif-lip:oklch(0.99 0.010 84 / .34); --kif-lip-2:oklch(0.99 0.008 84 / .62);
  /* Zwei schwaechere Stufen derselben Lip-Familie: die Haarlinie rund um die
     Fensterkante und die weichere Innenkante der Ablagen. Standen vorher als
     Literale im Stylesheet. */
  --kif-lip-hair:oklch(0.99 0.01 84 / .07); --kif-lip-soft:oklch(0.99 0.01 84 / .18);
  /* Heller Film auf dunklem Grund — Nav-Pillen, Punkte, deaktivierter Button.
     Eigene Familie neben "glass": kein Blur, nur Aufhellung. */
  --kif-film:oklch(0.95 0.012 82 / .08); --kif-film-2:oklch(0.95 0.012 82 / .18);
  --kif-film-3:oklch(0.95 0.012 82 / .26); --kif-film-4:oklch(0.95 0.012 82 / .5);
  /* ink-3 lag bei 0.70 und verfehlte ueber den hellen Ambient-Flecken 4.5:1
     (gemessen 2.77–3.72). 0.78 plus das dunklere .kif-env::after-Overlay bringt
     alle ink-3-Rollen ueber die AA-Grenze, ohne die Dreistufigkeit aufzugeben. */
  --kif-ink:oklch(0.97 0.010 82); --kif-ink-2:oklch(0.84 0.018 78); --kif-ink-3:oklch(0.78 0.020 76);
  --kif-acc:oklch(0.83 0.095 216); --kif-acc-i:oklch(0.24 0.05 220);
  --kif-ok:oklch(0.84 0.13 152); --kif-no:oklch(0.76 0.14 34);
  --kif-ok-wash:oklch(0.84 0.13 152 / .14); --kif-no-wash:oklch(0.76 0.14 34 / .14);
  /* Dritte Status-Farbe (Warnung/Wichtig), gleiche L/C-Familie wie ok/no, nur
     Hue verschoben (Gelb statt Gruen/Rot) — erste Verwendung: die Erklaer-
     Kachel in Mission 1s Fehler-Fokus-Karte (Nutzer-Wunsch: "gelb, clean"). */
  --kif-warn:oklch(0.85 0.15 95); --kif-warn-wash:oklch(0.85 0.15 95 / .16);
  --kif-on-badge:oklch(0.99 0.01 84); /* warmes Fast-Weiss fuer Icons auf vollflaechigem Badge — nie reines #fff */
  --kif-blur:blur(26px) saturate(1.4); --kif-wblur:blur(44px) saturate(1.4);
  --kif-e1:oklch(0.46 0.048 64); --kif-e2:oklch(0.33 0.038 34); --kif-e3:oklch(0.39 0.028 98); --kif-e4:oklch(0.26 0.024 266);
  /* Shadow Vocabulary (DESIGN.md): eine Familie, gleicher Farbton, nur Alpha und
     Ausdehnung variieren. Die Farbe steht ausschliesslich hier — vorher lag sie
     als Literal an sieben Stellen im Stylesheet verstreut. */
  --kif-shadow-win:0 46px 110px oklch(0.10 0.02 50 / .58);
  --kif-shadow-panel:0 30px 68px oklch(0.10 0.02 50 / .50);
  --kif-shadow-panel-act:0 42px 92px oklch(0.10 0.02 50 / .58);
  --kif-shadow-panel-hov:0 46px 100px oklch(0.10 0.02 50 / .62);
  --kif-shadow-focus:0 40px 90px oklch(0.10 0.02 50 / .55);
  --kif-shadow-dock:0 18px 44px oklch(0.10 0.02 50 / .44);
  --kif-bg:oklch(0.19 0.020 52);
  /* Daempfer ueber den Lichtflecken — haelt kleine Sekundaerschrift ueber der AA-Grenze (The Bright-Zone Rule). */
  --kif-env-scrim:oklch(0.16 0.014 54 / .62);
  /* Mock-App-Oberflaechen: alles, was eine FREMDE App oder Seite darstellt —
     Chat-Fenster (M2/M3), Feed-Post, Suchergebnisse und Lexikon (M4). Bewusst
     dunkel und blickdicht, eigenes Mini-Theme, damit diese Flaechen sichtbar
     nicht zum warmen Glas des Kurses gehoeren. Der Kurs kommentiert sie von
     aussen, er wird nie Teil von ihnen. (CLAUDE.md erlaubt App-artige Mock-UIs
     ausdruecklich, solange kein Logo und kein Produktname auftaucht.) */
  --kif-mock-bg:oklch(0.13 0.012 58);
  --kif-mock-head:oklch(0.17 0.014 58);
  --kif-mock-bubble:oklch(0.90 0.014 76 / .10);
  --kif-mock-chip:oklch(0.90 0.014 76 / .08);

  /* Vertikale/horizontale Innenabstände fluid — und als Variablen, damit
     .kif-window seine Höhe daraus ableiten kann statt aus einer hartkodierten
     Zahl (die bei jeder Padding-Änderung still kaputtgehen würde). */
  --kif-pad-top:clamp(14px, 2.2vh, 34px);
  --kif-pad-bot:clamp(18px, 3.4vh, 60px);
  --kif-pad-x:clamp(10px, 1.4vw, 28px);

  box-sizing:border-box;display:block;position:relative;
  /* overflow:clip statt overflow-x:auto — auto haette overflow-y implizit
     ebenfalls auf auto gezwungen und #kif-app zum Scroll-Container gemacht,
     wodurch die ueberstehende .kif-env 333px Geister-Scrollflaeche erzeugte.
     clip schneidet die Deko sauber ab, ohne irgendeine Scroll-Achse zu oeffnen. */
  overflow:clip;
  background:var(--kif-bg);color:var(--kif-ink);
  font-family:'General Sans',ui-sans-serif,sans-serif;font-size:18px;line-height:1.55;
  min-height:100vh;min-height:100dvh;isolation:isolate;
}
#kif-app[data-theme="b"]{
  --kif-acc:oklch(0.86 0.075 196); --kif-acc-i:oklch(0.22 0.04 200);
  --kif-e1:oklch(0.40 0.034 228); --kif-e2:oklch(0.31 0.030 254); --kif-e3:oklch(0.36 0.022 202); --kif-e4:oklch(0.24 0.022 276);
}
#kif-app.kif-a11y{
  --kif-glass:oklch(0.24 0.014 76); --kif-glass-2:oklch(0.31 0.018 76); --kif-glass-3:oklch(0.37 0.020 76);
  --kif-win:oklch(0.16 0.010 74); --kif-solid:oklch(0.24 0.014 76); --kif-solid-2:oklch(0.31 0.018 76);
  --kif-lip:oklch(0.70 0.02 76); --kif-lip-2:oklch(0.92 0.02 78);
  --kif-ink:oklch(0.99 0 0); --kif-ink-2:oklch(0.90 0.012 78); --kif-ink-3:oklch(0.80 0.016 76);
  --kif-acc:oklch(0.88 0.10 214); --kif-acc-i:oklch(0.14 0.03 218);
  --kif-ok:oklch(0.88 0.15 150); --kif-no:oklch(0.82 0.16 32); --kif-blur:none; --kif-wblur:none;
  --kif-ok-wash:oklch(0.88 0.15 150 / .18); --kif-no-wash:oklch(0.82 0.16 32 / .18);
  --kif-warn:oklch(0.90 0.17 95); --kif-warn-wash:oklch(0.90 0.17 95 / .18);
  --kif-bg:oklch(0.10 0.008 60);
  /* Kein zweites Dunkel-Theme im Kontrast-Modus — auf die schon vorhandenen
     a11y-Tokens mappen, damit das Chat-Fenster sich wie jede andere Flaeche
     im Kontrast-Modus verhaelt (kein Blur, hohe Kontraste). */
  --kif-mock-bg:var(--kif-win);
  --kif-mock-head:var(--kif-glass);
  --kif-mock-bubble:var(--kif-glass);
  --kif-mock-chip:var(--kif-glass);
}
#kif-app.kif-a11y[data-theme="b"]{ --kif-acc:oklch(0.90 0.08 196); --kif-acc-i:oklch(0.13 0.03 200) }

#kif-app{padding:var(--kif-pad-top) var(--kif-pad-x) var(--kif-pad-bot)}
#kif-app .kif-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#kif-app ::selection{background:var(--kif-acc);color:var(--kif-acc-i)}
#kif-app :focus-visible{outline:3px solid var(--kif-acc);outline-offset:4px;border-radius:10px}
/* Ausnahme: #kif-screen bekommt bei jedem Screenwechsel programmatisch den Fokus
   (mount.focus() in app.js, damit Screenreader und Tastatur im neuen Inhalt
   landen). Sobald danach eine Taste faellt, greift :focus-visible — und der Ring
   umschliesst den kompletten Inhaltsbereich. Der Container ist kein Bedienelement;
   die Ansage uebernimmt #kif-live (The Announce-On-Purpose Rule). */
#kif-screen:focus,#kif-screen:focus-visible{outline:none}
#kif-app *{scrollbar-color:var(--kif-lip) transparent;scrollbar-width:thin}

/* Atmosphärischer Hintergrund — absolute statt fixed, bleibt innerhalb von #kif-app
   begrenzt (wichtig für spätere Einbettung: darf nie über den Kurs-Bereich hinaus
   auf die Host-Seite ausbluten). */
#kif-app .kif-env{position:absolute;inset:-16%;z-index:0;filter:blur(84px) saturate(1.2);pointer-events:none}
#kif-app .kif-env i{position:absolute;display:block;border-radius:50%}
#kif-app .kif-env .b1{width:56%;height:64%;left:-8%;top:-14%;background:var(--kif-e1)}
#kif-app .kif-env .b2{width:48%;height:58%;right:-6%;top:4%;background:var(--kif-e2)}
#kif-app .kif-env .b3{width:52%;height:54%;left:16%;bottom:-18%;background:var(--kif-e3)}
#kif-app .kif-env .b4{width:40%;height:48%;right:8%;bottom:-10%;background:var(--kif-e4)}
/* Daempfungs-Overlay ueber den Lichtflecken. Von .46 auf .62 angehoben: darunter
   wurde der Ember-Fleck oben links so hell, dass kleine Sekundaerschrift darauf
   nur noch 2.77:1 erreichte (gemessen). Die Lichtstimmung bleibt, sie traegt nur
   nicht mehr gegen den Text an. */
#kif-app .kif-env::after{content:'';position:absolute;inset:0;background:var(--kif-env-scrim)}
#kif-app.kif-a11y .kif-env{display:none}
#kif-app .kif-grain{
  position:absolute;inset:0;pointer-events:none;z-index:6;opacity:.24;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
#kif-app.kif-a11y .kif-grain{display:none}

/* Das Fenster — der äußere Rahmen jeder Ansicht (The Frosted Window) */
#kif-app .kif-window{
  position:relative;z-index:1;max-width:min(94vw, 2200px);margin:0 auto;
  padding:clamp(14px,1.6vh,22px) clamp(16px,2.4vw,44px) clamp(18px,2.8vh,44px);
  border-radius:clamp(20px,2vw,40px);
  /* Feste Hoehe (nicht min-height): das Fenster ist immer exakt so hoch wie der
     Viewport minus Aussenabstand — es kann nie wachsen und damit nie die Seite
     zum Scrollen bringen. Inhalt, der wirklich nicht passt (z.B. die Aufloesung
     mit sechs Begruendungen auf einem 640px-Schirm), scrollt INNERHALB des
     Fensters via #kif-screen. Dadurch ist der Rahmen auf jedem Geraet immer
     vollstaendig sichtbar. */
  height:calc(100vh - var(--kif-pad-top) - var(--kif-pad-bot));
  height:calc(100dvh - var(--kif-pad-top) - var(--kif-pad-bot));
  display:flex;flex-direction:column;
  overflow:hidden;
  background:var(--kif-win);backdrop-filter:var(--kif-wblur);-webkit-backdrop-filter:var(--kif-wblur);
  box-shadow:inset 0 1px 0 var(--kif-lip),inset 0 0 0 1px var(--kif-lip-hair),var(--kif-shadow-win);
}
#kif-app.kif-a11y .kif-window{border-radius:var(--kif-r-lg,18px);box-shadow:none;outline:2px solid var(--kif-lip);background:var(--kif-win)}

/* Shell-Leiste: FRAG-Fortschritt + Theme-Toggle + Kontrast-Toggle. Persistiert über
   alle Screens hinweg, wird nie pro Screen neu gebaut. */
#kif-app .kif-shell-bar{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;flex:0 0 auto;
  padding:10px 4px 0;margin-bottom:clamp(16px,4.2vh,52px);
}
#kif-app .kif-frag{display:flex;align-items:center;gap:7px}
#kif-app .kif-frag-l{
  font-weight:600;font-size:15px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  /* ink-2 statt ink-3: die Leiste sitzt oben links, also genau ueber dem hellsten
     Lichtfleck, und 15px halbfett auf Glas ist mit ink-3 unter 4.5:1. Der
     Unterschied "freigeschaltet/offen" traegt ohnehin die gefuellte Flaeche. */
  color:var(--kif-ink-2);background:var(--kif-glass);box-shadow:inset 0 1px 0 var(--kif-lip);
  transition:color .3s ease-out,background .3s ease-out,opacity .3s ease-out,transform .3s cubic-bezier(.16,1,.3,1);
}
/* FRAG-Reveal: Buchstaben starten unsichtbar/verkleinert und poppen
   nacheinander auf (Klasse wird per JS zeitversetzt entfernt). */
#kif-app .kif-frag-hidden{opacity:0;transform:scale(.4)}
#kif-app .kif-frag-l.kif-on{color:var(--kif-acc-i);background:var(--kif-acc);box-shadow:none}
#kif-app.kif-a11y .kif-frag-l{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app.kif-a11y .kif-frag-l.kif-on{outline:2px solid var(--kif-acc)}
#kif-app .kif-frag-n{font-size:14px;color:var(--kif-ink-3);margin-left:10px;font-weight:400}
#kif-app .kif-shell-ctl{display:flex;align-items:center;gap:11px}
#kif-app .kif-seg{display:flex;padding:4px;border-radius:999px;background:var(--kif-glass);box-shadow:inset 0 1px 0 var(--kif-lip)}
#kif-app.kif-a11y .kif-seg{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-seg-btn{
  font:inherit;font-size:14px;font-weight:400;border:0;cursor:pointer;padding:8px 18px;border-radius:999px;
  background:transparent;color:var(--kif-ink-2);transition:background .28s ease-out,color .28s ease-out;
}
#kif-app.kif-a11y .kif-seg-btn{border-radius:10px}
#kif-app .kif-seg-btn.kif-on{background:var(--kif-acc);color:var(--kif-acc-i);font-weight:500}
#kif-app .kif-a11y-btn{
  display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:400;
  padding:10px 19px;border-radius:999px;cursor:pointer;border:0;color:var(--kif-ink-2);
  background:var(--kif-glass);box-shadow:inset 0 1px 0 var(--kif-lip);transition:color .28s ease-out;
}
#kif-app.kif-a11y .kif-a11y-btn{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-acc);color:var(--kif-acc);background:transparent}
#kif-app .kif-a11y-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
/* [hidden] ohne diese Regel verliert gegen die eigene display:inline-flex-Regel
   oben (Spezifitaet) — dieselbe Falle wie .kif-dock/.kif-nav/.kif-errfocus/
   .kif-dash-deltas, hier aber uebersehen (Kritik-Fund /impeccable critique):
   der Admin-Toggle blieb sichtbar, bevor ueberhaupt ein Code eingegeben war. */
#kif-app .kif-admin-toggle[hidden]{display:none}

/* ---------- Admin-Sprungnavigation (nur Code "Admin1") ---------- */
/* Dropdown INNERHALB von .kif-window (position:absolute relativ zum
   Fenster, dessen eigenes overflow:hidden es sauber clippt) statt eines
   Panels daneben — das Fenster selbst bleibt dadurch IMMER in
   Originalgroesse, keine eigene max-width/margin-Regel mehr noetig
   (Kritik-Fund, Nutzer-Feedback: "alles in Originalgröße"). Standardmaessig
   zu (.kif-open schaltet auf), "wie so ein Info-Ding", das den Inhalt nur
   kurz ueberdeckt statt ihn dauerhaft zu verdraengen. */
.kif-admin-panel{
  position:absolute;top:70px;right:var(--kif-pad-x);z-index:30;
  width:240px;max-height:min(72%, 520px);overflow-y:auto;
  background:var(--kif-solid);border-radius:18px;padding:14px;
  box-shadow:inset 0 1px 0 var(--kif-lip),var(--kif-shadow-panel-act);
  backdrop-filter:var(--kif-blur);-webkit-backdrop-filter:var(--kif-blur);
  opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;pointer-events:none;
  transition:opacity .18s ease-out,transform .18s cubic-bezier(.16,1,.3,1);
}
.kif-admin-panel.kif-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.kif-admin-panel-head{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--kif-ink-3);margin:0 0 10px}
.kif-admin-panel-list{display:flex;flex-direction:column;gap:2px}
.kif-admin-row{display:block;width:100%;text-align:left;font:inherit;font-size:14px;color:var(--kif-ink-2);background:none;border:0;border-radius:10px;padding:8px 10px;cursor:pointer}
.kif-admin-row:hover{background:var(--kif-glass);color:var(--kif-ink)}
.kif-admin-row-current{background:var(--kif-acc);color:var(--kif-acc-i);font-weight:500}
.kif-admin-sub{display:flex;flex-direction:column;gap:1px;margin:2px 0 8px;padding-left:14px}
.kif-admin-substep{display:block;width:100%;text-align:left;font:inherit;font-size:12.5px;color:var(--kif-ink-3);background:none;border:0;border-radius:10px;padding:5px 8px;cursor:pointer}
.kif-admin-substep:hover{background:var(--kif-glass);color:var(--kif-ink-2)}
.kif-admin-substep-current{color:var(--kif-acc);font-weight:500}
/* Toggle-Button: gleiche Basis wie .kif-a11y-btn (siehe index.html), eigener
   "an"-Zustand nach demselben Muster wie .kif-seg-btn.kif-on. */
.kif-admin-toggle.kif-on{background:var(--kif-acc);color:var(--kif-acc-i)}
.kif-admin-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}

/* ---------- Lehrer-Schnellzugriff (nur Code "Lehrer1") ---------- */
/* Ein einzelner, immer sichtbarer Button statt einer Navigation: Lehrkraefte
   sollen den Kurs normal durchlaufen, nicht durch Stationen springen. */
.kif-teacher-dash-btn{
  position:fixed;right:20px;bottom:20px;z-index:40;
  display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:500;
  padding:12px 18px;border-radius:999px;border:0;cursor:pointer;
  background:var(--kif-acc);color:var(--kif-acc-i);box-shadow:var(--kif-shadow-dock);
}
.kif-teacher-dash-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.kif-teacher-dash-btn:hover{filter:brightness(1.05)}
/* Gleiche [hidden]-Falle wie beim Admin-Toggle oben, hier sogar mit echter
   Funktionsluecke: der Klick-Handler in app.js hat keine eigene teacherMode-
   Pruefung, der Button navigierte also wirklich zum Dashboard, nicht nur
   sichtbar (Kritik-Fund /impeccable critique). */
#kif-app .kif-teacher-dash-btn[hidden]{display:none}

/* Screen-Mount */
/* Scrollt bei Bedarf INNERHALB des Fensters. min-height:0 ist zwingend, sonst
   weigert sich ein Flex-Kind, unter seine Inhaltshoehe zu schrumpfen, und das
   Fenster wuerde doch wieder wachsen. */
#kif-screen{
  position:relative;z-index:1;width:100%;max-width:min(90vw, 2000px);margin:0 auto;
  flex:1 1 auto;min-height:0;overflow-y:hidden;overflow-x:hidden;overscroll-behavior:contain;
}
/* Gesetzt von fitScreen() (app.js), wenn der Inhalt ohne Skalierung passt (k>=1):
   zentriert kurzen Inhalt vertikal, statt ihn oben kleben zu lassen und darunter
   Leerraum zu erzeugen. Bei k<1 wird die Klasse wieder entfernt, damit sie nicht
   mit transform-origin:top center der Skalierungslogik in die Quere kommt
   (siehe DESIGN.md -> Layout -> The Measure-Don't-Predict Rule). */
#kif-screen.kif-center{display:flex;flex-direction:column;justify-content:center}
/* Wird von fitScreen() in app.js gemessen und bei Bedarf herunterskaliert, damit
   der komplette Screen ohne Scrollen sichtbar bleibt — unabhaengig von Browser,
   Schriftmetrik und Zoomstufe. transform-origin oben mittig, damit der Inhalt
   beim Skalieren nicht wegwandert. */
/* margin-inline:auto ist beim HOCHskalieren zwingend: fitScreen() verschmaelert
   die Box dann auf 100/z Prozent (Breiten-Gegenkompensation), und ohne auto
   klebte sie links statt mittig unter transform-origin: top center. */
/* Kein will-change: fitScreen() setzt das transform einmalig pro Messung, das ist
   keine laufende Animation. Ein dauerhaftes will-change haette jeden Screen
   permanent auf eine eigene Compositor-Ebene gehoben, inklusive aller
   Glasflaechen darin — teuer genau auf den alten Rechnern, fuer die der Kurs
   gebaut ist. */
#kif-app .kif-fit{transform-origin:top center;width:100%;margin-inline:auto}

/* Scroll-Hinweis fuer den Skalierungs-Boden (SCALE_FLOOR, app.js fitScreen()):
   trifft ein Screen so dicht, dass selbst am Boden noch gescrollt werden muss
   (z.B. Mission 5s dichte Aufloesungen), gibt es sonst kein Signal, dass unten
   noch Inhalt und der Weiter-Button folgen — ein Kritik-Fund, der reale
   Nutzer:innen auf kurzen Fenstern stranden liesse. Liegt als Geschwister von
   .kif-fit (nicht als Kind), ueberlebt dadurch jeden Stationswechsel
   innerhalb einer Mission unveraendert (shell() ersetzt nur .kif-fit).
   position:sticky statt fixed/JS-Scroll-Listener: der Hinweis "faengt" den
   unteren Rand des Scroll-Containers automatisch ein, sobald noch gescrollt
   werden kann, und verschmilzt von selbst mit dem echten Seitenende, sobald
   nicht mehr — ganz ohne eigene Scroll-Logik. */
#kif-app .kif-scroll-cue{
  position:sticky;bottom:0;left:0;right:0;height:0;overflow:visible;
  pointer-events:none;display:flex;align-items:flex-end;justify-content:center;
  z-index:2;
}
#kif-screen.kif-floor .kif-scroll-cue{height:48px}
#kif-app .kif-scroll-cue::before{
  content:'';position:absolute;inset:auto 0 0 0;height:64px;
  background:linear-gradient(to bottom, transparent, var(--kif-win) 76%);
  opacity:0;transition:opacity .3s ease-out;
}
#kif-screen.kif-floor .kif-scroll-cue::before{opacity:1}
#kif-app.kif-a11y .kif-scroll-cue::before{background:linear-gradient(to bottom, transparent, var(--kif-bg) 82%)}
#kif-app .kif-scroll-chevron{
  position:relative;z-index:1;width:30px;height:30px;margin-bottom:6px;border-radius:50%;
  display:grid;place-items:center;background:var(--kif-film-3);color:var(--kif-ink-2);
  opacity:0;transition:opacity .3s ease-out;animation:kif-scroll-float 1.6s ease-in-out infinite;
}
#kif-screen.kif-floor .kif-scroll-chevron{opacity:1}
#kif-app.kif-a11y .kif-scroll-chevron{outline:2px solid var(--kif-lip)}
#kif-app .kif-scroll-chevron svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes kif-scroll-float{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* Primitive: Headline / Body */
#kif-app h1{font-weight:500;font-size:clamp(30px,3.6vw,60px);line-height:1.06;letter-spacing:-.028em;text-align:center;max-width:19ch;margin:0 auto;text-wrap:balance}
#kif-app[data-theme="b"] h1{font-size:clamp(27px,3.2vw,52px);font-weight:400}
#kif-app.kif-a11y h1{letter-spacing:-.008em}
#kif-app h1 .kif-acc-text{color:var(--kif-acc)}
#kif-app .kif-sub{text-align:center;margin:clamp(12px,1.6vh,20px) auto 0;font-size:18px;color:var(--kif-ink-2);max-width:44ch}
/* .kif-flow-label: kleines Vorspann-Label vor einer Frage, wenn ein
   Zwischenschritt (eigener Button/eigene Zeile) durch ein reines Label
   ersetzt wird (Mission 2 A3, "Alternative:" statt Button "Und jetzt?"). */
#kif-app .kif-flow-label{display:block;text-align:center;font-size:14px;font-weight:500;letter-spacing:.03em;color:var(--kif-ink-3);margin:clamp(20px,3vh,32px) auto 0}
#kif-app .kif-question{text-align:center;margin:clamp(20px,3vh,36px) auto 0;font-size:clamp(20px,1.7vw,26px);font-weight:500;letter-spacing:-.016em;color:var(--kif-ink);max-width:52ch}

/* Primitive: Primary Button */
#kif-app .kif-btn-primary{
  font:inherit;font-size:15px;font-weight:500;padding:11px 28px;border-radius:999px;border:0;cursor:pointer;
  background:var(--kif-acc);color:var(--kif-acc-i);transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .25s ease-out;
}
#kif-app.kif-a11y .kif-btn-primary{border-radius:10px;outline:3px solid var(--kif-acc)}
#kif-app .kif-btn-primary:hover:not(:disabled){transform:translateY(-2px)}
#kif-app .kif-btn-primary:disabled{opacity:.34;cursor:not-allowed;background:var(--kif-film);color:var(--kif-ink-3)}
#kif-app.kif-a11y .kif-btn-primary:disabled{outline-color:var(--kif-lip)}
/* Scharf-Zustand fuer .kif-btn-primary (zugang.js Code-Regenerieren) — gleiches
   Prinzip wie .kif-btn-ghost.kif-armed, siehe dort. */
#kif-app .kif-btn-primary.kif-armed{background:var(--kif-no);color:var(--kif-on-badge)}
#kif-app.kif-a11y .kif-btn-primary.kif-armed{outline-color:var(--kif-no)}

/* Karussell (Coverflow) — Signature-Komponente, für Sortieraufgaben */
#kif-app{ --kif-panel-w:clamp(260px, 27vw, 440px) }
#kif-app .kif-flow{position:relative;height:clamp(150px,26vh,330px);margin:clamp(14px,3vh,44px) 0 clamp(14px,3.2vh,48px);perspective:1500px;perspective-origin:50% 46%}
#kif-app .kif-panel{
  position:absolute;left:50%;top:0;width:var(--kif-panel-w);margin-left:calc(var(--kif-panel-w) / -2);
  min-height:clamp(110px,18vh,230px);
  text-align:left;font:inherit;cursor:pointer;color:var(--kif-ink);border:0;padding:clamp(20px,2.6vh,32px) clamp(20px,1.8vw,30px);border-radius:28px;
  background:var(--kif-glass);
  box-shadow:inset 0 1px 0 var(--kif-lip),var(--kif-shadow-panel);
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .4s ease-out,background .22s ease-out,box-shadow .3s ease-out;
  transform-style:preserve-3d;
}
/* Blur NUR auf der aktiven Tafel, nicht auf den Nachbarn: sichtbar sind bis zu
   drei Tafeln gleichzeitig, mit Blur auf allen dreien lagen vier
   backdrop-filter-Ebenen uebereinander (Fenster + 3). The Two-Glass Rule
   erlaubt genau zwei, und meint mit der zweiten ausdruecklich "die im Fokus
   stehende Tafel". Die Nachbarn tragen ihre Glaswirkung ueber Flaeche, Lip und
   Schatten, wie Ablage und Dock auch. */
#kif-app .kif-panel.kif-act{backdrop-filter:var(--kif-blur);-webkit-backdrop-filter:var(--kif-blur)}
/* Nach dem Aufloesen sind alle Tafeln abgelegt — der leere Karussell-Bereich
   soll dann keinen Platz mehr reservieren. */
#kif-app .kif-flow:empty{height:0;margin:0}
#kif-app .kif-panel:hover{background:var(--kif-glass-3)}
#kif-app .kif-panel.kif-act{cursor:grab;background:var(--kif-glass-2);box-shadow:inset 0 1px 0 var(--kif-lip-2),var(--kif-shadow-panel-act)}
#kif-app .kif-panel.kif-act:hover{background:var(--kif-glass-3);box-shadow:inset 0 1px 0 var(--kif-lip-2),var(--kif-shadow-panel-hov)}
#kif-app .kif-panel.kif-act:active{cursor:grabbing}
#kif-app .kif-pt{font-size:23px;line-height:1.32;font-weight:400;letter-spacing:-.012em;display:block}
#kif-app .kif-panel.kif-act .kif-pt{font-size:24px}
/* Volle Ink-Farbe statt ink-3: der Zaehler sitzt auf der aktiven Tafel, also auf
   Glass-2 ueber einem Lichtfleck — die hellste Kombination im System, bei der
   auch ink-2 (4.21:1) noch unter der AA-Grenze bleibt. Zurueckhaltend wirkt die
   Zeile ueber ihre 13px und das Tracking, nicht ueber Abdunkelung. */
#kif-app .kif-pn{display:block;font-size:13px;color:var(--kif-ink);margin-bottom:16px;letter-spacing:.03em}

#kif-app.kif-a11y .kif-flow{height:auto;perspective:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:36px 0 44px}
#kif-app.kif-a11y .kif-panel{
  position:static;width:auto;margin:0;min-height:0;padding:22px 24px;border-radius:14px;
  transform:none!important;opacity:1!important;box-shadow:none;outline:2px solid var(--kif-lip);
}
#kif-app.kif-a11y .kif-panel:hover{background:var(--kif-glass-2)}
#kif-app.kif-a11y .kif-panel.kif-act{outline:3px solid var(--kif-acc)}
#kif-app.kif-a11y .kif-pt{font-size:18px}

/* Ablagen (Drop-Zones) */
#kif-app .kif-shelves{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,34px);margin-bottom:clamp(20px,3.2vh,38px)}
#kif-app .kif-shelf{
  border-radius:28px;padding:clamp(16px,2vh,24px) clamp(18px,1.6vw,26px);cursor:pointer;border:0;
  background:var(--kif-solid);
  box-shadow:inset 0 1px 0 var(--kif-lip-soft);
  transition:background .26s ease-out,box-shadow .26s ease-out,transform .26s cubic-bezier(.16,1,.3,1);
}
#kif-app.kif-a11y .kif-shelf{border-radius:14px;background:var(--kif-glass);box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-shelf:hover{background:var(--kif-solid-2)}
/* Bewusst OHNE transform:scale() beim Hervorheben: die Kombination aus
   border-radius + inset box-shadow + transform loest in Safari einen
   Rendering-Bug aus, bei dem die Ecken der Rundung ploetzlich eckig
   erscheinen, genau in dem Moment, in dem eine Kachel ueber die Ablage
   gezogen wird. Der Ring wird dafuer etwas kraeftiger (3px), damit das
   Hervorheben trotzdem deutlich bleibt. */
#kif-app .kif-shelf.kif-over,#kif-app .kif-shelf.kif-tgt{background:var(--kif-solid-2);box-shadow:inset 0 0 0 3px var(--kif-acc)}
#kif-app.kif-a11y .kif-shelf.kif-over,#kif-app.kif-a11y .kif-shelf.kif-tgt{outline:3px solid var(--kif-acc);box-shadow:none}
#kif-app .kif-shelf[aria-disabled="true"]{cursor:default}
#kif-app .kif-shelf[aria-disabled="true"]:hover{background:var(--kif-solid)}
#kif-app .kif-sl{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(10px,1.6vh,18px)}
#kif-app .kif-st{font-size:24px;font-weight:500;letter-spacing:-.016em;margin:0}
#kif-app .kif-sn{font-size:14px;color:var(--kif-ink-3);flex:0 0 auto}
#kif-app .kif-sbody{display:grid;gap:8px;min-height:clamp(64px,11vh,120px);align-content:start}
#kif-app .kif-sbody:empty::after{content:'noch leer';color:var(--kif-ink-3);font-size:15px;padding:40px 0;text-align:center}

/* Mission 1, leere Ablage (Nutzer-Wunsch): solange nichts liegt, steht der
   Titel mittig in der Kachel statt oben links, kein "noch leer" mehr — der
   Zaehler bleibt oben rechts stehen. Sobald die erste Kachel liegt, faellt
   kif-shelf--empty weg (mission-1.js/updateCounts()) und es sieht wieder aus
   wie der Normalzustand oben. Bewusst auf .kif-shelves--m1 begrenzt: dieselbe
   Ablagen-Optik traegt auch Mission 4/A3, die unveraendert bleiben soll. */
#kif-app .kif-shelves--m1 .kif-shelf{position:relative}
#kif-app .kif-shelves--m1 .kif-shelf.kif-shelf--empty{min-height:clamp(110px,15vh,170px)}
#kif-app .kif-shelves--m1 .kif-shelf.kif-shelf--empty .kif-sn{position:absolute;top:clamp(16px,2vh,24px);right:clamp(18px,1.6vw,26px)}
#kif-app .kif-shelves--m1 .kif-shelf.kif-shelf--empty .kif-st{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:80%;text-align:center;
}
#kif-app .kif-shelves--m1 .kif-shelf.kif-shelf--empty .kif-sbody{display:none}

/* Kachel (in einer Ablage) */
#kif-app .kif-tile{
  position:relative;font-size:15px;line-height:1.42;padding:13px 17px;border-radius:16px;color:var(--kif-ink);
  background:var(--kif-glass);box-shadow:inset 0 1px 0 var(--kif-lip);
  transition:transform .22s cubic-bezier(.16,1,.3,1);
}
#kif-app.kif-a11y .kif-tile{box-shadow:none;outline:2px solid var(--kif-lip);border-radius:10px}
#kif-app .kif-tw{display:block;font-size:15px;line-height:1.5;color:var(--kif-ink);margin-top:10px;padding-top:10px;box-shadow:inset 0 1px 0 var(--kif-lip)}
/* Farbflaeche statt duennem Rahmen: die ganze Kachel traegt die Aussage, nicht
   nur ihre Kante — liest sich als eine Karte, nicht als neutrale Notiz mit Rand. */
#kif-app .kif-tile[data-v="1"]{background:var(--kif-ok-wash)}
#kif-app .kif-tile[data-v="0"]{background:var(--kif-no-wash)}
#kif-app.kif-a11y .kif-tile[data-v="1"]{outline:3px solid var(--kif-ok);background:var(--kif-glass)}
#kif-app.kif-a11y .kif-tile[data-v="0"]{outline:3px solid var(--kif-no);background:var(--kif-glass)}
/* Nur Fehler-Kacheln wachsen beim Hovern — hilft genau dort beim Lesen der
   Begruendung, wo es noetig ist; richtige Antworten brauchen das nicht. */
#kif-app .kif-tile[data-v="0"]:hover{transform:scale(1.035);z-index:5}
/* Icon in einem vollflaechigen Kreis-Badge statt frei schwebend — liest sich
   auf den ersten Blick, statt als kleines Detail in der Ecke. */
#kif-app .kif-mk-badge{
  position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
}
#kif-app .kif-tile[data-v="1"] .kif-mk-badge{background:var(--kif-ok)}
#kif-app .kif-tile[data-v="0"] .kif-mk-badge{background:var(--kif-no)}
#kif-app.kif-a11y .kif-mk-badge{width:24px;height:24px}
#kif-app .kif-mk{width:15px;height:15px;fill:none;stroke:var(--kif-on-badge);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#kif-app .kif-tile[data-v] > span:first-of-type{padding-right:36px;display:block}

/* Dock — Prev/Next, Dot-Pagination, Primary-CTA */
#kif-app .kif-dock{
  display:flex;align-items:center;gap:12px;padding:9px 9px 9px 14px;border-radius:999px;width:fit-content;margin:0 auto;
  background:var(--kif-solid);
  box-shadow:inset 0 1px 0 var(--kif-lip),var(--kif-shadow-dock);
}
/* [hidden] allein reicht nicht: das display:flex oben hat hoehere Spezifitaet
   als die UA-Regel fuer [hidden] und wuerde sie sonst stillschweigend ausser
   Kraft setzen (dock.hidden=true haette dann keine sichtbare Wirkung). */
#kif-app .kif-dock[hidden]{display:none}
/* Sobald das Karussell leer ist (alle Tafeln abgelegt), sind Pfeile/Dots totes
   UI — nur noch Auflösen bleibt sichtbar, die Pille bekommt symmetrisches
   Padding statt der frueheren Pfeil-Polsterung. */
#kif-app .kif-dock.kif-solo{padding:9px}
#kif-app.kif-a11y .kif-dock{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-nav{
  position:relative;
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:var(--kif-film);color:var(--kif-ink-2);transition:background .25s ease-out,color .25s ease-out;
}
#kif-app.kif-a11y .kif-nav{border-radius:10px;outline:2px solid var(--kif-lip)}
#kif-app .kif-nav:hover:not(:disabled){background:var(--kif-film-2);color:var(--kif-ink)}
#kif-app .kif-nav:disabled{opacity:.32;cursor:not-allowed}
#kif-app .kif-nav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Gleiche [hidden]-Spezifitaetsfalle wie beim Dock (display:grid/flex oben). */
#kif-app .kif-nav[hidden],#kif-app .kif-dots[hidden]{display:none}
#kif-app .kif-dots{display:flex;gap:7px;padding:0 6px}
#kif-app .kif-dot{width:7px;height:7px;border-radius:50%;background:var(--kif-film-3);transition:background .3s ease-out,transform .3s ease-out}
#kif-app .kif-dot.kif-on{background:var(--kif-acc);transform:scale(1.5)}
#kif-app .kif-dot.kif-done{background:var(--kif-film-4)}
#kif-app.kif-a11y .kif-dot{width:9px;height:9px;background:var(--kif-lip)} #kif-app.kif-a11y .kif-dot.kif-on{background:var(--kif-acc)}

/* Ergebnis-Ring (Result Ring) — Signature-Komponente des Aufloesungs-Moments.
   Erscheint gross, fuellt sich auf den echten Prozentwert, schrumpft danach zur
   kleinen Abschluss-Marke. Farbe immer --kif-acc: das ist eine Zusammenfassung,
   keine Note (Produktprinzip "Erleben statt Bewerten"), deshalb nie rot/gruen. */
#kif-app .kif-out{max-width:66ch;margin:0 auto;text-align:center}
/* Spalte statt Reihe: Ring und Bildunterschrift nebeneinander (flex-row) zogen
   den Ring optisch aus der Mitte, weil die Zeile rechts daneben Platz brauchte
   und justify-content:center dann die GRUPPE zentrierte, nicht den Ring selbst.
   Untereinander ist der Ring immer exakt mittig, unabhaengig von der
   Textlaenge der Bildunterschrift. */
#kif-app .kif-ring-row{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  margin-top:clamp(16px,3vh,32px);
}
/* Groesse animiert ausschliesslich per transform: scale(), nie per width/height
   (Layout-Thrash). Die Box reserviert immer die GROSSE Groesse (140px) — beim
   Schrumpfen nutzt der Ring dann weniger Platz, als reserviert ist. Das ist die
   sichere Reflow-Richtung: ein Element kann seine eigene reservierte Flaeche nie
   sprengen, nur unterfuellen. stroke-width und Zahlengroesse skalieren automatisch
   mit, weil sie Nachfahren des transformierten Elements sind — keine eigene
   Transition noetig. */
/* Groesse von 156px auf 180px angehoben: nebeneinander mit der Bildunterschrift
   wirkte der Ring klein, weil die Zeile rechts optisch mehr Gewicht hatte.
   Jetzt steht er allein in seiner Reihe (siehe .kif-ring-row) und darf dafuer
   auch sichtbar groesser sein. */
#kif-app .kif-ringwrap{
  position:relative;width:180px;height:180px;flex:0 0 auto;
  transform:scale(1);transform-origin:center;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-ringwrap.kif-ring-small{transform:scale(0.3667)} /* 66/180 */
#kif-app .kif-ring{width:100%;height:100%;transform:rotate(-90deg);display:block}
#kif-app .kif-ring circle{fill:none;stroke-width:12}
#kif-app .kif-ring-track{stroke:var(--kif-lip)}
#kif-app .kif-ring-fill{stroke:var(--kif-acc);stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1)}
#kif-app .kif-ring-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
#kif-app .kif-ring-pct{font-size:38px;font-weight:500;letter-spacing:-.02em;color:var(--kif-ink)}
#kif-app.kif-a11y .kif-ring-track{stroke:var(--kif-ink-3)}
#kif-app .kif-ring-caption{
  font-size:16px;color:var(--kif-ink-2);text-align:center;
  opacity:0;transition:opacity .35s ease-out;
}
#kif-app .kif-ring-caption.kif-show{opacity:1}
/* Erkenntnis-Kachel statt Fliesstext: das ist die Kernaussage einer Station,
   nicht Nebentext, und wurde als reiner Fliesstext leicht uebersehen (Nutzer-
   Feedback). Jetzt eine Karte wie .kif-note/.kif-explain, mit demselben
   Overshoot-Pop. --ok/--err faerben sie ein, wenn die vorangegangene Antwort
   eindeutig richtig bzw. falsch war (siehe .kif-choice[data-v] daneben). */
#kif-app .kif-res-copy{
  margin:clamp(14px,2.4vh,24px) auto 0;max-width:56ch;padding:16px 22px;border-radius:20px;
  background:var(--kif-solid);box-shadow:inset 0 1px 0 var(--kif-lip);
  /* 16px -> 18px (Live-Test-Feedback, mehrfach: Korrekturtext wirkte wie
     Nebentext und wurde uebersehen) — jetzt auf Augenhoehe mit .kif-sub/
     .kif-explain-text/.kif-quote, der etablierten "wichtiger Body-Text"-Rolle. */
  font-size:18px;line-height:1.6;color:var(--kif-ink-2);text-align:center;
  opacity:0;transform:translateY(14px) scale(.95);
  transition:opacity .4s ease-out,transform .5s cubic-bezier(.34,1.56,.64,1);
}
#kif-app .kif-res-copy.kif-show{opacity:1;transform:translateY(0) scale(1)}
#kif-app.kif-a11y .kif-res-copy{border-radius:12px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-res-copy--ok{background:var(--kif-ok-wash);color:var(--kif-ink)}
#kif-app .kif-res-copy--err{background:var(--kif-no-wash);color:var(--kif-ink)}
#kif-app.kif-a11y .kif-res-copy--ok{outline-color:var(--kif-ok)}
#kif-app.kif-a11y .kif-res-copy--err{outline-color:var(--kif-no)}
/* Mission 1s Abschlusstext etwas groesser als die App-Norm (Nutzer-Wunsch)
   — erscheint jetzt ausserdem erst unmittelbar vor dem "Weiter"-Button statt
   die ganze Ergebnis-Anzeige ueber im Hintergrund zu stehen (mission-1.js,
   revealWeiter()). Per ID statt Klasse skaliert, damit die geteilte
   .kif-res-copy-Rolle in allen anderen Missionen unveraendert bleibt. */
#kif-app #m1-res-copy{font-size:21px;max-width:60ch;padding:18px 26px}

/* Fehler-Fokus-Karte — nach dem Aufdecken werden falsche Antworten automatisch
   nacheinander einzeln gross gezeigt (Bezugsrahmen: .kif-shelves-stage, Overlay
   ueber den Ablagen statt zusaetzlicher Block im Fluss — aendert .kif-fit's
   scrollHeight dadurch nicht, siehe The Measure-Don't-Predict Rule). */
#kif-app .kif-shelves-stage{position:relative}
#kif-app .kif-shelves.kif-dim{filter:blur(7px) brightness(.72);pointer-events:none;transition:filter .4s ease-out}
/* Kein blur() im Kontrast-Modus (Konvention). Eine nur gedimmte Ablage wuerde
   denselben Aussagetext doppelt (Kachel + Fokus-Karte) leserlich uebereinander
   zeigen — deshalb hier komplett ausblenden statt nur abzudunkeln. */
#kif-app.kif-a11y .kif-shelves.kif-dim{visibility:hidden}
#kif-app .kif-errfocus{
  position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;
  padding:12px;opacity:0;pointer-events:none;transition:opacity .35s ease-out;
}
#kif-app .kif-errfocus.kif-show{opacity:1;pointer-events:auto}
/* Gleiche Spezifitaets-Falle wie beim Dock: display:flex oben wuerde die
   UA-[hidden]-Regel sonst ausser Kraft setzen. */
#kif-app .kif-errfocus[hidden]{display:none}
#kif-app .kif-errcard{
  max-width:min(760px,94%);text-align:center;padding:clamp(28px,3.4vh,40px) clamp(28px,2.8vw,48px);
  border-radius:24px;background:var(--kif-glass-2);
  backdrop-filter:var(--kif-blur);-webkit-backdrop-filter:var(--kif-blur);
  box-shadow:inset 0 1px 0 var(--kif-lip-2),var(--kif-shadow-focus);
}
#kif-app.kif-a11y .kif-errcard{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-no);background:var(--kif-glass-2);backdrop-filter:none}
#kif-app .kif-errcard .kif-mk-badge{position:static;margin:0 auto 14px;width:40px;height:40px;background:var(--kif-no)}
#kif-app .kif-errcard-t{font-size:23px;font-weight:500;line-height:1.32;letter-spacing:-.012em;margin:0}
/* Volle Ink-Farbe: die Karte liegt auf Glass-2, der hellsten Flaeche im System,
   dort reicht selbst ink-2 nicht sicher fuer 4.5:1. Ruhig bleibt die Zeile ueber
   ihre Groesse, nicht ueber Abdunkelung — und "Richtig waere gewesen" ist die
   eigentliche Information der Karte, nicht eine Randnotiz. */
#kif-app .kif-errcard-correct{font-size:14px;color:var(--kif-ink);margin-top:12px}
#kif-app .kif-errcard-w{
  display:block;margin-top:16px;padding-top:16px;box-shadow:inset 0 1px 0 var(--kif-lip);
  font-size:20px;line-height:1.55;color:var(--kif-ink);
}
/* .kif-errcard-body: dritte Textrolle in derselben Karten-Familie, fuer den
   Fall, dass die Karte NUR eine einzelne Erklaerung traegt statt Titel +
   "richtig waere gewesen" + Begruendung (Mission 2 A2/A3, siehe
   renderFocusReveal in _shared.js) — reiner Fliesstext ohne die 23px/500er
   Titel-Anmutung von .kif-errcard-t, die fuer einen ganzen Absatz zu schwer wirkte. */
#kif-app .kif-errcard-body{font-size:20px;font-weight:400;line-height:1.55;color:var(--kif-ink);margin:0}
/* Mission 2, A3 (Nutzer-Wunsch): Aufzaehlung unter der Erklaerung, wenn alle
   Antwortoptionen einer Station im Nachhinein als richtig gelten sollen --
   gleiche Punkt-Sprache wie .kif-disclosure-panel li (Nachbesprechung). */
#kif-app .kif-errcard-bullets{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px;text-align:left}
#kif-app .kif-errcard-bullets li{position:relative;padding-left:18px;font-size:16px;line-height:1.5;color:var(--kif-ink-2)}
#kif-app .kif-errcard-bullets li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--kif-ink-3)}
/* Fokus-Reveal-Buehne (Mission 2 A2/A3 via renderFocusReveal) — gleiches
   Zwei-Klassen-Paar wie .kif-shelves-stage/.kif-shelves.kif-dim bzw.
   .kif-browser-dimmable.kif-dim, hier als generischer Name fuer Stellen ohne
   eigene spezifischere Komponente. */
#kif-app .kif-focus-stage{position:relative}
#kif-app .kif-focus-dimmable.kif-dim{filter:blur(6px) brightness(.75);transition:filter .4s ease-out;pointer-events:none}
#kif-app.kif-a11y .kif-focus-dimmable.kif-dim{filter:none;opacity:.4;pointer-events:none}
#kif-app .kif-errdock{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px}
#kif-app .kif-errdock .kif-dots{display:flex;gap:7px;padding:0}

/* Mission 1, Fehler-Fokus-Karte: deutlich groesser (Nutzer-Wunsch, woertlich
   "doppelt so gross"), plus neue Choreografie innerhalb der Karte (Pfeil,
   dann verzoegert eine gelb hervorgehobene Erklaer-Kachel statt sofortigem
   Fliesstext). Bewusst unter "#m1-errfocus" (die ID aus mission-1.js' A1-
   Template) statt an den geteilten .kif-errcard-Regeln oben veraendert:
   dieselbe Karten-Familie traegt auch Mission 2s renderFocusReveal, Mission
   4/A3 und den Pruefungs-Tisch-Overlay (.kif-desk-card) — die sollen von
   dieser (erstmal auf Mission 1 begrenzten) Anfrage unberuehrt bleiben. */
#kif-app #m1-errfocus .kif-errcard{max-width:min(1200px,95%);padding:clamp(40px,5.4vh,64px) clamp(40px,4.4vw,72px)}
#kif-app #m1-errfocus .kif-errcard-t{font-size:clamp(30px,3.2vw,40px);line-height:1.28}
#kif-app #m1-errfocus .kif-errcard-correct{font-size:clamp(18px,1.6vw,22px);margin-top:16px}

/* Mission 2, A2 (Nutzer-Wunsch): Ueberschrift + Frage zu einer einzigen h1
   zusammengelegt (renderA2 in mission-2.js), das nachtraeglich erscheinende
   Folgezitat ("Was kannst du der KI sagen...") groesser und naeher an die
   Vergleichs-Kacheln herangezogen; die abschliessende renderFocusReveal-Karte
   (gleiche kif-errcard-Familie wie oben bei #m1-errfocus beschrieben)
   ausschliesslich hier groesser, mit staerkerem Hintergrund-Blur. */
#kif-app #m2-a2-f2 .kif-question{font-size:clamp(24px,2.1vw,32px);margin-top:clamp(10px,1.8vh,20px)}
#kif-app #m2-a2 .kif-focus-dimmable.kif-dim{filter:blur(10px) brightness(.7)}
#kif-app #m2-a2 .kif-errcard{max-width:min(880px,95%);padding:clamp(32px,4vh,48px) clamp(32px,3.2vw,56px)}
#kif-app #m2-a2 .kif-errcard-body{font-size:clamp(20px,1.9vw,24px)}

/* Mission 2, A3 (Nutzer-Wunsch, Live-Test-Feedback: Kartentext auf dem
   Screenshot schwer lesbar, viel Text/drei Kaesten hinter der Karte):
   gleiches Prinzip wie #m2-a2 oben, staerkerer Hintergrund-Blur nur fuer
   diese eine Station. */
#kif-app #m2-a3 .kif-focus-dimmable.kif-dim{filter:blur(12px) brightness(.65)}
#kif-app #m1-errfocus .kif-m1-err-arrow{
  display:block;width:24px;height:24px;margin:16px auto 0;
  fill:none;stroke:var(--kif-ink-3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
/* Die Erklaerung (c.w) steht jetzt als eigene, gelb hervorgehobene Kachel
   statt als direkt angehaengter Fliesstext (Nutzer-Wunsch: "man muss mehr
   sehen, dass das hier gerade die Antwort ist") — poppt erst nach kurzer
   Pause auf (siehe renderErrorCard(), 700ms), damit "Richtig wäre gewesen"
   zuerst fuer sich steht. Gleiches Wash-Prinzip wie .kif-note--ok/--err,
   nur mit der neuen dritten Statusfarbe (--kif-warn). */
#kif-app #m1-errfocus .kif-m1-err-explain{
  display:flex;align-items:center;gap:12px;text-align:left;
  margin:22px auto 0;max-width:520px;padding:16px 22px;border-radius:18px;
  background:var(--kif-warn-wash);box-shadow:inset 0 1px 0 var(--kif-lip-soft);
  opacity:0;transform:translateY(8px);
  transition:opacity .4s ease-out,transform .4s cubic-bezier(.16,1,.3,1);
}
#kif-app #m1-errfocus .kif-m1-err-explain.kif-show{opacity:1;transform:translateY(0)}
#kif-app #m1-errfocus .kif-m1-err-explain span:last-child{font-size:21px;line-height:1.48;color:var(--kif-ink);font-weight:500}
#kif-app #m1-errfocus .kif-m1-err-bang{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:28px;height:28px;border-radius:50%;background:var(--kif-warn);color:var(--kif-on-badge);
  font-weight:700;font-size:16px;
}
#kif-app.kif-a11y #m1-errfocus .kif-m1-err-explain{background:var(--kif-glass);outline:2px solid var(--kif-warn);box-shadow:none}
#kif-app #m1-errfocus .kif-errdock{margin-top:28px}
#kif-app .kif-btn-primary.kif-sm{
  padding:8px 20px;font-size:14px;opacity:0;pointer-events:none;
  transition:opacity .35s ease-out,transform .3s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-btn-primary.kif-sm.kif-show{opacity:1;pointer-events:auto}
#kif-app.kif-a11y .kif-btn-primary.kif-sm{border-radius:10px;outline:2px solid var(--kif-acc)}

/* Weiter-Button — erscheint verzoegert (2s / +2s bei Fehlern), fuehrt zu Mission 2. */
#kif-app .kif-weiter{
  margin-top:22px;opacity:0;pointer-events:none;
  transition:opacity .4s ease-out,transform .3s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-weiter.kif-show{opacity:1;pointer-events:auto}

/* Single-Choice / Rangreihe Primitive (für Einstiegstest & spätere Missionen) */
#kif-app .kif-choices{display:grid;gap:clamp(8px,1.2vh,12px);max-width:640px;margin:clamp(22px,3.6vh,44px) auto 0}
/* Nebeneinander-Variante (Nutzer-Wunsch, Mission 2 A3): gleiche Spaltenbreite
   wie .kif-duel--3, damit sich die drei Kaesten in dasselbe Groessengefuehl
   wie die uebrige Karten-Familie einfuegen statt einer eigenen neuen Breite. */
#kif-app .kif-choices--row{grid-template-columns:repeat(3,1fr);max-width:1200px}
#kif-app .kif-choices--row .kif-choice{text-align:center}
@media (max-width: 760px){ #kif-app .kif-choices--row{grid-template-columns:1fr} #kif-app .kif-choices--row .kif-choice{text-align:left} }
#kif-app .kif-choice{
  text-align:left;font:inherit;font-size:18px;line-height:1.4;color:var(--kif-ink);cursor:pointer;border:0;
  /* Kein backdrop-filter: eine Auswahlliste zeigt vier bis fuenf dieser Flaechen
     gleichzeitig, mit Blur lagen im Einstiegstest fuenf Ebenen uebereinander
     (Fenster + 4). Gleiche Loesung wie .kif-claim in Mission 3 — die Glaswirkung
     kommt aus Flaeche und Lip-Highlight, nicht aus dem Blur (The Two-Glass Rule). */
  padding:clamp(13px,1.9vh,18px) 22px;border-radius:28px;background:var(--kif-glass);
  box-shadow:inset 0 1px 0 var(--kif-lip);transition:background .24s ease-out,transform .28s cubic-bezier(.16,1,.3,1);
}
#kif-app.kif-a11y .kif-choice{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-choice:hover{background:var(--kif-glass-2);transform:translateY(-2px)}
#kif-app .kif-choice:focus-visible{transform:translateY(-2px)}
#kif-app .kif-choice:disabled{opacity:.4;cursor:default}
#kif-app .kif-choice:disabled:hover{background:var(--kif-glass);transform:none}
#kif-app .kif-choice.kif-picked:disabled{opacity:1}

/* Richtig/Falsch-Bewertung fuer einzelne Single-Choice-Stationen (z.B. Mission 3
   A2/A3/A4): dieselbe Wash+Badge-Sprache wie .kif-claim/Mission-1-Kachel, hier
   opt-in ueber data-v, damit choiceList() fuer Stationen ohne "eine richtige
   Antwort" (z.B. "alle drei sind gut") unveraendert neutral bleibt. */
#kif-app .kif-choice[data-v]{padding-left:52px;position:relative}
#kif-app .kif-choice[data-v="ok"]{background:var(--kif-ok-wash)}
#kif-app .kif-choice[data-v="err"]{background:var(--kif-no-wash)}
#kif-app.kif-a11y .kif-choice[data-v="ok"]{outline:3px solid var(--kif-ok);background:var(--kif-glass)}
#kif-app.kif-a11y .kif-choice[data-v="err"]{outline:3px solid var(--kif-no);background:var(--kif-glass)}
#kif-app .kif-choice[data-v] .kif-mk-badge{position:absolute;top:50%;left:16px;transform:translateY(-50%)}
/* Bewertete Auswahl muss unmissverstaendlich gruen/rot lesen (Nutzer-Feedback):
   (1) die nicht angetippte richtige Antwort wurde durch :disabled auf 40%
   Deckkraft gedimmt, der 14%-Wash war darauf kaum noch zu sehen, also bleibt
   jede bewertete Option voll deckend; (2) zusaetzlich ein klarer Ring in
   Gruen/Rot, nicht nur der zarte Wash. */
#kif-app .kif-choice[data-v]:disabled{opacity:1}
#kif-app .kif-choice[data-v="ok"]{box-shadow:inset 0 0 0 2.5px var(--kif-ok),inset 0 1px 0 var(--kif-lip)}
#kif-app .kif-choice[data-v="err"]{box-shadow:inset 0 0 0 2.5px var(--kif-no),inset 0 1px 0 var(--kif-lip)}
#kif-app .kif-choice[data-v="ok"].kif-picked{box-shadow:inset 0 0 0 3px var(--kif-ok),inset 0 1px 0 var(--kif-lip)}
#kif-app .kif-choice[data-v="err"].kif-picked{box-shadow:inset 0 0 0 3px var(--kif-no),inset 0 1px 0 var(--kif-lip)}
#kif-app.kif-a11y .kif-choice[data-v]{box-shadow:none}
#kif-app.kif-a11y .kif-choice[data-v="ok"].kif-picked{outline-color:var(--kif-ok)}
#kif-app.kif-a11y .kif-choice[data-v="err"].kif-picked{outline-color:var(--kif-no)}

/* Ausgewaehlte Option — die einzige Stelle ausserhalb von Buttons/Pillen, an
   der Akzentfarbe auf einer Flaeche erscheint, gedeckt durch The One Accent
   Rule ("Auswahl-Highlight" ist eine der erlaubten Akzent-Verwendungen). */
#kif-app .kif-choice.kif-picked,#kif-app .kif-duel-card.kif-picked,#kif-app .kif-compare-card.kif-picked{
  box-shadow:inset 0 0 0 2.5px var(--kif-acc),inset 0 1px 0 var(--kif-lip);
}
#kif-app.kif-a11y .kif-choice.kif-picked,#kif-app.kif-a11y .kif-duel-card.kif-picked,#kif-app.kif-a11y .kif-compare-card.kif-picked{
  outline:3px solid var(--kif-acc);box-shadow:none;
}

/* Chat-Fenster (Mission 2 A1) — eigenstaendige Mock-App statt loser Bubble-Liste
   im Kurs-Look: bewusst dunkel/blickdicht, eigene Kopfzeile, unten angedockte
   Antwort-Chips wie Schnellantwort-Vorschlaege einer echten App. Kein
   backdrop-filter (eine echte App ist blickdicht, nicht durchscheinend — haelt
   ausserdem das Two-Glass-Budget frei), "Glass"-Wirkung kommt rein aus
   Flaeche/Opazitaet/Lip-Highlight, wie bei Ablage/Dock/Ergebnis-Karte. */
#kif-app .kif-chatwin{
  max-width:680px;margin:clamp(18px,2.8vh,30px) auto 0;border-radius:28px;
  background:var(--kif-mock-bg);box-shadow:inset 0 1px 0 var(--kif-lip),var(--kif-shadow-panel);
  overflow:hidden;transition:filter .5s ease-out;
}
#kif-app.kif-a11y .kif-chatwin{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-lip)}
/* Intro-Moment (Mission 2 A1): Fenster kurz verschwommen, waehrend die
   Erklaerungskarte gross im Fokus steht — gleiche Blur-Technik wie Mission 1s
   Fehler-Fokus. pointer-events:none verhindert Taps waehrenddessen. */
#kif-app .kif-chatwin.kif-dim{filter:blur(6px) brightness(.75);pointer-events:none}
#kif-app.kif-a11y .kif-chatwin.kif-dim{filter:none;opacity:.4;pointer-events:none}
#kif-app .kif-chatwin-head{
  display:flex;align-items:center;gap:8px;padding:12px 18px;
  background:var(--kif-mock-head);font-size:13px;font-weight:500;color:var(--kif-ink-2);letter-spacing:.02em;
}
#kif-app .kif-chatwin-dot{width:7px;height:7px;border-radius:50%;background:var(--kif-acc)}
#kif-app .kif-chatwin-body{display:flex;flex-direction:column;gap:10px;padding:16px 18px}

/* Bubbles: KI links neutral, Du rechts voll akzentgefuellt — bewusste,
   dokumentierte Erweiterung von "Akzent nur bei Interaktion" auf diese eine
   simulierte Mock-App-Komponente (The One Accent Rule, DESIGN.md). */
#kif-app .kif-cwbubble{
  max-width:78%;padding:14px 20px;border-radius:18px;font-size:20px;line-height:1.5;
  opacity:0;transform:translateY(8px);transition:opacity .25s ease-out,transform .25s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-cwbubble.kif-show{opacity:1;transform:translateY(0)}
#kif-app .kif-cwbubble--ki{align-self:flex-start;background:var(--kif-mock-bubble);color:var(--kif-ink)}
#kif-app .kif-cwbubble--du{align-self:flex-end;background:var(--kif-acc);color:var(--kif-acc-i)}
#kif-app.kif-a11y .kif-cwbubble{border-radius:10px}
#kif-app.kif-a11y .kif-cwbubble--ki{outline:2px solid var(--kif-lip)}

/* Tipp-Indikator — drei pulsierende Punkte statt sofortiger Antwort, verkauft
   "die KI tippt gerade". Laeuft ueber animation, nicht transition — deshalb
   eigener Eintrag in der reduced-motion-Regel weiter unten noetig. */
#kif-app .kif-cwtyping{align-self:flex-start;display:flex;gap:4px;padding:13px 16px;border-radius:18px;background:var(--kif-mock-bubble)}
#kif-app.kif-a11y .kif-cwtyping{border-radius:10px;outline:2px solid var(--kif-lip)}
#kif-app .kif-cwtyping i{width:6px;height:6px;border-radius:50%;background:var(--kif-ink-3);animation:kif-cwtyping-pulse 1.1s ease-in-out infinite}
#kif-app .kif-cwtyping i:nth-child(2){animation-delay:.15s}
#kif-app .kif-cwtyping i:nth-child(3){animation-delay:.3s}
@keyframes kif-cwtyping-pulse{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* Angedockte Antwort-Chips — probierte Chips bleiben sichtbar, nur gedimmt. */
#kif-app .kif-chatwin-chips{display:flex;flex-wrap:wrap;gap:8px;padding:6px 18px 16px}
#kif-app .kif-chatwin-chips .kif-choice{padding:12px 20px;font-size:16px;background:var(--kif-mock-chip)}
#kif-app .kif-chatwin-chips .kif-choice:hover{background:var(--kif-mock-chip)}
#kif-app .kif-chatwin-chips .kif-choice.kif-tried{opacity:.35;cursor:default}
#kif-app .kif-chatwin-chips .kif-choice.kif-tried:hover{transform:none}
#kif-app.kif-a11y .kif-chatwin-chips .kif-choice{border-radius:10px}

/* Erklaerungs-Karte — bewusst AUSSERHALB des Chat-Fensters, wieder im warmen
   Kurs-Look: signalisiert "das ist die Erkenntnis, nicht Teil der Simulation".
   Ersetzt bei jedem Tap ihren Inhalt (nicht akkumulierend) und re-animiert
   jedes Mal sichtbar, damit sie nicht uebersehen wird. */
/* Deutlicherer "Pop" statt leichtem Einblenden: die Karte traegt die
   Kernerkenntnis der Station und wurde sonst leicht uebersehen. Groesserer
   Versatz + Overshoot-Ease (kommt kurz "zu weit" und federt zurueck) macht den
   Moment spuerbar, ohne dass prefers-reduced-motion betroffen ist (siehe
   Whitelist am Dateiende, transform ist dort ohnehin ausgenommen). */
#kif-app .kif-explain{
  display:flex;align-items:flex-start;gap:12px;max-width:560px;margin:clamp(14px,2.4vh,22px) auto 0;
  padding:16px 20px;border-radius:20px;background:var(--kif-solid);
  /* Ring von 1.5px auf 2.5px plus permanenter Panel-Schatten (vorher nur
     waehrend .kif-intro) — Live-Test-Feedback: die Karte wurde beim
     Aktualisieren leicht uebersehen, der Blick blieb im Chat-Fenster darueber
     haengen. Staerkerer Rahmen + Tiefe heben sie dauerhaft vom Hintergrund ab. */
  box-shadow:inset 0 1px 0 var(--kif-lip),0 0 0 2.5px var(--kif-acc),var(--kif-shadow-panel);
  opacity:0;transform:translateY(16px) scale(.94);
  transition:opacity .4s ease-out,transform .5s cubic-bezier(.34,1.56,.64,1);
}
#kif-app .kif-explain.kif-show{opacity:1;transform:translateY(0) scale(1)}
/* Intro-Moment: Karte steht kurz gross/erhoben im Fokus, bevor sie in ihre
   normale Position "faellt" (Klasse wird nach ~2s entfernt, bestehende
   Transform-Transition der Karte uebernimmt die restliche Animation). */
#kif-app .kif-explain.kif-intro{
  transform:translateY(-48px) scale(1.05);
  box-shadow:inset 0 1px 0 var(--kif-lip-2),var(--kif-shadow-panel);
}
#kif-app.kif-a11y .kif-explain{border-radius:12px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app.kif-a11y .kif-explain.kif-intro{transform:scale(1.03);outline-color:var(--kif-acc)}
/* Volltonfarbe statt neutralem Glas: die Karte traegt eine Kernerkenntnis, kein
   Nebensatz — sie soll auf den ersten Blick als wichtig auffallen, nicht als
   Deko-Icon uebersehen werden. */
#kif-app .kif-explain-badge{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--kif-acc);color:var(--kif-acc-i);font-size:14px;font-weight:600;margin-top:1px;
}
#kif-app.kif-a11y .kif-explain-badge{border-radius:10px}
#kif-app .kif-explain-text{font-size:18px;line-height:1.55;color:var(--kif-ink);margin:0}
/* Wortweise geschriebener Text (writeWords(), mission-2.js) — jedes Wort
   startet unsichtbar und blendet einzeln ein, das ergibt den "wird gerade
   geschrieben"-Effekt. Reiner Opacity/kleiner-Versatz-Fade statt des
   groesseren Plop-Ueberschwingers: bei Wort-Granularitaet in einer laufenden
   Zeile wirkte ein staerkerer Versatz unruhig/hibbelig statt lesbar. */
#kif-app .kif-word{display:inline-block;opacity:0;transform:translateY(3px);transition:opacity .3s ease-out,transform .3s ease-out}
#kif-app .kif-word.kif-show{opacity:1;transform:translateY(0)}
#kif-app.kif-a11y .kif-word{transition:opacity .3s ease-out}

/* Mission 2, A1: Chat-Screen und Erklaerkarten-Text deutlich groesser
   (Nutzer-Wunsch), moeglich gemacht durch straffere Kopfzeile (.kif-m2-a1
   unten) — beides bewusst per ID/Klasse skaliert, .kif-chatwin und
   .kif-explain-text tragen auch Mission 3/4/5 und sollen dort unveraendert
   bleiben (siehe DESIGN.md). */
#kif-app #m2-chatwin{max-width:760px;margin-top:clamp(10px,1.6vh,18px)}
#kif-app #m2-explain-text{font-size:clamp(22px,2.4vw,28px);line-height:1.42}

/* Duell-Karten (B1 Split-Path, B2 Prompt-Duell) — tappbare Vergleichskarten,
   gleiche Solid-Surface-Familie wie die Ablagen aus Mission 1. */
#kif-app .kif-duel{display:grid;gap:clamp(14px,2vw,24px);margin:clamp(18px,2.8vh,30px) auto 0}
#kif-app .kif-duel--2{grid-template-columns:1fr 1fr;max-width:900px}
#kif-app .kif-duel--3{grid-template-columns:repeat(3,1fr);max-width:1200px}
#kif-app .kif-duel-card{
  text-align:left;font:inherit;border:0;cursor:pointer;width:100%;
  padding:clamp(18px,2vh,24px) clamp(18px,1.6vw,22px);
  border-radius:28px;background:var(--kif-solid);box-shadow:inset 0 1px 0 var(--kif-lip);
  color:var(--kif-ink);transition:background .26s ease-out;
}
#kif-app.kif-a11y .kif-duel-card{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-duel-card:hover{background:var(--kif-solid-2)}
#kif-app .kif-duel-card.kif-open{background:var(--kif-solid-2);cursor:default}
#kif-app.kif-a11y .kif-duel-card.kif-open{outline-color:var(--kif-acc)}
#kif-app .kif-duel-t{font-size:18px;font-weight:500;line-height:1.4;letter-spacing:-.012em;display:block}
#kif-app .kif-duel-answer{
  display:block;margin-top:12px;padding-top:12px;box-shadow:inset 0 1px 0 var(--kif-lip);
  /* 15px -> 17px, gleiche Begruendung wie .kif-res-copy/.kif-claim-feedback:
     Teil desselben Korrektur-/Auskunfts-Textmusters, war mit Abstand die
     kleinste Auspraegung davon. */
  font-size:17px;line-height:1.55;color:var(--kif-ink-2);
  opacity:0;transition:opacity .35s ease-out;
}
#kif-app .kif-duel-answer.kif-show{opacity:1}

/* Vergleichs-Karten (A2) — gleiche Optik wie Duell-Karten, aber nicht tappbar:
   beide Antworten stehen von Anfang an sichtbar nebeneinander. */
#kif-app .kif-compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);max-width:900px;margin:clamp(18px,2.8vh,30px) auto 0}
/* Tappbar (A2 Frage 1): direkt auf die Antwort tippen statt separate
   Choice-Buttons darunter — gleiche Hover-/Auswahl-Mechanik wie .kif-duel-card. */
#kif-app .kif-compare-card{
  padding:clamp(20px,2.2vh,28px) clamp(20px,1.8vw,26px);border-radius:28px;border:0;font:inherit;width:100%;cursor:pointer;
  background:var(--kif-solid);box-shadow:inset 0 1px 0 var(--kif-lip);
  font-size:20px;line-height:1.6;color:var(--kif-ink-2);text-align:left;
  transition:background .24s ease-out,transform .26s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-compare-card:hover{background:var(--kif-solid-2);transform:scale(1.02)}
#kif-app .kif-compare-card:disabled{cursor:default}
#kif-app .kif-compare-card:disabled:not(.kif-picked):hover{background:var(--kif-solid);transform:none}
#kif-app.kif-a11y .kif-compare-card{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-lip)}

/* Info-Chip (ⓘ-Quellenangabe) — Vorlage fuer Quellenangaben in spaeteren Missionen. */
#kif-app .kif-info-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}
#kif-app .kif-info-btn{
  position:relative;
  width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:var(--kif-glass);color:var(--kif-ink-2);font-size:14px;font-weight:600;
  box-shadow:inset 0 1px 0 var(--kif-lip);transition:background .25s ease-out,color .25s ease-out;
}
#kif-app .kif-info-btn:hover{background:var(--kif-glass-2);color:var(--kif-ink)}
#kif-app.kif-a11y .kif-info-btn{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
/* Wort-Pillen-Variante (dieselbe Flaeche/Farbe, width:auto statt fester 26px-
   Kreis) — gleiches Prinzip wie .kif-frag-l.kif-frag-basis. Fuer Faelle, in
   denen der Info-Knopf ein eigenes Label statt nur "ⓘ" braucht (Pruefung: die
   optionale "Quelle ansehen"-Nebenfunktion darf laut eigener Regel der
   Pruefung nicht unter 44px Trefflaeche fallen, siehe .kif-sort-take). */
#kif-app .kif-info-btn.kif-info-btn--wide{width:auto;height:auto;min-height:38px;padding:8px 18px;border-radius:999px;font-size:14px;font-weight:500;white-space:nowrap}
#kif-app .kif-info-note{
  max-width:56ch;margin:10px auto 0;text-align:center;font-size:14px;color:var(--kif-ink-3);
  opacity:0;transition:opacity .35s ease-out;
}
#kif-app .kif-info-note.kif-show{opacity:1}

/* Simulierter Browser-Popup ("externe Seite ansehen", wiederverwendbar — siehe
   openSimulatedBrowser() in _shared.js). Ueberlagerung + Dim-Technik identisch
   zu .kif-errfocus/.kif-desk-overlay (dieselbe Deklaration waere hier moeglich,
   der Bezugsrahmen ist aber ein eigenes .kif-browser-stage statt der Ablagen/
   des Hubs, deshalb eigene Klasse statt gemeinsamer Selektor-Liste). Das
   Fenster selbst ist eine "fremde Seite" und gehoert zur Mock-App-Familie
   (dunkel, deckend, nie backdrop-filter) statt zur Glas-Karten-Familie. */
#kif-app .kif-browser-stage{position:relative}
/* Gedimmt wird NUR der Inhalt, der neben dem Overlay-Popup steht (z.B. die
   Duell-Karten), niemals .kif-browser-stage selbst — das Popup haengt als
   ZWEITES Kind direkt in derselben Stage (siehe openSimulatedBrowser(),
   _shared.js) und wuerde sonst den eigenen Dim-Filter mit-erben (geerbter
   Filter blurrt auch Nachfahren). Dieselbe Zwei-Geschwister-Struktur wie
   .kif-desk-hub.kif-dim + .kif-desk-overlay im Pruefungsmodus. */
#kif-app .kif-browser-dimmable.kif-dim{filter:blur(6px) brightness(.75);transition:filter .4s ease-out;pointer-events:none}
#kif-app.kif-a11y .kif-browser-dimmable.kif-dim{filter:none;opacity:.4;pointer-events:none}
#kif-app .kif-browser-overlay{
  position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;
  padding:12px;opacity:0;pointer-events:none;transition:opacity .3s ease-out;
}
#kif-app .kif-browser-overlay.kif-show{opacity:1;pointer-events:auto}
#kif-app .kif-browser-window{
  max-width:min(440px,94%);width:100%;border-radius:24px;overflow:hidden;text-align:left;
  background:var(--kif-mock-bg);box-shadow:inset 0 1px 0 var(--kif-lip),var(--kif-shadow-focus);
  transform:scale(.96);transition:transform .3s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-browser-overlay.kif-show .kif-browser-window{transform:scale(1)}
/* Kein eigener a11y-Hintergrund noetig: --kif-mock-bg mappt im Kontrast-Modus
   bereits auf --kif-win (voll deckend), exakt wie bei .kif-chatwin/.kif-post. */
#kif-app.kif-a11y .kif-browser-window{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-browser-url{font-size:13px;color:var(--kif-ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#kif-app .kif-browser-body{padding:clamp(18px,2.6vh,26px) clamp(18px,2vw,22px)}
#kif-app .kif-browser-meta{margin:0 0 6px;font-size:12px;color:var(--kif-ink-3)}
#kif-app .kif-browser-title{margin:0 0 8px;font-size:18px;font-weight:500;letter-spacing:-.008em;color:var(--kif-ink)}
#kif-app .kif-browser-snippet{margin:0;font-size:15px;line-height:1.55;color:var(--kif-ink-2)}
#kif-app .kif-browser-404-code{margin:0 0 6px;font-size:34px;font-weight:500;color:var(--kif-ink-3)}
#kif-app .kif-browser-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--kif-mock-head)}
#kif-app .kif-browser-actions .kif-btn-primary{padding:9px 20px;font-size:15px}
/* Schliessen-Knopf ist buchstaeblich .kif-nav (Klasse, kein Duplikat) — die
   Grown-Hit-Area-Regel (::after, 44px) gilt dadurch automatisch mit. */

/* Flow-Log (Mission 2, dritte Station) — Beats sammeln sich statt sich zu
   ersetzen: die neueste Zeile steht gross/hell im Fokus, aeltere schrumpfen,
   dimmen und werden leicht unscharf, bleiben aber lesbar sichtbar. */
#kif-app .kif-flowlog{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:clamp(16px,2.6vh,28px)}
#kif-app .kif-flowline{
  font-size:23px;font-weight:500;letter-spacing:-.016em;color:var(--kif-ink);text-align:center;max-width:52ch;margin:0;
  opacity:0;transform:translateY(10px);
  transition:opacity .4s ease-out,transform .4s cubic-bezier(.16,1,.3,1),filter .4s ease-out;
}
#kif-app .kif-flowline.kif-show{opacity:1;transform:translateY(0)}
#kif-app .kif-flowline.kif-past{opacity:.4;transform:scale(.86);filter:blur(1.5px)}
#kif-app.kif-a11y .kif-flowline.kif-past{filter:none;opacity:.5;transform:none}

/* FRAG-Reveal-Moment ("Wort im Fokus") — die Mini-Reihe (dieselben .kif-frag-l
   wie in der Shell-Leiste) zeigt die Einordnung "1 von 4 Buchstaben", das Wort
   selbst ("Frag genau.") traegt als Akzent-Headline den eigentlichen Moment.
   renderFrag() in app.js aktualisiert ALLE .kif-frag-l im DOM automatisch —
   keine eigene Logik fuer die Mini-Reihe noetig. */
#kif-app .kif-frag-reveal{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4vh,22px);margin-top:clamp(6px,1.4vh,14px)}
#kif-app .kif-frag-mini{display:flex;align-items:center;gap:7px}
/* Display Hero (DESIGN.md): eigene, bewusst ueber der normalen Display-
   Obergrenze liegende Stufe, reserviert fuer einmalige Reveal-Momente. */
/* 40-76px -> 56-112px (Nutzer-Wunsch: "um einiges groesser, der Unterschied
   soll man schon merken"). Bleibt die einzige Stelle, die diese Display-
   Hero-Stufe nutzt (DESIGN.md), Aenderung gilt darum automatisch fuer alle
   vier FRAG-Reveals (F/R/A/G), nicht nur Mission 2. */
#kif-app .kif-frag-word{
  font-size:clamp(56px,8.4vw,112px);
  color:var(--kif-acc);opacity:0;transform:translateY(6px);
  transition:opacity .4s ease-out,transform .4s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-frag-word.kif-show{opacity:1;transform:translateY(0)}
#kif-app .kif-frag-sub{opacity:0;transition:opacity .4s ease-out}
#kif-app .kif-frag-sub.kif-show{opacity:1}

/* Fehlerjagd (Mission 3 A1/B1) — der KI-Text steht als Stapel einzeln
   anklickbarer Behauptungs-Zeilen da statt als Fliesstext (gleiche Karten-
   Sprache wie Kachel/Duell-Karte). Vor dem Klick optisch neutral, kein
   Hinweis, welche verdaechtig sind. */
#kif-app .kif-claim-list{display:flex;flex-direction:column;gap:10px;max-width:760px;margin:clamp(18px,2.8vh,30px) auto 0}
#kif-app .kif-claim{
  position:relative;text-align:left;font:inherit;border:0;cursor:pointer;width:100%;
  padding:clamp(16px,1.8vh,20px) clamp(18px,1.6vw,22px);border-radius:20px;
  background:var(--kif-glass);box-shadow:inset 0 1px 0 var(--kif-lip);
  color:var(--kif-ink);font-size:18px;line-height:1.5;
  transition:background .24s ease-out,opacity .42s ease-out,transform .42s cubic-bezier(.16,1,.3,1);
  opacity:0;transform:translateY(10px) scale(.96);
}
#kif-app .kif-claim.kif-show{opacity:1;transform:translateY(0) scale(1)}
/* Das freie Schweben aus einer frueheren Iteration lebt jetzt als vollwertige
   Physik-Arena in _claimArena.js/.kif-arena* (Mission 3 A1/B1, Nutzer-Wunsch:
   DVD-Logo-Prinzip statt reinem CSS-Keyframe-Schweben) — .kif-claim bleibt
   dafuer unveraendert die ruhige, nicht bewegte Grundkomponente, die Mission 5
   an drei Stellen weiterhin unveraendert nutzt. */
#kif-app .kif-claim:hover:not(:disabled){background:var(--kif-glass-2)}
#kif-app .kif-claim:disabled{cursor:default}
#kif-app .kif-claim[data-v="err"]{background:var(--kif-no-wash)}
#kif-app .kif-claim[data-v="ok"]{background:var(--kif-ok-wash)}
#kif-app.kif-a11y .kif-claim{border-radius:12px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app.kif-a11y .kif-claim[data-v="err"]{outline-color:var(--kif-no);background:var(--kif-glass)}
#kif-app.kif-a11y .kif-claim[data-v="ok"]{outline-color:var(--kif-ok);background:var(--kif-glass)}
#kif-app .kif-claim .kif-mk-badge{position:static;display:inline-flex;vertical-align:middle;margin-right:10px}
/* Anders als .kif-tile hatte der Claim-Badge bisher gar keine Fuellfarbe —
   das Haekchen/Kreuz (Strichfarbe --kif-on-badge, ein warmes Fast-Weiss fuer
   Icons AUF einem Vollton-Badge) stand blass auf der Wash-Flaeche, kaum
   lesbar (Live-Test-Feedback, mit-ursaechlich fuer den Eindruck "Farblogik
   verdreht"). Gleiche Vollton-Kreise wie .kif-tile[data-v]. */
#kif-app .kif-claim[data-v="ok"] .kif-mk-badge{background:var(--kif-ok)}
#kif-app .kif-claim[data-v="err"] .kif-mk-badge{background:var(--kif-no)}
#kif-app .kif-claim-feedback{
  display:block;margin-top:10px;padding-top:10px;box-shadow:inset 0 1px 0 var(--kif-lip);
  /* 16px -> 17px, gleiche Begruendung wie .kif-res-copy oben. Bewusst einen
     Tick unter der 18px-Zeilen-Schrift, damit die Hierarchie Aussage/
     Begruendung erhalten bleibt. */
  font-size:17px;line-height:1.5;color:var(--kif-ink-2);
}

/* ============================================================================
   Fehlerjagd-Arena (Mission 3 A1/B1) — bewegtes Spielfeld statt ruhiger
   Liste (Nutzer-Wunsch), Logik in _claimArena.js. Eigene .kif-arena*-Klassen,
   ruehrt .kif-claim* (oben, Mission 5) nicht an.

   .kif-fit--arena: Gegenstueck zum fitScreen()-Opt-out in app.js — nur
   gesetzt, waehrend die Arena beweglich ist. Die statische Variante raeumt
   die Klasse ab und bekommt dadurch wieder eine ganz normale, von fitScreen()
   gemessene Hoehe (The Fill-The-Frame Rule gilt dort unveraendert). */
#kif-app .kif-fit.kif-fit--arena{height:100%}
#kif-app .kif-arena{height:100%;display:flex;flex-direction:column;position:relative}
/* Reservierte Streifen von Anfang an vorhanden (The Reserved-Space Rule,
   siehe weiterBtn() in _shared.js): Pause-/Fertig-Button poppen spaeter per
   Fade-in auf, ohne dass sich das Spielfeld dabei je verschiebt. */
#kif-app .kif-arena-topstrip{flex:0 0 auto;height:clamp(52px,6.4vh,76px);display:flex;align-items:center;justify-content:center}
#kif-app .kif-arena-botstrip{flex:0 0 auto;height:clamp(60px,7.4vh,88px);display:flex;align-items:center;justify-content:center}
#kif-app .kif-arena-field{flex:1 1 auto;position:relative;overflow:hidden;min-height:0}

#kif-app .kif-arena-pause{
  opacity:0;transition:opacity .35s ease-out;
  display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:clamp(16px,1.25vw,24px);font-weight:400;
  padding:clamp(9px,.9vw,16px) clamp(18px,1.7vw,32px);border-radius:999px;cursor:pointer;border:0;color:var(--kif-ink-2);
  background:var(--kif-glass);box-shadow:inset 0 1px 0 var(--kif-lip);
}
#kif-app .kif-arena-pause.kif-show{opacity:1}
#kif-app.kif-a11y .kif-arena-pause{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-arena-done{opacity:0;transition:opacity .35s ease-out,transform .3s cubic-bezier(.16,1,.3,1)}
#kif-app .kif-arena-done.kif-show{opacity:1}
#kif-app .kif-arena-botstrip-static{text-align:center;margin:clamp(14px,2.4vh,24px) 0}

/* Ueberschriften-Block: zentriert per translate(-50%,-50%) auf dem AEUSSEREN
   Wrapper (dessen eigene Layout-Groesse bleibt beim Verkleinern konstant,
   transform aendert nie das Layout), die eigentliche 75%-Verkleinerung
   sitzt auf dem INNEREN Element. So bleibt die Mitte exakt erhalten, UND
   getBoundingClientRect() auf dem inneren Element liefert fuer die Bumper-
   Kollision die tatsaechliche, nach-Transform-Groesse (beides nicht
   gleichzeitig moeglich, wenn beide Schritte auf demselben Element laegen). */
#kif-app .kif-arena-bumper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;z-index:2;max-width:min(1200px,92vw)}
#kif-app .kif-arena-bumper-inner{transition:transform .32s cubic-bezier(.16,1,.3,1)}
#kif-app .kif-arena-bumper--settled .kif-arena-bumper-inner{transform:scale(.75)}
#kif-app .kif-arena-h1{font-size:clamp(56px,min(8.4vw,13.5vh),200px);max-width:none;opacity:0;transform:scale(.85);transition:opacity .4s ease-out,transform .4s cubic-bezier(.16,1,.3,1);margin:0}
#kif-app .kif-arena-h1.kif-show{opacity:1;transform:scale(1)}
#kif-app .kif-arena-instr{opacity:0;transition:opacity .4s ease-out;margin:clamp(10px,1.4vh,24px) 0 0;font-size:clamp(28px,min(3.4vw,5.2vh),72px);line-height:1.2;color:var(--kif-ink-2)}
#kif-app .kif-arena-instr.kif-show{opacity:1}

/* Kachel-Grundform, bewusst eigenstaendig von .kif-claim (gleiche optische
   Sprache, aber getrennter Lebenszyklus: diese Kachel bekommt ihre Position
   per translate3d statt per Dokumentfluss). */
#kif-app .kif-arena-tile{
  text-align:left;font:inherit;font-size:clamp(20px,min(1.9vw,2.9vh),36px);line-height:1.35;color:var(--kif-ink);
  border:0;cursor:pointer;border-radius:28px;background:var(--kif-glass);
  box-shadow:inset 0 1px 0 var(--kif-lip);padding:clamp(16px,2vh,26px) clamp(20px,1.9vw,34px);
  max-width:min(15.5em,80vw);min-width:44px;min-height:44px;
}
#kif-app .kif-arena-tile:disabled{cursor:default}
#kif-app .kif-arena-tile[data-v="ok"]{background:var(--kif-ok-wash)}
#kif-app .kif-arena-tile[data-v="err"]{background:var(--kif-no-wash)}
#kif-app .kif-arena-tile .kif-mk-badge{position:static;display:inline-flex;vertical-align:middle;margin-right:10px;width:clamp(28px,2.2vw,40px);height:clamp(28px,2.2vw,40px)}
#kif-app .kif-arena-tile[data-v="ok"] .kif-mk-badge{background:var(--kif-ok)}
#kif-app .kif-arena-tile[data-v="err"] .kif-mk-badge{background:var(--kif-no)}
#kif-app.kif-a11y .kif-arena-tile{border-radius:12px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app.kif-a11y .kif-arena-tile[data-v="ok"]{outline-color:var(--kif-ok);background:var(--kif-glass)}
#kif-app.kif-a11y .kif-arena-tile[data-v="err"]{outline-color:var(--kif-no);background:var(--kif-glass)}

/* Bewegter Modus: Position ausschliesslich per transform:translate3d() aus
   _claimArena.js, niemals top/left (siehe DESIGN.md-Opt-out-Begruendung).
   Der Pop-in (Scale+Opacity) sitzt bewusst auf .kif-arena-tile-inner, NIE auf
   der Kachel selbst — die trägt das von JS gesetzte translate3d() als
   Inline-Style, eine zweite, CSS-gesteuerte transform-Aenderung auf demselben
   Element wuerde damit kollidieren (The gleiche Falle wie beim alten
   Schweben, nur hier mit Physik statt Keyframes). */
#kif-app .kif-arena--moving .kif-arena-tile{position:absolute;top:0;left:0;will-change:transform;z-index:1}
#kif-app .kif-arena-tile-inner{display:block;opacity:0;transform:scale(.6);transition:opacity .3s ease-out,transform .3s cubic-bezier(.16,1,.3,1)}
#kif-app .kif-arena-tile.kif-show .kif-arena-tile-inner{opacity:1;transform:scale(1)}
@keyframes kif-arena-shake{
  0%,100%{ transform:translateX(0) scale(1); }
  20%{ transform:translateX(-5px) scale(1); }
  40%{ transform:translateX(4px) scale(1); }
  60%{ transform:translateX(-3px) scale(1); }
  80%{ transform:translateX(2px) scale(1); }
}
#kif-app .kif-arena-tile-inner.kif-arena-shake{animation:kif-arena-shake .3s ease-in-out}
#kif-app .kif-arena-tile--exit{transition:opacity .35s ease-in,transform .35s cubic-bezier(.4,0,1,1);opacity:0;transform:scale(.7)}

/* Statische Variante: ganz normaler Dokumentfluss, von fitScreen() skaliert
   wie jeder andere Screen — "nur Opacity, keine Skalierung" (Punkt 6) gilt
   hier deshalb ausschliesslich auf der Kachel selbst, der innere Pop-in-Scale
   von oben wird fuer diesen Fall neutralisiert statt zusaetzlich zu laufen. */
#kif-app .kif-arena-statlist{display:flex;flex-direction:column;gap:10px;max-width:760px;margin:clamp(18px,2.8vh,30px) auto 0}
#kif-app .kif-arena-tile--static{position:static;width:100%;max-width:none;opacity:0;transition:opacity .32s ease-out}
#kif-app .kif-arena-tile--static.kif-show{opacity:1}
#kif-app .kif-arena-tile--static .kif-arena-tile-inner{opacity:1;transform:none;transition:none}

/* Rand-Glow bei richtig/falsch — ein weiches Ein- UND Ausblenden je
   Richtung (>=250ms), nie als Flackern: eine einzelne box-shadow-Transition,
   keine Keyframe-Schleife (WCAG 2.3.1). */
#kif-app .kif-arena-flash{position:absolute;inset:0;pointer-events:none;z-index:3;box-shadow:inset 0 0 0 0 transparent;transition:box-shadow .32s ease-out}
#kif-app .kif-arena-flash--ok{box-shadow:inset 0 0 140px 22px var(--kif-ok-wash)}
#kif-app .kif-arena-flash--err{box-shadow:inset 0 0 140px 22px var(--kif-no-wash)}

/* Erklaer-Karte (Einzeltreffer + Sammel-Karte am Ende) — gleiches Dim/Blur
   wie jede andere Fokus-Karte im Kurs (.kif-focus-dimmable.kif-dim, von
   _claimArena.js auf das Feld gesetzt), die Karte selbst liegt als eigenes
   Overlay DARUEBER und bleibt scharf. */
#kif-app .kif-arena-overlay{
  position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;pointer-events:none;transition:opacity .3s ease-out;
}
#kif-app .kif-arena-overlay.kif-show{opacity:1;pointer-events:auto}
/* Der Hintergrund wird ueber die GESCHWISTER des Overlays gedimmt, nie ueber
   den Host selbst: ein Filter auf dem Elternelement verwischt sonst auch die
   Karte (Bug: Karte unlesbar). */
#kif-app .kif-arena-dimmed{position:relative}
#kif-app .kif-arena-dimmed > :not(.kif-arena-overlay){filter:blur(7px) brightness(.72);transition:filter .4s ease-out;pointer-events:none}
#kif-app.kif-a11y .kif-arena-dimmed > :not(.kif-arena-overlay){filter:none;opacity:.4}
#kif-app .kif-arena-overlay .kif-errcard{max-width:min(1100px,94%);padding:clamp(32px,4.4vh,60px) clamp(32px,3.6vw,72px);transform:scale(.94);transition:transform .3s cubic-bezier(.16,1,.3,1);max-height:100%;overflow-y:auto}
#kif-app .kif-arena-overlay.kif-show .kif-errcard{transform:scale(1)}
#kif-app .kif-arena-overlay.kif-arena-card--exit{opacity:0;transition:opacity .25s ease-in}
#kif-app .kif-arena-overlay.kif-arena-card--exit .kif-errcard{transform:scale(1.08);transition:transform .25s ease-in}
#kif-app .kif-arena-overlay .kif-errcard[data-v="ok"] .kif-mk-badge{background:var(--kif-ok)}
#kif-app .kif-arena-overlay .kif-errcard[data-v="err"] .kif-mk-badge{background:var(--kif-no)}
#kif-app .kif-arena-overlay .kif-errcard .kif-mk-badge{width:clamp(56px,4.4vw,84px);height:clamp(56px,4.4vw,84px);margin-bottom:clamp(14px,2vh,26px)}
#kif-app .kif-arena-overlay .kif-errcard-t{font-size:clamp(34px,min(3vw,5vh),60px)}
#kif-app .kif-arena-overlay .kif-errcard-body{font-size:clamp(26px,min(2.2vw,3.8vh),42px)}
#kif-app .kif-arena-overlay .kif-errcard-bullets{font-size:clamp(22px,min(1.7vw,2.8vh),32px)}
#kif-app .kif-arena-overlay .kif-weiter{font-size:clamp(20px,1.6vw,30px);padding:clamp(12px,1.4vh,20px) clamp(32px,3vw,56px)}
#kif-app .kif-arena-card-weiter{margin-top:clamp(18px,3vh,36px)}
/* Der Karten-Rahmen selbst ist nur Fokus-Anker fuer Screenreader (tabindex -1),
   kein bedienbares Element: kein Ring im Maus-/Touch-Alltag. Im Kontrastmodus
   bleibt der eigene Outline der Karte. */
#kif-app:not(.kif-a11y) .kif-arena-overlay .kif-errcard:focus{outline:none}
#kif-app .kif-arena-overlay .kif-errcard .kif-mk{width:52%;height:52%}

/* Gruppenchat-Bubble (Mission 3 B4) — mehrere Personen statt Du/KI, alle
   "eingehend"/neutral (niemand ist hier "Du"), kleiner fett gesetzter
   Namens-Praefix statt Farbcodierung pro Person (haelt The One Accent Rule ein). */
#kif-app .kif-cwbubble--peer{align-self:flex-start;background:var(--kif-mock-bubble);color:var(--kif-ink)}
#kif-app .kif-cwbubble-name{display:block;font-size:14px;font-weight:600;color:var(--kif-ink-3);margin-bottom:3px}

/* Zitat-Block (z.B. eine KI-Aussage, die danach hinterfragt wird) — solide
   Flaeche, nicht interaktiv. */
#kif-app .kif-quote{
  max-width:640px;margin:clamp(18px,2.8vh,30px) auto 0;padding:clamp(18px,2vh,24px) clamp(20px,1.8vw,26px);
  border-radius:24px;background:var(--kif-solid);box-shadow:inset 0 1px 0 var(--kif-lip);
  font-size:18px;line-height:1.55;color:var(--kif-ink);text-align:center;
}
#kif-app.kif-a11y .kif-quote{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-lip);background:var(--kif-glass)}

/* ============================================================================
   Mission 4 — simulierte Fremd-Oberflaechen und ihre Werkzeuge
   ============================================================================ */

/* Szenen-Palette: die Bilder im Kurs sind eigene SVG-Szenen, keine Fotos
   (CLAUDE.md: keine realen Personen, keine echten Marken). Eigene Tokens, damit
   die Szenen zum warmen Raum passen und im Kontrast-Modus mitziehen. */
#kif-app{
  --kif-scene-sky:oklch(0.34 0.040 58); --kif-scene-far:oklch(0.26 0.030 44);
  --kif-scene-ground:oklch(0.20 0.024 48); --kif-scene-figure:oklch(0.13 0.014 44);
  --kif-scene-shadow:oklch(0.11 0.012 44 / .55); --kif-scene-light:oklch(0.78 0.090 72);
  --kif-scene-paper:oklch(0.86 0.014 86); --kif-scene-ink:oklch(0.22 0.018 60);
  --kif-scene-body:oklch(0.56 0.030 64); --kif-scene-water:oklch(0.29 0.030 226);
}
#kif-app.kif-a11y{
  --kif-scene-sky:oklch(0.30 0.020 58); --kif-scene-far:oklch(0.22 0.016 44);
  --kif-scene-ground:oklch(0.16 0.012 48); --kif-scene-figure:oklch(0.08 0.006 44);
  --kif-scene-shadow:oklch(0.08 0.006 44 / .7); --kif-scene-light:oklch(0.88 0.06 74);
  --kif-scene-body:oklch(0.62 0.020 64); --kif-scene-water:oklch(0.26 0.020 226);
}
#kif-app .kif-scene{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--kif-scene-ground)}
#kif-app .kif-scene svg{display:block;width:100%;height:100%}
/* Korn + Vignette: laesst die Szene als aufgenommenes Bild lesen statt als
   Illustration in einem UI. Ohne das wirkt jeder Post wie ein Icon. */
#kif-app .kif-scene::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 45%, oklch(0.10 0.02 50 / .55) 100%);
}
#kif-app.kif-a11y .kif-scene::after{display:none}
#kif-app .kif-scene--wide{aspect-ratio:3/2}

/* Feed-Post (Signature-Komponente Mission 4) */
#kif-app .kif-post{
  position:relative;width:100%;max-width:400px;margin:0 auto;border-radius:24px;overflow:hidden;
  background:var(--kif-mock-bg);box-shadow:inset 0 1px 0 var(--kif-lip),var(--kif-shadow-panel);
  text-align:left;
}
#kif-app.kif-a11y .kif-post{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-post-head{display:flex;align-items:center;gap:11px;padding:12px 14px;background:var(--kif-mock-head);width:100%;text-align:left;border:0;font:inherit}
#kif-app .kif-post-av{width:34px;height:34px;border-radius:50%;background:var(--kif-film-3);flex:0 0 auto}
#kif-app .kif-post-who{min-width:0;flex:1}
#kif-app .kif-post-name{display:block;font-size:15px;font-weight:500;color:var(--kif-ink);letter-spacing:-.01em}
#kif-app .kif-post-meta{display:block;font-size:13px;color:var(--kif-ink-3);margin-top:2px}
#kif-app .kif-post-badge{
  display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;
  background:var(--kif-film-2);color:var(--kif-ink-2);white-space:nowrap;
}
#kif-app.kif-a11y .kif-post-badge{border-radius:10px;outline:1px solid var(--kif-lip)}
#kif-app .kif-post-acts{
  display:flex;align-items:center;gap:14px;padding:11px 14px 6px;color:var(--kif-ink-2);
  width:100%;text-align:left;border:0;background:transparent;font:inherit;
}
#kif-app .kif-post-acts svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#kif-app .kif-post-likes{
  padding:0 14px;font-size:14px;font-weight:500;color:var(--kif-ink);
  display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;
}
#kif-app .kif-post-cap{
  display:block;width:100%;text-align:left;border:0;font:inherit;background:transparent;
  padding:8px 14px 10px;font-size:15px;line-height:1.5;color:var(--kif-ink);
}
#kif-app .kif-post-cap b{font-weight:500}
#kif-app .kif-post-comments{padding:2px 14px 14px;display:grid;gap:9px}
/* In der Aufloesung sitzen Marken am rechten Rand — der Text bekommt Platz
   dafuer, statt unter ihnen durchzulaufen. */
#kif-app .kif-post--marked .kif-post-cap,#kif-app .kif-post--marked .kif-post-c{padding-right:46px}
#kif-app .kif-post-c{
  display:block;width:100%;text-align:left;border:0;font:inherit;background:transparent;
  font-size:14px;line-height:1.45;color:var(--kif-ink-2);padding:0;
}
#kif-app .kif-post-c b{color:var(--kif-ink);font-weight:500}
#kif-app .kif-post-c span{display:block;color:var(--kif-ink-3);font-size:13px;margin-top:2px}

/* Anklickbare Zonen im Post (A1). Vor dem Klick voellig unauffaellig — es soll
   niemand an Hover-Flaechen ablesen koennen, wo die Hinweise stecken. */
#kif-app .kif-zone{cursor:pointer;border-radius:14px;transition:background .2s ease-out}
#kif-app .kif-zone:hover:not(:disabled){background:var(--kif-film)}
#kif-app .kif-zone:disabled{cursor:default}
#kif-app .kif-zone[data-v="hit"]{background:var(--kif-ok-wash)}
/* War --kif-film-2 (ein neutraler, blass-grauer Ton) statt eines echten
   Rot-Washs (Kritik-Fund, Nutzer-Feedback mit Screenshot: "die falschen
   Kacheln sind gerade grau, die müssten auch rot werden") — der Rot/Gruen-
   Kontrast zwischen echtem Treffer und Falle war dadurch nur am Text zu
   erkennen, nicht an der Flaeche selbst, obwohl .kif-note--err (die Notiz
   daneben) schon immer korrekt Rot zeigte. Jetzt dieselbe Wash-Familie wie
   der Treffer, nur die Fehl-Variante. */
#kif-app .kif-zone[data-v="trap"]{background:var(--kif-no-wash)}
#kif-app .kif-hot{position:absolute;border:0;background:transparent;padding:0}
#kif-app .kif-scene .kif-hot{border-radius:16px}

/* Rot umrandeter Bereich in der A1-Aufloesung: zeigt zusaetzlich zur nummerierten
   Marke genau, WAS gemeint ist, wie mit einem Stift eingekreist. */
#kif-app .kif-post-head.kif-hint-on,#kif-app .kif-post-cap.kif-hint-on,#kif-app .kif-post-c.kif-hint-on{
  box-shadow:0 0 0 3px var(--kif-no);border-radius:14px;
}
#kif-app .kif-hint-oval{
  position:absolute;border:3px dashed var(--kif-no);border-radius:50%;
  opacity:0;pointer-events:none;transition:opacity .3s ease-out;
}
#kif-app .kif-hint-oval.kif-on{opacity:1}
#kif-app.kif-a11y .kif-hint-oval{border-style:solid}

/* Marke auf dem Post (Treffer und Aufloesung) */
#kif-app .kif-spot{
  position:absolute;width:28px;height:28px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;font:inherit;font-size:13px;font-weight:600;
  background:var(--kif-acc);color:var(--kif-acc-i);box-shadow:var(--kif-shadow-dock);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-spot:hover,#kif-app .kif-spot.kif-on{transform:scale(1.15)}
#kif-app .kif-spot--quiet{background:var(--kif-film-4);color:var(--kif-ink)}
#kif-app.kif-a11y .kif-spot{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-acc-i)}

/* Zweispaltiges Stationslayout: Fremd-Oberflaeche links, Kurs-Kommentar rechts.
   Unter 900px Fensterbreite untereinander — das Fenster kann auf einem 1024er
   Schirm schmaler werden als die Summe beider Spalten. */
#kif-app .kif-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,2.6vw,36px);align-items:start;max-width:1000px;
  margin:clamp(16px,2.6vh,28px) auto 0;
}
#kif-app .kif-split--wide{max-width:1120px}
@media (max-width: 900px){ #kif-app .kif-split{grid-template-columns:1fr} }
#kif-app .kif-side{display:grid;gap:10px;align-content:start}
#kif-app .kif-side-h{font-size:14px;color:var(--kif-ink-3);letter-spacing:.03em;margin:0 0 2px}
/* .kif-res-copy ist eigentlich fuer eine zentrierte Position UNTER einem Ring
   gebaut (max-width:56ch, margin:auto, text-align:center) — landet sie
   stattdessen in .kif-side neben einer normalbreiten .kif-note-Karte (Mission
   4, mehrere Split-Path-Stationen), blieb sie schmaler/zentriert, waehrend
   die Notiz-Karten die volle Spaltenbreite fuellen (Kritik-Fund, Nutzer-
   Feedback: "die Kacheln sind alle nicht gleich breit"). Hier auf dieselbe
   volle, linksbuendige Breite gebracht wie jede andere Karte in der Spalte. */
#kif-app .kif-side .kif-res-copy{max-width:none;width:100%;margin-left:0;margin-right:0;text-align:left}

/* Entscheidungs-Kacheln als "App-Symbole" (A2/M4): drei grosse, tappbare
   Icon-Kacheln statt einer reinen Textliste — liest sich wie drei Apps auf
   einem Homescreen, ohne echte Marke oder Logo zu zeigen (CLAUDE.md). */
/* 640px -> 760px, Kacheln insgesamt ca. ein Drittel groesser (Nutzer-Wunsch). */
#kif-app .kif-app-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,22px);max-width:760px;margin:clamp(18px,2.8vh,30px) auto 0}
#kif-app .kif-app-tile{
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  padding:clamp(24px,2.9vh,32px) 13px;border-radius:24px;border:0;cursor:pointer;font:inherit;width:100%;
  background:var(--kif-solid);box-shadow:inset 0 1px 0 var(--kif-lip);color:var(--kif-ink);
  transition:background .24s ease-out,transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s ease-out;
}
/* Kacheln poppen einzeln auf statt alle gleichzeitig zu stehen (Nutzer-Wunsch,
   "sollen nacheinander auf Plop") — dieselbe Overshoot-Kurve wie .kif-res-copy,
   der etablierte "Plop"-Ueberschwinger dieses Kurses. mission-4.js setzt
   .kif-show zeitversetzt je Kachel. */
#kif-app .kif-app-tile{opacity:0;transform:translateY(10px) scale(.92)}
#kif-app .kif-app-tile.kif-show{opacity:1;transform:translateY(0) scale(1)}
#kif-app .kif-app-tile:hover:not(:disabled){background:var(--kif-solid-2);transform:translateY(-2px)}
#kif-app .kif-app-tile:disabled{cursor:default;opacity:.4}
#kif-app.kif-a11y .kif-app-tile{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-app-tile-ic{
  width:70px;height:70px;border-radius:20px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--kif-glass-2);color:var(--kif-ink);
}
#kif-app .kif-app-tile-ic svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#kif-app.kif-a11y .kif-app-tile-ic{border-radius:10px}
#kif-app .kif-app-tile-label{font-size:17px;line-height:1.32;color:var(--kif-ink)}
@media (max-width:560px){ #kif-app .kif-app-picks{grid-template-columns:1fr} }

/* A2 "Was machst du jetzt?": Titel doppelt so gross wie die App-Norm
   (Nutzer-Wunsch, woertlich "doppelt so gross") — die Buehne hier ist die
   Entscheidung selbst, nicht Fliesstext danach, verdient also mehr Gewicht
   als jeder andere Stationstitel. Eigene, auf diesen einen Screen begrenzte
   Klasse statt die App-weite h1-Regel zu aendern (gleiches Prinzip wie
   .kif-pruefung-screen/.kif-impulse-screen). */
#kif-app .kif-m4-a2 h1{font-size:clamp(60px,7.2vw,120px)}

/* Mission 2, A1: Ueberschrift + Untertitel ruecken naeher an die Shell-Leiste
   heran (Nutzer-Wunsch: "geht etwas weiter nach oben") — reiner negativer
   margin-top auf h1, zieht beides nach oben ohne die app-weite Shell-Leiste
   (.kif-shell-bar, jede Mission) anzufassen. Fester statt vh-skalierter Wert:
   .kif-shell-bar's eigener margin-bottom hat einen Boden von 16px (siehe
   dort) — ein clamp() haette bei kleiner Fensterhoehe ueber diesen Boden
   hinausschiessen und h1 sichtbar mit der Leiste ueberlappen koennen
   (live getestet, genau das ist passiert). 10px bleibt sicher darunter.
   Eigene, auf diesen einen Screen begrenzte Klasse, siehe .kif-m4-a2 direkt
   darueber fuer dasselbe Prinzip. */
#kif-app .kif-m2-a1 h1{margin-top:-10px}

/* Instagram-artiger Intro-Moment vor A1 (Nutzer-Wunsch): ein zentriertes
   Telefon zeigt zunaechst nur die Uhrzeit, dann schiebt sich eine
   Benachrichtigung hoch. Erst der Klick darauf oeffnet die eigentliche
   Station — bewusst KEIN echtes Instagram-Logo/-Wortmarke (CLAUDE.md #7.2),
   nur die generische Geste "Telefon, Benachrichtigung, Antippen". */
/* Deutlich groesser als zuvor (Nutzer-Wunsch: "der Screen soll deutlich
   groesser sein, mittig") — dieser Moment traegt den ganzen Einstieg allein,
   kein Text drumherum lenkt ab. */
#kif-app .kif-m4-intro{display:flex;align-items:center;justify-content:center;min-height:64vh}
#kif-app .kif-m4-stage{position:relative}
#kif-app .kif-m4-phone{
  position:relative;width:min(90vw,430px);aspect-ratio:9/17.5;border-radius:40px;overflow:hidden;
  background:var(--kif-mock-bg);
  box-shadow:inset 0 0 0 7px oklch(0.08 0.01 40),inset 0 1px 0 var(--kif-lip),var(--kif-shadow-win);
}
/* Uhrzeit sitzt jetzt wie auf einem echten Sperrbildschirm etwas unterhalb des
   oberen Rands, gross, statt als kleine App-Kopfzeile (Nutzer-Wunsch: "wie ein
   Hintergrundbild, so ein bisschen weiter unten"). Kein "Dein Feed"-Text mehr
   (Nutzer-Wunsch) — die Uhrzeit steht jetzt allein. */
#kif-app .kif-m4-phone-status{
  position:absolute;left:0;right:0;top:18%;text-align:center;
  font-size:clamp(46px,10vw,68px);font-weight:400;letter-spacing:-.01em;
  color:var(--kif-ink);font-variant-numeric:tabular-nums;
}
/* Reiner Text + gebogener Pfeil rechts neben dem Telefon, keine Kachel
   (Nutzer-Wunsch) — zeigt, wohin man klicken muss. Auf schmalen Bildschirmen
   ist daneben kein Platz mehr, dort bleibt die Benachrichtigung selbst der
   einzige, aber ausreichende Hinweis. */
#kif-app .kif-m4-clickhint{
  position:absolute;left:calc(100% + 28px);bottom:30px;width:150px;
  display:flex;flex-direction:column;align-items:flex-end;gap:0;color:var(--kif-ink-2);
  opacity:0;transition:opacity .4s ease-out;pointer-events:none;
}
#kif-app .kif-m4-clickhint.kif-show{opacity:1}
#kif-app .kif-m4-clickhint-t{font-size:30px;font-weight:600;letter-spacing:-.01em;color:var(--kif-ink)}
#kif-app .kif-m4-clickhint-arrow{width:150px;height:82px;fill:none;stroke:currentColor}
@media (max-width:780px){ #kif-app .kif-m4-clickhint{display:none} }
#kif-app .kif-m4-notif{
  position:absolute;left:9px;right:9px;bottom:16px;display:flex;align-items:center;gap:11px;
  padding:14px 16px;border-radius:20px;border:0;font:inherit;text-align:left;cursor:pointer;width:calc(100% - 18px);
  background:var(--kif-glass-3);box-shadow:inset 0 1px 0 var(--kif-lip),var(--kif-shadow-dock);color:var(--kif-ink);
  transform:translateY(160%);transition:transform .5s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-m4-notif.kif-show{transform:translateY(0)}
#kif-app .kif-m4-notif-ic{width:40px;height:40px;border-radius:50%;flex:0 0 auto;background:var(--kif-film-3)}
#kif-app .kif-m4-notif-t{display:block;font-size:16px;line-height:1.35}
#kif-app .kif-m4-notif-t b{font-weight:600}
#kif-app.kif-a11y .kif-m4-phone{box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app.kif-a11y .kif-m4-notif{box-shadow:none;outline:2px solid var(--kif-lip)}
/* Der Uebergang vom zentrierten Intro-Telefon zur eigentlichen Station ist
   bewusst eine einfache Ueberblendung, kein Shared-Element-Flug von einer
   Position zur anderen (The Intentional-Motion-Reduction Rule/Fill-The-
   Frame-Performance-Grundsatz dieses Kurses: einfache Opacity/Transform-
   Reveals statt aufwendiger FLIP-Animationen, siehe DESIGN.md). */
#kif-app .kif-m4-intro{opacity:1;transition:opacity .3s ease-out}
#kif-app .kif-m4-intro.kif-hide{opacity:0}

/* Notiz-Karte: der Kurs kommentiert die Fremd-Oberflaeche von aussen. */
#kif-app .kif-note{
  padding:14px 16px;border-radius:18px;background:var(--kif-solid);
  box-shadow:inset 0 1px 0 var(--kif-lip-soft);font-size:15px;line-height:1.5;color:var(--kif-ink);
  opacity:0;transform:translateY(6px);transition:opacity .35s ease-out,transform .35s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-note.kif-show{opacity:1;transform:translateY(0)}
/* Umgekehrte Gewichtung (Kritik-Fund, Nutzer-Feedback): der zitierte Auszug
   (z.B. „Schnell teilen") stand bisher FETT als Titel, die eigentliche
   Einordnung ("Jemand drängt dich zur Eile") lief klein und mager hinterher
   — genau umgekehrt zu dem, was hier zaehlt. Das Zitat ist nur Kontext, die
   Einordnung ist die Aussage. b (Zitat/Ueberschrift) jetzt klein und
   ungewichtet, .kif-note-body (Einordnung/Aufloesungstext) gross und fett. */
#kif-app .kif-note b{display:block;font-size:13px;font-weight:400;color:var(--kif-ink-3);margin-bottom:4px}
#kif-app .kif-note-body{display:block;font-size:16.5px;font-weight:600;line-height:1.42;color:var(--kif-ink)}
/* Der Aufloesungstext (A1-Solution-Karte, positionCardOnScreen-fremd, siehe
   mission-4.js renderA1Solution) ist die staerkste Aussage auf dem Screen —
   noch eine Stufe groesser/fetter als die kurzen Seitenleisten-Notizen. */
#kif-app .kif-note--solution .kif-note-body{font-size:19px;font-weight:700;line-height:1.4}
#kif-app .kif-note small{display:block;margin-top:6px;font-size:13px;color:var(--kif-ink-3)}
#kif-app.kif-a11y .kif-note{border-radius:12px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-note--quiet{background:var(--kif-glass)}
/* Leichter Erfolg/Fehler-Wash (Mission 4 A1): macht auf den ersten Blick
   sichtbar, ob eine angeklickte Zone ein echter Hinweis oder eine Falle war,
   statt dass man das nur am Text erkennt. Steht NACH .kif-note--quiet im
   Stylesheet, damit eine Falle (die gleichzeitig quiet UND err traegt) den
   Error-Wash bekommt, nicht das neutrale Glas. */
#kif-app .kif-note--ok{background:var(--kif-ok-wash)}
#kif-app .kif-note--err{background:var(--kif-no-wash)}
#kif-app.kif-a11y .kif-note--ok{outline:2px solid var(--kif-ok);background:var(--kif-glass)}
#kif-app.kif-a11y .kif-note--err{outline:2px solid var(--kif-no);background:var(--kif-glass)}

/* Chat in der Buehnenspalte: eine Stufe kleiner als das vollbreite Chat-Fenster
   aus Mission 2. In einer 490px-Spalte brechen 20px-Bubbles so oft um, dass die
   Station 823px hoch wurde und fitScreen auf 0.79 herunterskalieren musste
   (gemessen). Die Groesse folgt der Spalte, nicht der Gewohnheit. */
#kif-app .kif-split .kif-chatwin .kif-cwbubble{font-size:16px;line-height:1.45;padding:11px 15px}
#kif-app .kif-split .kif-chatwin .kif-cwbubble-name{font-size:13px}
#kif-app .kif-split .kif-chatwin-body{gap:8px;padding:13px 15px}
/* Mission 3 B4: dieselbe Zweispalter-Huelle, aber mit lesbarerer Schrift als
   die dichte Mission-5-Variante (16px), und die rechte Spalte oben buendig. */
#kif-app .kif-split--roomy{align-items:start}
#kif-app .kif-split--roomy .kif-chatwin .kif-cwbubble{font-size:18px;line-height:1.45;padding:12px 16px}
#kif-app .kif-split--roomy .kif-chatwin .kif-cwbubble-name{font-size:13px}
#kif-app .kif-split--roomy .kif-choices{margin-top:0}

/* Chatverlauf-Log (Mission 5 B1): fuenf volle Saetze als Bubbles PLUS zehn
   Aussagen-Zeilen darunter auf demselben Screen sind von Natur aus viel
   Inhalt. Dieselbe verdichtete Bubble-Groesse wie die Buehnenspalte oben
   (Wiederverwendung derselben Werte, kein neuer Wert) haelt die Kartenhoehe
   naeher an fitScreen()s Boden, statt ihn deutlich zu unterschreiten. */
#kif-app .kif-chatwin--log .kif-cwbubble{font-size:16px;line-height:1.45;padding:11px 15px}
#kif-app .kif-chatwin--log .kif-cwbubble-name{font-size:13px}
#kif-app .kif-chatwin--log .kif-chatwin-body{gap:8px;padding:13px 15px}

/* Zeitsprung — die Zaesur der Split-Paths. */
#kif-app .kif-timejump{
  display:flex;align-items:center;gap:16px;max-width:520px;
  margin:clamp(18px,2.8vh,30px) auto clamp(12px,2vh,20px);
  font-size:14px;letter-spacing:.04em;color:var(--kif-ink-3);white-space:nowrap;
  opacity:0;transition:opacity .5s ease-out;
}
#kif-app .kif-timejump.kif-show{opacity:1}
#kif-app .kif-timejump::before,#kif-app .kif-timejump::after{content:'';flex:1;height:1px;background:var(--kif-lip)}

/* Sprachnachricht (B3). Bewusst OHNE Ton: 25 Geraete im Klassenraum, und der
   Kurs baut keinen Stimmklon nach, auch keinen harmlosen. Die Wellenform
   laeuft, die Zeit laeuft, das Transkript erscheint mit. */
#kif-app .kif-voice{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--kif-mock-bubble);max-width:78%}
#kif-app.kif-a11y .kif-voice{border-radius:10px;outline:2px solid var(--kif-lip)}
#kif-app .kif-voice-play{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:var(--kif-acc);color:var(--kif-acc-i);
}
#kif-app .kif-voice-play svg{width:15px;height:15px;fill:currentColor}
#kif-app .kif-wave{display:flex;align-items:center;gap:3px;height:28px;flex:1;min-width:0}
#kif-app .kif-wave i{display:block;width:3px;flex:1 1 3px;max-width:4px;border-radius:999px;background:var(--kif-ink-3);opacity:.45;transition:background .2s ease-out,opacity .2s ease-out}
#kif-app .kif-wave i.kif-on{background:var(--kif-acc);opacity:1}
#kif-app .kif-voice-t{font-size:13px;color:var(--kif-ink-2);font-variant-numeric:tabular-nums;flex:0 0 auto}
#kif-app .kif-transcript{
  margin-top:10px;padding:12px 14px;border-radius:14px;background:var(--kif-mock-chip);
  font-size:15px;line-height:1.5;color:var(--kif-ink);max-width:78%;
  opacity:0;transition:opacity .4s ease-out;
}
#kif-app .kif-transcript.kif-show{opacity:1}
#kif-app .kif-transcript small{display:block;margin-bottom:5px;font-size:12px;letter-spacing:.04em;color:var(--kif-ink-3)}

/* Simulierte Suchergebnisse / Lexikon (A2, Weg 3) */
#kif-app .kif-mockpage{
  max-width:560px;margin:clamp(16px,2.6vh,26px) auto 0;padding:16px 18px 18px;border-radius:20px;
  background:var(--kif-mock-bg);box-shadow:inset 0 1px 0 var(--kif-lip),var(--kif-shadow-panel);text-align:left;
}
#kif-app.kif-a11y .kif-mockpage{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-mp-bar{
  display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;
  background:var(--kif-mock-chip);font-size:14px;color:var(--kif-ink);margin-bottom:14px;
}
#kif-app .kif-mp-bar svg{width:15px;height:15px;fill:none;stroke:var(--kif-ink-3);stroke-width:1.8;stroke-linecap:round;flex:0 0 auto}
#kif-app .kif-mp-hit{padding:11px 0;box-shadow:inset 0 -1px 0 var(--kif-lip-soft)}
#kif-app .kif-mp-hit:last-child{box-shadow:none;padding-bottom:0}
#kif-app .kif-mp-t{display:block;font-size:16px;color:var(--kif-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--kif-lip)}
#kif-app .kif-mp-src{display:block;font-size:13px;color:var(--kif-ink-3);margin:3px 0 4px}
#kif-app .kif-mp-x{display:block;font-size:14px;line-height:1.45;color:var(--kif-ink-2)}
#kif-app .kif-lex-t{font-size:23px;font-weight:500;letter-spacing:-.014em;margin:0}
#kif-app .kif-lex-lat{font-size:14px;font-style:italic;color:var(--kif-ink-3);margin:2px 0 12px}
#kif-app .kif-lex-row{display:flex;gap:12px;font-size:14px;line-height:1.5;padding:7px 0;box-shadow:inset 0 -1px 0 var(--kif-lip-soft)}
#kif-app .kif-lex-row:last-child{box-shadow:none}
#kif-app .kif-lex-k{flex:0 0 40%;color:var(--kif-ink-3)}
#kif-app .kif-lex-v{color:var(--kif-ink)}
#kif-app .kif-lex-v b{font-weight:500}

/* Google-artige Suchleiste (A2, Weg 3, Schritt 1) — Nutzer-Wunsch: "soll wie
   bei Google sein, groesser, zentral, rechteckig in die Breite, soll mehr
   nach einer richtigen Suchfunktion aussehen". Kein echtes Logo/keine echte
   Marke (CLAUDE.md #7.2), nur die generische Geste "grosse Suchleiste plus
   Themen-Reiter". */
#kif-app .kif-google-bar{
  display:flex;align-items:center;gap:12px;max-width:520px;margin:0 auto clamp(14px,2vh,20px);
  padding:15px 22px;border-radius:999px;background:var(--kif-mock-chip);font-size:16px;color:var(--kif-ink);
  box-shadow:inset 0 1px 0 var(--kif-lip),0 10px 24px oklch(0.10 0.02 50 / .28);
}
#kif-app .kif-google-bar svg{width:18px;height:18px;fill:none;stroke:var(--kif-ink-3);stroke-width:1.8;stroke-linecap:round;flex:0 0 auto}
#kif-app .kif-google-tabs{display:flex;justify-content:center;gap:clamp(14px,2vw,26px);margin:0 0 clamp(12px,1.8vh,18px);box-shadow:inset 0 -1px 0 var(--kif-lip-soft);padding-bottom:8px}
#kif-app .kif-google-tab{font-size:13.5px;color:var(--kif-ink-3);padding-bottom:8px;position:relative}
#kif-app .kif-google-tab.kif-on{color:var(--kif-ink);font-weight:600}
#kif-app .kif-google-tab.kif-on::after{content:'';position:absolute;left:0;right:0;bottom:-9px;height:2px;background:var(--kif-acc);border-radius:2px}
#kif-app.kif-a11y .kif-google-bar{box-shadow:none;outline:2px solid var(--kif-lip)}

/* Prominente Aufloesungs-Zeile unter Suche/Lexikon (A2, Weg 3): erscheint
   zeitversetzt NACH den Ergebnissen, deutlich groesser als deren Fliesstext
   (Nutzer-Wunsch: "soll groesser dastehen"). Wird danach zur ziehbaren Karte
   (siehe .kif-card-drag), derselbe Text, nur interaktiv. */
#kif-app .kif-mp-verdict{
  display:block;margin-top:clamp(14px,2vh,20px);font-size:21px;font-weight:600;line-height:1.32;color:var(--kif-ink);
  opacity:0;transform:translateY(6px);transition:opacity .4s ease-out,transform .4s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-mp-verdict.kif-show{opacity:1;transform:translateY(0)}

/* A3-Schlussfrage: die eigentliche Kernfrage der Station ("Soll ich etwas
   glauben oder nicht?" statt "Ist das KI?", Nutzer-Wunsch), deutlich groesser
   als normaler Fliesstext und mittig aufploppend, damit sie ganz sicher
   gelesen wird, bevor der Weiter-Button freigeht. */
#kif-app .kif-a3-verdict{
  display:block;text-align:center;margin:clamp(20px,3vh,34px) auto 0;max-width:32ch;
  font-size:clamp(26px,3vw,40px);font-weight:700;line-height:1.22;color:var(--kif-ink);
  opacity:0;transform:translateY(8px) scale(.96);
  transition:opacity .45s ease-out,transform .5s cubic-bezier(.34,1.56,.64,1);
}
#kif-app .kif-a3-verdict.kif-show{opacity:1;transform:translateY(0) scale(1)}

/* Pfeil-Hinweis "zieh mich zu Meine Hinweise" (A2, Weg 3): reine Geste, kein
   Text-Ersatz — die eigentliche Anweisung steht weiterhin als Text daneben
   (.kif-card-drag small). Die Animation entfaellt automatisch unter
   prefers-reduced-motion (globale Regel weiter unten in dieser Datei). */
#kif-app .kif-hint-arrow{display:inline-flex;color:var(--kif-acc);vertical-align:middle;margin-left:6px}
#kif-app .kif-hint-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:kif-hint-nudge 1.1s ease-in-out infinite}
@keyframes kif-hint-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* Zwei-Personen-Sprechblasen-Szene (A2, Weg 3, Schritt 3 "Wen fragst du?") —
   ersetzt den reinen Text-Zitatblock: zwei gezeichnete Silhouetten (derselbe
   Stil wie SCENE.fisch/menge in mission-4.js, "Own-Scene Rule": Silhouetten
   statt Gesichter, CLAUDE.md #7.3) plus eine Sprechblase mit der Antwort.
   Eine gemeinsame Struktur fuer alle drei Personen (Opa/Frau Kern/Mama),
   Kopfform/Haltung variiert leicht ueber [data-person], keine drei komplett
   eigenstaendigen Illustrationen. */
#kif-app .kif-persontalk{max-width:560px;margin:clamp(16px,2.4vh,24px) auto 0}
#kif-app .kif-persontalk-scene{width:100%;max-width:220px;margin:0 auto;aspect-ratio:5/3}
#kif-app .kif-persontalk-scene svg{display:block;width:100%;height:100%}
#kif-app .kif-bubble{
  position:relative;margin-top:14px;padding:16px 20px;border-radius:20px;background:var(--kif-solid);
  box-shadow:inset 0 1px 0 var(--kif-lip);font-size:16px;line-height:1.5;color:var(--kif-ink);text-align:left;
  opacity:0;transform:translateY(8px);transition:opacity .3s ease-out,transform .35s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-bubble.kif-show{opacity:1;transform:translateY(0)}
#kif-app .kif-bubble::before{
  content:'';position:absolute;left:50%;top:-8px;transform:translateX(-50%);
  width:16px;height:16px;background:var(--kif-solid);border-radius:4px 0 0 0;
  clip-path:polygon(0 100%, 100% 100%, 0 0);
}
#kif-app.kif-a11y .kif-bubble{box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app.kif-a11y .kif-bubble::before{display:none}

/* Beweisliste "Meine Hinweise" (A2, Weg 3) */
#kif-app .kif-evidence{
  padding:16px 18px;border-radius:24px;background:var(--kif-solid);box-shadow:inset 0 1px 0 var(--kif-lip-soft);
  min-height:120px;transition:background .26s ease-out,box-shadow .26s ease-out;
}
#kif-app .kif-evidence.kif-over{background:var(--kif-solid-2);box-shadow:inset 0 0 0 2.5px var(--kif-acc)}
#kif-app.kif-a11y .kif-evidence{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-evidence-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
#kif-app .kif-evidence-h h2{font-size:20px;font-weight:500;letter-spacing:-.016em;margin:0}
#kif-app .kif-evidence-n{font-size:14px;color:var(--kif-ink-3)}
#kif-app .kif-evidence-body{display:grid;gap:8px}
#kif-app .kif-evidence-body:empty::after{content:'noch leer';display:block;text-align:center;padding:24px 0;color:var(--kif-ink-3);font-size:15px}
#kif-app .kif-card-drag{
  display:block;width:100%;text-align:left;border:0;font:inherit;cursor:grab;
  padding:13px 16px;border-radius:16px;background:var(--kif-glass);box-shadow:inset 0 1px 0 var(--kif-lip);
  font-size:15px;line-height:1.45;color:var(--kif-ink);
  transition:background .22s ease-out,transform .26s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-card-drag:hover{background:var(--kif-glass-2);transform:translateY(-2px)}
#kif-app .kif-card-drag:active{cursor:grabbing}
/* Deaktiviert (z.B. Mission 5 A1 nach "Senden"): ohne eigene Optik wirkten die
   restlichen Bausteine weiterhin vollstaendig aktiv (voll deckend, cursor:grab),
   obwohl Klicks bereits wirkungslos waren — laut Kritik ein Zustand, der wie ein
   Fehler statt wie ein abgeschlossener Schritt wirkte (Polish-Fund). Gleiche
   Sprache wie .kif-choice:disabled/.kif-app-tile:disabled (reduzierte Deckkraft,
   kein Zeige-Cursor mehr) statt der staerkeren Primary-Button-Variante — eine
   Listenzeile, kein CTA. */
#kif-app .kif-card-drag:disabled{opacity:.4;cursor:default}
#kif-app .kif-card-drag:disabled:hover{background:var(--kif-glass);transform:none}
#kif-app.kif-a11y .kif-card-drag{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app.kif-a11y .kif-card-drag:disabled{opacity:.6}
#kif-app .kif-card-drag small{display:block;margin-top:4px;font-size:13px;color:var(--kif-ink-3)}
/* Die Erkenntnis-Zeile (A2 Weg 3) steht zuerst als reiner Text (.kif-mp-
   verdict), dann wird SIE SELBST zur ziehbaren Karte (Nutzer-Wunsch) — hier
   dieselbe grosse/fette Schriftstufe wie .kif-mp-verdict, damit der Wechsel
   nicht wie ein Bruch wirkt. */
#kif-app .kif-card-drag--verdict{font-size:21px;font-weight:600;line-height:1.32}
#kif-app .kif-card-drag--verdict small{margin-top:10px;font-size:14px}

/* Sortier-Zeile fuer A3: die vier Inhalte als Mini-Posts ueber den Koerben. */
#kif-app .kif-postrow{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);
  max-width:1000px;margin:clamp(14px,2.2vh,24px) auto clamp(14px,2.4vh,26px);
}
@media (max-width: 900px){ #kif-app .kif-postrow{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* A3: nur eine Kachel gleichzeitig statt aller vier (Nutzer-Wunsch, mehrfach
   wiederholt: "immer nur eine sichtbar, die nacheinander mittig aufkommen").
   Ein zentrierter Einzel-Slot statt des 4er-Grids, dieselbe Plop-Ueberschwing-
   Kurve wie .kif-app-tile. */
#kif-app .kif-postrow--single{display:flex;justify-content:center;max-width:340px}
#kif-app .kif-minipost.kif-minipost--stage{
  opacity:0;transform:translateY(10px) scale(.92);
  transition:opacity .4s ease-out,transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .26s ease-out;
}
#kif-app .kif-minipost.kif-minipost--stage.kif-show{opacity:1;transform:translateY(0) scale(1)}
#kif-app .kif-minipost{
  display:block;width:100%;text-align:left;border:0;font:inherit;cursor:grab;padding:0;overflow:hidden;
  border-radius:18px;background:var(--kif-mock-bg);box-shadow:inset 0 1px 0 var(--kif-lip),var(--kif-shadow-dock);
  transition:transform .26s cubic-bezier(.16,1,.3,1),box-shadow .26s ease-out;
}
#kif-app .kif-minipost:hover{transform:translateY(-3px)}
#kif-app .kif-minipost.kif-picked{box-shadow:inset 0 0 0 2.5px var(--kif-acc),var(--kif-shadow-dock)}
#kif-app.kif-a11y .kif-minipost{border-radius:12px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app.kif-a11y .kif-minipost.kif-picked{outline:3px solid var(--kif-acc)}
#kif-app .kif-minipost-cap{display:block;padding:10px 12px 12px;font-size:14px;line-height:1.4;color:var(--kif-ink)}
#kif-app .kif-minipost-cap small{display:block;margin-top:4px;font-size:12px;color:var(--kif-ink-3)}

/* Rangfolge (B2) */
#kif-app .kif-rank{display:grid;gap:8px;max-width:660px;margin:clamp(14px,2.2vh,24px) auto 0}
#kif-app .kif-rank-slot{
  display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 14px;border-radius:16px;
  background:var(--kif-glass);box-shadow:inset 0 1px 0 var(--kif-lip);
  transition:background .22s ease-out,box-shadow .22s ease-out;
}
#kif-app .kif-rank-slot.kif-over{background:var(--kif-glass-2);box-shadow:inset 0 0 0 2.5px var(--kif-acc)}
#kif-app.kif-a11y .kif-rank-slot{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-rank-n{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--kif-film-2);color:var(--kif-ink-2);font-size:13px;font-weight:600;
}
#kif-app .kif-rank-slot.kif-filled .kif-rank-n{background:var(--kif-acc);color:var(--kif-acc-i)}
#kif-app .kif-rank-label{font-size:15px;line-height:1.4;color:var(--kif-ink);flex:1;min-width:0}
#kif-app .kif-rank-slot.kif-empty .kif-rank-label{color:var(--kif-ink-3)}
#kif-app .kif-rank-take{
  flex:0 0 auto;border:0;background:transparent;cursor:pointer;color:var(--kif-ink-3);font:inherit;font-size:13px;
  padding:6px 10px;border-radius:999px;
}
#kif-app .kif-rank-take:hover{background:var(--kif-film-2);color:var(--kif-ink)}
#kif-app .kif-rank-pool{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:660px;margin:clamp(12px,2vh,20px) auto 0}
#kif-app .kif-rank-item{
  border:0;font:inherit;font-size:15px;cursor:grab;padding:11px 16px;border-radius:999px;
  background:var(--kif-solid);box-shadow:inset 0 1px 0 var(--kif-lip);color:var(--kif-ink);
  transition:background .22s ease-out,transform .26s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-rank-item:hover{background:var(--kif-solid-2);transform:translateY(-2px)}
#kif-app .kif-rank-item:active{cursor:grabbing}
#kif-app.kif-a11y .kif-rank-item{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-rank-why{display:block;font-size:14px;line-height:1.5;color:var(--kif-ink-2);margin-top:5px}
#kif-app .kif-rank-mine{
  flex:0 0 auto;font-size:12px;color:var(--kif-ink-3);padding:3px 9px;border-radius:999px;background:var(--kif-film-2);
}

/* Kompakt-Stufe für niedrige Bildschirme (Laptops 720p/768p, Fenster im
   Splitscreen). Ziel: der komplette Screen bleibt ohne Scrollen sichtbar.
   Greift nur über die Höhe — auf großen Schirmen bleibt das Design unverändert.

   Verdichtet werden ausschließlich ABSTÄNDE und Flächenhöhen, keine Schriftgrößen
   mehr: seit fitScreen() in beide Richtungen skaliert (The Fill-The-Frame Rule)
   wurde jede hier gesetzte kleinere Schriftgröße gleich wieder hochskaliert, das
   Ergebnis war dieselbe optische Größe bei doppelter Pflege und einem zweiten,
   abweichenden Type-Ramp. Die Abstands-Verdichtung dagegen wirkt: sie gibt dem
   Inhalt Höhe zurück, statt ihn nur kleiner zu machen. */
@media (max-height: 820px){
  #kif-app h1{max-width:30ch;line-height:1.04}
  #kif-app .kif-shell-bar{margin-bottom:clamp(14px,2.6vh,24px)}
  #kif-app .kif-sub{margin-top:10px}
  #kif-app .kif-flow{height:clamp(150px,22vh,220px);margin:clamp(12px,2.2vh,22px) 0 clamp(12px,2.4vh,24px)}
  #kif-app .kif-panel{min-height:clamp(104px,15vh,160px);padding:clamp(16px,2.2vh,22px) clamp(18px,1.6vw,26px)}
  /* Einzige verbliebene Schriftgroessen-Ausnahme, und zwar zwingend: die
     Karussell-Tafel steht in einer Buehne mit fester Hoehe (.kif-flow), ihr Text
     kann NICHT in zusaetzliche Hoehe ausweichen. Ohne diese Stufe laeuft er auf
     720p-Laptops aus der Tafel heraus ueber die Ablagen (getestet auf 1024x640). */
  #kif-app .kif-pt{font-size:19px}
  #kif-app .kif-panel.kif-act .kif-pt{font-size:20px}
  #kif-app .kif-sbody{min-height:clamp(56px,8.5vh,84px)}
  #kif-app .kif-shelves{margin-bottom:clamp(14px,2.2vh,24px)}
  #kif-app .kif-seg-btn,#kif-app .kif-a11y-btn{padding-top:7px;padding-bottom:7px}
  #kif-app .kif-dock{padding:7px 7px 7px 12px}
  #kif-app .kif-nav{width:34px;height:34px}
  #kif-app .kif-question{margin-top:clamp(14px,2.2vh,26px)}
  #kif-app .kif-chatwin-body{gap:8px;padding:12px 16px}
  #kif-app .kif-cwbubble{padding:11px 16px}
  /* Auf 720p-Laptops ist die verfuegbare Hoehe im Fenster nur ~506px — ein
     400px breiter Post ist dort allein 643px hoch und zwingt fitScreen an die
     Untergrenze. Flacheres Bild, schmalerer Post: dieselbe Station, gleiche
     Lesbarkeit, ohne Schrumpfen. */
  #kif-app .kif-post{max-width:330px}
  #kif-app .kif-scene{aspect-ratio:3/2}
  #kif-app .kif-minipost .kif-scene{aspect-ratio:2/1}
}

/* Zweite, engere Stufe für sehr flache Fenster (z.B. 1024×640, Splitscreen). */
@media (max-height: 690px){
  #kif-app .kif-shell-bar{margin-bottom:12px}
  #kif-app .kif-sub{margin-top:8px}
  #kif-app .kif-flow{height:clamp(140px,21vh,180px);margin:10px 0 12px}
  #kif-app .kif-shelves{margin-bottom:12px}
  #kif-app .kif-sbody{min-height:52px}
}

/* Tastbare Flaeche auf 44px bringen, ohne die Optik zu aendern: die kleinen
   runden Controls (Pfeile 38px, ⓘ 26px) behalten ihre Groesse, bekommen aber ein
   unsichtbares, zentriertes Trefferfeld. Betrifft Touch-Geraete und ungenaue
   Maus-/Trackpad-Bedienung gleichermassen. */
#kif-app .kif-nav::after,#kif-app .kif-info-btn::after{
  content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);border-radius:50%;
}

/* Kein Pauschal-Kill der Bewegung. Ein- und Ausblendungen tragen hier Bedeutung
   (sie zeigen, DASS etwas Neues erschienen ist) und bleiben, nur kuerzer. Weg
   fallen Bewegung, Skalierung, Blur und Dauerschleifen — also genau das, was
   Schwindel und Ablenkung ausloest. Umgesetzt ueber eine Whitelist von
   Transition-Eigenschaften: alles nicht Gelistete (transform, filter,
   stroke-dashoffset) springt sofort auf seinen Endzustand. */
/* ============================================================================
   Mission 5 — Was weiß KI über dich?
   ============================================================================ */

/* Ablagen mit drei statt zwei Spalten (A3-Skala: Kein Problem / Kommt drauf
   an / Lieber nicht). Modifier statt eigener Klasse: alles andere an
   .kif-shelves/.kif-shelf bleibt identisch wiederverwendet. */
#kif-app .kif-shelves--3{grid-template-columns:1fr 1fr 1fr}
@media (max-width: 760px){ #kif-app .kif-shelves--3{grid-template-columns:1fr} }

/* Vorgrad-Markierung auf einer .kif-claim-Zeile, bevor "Auflösen"/"Auswerten"
   gedrueckt wird — zwei Bedeutungen je Station, beide bewusst ohne Farbe
   (Farbe ist fuer das Ergebnis reserviert, nicht fuer die Auswahl davor). */
#kif-app .kif-claim.kif-removed{opacity:.55;text-decoration:line-through}
#kif-app .kif-claim.kif-selected{box-shadow:inset 0 0 0 2.5px var(--kif-acc),inset 0 1px 0 var(--kif-lip)}
#kif-app.kif-a11y .kif-claim.kif-selected{outline:3px solid var(--kif-acc);box-shadow:none}

/* Einstellungs-Schalter (B2) — echte Toggle-Optik statt Checkbox, damit sich
   "AN/AUS" auch so anfuehlt. Farbe nur im aktiven Zustand (The One Accent Rule:
   Auswahl-/Zustands-Highlight ist erlaubt). */
#kif-app .kif-toggle-list{display:grid;gap:10px;max-width:640px;margin:clamp(18px,2.8vh,30px) auto 0}
#kif-app .kif-toggle-row{padding:clamp(14px,1.8vh,18px) clamp(16px,1.6vw,20px);border-radius:20px;background:var(--kif-solid);box-shadow:inset 0 1px 0 var(--kif-lip)}
#kif-app.kif-a11y .kif-toggle-row{border-radius:12px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-toggle-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
#kif-app .kif-toggle-label{font-size:16px;line-height:1.35;color:var(--kif-ink)}
#kif-app .kif-toggle{
  position:relative;flex:0 0 auto;width:46px;height:28px;border-radius:999px;border:0;cursor:pointer;padding:0;
  background:var(--kif-film-3);transition:background .24s ease-out;
}
#kif-app .kif-toggle::after{
  content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:var(--kif-ink);transition:transform .24s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-toggle[aria-pressed="true"]{background:var(--kif-acc)}
#kif-app .kif-toggle[aria-pressed="true"]::after{transform:translateX(18px);background:var(--kif-acc-i)}
#kif-app.kif-a11y .kif-toggle{outline:2px solid var(--kif-lip)}
#kif-app.kif-a11y .kif-toggle[aria-pressed="true"]{outline-color:var(--kif-acc)}
#kif-app .kif-toggle-cap{display:block;margin-top:8px;font-size:13px;color:var(--kif-ink-3)}

/* Drei fast identische Eingabefelder (A-Zwischenblock) — der Punkt der Station
   ist, dass sie sich NICHT unterscheiden lassen: gleiche Flaeche, gleicher
   blinkender Strich, nur der Text und die Unterschrift verraten den Unterschied. */
#kif-app .kif-inputs-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,16px);max-width:760px;margin:clamp(18px,2.8vh,30px) auto 0}
@media (max-width: 640px){ #kif-app .kif-inputs-row{grid-template-columns:1fr} }
#kif-app .kif-mockinput{padding:14px 16px;border-radius:16px;background:var(--kif-mock-bg);box-shadow:inset 0 1px 0 var(--kif-lip);text-align:left}
#kif-app.kif-a11y .kif-mockinput{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-mockinput-t{display:block;font-size:14px;line-height:1.4;color:var(--kif-ink-2)}
#kif-app .kif-mockinput-cursor{display:inline-block;width:2px;height:13px;background:var(--kif-ink-3);margin-left:2px;vertical-align:-2px;animation:kif-cursor-blink 1s step-end infinite}
#kif-app .kif-mockinput-cap{display:block;margin-top:10px;font-size:12px;color:var(--kif-ink-3);text-align:center}
@keyframes kif-cursor-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* ---------- Startaufnahme: Intro-Countdown / Outro (Nutzer-Wunsch) -------
   Countdown zwischen der neuen Start-Kachel und Frage 1: jede Zahl ein
   eigenes Element statt eine wiederverwendete Zahl mit Reflow-Trick, damit
   die kif-show-Transition bei jedem Tick sauber neu ausloest. Nur
   transform/opacity animiert (Whitelist), bei motionReduced() wird die
   ganze Phase uebersprungen (siehe einstiegstest.js). */
#kif-app .kif-et-countdown{display:flex;align-items:center;justify-content:center;min-height:clamp(160px,24vh,260px)}
#kif-app .kif-et-countdown-n{
  font-size:clamp(72px,13vw,140px);font-weight:500;color:var(--kif-acc);
  opacity:0;transform:scale(.7);
  transition:opacity .3s ease-out,transform .35s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-et-countdown-n.kif-show{opacity:1;transform:scale(1)}

/* Outro nach Frage 6: .kif-mockinput/.kif-mockinput-cursor sind bereits fuer
   die drei Mock-Eingabefelder in Mission 5 definiert (oben), hier nur
   zentriert und schmaler. Der Haken danach ist der bestehende TICK-Baustein
   aus _shared.js, eine eigene, hier groessere .kif-mk-badge-Variante statt
   die 20px-Inline-Groesse, mit einem eigenen Pop-in — bewusst ueber eine
   eigene Klasse (.kif-et-outro-check .kif-mk-badge) statt die Basisklasse
   global auf opacity:0 zu setzen, sonst waeren alle anderen TICK/CROSS-
   Badges im Kurs (inline in Loesungsraster, Karten, Claims) ploetzlich
   unsichtbar, bis sie irgendwo ein kif-show bekaemen. */
#kif-app .kif-et-outro{text-align:center;margin-top:clamp(28px,4.4vh,52px)}
#kif-app .kif-et-outro-mock{max-width:340px;margin:0 auto;text-align:center}
#kif-app .kif-et-outro-mock .kif-mockinput-t{display:inline;font-size:17px;color:var(--kif-ink)}
#kif-app .kif-et-outro-check{margin-top:clamp(22px,3.6vh,34px)}
#kif-app .kif-et-outro-check .kif-mk-badge{
  position:static;width:48px;height:48px;
  opacity:0;transform:scale(.6);
  transition:opacity .3s ease-out,transform .4s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-et-outro-check .kif-mk-badge.kif-show{opacity:1;transform:scale(1)}
#kif-app .kif-et-outro-check .kif-mk{width:26px;height:26px}
/* Kein eigener prefers-reduced-motion-Block noetig: die bestehende globale
   Regel (siehe unten, #kif-app *{transition-property:...}) nimmt transform
   bereits aus jeder Transition heraus und erzwingt 0.15s fuer den Rest —
   beide Elemente springen dadurch automatisch sofort auf ihren Endzustand. */

/* ============================================================================
   Abschluss-Impuls — zwei Regler-Fragen, rein lokale Selbstreflexion
   ============================================================================ */

/* Echtes <input type="range"> statt eines handgebauten Drag-Reglers: liefert
   Tastatur-Bedienung (Pfeiltasten), Touch und ARIA-Semantik (role=slider,
   aria-valuenow) kostenlos und robust vom Browser, statt das selbst nachbauen
   und gegen Rand- und Tastaturfaelle absichern zu muessen. */
#kif-app .kif-impulse-q{max-width:640px;margin:clamp(26px,4vh,42px) auto 0}
#kif-app .kif-impulse-q:first-of-type{margin-top:clamp(18px,2.8vh,32px)}
/* Gestaffeltes Erscheinen (Kritik-Fund, Nutzer-Feedback: beide Fragen
   standen bisher gleichzeitig und zu dicht beieinander). abschluss-impuls.js
   haengt Frage 2 erst nach ~4s ein und blendet beide Fragen einzeln per
   opacity/translateY ein (.kif-show, dasselbe Muster wie ueberall sonst im
   Kurs) — reiner Opacity-/Transform-Uebergang, keine Hoehen-Animation, die
   Karte waechst dadurch zwar real (Frage 2 ist neuer Inhalt, kein
   Layout-Shift-Fall wie bei der Website-Timeline), aber nie mitten in einer
   Bewegung. Sobald Frage 2 erscheint, bekommen beide Fragenbloecke
   zusaetzlich .kif-grown (ein einziges transform:scale statt einzelner
   font-size-Aenderungen pro Element, waechst Frage, Regler und Labels
   gemeinsam) und die Kopfzeile bekommt .kif-compact (siehe dort). */
#kif-app .kif-impulse-q{opacity:0;transform:translateY(10px);transition:opacity .5s ease-out,transform .5s ease-out}
#kif-app .kif-impulse-q.kif-show{opacity:1;transform:translateY(0)}
#kif-app .kif-impulse-q.kif-show.kif-grown{transform:scale(1.08);transition:opacity .5s ease-out,transform .6s cubic-bezier(.16,.84,.32,1)}
@media (prefers-reduced-motion:reduce){ #kif-app .kif-impulse-q{transition:none} }
/* Kopfzeile wird kompakter, sobald Frage 2 erscheint (Nutzer-Wunsch: "oberer
   Bereich rutscht etwas nach oben"). Nur font-size wird animiert (nicht
   margin/padding, siehe Detector-Regel "layout-transition" und derselbe
   Kompromiss bei der Website-Timeline weiter oben in diesem Projekt) — die
   echte Verkleinerung der h1/Sub-Box reduziert automatisch den Abstand zu
   Frage 1 darunter. */
#kif-app .kif-impulse-screen h1{transition:font-size .6s ease}
#kif-app .kif-impulse-screen .kif-sub{transition:font-size .6s ease}
#kif-app .kif-impulse-screen.kif-compact h1{font-size:clamp(22px,2.6vw,32px)}
#kif-app .kif-impulse-screen.kif-compact .kif-sub{font-size:15px}
@media (prefers-reduced-motion:reduce){
  #kif-app .kif-impulse-screen h1,#kif-app .kif-impulse-screen .kif-sub{transition:none}
}
#kif-app .kif-slider{
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;border-radius:999px;
  margin:clamp(20px,3vh,30px) 0 12px;background:var(--kif-film-3);outline:none;cursor:pointer;
}
#kif-app .kif-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--kif-acc);border:0;
  box-shadow:0 3px 10px oklch(0.10 0.02 50 / .4);cursor:grab;
  transition:transform .2s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-slider::-webkit-slider-thumb:hover{transform:scale(1.08)}
#kif-app .kif-slider::-webkit-slider-thumb:active{cursor:grabbing}
#kif-app .kif-slider::-moz-range-track{background:var(--kif-film-3);border:0;height:8px;border-radius:999px}
#kif-app .kif-slider::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--kif-acc);border:0;cursor:grab}
#kif-app .kif-slider:focus-visible{outline:3px solid var(--kif-acc);outline-offset:6px}
#kif-app.kif-a11y .kif-slider{background:var(--kif-glass);outline:2px solid var(--kif-lip)}
#kif-app.kif-a11y .kif-slider::-webkit-slider-thumb{box-shadow:none;outline:2px solid var(--kif-acc-i)}
#kif-app.kif-a11y .kif-slider::-moz-range-thumb{outline:2px solid var(--kif-acc-i)}

/* Kein Fuell-/Fortschrittsbalken vor dem Griff: das waere hier semantisch
   falsch, "mehr gefuellt" wuerde "besser/mehr" suggerieren, aber das ist eine
   Meinungsskala ohne Fortschritt. Nur Bahn + Griff. */
#kif-app .kif-impulse-labels{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;
  font-size:13px;line-height:1.4;color:var(--kif-ink-3);
}
#kif-app .kif-impulse-labels span:first-child{text-align:left}
#kif-app .kif-impulse-labels span:last-child{text-align:right}
#kif-app .kif-impulse-mid{text-align:center}
#kif-app .kif-impulse-labels--2{grid-template-columns:1fr 1fr}
@media (max-width:560px){ #kif-app .kif-impulse-labels{grid-template-columns:1fr} #kif-app .kif-impulse-labels span{text-align:center!important} }

/* ===== Pruefung "Der Schreibtisch" (07-pruefung.md) =====================
   Foto-Hub mit Hotspot-Zoom (Nutzer-Wunsch, /impeccable shape) statt des
   fruehreren Icon-Kachel-Grids auf einer stilisierten Fenster-Pille/
   Tischflaeche (siehe Git-Historie): dasselbe feste Foto (app/assets/
   desk-hub.jpg) traegt jetzt die Szene, Klicks auf die echten Objekte darin
   (Monitor/Hefter/Handy/Kopfhoerer) loesen eine Kamerafahrt aus statt eines
   Icon-Grids. .kif-desk-stage bekommt weiterhin eine FESTE Mindesthoehe: Hub
   und Station wechseln sich in derselben Flaeche ab, sonst wuerde
   fitScreen() bei jedem Oeffnen/Schliessen neu skalieren ("Wackeln"). */
/* Kopfzeile kleiner, Foto-Buehne dafuer groesser (Nutzer-Wunsch): auf diesem
   Screen ist die Buehne der eigentliche Inhalt, der Titel nur Orientierung —
   anders als auf den meisten anderen Screens, wo shell()s Standardgroessen
   passen. Gleiches Prinzip wie .kif-impulse-screen (Abschluss-Impuls), hier
   ohne dessen Kompakt-Umschaltung, permanent kleiner statt erst nach einer
   Interaktion. */
/* 24-34px -> 19-24px, zweite Verkleinerung (Nutzer-Wunsch: "Bildschirm muss
   deutlich groesser werden, dafuer kann der Schreibtisch/Kopf kleiner
   werden") — der Titel ist auf diesem Screen ohnehin nur Orientierung, siehe
   Begruendung bei .kif-desk-stage. */
#kif-app .kif-pruefung-screen h1{font-size:clamp(19px,2vw,24px)}
#kif-app .kif-pruefung-screen .kif-sub{font-size:13.5px;margin-top:4px}
/* 380-560px -> 460-720px, zweite Vergroesserung (Nutzer-Wunsch, wiederholt:
   "der Bildschirm muss deutlich groesser werden, deutlich mehr Platz
   einnehmen") — zusammen mit der kleineren Kopfzeile und der kompakteren
   .kif-examfrag-Leiste (weiter unten) bleibt bei 1024x640 weiterhin kein
   Seiten-Scroll (Verifikation nach dem Umbau erneut geprueft). */
#kif-app .kif-desk-stage{position:relative;min-height:clamp(460px,62vh,720px);display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,1.2vh,14px)}
/* .kif-desk-hub ist das feste "Fenster" auf die Szene (Aspect-Ratio wie das
   Originalfoto, 1026x572) — dieselbe Aspect-Ratio-Technik wie .kif-scene
   (Mission-Illustrationen), hier fuer ein Foto statt SVG. overflow:hidden
   clippt die Kamerafahrt, border-radius/Schatten geben ihm dieselbe
   "schwebendes Glas-Fenster"-Sprache wie der Rest des Kurses.
   760px -> 920px -> 1180px (Nutzer-Wunsch, zweimal wiederholt, siehe
   .kif-desk-stage oben).
   isolation:isolate (Kritik-Fund, Nutzer-Feedback samt Safari-Screenshot,
   graue Flaechen links/rechts direkt am Bildschirm): NICHT der "Zurueck"-
   Button (der Verdacht des Nutzers) -- der traegt selbst keinerlei
   backdrop-filter, weder er noch sein direkter Elter .kif-desk-overlay.
   Der tatsaechliche Kandidat sitzt zwei Ebenen weiter aussen: .kif-window
   (das App-weite "Frosted Window", app.css weiter oben) legt
   backdrop-filter+border-radius+overflow:hidden gleichzeitig auf ein
   Element, das .kif-desk-hub (selbst border-radius+overflow:hidden) und
   darin .kif-desk-scene (bekommt bei jeder offenen Station ein eigenes
   transform:scale() fuer die Kamerafahrt) verschachtelt enthaelt -- exakt
   das dokumentierte WebKit-Muster "backdrop-filter blendet an der
   Kompositions-Grenze eines verschachtelten transformierten Kindelements
   grau ein" (tritt nur bei GEZOOMTER Szene auf, nie auf dem ruhenden Hub,
   deckt sich mit der Beobachtung). isolation:isolate zwingt Safari, fuer
   diesen Teilbaum einen eigenen, klar begrenzten Compositing-Layer
   anzulegen, statt den Blur des .kif-window daran vorbei-/durchzurechnen --
   in Chrome ohne sichtbaren Effekt, da dort kein entsprechender Bug
   existiert. Nicht in echtem Safari verifizierbar (nur Chromium-Testbrowser
   in dieser Umgebung verfuegbar) -- Rueckmeldung noetig. */
#kif-app .kif-desk-hub{
  position:relative;max-width:1180px;margin:0 auto;width:100%;aspect-ratio:1026/572;
  border-radius:28px;overflow:hidden;background:oklch(0.14 0.012 48);
  box-shadow:inset 0 1px 0 var(--kif-lip),var(--kif-shadow-dock);
  isolation:isolate;
}
/* Vignette auf dem AEUSSEREN Rahmen (nicht auf .kif-desk-scene): bleibt beim
   Hineinzoomen ein ruhiger, gleichbleibender Kameraabschluss statt selbst
   mitzuskalieren, dieselbe Vignetten-Idee wie .kif-scene::after. */
#kif-app .kif-desk-hub::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, oklch(0.10 0.02 50 / .38) 100%);
}
#kif-app.kif-a11y .kif-desk-hub::after{display:none}
/* Die Szene: Foto + Tageslicht-Overlay + Hotspots, gemeinsam skaliert bei der
   Kamerafahrt. transform-origin bleibt immer die Mitte — die eigentliche
   "Kamera faehrt auf das Objekt zu"-Wirkung entsteht durch die zusaetzliche
   translate() weiter unten, die den Hotspot VOR dem Skalieren an die Mitte
   schiebt (Standard-Technik fuer "Zoom auf Punkt, dabei zentrieren"). */
/* .62s -> 1.5s (Kritik-Fund, Nutzer-Feedback: die Kamerafahrt wirkte zu
   schnell, "ruhiger/kinoartiger" gewuenscht) — reine Dauer-Aenderung,
   dieselbe ease-out-Kurve (kein Bounce, siehe DESIGN-BRIEF). pruefung.js'
   afterZoom()-Timeout-Ersatz ist entsprechend mitgewandert. */
#kif-app .kif-desk-scene{
  position:absolute;inset:0;transform-origin:50% 50%;
  transition:transform 1.5s cubic-bezier(.16,.84,.32,1);
}
#kif-app .kif-desk-scene.kif-zoomed{
  transform:scale(var(--kif-zoom-scale,2.15)) translate(calc(50% - var(--kif-zoom-x,50%)), calc(50% - var(--kif-zoom-y,50%)));
}
@media (prefers-reduced-motion:reduce){ #kif-app .kif-desk-scene{transition:none} }
#kif-app.kif-a11y .kif-desk-scene{transition:none}
#kif-app .kif-desk-photo{
  position:absolute;inset:0;background:url('assets/desk-hub.jpg') center/cover no-repeat;
}
/* Kleine, mitskalierende Maskierung genau ueber dem (unscharfen, aber realen)
   Marken-Schriftzug auf der Monitor-Unterkante im Originalfoto — CLAUDE.md
   verbietet echte Marken/Logos, Bild ist sonst unveraendert. Sitzt INNERHALB
   von .kif-desk-scene, damit sie bei der Kamerafahrt exakt an Ort und Stelle
   bleibt statt sich vom Bild zu loesen. */
#kif-app .kif-desk-logomask{position:absolute;left:48.8%;top:55.8%;width:5.6%;height:3.3%;z-index:1;background:oklch(0.13 0.012 46)}
/* Tageslicht-Verlauf ueber dem Foto (Morgen -> Daemmerung), gekoppelt an die
   Zahl erledigter Stationen statt an die Systemuhr (Spec) — das Foto selbst
   kann sein Licht nicht bewegen, ein Farb-Wash simuliert den Fortschritt
   darueber. Stage 3 = Daemmerung = genau der Moment, in dem das Finale
   entsperrt (siehe refreshHub() in pruefung.js, beide Schwellen sind
   identisch: alle fuenf Hauptstationen erledigt). */
#kif-app{
  /* Tageslicht-Verlauf Morgen->Daemmerung (drei Stufen) plus die zwei
     Verlaufs-Stopps des Monitor-Leuchtens — dokumentiert hier gegen den
     Detector-Fund "Farbe ausserhalb DESIGN.md", gleiches Prinzip wie
     --kif-desk-l0/-l1/-l2/-l3 fuer das fruehere Fenster-Licht. */
  --kif-desk-day-1:oklch(0.64 0.085 66 / .14);
  --kif-desk-day-2:oklch(0.56 0.11 46 / .26);
  --kif-desk-day-3:oklch(0.16 0.03 258 / .62);
  --kif-desk-glow-in:oklch(0.78 0.09 70 / .9);
  --kif-desk-glow-out:oklch(0.58 0.085 52 / .55);
}
#kif-app .kif-desk-daylight{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:oklch(0.60 0.06 68 / 0);transition:background 1.1s ease-out;
}
#kif-app .kif-desk-hub[data-stage="1"] .kif-desk-daylight{background:var(--kif-desk-day-1)}
#kif-app .kif-desk-hub[data-stage="2"] .kif-desk-daylight{background:var(--kif-desk-day-2)}
#kif-app .kif-desk-hub[data-stage="3"] .kif-desk-daylight{background:var(--kif-desk-day-3)}
#kif-app.kif-a11y .kif-desk-daylight{display:none}
/* Der Monitor als einzige warme Lichtquelle im abgedunkelten Raum (Spec:
   "dunkel, nur die Schreibtischlampe brennt") — der dunkle Bildschirm im
   Foto bekommt bei Stage 3 einen warmen Fuellton auf genau seiner eigenen
   Flaeche, als wuerde er gerade angehen. Das ist Bildinhalt (was der
   Bildschirm zeigt/ausstrahlt), kein dekorativer Schlagschatten-Glow um ein
   UI-Element (siehe "Ring statt Glow"-Praezedenzfall weiter oben in dieser
   Datei) — deshalb hier ausdruecklich kein box-shadow, sondern eine Flaeche,
   die exakt auf die Monitor-Hotspot-Geometrie geclippt ist. */
#kif-app .kif-desk-screenglow{
  position:absolute;left:28%;top:11.2%;width:47%;height:45.8%;z-index:1;
  border-radius:3%;opacity:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 46%, var(--kif-desk-glow-in), var(--kif-desk-glow-out) 68%, transparent 100%);
  transition:opacity 1.1s ease-out;
}
#kif-app .kif-desk-screenglow.kif-lit{opacity:1}
#kif-app.kif-a11y .kif-desk-screenglow{display:none}

/* Hotspots: unsichtbare Trefflaechen exakt ueber den echten Objekten im
   Foto (Prozent-Koordinaten aus pruefung.js' HOTSPOTS, dort vermessen).
   Hover/Fokus hebt dezent an (leichtes Scale statt Schatten, das Foto selbst
   traegt schon genug Tiefe). v2 (Kritik-Fund, Nutzer-Feedback): der kleine
   blaue Marker-Punkt (.kif-desk-hotspot-dot) ist ersatzlos entfallen — "direkt
   klickbare Bereiche ... ganz ohne sichtbare Marker-Punkte". Die Trefflaeche
   selbst bleibt exakt so gross wie das Objekt im Foto, nur eben unsichtbar
   bis zur Interaktion. Weicht von 07-pruefung.md ("Rote Zaehler wie
   ungelesene Nachrichten") bewusst ab: das war ohnehin nie ein echter
   Zaehler, nur ein leerer Punkt. */
#kif-app .kif-desk-hotspot{
  position:absolute;z-index:2;border:0;background:transparent;padding:0;cursor:pointer;
  border-radius:14px;transition:transform .25s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-desk-hotspot:hover,#kif-app .kif-desk-hotspot:focus-visible{transform:scale(1.045)}
#kif-app .kif-desk-hotspot:focus-visible{outline:3px solid var(--kif-acc);outline-offset:4px}
#kif-app .kif-desk-hotspot:disabled{cursor:not-allowed}
#kif-app .kif-desk-hotspot:disabled:hover{transform:none}
/* Im Kontrast-Modus muss die Trefflaeche staendig sichtbar sein statt nur
   bei Hover — ueber einem Foto ist "unsichtbar, bis man zufaellig drueber
   faehrt" kein klarer Fokusring (DESIGN-BRIEF: "klare Fokus-Ringe"). */
#kif-app.kif-a11y .kif-desk-hotspot{outline:2px dashed var(--kif-lip);outline-offset:2px}
#kif-app.kif-a11y .kif-desk-hotspot:hover,#kif-app.kif-a11y .kif-desk-hotspot:focus-visible{transform:none;outline-color:var(--kif-acc)}
/* Waehrend der Kamerafahrt/offenen Station darf die Hover-Aufhebung nicht
   sichtbar bleiben: sitzt IN .kif-desk-scene und wuerde sonst mit
   hochskaliert. Das Overlay selbst faengt Klicks ohnehin ab
   (pointer-events:auto), pointer-events:none hier ist zusaetzliche
   Absicherung, kein funktionaler Bedarf. */
#kif-app .kif-desk-scene.kif-zoomed .kif-desk-hotspot{pointer-events:none}
/* Die Lampe: der Monitor-Hotspot ist "lit", sobald das Finale entsperrt,
   aber noch nicht erledigt ist — ein scharfer, farbiger Ring (kein Glow,
   siehe Praezedenzfall oben) hebt die Trefflaeche zusaetzlich zum
   Bildschirm-Leuchten (.kif-desk-screenglow) hervor. */
#kif-app .kif-desk-hotspot.kif-lit{box-shadow:0 0 0 2px var(--kif-desk-lamp-ring)}
#kif-app.kif-a11y .kif-desk-hotspot.kif-lit{outline-color:var(--kif-acc);outline-style:solid}
#kif-app{ --kif-desk-lamp-ring:oklch(0.80 0.095 72 / .8); }

#kif-app .kif-desk-daylabel{
  display:none;position:absolute;left:50%;bottom:10px;z-index:2;transform:translateX(-50%);
  padding:6px 14px;border-radius:999px;background:var(--kif-bg);
  font-size:13px;color:var(--kif-ink-2);white-space:nowrap;
}
#kif-app.kif-a11y .kif-desk-daylabel{display:block}
#kif-app .kif-desk-note{text-align:center;font-size:13px;color:var(--kif-ink-3);margin:0;min-height:1em}

/* Zurueck-Button: eigenes, sekundaeres Steuerelement innerhalb des
   Stations-Overlays statt eines erneuten Zoom-Auslesers ueber ein Objekt. */
#kif-app .kif-desk-back{
  display:inline-flex;align-items:center;gap:7px;position:absolute;top:14px;left:14px;z-index:1;
  padding:8px 16px 8px 12px;border:0;border-radius:999px;cursor:pointer;font:inherit;font-size:13.5px;
  background:var(--kif-film);color:var(--kif-ink-2);transition:background .2s ease-out,color .2s ease-out;
}
#kif-app .kif-desk-back:hover{background:var(--kif-film-2);color:var(--kif-ink)}
#kif-app .kif-desk-back svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#kif-app.kif-a11y .kif-desk-back{outline:2px solid var(--kif-lip)}

/* Stations-Overlay: gleiche Struktur wie .kif-errfocus/.kif-errcard weiter
   oben, eigene Klassen weil der Bezugsrahmen (Hub statt Ablagen) ein anderer
   ist. Deshalb hier auf dieselben Deklarationen verweisen statt sie zu
   duplizieren. .kif-desk-overlay ist ein GESCHWISTER von .kif-desk-hub in
   .kif-desk-stage (nicht darin verschachtelt) und deckt die ganze Stage ab,
   nicht nur den Foto-Rahmen: pruefung.js' fitStage() laesst die Stage bei
   Bedarf ueber die feste Foto-Aspect-Ratio hinaus wachsen (laengere
   Stationen, z.B. vier Auswahlzeilen), die Karte bleibt trotzdem immer
   lesbar statt in einer zu kleinen Kapsel zu verhungern. Waehrend der
   Kamerafahrt bleibt die Karte unangetastet (liegt ausserhalb des
   skalierten .kif-desk-scene) und erscheint erst NACH deren Ende ueber der
   (jetzt gezoomten) Objektflaeche (pruefung.js' afterZoom()). */
#kif-app .kif-desk-overlay{background:oklch(0.10 0.02 50 / .30)}
#kif-app.kif-a11y .kif-desk-overlay{background:transparent}
#kif-app .kif-errfocus,#kif-app .kif-desk-overlay{
  position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;
  padding:12px;opacity:0;pointer-events:none;transition:opacity .3s ease-out;
}
#kif-app .kif-errfocus.kif-show,#kif-app .kif-desk-overlay.kif-show{opacity:1;pointer-events:auto}
#kif-app .kif-errcard,#kif-app .kif-desk-card{
  max-width:min(680px,92%);max-height:calc(100% - 24px);overflow:auto;text-align:center;
  padding:clamp(24px,3vh,36px) clamp(22px,2.6vw,40px);border-radius:24px;background:var(--kif-glass-2);
  backdrop-filter:var(--kif-blur);-webkit-backdrop-filter:var(--kif-blur);
  box-shadow:inset 0 1px 0 var(--kif-lip-2),var(--kif-shadow-focus);
}
#kif-app.kif-a11y .kif-errcard,#kif-app.kif-a11y .kif-desk-card{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-lip);background:var(--kif-glass-2);backdrop-filter:none}

/* Inhalt erscheint AUF dem Bildschirm im Foto (Objekte mit isScreen, aktuell der
   Monitor). Das Foto bleibt die physische Umgebung: Rahmen, Standfuss, Licht
   und Schreibtisch bleiben sichtbar (pruefung.js zoomt nur bis zum ganzen
   Monitor, nicht bis zur Glasflaeche). .kif-desk-screen ist die Displayflaeche
   selbst: pruefung.js' positionCardOnScreen() legt sie in Prozent exakt auf die
   vermessene schwarze Glasflaeche, dadurch bleibt sie bei jeder Fenstergroesse
   deckungsgleich. Ohne eigenen Bildschirm ist sie display:contents und damit
   unsichtbar (die Karte verhaelt sich dann wie vorher).
   Die Flaeche ist dunkel, aber leicht durchscheinend (Spiegelung und Licht des
   Fotos bleiben ahnbar), ohne Schatten, ohne Rahmen, ohne Blur: sie soll wie
   das Display wirken, nicht wie ein zweites Geraet davor. Der Radius ist die
   kleine Eckrundung echter Displays. Frueher stand hier eine blickdichte
   Karte mit 4% Breiten-Ueberschuss ueber einem Hub, der auf den Bildschirm
   gezoomt war; sie lag breiter als das Display und das Foto ringsum war nur
   noch ein grauer Rahmen. */
/* Die Umgebung wird beim Oeffnen nicht abgedunkelt (frueher lag ein 30%-Wash
   ueber der ganzen Buehne und zeichnete ein graues Rechteck ums Foto). */
#kif-app .kif-desk-overlay--screen{background:transparent}
/* ====================================================================
   Monitor-Oberflaeche ("Betriebssystem" der Pruefung)
   Klassische Desktop-Software der 80er/frueher 90er in ruhiger, moderner
   Umsetzung: schmale Titelleiste, rechteckige Formen, duenne mehrschichtige
   Bevel-Rahmen, eine Akzentfarbe (gedaempftes Bernstein), Pixel-Details nur
   bei Zeiger und Titel-Symbol. Gilt ausschliesslich innerhalb der Displayflaeche
   (.kif-desk-screen--on); Position und Groesse des Displays bleiben unberuehrt
   (positionCardOnScreen). Alle Farben und Schatten als Variablen, damit jede
   kuenftige Frage dieselbe Sprache bekommt.
   Palette (in DESIGN.md dokumentiert): warmes Schwarz (Desktop), Anthrazit
   (Fenster, Tasten), helle Schrift, ein Bernstein fuer Auswahl und Fokus.
   ==================================================================== */
#kif-app{
  --kif-os-desk:oklch(0.15 0.008 58);
  --kif-os-win:oklch(0.21 0.009 62);
  --kif-os-face:oklch(0.27 0.010 64);
  --kif-os-face-hov:oklch(0.31 0.011 64);
  --kif-os-face-sel:oklch(0.23 0.009 62);
  --kif-os-title:oklch(0.35 0.012 64);
  --kif-os-hi:oklch(0.42 0.012 66);
  --kif-os-hi-soft:oklch(0.33 0.011 65);
  --kif-os-lo:oklch(0.11 0.006 56);
  --kif-os-lo-soft:oklch(0.17 0.008 58);
  --kif-os-line:oklch(0.07 0.004 55);
  --kif-os-dim:oklch(0.68 0.012 72);
  --kif-os-amber:oklch(0.80 0.12 78);
  --kif-os-amber-ink:oklch(0.20 0.02 70);
  /* Zwei Lagen je Seite: 1px helle bzw. dunkle Kante, darunter eine weichere
     zweite Lage, plus 1px dunkle Aussenlinie. Gedrueckt = vertauscht. */
  --kif-os-raised:inset 1px 1px 0 var(--kif-os-hi),inset -1px -1px 0 var(--kif-os-lo),inset 2px 2px 0 var(--kif-os-hi-soft),inset -2px -2px 0 var(--kif-os-lo-soft),0 0 0 1px var(--kif-os-line);
  --kif-os-sunken:inset 1px 1px 0 var(--kif-os-lo),inset -1px -1px 0 var(--kif-os-hi),inset 2px 2px 0 var(--kif-os-lo-soft),inset -2px -2px 0 var(--kif-os-hi-soft),0 0 0 1px var(--kif-os-line);
  --kif-os-gap:clamp(6px,0.9vw,12px);
  --kif-os-bar:26px;
}
#kif-app .kif-desk-screen{display:contents}
#kif-app .kif-desk-titlebar{display:none}
#kif-app .kif-desk-screen--on{
  display:grid;grid-template-rows:auto minmax(0,1fr);position:absolute;z-index:1;overflow:hidden;border-radius:8px;
  padding:var(--kif-os-gap);
  background:color-mix(in oklch, var(--kif-os-desk) 94%, transparent);
}
/* Fensterrahmen: eine Flaeche hinter Titelleiste und Karte. */
#kif-app .kif-desk-screen--on::before{
  content:"";position:absolute;inset:var(--kif-os-gap);background:var(--kif-os-win);box-shadow:var(--kif-os-raised);pointer-events:none;
}
#kif-app .kif-desk-screen--on .kif-desk-titlebar{
  display:flex;align-items:center;gap:9px;position:relative;z-index:1;height:var(--kif-os-bar);margin:3px 3px 0;padding:0 10px;
  background:var(--kif-os-title);box-shadow:inset 0 -1px 0 var(--kif-os-lo);
}
/* Pixel-Symbol links in der Titelleiste: vier 3px-Quadrate, zwei davon Bernstein. */
#kif-app .kif-desk-titlebar-ic{
  position:relative;flex:0 0 auto;width:3px;height:3px;margin:0 7px 4px 0;background:var(--kif-os-amber);
  box-shadow:4px 0 0 var(--kif-os-dim),0 4px 0 var(--kif-os-dim),4px 4px 0 var(--kif-os-amber);
}
#kif-app .kif-desk-titlebar-t{font-size:13px;font-weight:500;letter-spacing:.02em;line-height:1;color:var(--kif-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Die Karte ist der Inhaltsbereich des Fensters. */
#kif-app .kif-desk-card--screen{
  position:relative;inset:auto;z-index:1;min-height:0;max-width:none;max-height:none;margin:0 3px 3px;border-radius:0;overflow:auto;scrollbar-width:none;
  padding:clamp(14px,3%,24px) clamp(16px,3.5%,44px) clamp(12px,2.4%,22px);
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;color:var(--kif-ink);
}
#kif-app .kif-desk-card--screen::-webkit-scrollbar{display:none}
/* Zu hoher Inhalt wird passend verkleinert (--kif-screen-fit, pruefung.js). */
#kif-app .kif-desk-card--screen > *{zoom:var(--kif-screen-fit,1)}
#kif-app .kif-desk-card--screen .kif-question{font-size:clamp(18px,1.6vw,23px)}

/* Zurueck: kleine Taste rechts in der Titelleiste. */
#kif-app .kif-desk-screen--on .kif-desk-back{
  top:calc(var(--kif-os-gap) + 3px + (var(--kif-os-bar) - 20px) / 2);right:calc(var(--kif-os-gap) + 3px + 5px);left:auto;z-index:3;
  height:20px;padding:0 9px 0 5px;gap:5px;border-radius:0;font-size:13px;line-height:1;
  background:var(--kif-os-face);color:var(--kif-ink);box-shadow:var(--kif-os-raised);transition:none;
}
#kif-app .kif-desk-screen--on .kif-desk-back:hover{background:var(--kif-os-face-hov);color:var(--kif-ink)}
#kif-app .kif-desk-screen--on .kif-desk-back:active{box-shadow:var(--kif-os-sunken)}
#kif-app .kif-desk-screen--on .kif-desk-back svg{width:12px;height:12px;stroke-width:2.4}

/* Auswahlzeilen: rechteckige Tasten mit kleinem Auswahlfeld links. Zustaende:
   normal (erhaben), Hover (etwas heller), gedrueckt (versenkt), Fokus (gepunktete
   Bernstein-Linie innen, wie die Fokus-Linie klassischer Programme), ausgewaehlt
   (versenkt, Bernstein im Feld), deaktiviert (flach, gedaempfte Schrift). */
#kif-app .kif-desk-card--screen .kif-choice{
  position:relative;border-radius:0;padding:11px 14px 11px 42px;font-size:16px;line-height:1.4;text-align:left;
  background:var(--kif-os-face);color:var(--kif-ink);box-shadow:var(--kif-os-raised);transform:none;transition:none;
}
#kif-app .kif-desk-card--screen .kif-choice::before{
  content:"";position:absolute;left:14px;top:50%;width:14px;height:14px;margin-top:-7px;background:var(--kif-os-desk);box-shadow:var(--kif-os-sunken);
}
#kif-app .kif-desk-card--screen .kif-choice:hover:not(:disabled){background:var(--kif-os-face-hov);transform:none}
#kif-app .kif-desk-card--screen .kif-choice:active:not(:disabled){box-shadow:var(--kif-os-sunken)}
#kif-app .kif-desk-card--screen .kif-choice:focus-visible{outline:1px dotted var(--kif-os-amber);outline-offset:-6px;transform:none}
#kif-app .kif-desk-card--screen .kif-choice.kif-picked,
#kif-app .kif-desk-card--screen .kif-choice.kif-picked:disabled{background:var(--kif-os-face-sel);box-shadow:var(--kif-os-sunken);opacity:1}
#kif-app .kif-desk-card--screen .kif-choice.kif-picked::before{background:var(--kif-os-amber);box-shadow:var(--kif-os-sunken),inset 0 0 0 3px var(--kif-os-desk)}
#kif-app .kif-desk-card--screen .kif-choice:disabled{opacity:1;background:var(--kif-os-win);box-shadow:inset 0 0 0 1px var(--kif-os-lo-soft);color:var(--kif-os-dim)}
#kif-app .kif-desk-card--screen .kif-choice:disabled::before{background:var(--kif-os-win);box-shadow:inset 0 0 0 1px var(--kif-os-lo-soft)}
#kif-app .kif-desk-card--screen .kif-choice.kif-picked:disabled{color:var(--kif-ink)}
#kif-app .kif-desk-card--screen .kif-choice.kif-picked:disabled::before{background:var(--kif-os-amber);box-shadow:inset 0 0 0 1px var(--kif-os-lo-soft),inset 0 0 0 3px var(--kif-os-win)}

/* Kacheln, Karten, Ablagen: gleiche Bevel-Sprache, rechteckig. */
#kif-app .kif-desk-card--screen .kif-tile,
#kif-app .kif-desk-card--screen .kif-card-drag,
#kif-app .kif-desk-card--screen .kif-duel-card{
  border-radius:0;background:var(--kif-os-face);box-shadow:var(--kif-os-raised);color:var(--kif-ink);transform:none;transition:none;
}
#kif-app .kif-desk-card--screen .kif-card-drag:hover:not(:disabled),
#kif-app .kif-desk-card--screen .kif-duel-card:hover:not(:disabled){background:var(--kif-os-face-hov);transform:none}
#kif-app .kif-desk-card--screen .kif-duel-card:focus-visible,
#kif-app .kif-desk-card--screen .kif-redact-chip:focus-visible,
#kif-app .kif-desk-card--screen .kif-sort-take:focus-visible{outline:1px dotted var(--kif-os-amber);outline-offset:-5px}
#kif-app .kif-desk-card--screen .kif-duel-card.kif-open{background:var(--kif-os-face-sel);box-shadow:var(--kif-os-sunken)}
#kif-app .kif-desk-card--screen .kif-shelf{border-radius:0;background:var(--kif-os-desk);box-shadow:var(--kif-os-sunken)}
#kif-app .kif-desk-card--screen .kif-st{font-size:16px}
#kif-app .kif-desk-card--screen .kif-sort-take{
  border-radius:0;background:var(--kif-os-face);color:var(--kif-ink);box-shadow:var(--kif-os-raised);transition:none;
}
#kif-app .kif-desk-card--screen .kif-sort-take:hover{background:var(--kif-os-face-hov)}
#kif-app .kif-desk-card--screen .kif-sort-take:active{box-shadow:var(--kif-os-sunken)}
#kif-app .kif-desk-card--screen .kif-redact-frame{border-radius:0;background:var(--kif-os-title);color:var(--kif-ink)}
#kif-app .kif-desk-card--screen .kif-redact-chip{border-radius:0;background:var(--kif-os-face);box-shadow:var(--kif-os-raised);transition:none}
#kif-app .kif-desk-card--screen .kif-redact-chip:hover{background:var(--kif-os-face-hov)}
#kif-app .kif-desk-card--screen .kif-redact-chip-ic{border-radius:0;background:var(--kif-os-desk);box-shadow:var(--kif-os-sunken)}
#kif-app .kif-desk-card--screen .kif-redact--photo .kif-redact-chip{background:var(--kif-os-face)}
#kif-app .kif-desk-card--screen .kif-tw{box-shadow:inset 0 1px 0 var(--kif-os-hi-soft)}

/* Tasten (Senden, Fertig, Weiter): Standardtaste mit Bernstein-Doppelrand. */
#kif-app .kif-desk-card--screen .kif-btn-primary,
#kif-app .kif-desk-screen--on .kif-browser-window .kif-btn-primary{
  border-radius:0;padding:9px 24px;font-size:15px;font-weight:500;background:var(--kif-os-face);color:var(--kif-ink);
  box-shadow:var(--kif-os-raised);outline:1px solid var(--kif-os-amber);outline-offset:1px;transform:none;transition:none;
}
#kif-app .kif-desk-card--screen .kif-btn-primary:hover:not(:disabled),
#kif-app .kif-desk-screen--on .kif-browser-window .kif-btn-primary:hover:not(:disabled){background:var(--kif-os-face-hov);transform:none}
#kif-app .kif-desk-card--screen .kif-btn-primary:active:not(:disabled),
#kif-app .kif-desk-screen--on .kif-browser-window .kif-btn-primary:active:not(:disabled){box-shadow:var(--kif-os-sunken)}
#kif-app .kif-desk-card--screen .kif-btn-primary:disabled{opacity:1;background:var(--kif-os-win);color:var(--kif-os-dim);box-shadow:inset 0 0 0 1px var(--kif-os-lo-soft);outline:none}
#kif-app .kif-desk-card--screen .kif-info-btn--wide{
  border-radius:0;background:var(--kif-os-face);color:var(--kif-ink);box-shadow:var(--kif-os-raised);transition:none;font-size:14px;
}
#kif-app .kif-desk-card--screen .kif-info-btn--wide:hover{background:var(--kif-os-face-hov)}

/* Simulierte Webseite: ein zweites, kleineres Fenster auf demselben Desktop. */
#kif-app .kif-desk-screen--on .kif-browser-window{
  border-radius:0;background:var(--kif-os-win);box-shadow:var(--kif-os-raised),0 6px 0 0 oklch(0.08 0.005 55 / .5);transform:none;transition:none;
}
#kif-app .kif-desk-screen--on .kif-browser-window .kif-chatwin-head{
  padding:0 10px;height:var(--kif-os-bar);margin:3px 3px 0;background:var(--kif-os-title);color:var(--kif-ink);font-size:13px;
}
#kif-app .kif-desk-screen--on .kif-browser-window .kif-chatwin-dot{width:3px;height:3px;border-radius:0;background:var(--kif-os-amber);box-shadow:4px 0 0 var(--kif-os-dim),0 4px 0 var(--kif-os-dim),4px 4px 0 var(--kif-os-amber);margin:0 7px 4px 0}
#kif-app .kif-desk-screen--on .kif-browser-window .kif-browser-url{color:var(--kif-ink);font-weight:500;letter-spacing:.02em}
#kif-app .kif-desk-screen--on .kif-browser-window .kif-nav{border-radius:0;background:var(--kif-os-face);box-shadow:var(--kif-os-raised);color:var(--kif-ink)}

/* Klassischer Pixel-Zeiger NUR auf dem Display, nur bei echter Maus. Der Zeiger
   ist der Hardware-Zeiger des Systems (ein Bild), kein nachlaufendes Element:
   Position und Bewegung bleiben exakt. Touch bleibt unberuehrt. */
@media (hover:hover) and (pointer:fine){
  #kif-app .kif-desk-screen--on.kif-desk-screen--on,
  #kif-app .kif-desk-screen--on.kif-desk-screen--on *{cursor:url(assets/cursors/os-arrow.svg) 0 0, default}
  #kif-app .kif-desk-screen--on.kif-desk-screen--on :is(button,a,[role="button"],.kif-choice,.kif-duel-card,.kif-redact-chip,.kif-card-drag,.kif-sort-take):not(:disabled),
  #kif-app .kif-desk-screen--on.kif-desk-screen--on :is(button,a,[role="button"],.kif-choice,.kif-duel-card,.kif-redact-chip,.kif-card-drag,.kif-sort-take):not(:disabled) *{cursor:url(assets/cursors/os-hand.svg) 6 0, pointer}
}

/* Kontrast-Modus: dieselbe Anordnung, aber mit klaren 2px-Rahmen statt feiner
   Bevel-Schichten, solide Flaechen, staerkerer Fokus. */
#kif-app.kif-a11y .kif-desk-screen--on{background:var(--kif-os-desk);outline:2px solid var(--kif-lip)}
#kif-app.kif-a11y .kif-desk-screen--on::before{box-shadow:inset 0 0 0 2px var(--kif-ink-3)}
#kif-app.kif-a11y .kif-desk-card--screen :is(.kif-choice,.kif-tile,.kif-card-drag,.kif-duel-card,.kif-redact-chip,.kif-sort-take,.kif-btn-primary){box-shadow:none;outline:2px solid var(--kif-ink-3);outline-offset:0}
#kif-app.kif-a11y .kif-desk-card--screen .kif-choice.kif-picked,
#kif-app.kif-a11y .kif-desk-card--screen .kif-duel-card.kif-open{outline:3px solid var(--kif-os-amber)}
#kif-app.kif-a11y .kif-desk-card--screen .kif-choice:focus-visible{outline:3px solid var(--kif-os-amber);outline-offset:2px}
#kif-app.kif-a11y .kif-desk-card--screen .kif-choice:disabled{color:var(--kif-ink-2)}
#kif-app.kif-a11y .kif-desk-screen--on .kif-desk-back{box-shadow:none;outline:2px solid var(--kif-ink-3)}

/* Kleine Bildschirme: schmalere Rahmen, die Leiste bleibt bedienbar. */
@media (max-width:600px){
  #kif-app{--kif-os-gap:4px;--kif-os-bar:24px}
  #kif-app .kif-desk-card--screen .kif-choice{padding:9px 10px 9px 34px;font-size:15px}
  #kif-app .kif-desk-card--screen .kif-choice::before{left:10px;width:12px;height:12px;margin-top:-6px}
}

/* Flüssigkeitsstand-FRAG-Leiste, exklusiv fuer die Pruefung: die vier
   Buchstaben sind zu diesem Zeitpunkt in der Shell-Leiste laengst alle
   freigeschaltet (F-G kamen je aus M2-M5) — dieser zweite Balken zaehlt
   etwas anderes: den Fortschritt DURCH die Pruefung, verteilt F R R A A G. */
/* 40px/groessere Abstaende -> 30px/knapper (Nutzer-Wunsch: Kopfbereich soll
   dem vergroesserten Foto-Hub weiter Platz machen, siehe .kif-desk-stage). */
#kif-app .kif-examfrag{display:flex;justify-content:center;gap:9px;margin:2px 0 clamp(10px,1.8vh,18px)}
#kif-app .kif-examfrag-l{position:relative;width:30px;height:30px;border-radius:50%;overflow:hidden;background:var(--kif-glass);box-shadow:inset 0 1px 0 var(--kif-lip)}
/* Fuellstand ueber transform statt height: eine Hoehen-Transition wuerde bei
   jedem Schritt Layout neu berechnen (Detector-Fund layout-transition) — hier
   genuegt eine volle Flaeche, die per scaleY von unten "einwaechst". */
#kif-app .kif-examfrag-fill{position:absolute;inset:0;background:var(--kif-acc);transform:scaleY(0);transform-origin:bottom;transition:transform .6s cubic-bezier(.16,1,.3,1)}
/* Der Fuellstand kreuzt bei jedem Fuellgrad zwischen ~30% und 100% mitten
   durch den Buchstaben (Kritik-Fund, bestaetigt): eine EINHEITLICHE Textfarbe
   kann bei R/A (beide gehen 50% -> 100%) nie fuer beide Haelften gleichzeitig
   stimmen, egal welche Schwelle den Farbwechsel ausloest. Ein dunkler
   Text-Stroke loest das fuer JEDEN Fuellgrad: er liest sich als Kontur auf der
   hellen Fuellung UND stoert auf dem dunklen Glas nicht, weil er dieselbe
   dunkle Grundfarbe traegt wie der Raum dahinter. Keine .kif-filled-Klasse
   mehr noetig. */
#kif-app .kif-examfrag-letter{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:500;color:var(--kif-ink-2);
  -webkit-text-stroke:2.4px var(--kif-bg);paint-order:stroke fill;
}
#kif-app.kif-a11y .kif-examfrag-l{outline:2px solid var(--kif-lip)}
#kif-app.kif-a11y .kif-examfrag-letter{-webkit-text-stroke-color:var(--kif-bg)}

/* Vier zusaetzliche Karten fuer die Aufdeck-Station (Handy-B "Karten"). */
#kif-app .kif-duel--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){ #kif-app .kif-duel--4{grid-template-columns:repeat(2,1fr)} }

/* Sortier-Buttons (Handy-A "Muss ich das pruefen?"): eigene Klasse statt
   .kif-rank-take (Mission 4, dort bewusst klein als Text-Link) — hier sind es
   die einzige Wahlmoeglichkeit der Station, keine Nebenfunktion, und
   brauchten dieselbe grosse Pillen-Sprache wie der Rest der Pruefung
   (Kritik-Fund: 24px Traefflaeche, deutlich unter der 44px-Regel).
   Jetzt Icon-Pfeile statt vollem Ablage-Namen als Button-Text (Kritik-Fund
   /impeccable critique: bei vier Karten stand derselbe Name zehnmal auf dem
   Screen). Rund statt Pille, da kein Text mehr die laengliche Form braucht;
   die 44px-Trefflaeche bleibt exakt erhalten. Voller Name lebt als aria-label
   in pruefung.js weiter. */
#kif-app .kif-sort-take{
  flex:0 0 auto; border:0; font:inherit; cursor:pointer;
  color:var(--kif-ink-2); width:44px; height:44px; border-radius:999px; display:grid; place-items:center;
  background:var(--kif-glass); box-shadow:inset 0 1px 0 var(--kif-lip);
  transition:background .22s ease-out,color .22s ease-out;
}
#kif-app .kif-sort-take svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#kif-app .kif-sort-take:hover{background:var(--kif-glass-2);color:var(--kif-ink)}
#kif-app.kif-a11y .kif-sort-take{border-radius:12px;box-shadow:none;outline:2px solid var(--kif-lip)}

/* Finale: Schwaerzen (Chat) / Zuschneiden (Foto) als Antipp-Liste statt
   Drag-Geometrie — robuster, und die Spec nennt Antippen selbst als
   gleichwertigen Ersatzweg zum ziehbaren Ausschnittrahmen.
   Zeilen aus reinem Text sind jetzt ein 2-spaltiges Raster aus Icon-Kacheln
   (Kritik-Fund /impeccable critique: die Station war eine Checkliste, obwohl
   das Szenario von einem Foto/Screenshot handelt — ein Icon je Inhalt laesst
   die Kachel wie einen Ausschnitt aus dem Bild wirken statt wie einen
   weiteren Fliesstext-Punkt). */
#kif-app .kif-redact-frame{
  max-width:640px;margin:0 auto;padding:10px 18px;border-radius:18px 18px 0 0;
  background:var(--kif-mock-head);font-size:13px;font-weight:500;color:var(--kif-ink-2);letter-spacing:.02em;text-align:left;
}
#kif-app .kif-redact--photo .kif-redact-frame{background:var(--kif-solid)}
#kif-app .kif-redact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-width:640px;margin:8px auto 0}
@media (max-width:520px){ #kif-app .kif-redact-grid{grid-template-columns:1fr} }
#kif-app .kif-redact-chip{
  text-align:left;font:inherit;cursor:pointer;border:0;position:relative;overflow:hidden;
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:14px;background:var(--kif-mock-bg);transition:background .22s ease-out;
}
#kif-app .kif-redact-chip:hover{background:var(--kif-mock-head)}
#kif-app .kif-redact-chip-ic{
  width:32px;height:32px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;
  background:var(--kif-mock-chip);color:var(--kif-ink-2);
}
#kif-app .kif-redact-chip-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#kif-app .kif-redact-txt{display:inline-block;position:relative;font-size:15px;line-height:1.35;color:var(--kif-ink)}
#kif-app.kif-a11y .kif-redact-frame{border-radius:12px 12px 0 0}
#kif-app.kif-a11y .kif-redact-chip{background:var(--kif-glass);outline:2px solid var(--kif-lip);border-radius:10px}
/* Chat-Szene: "schwaerzen" wird ein echter schwarzer Balken ueber die GANZE
   Kachel (Icon + Text), nicht nur durchgestrichener Text — das Finale soll
   sich wie das Zensieren eines echten Screenshots anfuehlen. Im Kontrast-
   Modus bewusst NICHT die schwarz-auf-fast-schwarz-Flaeche: dort bleibt die
   bereits etablierte Umriss+Durchstreichen-Sprache (naeher an "solide Flaeche,
   hoher Kontrast" als ein reiner Farbunterschied). */
#kif-app .kif-redact--chat .kif-redact-chip.kif-marked{background:oklch(0.08 0.006 44)}
#kif-app .kif-redact--chat .kif-redact-chip.kif-marked .kif-redact-chip-ic,
#kif-app .kif-redact--chat .kif-redact-chip.kif-marked .kif-redact-txt{visibility:hidden}
#kif-app .kif-redact--chat .kif-redact-chip.kif-marked::after{
  content:'';position:absolute;inset:7px;background:oklch(0.05 0.004 44);border-radius:10px;
}
#kif-app.kif-a11y .kif-redact--chat .kif-redact-chip.kif-marked{outline:2px solid var(--kif-no)}
#kif-app.kif-a11y .kif-redact--chat .kif-redact-chip.kif-marked .kif-redact-chip-ic,
#kif-app.kif-a11y .kif-redact--chat .kif-redact-chip.kif-marked .kif-redact-txt{visibility:visible;color:var(--kif-ink-3);text-decoration:line-through}
#kif-app.kif-a11y .kif-redact--chat .kif-redact-chip.kif-marked::after{content:none}
/* Foto-Variante: "zuschneiden" statt "schwaerzen" — Entfernen liest sich hier
   eher als Streichen (durchgestrichen, gedimmt) als als schwarzer Balken,
   unveraendert dokumentierte Entscheidung, jetzt auf der Icon-Kachel statt
   auf einer reinen Textzeile. */
#kif-app .kif-redact--photo .kif-redact-chip{background:var(--kif-solid)}
#kif-app .kif-redact--photo .kif-redact-chip:hover{background:var(--kif-solid-2)}
#kif-app .kif-redact--photo .kif-redact-chip.kif-marked{opacity:.5}
#kif-app .kif-redact--photo .kif-redact-chip.kif-marked .kif-redact-chip-ic{color:var(--kif-ink-3)}
#kif-app .kif-redact--photo .kif-redact-chip.kif-marked .kif-redact-txt{color:var(--kif-ink-3);text-decoration:line-through}
#kif-app.kif-a11y .kif-redact--photo .kif-redact-chip.kif-marked{outline:2px solid var(--kif-no)}

/* Zertifikat (08-zertifikat.md) — einzige echte Text-Eingabe im gesamten
   Kurs (Name, rein clientseitig, siehe zertifikat.js). Karte nutzt Glas-
   Aktiv statt Solid-Surface: sie ist der alleinige Fokuspunkt des Screens,
   kein zweites Objekt konkurriert gleichzeitig um Blur (Two-Glass-Rule
   bleibt bei Fenster + dieser einen Karte). */
/* Vertikale Dichte dieses Blocks bewusst knapp (Kritik-Fund P0): das Feld ist
   der einzige Zusatz gegenueber jedem anderen Screen und stand vorher mit
   sehr grosszuegigen Abstaenden zwischen Label/Input/Hinweis. Auf 1024x640
   (Mindestaufloesung, PRODUCT.md) reichte das zusammen mit der Zertifikat-
   Karte nicht mehr in den Rahmen, fitScreen() musste bis auf den Notfall-
   Boden 0.6 herunterskalieren. */
#kif-app .kif-cert-field{max-width:340px;margin:clamp(10px,1.6vh,18px) auto 0;text-align:center}
#kif-app .kif-cert-field label{display:block;font-size:14px;color:var(--kif-ink-2);margin-bottom:5px}
#kif-app .kif-cert-input{
  font:inherit;font-size:18px;text-align:center;color:var(--kif-ink);background:transparent;
  border:0;border-bottom:1.5px solid var(--kif-lip-2);border-radius:0;padding:5px 4px;width:100%;
  transition:border-color .22s ease-out;
}
#kif-app .kif-cert-input::placeholder{color:var(--kif-ink-3)}
#kif-app .kif-cert-input:focus{outline:none;border-color:var(--kif-acc)}
#kif-app.kif-a11y .kif-cert-input{border:2px solid var(--kif-lip);border-radius:10px;background:var(--kif-glass);padding:8px 12px}
#kif-app.kif-a11y .kif-cert-input:focus{border-color:var(--kif-acc)}
#kif-app .kif-cert-hint{margin:5px 0 0;font-size:13px;color:var(--kif-ink-3)}

#kif-app .kif-cert{
  position:relative;max-width:640px;margin:clamp(14px,2vh,22px) auto 0;
  padding:clamp(16px,2.6vh,40px) clamp(22px,3vw,38px);border-radius:28px;text-align:center;
  background:var(--kif-glass-2);backdrop-filter:var(--kif-blur);-webkit-backdrop-filter:var(--kif-blur);
  box-shadow:inset 0 1px 0 var(--kif-lip),var(--kif-shadow-panel-act);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-cert.kif-show{opacity:1;transform:translateY(0)}
#kif-app.kif-a11y .kif-cert{border-radius:14px;background:var(--kif-glass);box-shadow:none;outline:2px solid var(--kif-lip);backdrop-filter:none}

/* Gruppe A: dezente Siegel-Optik (08-zertifikat.md, Gestaltung). Gruppe B
   bekommt bewusst kein Siegel — "clean, modern" ist dort die Abwesenheit
   dieses Elements, kein zweiter Stil dafuer. Das Markup rendert das Siegel
   IMMER, sichtbar/unsichtbar entscheidet ausschliesslich diese CSS-Regel
   ueber das Theme-Attribut: eine JS-Bedingung beim mount() haette das Siegel
   nach einem LIVEN Gruppenwechsel (Segmented-Control-Klick ohne Reload)
   stehen lassen bzw. nicht nachtraeglich einblenden koennen, weil kein
   erneutes mount() folgt (Kritik-Fund). Reine Deko (aria-hidden), daher
   keine eigene Kontrastpflicht; die tatsaechliche "Bestanden"-Aussage traegt
   .kif-cert-badge daneben. */
#kif-app[data-theme="b"] .kif-cert-seal{display:none}
#kif-app .kif-cert-seal{position:absolute;top:-16px;right:-8px;width:84px;height:84px;transform:rotate(-9deg);color:var(--kif-acc);pointer-events:none}
#kif-app .kif-cert-seal-ring{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:3 6;opacity:.55}
#kif-app .kif-cert-seal-fill{fill:currentColor;opacity:.16}
#kif-app .kif-cert-seal-line{fill:none;stroke:currentColor;stroke-width:1.5}
#kif-app .kif-cert-seal-check{fill:none;stroke:currentColor;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
#kif-app.kif-a11y .kif-cert-seal-ring{opacity:.85}

#kif-app .kif-cert-badge{display:inline-block;padding:7px 20px;border-radius:999px;background:var(--kif-acc);color:var(--kif-acc-i);font-size:14px;font-weight:500;letter-spacing:.02em}
#kif-app .kif-cert-line{margin:clamp(12px,1.6vh,22px) auto 0;font-size:clamp(20px,1.7vw,26px);font-weight:500;letter-spacing:-.016em;color:var(--kif-ink);max-width:46ch}
#kif-app .kif-cert-date{margin:8px 0 0;font-size:14px;color:var(--kif-ink-3);letter-spacing:.02em}
#kif-app .kif-cert-frag{margin-top:clamp(13px,2vh,26px)}
#kif-app .kif-cert-frag-h{margin:0;font-size:14px;font-weight:500;letter-spacing:.03em;color:var(--kif-ink-2)}
#kif-app .kif-cert-frag .kif-toggle-list{max-width:440px;gap:6px;margin-top:clamp(10px,1.4vh,14px)}
#kif-app .kif-cert-frag .kif-toggle-row{text-align:left;padding:clamp(7px,1vh,10px) clamp(14px,1.4vw,18px)}
/* Pflicht-Disclaimer (CLAUDE.md: darf nie entfernt/abgeschwaecht werden) trug
   vorher --kif-ink-3, den dunkelsten Ton im System, fuer die eine Zeile, die
   die Spec ausdruecklich als nicht verhandelbar markiert (Kritik-Fund P3):
   Sichtgewicht und erklaerte Wichtigkeit standen gegeneinander. --kif-ink-2
   hebt sie eine Stufe an, ohne sie wie eine Warnung wirken zu lassen. */
#kif-app .kif-cert-disclaimer{margin:clamp(14px,2vh,22px) auto 0;font-size:13px;line-height:1.5;color:var(--kif-ink-2);max-width:42ch}

#kif-app .kif-cert-actions{display:flex;justify-content:center;margin-top:clamp(12px,1.8vh,18px)}
#kif-app .kif-btn-ghost{
  display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:400;
  padding:10px 19px;border-radius:999px;cursor:pointer;border:0;color:var(--kif-ink-2);
  background:var(--kif-glass);box-shadow:inset 0 1px 0 var(--kif-lip);transition:color .28s ease-out,background .28s ease-out;
}
#kif-app .kif-btn-ghost:hover{background:var(--kif-glass-2);color:var(--kif-ink)}
#kif-app .kif-btn-ghost svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#kif-app.kif-a11y .kif-btn-ghost{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
/* "Scharf"-Zustand fuer zweistufige, unwiderrufliche Bestaetigungen (Auswertung
   loeschen/Code entwerten): vorher aenderte der zweite Klick-Schritt NUR den
   Text, derselbe Button, dieselbe Farbe — ein schneller Doppelklick konnte die
   Bestaetigung ungewollt uebersprungen wirken lassen, weil nichts als "jetzt
   ist es ernst" zu sehen war (Kritik-Fund /impeccable critique). Reused
   --kif-no, keine neue Farbe. */
#kif-app .kif-btn-ghost.kif-armed{color:var(--kif-no);box-shadow:inset 0 1px 0 var(--kif-lip),inset 0 0 0 1.5px var(--kif-no)}
#kif-app .kif-btn-ghost.kif-armed:hover{background:var(--kif-no-wash)}
#kif-app.kif-a11y .kif-btn-ghost.kif-armed{outline-color:var(--kif-no)}

/* Druck (window.print(), zertifikat.js): dunkles Glas auf Papier ist fuer
   einen realen Schuldrucker (meist S/W-Laser) schlicht schlechtes Ergebnis,
   viel Tonerverbrauch fuer eine kaum lesbare Flaeche. Der Bildschirm-Look
   bleibt exklusiv dem Bildschirm vorbehalten; gedruckt wird papierhell, mit
   den ohnehin vorhandenen Szenen-Tokens (--kif-scene-paper/-ink) statt neuer
   Farbliterale. Alles ausserhalb der Zertifikat-Karte (Fensterrahmen, Chrome,
   Eingabefeld) blendet aus oder wird auf "kein Layout-Zwang" zurueckgesetzt,
   damit der Browser-Druck ueber mehrere Seiten hinweg paginieren kann. */
@media print{
  #kif-app .kif-env,#kif-app .kif-grain,#kif-app .kif-shell-bar,#kif-app .kif-scroll-cue,.kif-noprint{display:none!important}
  html,body{background:#fff}
  #kif-app{background:none;padding:0;min-height:0;overflow:visible}
  #kif-app .kif-window{position:static;height:auto;max-width:none;margin:0;padding:0;overflow:visible;background:none;backdrop-filter:none;box-shadow:none;border-radius:0}
  #kif-screen{max-width:none;overflow:visible}
  #kif-app .kif-fit{transform:none!important;width:100%!important;margin-bottom:0!important}
  #kif-app h1,#kif-app .kif-sub{color:var(--kif-scene-ink)}
  #kif-app .kif-cert{opacity:1!important;transform:none!important;backdrop-filter:none;box-shadow:none;background:var(--kif-scene-paper);color:var(--kif-scene-ink)}
  #kif-app .kif-cert-line,#kif-app .kif-cert-date,#kif-app .kif-cert-disclaimer,#kif-app .kif-cert-frag-h,#kif-app .kif-toggle-label{color:var(--kif-scene-ink)!important}
  #kif-app .kif-cert-badge{background:var(--kif-scene-ink);color:var(--kif-scene-paper)}
  #kif-app .kif-toggle-row{background:none;box-shadow:none;padding:6px 0}
  #kif-app .kif-frag-l.kif-on{background:var(--kif-scene-ink);color:var(--kif-scene-paper)}
}

/* Feedback-Screen (11-feedback-screen.md) — fuenf Fragen auf einem Screen,
   bewusst knapper Rhythmus von Anfang an (Lehre aus der Zertifikat-Kritik:
   grosszuegige Einzelfragen-Abstaende addieren sich bei fuenf Fragen zum
   Notfall-Boden von fitScreen()). .kif-fq traegt diesen Rhythmus fuer ALLE
   fuenf Fragen einheitlich, unabhaengig vom Fragetyp darunter. */
#kif-app .kif-fq{max-width:640px;margin:clamp(12px,1.7vh,20px) auto 0}
#kif-app .kif-fq:first-of-type{margin-top:clamp(8px,1.2vh,14px)}
#kif-app .kif-fq-h{text-align:center;margin:0;font-size:18px;font-weight:500;letter-spacing:-.008em;color:var(--kif-ink)}
/* Kritik-Fund: die Spec-Klammer "(Mehrfachauswahl moeglich)" fehlte komplett
   im UI, nur .kif-chip statt .kif-smiley als Formsprache trug den Unterschied
   Einzel- vs. Mehrfachauswahl — zu subtil, um allein zu tragen. */
#kif-app .kif-fq-hint{text-align:center;margin:3px 0 0;font-size:13px;color:var(--kif-ink-3)}
/* Slider-Bahn traegt ihren eigenen Abstand aus .kif-slider (fuer den
   Abschluss-Impuls kalibriert, zwei Fragen mit viel Luft). Hier gescopet
   knapper, ohne die geteilte Klasse selbst anzufassen. */
#kif-app .kif-fq .kif-slider{margin:clamp(12px,1.8vh,20px) 0 8px}

/* Smiley-Bewertung (Frage 1): fuenf reine Strich-Gesichter statt Emoji
   (hartes Verbot, DESIGN-BRIEF). Nur die Mundkurve traegt die Stimmung,
   Augen bleiben zwei gleiche Punkte — ein einzelnes, konsistentes Merkmal
   ist lesbarer als fuenf komplett verschiedene Gesichter. */
#kif-app .kif-smiley-row{display:flex;justify-content:center;gap:clamp(8px,1.4vw,14px);flex-wrap:wrap;margin-top:clamp(10px,1.5vh,16px)}
#kif-app .kif-smiley{
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;padding:0;display:grid;place-items:center;
  background:var(--kif-glass);box-shadow:inset 0 1px 0 var(--kif-lip);color:var(--kif-ink-2);
  transition:background .22s ease-out,color .22s ease-out,transform .22s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-smiley:hover{background:var(--kif-glass-2);transform:translateY(-2px)}
#kif-app .kif-smiley svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#kif-app .kif-smiley-eye{stroke:none;fill:currentColor}
#kif-app .kif-smiley[aria-pressed="true"]{background:var(--kif-acc);color:var(--kif-acc-i);box-shadow:none}
#kif-app.kif-a11y .kif-smiley{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app.kif-a11y .kif-smiley[aria-pressed="true"]{outline:2px solid var(--kif-acc)}

/* Themen-Chips (Frage 3/4): bewusst NICHT .kif-choices/.kif-choice — jene
   Familie ist fuer volle Saetze als vertikale Zeilen gedacht (Pruefung,
   Einstiegstest) und waere bei fuenf/sechs kurzen Themen-Namen unnoetig
   hoch. Umbrechende Pillen wie ein Tag-Auswahlfeld passen dem kurzen
   Label-Format. */
#kif-app .kif-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(6px,1vh,9px);max-width:600px;margin:clamp(8px,1.3vh,13px) auto 0}
#kif-app .kif-chip{
  font:inherit;font-size:15px;padding:9px 17px;border-radius:999px;border:0;cursor:pointer;
  background:var(--kif-glass);color:var(--kif-ink-2);box-shadow:inset 0 1px 0 var(--kif-lip);
  transition:background .22s ease-out,color .22s ease-out;
}
#kif-app .kif-chip:hover{background:var(--kif-glass-2);color:var(--kif-ink)}
#kif-app .kif-chip[aria-pressed="true"]{background:var(--kif-acc);color:var(--kif-acc-i);box-shadow:none}
#kif-app.kif-a11y .kif-chip{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app.kif-a11y .kif-chip[aria-pressed="true"]{outline:2px solid var(--kif-acc)}

/* Nachbesprechung (10-nachbesprechung.md) — Lehrkraft-Nachschlagewerkzeug,
   Liste <-> Karte statt Overlay-ueber-Hub (kein Fokus-Buehnenbild noetig,
   siehe Datei-Kopfkommentar). "Basis"-Pille fuer "Fähigkeit falsch
   eingeschätzt" (traegt bewusst keinen FRAG-Buchstaben): gleiche Flaeche wie
   die Kreis-Buchstaben, nur als Wort-Pille statt festem 36px-Kreis. */
#kif-app .kif-frag-l.kif-frag-basis{width:auto;padding:0 12px;border-radius:999px;white-space:nowrap}

#kif-app .kif-debrief-hub{display:grid;gap:10px;max-width:640px;margin:clamp(18px,2.8vh,30px) auto 0}
#kif-app .kif-debrief-row{
  display:flex;align-items:center;gap:16px;width:100%;text-align:left;font:inherit;border:0;cursor:pointer;
  padding:clamp(14px,1.8vh,18px) clamp(16px,1.6vw,20px);border-radius:20px;
  background:var(--kif-solid);box-shadow:inset 0 1px 0 var(--kif-lip);
  transition:background .22s ease-out,transform .22s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-debrief-row:hover{background:var(--kif-solid-2);transform:translateY(-2px)}
#kif-app.kif-a11y .kif-debrief-row{border-radius:12px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-debrief-row-text{display:flex;flex-direction:column;gap:2px}
#kif-app .kif-debrief-row-title{font-size:16px;color:var(--kif-ink)}
#kif-app .kif-debrief-row-mission{font-size:13px;color:var(--kif-ink-3)}

#kif-app .kif-debrief-card{max-width:640px;margin:clamp(14px,2vh,22px) auto 0}
#kif-app .kif-debrief-back{margin-bottom:clamp(14px,2vh,20px)}
#kif-app .kif-debrief-back svg{transform:rotate(90deg)}
#kif-app .kif-debrief-head{display:flex;align-items:center;gap:16px}
#kif-app .kif-debrief-kernthese{
  margin:clamp(18px,2.6vh,28px) 0 0;font-size:clamp(20px,1.7vw,26px);font-weight:500;
  letter-spacing:-.016em;color:var(--kif-ink);line-height:1.35;
}
#kif-app .kif-debrief-questions{margin-top:clamp(22px,3vh,32px);display:grid;gap:10px}

#kif-app .kif-disclosure-btn{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;font-size:16px;
  border:0;cursor:pointer;padding:clamp(13px,1.6vh,16px) clamp(16px,1.6vw,20px);border-radius:18px;
  background:var(--kif-solid);color:var(--kif-ink);box-shadow:inset 0 1px 0 var(--kif-lip);
  transition:background .22s ease-out;
}
#kif-app .kif-disclosure-btn:hover{background:var(--kif-solid-2)}
#kif-app.kif-a11y .kif-disclosure-btn{border-radius:12px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-disclosure-arrow{flex:0 0 auto;width:18px;height:18px;color:var(--kif-ink-3);transform:rotate(-90deg);transition:transform .25s cubic-bezier(.16,1,.3,1)}
#kif-app .kif-disclosure-arrow svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#kif-app .kif-disclosure-panel{padding:4px clamp(16px,1.6vw,20px) 4px 46px}
#kif-app .kif-disclosure-panel ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
#kif-app .kif-disclosure-panel li{
  position:relative;padding-left:16px;font-size:15px;line-height:1.5;color:var(--kif-ink-2);
}
#kif-app .kif-disclosure-panel li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--kif-ink-3)}

/* Lehrer-Dashboard (09-lehrer-dashboard.md) — simulierte Beispielklassen
   statt echter Daten (siehe Datei-Kopfkommentar in dashboard.js). Bewusst
   KEINE Gruen/Rot-Faerbung zwischen "laeuft gut" und "braucht Uebung": die
   Spec verbietet Bewertungssprache ("gut/schlecht/kompetent"), eine Ampel-
   Farbe waere dieselbe Bewertung nur visuell statt sprachlich. Beide Kacheln
   teilen sich deshalb dieselbe neutrale Solid-Surface-Familie, der einzige
   Unterschied ist der Ueberschriften-Wortlaut. */
/* Dichte bewusst knapp von Anfang an (Lehre aus Zertifikat-/Feedback-Kritik):
   sechs gestapelte Abschnitte mit den grosszuegigen Einzelabstaenden einer
   normalen Ablage addierten sich sofort auf den Notfall-Boden von
   fitScreen() — schon im eingeklappten Standardzustand, nicht erst mit
   allen Panels offen (Kritik-Fund, gemessen: 1574px vs. 506px verfuegbar
   bei 1024x640, noch vor jeder Interaktion). */
#kif-app .kif-dash-switcher{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:clamp(6px,0.8vh,10px)}
#kif-app .kif-dash-switcher-label{font-size:14px;color:var(--kif-ink-3)}

/* max-width 640 -> 880 (Kritik-Fund, Nutzer-Feedback: Dashboard "schlecht
   organisiert") — die schmale Spalte quetschte die Zwei-Kachel-Reihe auf
   ~300px pro Kachel und zwang jeden mehrzeiligen Absatz (Vorher/Nachher,
   Rückmeldung) in unruhigen, zentrierten Zeilenumbruch. Mehr Breite nutzt
   den ohnehin vorhandenen Fensterrahmen besser aus (The Fixed-Frame Rule
   bleibt unberührt, nur der Inhalt darin wird breiter). */
#kif-app .kif-dash-section{max-width:880px;margin:clamp(6px,1vh,12px) auto 0}
#kif-app .kif-dash-headline{text-align:center;margin:0;font-size:clamp(20px,1.7vw,26px);font-weight:500;letter-spacing:-.016em;color:var(--kif-ink)}
#kif-app .kif-dash-caption{text-align:center;margin:4px 0 0;font-size:14px;color:var(--kif-ink-3)}
#kif-app .kif-dash-subhead{margin:0 0 6px;font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--kif-ink-2);text-align:center}
#kif-app .kif-dash-empty .kif-dash-headline{max-width:46ch;margin:0 auto}

#kif-app .kif-dash-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:880px;margin:clamp(10px,1.4vh,16px) auto 0}
@media(max-width:640px){ #kif-app .kif-dash-tiles{grid-template-columns:1fr} }
#kif-app .kif-dash-tile{padding:clamp(14px,1.6vh,18px) clamp(16px,1.6vw,20px);border-radius:20px;background:var(--kif-solid);box-shadow:inset 0 1px 0 var(--kif-lip)}
#kif-app.kif-a11y .kif-dash-tile{border-radius:12px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-dash-tile .kif-dash-subhead{text-align:left}
#kif-app .kif-dash-tile-line{margin:6px 0 0;font-size:15px;line-height:1.35;color:var(--kif-ink)}
#kif-app .kif-dash-tile-line p{margin:0}
#kif-app .kif-dash-was-tun{margin-top:6px;font-size:13px;padding:6px 13px}
#kif-app .kif-dash-was-tun-panel{margin-top:8px;padding:10px 12px;border-radius:14px;background:var(--kif-solid-2)}
#kif-app .kif-dash-was-tun-panel p{margin:0 0 6px;font-size:14px;line-height:1.4;color:var(--kif-ink-2)}

/* Vorher/Nachher + Rückmeldung: eigene Kachel-Familie (dieselbe Solid-
   Surface-Optik wie .kif-dash-tile, aber volle Breite statt halbe Grid-
   Spalte), linksbündig statt zentriert — vorher lose zentrierte Absätze
   ohne eigene Fläche, dadurch optisch nicht als Abschnitt erkennbar
   (Hauptursache für "schlecht organisiert"). Jetzt dieselbe Kachel-Sprache
   wie die Positiv-/Problem-Kacheln darüber, konsistent statt zwei
   verschiedene Darstellungsformen auf einem Screen. */
#kif-app .kif-dash-card{
  max-width:880px;margin:clamp(10px,1.4vh,16px) auto 0;
  padding:clamp(16px,1.8vh,22px) clamp(18px,2vw,26px);border-radius:20px;
  background:var(--kif-solid);box-shadow:inset 0 1px 0 var(--kif-lip);
}
#kif-app.kif-a11y .kif-dash-card{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-dash-card .kif-dash-subhead,
#kif-app .kif-dash-card .kif-dash-headline,
#kif-app .kif-dash-card .kif-dash-caption{text-align:left;max-width:none}
#kif-app .kif-dash-card .kif-dash-headline{font-size:18px}

#kif-app .kif-dash-more{margin:clamp(8px,1.2vh,12px) 0 0;display:block;font-size:13px;padding:7px 15px}
#kif-app .kif-dash-deltas{display:grid;gap:6px;margin-top:8px}
/* Gleiche [hidden]-Spezifitaetsfalle wie beim Dock/Nav/Errfocus (siehe dort):
   display:grid oben hat hoehere Spezifitaet als die UA-Regel fuer [hidden]
   und haette sie sonst stillschweigend ausser Kraft gesetzt (Kritik-Fund:
   die "eingeklappte" Delta-Liste war nie wirklich verborgen, sie hat von
   Anfang an ~200px Hoehe beigetragen). */
#kif-app .kif-dash-deltas[hidden]{display:none}
#kif-app .kif-dash-deltas .kif-toggle-row{padding:clamp(8px,1.1vh,11px) clamp(14px,1.4vw,18px)}

#kif-app .kif-dash-chips{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;margin-top:6px}
/* Kein Hover: diese Chips sind reine Anzeige (Themen-Nennungen aus dem
   Feedback-Screen), nicht antippbar — ein Hover-Zustand haette faelschlich
   Interaktivitaet suggeriert (Kritik-Fund). */
#kif-app .kif-dash-chips .kif-chip{cursor:default;padding:7px 15px;font-size:14px}

/* Fusszeile: harmlose Aktionen als Reihe, der Lösch-Knopf strukturell
   abgesetzt unterhalb einer Trennlinie statt in derselben Knopfsaeule wie
   die beiden anderen (Kritik-Fund, Nutzer-Feedback: alle drei Aktionen
   sahen bisher gleich gewichtig aus, unabhaengig von ihren Folgen). */
#kif-app .kif-dash-footer{max-width:880px;margin:clamp(16px,2.2vh,26px) auto 0;display:flex;flex-direction:column;align-items:center;gap:16px}
#kif-app .kif-dash-footer-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
#kif-app .kif-dash-danger{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:16px;border-top:1px solid var(--kif-lip-hair);width:100%}
#kif-app .kif-dash-danger .kif-btn-ghost{font-size:13.5px;opacity:.8}
#kif-app .kif-dash-danger .kif-btn-ghost:hover{opacity:1}
#kif-app .kif-dash-danger .kif-btn-ghost.kif-armed{opacity:1}

/* Primitive: Text-Feld mit Label + Hinweis. Zuerst fuer zugang.js gebaut,
   jetzt geteilt mit code-eingabe.js (beide: ein Label, ein Feld, ein
   Hinweis, ein Primary-Button) — generischer Name statt einer der beiden
   Screens haette den Klassennamen des jeweils anderen importiert. */
#kif-app .kif-field{max-width:320px;margin:clamp(14px,2.2vh,22px) auto 0;text-align:center}
/* Etwas grosszuegiger als vorher (Radius 14->16px, Padding 10/16->13/18px):
   glich die Feld-Groesse an aehnlich grosse Glass-Flaechen an (.kif-tile:
   16px/13px, .kif-choice: 28px/13px) — vorher wirkte das Feld im Vergleich
   sichtbar knapper geschnitten. Wirkt auf beide Screens, die sich .kif-field
   teilen (code-eingabe.js, zugang.js), verbessert also die Konsistenz an
   beiden Stellen statt nur an einer. */
#kif-app .kif-field label{display:block;font-size:14px;color:var(--kif-ink-2);margin-bottom:8px}
#kif-app .kif-field-input{
  font:inherit;font-size:16px;text-align:center;color:var(--kif-ink);background:var(--kif-glass);
  border:0;border-radius:16px;padding:13px 18px;width:100%;box-shadow:inset 0 1px 0 var(--kif-lip);
  transition:box-shadow .22s ease-out;
}
#kif-app .kif-field-input::placeholder{color:var(--kif-ink-3)}
#kif-app .kif-field-input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--kif-acc)}
#kif-app.kif-a11y .kif-field-input{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app.kif-a11y .kif-field-input:focus{outline-color:var(--kif-acc)}
#kif-app .kif-field-hint{margin:6px 0 0;font-size:13px;color:var(--kif-ink-3)}

#kif-app .kif-field-go-wrap{text-align:center;margin-top:clamp(12px,1.8vh,18px)}
/* Grosszuegigere vertikale Rhythmus-Variante, nur fuer den Code-Eingabe-
   Screen (Nutzer-Wunsch: wirkte zu vollgepackt/eng) — als Modifier statt
   Basiswert geaendert, damit zugang.js (derselbe .kif-field/.kif-field-go-
   wrap, aber schon deutlich mehr Inhalt inkl. Code-/Link-Ergebnisblock) nicht
   naeher an sein Scroll-Limit bei 1024x640 rueckt. */
#kif-app .kif-field.kif-field--roomy{margin-top:clamp(28px,4.5vh,44px)}
#kif-app .kif-field-go-wrap.kif-field-go-wrap--roomy{margin-top:clamp(26px,4vh,38px)}

/* Code-Eingabe (code-eingabe.js) — der Datenschutz-Satz auf dem allerersten
   Screen ist keine beilaeufige Formatierungs-Notiz wie ein gewoehnlicher
   .kif-field-hint (13px, dunkelster Ink-Ton), sondern das Kernversprechen
   des Produkts ("Datenschutz ist das Produkt", PRODUCT.md) im erst-
   moeglichen Moment — deshalb eine eigene, kraeftigere Rolle statt der
   geteilten Hinweis-Klasse (Kritik-Fund P1). */
#kif-app .kif-code-priv{max-width:340px;margin:16px auto 0;font-size:15px;font-weight:500;line-height:1.5;color:var(--kif-ink-2);text-align:center}
/* min-height reserviert die Zeile schon vor dem ersten Klick (The Reserved-
   Space Rule, DESIGN.md): sonst verschiebt das Erscheinen der Bestaetigung
   das Layout genau in dem Moment, in dem requestFit() neu misst. */
#kif-app .kif-code-status{margin:14px 0 0;font-size:15px;font-weight:500;color:var(--kif-ink);text-align:center;min-height:1.4em}
/* Ausweg fuer einen Besuch ohne Code (Kritik-Fund /impeccable critique, vom
   Nutzer live bestaetigt): vorher gab es hier keinen Weg zurueck zur
   Marketing-Website, nur den Browser-Zurueck-Button. Bewusst leise (kleine
   Schrift, ink-3) statt als zweiter Button — dieser Screen hat weiterhin
   genau eine Haupthandlung. */
#kif-app .kif-code-back{margin:34px auto 0;max-width:340px;font-size:13px;color:var(--kif-ink-3);text-align:center}
#kif-app .kif-code-back a{color:var(--kif-ink-2);text-decoration:underline;text-underline-offset:2px}
#kif-app .kif-code-back a:hover{color:var(--kif-ink)}

/* Zugangs-/Anlege-Screen (zugang.js) — einmaliger Einrichtungs-Schritt vor
   dem Dashboard, kein eigenes Kapitel unter 00-11. Ergebnis-Karte nutzt
   dieselbe Solid-Surface-/Glass-Sprache wie der Rest des Kurses, bewusst
   kein neues visuelles Motiv fuer einen einzelnen Screen. */
#kif-app .kif-zugang-result{
  max-width:460px;margin:clamp(16px,2.4vh,26px) auto 0;padding:clamp(16px,2.2vh,22px) clamp(18px,2vw,26px);
  border-radius:24px;background:var(--kif-solid);box-shadow:inset 0 1px 0 var(--kif-lip);
  opacity:0;transform:translateY(10px);transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-zugang-result.kif-show{opacity:1;transform:translateY(0)}
#kif-app.kif-a11y .kif-zugang-result{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-lip)}

#kif-app .kif-zugang-row{margin-top:clamp(10px,1.6vh,16px)}
#kif-app .kif-zugang-row:first-child{margin-top:0}
#kif-app .kif-zugang-row-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
#kif-app .kif-zugang-row-label{font-size:14px;font-weight:500;color:var(--kif-ink-2)}
#kif-app .kif-zugang-row-note{font-size:12px;color:var(--kif-ink-3)}
#kif-app .kif-zugang-copyline{display:flex;gap:8px;margin-top:6px;align-items:center}
#kif-app .kif-zugang-value{
  flex:1;min-width:0;font:inherit;font-size:15px;letter-spacing:.03em;color:var(--kif-ink);
  background:var(--kif-win);border:0;border-radius:12px;padding:9px 12px;
  box-shadow:inset 0 1px 0 var(--kif-lip);cursor:text;
}
#kif-app .kif-zugang-code{font-weight:500;letter-spacing:.08em;text-align:center}
#kif-app .kif-zugang-value:focus{outline:none;box-shadow:inset 0 0 0 2px var(--kif-acc)}
#kif-app.kif-a11y .kif-zugang-value{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
/* min-width auf die laengere der beiden Beschriftungen ("Kopiert!") kalibriert:
   ohne sie schrumpft/waechst der Button beim Label-Wechsel sichtbar um ein
   paar Pixel, waehrend die Status-Zeile direkt darunter genau dafuer schon
   reserviert ist (Kritik-Fund). */
#kif-app .kif-zugang-copyline .kif-btn-ghost{flex:0 0 auto;min-width:84px;padding:9px 16px;font-size:13px}

#kif-app .kif-zugang-save{margin:clamp(10px,1.5vh,14px) 0 0;font-size:13px;font-weight:500;line-height:1.5;color:var(--kif-ink-2);text-align:center}
#kif-app .kif-zugang-priv{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--kif-ink-3);text-align:center}
/* min-height reserviert die Zeile schon vor dem ersten Kopieren (The
   Reserved-Space Rule, DESIGN.md) — sonst verschiebt das erste Erscheinen
   des Status-Texts das Layout und fitScreen() misst mitten in der
   Uebergangsanimation neu. */
#kif-app .kif-zugang-status{margin:6px 0 0;font-size:13px;color:var(--kif-ink-2);text-align:center;min-height:1.4em}

#kif-app .kif-zugang-footer{display:flex;justify-content:center;margin-top:clamp(14px,2vh,20px)}

@media(prefers-reduced-motion:reduce){
  #kif-app *{
    transition-property:opacity,background,background-color,color,box-shadow,outline-color,fill,stroke!important;
    transition-duration:.15s!important;
    animation:none!important;
  }
  /* Der Tipp-Indikator lebt allein von seiner Animation — ohne sie waeren die
     drei Punkte unsichtbar bzw. voll deckend. Fester, ruhiger Zustand stattdessen. */
  #kif-app .kif-cwtyping i{opacity:.65}
  /* Gleicher Fall wie der Tipp-Indikator: ohne Animation friert der blinkende
     Strich in einem beliebigen Zwischenzustand ein, statt sichtbar zu bleiben. */
  #kif-app .kif-mockinput-cursor{opacity:1}
}

/* ============================================================================
   Mission 5 (Umbau, siehe 05-mission-5.md): Steckbrief, XP-Leiste, Chips,
   Drei Fenster, Wischkarten, Pinnwand. Alles unter .kif-m5-*, ruehrt keine
   bestehende Klasse an. Radien nur aus der DESIGN.md-Skala (999/28/24/20/16,
   Kontrastmodus 12/10), Abstaende in 8/16/24/44.
   ============================================================================ */
#kif-app .kif-m5-ic{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* XP-Leiste: dezent, eine Zeile, Platz von Anfang an reserviert. */
#kif-app .kif-m5-hud{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px auto 0;min-height:48px}
#kif-app .kif-m5-pill{
  position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
  background:var(--kif-glass);box-shadow:inset 0 1px 0 var(--kif-lip);font-size:18px;color:var(--kif-ink-2);font-variant-numeric:tabular-nums;
}
#kif-app .kif-m5-pill b{font-weight:600;color:var(--kif-ink)}
#kif-app.kif-a11y .kif-m5-pill{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-m5-xp .kif-m5-ic{color:var(--kif-acc)}
#kif-app .kif-m5-float{position:absolute;left:50%;top:-4px;transform:translate(-50%,0);opacity:0;pointer-events:none;font-weight:600;color:var(--kif-ok)}
#kif-app .kif-m5-float.kif-go{animation:kif-m5-float .9s cubic-bezier(.16,1,.3,1) forwards}
@keyframes kif-m5-float{0%{opacity:0;transform:translate(-50%,0)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-32px)}}
#kif-app .kif-m5-pill.kif-bump,#kif-app .kif-m5-sb-count.kif-bump{animation:kif-m5-bump .4s cubic-bezier(.16,1,.3,1)}
@keyframes kif-m5-bump{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}

/* Station links, Steckbrief rechts. Unter 900px untereinander, der Steckbrief
   wird dann zur ausklappbaren Leiste. */
#kif-app .kif-m5-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(264px,26vw,340px);gap:24px;align-items:start;max-width:1200px;margin:16px auto 0}
@media (max-width:900px){ #kif-app .kif-m5-layout{grid-template-columns:minmax(0,1fr)} }
#kif-app .kif-m5-stage{display:flex;flex-direction:column;gap:16px;min-width:0}
#kif-app .kif-m5-q{margin:0;max-width:none;text-align:left;font-size:clamp(20px,1.7vw,26px)}

/* Steckbrief */
#kif-app .kif-m5-sb{border-radius:24px;background:var(--kif-glass);box-shadow:inset 0 1px 0 var(--kif-lip);overflow:hidden}
#kif-app.kif-a11y .kif-m5-sb{border-radius:12px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-m5-sb-head{display:flex;align-items:center;gap:16px;width:100%;padding:16px;border:0;background:none;color:var(--kif-ink);font:inherit;text-align:left;cursor:pointer}
#kif-app .kif-m5-sb-avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--kif-ink-2);flex:0 0 auto}
#kif-app .kif-m5-face{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#kif-app .kif-m5-face-bg{fill:var(--kif-glass-3)}
#kif-app .kif-m5-face circle:not(.kif-m5-face-bg){fill:currentColor;stroke:none}
#kif-app .kif-m5-sb-title{flex:1;font-size:18px;font-weight:500;line-height:1.3}
#kif-app .kif-m5-sb-count{display:grid;place-items:center;min-width:32px;height:32px;padding:0 8px;border-radius:999px;background:var(--kif-acc);color:var(--kif-acc-i);font-weight:600;font-variant-numeric:tabular-nums}
#kif-app .kif-m5-sb-chev{transition:transform .3s cubic-bezier(.16,1,.3,1)}
#kif-app .kif-m5-sb.kif-open .kif-m5-sb-chev{transform:rotate(180deg)}
#kif-app .kif-m5-sb-list{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;list-style:none;margin:0;padding:0 16px 16px;min-height:312px}
#kif-app .kif-m5-sb-item{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;background:var(--kif-glass-2);font-size:17px;color:var(--kif-ink)}
#kif-app.kif-a11y .kif-m5-sb-item{border-radius:10px;outline:2px solid var(--kif-lip)}
#kif-app .kif-m5-sb-item.kif-new{animation:kif-m5-pop .35s cubic-bezier(.16,1,.3,1)}
@keyframes kif-m5-pop{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}
#kif-app .kif-m5-sb-item.kif-never,#kif-app .kif-m5-mini.kif-never{background:var(--kif-no-wash);box-shadow:inset 0 0 0 2px var(--kif-no)}
#kif-app.kif-a11y .kif-m5-sb-item.kif-never{outline-color:var(--kif-no)}
#kif-app .kif-m5-sb-body{position:relative}
#kif-app .kif-m5-sb-empty{position:absolute;left:16px;top:0;margin:0;color:var(--kif-ink-3);font-size:17px}
#kif-app .kif-m5-sb-empty[hidden]{display:none}
@media (min-width:901px){
  #kif-app .kif-m5-sb-head{pointer-events:none}
  #kif-app .kif-m5-sb-chev{display:none}
}
@media (max-width:900px){
  #kif-app .kif-m5-sb-body{display:none}
  #kif-app .kif-m5-sb.kif-open .kif-m5-sb-body{display:block}
  #kif-app .kif-m5-sb-list{min-height:96px}
}
/* Rueckblick: dieselbe Karte, gross und mittig. */
#kif-app .kif-m5-profile{max-width:640px;margin:24px auto 0}
#kif-app .kif-m5-sb--big .kif-m5-sb-head{pointer-events:none}
#kif-app .kif-m5-sb--big .kif-m5-sb-chev{display:none}
#kif-app .kif-m5-sb--big .kif-m5-sb-title{font-size:24px}
#kif-app .kif-m5-sb--big .kif-m5-sb-item{font-size:20px;height:52px}
#kif-app .kif-m5-sb--big .kif-m5-sb-list{min-height:216px}
#kif-app .kif-m5-profile-line{text-align:center;font-size:22px}

/* A1: Chips */
#kif-app .kif-m5-work{display:flex;flex-direction:column;gap:16px}
#kif-app .kif-m5-pool{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:700px){ #kif-app .kif-m5-pool{grid-template-columns:repeat(2,minmax(0,1fr))} }
#kif-app .kif-m5-slot{display:flex;min-height:88px;border-radius:20px;outline:2px dashed var(--kif-lip);outline-offset:-2px}
#kif-app.kif-a11y .kif-m5-slot{border-radius:10px}
#kif-app .kif-m5-chip{
  position:relative;flex:1;display:flex;align-items:center;gap:16px;text-align:left;font:inherit;font-size:20px;line-height:1.3;
  color:var(--kif-ink);border:0;cursor:pointer;border-radius:20px;padding:16px 24px;background:var(--kif-glass-2);
  box-shadow:inset 0 1px 0 var(--kif-lip);transition:transform .28s cubic-bezier(.16,1,.3,1),background .24s ease-out;
}
#kif-app .kif-m5-chip .kif-m5-ic{width:32px;height:32px}
#kif-app .kif-m5-chip:hover{transform:translateY(-2px);background:var(--kif-glass-3)}
#kif-app .kif-m5-chip:disabled{cursor:default;transform:none}
#kif-app.kif-a11y .kif-m5-chip{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-m5-chip.kif-never{background:var(--kif-no-wash);box-shadow:inset 0 0 0 2.5px var(--kif-no)}
#kif-app.kif-a11y .kif-m5-chip.kif-never{outline-color:var(--kif-no)}
#kif-app .kif-m5-never-tag{display:none;position:absolute;top:-8px;right:16px;padding:0 8px;border-radius:999px;background:var(--kif-no);color:var(--kif-on-badge);font-size:14px;font-weight:600;line-height:24px}
#kif-app .kif-m5-chip.kif-never .kif-m5-never-tag{display:block;animation:kif-m5-pop .35s cubic-bezier(.16,1,.3,1)}
#kif-app .kif-m5-chat{margin:0;max-width:none}
#kif-app .kif-m5-composer{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;padding:16px;min-height:196px}
#kif-app .kif-m5-composer .kif-m5-chip{flex:0 1 auto;min-height:56px;padding:8px 16px;font-size:18px;gap:8px}
#kif-app .kif-m5-composer .kif-m5-chip .kif-m5-ic{width:24px;height:24px}
#kif-app .kif-m5-ph{color:var(--kif-ink-3);font-size:18px;padding:8px}
#kif-app .kif-m5-ph[hidden]{display:none}
#kif-app .kif-m5-sendrow{display:flex;justify-content:center}
#kif-app .kif-m5-send{font-size:20px;padding:16px 44px}
#kif-app .kif-m5-toast{margin:0;min-height:32px;text-align:center;font-size:18px;font-weight:500;color:var(--kif-no);opacity:0;transition:opacity .3s ease-out}
#kif-app .kif-m5-toast.kif-show{opacity:1}
#kif-app .kif-m5-chip.kif-over,#kif-app .kif-m5-composer.kif-over,#kif-app .kif-m5-pool.kif-over{outline:2px dashed var(--kif-acc);outline-offset:-2px}

/* A1: Ergebnis, zwei gleiche Antworten */
#kif-app .kif-m5-replies{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:stretch}
@media (max-width:700px){ #kif-app .kif-m5-replies{grid-template-columns:minmax(0,1fr)} }
#kif-app .kif-m5-reply{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:24px;background:var(--kif-mock-bg);box-shadow:inset 0 1px 0 var(--kif-lip),var(--kif-shadow-panel);opacity:0;transform:translateY(8px);transition:opacity .4s ease-out,transform .4s cubic-bezier(.16,1,.3,1)}
#kif-app .kif-m5-reply.kif-show{opacity:1;transform:none}
#kif-app.kif-a11y .kif-m5-reply{border-radius:12px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-m5-reply-h{margin:0;font-size:18px;font-weight:500;color:var(--kif-ink-2)}
#kif-app .kif-m5-minis{display:flex;flex-wrap:wrap;gap:8px;min-height:40px}
#kif-app .kif-m5-mini{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:var(--kif-glass-2);font-size:15px}
#kif-app .kif-m5-mini .kif-m5-ic{width:20px;height:20px}
#kif-app .kif-m5-bubble{max-width:none;display:flex;flex-direction:column;gap:8px;font-size:19px;line-height:1.4}
#kif-app .kif-m5-hello{font-weight:600}
#kif-app .kif-m5-result{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:var(--kif-glass-2);font-size:18px;font-weight:600}
#kif-app .kif-m5-result[data-v="ok"]{background:var(--kif-ok-wash);box-shadow:inset 0 0 0 2px var(--kif-ok)}
#kif-app .kif-m5-result .kif-m5-ic{width:20px;height:20px;color:var(--kif-ok)}
#kif-app .kif-m5-eq{align-self:center;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-size:28px;font-weight:600;background:var(--kif-ok-wash);color:var(--kif-ok);box-shadow:inset 0 0 0 2px var(--kif-ok);opacity:0;transform:scale(.6);transition:opacity .3s ease-out,transform .4s cubic-bezier(.16,1,.3,1)}
#kif-app .kif-m5-verdict,#kif-app .kif-m5-verdict-sub,#kif-app .kif-m5-memory{opacity:0;transition:opacity .4s ease-out}
#kif-app .kif-m5-results.kif-done .kif-m5-eq{opacity:1;transform:none}
#kif-app .kif-m5-results.kif-done .kif-m5-verdict,#kif-app .kif-m5-results.kif-done .kif-m5-verdict-sub,#kif-app .kif-m5-results.kif-done .kif-m5-memory{opacity:1}
#kif-app .kif-m5-results{display:flex;flex-direction:column;gap:16px}
#kif-app .kif-m5-verdict{margin:0;text-align:center;font-size:clamp(24px,2.2vw,32px);font-weight:500;color:var(--kif-ok)}
#kif-app .kif-m5-verdict-sub{margin:-8px 0 0;min-height:28px;text-align:center;font-size:20px;color:var(--kif-ink-2)}
#kif-app .kif-m5-memory{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:16px 24px;border-radius:999px;background:var(--kif-glass-2);font-size:20px;color:var(--kif-ink)}
#kif-app.kif-a11y .kif-m5-memory{border-radius:10px;outline:2px solid var(--kif-lip)}

/* Gemeinsame Rueckmeldungs-Flaeche (A2/A3), Hoehe von Anfang an da. */
#kif-app .kif-m5-fb{position:relative;display:grid;align-content:center;gap:8px;min-height:128px;padding:16px 24px;border-radius:24px;background:var(--kif-glass);opacity:0;transition:opacity .3s ease-out,background .3s ease-out}
#kif-app .kif-m5-fb.kif-show{opacity:1}
#kif-app .kif-m5-fb[data-v="ok"]{background:var(--kif-ok-wash);box-shadow:inset 0 0 0 2px var(--kif-ok)}
#kif-app .kif-m5-fb[data-v="err"]{background:var(--kif-no-wash);box-shadow:inset 0 0 0 2px var(--kif-no)}
#kif-app.kif-a11y .kif-m5-fb{border-radius:12px}
#kif-app .kif-m5-fb-t{margin:0;font-size:24px;font-weight:500;color:var(--kif-ink)}
#kif-app .kif-m5-fb-s{margin:0;font-size:20px;line-height:1.4;color:var(--kif-ink-2)}
#kif-app .kif-m5-fb.kif-has-faces{padding-right:200px}
@media (max-width:700px){ #kif-app .kif-m5-fb.kif-has-faces{padding-right:24px;padding-bottom:96px} }
#kif-app .kif-m5-faces{position:absolute;right:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transition:opacity .3s ease-out}
#kif-app .kif-m5-faces.kif-show{opacity:1}
@media (max-width:700px){ #kif-app .kif-m5-faces{top:auto;bottom:16px;transform:none;flex-direction:row} }
#kif-app .kif-m5-faces-row{display:flex;gap:0}
#kif-app .kif-m5-faces .kif-m5-face{width:48px;height:48px;color:var(--kif-ink)}
#kif-app .kif-m5-bubble-q{padding:8px 16px;border-radius:16px;background:var(--kif-glass-3);font-size:16px;font-weight:500;color:var(--kif-ink);text-align:center}

/* A2: Drei Fenster */
#kif-app .kif-m5-timer{display:flex;align-items:center;min-height:24px}
#kif-app .kif-m5-timer-track{display:block;width:100%;height:8px;border-radius:999px;background:var(--kif-film-3);overflow:hidden}
#kif-app .kif-m5-timer-fill{display:block;height:100%;width:100%;transform-origin:left center;background:var(--kif-acc)}
#kif-app .kif-m5-timer-t{font-size:16px;color:var(--kif-ink-3)}
#kif-app .kif-m5-wins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:700px){ #kif-app .kif-m5-wins{grid-template-columns:minmax(0,1fr)} }
#kif-app .kif-m5-win{display:flex;flex-direction:column;text-align:left;font:inherit;color:var(--kif-ink);border:0;cursor:pointer;padding:0;border-radius:24px;overflow:hidden;background:var(--kif-mock-bg);box-shadow:inset 0 1px 0 var(--kif-lip),var(--kif-shadow-panel);transition:transform .28s cubic-bezier(.16,1,.3,1)}
#kif-app .kif-m5-win:hover:not(:disabled){transform:translateY(-4px)}
#kif-app.kif-a11y .kif-m5-win{border-radius:12px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-m5-win-head{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--kif-mock-head);font-size:16px;color:var(--kif-ink-2)}
#kif-app .kif-m5-win-head .kif-m5-ic{width:20px;height:20px}
#kif-app .kif-m5-win-body{display:block;flex:1;min-height:112px;padding:16px;font-size:22px;line-height:1.35}
#kif-app .kif-m5-win-input{display:block;margin:0 16px 16px;padding:8px 16px;border-radius:16px;background:var(--kif-glass);font-size:17px;color:var(--kif-ink-3)}
#kif-app .kif-m5-win[data-v="ok"]{box-shadow:inset 0 0 0 3px var(--kif-ok),var(--kif-shadow-panel)}
#kif-app .kif-m5-win[data-v="err"]{box-shadow:inset 0 0 0 3px var(--kif-no),var(--kif-shadow-panel)}
#kif-app.kif-a11y .kif-m5-win[data-v="ok"]{outline:3px solid var(--kif-ok)}
#kif-app.kif-a11y .kif-m5-win[data-v="err"]{outline:3px solid var(--kif-no)}
#kif-app .kif-m5-win:disabled{cursor:default}
#kif-app .kif-m5-win:disabled:not([data-v]){opacity:.45}

/* A3: Wischkarten */
#kif-app .kif-m5-deck{position:relative;width:min(100%,520px);height:clamp(208px,30vh,280px);margin:0 auto 24px}
#kif-app .kif-m5-ghost{position:absolute;inset:0;border-radius:28px;background:var(--kif-glass);transform:translateY(12px) scale(.96);opacity:.7}
#kif-app .kif-m5-ghost--2{transform:translateY(24px) scale(.92);opacity:.4}
#kif-app .kif-m5-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;border-radius:28px;background:var(--kif-glass-3);box-shadow:inset 0 1px 0 var(--kif-lip),var(--kif-shadow-panel);text-align:center;cursor:grab;touch-action:none;user-select:none;transition:transform .3s cubic-bezier(.16,1,.3,1)}
#kif-app .kif-m5-card.kif-drag{transition:none;cursor:grabbing}
#kif-app .kif-m5-card.kif-out{transition:transform .35s cubic-bezier(.4,0,1,1),opacity .35s ease-in;opacity:0;pointer-events:none}
#kif-app.kif-a11y .kif-m5-card{border-radius:12px;box-shadow:none;outline:2px solid var(--kif-lip);background:var(--kif-glass)}
#kif-app .kif-m5-card-ic{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--kif-glass-2);color:var(--kif-ink)}
#kif-app .kif-m5-card-ic .kif-m5-ic{width:48px;height:48px}
#kif-app .kif-m5-card-t{font-size:clamp(22px,2vw,28px);font-weight:500;line-height:1.3;color:var(--kif-ink)}
#kif-app .kif-m5-answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:700px){ #kif-app .kif-m5-answers{grid-template-columns:minmax(0,1fr)} }
#kif-app .kif-m5-ans{display:flex;align-items:center;justify-content:center;gap:8px;min-height:64px;padding:16px;border:0;border-radius:20px;background:var(--kif-glass-2);box-shadow:inset 0 1px 0 var(--kif-lip);font:inherit;font-size:19px;color:var(--kif-ink);cursor:pointer;transition:transform .28s cubic-bezier(.16,1,.3,1),background .24s ease-out}
#kif-app .kif-m5-ans:hover:not(:disabled){transform:translateY(-2px);background:var(--kif-glass-3)}
#kif-app.kif-a11y .kif-m5-ans{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-m5-ans.kif-hot{box-shadow:inset 0 0 0 3px var(--kif-acc)}
#kif-app .kif-m5-ans[data-v="ok"]{background:var(--kif-ok-wash);box-shadow:inset 0 0 0 3px var(--kif-ok)}
#kif-app .kif-m5-ans[data-v="err"]{background:var(--kif-no-wash);box-shadow:inset 0 0 0 3px var(--kif-no)}
#kif-app .kif-m5-ans:disabled{cursor:default}
#kif-app .kif-m5-ans:disabled:not([data-v]){opacity:.45}

@media (prefers-reduced-motion:reduce){
  #kif-app [class*="kif-m5-"]{animation:none!important;transition:none!important}
}

/* Mission 5 auf dem Handy: kompaktere Chips/Fenster, damit die Stationen ohne
   langes Scrollen auskommen (Desktop-Werte bleiben unberuehrt). */
@media (max-width:700px){
  #kif-app .kif-m5-pool{gap:8px}
  #kif-app .kif-m5-slot{min-height:64px}
  #kif-app .kif-m5-chip{min-width:0;gap:8px;padding:8px 16px;font-size:15px;line-height:1.25;overflow-wrap:anywhere}
  #kif-app .kif-m5-chip .kif-m5-ic{width:24px;height:24px}
  #kif-app .kif-m5-composer{min-height:120px;padding:8px}
  #kif-app .kif-m5-composer .kif-m5-chip{font-size:15px}
  #kif-app .kif-m5-win-body{min-height:56px;font-size:18px}
  #kif-app .kif-m5-win-input{display:none}
  #kif-app .kif-m5-fb{min-height:112px;padding:16px}
  #kif-app .kif-m5-fb-t{font-size:20px}
  #kif-app .kif-m5-fb-s{font-size:17px}
  #kif-app .kif-m5-deck{height:200px}
  #kif-app .kif-m5-card-ic{width:64px;height:64px}
  #kif-app .kif-m5-card-ic .kif-m5-ic{width:36px;height:36px}
  #kif-app .kif-m5-ans{min-height:48px;padding:8px 16px;font-size:17px}
  #kif-app .kif-m5-answers{gap:8px}
  #kif-app .kif-m5-hud{margin-top:8px;min-height:40px}
  #kif-app .kif-m5-pill{padding:4px 16px;font-size:16px}
}

/* Mission 5, Gruppe B: Pinnwand (B1), Schalter mit Live-Anzeige (B2), B3. */
#kif-app .kif-m5-board{display:grid;grid-template-columns:minmax(0,1fr) clamp(264px,28vw,360px);gap:24px;align-items:start;max-width:1120px;margin:24px auto 0}
@media (max-width:900px){
  #kif-app .kif-m5-board{grid-template-columns:minmax(0,1fr)}
  #kif-app .kif-m5-panel{order:-1}
}
#kif-app .kif-m5-main{min-width:0;display:flex;flex-direction:column;gap:16px}
#kif-app .kif-m5-notes{display:grid;gap:16px}
#kif-app .kif-m5-note{
  position:relative;display:block;text-align:left;font:inherit;font-size:clamp(20px,1.7vw,24px);line-height:1.35;color:var(--kif-ink);
  border:0;cursor:pointer;border-radius:20px;padding:16px 24px 16px 44px;background:var(--kif-solid);
  box-shadow:inset 0 1px 0 var(--kif-lip);transition:transform .28s cubic-bezier(.16,1,.3,1),background .24s ease-out,box-shadow .24s ease-out;
}
#kif-app .kif-m5-note:hover:not([data-v]){transform:translateY(-2px);background:var(--kif-solid-2)}
#kif-app.kif-a11y .kif-m5-note{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-m5-pin{position:absolute;left:16px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--kif-ink-3)}
#kif-app .kif-m5-note[data-v="on"]{background:var(--kif-glass-3);box-shadow:inset 0 0 0 2.5px var(--kif-acc)}
#kif-app.kif-a11y .kif-m5-note[data-v="on"]{outline:3px solid var(--kif-acc)}
#kif-app .kif-m5-note[data-v="on"] .kif-m5-pin{background:var(--kif-acc)}
#kif-app .kif-m5-note[data-v]{cursor:default}
#kif-app .kif-m5-panel{display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:24px;background:var(--kif-glass);box-shadow:inset 0 1px 0 var(--kif-lip)}
#kif-app.kif-a11y .kif-m5-panel{border-radius:12px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-m5-panel-l{margin:0;font-size:18px;font-weight:500;color:var(--kif-ink-2)}
#kif-app .kif-m5-panel-l b{margin-left:8px;color:var(--kif-ink)}
#kif-app .kif-m5-count{margin:0;font-size:clamp(30px,3.6vw,60px);font-weight:500;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--kif-ink)}
#kif-app .kif-m5-bar{display:block;width:100%;height:12px;border-radius:999px;background:var(--kif-film-3);overflow:hidden}
/* Balken laufen ueber transform:scaleX (kein Layout-Animieren), die Breite bleibt 100%. */
#kif-app .kif-m5-bar-fill{display:block;height:100%;width:100%;transform-origin:left center;background:var(--kif-acc);transition:transform .6s cubic-bezier(.16,1,.3,1),background .3s ease-out}
#kif-app .kif-m5-count.kif-bump{animation:kif-m5-bump .4s cubic-bezier(.16,1,.3,1)}
#kif-app .kif-m5-example{margin:0;align-self:flex-start;padding:4px 16px;border-radius:999px;background:var(--kif-glass-2);font-size:15px;color:var(--kif-ink-2)}
#kif-app .kif-m5-hints{display:grid;gap:8px;list-style:none;margin:0;padding:0}
#kif-app .kif-m5-hintslot{min-height:44px;border-radius:999px;outline:2px dashed var(--kif-lip);outline-offset:-2px}
#kif-app .kif-m5-hint{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;background:var(--kif-glass-2);font-size:17px;color:var(--kif-ink);opacity:0;transform:scale(.9);transition:opacity .3s ease-out,transform .35s cubic-bezier(.16,1,.3,1)}
#kif-app .kif-m5-hint.kif-show{opacity:1;transform:none}
#kif-app.kif-a11y .kif-m5-hint{border-radius:10px;outline:2px solid var(--kif-lip)}
#kif-app .kif-m5-lead{margin:0;font-size:clamp(24px,2.2vw,32px);font-weight:500;line-height:1.25;color:var(--kif-ink)}
#kif-app .kif-m5-lead--sm{font-size:20px;opacity:0;transition:opacity .4s ease-out}
#kif-app .kif-m5-lead--sm.kif-show{opacity:1}
#kif-app .kif-m5-choices2 .kif-choices{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;margin:0}
@media (max-width:700px){ #kif-app .kif-m5-choices2 .kif-choices{grid-template-columns:minmax(0,1fr)} }
#kif-app .kif-m5-choices1 .kif-choices,#kif-app .kif-m5-main .kif-choices{max-width:none;margin-top:0}
#kif-app .kif-m5-main .kif-choice{font-size:20px}
#kif-app .kif-m5-main .kif-res-copy{margin-top:0!important}
/* B2: Schalter groesser, Anzeigen farbig nach Stufe. */
#kif-app .kif-m5-toggles{max-width:none;margin:0}
#kif-app .kif-m5-toggles .kif-toggle-label{font-size:20px}
#kif-app .kif-m5-toggles .kif-toggle-cap{font-size:17px}
#kif-app .kif-m5-meter{display:flex;flex-direction:column;gap:8px}
#kif-app .kif-m5-meter[data-level="hoch"] .kif-m5-bar-fill{background:var(--kif-no)}
#kif-app .kif-m5-meter[data-level="niedrig"] .kif-m5-bar-fill{background:var(--kif-ok)}
#kif-app .kif-m5-meter[data-testid="meter-komf"] .kif-m5-bar-fill{background:var(--kif-acc)}
@media (max-width:700px){
  #kif-app .kif-m5-note{padding:8px 16px 8px 44px;font-size:17px}
  #kif-app .kif-m5-notes{gap:8px}
  #kif-app .kif-m5-panel{padding:16px;gap:8px}
  #kif-app .kif-m5-count{font-size:30px}
  #kif-app .kif-m5-hints{grid-template-columns:repeat(2,minmax(0,1fr))}
  #kif-app .kif-m5-hint{font-size:14px;padding:0 8px;height:40px}
  #kif-app .kif-m5-hintslot{min-height:40px}
}

/* =====================================================================
   Feste Buehne (Mission 1 B1 bis B3; The Fixed-Stage Rule, DESIGN.md)
   Links die Aufgabe, rechts eine feste Kachel fuer die Aufloesung.
   Alles, was spaeter erscheint, liegt von Anfang an im Layout (.kif-reserved),
   nichts wird nachtraeglich angehaengt: die Hoehe aendert sich nie.
   ===================================================================== */
#kif-app .kif-stage{
  display:grid;grid-template-columns:minmax(0,800px) minmax(260px,360px);justify-content:center;
  gap:clamp(20px,2.8vw,44px);align-items:stretch;max-width:1240px;margin:clamp(14px,2.2vh,26px) auto 0;
}
#kif-app .kif-stage--rank{grid-template-columns:minmax(0,780px) minmax(260px,360px)}
#kif-app .kif-stage-main{min-width:0;display:flex;flex-direction:column}
#kif-app .kif-stage-side{min-width:0;display:flex;position:relative}
#kif-app .kif-stage--rank .kif-stage-side{display:grid}
#kif-app .kif-stage--rank .kif-stage-side > *{grid-area:1/1}
@media (max-width:900px){
  #kif-app .kif-stage,#kif-app .kif-stage--rank{grid-template-columns:minmax(0,1fr)}
}

/* Platz reservieren, Inhalt spaeter einblenden. visibility:hidden nimmt den
   Inhalt auch aus Tab-Reihenfolge und Vorlesen, solange er nicht dran ist. */
#kif-app .kif-reserved{
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .4s ease-out,transform .5s cubic-bezier(.16,1,.3,1),visibility 0s linear .5s;
}
#kif-app .kif-reserved.kif-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}

/* B1: grosses Klassenchat-Fenster, feste Groesse von der ersten Nachricht an. */
#kif-app .kif-chatwin--stage{max-width:none;margin:0}
#kif-app .kif-chatwin--stage .kif-chatwin-head{padding:14px 22px;font-size:14px}
#kif-app .kif-chatwin--stage .kif-chatwin-body{gap:12px;padding:20px 22px}
#kif-app .kif-chatwin--stage .kif-cwbubble{max-width:88%;font-size:20px;line-height:1.45;padding:14px 20px}
#kif-app .kif-chatwin--stage .kif-cwbubble-name{font-size:14px}
#kif-app .kif-stage-q{margin:clamp(16px,2.4vh,26px) 0 0;max-width:none;text-align:center}
#kif-app .kif-stage .kif-choices{max-width:none;margin:clamp(10px,1.6vh,16px) 0 0}
/* Haken/Kreuz-Platz ist von Anfang an da, der Text rutscht beim Antippen nicht. */
#kif-app .kif-stage .kif-choice{padding-left:52px;font-size:20px}

/* Aufloesungs-Kachel: eine normale Kachel wie die uebrigen (24px Radius,
   Solid-Flaeche), rechts im freien Platz. Rahmen und Wash gruen oder rot wie bei
   den Antworten. Der Inhalt steht unsichtbar von Anfang an im Layout, die Kachel
   hat deshalb ab der ersten Sekunde ihre endgueltige Hoehe. */
#kif-app .kif-rpanel{
  position:relative;align-self:start;border-radius:24px;padding:24px 26px 26px;
  background:var(--kif-solid);box-shadow:inset 0 1px 0 var(--kif-lip);
  transition:background .4s ease-out,box-shadow .4s ease-out;
}
#kif-app .kif-rpanel[data-v="ok"]{background:var(--kif-ok-wash);box-shadow:inset 0 0 0 2.5px var(--kif-ok),inset 0 1px 0 var(--kif-lip)}
#kif-app .kif-rpanel[data-v="err"]{background:var(--kif-no-wash);box-shadow:inset 0 0 0 2.5px var(--kif-no),inset 0 1px 0 var(--kif-lip)}
#kif-app .kif-rpanel-idle{
  position:absolute;inset:0;margin:0;padding:0 32px;display:grid;place-items:center;text-align:center;
  font-size:18px;line-height:1.5;color:var(--kif-ink-3);transition:opacity .3s ease-out;
}
#kif-app .kif-rpanel-idle.kif-gone{opacity:0}
#kif-app .kif-rpanel-res{position:relative}
#kif-app .kif-rpanel-h{
  display:flex;align-items:flex-start;gap:12px;margin:0 0 18px;min-height:30px;
  font-size:23px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--kif-ink);
}
#kif-app .kif-rpanel-h .kif-mk-badge{position:static;flex:0 0 auto;width:30px;height:30px}
#kif-app .kif-rpanel[data-v="ok"] .kif-mk-badge{background:var(--kif-ok)}
#kif-app .kif-rpanel[data-v="err"] .kif-mk-badge{background:var(--kif-no)}
#kif-app .kif-rpanel-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
#kif-app .kif-rpanel-li{
  position:relative;padding-left:28px;font-size:20px;line-height:1.4;color:var(--kif-ink);
  opacity:0;transform:translateX(12px);
  transition:opacity .4s ease-out calc(var(--i) * .45s),transform .5s cubic-bezier(.16,1,.3,1) calc(var(--i) * .45s);
}
#kif-app .kif-rpanel-li.kif-on{opacity:1;transform:none}
#kif-app .kif-rpanel-li::before{
  content:"";position:absolute;left:4px;top:.5em;width:12px;height:12px;border-radius:50%;background:var(--kif-ink-3);
}
#kif-app .kif-rpanel[data-v="ok"] .kif-rpanel-li::before{background:var(--kif-ok)}
#kif-app .kif-rpanel[data-v="err"] .kif-rpanel-li::before{background:var(--kif-no)}
#kif-app.kif-a11y .kif-rpanel{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app.kif-a11y .kif-rpanel[data-v="ok"]{outline:3px solid var(--kif-ok);background:var(--kif-glass)}
#kif-app.kif-a11y .kif-rpanel[data-v="err"]{outline:3px solid var(--kif-no);background:var(--kif-glass)}

/* B2: Zeitstrahl. Jede Zeile ist gleich hoch, ob der Platz leer oder belegt ist. */
#kif-app .kif-tl{display:grid;gap:10px;min-width:0}
#kif-app .kif-tl-row{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,13vw,196px);column-gap:14px;align-items:center;
}
#kif-app .kif-tl-slot{
  display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 18px;
  border-radius:24px;background:var(--kif-glass);box-shadow:inset 0 1px 0 var(--kif-lip);
  transition:background .22s ease-out,box-shadow .22s ease-out;
}
#kif-app .kif-tl-slot.kif-over{background:var(--kif-glass-2);box-shadow:inset 0 0 0 2.5px var(--kif-acc)}
#kif-app .kif-tl-slot .kif-rank-n{width:30px;height:30px;font-size:14px}
#kif-app .kif-tl-slot.kif-filled .kif-rank-n{background:var(--kif-acc);color:var(--kif-acc-i)}
#kif-app .kif-tl-slot .kif-rank-label{display:grid;font-size:18px;line-height:1.35}
#kif-app .kif-tl-slot .kif-rank-label > *{grid-area:1/1}
#kif-app .kif-sizer{visibility:hidden}
#kif-app .kif-tl-slot.kif-empty .kif-rank-label{color:var(--kif-ink-3)}
#kif-app .kif-tl-slot .kif-rank-take{font-size:15px;padding:8px 14px}
#kif-app.kif-a11y .kif-tl-slot{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
/* Linie mit Punkt je Platz, rechts neben den Kacheln. */
#kif-app .kif-tl-node{position:relative;align-self:stretch;display:flex;align-items:center;padding-left:38px;min-height:36px}
#kif-app .kif-tl-node::before{
  content:"";position:absolute;left:10px;top:-5px;bottom:-5px;width:3px;margin-left:-1.5px;
  border-radius:2px;background:var(--kif-film-4);
}
#kif-app .kif-tl-row--end:first-child .kif-tl-node::before{top:50%}
#kif-app .kif-tl-row--end:last-child .kif-tl-node::before{bottom:50%}
#kif-app .kif-tl-dot{
  position:absolute;left:10px;top:50%;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--kif-ink-3);
}
#kif-app .kif-tl-node--ok .kif-tl-dot{width:24px;height:24px;background:var(--kif-ok)}
#kif-app .kif-tl-node--no .kif-tl-dot{width:24px;height:24px;background:var(--kif-no)}
#kif-app .kif-tl-endt{visibility:hidden;font-size:14px;line-height:1}
#kif-app .kif-tl-t{font-size:16px;line-height:1.3;color:var(--kif-ink-2)}
#kif-app .kif-tl-node--ok .kif-tl-t,#kif-app .kif-tl-node--no .kif-tl-t{font-weight:600;color:var(--kif-ink)}
/* Ablage rechts: vier feste Plaetze, ein abgelegtes Kaertchen hinterlaesst einen leeren Rahmen. */
#kif-app .kif-pool{display:grid;grid-auto-rows:1fr;gap:10px;transition:opacity .4s ease-out}
#kif-app .kif-pool.kif-away{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease-out,visibility 0s linear .4s}
#kif-app .kif-pool-cell{display:flex;border-radius:24px;border:2px dashed var(--kif-film-3)}
#kif-app .kif-pool-item{
  flex:1;border:0;font:inherit;font-size:18px;line-height:1.35;text-align:left;cursor:grab;padding:12px 18px;
  border-radius:20px;background:var(--kif-solid);box-shadow:inset 0 1px 0 var(--kif-lip);color:var(--kif-ink);
  transition:background .22s ease-out,transform .26s cubic-bezier(.16,1,.3,1),opacity .25s ease-out;
}
#kif-app .kif-pool-item:hover{background:var(--kif-solid-2);transform:translateY(-2px)}
#kif-app .kif-pool-item:active{cursor:grabbing}
#kif-app .kif-pool-cell.kif-taken .kif-pool-item{opacity:0;visibility:hidden;pointer-events:none}
#kif-app.kif-a11y .kif-pool-item{border-radius:10px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app .kif-stage-solve{text-align:center;margin-top:clamp(20px,3.4vh,40px)}

/* B3: Stichtag als Bild, Antworten als Icon-Kacheln. */
#kif-app .kif-cut{
  display:grid;grid-template-columns:3fr auto 2fr;height:clamp(64px,8.4vh,88px);border-radius:20px;overflow:hidden;
  background:var(--kif-glass);box-shadow:inset 0 1px 0 var(--kif-lip);
}
#kif-app .kif-cut-seg{display:flex;align-items:center;justify-content:center;gap:12px;font-size:18px;color:var(--kif-ink)}
#kif-app .kif-cut-seg--known{background:var(--kif-glass-2)}
#kif-app .kif-cut-seg--unknown{background:var(--kif-film);border:2px dashed var(--kif-film-3);color:var(--kif-ink-2)}
#kif-app .kif-cut-seg b{font-size:23px;font-weight:600;color:var(--kif-ink)}
#kif-app .kif-cut-mark{
  display:grid;place-items:center;padding:0 18px;font-size:15px;font-weight:600;color:var(--kif-ink);
  background:var(--kif-film-4);
}
#kif-app .kif-stage-lead{margin:clamp(10px,1.6vh,16px) 0 0;text-align:center;font-size:18px;line-height:1.5;color:var(--kif-ink-2)}
#kif-app .kif-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(10px,1.6vh,16px)}
#kif-app .kif-tile-b{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:10px;align-items:center;
  text-align:left;font:inherit;border:0;cursor:pointer;color:var(--kif-ink);padding:16px 20px;border-radius:24px;
  background:var(--kif-glass);box-shadow:inset 0 1px 0 var(--kif-lip);
  transition:background .24s ease-out,transform .28s cubic-bezier(.16,1,.3,1);
}
#kif-app .kif-tile-b:hover{background:var(--kif-glass-2);transform:translateY(-2px)}
#kif-app .kif-tile-b:disabled{opacity:.5;cursor:default}
#kif-app .kif-tile-b:disabled:hover{background:var(--kif-glass);transform:none}
#kif-app .kif-tile-b[data-v]:disabled{opacity:1}
#kif-app .kif-tile-b-ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--kif-film-2)}
#kif-app .kif-tile-b-ic svg{width:28px;height:28px;fill:none;stroke:var(--kif-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#kif-app .kif-tile-b-t{font-size:18px;line-height:1.35;padding-right:30px}
#kif-app .kif-tile-b-chip{
  grid-column:1/-1;justify-self:start;font-size:14px;line-height:1;padding:7px 14px;border-radius:999px;
  background:var(--kif-film-2);color:var(--kif-ink-2);
}
#kif-app .kif-tile-b .kif-mk-badge{top:14px;right:14px;width:28px;height:28px}
#kif-app .kif-tile-b[data-v="ok"]{background:var(--kif-ok-wash);box-shadow:inset 0 0 0 2.5px var(--kif-ok),inset 0 1px 0 var(--kif-lip)}
#kif-app .kif-tile-b[data-v="err"]{background:var(--kif-no-wash);box-shadow:inset 0 0 0 2.5px var(--kif-no),inset 0 1px 0 var(--kif-lip)}
#kif-app .kif-tile-b[data-v="ok"] .kif-mk-badge{background:var(--kif-ok)}
#kif-app .kif-tile-b[data-v="err"] .kif-mk-badge{background:var(--kif-no)}
#kif-app.kif-a11y .kif-tile-b{border-radius:14px;box-shadow:none;outline:2px solid var(--kif-lip)}
#kif-app.kif-a11y .kif-tile-b[data-v="ok"]{outline:3px solid var(--kif-ok);background:var(--kif-glass)}
#kif-app.kif-a11y .kif-tile-b[data-v="err"]{outline:3px solid var(--kif-no);background:var(--kif-glass)}
@media (max-width:900px){
  #kif-app .kif-tiles{grid-template-columns:minmax(0,1fr)}
  #kif-app .kif-tl-row{grid-template-columns:minmax(0,1fr) clamp(104px,16vw,150px);column-gap:8px}
  #kif-app .kif-tl-node{padding-left:28px}
  #kif-app .kif-tl-t{font-size:14px}
  #kif-app .kif-tl-slot{padding:10px 12px;gap:10px}
  #kif-app .kif-tl-slot .kif-rank-label{font-size:16px}
}
@media (max-width:600px){
  #kif-app .kif-tl-row{grid-template-columns:minmax(0,1fr) 40px}
  #kif-app .kif-tl-node{padding-left:0}
  #kif-app .kif-tl-row--end .kif-tl-t,#kif-app .kif-tl-tag{display:none}
  #kif-app .kif-tl-endt{visibility:visible;text-align:right;font-size:14px;line-height:1.3;font-weight:600;color:var(--kif-ink)}
}
@media (prefers-reduced-motion:reduce){
  #kif-app .kif-reserved,#kif-app .kif-rpanel-li,#kif-app .kif-pool{transition:none}
}

/* Mission 1, Gruppe A (A1): The Fixed-Stage Rule. Die Ergebnis-Kachel nimmt den
   Platz des Karussells ein (nach dem Ablegen ist es leer), die abgelegten
   Kacheln sind einzeilige Chips, die Ablagen haben von Anfang an Platz fuer
   alle sechs. Nichts waechst beim Ablegen oder Aufloesen. */
#kif-app .kif-m1a-stage{position:relative;margin:clamp(14px,3vh,44px) 0 clamp(14px,3.2vh,48px)}
#kif-app .kif-m1a-stage .kif-flow{margin:0;min-height:200px}
#kif-app.kif-a11y .kif-m1a-stage .kif-flow{min-height:440px}
#kif-app .kif-flow-ghost{display:none}
#kif-app .kif-m1a-result{
  position:absolute;inset:0;align-self:auto;display:flex;align-items:center;justify-content:center;
  gap:clamp(20px,3vw,48px);padding:16px clamp(22px,3vw,44px);
}
#kif-app .kif-m1a-result .kif-ringwrap{width:140px;height:140px}
#kif-app .kif-m1a-result-body{min-width:0}
#kif-app .kif-m1a-result .kif-rpanel-h{margin-bottom:12px}
#kif-app .kif-m1a-result .kif-rpanel-list{gap:8px}
#kif-app .kif-shelves--m1 .kif-sl{min-height:38px}
#kif-app .kif-shelves--m1 .kif-shelf.kif-shelf--empty{min-height:0}
#kif-app .kif-shelves--m1 .kif-shelf.kif-shelf--empty .kif-sbody{display:grid;visibility:hidden}
#kif-app .kif-shelves--m1 .kif-sbody{
  grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:44px;min-height:calc(44px * 3 + 8px * 2);
}
#kif-app .kif-shelves--m1 .kif-sbody:empty::after{content:none}
#kif-app .kif-chip{display:flex;align-items:center;height:44px;padding:0 46px 0 16px}
#kif-app .kif-chip .kif-chip-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#kif-app .kif-chip .kif-mk-badge{top:8px;right:8px;width:28px;height:28px}
#kif-app .kif-chip[data-v] > span:first-of-type{padding-right:0;display:grid}
@media (max-width:700px){
  #kif-app .kif-shelves--m1 .kif-sbody{grid-template-columns:minmax(0,1fr)}
  #kif-app .kif-m1a-result{flex-direction:column;gap:10px}
  #kif-app .kif-m1a-result .kif-ringwrap{width:96px;height:96px}
}

/* A3: drei Kacheln untereinander statt zwei mal zwei. */
#kif-app .kif-tiles--stack{grid-template-columns:minmax(0,1fr)}
#kif-app .kif-m1a-field{position:relative}
#kif-app .kif-m1a-result.kif-dim{filter:blur(7px) brightness(.72);pointer-events:none;transition:filter .4s ease-out}
#kif-app.kif-a11y .kif-m1a-result.kif-dim{visibility:hidden}
/* Das Dock ist mit Pfeilen 59px, nur mit dem Knopf 63px hoch: gleich hoch halten. */
#kif-app #m1-dock{min-height:63px;box-sizing:border-box}
/* Kontrast-Modus: die gestrichelten Trefflaechen-Ringe der Objekte gehoeren zum
   ruhenden Schreibtisch, nicht zur geoeffneten Station auf dem Display. */
#kif-app.kif-a11y .kif-desk-scene.kif-zoomed .kif-desk-hotspot{outline:none}