/* Farben und Schriften nach den Mockups (Design-Fläche). Dunkler Modus folgt dem System. */
:root {
  --bg: #F1F2F0;
  --card: #FFFFFF;
  --ink: #1A1D21;
  --muted: #5B616A;
  --line: #E4E6E2;
  --line-strong: #D9DBD7;
  --outline: #8A9099;
  --accent: #9B2226;
  --accent-soft: #F3DEDD;
  --ok: #1E7F46;
  --warn: #7A5200;
  --on-ink: #FFFFFF;
  --on-accent: #FFFFFF; /* Schrift auf Akzent- und Warnflächen */
  --disabled-bg: #D9DBD7;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #14161A; --card: #1E2126; --ink: #ECEDEE; --muted: #A5ABB3; --line: #2C3036; --line-strong: #353A41;
    --outline: #6B727B; --accent: #E5767A; --accent-soft: #3B2426; --ok: #6FD99A; --warn: #E3B04B;
    --on-ink: #14161A; --on-accent: #14161A; --disabled-bg: #2C3036;
  }
}

:root[data-theme="dark"] {
  --bg: #14161A; --card: #1E2126; --ink: #ECEDEE; --muted: #A5ABB3; --line: #2C3036; --line-strong: #353A41;
  --outline: #6B727B; --accent: #E5767A; --accent-soft: #3B2426; --ok: #6FD99A; --warn: #E3B04B;
  --on-ink: #14161A; --on-accent: #14161A; --disabled-bg: #2C3036; color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
/* Schriftgröße: die ganze Oberfläche wird skaliert (die App arbeitet mit festen Pixelgrößen) */
:root[data-size="l"] { --zoom: 1.12; }
:root[data-size="xl"] { --zoom: 1.25; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--ui); font-size: 16px; line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

#app {
  max-width: 520px; min-height: calc(100dvh / var(--zoom, 1)); margin: 0 auto; display: flex; flex-direction: column; zoom: var(--zoom, 1);
  padding-top: env(safe-area-inset-top);
}
.boot { padding: 40px 24px; color: #B9BEC5; }
.view { flex: 1; display: flex; flex-direction: column; padding-bottom: 8px; }
.pad { padding-left: 20px; padding-right: 20px; }
.stack { display: flex; flex-direction: column; gap: 12px; }

.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.card { background: var(--card); border-radius: 20px; padding: 20px; }
.serif { font-family: var(--serif); }

/* Buttons */
.btn {
  width: 100%; min-height: 56px; border: 0; border-radius: 14px; background: var(--accent); color: var(--on-accent);
  font: 600 17px var(--ui); cursor: pointer;
}
.btn:disabled { background: var(--disabled-bg); color: var(--muted); cursor: default; }
.btn-ghost { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); min-height: 48px; font-size: 15px; }
.link {
  min-height: 44px; padding: 0 4px; background: transparent; border: 0; color: var(--accent);
  font: 500 14px var(--ui); text-decoration: underline; cursor: pointer;
}
.chip {
  min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--card); border: 1.5px solid var(--outline);
  color: var(--ink); font: 500 15px var(--ui); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chip.tall { min-height: 56px; padding: 0 8px; font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.grid { display: grid; gap: 10px; }
.grid.c1 { grid-template-columns: minmax(0, 1fr); }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid .chip { padding: 0 6px; min-height: 48px; }
.compact .grid { gap: 8px; }
.compact .grid .chip { min-height: 44px; }

/* Navigation */
.nav { position: sticky; bottom: 0; display: flex; background: var(--card); border-top: 1px solid var(--line-strong); padding: 6px 8px calc(10px + env(safe-area-inset-bottom)); margin-top: auto; }
.nav button {
  flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: transparent; border: 0; color: var(--muted); font: 500 12px var(--ui); cursor: pointer;
}
.nav button[aria-current="page"] { color: var(--accent); font-weight: 600; }
.nav svg { width: 22px; height: 22px; }

/* Start */
.brand { display: flex; align-items: center; gap: 12px; padding: 28px 24px 0; }
.logo { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font: 700 17px var(--display); letter-spacing: 1px; }
.brand span { font: 600 15px var(--display); letter-spacing: 2px; color: var(--muted); }
.hero { padding: 36px 24px 0; }
.hero h1 { font: 700 46px/1.05 var(--display); letter-spacing: 1px; }
.hero .sub { margin-top: 16px; font: 19px/1.4 var(--serif); color: var(--muted); }
.rows { margin: 28px 20px 0; background: var(--card); border-radius: 16px; overflow: hidden; }
.rows .head { padding: 14px 16px 6px; }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 16px; background: transparent;
  border: 0; border-top: 1px solid var(--line); text-align: left; cursor: pointer;
}
.row .k { width: 84px; font-size: 13px; color: var(--muted); flex: none; }
.row .v { flex: 1; font-size: 15px; font-weight: 500; }
.row svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.note { padding: 14px 20px 0; font-size: 13px; color: var(--muted); }

