/* =====================================================================
 * BWquiz · Design-System
 * Raster 4/8 px · Radien 8–28 px · mehrschichtige Schatten
 * Farben als Tokens, hell und dunkel abgestimmt
 * ===================================================================== */

:root {
  color-scheme: light;

  /* Schrift */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Abstände (4/8-Raster) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* Radien */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Bewegung */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Layout */
  --tabbar-h: 60px;
  --nav-h: 44px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* Farben · hell */
  --bg: #F5F3EC;
  --bg-outer: #E7E4D9;
  --surface: #FFFFFF;
  --fill: #EEEBE2;
  --fill-2: #E4E0D4;
  --text: #191E15;
  --text-2: #545B4C;
  --text-3: #868C7D;
  --line: rgba(32, 40, 24, .08);
  --line-strong: rgba(32, 40, 24, .15);
  --bar-bg: rgba(245, 243, 236, .82);

  --primary: #4A5B37;
  --primary-hi: #5B6E45;
  --primary-strong: #36442A;
  --primary-tint: rgba(74, 91, 55, .10);
  --primary-shadow: rgba(54, 68, 42, .55);
  --on-primary: #FFFFFF;

  --accent: #B48A35;
  --accent-strong: #8C6820;
  --accent-soft: #F4EBD5;

  --success: #2E8F55;
  --success-soft: #E1F2E7;
  --success-ink: #1F6B3E;
  --on-success: #FFFFFF;
  --danger: #C8433C;
  --danger-soft: #FBE8E5;
  --danger-ink: #A3302A;
  --warn: #B87A1E;
  --flame: #E27A2C;

  --c-lw: #5D80A8;
  --c-marine: #2F4E75;
  --c-san: #B5524B;

  --g-mann: #B3BCA2;
  --g-uop: #8E9F73;
  --g-ump: #687D50;
  --g-lt: #4E6039;
  --g-hptl: #A28A55;
  --g-stoffz: #B8913A;
  --g-gen: #D6B05A;

  --ring-track: rgba(74, 91, 55, .12);
  --card-glow: #F8F7F1;
  --stage-a: #EEECE6;
  --stage-b: #DDDBD2;
  --stage-line: rgba(32, 40, 24, .07);
  --g-san: #B5524B;
  --seg-thumb: #FFFFFF;
  --switch-off: #E2DFD5;
  --sheet-bg: #FFFFFF;
  --toast-bg: #1D2419;
  --toast-fg: #F3F1EA;
  --toast-act: #E9CF8A;

  --hero-a: #5A6B42;
  --hero-b: #303D27;
  --hero-ink: #F4F1E6;
  --topic-ranks-a: #EEF1E5;
  --topic-ranks-b: #E0E5D2;
  --topic-nato-a: #F7F0DE;
  --topic-nato-b: #EEE3C6;

  --hm0: #ECE9DF;
  --hm1: #D0D9BF;
  --hm2: #A5B58A;
  --hm3: #708553;
  --hm4: #475A31;

  --il-board-a: #4F603B;
  --il-board-b: #2F3B26;
  --il-board-c: #6E7E57;
  --il-glow: rgba(180, 138, 53, .16);
  --il-tile-a: #FFFFFF;
  --il-tile-b: #F1ECDE;
  --il-letter: #3B4A2F;
  --il-wave: #B48A35;

  --shim-a: #26301F;
  --shim-b: #34422B;

  /* Schatten */
  --hairline: inset 0 0 0 1px var(--line);
  --sh-1: 0 1px 2px rgba(35, 40, 25, .06), 0 1px 1px rgba(35, 40, 25, .03);
  --sh-2: 0 1px 2px rgba(35, 40, 25, .05), 0 4px 10px rgba(35, 40, 25, .045), 0 14px 32px rgba(35, 40, 25, .05);
  --sh-3: 0 2px 6px rgba(35, 40, 25, .08), 0 12px 28px rgba(35, 40, 25, .12), 0 32px 64px rgba(35, 40, 25, .14);
  --sh-hero: 0 2px 4px rgba(40, 52, 28, .14), 0 14px 30px rgba(40, 52, 28, .22), 0 30px 60px rgba(40, 52, 28, .16);
}

/* Farben · dunkel (automatisch oder erzwungen) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E120E;
    --bg-outer: #070907;
    --surface: #171C16;
    --fill: #222920;
    --fill-2: #2B3328;
    --text: #ECEFE6;
    --text-2: #A8AF9F;
    --text-3: #757D6C;
    --line: rgba(255, 255, 255, .07);
    --line-strong: rgba(255, 255, 255, .13);
    --bar-bg: rgba(14, 18, 14, .78);
    --primary: #98AD7B;
    --primary-hi: #AFC393;
    --primary-strong: #B9CBA1;
    --primary-tint: rgba(152, 173, 123, .14);
    --primary-shadow: rgba(0, 0, 0, .5);
    --on-primary: #10150D;
    --accent: #D6B260;
    --accent-strong: #E6C77E;
    --accent-soft: rgba(214, 178, 96, .13);
    --success: #4DBF7B;
    --success-soft: rgba(77, 191, 123, .15);
    --success-ink: #84DCA6;
    --on-success: #07130B;
    --danger: #EC6A61;
    --danger-soft: rgba(236, 106, 97, .15);
    --danger-ink: #F6A099;
    --warn: #E3A64C;
    --flame: #F38D40;
    --c-lw: #8AA9CE;
    --c-marine: #7398C8;
    --c-san: #E2827A;
    --g-mann: #5D6A4D;
    --g-uop: #73885A;
    --g-ump: #8EA672;
    --g-lt: #A9BE8D;
    --g-hptl: #A58F5C;
    --g-stoffz: #C59E4B;
    --g-gen: #E2BD69;
    --ring-track: rgba(255, 255, 255, .08);
    --card-glow: #1C221A;
    --stage-a: #8C9188;
    --stage-b: #737870;
    --stage-line: rgba(255, 255, 255, .10);
    --g-san: #E2827A;
    --seg-thumb: #3A4436;
    --switch-off: #343C31;
    --sheet-bg: #171C16;
    --toast-bg: #E9ECE3;
    --toast-fg: #141912;
    --toast-act: #5B6E45;
    --hero-a: #3E4E2D;
    --hero-b: #1C2418;
    --topic-ranks-a: #252E21;
    --topic-ranks-b: #1B2218;
    --topic-nato-a: #2D2A1E;
    --topic-nato-b: #211F16;
    --hm0: #1F251D;
    --hm1: #2F3F25;
    --hm2: #4A6235;
    --hm3: #6F8C4F;
    --hm4: #A0BD7A;
    --il-board-a: #556843;
    --il-board-b: #34422B;
    --il-board-c: #6E8058;
    --il-glow: rgba(214, 178, 96, .12);
    --il-tile-a: #343D2F;
    --il-tile-b: #283024;
    --il-letter: #DCE5CF;
    --il-wave: #D6B260;
    --shim-a: #0E120E;
    --shim-b: #0E120E;
    --hairline: inset 0 0 0 1px var(--line);
    --sh-1: 0 1px 2px rgba(0, 0, 0, .35);
    --sh-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .32);
    --sh-3: 0 10px 30px rgba(0, 0, 0, .5), 0 30px 70px rgba(0, 0, 0, .45);
    --sh-hero: 0 2px 6px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E120E;
  --bg-outer: #070907;
  --surface: #171C16;
  --fill: #222920;
  --fill-2: #2B3328;
  --text: #ECEFE6;
  --text-2: #A8AF9F;
  --text-3: #757D6C;
  --line: rgba(255, 255, 255, .07);
  --line-strong: rgba(255, 255, 255, .13);
  --bar-bg: rgba(14, 18, 14, .78);
  --primary: #98AD7B;
  --primary-hi: #AFC393;
  --primary-strong: #B9CBA1;
  --primary-tint: rgba(152, 173, 123, .14);
  --primary-shadow: rgba(0, 0, 0, .5);
  --on-primary: #10150D;
  --accent: #D6B260;
  --accent-strong: #E6C77E;
  --accent-soft: rgba(214, 178, 96, .13);
  --success: #4DBF7B;
  --success-soft: rgba(77, 191, 123, .15);
  --success-ink: #84DCA6;
  --on-success: #07130B;
  --danger: #EC6A61;
  --danger-soft: rgba(236, 106, 97, .15);
  --danger-ink: #F6A099;
  --warn: #E3A64C;
  --flame: #F38D40;
  --c-lw: #8AA9CE;
  --c-marine: #7398C8;
  --c-san: #E2827A;
  --g-mann: #5D6A4D;
  --g-uop: #73885A;
  --g-ump: #8EA672;
  --g-lt: #A9BE8D;
  --g-hptl: #A58F5C;
  --g-stoffz: #C59E4B;
  --g-gen: #E2BD69;
  --ring-track: rgba(255, 255, 255, .08);
  --card-glow: #1C221A;
  --stage-a: #8C9188;
  --stage-b: #737870;
  --stage-line: rgba(255, 255, 255, .10);
  --g-san: #E2827A;
  --seg-thumb: #3A4436;
  --switch-off: #343C31;
  --sheet-bg: #171C16;
  --toast-bg: #E9ECE3;
  --toast-fg: #141912;
  --toast-act: #5B6E45;
  --hero-a: #3E4E2D;
  --hero-b: #1C2418;
  --topic-ranks-a: #252E21;
  --topic-ranks-b: #1B2218;
  --topic-nato-a: #2D2A1E;
  --topic-nato-b: #211F16;
  --hm0: #1F251D;
  --hm1: #2F3F25;
  --hm2: #4A6235;
  --hm3: #6F8C4F;
  --hm4: #A0BD7A;
  --il-board-a: #556843;
  --il-board-b: #34422B;
  --il-board-c: #6E8058;
  --il-glow: rgba(214, 178, 96, .12);
  --il-tile-a: #343D2F;
  --il-tile-b: #283024;
  --il-letter: #DCE5CF;
  --il-wave: #D6B260;
  --shim-a: #0E120E;
  --shim-b: #0E120E;
  --hairline: inset 0 0 0 1px var(--line);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .35);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .32);
  --sh-3: 0 10px 30px rgba(0, 0, 0, .5), 0 30px 70px rgba(0, 0, 0, .45);
  --sh-hero: 0 2px 6px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .45);
}

/* =====================================================================
 * Basis
 * ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg-outer);
}
body {
  position: fixed;
  inset: 0;
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg-outer);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  font-synthesis-weight: none;
}

button, input, textarea { font: inherit; color: inherit; }
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--primary); }
label.row, .chip, .tab-ic, .opt, .bopt { -webkit-user-select: none; user-select: none; }
svg.i { flex: none; display: block; }
img { -webkit-user-drag: none; }
:focus { outline: none; }
:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

/* =====================================================================
 * App-Gerüst
 * Füllt immer den ganzen Bildschirm (inset: 0) – nie über body/html scrollen.
 * Nur bei geöffneter Tastatur folgt die App dem sichtbaren Bereich (--vvh/--vvt).
 * Jede Ansicht: Kopf (fix) · Inhalt (scrollt) · Aktionsleiste (fix)
 * ===================================================================== */
#app {
  position: fixed;
  inset: 0;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
  opacity: 0;
  transition: opacity .3s ease;
}
html.kb #app { top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 100%); }
body.ready #app { opacity: 1; }

@media (min-width: 540px) {
  body {
    background:
      radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%),
      var(--bg-outer);
  }
  #app { box-shadow: 0 0 0 1px var(--line), 0 30px 90px rgba(0, 0, 0, .16); }
}

/* Ältere iOS-Versionen (bis 18): weiße Statusleisten-Schrift (black-translucent) lesbar halten.
   Ab iOS 26 passt iOS die Schriftfarbe selbst an – dort bleibt der Bereich frei. */
.statusbar-shim { display: none; }
html.ios-shim .statusbar-shim {
  display: block;
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--safe-t);
  z-index: 100;
  pointer-events: none;
  background: linear-gradient(var(--shim-a), var(--shim-b));
}

#views { position: absolute; inset: 0; }

.view {
  position: absolute;
  inset: 0;
  z-index: 1;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--bg);
}
.view.under { pointer-events: none; }
.pushed { z-index: 5; box-shadow: -12px 0 40px rgba(0, 0, 0, .10); }

.view > .scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.view > .scroll::-webkit-scrollbar { display: none; }
.tab-scroll { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--s-6)); }

.view > .ftr {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s-3) var(--s-4) calc(var(--safe-b) + var(--s-3));
  background: var(--bg);
  box-shadow: 0 -1px 0 var(--line), 0 -10px 24px -16px rgba(0, 0, 0, .18);
}

.page { padding: 0 var(--s-4) var(--s-4); }

/* =====================================================================
 * Kopfzeile
 * ===================================================================== */
.hdr {
  position: relative;
  z-index: 3;
  padding-top: var(--safe-t);
  background: var(--bg);
  transition: box-shadow .2s ease;
}
.view.scrolled > .hdr, .pushed > .hdr { box-shadow: 0 1px 0 var(--line); }
.hdr-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--nav-h);
  padding: 0 var(--s-2);
}
.hdr-side { display: flex; align-items: center; min-width: 0; }
.hdr-side.right { justify-content: flex-end; }
.hdr-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .25s var(--ease);
}
.hdr-title small { font-size: 12px; font-weight: 600; color: var(--text-3); }
.view.titled .hdr-title, .pushed .hdr-title, .hdr-titled .hdr-title { opacity: 1; transform: none; }
.hdr-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: var(--s-2);
  margin-left: -6px;
  color: var(--primary);
  font-size: 17px;
  font-weight: 500;
}
.hdr-back:active { opacity: .55; }
.hdr .icon-btn { margin-left: 0; }