/* Quiz */
.topbar { display: flex; align-items: center; gap: 8px; padding: 12px 20px 0 8px; }
.iconbtn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; }
.iconbtn svg { width: 24px; height: 24px; }
.topbar .t { flex: 1; font-size: 14px; font-weight: 600; }
.topbar .s { font-size: 14px; color: var(--muted); }
.progress { margin: 4px 20px 0; height: 4px; border-radius: 2px; background: var(--line-strong); }
.progress > div { height: 100%; border-radius: 2px; background: var(--ink); }
.formcard { margin: 18px 20px 0; text-align: center; }
.formcard .form { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; font-family: var(--serif); }
.formcard .form b { font-weight: 600; font-size: 52px; line-height: 1.1; overflow-wrap: anywhere; line-height: 1.1; }
.formcard .form i { font-style: normal; font-weight: 500; font-size: 24px; color: var(--accent); }
.hintbox {
  margin: 14px auto 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px;
  background: var(--accent-soft); font-size: 13px; line-height: 1.35; text-align: left;
}
.hintbox svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.fields { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 16px; }
.fields .eyebrow { margin-bottom: 8px; }
.posrow { margin: 10px 20px 0; min-height: 36px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.posrow b { color: var(--ink); }
.posrow .link { margin-left: auto; }
.cta { margin-top: auto; padding: 20px 20px 24px; }
.poslist { padding: 22px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.poslist .chip { min-height: 56px; font-size: 17px; text-align: left; padding: 0 16px; }

/* Auflösung */
.banner { margin: 16px 20px 0; border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; color: #fff; }
.banner.ok { background: #1E7F46; } /* grün in beiden Modi, weißer Text bleibt lesbar */
.banner.part { background: var(--warn); color: var(--on-accent); } /* dunkel: helles Gelb braucht dunkle Schrift */
.banner.bad { background: var(--accent); color: var(--on-accent); }
.banner svg { width: 26px; height: 26px; flex: none; }
.banner b { display: block; font-size: 17px; font-weight: 600; }
.banner small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; }
.sol { margin: 12px 20px 0; }
.sol .big { font: 600 40px/1.1 var(--serif); overflow-wrap: anywhere; line-height: 1.1; }
.reading { padding: 10px 0; border-top: 1px solid var(--line); display: flex; gap: 12px; }
.reading:first-of-type { margin-top: 14px; }
.reading .n { width: 58px; font-size: 12px; color: var(--muted); padding-top: 2px; flex: none; }
.reading .d { font-size: 15px; font-weight: 500; }
.reading .l { margin-top: 2px; font-size: 13px; color: var(--muted); }
.reading.mine .d::after { content: " ✓"; color: var(--ok); }
.you { padding: 10px 0 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.you b { color: var(--ink); font-weight: 500; }
.extra { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.beleg p.text { margin-top: 10px; font: 19px/1.5 var(--serif); }
.beleg mark { background: var(--accent-soft); color: inherit; border-bottom: 2px solid var(--accent); padding: 0 2px; font-weight: 600; }
.beleg .meta { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--muted); }
details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 14px; color: var(--accent); }

/* Einstellungen / Statistik */
.title { padding: 28px 20px 4px; font: 600 30px var(--serif); }
.titlebar { display: flex; align-items: center; justify-content: space-between; padding-right: 20px; }
.badge { padding: 6px 10px; border-radius: 8px; background: var(--line); font-size: 12px; font-weight: 600; }
.sections { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 22px; }
.sections h2 { margin: 0 0 8px 4px; }
.group { background: var(--card); border-radius: 16px; overflow: hidden; }
.group.padded { padding: 16px; }
.group > * + * { border-top: 1px solid var(--line); }
.group.padded > * + * { border-top: 0; }
.hint { margin: 8px 4px 0; font-size: 12px; color: var(--muted); }
.subbar { display: flex; align-items: center; gap: 2px; padding: 10px 12px 0 6px; }
.subbar .crumb { font-size: 14px; color: var(--muted); }
.subtitle { padding: 6px 20px 2px; font: 600 26px var(--serif); text-wrap: balance; }
.lede { padding: 4px 20px 0; font-size: 14px; color: var(--muted); }
.nav-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 14px; background: transparent; border: 0; text-align: left; cursor: pointer; }
.nav-row .ic { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.nav-row .ic svg { width: 20px; height: 20px; }
.nav-row .tx { flex: 1; min-width: 0; }
.nav-row b { display: block; font-size: 15px; font-weight: 600; }
.nav-row small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.nav-row > span:last-child { width: 18px; height: 18px; color: var(--muted); flex: none; }
.nav-row > span:last-child svg { width: 18px; height: 18px; }
.sw-row { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px; cursor: pointer; }
.sw-row .t { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; }
.sw-row .t small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }
.switch { position: relative; width: 46px; height: 28px; flex: none; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.switch .tr { position: absolute; inset: 0; border-radius: 14px; background: var(--line-strong); transition: background .18s; pointer-events: none; }
.switch .tr::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s cubic-bezier(.3,1.3,.5,1); }
.switch input:checked + .tr { background: var(--accent); }
.switch input:checked + .tr::after { transform: translateX(18px); }
.switch input:focus-visible + .tr { outline: 2px solid var(--accent); outline-offset: 2px; }
.act { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 0 16px; background: transparent; border: 0; text-align: left; font-size: 15px; font-weight: 500; cursor: pointer; }
.act svg { width: 20px; height: 20px; color: var(--muted); }
.act.danger, .act.danger svg { color: var(--accent); }
.info-line { padding: 14px 16px; font-size: 13px; color: var(--muted); }
.foot-card { font-size: 13px; color: var(--muted); line-height: 1.55; }
.foot-card a { color: inherit; }
.select { width: 100%; min-height: 48px; border-radius: 12px; border: 1.5px solid var(--outline); background: var(--card); color: var(--ink); padding: 0 12px; font: 500 15px var(--ui); }
.field-label { display: block; margin: 12px 0 6px; font-size: 13px; color: var(--muted); }
.foot { padding: 0 20px 20px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.foot a { color: inherit; }
.version { margin-top: 2px; font-size: 12px; color: var(--muted); }
.stat-big { display: flex; align-items: baseline; gap: 16px; }
.stat-big .n { font: 600 56px/1 var(--serif); }
.bars { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.bar { display: flex; align-items: center; gap: 12px; min-height: 32px; font-size: 14px; }
.bar .lab { width: 124px; flex: none; }
.bar .track { flex: 1; height: 10px; border-radius: 5px; background: var(--line); }
.bar .track > div { height: 100%; border-radius: 5px; background: var(--ink); }
.bar .pct { width: 44px; text-align: right; font-weight: 600; }
.bar.weak .lab, .bar.weak .pct { color: var(--accent); font-weight: 600; }
.bar.weak .track > div { background: var(--accent); }
.li { display: flex; align-items: center; justify-content: space-between; min-height: 40px; border-bottom: 1px solid var(--line); font-size: 14px; }
.li:last-child { border-bottom: 0; }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 64px; margin-top: 12px; }
.spark div { flex: 1; background: var(--ink); border-radius: 3px 3px 0 0; min-height: 3px; }
.empty { color: var(--muted); font-size: 14px; padding: 8px 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (min-width: 560px) { body { padding: 16px 0; } #app { min-height: calc((100dvh - 32px) / var(--zoom, 1)); border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-strong); } }

/* ===== Übergänge (1.15.0): Ansichten gleiten ineinander. View Transitions API, sonst Rückfall per CSS-Animation. Alles nur ohne „Bewegung reduzieren“. ===== */
@media (prefers-reduced-motion: no-preference) {
  #app { view-transition-name: app; }
  ::view-transition-group(app) { animation-duration: .34s; animation-timing-function: cubic-bezier(.22,.8,.3,1); }
  ::view-transition-old(app), ::view-transition-new(app) { animation-duration: .34s; animation-timing-function: cubic-bezier(.22,.8,.3,1); animation-fill-mode: both; }
  html[data-dir="forward"]::view-transition-old(app) { animation-name: outL; }
  html[data-dir="forward"]::view-transition-new(app) { animation-name: inR; }
  html[data-dir="back"]::view-transition-old(app) { animation-name: outR; }
  html[data-dir="back"]::view-transition-new(app) { animation-name: inL; }
  html[data-dir="fade"]::view-transition-old(app) { animation-name: fadeOut; }
  html[data-dir="fade"]::view-transition-new(app) { animation-name: fadeIn; }
  html[data-dir="up"]::view-transition-old(app) { animation-name: fadeOut; animation-duration: .18s; }
  html[data-dir="up"]::view-transition-new(app) { animation-name: inUp; animation-duration: .38s; }
  #app[data-enter="forward"] > * { animation: inR .34s cubic-bezier(.22,.8,.3,1) both; }
  #app[data-enter="back"] > * { animation: inL .34s cubic-bezier(.22,.8,.3,1) both; }
  #app[data-enter="fade"] > * { animation: fadeIn .25s ease-out both; }
  #app[data-enter="up"] > * { animation: inUp .35s cubic-bezier(.22,.8,.3,1) both; }
  @keyframes outL { to { opacity: 0; transform: translateX(-28px); } }
  @keyframes inR { from { opacity: 0; transform: translateX(44px); } }
  @keyframes outR { to { opacity: 0; transform: translateX(28px); } }
  @keyframes inL { from { opacity: 0; transform: translateX(-44px); } }
  @keyframes inUp { from { opacity: 0; transform: translateY(20px); } }
  @keyframes fadeOut { to { opacity: 0; } }
}


/* Splash-Screens (Einstieg und Abschluss): dunkel mit rotem Akzent, in beiden Modi gleich */
.splash { --sp: #14161A; --sp-accent: #E5767A; --sp-btn: #B3282D; --sp-muted: #B9BEC5; flex: 1; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% 0%, var(--sp-glow, #2A1618) 0%, var(--sp) 62%); color: #F2F3F4; padding: calc(28px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); }
.splash-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.splash h1 { font: 700 46px/1.05 var(--display); letter-spacing: 1px; }
.splash .lead { font: 600 21px/1.35 var(--serif); }
.splash .sub, .splash .facts, .splash .tip { font-size: 16px; line-height: 1.5; color: var(--sp-muted); }
.splash .tip { font-weight: 600; color: #fff; }
.logo.big { width: 64px; height: 64px; border-radius: 16px; background: var(--sp-btn); color: #fff; font-size: 26px; }
.points { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.points li { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 3px solid var(--sp-accent); }
.points b { font-size: 16px; }
.points span { font-size: 15px; line-height: 1.45; color: var(--sp-muted); }
.splash-cta { padding-top: 20px; }
.splash-cta > p { margin-top: 14px; text-align: center; font: italic 15px var(--serif); color: var(--sp-muted); }
.btn.light { background: var(--sp-btn); color: #fff; }
.btn.ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.link-light { min-height: 44px; padding: 0 8px; background: transparent; border: 0; color: #fff; font: 500 15px var(--ui); text-decoration: underline; cursor: pointer; }
.splash .split { display: flex; justify-content: center; gap: 24px; }
.splash .again { margin-top: 6px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.07); }
.splash .again .eyebrow { color: var(--sp-muted); }
.splash .again p { margin-top: 6px; font-size: 18px; line-height: 1.6; }
.splash.end .splash-body { align-items: center; text-align: center; }
.splash.end .again { text-align: left; align-self: stretch; }
.ring { position: relative; width: 168px; height: 168px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring .bg { stroke: rgba(255,255,255,.12); }
.ring .fg { stroke: var(--sp-accent); stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--o); }
.ring .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 44px var(--serif); }
@media (prefers-reduced-motion: no-preference) {
  .ring .fg { animation: ring 1.1s .15s ease-out both; }
  .splash h1.pop { animation: pop .5s .35s cubic-bezier(.2,1.4,.4,1) both; }
  .splash.intro .splash-body > * { animation: rise .5s both; }
  .splash.intro .splash-body > :nth-child(2) { animation-delay: .08s; }
  .splash.intro .splash-body > :nth-child(3) { animation-delay: .16s; }
  .splash.intro .splash-body > :nth-child(4) { animation-delay: .24s; }
  .splash.intro .splash-body > :nth-child(5) { animation-delay: .32s; }
  @keyframes ring { from { stroke-dashoffset: var(--c); } }
  @keyframes pop { from { transform: scale(.7); opacity: 0; } }
  @keyframes rise { from { transform: translateY(12px); opacity: 0; } }
}

.splash-cta { position: sticky; bottom: 0; background: var(--sp); padding-bottom: 8px; margin: 0 -24px calc(-24px - env(safe-area-inset-bottom)); padding-left: 24px; padding-right: 24px; }

.splash-body { padding-bottom: 16px; gap: 10px; }
.splash.intro h1 { font-size: 40px; }
.splash.intro .points { gap: 10px; margin-top: 4px; }
.splash.intro .sub { font-size: 15px; }

/* Logo-Bilder (Icon) */
.logo-img { display: block; border-radius: 22%; flex: none; box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.logo-img.big { width: 72px; height: 72px; }

/* Splash beim Start: Büste mit Marmortafel, der Spruch wird Buchstabe für Buchstabe eingemeißelt (Endzustand = Standard, Bewegung nur ohne „reduzieren“) */
.splash.boot { align-items: center; justify-content: space-between; text-align: center; cursor: pointer; position: relative; overflow: hidden; background: radial-gradient(90% 55% at 50% 38%, #4a1a1d 0%, #1b1214 55%, var(--sp) 100%); }
.boot-title { font: 700 20px/1.2 var(--display); letter-spacing: 3px; padding-top: 6px; }
.boot-skip { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 14px; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: #8d939b; }
.boot-stage { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.boot-logo { display: block; width: min(100%, 360px); height: auto; aspect-ratio: 1; transform: scale(1.04); transform-origin: 50% 80%; filter: drop-shadow(0 10px 24px rgba(0,0,0,.5)); }
.boot-tablet {
  position: relative; width: 100%; margin-top: -48px; padding: 22px 18px 18px; border-radius: 14px; color: #3b342b;
  background: linear-gradient(160deg, #E2D9C6 0%, #C9BEA8 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45), inset 0 -6px 12px rgba(0,0,0,.18), 0 14px 30px rgba(0,0,0,.5);
}
.boot-tablet::before { content: ""; position: absolute; left: 50%; top: -12px; margin-left: -11px; width: 22px; height: 22px; background: #E2D9C6; transform: rotate(45deg); border-radius: 3px; }
.boot-la { position: relative; font: 700 23px/1.35 var(--display); letter-spacing: 1.2px; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 -1px 0 rgba(0,0,0,.18); }
.boot-w { display: inline-block; white-space: nowrap; margin: 0 .18em; }
.boot-w > span { display: inline-block; }
.boot-dust { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(226,217,198,.85); opacity: 0; pointer-events: none; }
.boot-bar { margin-top: 18px; width: 140px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.boot-bar > div { height: 100%; width: 100%; background: var(--sp-accent); transform-origin: left; transform: scaleX(1); }
.boot-foot { font-size: 12px; color: var(--sp-muted); padding-top: 12px; }
@keyframes bar { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .boot-title { animation: fadeIn .4s .05s both; }
  .boot-skip { animation: fadeIn .3s .5s both; }
  .boot-logo { animation: fadeIn .5s both, bootZoom 1.5s ease-out both; }
  .boot-tablet { animation: bootPop .35s .25s cubic-bezier(.2,1.3,.4,1) both; }
  .boot-w > span { animation: bootChisel .22s var(--d, 1s) ease-out both; }
  .boot-bar > div { transform: scaleX(0); animation: bar var(--dur, 3400ms) linear forwards; }
  @keyframes fadeIn { from { opacity: 0; } }
  @keyframes bootZoom { from { transform: scale(.92); } to { transform: scale(1.04); } }
  @keyframes bootPop { from { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } }
  @keyframes bootChisel { from { opacity: 0; transform: scale(1.5); } }
}

/* Abschluss: grün ab 50 % richtig, sonst rot (beide dunkel) */
.splash.end.good { --sp-glow: #123A27; --sp-accent: #6FD99A; --sp-btn: #1E7F46; }
.splash.end.bad { --sp-glow: #2A1618; --sp-accent: #E5767A; --sp-btn: #B3282D; }

.splash h1 .gloss { display: block; margin-top: 8px; font: 500 20px var(--serif); letter-spacing: 0; color: var(--sp-muted); }

/* Auflösung: „Richtig“ / „Nicht richtig“ wird beim ersten Zeigen animiert (Banner, Symbol zeichnet sich, grün glüht, falsch wackelt) */
.banner svg { overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .banner.fresh { animation: bannerIn .45s cubic-bezier(.2,1.3,.4,1) both; }
  .banner.fresh.ok { animation: bannerIn .45s cubic-bezier(.2,1.3,.4,1) both, glow 1.1s .25s ease-out; }
  .banner.fresh.bad, .banner.fresh.part { animation: bannerIn .35s ease-out both, shake .45s .2s; }
  .banner.fresh svg { animation: iconPop .55s .1s cubic-bezier(.2,1.5,.4,1) both; }
  .banner.fresh svg circle, .banner.fresh svg path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .45s .15s ease-out forwards; }
  .banner.fresh svg path { animation-delay: .5s; animation-duration: .35s; }
  .banner.fresh svg path + path { animation-delay: .65s; }
  .banner.fresh b, .banner.fresh small { animation: fadeUp .4s .3s both; }
  @keyframes bannerIn { from { transform: translateY(-14px) scale(.96); opacity: 0; } }
  @keyframes iconPop { from { transform: scale(.4) rotate(-20deg); } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes glow { from { box-shadow: 0 0 0 0 rgba(111,217,154,.6); } to { box-shadow: 0 0 0 22px rgba(111,217,154,0); } }
  @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } }
}

/* Modus-Auswahl (Exercitatio / Certamen) */
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.seg .chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; }
.seg .chip b { font: 600 16px var(--ui); }
.seg .chip small { font-size: 12px; font-weight: 400; opacity: .85; }
.seg-note { padding: 10px 0 0; }

/* Certamen: Timer-Balken im Quiz */
.timer { margin: 10px 20px 0; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.timer .tlabel { font-weight: 600; letter-spacing: .5px; text-transform: uppercase; font-size: 12px; color: var(--muted); }
.timer .ttrack { flex: 1; height: 8px; border-radius: 4px; background: var(--line-strong); overflow: hidden; }
.timer .ttrack > div { height: 100%; border-radius: 4px; background: var(--ok); }
.timer .tsec { width: 38px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.timer.low .ttrack > div { background: var(--accent); }
.timer.low .tsec { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .timer.low .tsec { animation: pulse .5s ease-in-out infinite alternate; } @keyframes pulse { to { transform: scale(1.18); } } }

/* Einstieg: Logo und Titel nebeneinander, passt auf eine Bildschirmhöhe; bei wenig Platz entfallen die Nebentexte */
.intro-head { display: flex; align-items: center; gap: 14px; }
.intro-head .logo-img.big { width: 64px; height: 64px; }
.splash.intro h1 { font-size: 34px; }
.splash.intro .splash-body { justify-content: flex-start; gap: 12px; padding-top: 6px; }
.splash.intro .lead { font-size: 19px; }
.splash.intro .points { margin-top: 2px; gap: 10px; }
.splash.intro .points li { gap: 0; }
@media (max-height: 760px) {
  .splash.intro .sub { display: none; }
  .splash.intro .splash-cta > p { display: none; }
}
@media (max-height: 600px) {
  .splash.intro .points li span { display: none; }
  .splash.intro .points { gap: 8px; }
}

.splash.intro .splash-body { justify-content: center; }

/* Startseite: Inhalt mittig (waagerecht und senkrecht zwischen Kopf und Navigation) */
.view.start .start-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 8px; }
.view.start .brand { justify-content: center; padding: 20px 24px 0; }
.view.start .hero { text-align: center; padding: 20px 24px 0; }
.view.start .hero h1 { font-size: 40px; }
.view.start .hero .sub { margin-top: 12px; font-size: 18px; }
.view.start .rows { margin-top: 20px; }

/* ===== Moderne Smartphones (6,1–6,7 Zoll, ca. 360–430 px Breite) ===== */
/* Startseite: kompakter Kopf, eine Zeile Fuß */
.view.start .start-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 20px 0; text-align: center; }
.view.start .start-head h1 { font: 700 30px/1.05 var(--display); letter-spacing: 1px; }
.view.start .kicker { display: block; margin-top: 4px; font: 600 11px var(--display); letter-spacing: 2px; color: var(--muted); }
.view.start .start-sub { margin: 10px 24px 0; text-align: center; font: 17px/1.35 var(--serif); color: var(--muted); }
.view.start .rows { margin-top: 16px; }
.view.start .row { min-height: 48px; }
.view.start .foot-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 4px 20px 0; font-size: 12px; color: var(--muted); }
.view.start .foot-line .link { min-height: 36px; font-size: 12px; }
.view.start .seg .chip { min-height: 54px; }
@media (max-height: 800px) { .view.start .rows .head { display: none; } }
@media (max-height: 700px) { .view.start .start-sub { display: none; } .view.start .row { min-height: 44px; } }

/* Quiz: Felder dichter, „Prüfen“ immer sichtbar */
.fields { gap: 12px; padding-top: 14px; }
.fields .eyebrow { margin-bottom: 6px; }
.pair { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; }
.compact .grid { gap: 6px; }
.compact .grid .chip { min-height: 44px; font-size: 14px; padding: 0 4px; }
.formcard { margin-top: 12px; padding: 16px 16px 14px; }
.formcard .form b { font-size: 46px; }
.posrow { margin-top: 6px; min-height: 32px; }
.cta { position: sticky; bottom: 0; z-index: 5; padding: 10px 20px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 70%, transparent); }
.splash-cta { z-index: 5; }
@media (max-height: 740px) { .formcard .form b { font-size: 40px; } .formcard { padding: 12px 14px 10px; } .formcard .eyebrow { display: none; } }
@media (min-width: 410px) { .compact .grid .chip { font-size: 15px; } }

.view.start .foot-line a { color: inherit; text-decoration: underline; margin: 0 .25em; }

/* Handys mit sichtbarer Höhe bis 840 px: Quiz dichter */
@media (max-height: 840px) {
  .topbar { padding-top: 4px; }
  .iconbtn { height: 40px; }
  .formcard { margin-top: 8px; padding: 8px 12px; }
  .formcard .form { margin-top: 0; }
  .formcard .form b { font-size: 40px; }
  .posrow { margin-top: 2px; min-height: 28px; }
  .posrow .link { min-height: 36px; }
  .fields { gap: 8px; padding-top: 8px; }
  .fields .eyebrow { margin-bottom: 4px; font-size: 11px; }
  .cta { padding-top: 8px; }
  .cta .btn { min-height: 52px; }
}
@media (max-height: 700px) { .formcard .form b { font-size: 34px; } }

.pair .chip { font-size: 13px; padding: 0 2px; }

/* ===== Lernbereich und Hilfe ===== */
.titlebar .learn-icon { color: var(--accent); width: 48px; height: 48px; margin-top: 18px; }
.eyerow { display: flex; align-items: center; gap: 8px; }
.qhelp { width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1.5px solid var(--outline); background: transparent; color: var(--muted); font: 700 12px var(--ui); cursor: pointer; position: relative; }
.qhelp::after { content: ""; position: absolute; inset: -10px; }
.review-btn { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.review-btn svg { width: 20px; height: 20px; }

/* Liste (auch für das Änderungsprotokoll) */
.learn-list { padding: 14px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.topic { background: var(--card); border-radius: 16px; overflow: hidden; }

/* Übersicht: Kopf, Kachel-Raster mit römischen Ziffern, Tipp */
.learn-head { padding: 4px 20px 0; }
.learn-head h1 { margin-top: 2px; font: 600 32px/1.1 var(--serif); }
.learn-head p { margin-top: 8px; font: 16px/1.45 var(--serif); color: var(--muted); }
.learn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 20px 20px 0; }
.topic-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 140px; padding: 14px; border: 0; border-radius: 18px;
  background: var(--card); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 1px 0 var(--line-strong); transition: transform .12s ease-out;
}
.topic-tile:active { transform: scale(.97); }
.topic-tile.wide { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.topic-tile.wide .tile-num { grid-row: 1 / span 3; margin: 0; width: 52px; height: 52px; font-size: 18px; }
.topic-tile.wide .tc { padding-top: 4px; }
.tile-num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; margin-bottom: 8px;
  border-radius: 12px; background: var(--accent-soft); color: var(--accent); font: 700 15px var(--display); letter-spacing: 1px; flex: none;
}
.topic-tile .tt { font: 600 17px/1.2 var(--serif); }
.topic-tile .ts { font-size: 13px; line-height: 1.35; color: var(--muted); }
.topic-tile .tc { margin-top: auto; padding-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--accent); }
.learn-tip { margin: 16px 20px 24px; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed var(--line-strong); font-size: 14px; line-height: 1.45; color: var(--muted); }
.learn-tip > span { flex: none; color: var(--accent); }
.learn-tip svg { width: 20px; height: 20px; }
.learn-tip .q { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--outline); font-size: 11px; color: var(--ink); vertical-align: 1px; }

/* Themenseite: Kopf, Sprungleiste zu den Karten, Karten, „Weiter“ */
.topic-head { display: flex; align-items: center; gap: 14px; padding: 6px 20px 0; }
.topic-head .tile-num { margin: 0; width: 52px; height: 52px; font-size: 18px; border-radius: 14px; }
.topic-head h1 { font: 600 26px/1.15 var(--serif); }
.topic-head p { margin-top: 3px; font-size: 14px; color: var(--muted); }
.card-jump { position: sticky; top: 0; z-index: 4; display: flex; gap: 8px; overflow-x: auto; padding: 14px 20px 10px; background: var(--bg); scrollbar-width: none; }
.card-jump::-webkit-scrollbar { display: none; }
.card-jump .chip { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border-width: 1px; font-size: 13px; }
.topic-cards { display: flex; flex-direction: column; gap: 14px; padding: 4px 20px 0; }
.topic-head + .topic-cards { padding-top: 18px; }
.next-topic {
  margin: 18px 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 12px 18px;
  border: 0; border-radius: 16px; background: var(--ink); color: var(--on-ink); text-align: left; cursor: pointer;
}
.next-topic .eyebrow { display: block; color: inherit; opacity: .7; }
.next-topic b { display: block; margin-top: 2px; font: 600 19px var(--serif); }
.next-topic svg { width: 24px; height: 24px; }
.next-done { margin: 18px 20px 24px; width: auto; }

/* Erklärkarte */
.lcard { background: var(--card); border-radius: 18px; padding: 18px 16px; scroll-margin-top: 72px; }
.lcard > * + * { margin-top: 14px; }
.lcard h3 { font: 600 20px/1.25 var(--serif); }
.lcard h3::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 10px; border-radius: 2px; background: var(--accent); }
.lintro { font: 16px/1.45 var(--serif); color: var(--muted); }
.lrows { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; margin-bottom: 0; }
.lrows dt, .lrows dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.lrows dt:first-of-type, .lrows dt:first-of-type + dd { border-top: 0; padding-top: 0; }
.lrows dt { max-width: 8.5em; font-size: 14px; font-weight: 600; line-height: 1.5; }
.lrows dd { font-size: 15px; line-height: 1.45; }
@media (max-width: 340px) { .lrows { grid-template-columns: minmax(0, 1fr); } .lrows dd { border-top: 0; padding-top: 0; } }
.ltable { margin-left: 0; margin-right: 0; }
.ltable figcaption { margin-bottom: 6px; }
.tscroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.ltable table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.35; }
.ltable th, .ltable td { padding: 8px 10px; text-align: left; vertical-align: top; }
.ltable thead th { background: var(--bg); font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ltable tbody tr + tr > * { border-top: 1px solid var(--line); }
.ltable tbody th { font-weight: 600; white-space: nowrap; }
.ltable.dense th, .ltable.dense td { padding: 7px 5px; text-align: center; }
.ltable.dense th:first-child { padding-left: 10px; text-align: left; }
.ltable.dense thead th { text-transform: none; font-size: 13px; letter-spacing: 0; }
.tnote { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.la { font-family: var(--serif); font-size: 1.05em; }
.ending { padding: 0 4px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); font: 600 1.02em var(--serif); white-space: nowrap; }
.ltable td .ending, .merke .ending { padding: 0; background: none; }
.merke { padding: 12px 14px 12px 16px; border-radius: 12px; border-left: 4px solid var(--accent); background: var(--accent-soft); }
.merke .eyebrow { font-size: 11px; color: var(--accent); }
.merke p { margin-top: 4px; font-size: 14px; line-height: 1.5; }
.ex .eyebrow { font-size: 11px; }
.ex-grid { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ex-grid li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.ex-grid b { font: 600 19px/1.2 var(--serif); overflow-wrap: anywhere; }
.ex-grid span { font-size: 12px; line-height: 1.35; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .topic-tile { animation: rise .4s both; animation-delay: calc(var(--i) * 40ms); }
  .topic-cards > .lcard { animation: rise .35s both; }
}

/* Fenster von unten (Hilfe, Hinweis) */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.sheet { position: relative; width: 100%; max-width: 520px; max-height: calc(82dvh / var(--zoom, 1)); overflow: auto; background: var(--card); color: var(--ink); border-radius: 22px 22px 0 0; padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); }
.sheet h2 { font: 600 22px var(--serif); margin: 6px 0 8px; }
.whatsnew { margin-bottom: 12px; font-size: 15px; line-height: 1.45; }
.whatsnew ul { margin: 4px 0 0 18px; }
.whatsnew li { margin-bottom: 4px; }
.sheet > .link { display: block; margin: 10px auto 0; }
.sheet p { font-size: 15px; line-height: 1.5; margin-bottom: 14px; }
.sheet-icon { width: 40px; height: 40px; color: var(--accent); }
.sheet-icon svg { width: 100%; height: 100%; }
.sheet.help .lcard { padding: 6px 0 0; border-radius: 0; background: none; }
.sheet.help > .eyebrow { margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) { .sheet { animation: sheetUp .25s ease-out; } @keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } } }

.eyerow .qhelp { margin: -6px 0; }

/* Startseite: alles mittig, Fuß in drei Zeilen (Quelle, Was kann die App?, Version/Neuerungen) */
.view.start .foot-lines { display: flex; flex-direction: column; align-items: center; padding: 2px 20px 0; font-size: 12px; color: var(--muted); text-align: center; }
.view.start .foot-lines .link { min-height: 32px; font-size: 13px; }
.view.start .foot-lines .link.ver { color: var(--muted); font-size: 12px; text-decoration-style: dotted; }
.view.start .foot-lines a { color: inherit; text-decoration: underline; }
.changes { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.changes li + li { margin-top: 4px; }
@media (max-height: 800px) { .view.start .start-head .logo-img { width: 44px; height: 44px; } .view.start .start-head h1 { font-size: 28px; } }
@media (max-height: 720px) { .view.start .kicker { display: none; } }

/* Einstellungen: zwei Kacheln über der Navigation */
.dock { position: sticky; bottom: 0; z-index: 6; margin-top: auto; background: var(--card); border-top: 1px solid var(--line-strong); }
.dock .nav { position: static; margin-top: 0; border-top: 0; padding-top: 2px; }
.save-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px 14px 6px; }
.save-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 58px; padding: 8px 6px;
  border: 0; border-radius: 14px; background: var(--line); color: var(--ink); cursor: pointer; transition: transform .1s ease-out, background .18s;
}
.save-tile:active { transform: scale(.97); }
.save-tile svg { width: 20px; height: 20px; }
.save-tile b { font: 600 14px/1.2 var(--ui); }
.save-tile small { font-size: 11px; color: var(--muted); }
.save-tile.primary { background: var(--accent-soft); color: var(--accent); }
.save-tile.primary small { color: var(--accent); opacity: .8; }
.save-tile.saved { background: var(--accent-soft); color: var(--ok); }
.save-tile.saved small { color: var(--ok); }
.save-tile:disabled { background: var(--line); color: var(--muted); opacity: .6; cursor: default; }
.save-tile:disabled small { color: var(--muted); }

/* Gezielte Übung, Schwächste Bereiche, Nachlesen */
.focus-tag { margin: 8px 20px 0; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; }
.weak-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.weak-row:last-child { border-bottom: 0; }
.weak-t b { display: block; font-size: 15px; }
.weak-t span { font-size: 12px; color: var(--muted); }
.weak-act { display: flex; gap: 6px; flex: none; }
.mini { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--outline); background: transparent; color: var(--ink); font: 600 13px var(--ui); cursor: pointer; }
.mini.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.miss-btn { margin-top: 10px; min-height: 44px; font-size: 14px; justify-content: flex-start; text-align: left; }
.tip-link { margin-top: -4px; font-weight: 600; text-decoration: none; }

/* App installieren */
.install-banner { position: fixed; z-index: 7; left: 50%; transform: translateX(-50%); width: min(calc(100% - 28px), 492px); bottom: calc(82px + env(safe-area-inset-bottom)); padding: 8px 8px 8px 10px; display: flex; align-items: center; gap: 10px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-strong); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.install-banner img { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.install-banner .it { flex: 1; min-width: 0; line-height: 1.25; }
.install-banner .it b { display: block; font-size: 14px; }
.install-banner .it small { font-size: 12px; color: var(--muted); }
.iconbtn.small { width: 36px; height: 36px; flex: none; color: var(--muted); font-size: 16px; }
.steps { margin: 0 0 16px; padding-left: 22px; font-size: 15px; line-height: 1.5; } .steps li + li { margin-top: 6px; }

/* Satz zuerst, Tagesziel, Rekorde */
.ctx-card { margin: 10px 20px 0; padding: 12px 14px; }
.ctx-card .ctx-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.ctx-card .text { margin-top: 6px; font: 16px/1.45 var(--serif); }
.ctx-card mark { background: var(--accent-soft); color: inherit; border-bottom: 2px solid var(--accent); padding: 0 2px; font-weight: 600; }
.compact .ctx-card { margin-top: 6px; padding: 8px 12px; }
.compact .ctx-card .text { font-size: 15px; line-height: 1.4; }

.goal-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font: 600 13px var(--ui); cursor: pointer; position: relative; }
.goal-chip::after { content: ""; position: absolute; inset: -6px -2px; } /* Tippfläche mind. 44 px hoch */
.goal-chip svg { width: 22px; height: 22px; display: block; transform: rotate(-90deg); }
.goal-chip circle { fill: none; stroke-width: 3.4; }
.goal-chip .bg { stroke: var(--line-strong); }
.goal-chip .fg { stroke: var(--accent); stroke-linecap: round; }
.goal-chip.done .fg { stroke: var(--ok); }
.goal-chip.done { border-color: var(--ok); }
.goal-note { margin: 10px 20px 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--ok); color: var(--ok); font-size: 13px; font-weight: 600; }
.goal-note svg { width: 20px; height: 20px; flex: none; }

.wbars { position: relative; display: flex; align-items: flex-end; gap: 8px; height: 100px; margin: 22px 0 6px; padding-bottom: 20px; }
.wbars .wcol { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.wbars .wbar { width: 100%; border-radius: 4px 4px 0 0; background: var(--muted); opacity: .55; }
.wbars .wcol.ok .wbar { background: var(--ok); opacity: 1; }
.wbars .wcol span { position: absolute; bottom: -20px; font-size: 11px; color: var(--muted); }
.wbars .wgoal { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--accent); pointer-events: none; }
.rec-li small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.rec-li { align-items: flex-start; padding: 6px 0; min-height: 44px; }

.splash .record { margin-top: -2px; font: 600 16px var(--ui); color: #E3B04B; }
.splash .record:empty { display: none; }
.goal-chip { min-height: 32px; font-size: 12.5px; }

/* ===== Animationen (1.15.0) ===== */
.banner, .goal-note { position: relative; }
.splash-body { position: relative; }
.spark-dot { position: absolute; z-index: 3; width: 6px; height: 6px; border-radius: 50%; background: #E3B04B; pointer-events: none; box-shadow: 0 0 6px rgba(227,176,75,.8); }
.streak-pill { margin-left: auto; flex: none; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.22); font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.splash .record.fresh { color: #F5C860; }
@media (prefers-reduced-motion: no-preference) {
  /* Fortschrittsbalken und Tagesziel füllen sich von ihrem alten Stand */
  .progress > div { animation: grow .6s ease-out both; }
  @keyframes grow { from { width: var(--from, 0%); } }
  .goal-chip .fg { animation: goalFill .9s .2s ease-out both; }
  @keyframes goalFill { from { stroke-dashoffset: var(--from); } }
  .goal-chip.done { animation: chipPop .5s .9s cubic-bezier(.2,1.4,.4,1); }
  @keyframes chipPop { 50% { transform: scale(1.08); } }
  .wbars .wbar { transform-origin: bottom; animation: barUp .6s ease-out both; }
  .wbars .wcol:nth-child(2) .wbar { animation-delay: .04s; } .wbars .wcol:nth-child(3) .wbar { animation-delay: .08s; }
  .wbars .wcol:nth-child(4) .wbar { animation-delay: .12s; } .wbars .wcol:nth-child(5) .wbar { animation-delay: .16s; }
  .wbars .wcol:nth-child(6) .wbar { animation-delay: .2s; } .wbars .wcol:nth-child(7) .wbar { animation-delay: .24s; }
  .wbars .wcol:nth-child(8) .wbar { animation-delay: .28s; }
  @keyframes barUp { from { transform: scaleY(0); } }
  .bar .track > div { transform-origin: left; animation: barRight .7s ease-out both; }
  @keyframes barRight { from { transform: scaleX(0); } }
  .goal-note.fresh { animation: noteIn .5s .35s cubic-bezier(.2,1.4,.4,1) both; }
  @keyframes noteIn { from { opacity: 0; transform: scale(.85) translateY(-6px); } }
  .streak-pill { animation: pillPop .5s .5s cubic-bezier(.2,1.6,.4,1) both; }
  @keyframes pillPop { from { opacity: 0; transform: scale(.4); } }
  .splash .record.fresh { animation: recFlash 1.2s ease-out; }
  @keyframes recFlash { 0% { transform: scale(.9); text-shadow: 0 0 0 rgba(245,200,96,0); } 30% { transform: scale(1.12); text-shadow: 0 0 16px rgba(245,200,96,.9); } 100% { transform: scale(1); text-shadow: 0 0 0 rgba(245,200,96,0); } }
  /* Abschlussbild baut sich gestaffelt auf */
  .splash.end .splash-body > :not(.ring):not(h1) { animation: rise .5s both; animation-delay: calc(.5s + var(--k, 0) * .09s); }
  .splash.end .splash-body > :nth-child(3) { --k: 1; } .splash.end .splash-body > :nth-child(4) { --k: 2; }
  .splash.end .splash-body > :nth-child(5) { --k: 3; } .splash.end .splash-body > :nth-child(6) { --k: 4; }
  .splash.end .splash-body > :nth-child(7) { --k: 5; } .splash.end .splash-body > :nth-child(8) { --k: 6; }
  .splash.end .splash-body > :nth-child(9) { --k: 7; }
  .splash.end .splash-cta > * { animation: rise .5s both; animation-delay: calc(.9s + var(--k, 0) * .08s); }
  .splash.end .splash-cta > :nth-child(2) { --k: 1; } .splash.end .splash-cta > :nth-child(3) { --k: 2; }
  /* Knöpfe mit Druckgefühl */
  .btn, .chip, .row, .mini, .link-light, .next-topic, .goal-chip, .nav button { transition: transform .1s ease-out, background-color .18s, border-color .18s, color .18s; }
  .btn:active:not(:disabled), .chip:active, .row:active, .mini:active, .next-topic:active, .goal-chip:active, .nav-row:active, .act:active { transform: scale(.96); }
  .nav button:active { transform: scale(.92); }
  /* Fenster: weich ein- und ausblenden */
  .sheet-backdrop { animation: fadeIn .25s ease-out both; }
  .sheet-wrap.closing .sheet-backdrop { animation: fadeOut .2s ease-in both; }
  .sheet-wrap.closing .sheet { animation: sheetDown .2s ease-in both; }
  @keyframes sheetDown { to { transform: translateY(48px); opacity: 0; } }
  .save-tile.saved { animation: chipPop .4s cubic-bezier(.2,1.4,.4,1); }
}