.large-title {
  margin: var(--s-1) 0 var(--s-5);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.028em;
}
.eyebrow {
  margin: 0 0 var(--s-1);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* =====================================================================
 * Tab-Bar (Glas)
 * ===================================================================== */
#tabbar {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px var(--s-2) calc(var(--safe-b) + 6px);
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 -.5px 0 var(--line-strong);
  transition: transform .45s var(--ease), opacity .3s ease;
}
body.has-stack #tabbar { transform: translateY(110%); opacity: 0; pointer-events: none; }
#tabbar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: color .2s ease;
}
#tabbar button.on { color: var(--primary); }
.tab-ic {
  display: grid;
  place-items: center;
  width: 56px;
  height: 30px;
  border-radius: 15px;
  transition: background-color .25s ease, transform .18s var(--ease-out);
}
#tabbar button.on .tab-ic { background: var(--primary-tint); }
#tabbar button:active .tab-ic { transform: scale(.88); }

/* =====================================================================
 * Buttons
 * ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: 0 var(--s-5);
  border-radius: var(--r-md);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform .16s var(--ease-out), background-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .42; cursor: default; }
.btn-block { display: flex; width: 100%; }
.btn-lg { min-height: 56px; border-radius: var(--r-lg); }
.btn-sm { min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-sm); font-size: 14.5px; }
.btn-primary {
  color: var(--on-primary);
  background: linear-gradient(180deg, var(--primary-hi), var(--primary));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 18px -8px var(--primary-shadow);
}
.btn-secondary { color: var(--text); background: var(--surface); box-shadow: var(--sh-1), var(--hairline); }
.btn-ghost { color: var(--text-2); background: transparent; }
.btn-ghost:active { background: var(--fill); }
.btn-danger { color: #fff; background: var(--danger); box-shadow: 0 8px 18px -8px rgba(200, 67, 60, .55); }
.btn-success { color: var(--on-success); background: var(--success); box-shadow: 0 8px 18px -8px rgba(46, 143, 85, .55); }
.btn-hero {
  min-height: 56px;
  border-radius: var(--r-lg);
  color: #2C3823;
  background: linear-gradient(180deg, #FFFDF6, #F1EBD8);
  box-shadow: inset 0 1px 0 #fff, 0 10px 24px -10px rgba(0, 0, 0, .45);
}
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  border-radius: 50%;
  color: var(--text-2);
  transition: background-color .15s ease;
}
.icon-btn:active { background: var(--fill); }

/* =====================================================================
 * Segmented Control, Schalter, Chips
 * ===================================================================== */
.seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  padding: 3px;
  border-radius: 13px;
  background: var(--fill);
  isolation: isolate;
}
.seg-thumb {
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--n));
  border-radius: 10px;
  background: var(--seg-thumb);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 3px 10px rgba(0, 0, 0, .07);
  transform: translateX(calc(100% * var(--i)));
  transition: transform .34s var(--ease);
}
.seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 6px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .2s ease;
}
.seg-btn.on { color: var(--text); }
.seg-lg { margin-bottom: var(--s-3); }
.seg-lg .seg-btn { min-height: 44px; font-size: 15px; }
.seg-sm .seg-btn { min-height: 40px; font-size: 14px; }

.switch { position: relative; flex: none; width: 51px; height: 31px; }
.switch input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.switch-ui { position: absolute; inset: 0; border-radius: 31px; background: var(--switch-off); transition: background-color .25s ease; }
.switch-ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16);
  transition: transform .3s var(--ease);
}
.switch input:checked + .switch-ui { background: var(--primary); }
.switch input:checked + .switch-ui::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-ui { outline: 2.5px solid var(--primary); outline-offset: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 0 calc(-1 * var(--s-4));
  padding: 2px var(--s-4) var(--s-1);
  scrollbar-width: none;
}
.chips-scroll::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 44px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--sh-1), var(--hairline);
  color: var(--text-2);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, transform .15s var(--ease-out);
}
.chip:active { transform: scale(.95); }
.chip.on { background: var(--primary); color: var(--on-primary); box-shadow: 0 4px 12px -6px var(--primary-shadow); }
.chip .chip-check { margin-left: -4px; }

/* =====================================================================
 * Karten, Listen, Hinweise
 * ===================================================================== */
.card {
  margin-bottom: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-2), var(--hairline);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.card-head h2 { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.muted { color: var(--text-3); font-size: 14px; }

.list { overflow: hidden; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1), var(--hairline); }
.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 52px;
  padding: 10px var(--s-4);
  text-align: left;
  transition: background-color .15s ease;
}
.row + .row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: var(--s-4);
  height: 1px;
  transform: scaleY(.5);
  transform-origin: top;
  background: var(--line-strong);
}
.row.has-ic::before { left: 58px; }
button.row:active, label.row:active { background: var(--fill); }
label.row { cursor: pointer; }
.row-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--primary-tint);
  color: var(--primary);
}
.row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.row-title { display: flex; align-items: center; gap: var(--s-2); font-size: 16px; font-weight: 500; }
.row-sub { font-size: 13px; line-height: 1.3; color: var(--text-3); }
.row-end { display: flex; align-items: center; color: var(--text-3); }
.row-stack { flex-direction: column; align-items: stretch; gap: 10px; padding-top: var(--s-3); padding-bottom: var(--s-3); }
.row-danger .row-title { color: var(--danger); }
.row-danger .row-ic { background: var(--danger-soft); color: var(--danger); }
.row-action .row-title { color: var(--primary); font-weight: 600; }

.group { margin-bottom: var(--s-8); }
.group-title { margin: 0 0 var(--s-3); font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.list-label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-6) var(--s-1) var(--s-2);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.group-foot { display: block; margin: var(--s-2) var(--s-4) 0; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.group-foot svg { display: inline; vertical-align: -2px; }

.g-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; }
.g-mann { background: var(--g-mann); }
.g-uop { background: var(--g-uop); }
.g-ump { background: var(--g-ump); }
.g-lt { background: var(--g-lt); }
.g-hptl { background: var(--g-hptl); }
.g-stoffz { background: var(--g-stoffz); }
.g-gen { background: var(--g-gen); }
.g-san { background: var(--g-san); }

.note {
  display: flex;
  gap: 10px;
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.45;
}
.note .i { flex: none; margin-top: 1px; color: var(--accent-strong); }
.note p { margin: 0; }
.note strong { color: var(--text); }
.note.small { font-size: 12.5px; }

.empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-6) var(--s-4); text-align: center; color: var(--text-3); }
.empty p { max-width: 280px; margin: 0; font-size: 14.5px; line-height: 1.45; }
.empty.small { padding: var(--s-3) var(--s-2); }

.mode-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; }
.tone-main { background: var(--primary-tint); color: var(--primary); }
.tone-nato { background: var(--accent-soft); color: var(--accent-strong); }
.tone-extra { background: var(--fill); color: var(--text-2); }

/* =====================================================================
 * Abzeichen-Bühne (neutral, kontrastiert in hell und dunkel)
 * ===================================================================== */
.badge-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: radial-gradient(120% 90% at 50% 20%, var(--stage-a), var(--stage-b));
  box-shadow: inset 0 0 0 1px var(--stage-line);
}
.badge-stage .badge-img {
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .22));
}
.badge-stage.sm { aspect-ratio: 3 / 4; }
.badge-stage.sm .badge-img { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .2)); }
.stage-chip {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(20, 24, 18, .62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}
.badge-missing { display: grid; place-items: center; height: 100%; color: var(--text-3); font-size: 13px; }
.gap-tag {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--warn);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

/* =====================================================================
 * Start
 * ===================================================================== */
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin: var(--s-1) 0 var(--s-5); }
.home-head .large-title { margin: 0; }
.streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  height: 44px;
  padding: 0 var(--s-4) 0 var(--s-3);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--sh-1), var(--hairline);
  color: var(--text-3);
  font-family: var(--font-round);
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.streak-pill b { color: var(--text); }
.streak-pill.on { color: var(--flame); }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-xl);
  color: var(--hero-ink);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(214, 178, 96, .26), transparent 55%),
    linear-gradient(155deg, var(--hero-a), var(--hero-b));
  box-shadow: var(--sh-hero);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .05);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1fr 108px; gap: var(--s-3); align-items: stretch; margin-bottom: var(--s-4); }
.hero-text { display: flex; flex-direction: column; min-width: 0; }
.hero-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(244, 241, 230, .74); }
.hero-main { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-2) 0 2px; }
.hero-num { font-family: var(--font-round); font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.hero-num svg { stroke-width: 2.6; color: #E9CF8A; }
.hero-unit { font-size: 17px; font-weight: 650; color: rgba(244, 241, 230, .85); }
.hero-sub { margin: 0 0 var(--s-3); font-size: 14px; color: rgba(244, 241, 230, .7); }
.hero-progress { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.hp-bar { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.hp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #C9A04A, #E9CF8A); }
.hp-label { font-size: 13px; color: rgba(244, 241, 230, .78); }
.hp-label b { color: #fff; }
.hero-badge {
  position: relative;
  border-radius: var(--r-lg);
  background: radial-gradient(120% 90% at 50% 20%, #F2F0EA, #D9D7CE);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 8px 18px -8px rgba(0, 0, 0, .45);
  min-height: 150px;
}
.hero-badge .badge-img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .25)); }

.exam-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 76px;
  margin-bottom: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-2), var(--hairline);
  text-align: left;
  transition: transform .16s var(--ease-out);
}
.exam-card:active { transform: scale(.98); }
.exam-ic { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 16px; background: linear-gradient(140deg, #F2E3B8, #D9B562); color: #5A4413; }
.exam-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.exam-text strong { font-size: 18px; font-weight: 750; letter-spacing: -.015em; }
.exam-text small { font-size: 13.5px; color: var(--text-3); }
.exam-last { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.exam-last b { font-family: var(--font-round); font-size: 20px; font-weight: 800; }
.exam-last small { font-size: 11.5px; font-weight: 700; }
.exam-last.ok small { color: var(--success-ink); }
.exam-last.bad small { color: var(--danger-ink); }
.exam-go { color: var(--text-3); }

.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: var(--s-4); }
.mini-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 118px;
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1), var(--hairline);
  text-align: left;
  transition: transform .16s var(--ease-out);
}
.mini-tile:active { transform: scale(.96); }
.mini-tile .mode-ic { width: 38px; height: 38px; border-radius: 12px; margin-bottom: 2px; }
.mini-tile strong { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.mini-tile small { font-size: 12px; line-height: 1.25; color: var(--text-3); }

.nato-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 64px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1), var(--hairline);
  text-align: left;
}
.nato-card:active { transform: scale(.98); }

.install-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1), var(--hairline);
}
.install-card img { flex: none; border-radius: 11px; }
.install-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.install-text strong { font-size: 15px; font-weight: 700; }
.install-text span { font-size: 12.5px; color: var(--text-3); }
.install-x { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); box-shadow: var(--sh-1), var(--hairline); color: var(--text-3); }
.install-x::after { content: ""; position: absolute; inset: -10px; }

/* =====================================================================
 * Üben
 * ===================================================================== */
.scope-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 64px;
  margin-bottom: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1), var(--hairline);
  text-align: left;
}
.scope-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--fill); color: var(--text-2); }
.scope-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.scope-text strong { font-size: 15.5px; font-weight: 650; white-space: nowrap; }
.scope-text small { overflow: hidden; font-size: 13px; color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; }
.scope-sub { font-weight: 500; color: var(--text-2); }
.scope-end { display: inline-flex; align-items: center; flex: none; color: var(--primary); font-size: 14px; font-weight: 650; }

.mode-list { display: flex; flex-direction: column; gap: 10px; }
.mode-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 72px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1), var(--hairline);
  text-align: left;
  transition: transform .16s var(--ease-out), opacity .2s ease;
}
.mode-card:active { transform: scale(.98); }
.mc-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.mc-text strong { font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; }
.mc-text small { display: flex; align-items: center; gap: 4px; font-size: 13.5px; line-height: 1.3; color: var(--text-3); }
.mc-end { flex: none; color: var(--text-3); }
.mode-card.is-off { opacity: .55; }
.mode-card.is-off small { color: var(--warn); }
.mode-card.compact { min-height: 56px; padding: 8px var(--s-4); box-shadow: var(--hairline); background: var(--surface); }
.mode-card.compact .mode-ic { width: 36px; height: 36px; border-radius: 11px; }
.mode-card.compact .mc-text strong { font-size: 15px; font-weight: 600; }
.mode-card.compact .mc-text small { font-size: 12.5px; }

details.extra { margin-top: var(--s-6); }
details.extra > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  min-height: 56px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--fill);
  cursor: pointer;
  list-style: none;
}
details.extra > summary::-webkit-details-marker { display: none; }
details.extra > summary span { font-size: 15.5px; font-weight: 650; }
details.extra > summary small { grid-row: 2; font-size: 12.5px; color: var(--text-3); }
details.extra > summary .sum-ic { grid-row: 1 / 3; grid-column: 2; color: var(--text-3); transition: transform .25s var(--ease); }
details.extra[open] > summary .sum-ic { transform: rotate(180deg); }
details.extra .mode-list { margin-top: var(--s-2); gap: 8px; }

/* =====================================================================
 * Quiz
 * ===================================================================== */
.q-hdr { padding-left: var(--s-4); padding-right: var(--s-4); }
.q-top { display: flex; align-items: center; gap: var(--s-3); height: 50px; }
.q-top .icon-btn { margin-left: -10px; }
.qbar { flex: 1; height: 12px; overflow: hidden; border-radius: 6px; background: var(--fill); }
.qbar-fill {
  position: relative;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--primary-hi));
  transition: width .5s var(--ease-out);
}
.qbar-fill::after { content: ""; position: absolute; top: 3px; right: 6px; left: 6px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.q-streak, .q-counter {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 48px;
  color: var(--text-3);
  font-family: var(--font-round);
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.q-counter { font-size: 15px; color: var(--text-2); }
.q-streak.hot { color: var(--flame); }
.q-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 22px; padding-bottom: 6px; }
.q-meta .eyebrow { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.q-count { flex: none; color: var(--text-2); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.q-hdr .q-count:empty { display: none; }

.q-scroll { display: flex; flex-direction: column; padding: 0 var(--s-4) var(--s-3); }
.q-stage { position: relative; flex: 1 0 auto; display: grid; grid-template: 1fr / 1fr; }
.q { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.q-leaving { pointer-events: none; }
.q-head { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.q-eyebrow { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text-2); }
.q-title { margin: 0; font-size: clamp(24px, 7.4vw, 30px); font-weight: 800; line-height: 1.12; letter-spacing: -.028em; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.q-title-sm { font-size: 20px; }
.q-chip {
  display: inline-flex;
  align-self: center;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--primary-tint);
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 700;
}
.q .badge-stage { flex: 1 1 0; min-height: 130px; }
.q-small-badge .badge-stage { flex: 1 1 0; min-height: 110px; max-height: 240px; }
.big-stage {
  display: grid;
  flex: 1 1 0;
  place-items: center;
  min-height: 120px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--card-glow), var(--surface) 60%);
  box-shadow: var(--sh-2), var(--hairline);
}
.q-big { font-family: var(--font-round); font-size: clamp(72px, 26vw, 112px); font-weight: 800; line-height: 1; color: var(--primary); }
.hint { margin: 0; font-size: 13px; text-align: center; color: var(--text-3); }

/* Antwortoptionen */
.opts { flex: none; display: grid; gap: 8px; }
.opts-grid { grid-template-columns: 1fr 1fr; }
.opts-yesno { grid-template-columns: 1fr 1fr; }
.opts-list { grid-template-columns: 1fr; }
.opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 58px;
  padding: 8px 28px 8px 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1), inset 0 0 0 1.5px var(--line-strong);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  transition: transform .15s var(--ease-out), background-color .2s ease, box-shadow .2s ease, opacity .25s ease;
}
.opts-grid .opt { padding: 8px 26px; }
.opts-list .opt { justify-content: space-between; padding: 8px 14px 8px 16px; text-align: left; min-height: 52px; }
.opt:active:not(:disabled) { transform: scale(.97); }
.opt-label { min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.opt-mark {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  transform: translateY(-50%);
}
.opts-list .opt-mark { position: static; flex: none; width: 24px; height: 24px; transform: none; box-shadow: inset 0 0 0 2px var(--line-strong); }
.opt.is-correct, .bopt.is-correct, .hlg-btn.is-correct { background: var(--success-soft); box-shadow: inset 0 0 0 2.5px var(--success); color: var(--success-ink); animation: pulse-ok .7s var(--ease-out); }
.opt.is-solution, .bopt.is-solution, .hlg-btn.is-solution { background: var(--success-soft); box-shadow: inset 0 0 0 2.5px var(--success); color: var(--success-ink); }
.opt.is-wrong, .bopt.is-wrong, .hlg-btn.is-wrong { background: var(--danger-soft); box-shadow: inset 0 0 0 2.5px var(--danger); color: var(--danger-ink); }
.opt.is-picked, .bopt.is-picked { background: var(--primary-tint); box-shadow: inset 0 0 0 2.5px var(--primary); color: var(--text); }
.is-correct .opt-mark, .is-solution .opt-mark { background: var(--success); box-shadow: none; }
.is-wrong .opt-mark { background: var(--danger); box-shadow: none; }
.opt.is-dim, .bopt.is-dim, .hlg-btn.is-dim { opacity: .42; }
@keyframes pulse-ok {
  0% { box-shadow: inset 0 0 0 2.5px var(--success), 0 0 0 0 rgba(46, 143, 85, .45); }
  100% { box-shadow: inset 0 0 0 2.5px var(--success), 0 0 0 16px rgba(46, 143, 85, 0); }
}
.check-morph path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .42s .06s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Abzeichen finden: 2 × 2 Abzeichen */
.badge-grid { flex: 1 1 0; min-height: 280px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.bopt {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: radial-gradient(120% 90% at 50% 20%, var(--stage-a), var(--stage-b));
  box-shadow: inset 0 0 0 1px var(--stage-line), var(--sh-1);
  transition: transform .15s var(--ease-out), box-shadow .2s ease, opacity .25s ease;
}
.bopt:active:not(:disabled) { transform: scale(.97); }
.bopt .badge-img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .22)); transition: inset .25s var(--ease); }
.bopt .opt-mark { top: 8px; right: 8px; width: 26px; height: 26px; transform: none; }
.bopt-name {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(20, 24, 18, .7);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s var(--ease);
}
.revealed .bopt-name { opacity: 1; transform: none; }
.revealed .bopt .badge-img { inset: 10px 10px 34px; height: calc(100% - 44px); }
.bopt.is-correct, .bopt.is-solution { background: radial-gradient(120% 90% at 50% 20%, var(--stage-a), var(--stage-b)); }
.bopt.is-wrong { background: radial-gradient(120% 90% at 50% 20%, var(--stage-a), var(--stage-b)); }

/* Rückmeldung in der Aktionsleiste */
.q-ftr { padding-top: 10px; }
.feedback { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3) var(--s-3) 0; margin: calc(-1 * var(--s-1)) 0 0; border-radius: var(--r-lg); }
.feedback.is-ok .fb-ic { background: var(--success); }
.feedback.is-bad .fb-ic { background: var(--danger); }
.fb-row { display: flex; align-items: flex-start; gap: var(--s-3); }
.fb-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; color: #fff; }
.fb-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fb-text strong { font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
.is-ok .fb-text strong { color: var(--success-ink); }
.is-bad .fb-text strong { color: var(--danger-ink); }
.fb-text span { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text); }
.fb-text em { margin-top: 2px; font-size: 13px; font-style: normal; line-height: 1.35; color: var(--text-2); }
.fb-mini { display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 52px; color: var(--success-ink); font-size: 18px; font-weight: 750; }

/* Höher / niedriger */
.cmp2 { flex: 1 1 0; min-height: 180px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px; }
.cmp-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.cmp-col .badge-stage { flex: 1 1 0; width: 100%; min-height: 110px; }
.cmp-col strong { font-size: 15.5px; font-weight: 750; line-height: 1.2; }
.cmp-col small { font-size: 12px; font-weight: 600; color: var(--text-3); }
.cmp-vs { align-self: center; font-size: 13px; font-weight: 800; color: var(--text-3); text-transform: uppercase; }
.hlg { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hlg-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1), inset 0 0 0 1.5px var(--line-strong);
  font-size: 14.5px;
  font-weight: 700;
  transition: transform .15s var(--ease-out), background-color .2s ease, box-shadow .2s ease, opacity .25s ease;
}
.hlg-btn:active:not(:disabled) { transform: scale(.95); }
.hlg-btn .i { color: var(--primary); }
.flip-y { transform: scaleY(-1); }

/* Rangfolge */
.ord { position: relative; flex: none; touch-action: none; }
.ord-item {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--h);
  padding: 0 var(--s-1) 0 10px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1), inset 0 0 0 1px var(--line-strong);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .3s var(--ease), box-shadow .2s ease, background-color .25s ease;
}
.ord-item.lifted { z-index: 3; box-shadow: var(--sh-3), inset 0 0 0 2px var(--primary); cursor: grabbing; transition: box-shadow .2s ease, background-color .2s ease; }
.ord-num { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); font-family: var(--font-round); font-size: 13px; font-weight: 800; }
.ord-thumb { position: relative; flex: none; width: 30px; height: calc(var(--h) - 10px); border-radius: 6px; background: radial-gradient(120% 90% at 50% 20%, var(--stage-a), var(--stage-b)); overflow: hidden; }
.ord-thumb .badge-img { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: contain; }
.ord-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ord-text strong { overflow: hidden; font-size: 16px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.ord-text small { font-size: 12px; font-weight: 600; color: var(--text-3); }
.ord-grip { display: grid; place-items: center; flex: none; width: 40px; height: 44px; color: var(--text-3); }
.ord.done .ord-item { cursor: default; }
.ord-item.ok { background: var(--success-soft); box-shadow: inset 0 0 0 2px var(--success); }
.ord-item.ok .ord-num { background: var(--success); color: #fff; }
.ord-item.bad { background: var(--danger-soft); box-shadow: inset 0 0 0 2px var(--danger); }
.ord-item.bad .ord-num { background: var(--danger); color: #fff; }

/* Karteikarte */
.q-flash { gap: 0; }
.fc-area { position: relative; flex: 1 1 0; min-height: 300px; perspective: 1400px; }
.fc-back-card { position: absolute; inset: 0 6% 0; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-1), var(--hairline); opacity: .6; transform: translateY(10px) scale(.94); }
.fc { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; will-change: transform; }
.fc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .62s var(--ease); }
.fc-inner.flipped { transform: rotateY(180deg); }
.fc-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--s-3);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-2), var(--hairline);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.fc-front { gap: var(--s-2); }
.fc-front .badge-stage { flex: 1 1 0; min-height: 0; }
.fc-hint { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.fc-backface { gap: var(--s-3); padding: var(--s-4); transform: rotateY(180deg); overflow-y: auto; }
.fc-head h3 { margin: 2px 0 0; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.fc-head .q-eyebrow { font-size: 13px; }
.fc-facts { display: flex; flex-direction: column; gap: 8px; }
.fc-facts > div { padding: 10px var(--s-3); border-radius: var(--r-sm); background: var(--fill); }
.fc-facts strong { display: block; font-size: 15px; line-height: 1.3; }
.fc-facts strong.yes { color: var(--success-ink); }
.fc-facts strong.no { color: var(--text-2); }
.fc-facts small { color: var(--text-3); font-weight: 600; }
.fc-label { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.fc-thumbs { display: flex; gap: 8px; }
.fc-thumb { flex: 1; margin: 0; text-align: center; }
.fc-thumb .badge-img { display: block; width: 100%; height: 92px; object-fit: contain; padding: 6px; border-radius: var(--r-sm); background: radial-gradient(120% 90% at 50% 20%, var(--stage-a), var(--stage-b)); }
.fc-thumb figcaption { margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--text-3); }
.fc-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.fc-nav > div { padding: 8px var(--s-3); border-radius: var(--r-sm); background: var(--fill); }
.fc-nav strong { font-size: 14px; line-height: 1.25; }
.fc-stamp {
  position: absolute;
  top: 18px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 2.5px solid;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}
.fc-stamp.yes { left: 18px; color: var(--success); background: var(--success-soft); transform: rotate(-8deg); }
.fc-stamp.no { right: 18px; color: var(--danger); background: var(--danger-soft); transform: rotate(8deg); }
.fc-actions { display: flex; align-items: center; justify-content: center; gap: var(--s-6); }
.round-btn { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--surface); box-shadow: var(--sh-2), var(--hairline); transition: transform .15s var(--ease-out); }
.round-btn:active { transform: scale(.9); }
.round-btn.small { width: 50px; height: 50px; color: var(--text-2); }
.round-btn.good { color: var(--success); }
.round-btn.bad { color: var(--danger); }
.round-btn svg { stroke-width: 2.4; }
.fc-tip { margin: 0; font-size: 12px; text-align: center; color: var(--text-3); }

/* Buchstabieren */
.spell-card { flex: 1 1 0; min-height: 96px; display: grid; place-items: center; padding: var(--s-3); border-radius: var(--r-xl); background: linear-gradient(180deg, var(--card-glow), var(--surface) 60%); box-shadow: var(--sh-2), var(--hairline); }
.sp-target { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sp-target:not(.checked) { flex-wrap: nowrap; gap: 4px; width: 100%; }
.sp-target:not(.checked) .sp-tile { flex: 0 1 44px; min-width: 0; }
.sp-target:not(.checked) .sp-sep { flex: 0 1 10px; min-width: 0; }
.sp-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 40px; min-height: 52px; padding: 6px; border-radius: var(--r-sm); background: var(--fill); }
.sp-tile b { font-family: var(--font-round); font-size: 26px; font-weight: 800; line-height: 1; }
.sp-tile small { font-size: 10.5px; font-weight: 700; }
.sp-tile small:empty { display: none; }
.sp-tile.ok { background: var(--success-soft); color: var(--success-ink); }
.sp-tile.bad { background: var(--danger-soft); color: var(--danger-ink); }
.sp-sep { display: grid; place-items: center; min-width: 8px; font-size: 22px; font-weight: 800; color: var(--text-3); }
.sp-answer { display: flex; flex: none; flex-wrap: wrap; align-content: flex-start; gap: var(--s-2); min-height: 64px; padding: 10px; border: 2px dashed var(--line-strong); border-radius: var(--r-md); }
.sp-answer.has { border-style: solid; border-color: transparent; background: var(--primary-tint); }
.sp-ph { margin: auto; font-size: 14px; color: var(--text-3); }
.sp-answer.has .sp-ph { display: none; }
.sp-bank { display: flex; flex: none; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.w-chip { min-height: 44px; padding: 0 14px; border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--sh-1), inset 0 0 0 1.5px var(--line-strong); font-size: 16px; font-weight: 650; transition: opacity .2s ease, transform .15s var(--ease-out); }
.w-chip:active:not(:disabled) { transform: scale(.94); }
.w-chip.used { opacity: .22; box-shadow: inset 0 0 0 1.5px var(--line); }
.w-chip.in { box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary); }
.tok { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--fill); font-size: 15px; font-weight: 700; }

/* =====================================================================
 * Ergebnis
 * ===================================================================== */
.result-view .scroll { padding: var(--s-2) var(--s-4) var(--s-4); }
.result-hero { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); text-align: center; }
.result-ring { position: relative; width: 168px; height: 168px; margin-bottom: var(--s-1); }
.result-ring .ring { position: relative; }
.result-ring .glow { position: absolute; inset: -36px; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 178, 96, .38), transparent); animation: glow 2.6s ease-in-out infinite; }
@keyframes glow { 50% { transform: scale(1.08); opacity: .7; } }
.ring-num { fill: var(--text); font-family: var(--font-round); font-size: 44px; font-weight: 800; letter-spacing: -.02em; }
.ring-pct { fill: var(--text-2); font-size: 22px; }
.ring-sub { fill: var(--text-3); font-size: 13.5px; font-weight: 600; }
.badge-gold { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: linear-gradient(135deg, #F5E6BC, #D7B25E); color: #4F3B0E; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 8px 18px -8px rgba(180, 138, 53, .7); }
.pass-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.pass-pill.ok { background: linear-gradient(135deg, #F5E6BC, #D7B25E); color: #4F3B0E; box-shadow: 0 8px 18px -8px rgba(180, 138, 53, .7); }
.pass-pill.bad { background: var(--danger-soft); color: var(--danger-ink); }
.pass-pill.sm { padding: 4px 10px; font-size: 11px; }
.result-title { margin: var(--s-1) 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.025em; }
.result-sub { margin: 0; font-weight: 600; color: var(--text-3); }
.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: var(--s-4); }
.stat-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1), var(--hairline); }
.stat-tile > svg { color: var(--primary); }
.stat-tile > svg.tone-flame { color: var(--flame); }
.stat-tile > svg.tone-gold { color: var(--accent); }
.stat-tile strong { font-family: var(--font-round); font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-tile span { font-size: 12px; font-weight: 600; color: var(--text-3); }
.count-pill { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 var(--s-2); border-radius: 14px; background: var(--danger-soft); color: var(--danger-ink); font-size: 13px; font-weight: 800; }
.mistake-list, .credit-list { margin: 0; padding: 0; list-style: none; }
.mistake-list li, .credit-list li { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-top: .5px solid var(--line-strong); }
.mistake-list li:first-child { padding-top: 0; border-top: 0; }
.mistake-list li:last-child { padding-bottom: 0; }
.m-thumb { position: relative; flex: none; width: 46px; height: 62px; border-radius: 10px; background: radial-gradient(120% 90% at 50% 20%, var(--stage-a), var(--stage-b)); overflow: hidden; }
.m-thumb img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; }
.m-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-prompt { font-size: 13px; font-weight: 600; color: var(--text-3); }
.m-sol { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--success-ink); }
.m-given { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--danger-ink); }
.m-sol svg, .m-given svg { flex: none; }
.all-good { display: flex; align-items: center; gap: var(--s-3); color: var(--success-ink); }
.all-good div { display: flex; flex-direction: column; }
.all-good span { font-size: 14px; color: var(--text-3); }

/* =====================================================================
 * Bottom Sheet, Modal, Toast
 * ===================================================================== */
#overlays { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
#overlays > * { pointer-events: auto; }
.sheet-wrap, .modal-wrap { position: fixed; inset: 0; }
html.kb .sheet-wrap, html.kb .modal-wrap { top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 100%); }
.backdrop { position: absolute; inset: 0; background: rgba(10, 14, 9, .44); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  max-height: calc(100% - var(--safe-t) - 12px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  background: var(--sheet-bg);
  box-shadow: var(--sh-3);
}
.sheet-grabber { flex: none; display: flex; justify-content: center; padding: 10px 0 4px; cursor: grab; touch-action: none; }
.sheet-grabber span { width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s-5) var(--s-3); scrollbar-width: none; }
.sheet-body::-webkit-scrollbar { display: none; }
.sheet-foot { flex: none; padding: var(--s-3) var(--s-5) calc(var(--safe-b) + var(--s-4)); box-shadow: 0 -1px 0 var(--line); }
.sheet-foot:empty { display: none; }
.sh-head { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-2) 0 var(--s-4); touch-action: none; }
.sh-head .mode-ic { width: 56px; height: 56px; border-radius: 18px; }
.sh-head h2 { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -.025em; }
.sh-head p { margin: 2px 0 0; font-size: 15px; color: var(--text-3); }
.sh-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-3); }
.sh-row .seg { flex: 1; max-width: 250px; }
.sh-label { margin: var(--s-4) 0 var(--s-2); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.sh-row .sh-label { margin: 0; }
.sh-filter { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-lg); background: var(--bg); }
.sh-filter-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.sh-filter-head span { font-size: 16px; font-weight: 750; }
.sh-filter-head small { font-size: 12.5px; color: var(--text-3); }
.sh-filter .sh-label { margin-top: var(--s-3); }
.sh-filter .chips { gap: 6px; }
.sh-filter .chip { min-height: 40px; padding: 0 var(--s-3); font-size: 14px; }
.sh-info { display: flex; flex-direction: column; gap: 10px; padding: var(--s-4); border-radius: var(--r-lg); background: var(--bg); }
.sh-info > div { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text-2); }
.sh-info svg { color: var(--primary); }
.sh-count { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 var(--s-3); font-size: 14px; font-weight: 600; color: var(--text-2); }
.sh-count.warn { color: var(--warn); }
.detail-imgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-bottom: var(--s-3); }
.detail-imgs figure { margin: 0; text-align: center; }
.detail-imgs .badge-stage { height: 210px; }
.detail-imgs figcaption { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.gap-note { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s-3); font-size: 13px; color: var(--warn); }

.modal-wrap { display: grid; place-items: center; padding: var(--s-6); }
.modal { position: relative; width: 100%; max-width: 340px; padding: var(--s-6) var(--s-5) var(--s-4); border-radius: 26px; background: var(--surface); box-shadow: var(--sh-3); text-align: center; }
.modal-ic { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto var(--s-3); border-radius: 18px; background: var(--primary-tint); color: var(--primary); }
.modal.tone-danger .modal-ic { background: var(--danger-soft); color: var(--danger); }
.modal-title { margin: 0 0 var(--s-2); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.modal-text { margin: 0 0 var(--s-5); font-size: 15px; line-height: 1.45; color: var(--text-2); }
.modal-actions { display: flex; flex-direction: column; gap: var(--s-2); }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--s-4));
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  min-height: 48px;
  padding: 6px 6px 6px var(--s-4);
  border-radius: var(--r-md);
  background: var(--toast-bg);
  color: var(--toast-fg);
  box-shadow: var(--sh-3);
  font-size: 15px;
  font-weight: 600;
  transform: translateX(-50%);
}
.toast > span { padding: 6px 0; }
.toast > svg:first-child { color: var(--toast-act); }
body.has-stack .toast { bottom: calc(var(--safe-b) + 96px); }
.toast-btn { min-height: 38px; padding: 0 var(--s-3); border-radius: 10px; background: rgba(127, 127, 127, .18); color: var(--toast-act); font-weight: 700; }
.confetti { position: fixed; inset: 0; z-index: 90; width: 100%; height: 100%; pointer-events: none; }

/* =====================================================================
 * Statistik
 * ===================================================================== */
.mastery-top { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.mastery-ring { position: relative; flex: none; width: 108px; height: 108px; }
.mastery-ring span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mastery-ring b { font-family: var(--font-round); font-size: 30px; font-weight: 800; line-height: 1; }
.mastery-ring small { font-size: 12px; font-weight: 600; color: var(--text-3); }
.mastery-text h2 { margin: 0 0 4px; font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.mastery-text p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-3); }
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label val" "bar bar"; row-gap: 6px; align-items: center; }
.bar-label { grid-area: label; display: flex; align-items: center; gap: var(--s-2); font-size: 14.5px; font-weight: 600; }
.bar-val { grid-area: val; font-size: 14px; font-weight: 750; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bar { grid-area: bar; display: block; height: 8px; overflow: hidden; border-radius: 4px; background: var(--fill); }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--primary-hi)); transition: width .8s var(--ease-out); }
.bar.thin { height: 6px; }
.exam-last-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-bottom: var(--s-4); }
.exam-last-row > div { display: flex; flex-direction: column; gap: 2px; }
.big-num { font-family: var(--font-round); font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.big-num small { font-size: 15px; color: var(--text-3); }
.big-num.sm { font-size: 20px; line-height: 1.5; }
.exam-last-row span { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.exam-hist { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-bottom: var(--s-4); padding: 0 2px; border-bottom: 1px solid var(--line-strong); }
.exam-hist i { flex: 1; border-radius: 5px 5px 0 0; }
.exam-hist i.ok { background: linear-gradient(180deg, #E0BD6A, #B8913A); }
.exam-hist i.bad { background: var(--danger-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 40%, transparent); }
.pass-line { position: absolute; right: 0; left: 0; border-top: 1.5px dashed var(--text-3); opacity: .6; }
.weak-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: var(--s-4); }
.weak-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: center; }
.weak-item strong { overflow: hidden; font-size: 13.5px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; }
.weak-item small { font-size: 11.5px; color: var(--danger-ink); font-weight: 600; }
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-4); }
.kpi-grid.three { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1), var(--hairline); }
.kpi-ic { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 11px; background: var(--primary-tint); color: var(--primary); }
.kpi-streak .kpi-ic { background: var(--fill); color: var(--text-3); }
.kpi-streak.on .kpi-ic { background: color-mix(in srgb, var(--flame) 14%, transparent); color: var(--flame); }
.kpi strong { font-family: var(--font-round); font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi strong small { font-size: 14px; color: var(--text-3); }
.kpi > span:last-child { font-size: 12px; font-weight: 600; color: var(--text-3); }
.heatmap-wrap { display: flex; gap: 6px; }
.hm-days { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; padding-top: 18px; font-size: 10px; font-weight: 600; line-height: 1; color: var(--text-3); }
.hm-days span { display: flex; align-items: center; }
.hm-main { flex: 1; min-width: 0; }
.hm-months { display: grid; height: 14px; margin-bottom: 4px; font-size: 10px; font-weight: 600; color: var(--text-3); }
.hm-months span { white-space: nowrap; }
.heatmap { display: grid; grid-template-rows: repeat(7, auto); gap: 3px; }
.hm { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--hm0); }
.hm.l1 { background: var(--hm1); }
.hm.l2 { background: var(--hm2); }
.hm.l3 { background: var(--hm3); }
.hm.l4 { background: var(--hm4); }
.hm.lx { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.hm.today { box-shadow: 0 0 0 1.5px var(--text-2); }
.mode-stats { display: flex; flex-direction: column; gap: var(--s-4); }
.mode-stat { display: flex; align-items: center; gap: var(--s-3); }
.mode-stat .mode-ic { width: 36px; height: 36px; border-radius: 11px; }
.ms-main { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.ms-top { display: flex; justify-content: space-between; gap: var(--s-2); }
.ms-top strong { font-size: 15px; font-weight: 650; }
.ms-top span { font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; }
.ms-main small { font-size: 12px; color: var(--text-3); }

/* =====================================================================
 * Einstellungen
 * ===================================================================== */
.count-banner {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  background: radial-gradient(100% 120% at 100% 0%, var(--accent-soft), transparent 60%), var(--surface);
  box-shadow: var(--sh-1), var(--hairline);
}
.count-num { font-family: var(--font-round); font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--primary); font-variant-numeric: tabular-nums; }
.count-banner span:last-child { font-size: 15px; font-weight: 650; color: var(--text-2); }
.app-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin: var(--s-4) 0; font-size: 13px; color: var(--text-3); }

/* =====================================================================
 * Nachschlagen
 * ===================================================================== */
.lookup { padding-top: var(--s-3); }
.search { position: relative; display: flex; align-items: center; margin: var(--s-3) 0; }
.search > svg { position: absolute; left: 14px; color: var(--text-3); pointer-events: none; }
.search-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--s-4) 0 44px;
  border: 0;
  border-radius: 14px;
  background: var(--fill);
  color: var(--text);
  font-size: 17px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.search-input::placeholder { color: var(--text-3); }
.search-input:focus { box-shadow: 0 0 0 2px var(--primary); }
.search-input::-webkit-search-cancel-button, .search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.field {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--text);
  font-size: 17px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.field:focus { box-shadow: inset 0 0 0 2px var(--primary), 0 0 0 4px var(--primary-tint); }
.bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bcard { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0; text-align: center; }
.bcard strong { font-size: 13px; font-weight: 700; line-height: 1.2; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.bcard:active .badge-stage { transform: scale(.97); }
.bcard .badge-stage { transition: transform .15s var(--ease-out); }

.rank-table { --rt-cols: .92fr .92fr 1.18fr 1fr; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-2), var(--hairline); }
.rt-head { display: grid; grid-template-columns: var(--rt-cols); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 .5px 0 var(--line-strong); }
.rt-head span { padding: 14px 4px 10px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-align: center; text-transform: uppercase; color: var(--text-3); }
.rt-group { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-4) var(--s-3) 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.rt-row { display: grid; grid-template-columns: var(--rt-cols); box-shadow: inset 0 .5px 0 var(--line-strong); }
.rt-row > span[role="cell"] { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 11px 5px; font-size: 13px; line-height: 1.25; text-align: center; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.rt-row > span[role="cell"] + span[role="cell"] { box-shadow: inset .5px 0 0 var(--line); }
.rt-row .span2 { grid-column: span 2; }
.rt-name { display: block; font-weight: 650; }
.rt-row em { display: block; font-size: 10.5px; font-style: normal; font-weight: 600; color: var(--text-3); }
.rt-row .na { font-style: normal; color: var(--text-3); opacity: .5; }
.rt-row.is-oa { background: var(--accent-soft); }
.rt-extra { grid-column: 1 / -1; padding: 0 var(--s-3) 10px; font-size: 11px; font-weight: 600; line-height: 1.35; text-align: center; color: var(--text-3); }
.oa-tag { font-weight: 700; color: var(--accent-strong); }
.rt-body > :last-child { border-radius: 0 0 var(--r-xl) var(--r-xl); }

.helper .field { margin-bottom: var(--s-3); }
.helper-out { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; }
.helper-out .tok b { margin-right: 6px; color: var(--primary); }
.nato-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-bottom: var(--s-2); }
.nato-tile { display: flex; flex-direction: column; gap: 2px; min-height: 84px; padding: var(--s-3); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1), var(--hairline); }
.nato-tile b { font-family: var(--font-round); font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--primary); }
.nato-tile span { font-size: 15px; font-weight: 700; }
.nato-tile small { font-size: 11px; color: var(--text-3); }

.credit-list li { align-items: flex-start; }
.credit-list .m-body strong { font-size: 14.5px; }
.credit-list .m-body small { font-size: 12px; color: var(--text-3); }
.credit-list .m-body a { font-size: 12.5px; overflow-wrap: anywhere; }

/* =====================================================================
 * Reduzierte Bewegung
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Kleine Geräte (iPhone SE) */
@media (max-height: 700px) {
  .q-eyebrow { font-size: 14px; }
  .opt { min-height: 52px; font-size: 15px; }
  .hlg-btn { min-height: 56px; }
  .q-top { height: 46px; }
  .round-btn { width: 56px; height: 56px; }
  .round-btn.small { width: 46px; height: 46px; }
  .fc-tip { display: none; }
  .hero-num { font-size: 48px; }
}