/* Redefluss
 *
 * Gestaltungsregeln, die überall gelten:
 * - Jede Karte ist ein Plakat. Ihre Kategorie bringt eine Farbwelt (.welt) und eine generierte
 *   Grafik (kunst.js) mit. Farbe gehört dem Inhalt; die Bedienung bleibt warmes Off-Weiß auf Dunkel.
 * - Feste Bedeutung haben nur Grün und Rot für richtig und falsch, immer mit Symbol und Text.
 * - Rundungen: Knöpfe und Etiketten als Pille, Flächen 18px, Eingabefelder 12px.
 * - Schrift: Bricolage Grotesque, schmal gestellt, für alles Plakative; Instrument Sans zum Lesen.
 * - Bewegung nur über transform und opacity, Bedienung unter 300 ms, Kurven siehe --ease-*.
 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin-ext-standard-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --bg: oklch(0.16 0.012 70);
  --flaeche: oklch(0.21 0.013 70);
  --flaeche-2: oklch(0.265 0.014 70);
  --linie: oklch(0.36 0.012 70);
  --linie-stark: oklch(0.58 0.012 70);
  --text: oklch(0.965 0.012 85);
  --text-2: oklch(0.87 0.012 85);
  --leise: oklch(0.75 0.014 80);
  --gut: oklch(0.84 0.16 150);
  --schlecht: oklch(0.77 0.15 25);
  --glas: oklch(1 0 0 / 0.09);
  --glas-rand: oklch(1 0 0 / 0.16);

  --h: 70;
  --h2: 250;

  --display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --lauf: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-flaeche: 18px;
  --r-feld: 12px;
  --spalte: 480px;
  --kopf-h: 56px;
  --dock-h: 62px;
  --rand: 22px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Farbwelt einer Kategorie. Wird dort berechnet, wo --h und --h2 gesetzt sind. */
.welt, .punkt {
  --w-bg: oklch(0.25 0.075 var(--h));
  --w-bg-weich: oklch(0.25 0.075 var(--h) / 0.9);
  --w-tief: oklch(0.17 0.055 var(--h));
  --w-tief-weich: oklch(0.17 0.055 var(--h) / 0.78);
  --c1: oklch(0.32 0.1 var(--h));
  --c2: oklch(0.44 0.15 var(--h));
  --c3: oklch(0.86 0.13 var(--h));
  --c4: oklch(0.88 0.15 var(--h2));
  --w-text: oklch(0.975 0.015 var(--h));
  --w-text-2: oklch(0.9 0.028 var(--h));
  --w-leise: oklch(0.8 0.045 var(--h));
  --kat: var(--c3);
}
.welt.neutral {
  --w-bg: oklch(0.185 0.014 70);
  --w-bg-weich: oklch(0.185 0.014 70 / 0.9);
  --w-tief: oklch(0.14 0.012 70);
  --w-tief-weich: oklch(0.14 0.012 70 / 0.78);
  --c3: var(--text);
  --w-text: var(--text);
  --w-text-2: var(--text-2);
  --w-leise: var(--leise);
}

html {
  height: 100%;
  background: var(--ambient, oklch(0.115 0.01 70));
  transition: background-color 500ms ease;
  -webkit-text-size-adjust: 100%;
}
body {
  position: relative;
  margin: 0 auto;
  max-width: var(--spalte);
  height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.5 var(--lauf);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 520px) {
  body { box-shadow: 0 0 0 1px oklch(1 0 0 / 0.08), 0 30px 120px oklch(0 0 0 / 0.55); }
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
code { font-size: 0.9em; padding: 1px 6px; border-radius: 6px; background: var(--glas); }

:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
main:focus { outline: none; }

.sprung {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 10px 16px; border-radius: 999px;
  background: var(--text); color: var(--bg); font-weight: 600; text-decoration: none;
}
.sprung:focus { top: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.icon { width: 24px; height: 24px; flex: none; }

/* Feines Korn über allem: nimmt den Flächen das Digitale. */
.korn {
  position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background: url("korn.png") 0 0 / 160px 160px;
  opacity: 0.05;
}

/* ---------- Grafik ---------- */

.kunst { display: block; }
.k1 { fill: var(--c1); }
.k2 { fill: var(--c2); }
.k3 { fill: var(--c3); }
.k4 { fill: var(--c4); }
.l1, .l2, .l3, .l4 { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.l1 { stroke: var(--c1); }
.l2 { stroke: var(--c2); }
.l3 { stroke: var(--c3); }
.l4 { stroke: var(--c4); }
.fein { stroke-width: 2.5; }
.dick { stroke-width: 7; }
.lt { font-family: var(--display); font-weight: 800; font-stretch: 100%; }
.lt.l3 { stroke-width: 4; }
.strom { fill: none; stroke-width: 9; stroke-linecap: round; }
.strom:nth-of-type(1) { stroke: oklch(0.78 0.15 8); }
.strom:nth-of-type(2) { stroke: oklch(0.78 0.15 32); }
.strom:nth-of-type(3) { stroke: oklch(0.8 0.15 52); }
.strom:nth-of-type(4) { stroke: oklch(0.84 0.15 78); }
.strom:nth-of-type(5) { stroke: oklch(0.82 0.16 148); }
.strom:nth-of-type(6) { stroke: oklch(0.82 0.13 172); }
.strom:nth-of-type(7) { stroke: oklch(0.8 0.12 202); }
.strom:nth-of-type(8) { stroke: oklch(0.76 0.13 230); }
.strom:nth-of-type(9) { stroke: oklch(0.72 0.15 258); }
.strom:nth-of-type(10) { stroke: oklch(0.72 0.16 285); }
.strom:nth-of-type(11) { stroke: oklch(0.76 0.17 310); }
.strom:nth-of-type(12) { stroke: oklch(0.76 0.17 340); }

/* ---------- Kopf ---------- */

.kopf {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  height: var(--kopf-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 14px 0 var(--rand);
  background: linear-gradient(to bottom, var(--bg) 55%, transparent);
  pointer-events: none;
}
.kopf > * { pointer-events: auto; }
.im-feed .kopf, .auf-buehne .kopf { background: none; }
.marke {
  display: flex; align-items: center; gap: 8px;
  font: 760 22px/1 var(--display); font-stretch: 88%; letter-spacing: -0.02em;
}
.marke svg { width: 26px; height: 26px; }
.marke path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.tag {
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px 0 8px;
  border-radius: 999px; text-decoration: none; color: var(--text);
  font: 700 14px/1 var(--display); font-variant-numeric: tabular-nums;
}
.tag:empty { display: none; }
.serie { display: inline-flex; align-items: center; gap: 2px; padding-right: 4px; }
.serie .icon { width: 17px; height: 17px; }
.ring { position: relative; display: grid; place-items: center; width: 38px; height: 38px; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: oklch(0 0 0 / 0.5); stroke: oklch(1 0 0 / 0.24); stroke-width: 3; }
.ring circle + circle { fill: none; stroke: var(--text); stroke-linecap: round; }
.ring span { position: relative; font-size: 13px; }
.ring.puls { animation: puls 420ms var(--ease-out); }
@keyframes puls { 40% { transform: scale(1.18); } }

main { position: absolute; inset: 0; }

/* ---------- Unterer Rand: links die Knöpfe zur Karte, rechts die Bereiche ---------- */

.unten {
  position: absolute; z-index: 20;
  inset: auto 14px calc(10px + env(safe-area-inset-bottom)) 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  pointer-events: none;
}
.unten > * { pointer-events: auto; }
.pille {
  display: flex; gap: 2px; height: var(--dock-h); padding: 5px; border-radius: 999px;
  background: oklch(0.2 0.014 70 / 0.7);
  border: 1px solid oklch(1 0 0 / 0.12);
  box-shadow: 0 12px 36px oklch(0 0 0 / 0.45);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
}
.pille .rund { width: 48px; height: 48px; background: none; color: var(--text); }
.pille .rund[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.leiste { --i: 0; position: relative; margin-left: auto; }
.leiste::before {
  content: ""; position: absolute; top: 5px; left: 5px; width: 50px; height: 48px;
  border-radius: 999px; background: var(--text);
  transform: translateX(calc(var(--i) * 52px));
  transition: transform 280ms var(--ease-out);
}
.leiste a {
  position: relative; display: grid; place-items: center; width: 50px; height: 48px;
  border-radius: 999px; color: var(--text-2);
  transition: transform 140ms var(--ease-out), color 200ms ease;
}
.leiste a .icon { width: 22px; height: 22px; }
.leiste a:active { transform: scale(0.9); }
.leiste a[aria-current="page"] { color: var(--bg); }
.leiste a:focus-visible { outline-offset: -3px; }
@media (max-width: 350px) {
  .unten { inset-inline: 8px; }
  .pille .rund, .leiste a, .leiste::before { width: 44px; }
  .leiste::before { transform: translateX(calc(var(--i) * 46px)); }
}

/* ---------- Knöpfe, Felder, Chips ---------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px;
  border: 1.5px solid var(--text); border-radius: 999px;
  background: var(--text); color: var(--bg);
  font: 650 16px/1.2 var(--lauf); text-decoration: none; cursor: pointer;
  transition: transform 140ms var(--ease-out), opacity 140ms ease;
}
.knopf:active { transform: scale(0.97); }
.knopf.still { background: var(--glas); color: var(--text); border-color: var(--glas-rand); }
.knopf[disabled] { opacity: 0.55; cursor: default; }
.knopf.breit { width: 100%; }
.knopf .icon { width: 20px; height: 20px; }

.rund {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 999px; background: var(--glas); color: var(--w-text, var(--text)); cursor: pointer;
  transition: transform 140ms var(--ease-out);
}
.rund .icon { width: 22px; height: 22px; }
.rund:active { transform: scale(0.9); }
.rund[aria-pressed="true"] { background: var(--w-text, var(--text)); color: var(--w-tief, var(--bg)); }
.rund[aria-pressed="true"] .icon { fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .rund:not([aria-pressed="true"]):hover { background: oklch(1 0 0 / 0.16); }
  .knopf.still:hover { background: oklch(1 0 0 / 0.16); }
  .leiste a:not([aria-current]):hover { color: var(--text); }
}

.feld { display: grid; gap: 6px; }
.feld label { font-size: 15px; font-weight: 600; }
.feld input {
  width: 100%; min-height: 50px; padding: 0 14px;
  border: 1.5px solid oklch(1 0 0 / 0.3); border-radius: var(--r-feld);
  background: oklch(0 0 0 / 0.3); color: var(--text);
}
.feld input:focus-visible { outline-offset: 0; border-color: var(--text); }
.feld .hilfe { font-size: 14px; color: var(--leise); }
.fehler { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; color: var(--schlecht); }
.fehler:empty { display: none; }
.fehler .icon { width: 18px; height: 18px; margin-top: 3px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 0 13px;
  border: 1px solid var(--glas-rand); border-radius: 999px; background: var(--glas);
  font-size: 14px; color: var(--text-2);
}
.punkt { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--kat); }

/* ---------- Seiten außerhalb des Feeds ---------- */

.seite {
  height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: calc(var(--kopf-h) + 18px) var(--rand) calc(var(--dock-h) + 48px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-content: start;
}
.seite::-webkit-scrollbar { display: none; }
.seite h2, .gross {
  font: 760 40px/1 var(--display); font-stretch: 84%; letter-spacing: -0.03em; text-wrap: balance;
}
.seite h3 { font: 720 23px/1.1 var(--display); font-stretch: 88%; letter-spacing: -0.02em; }
.seite .vorspann { color: var(--text-2); max-width: 34em; }
.abschnitt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.formular { display: grid; gap: 18px; }
.hinweis { padding: calc(var(--kopf-h) + 18px) var(--rand); color: var(--text-2); }

/* Anmeldung: die Marke als Bühne */
.buehne {
  position: relative; height: 100%; overflow-y: auto; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 22px;
  padding: calc(var(--kopf-h) + 18px) var(--rand) calc(28px + env(safe-area-inset-bottom));
  background: var(--w-bg);
}
.buehne .kunst { position: absolute; inset: 0 0 auto 0; width: 100%; height: 52%; z-index: -2; }
.buehne::before {
  content: ""; position: absolute; inset: 24% 0 0 0; z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--w-bg-weich) 22%, var(--w-bg) 36%);
}
.buehne h2 { font: 780 clamp(48px, 15.5vw, 68px)/0.92 var(--display); font-stretch: 80%; letter-spacing: -0.035em; }
.buehne .vorspann { color: var(--text-2); max-width: 26em; }
.buehne .strom { animation: einfliessen 900ms var(--ease-out) both; }
.buehne .strom:nth-of-type(2n) { animation-delay: 70ms; }
.buehne .strom:nth-of-type(3n) { animation-delay: 140ms; }
.buehne .strom:nth-of-type(4n) { animation-delay: 210ms; }
.buehne .strom:nth-of-type(5n) { animation-delay: 280ms; }
@keyframes einfliessen { from { opacity: 0; transform: translateX(-46px); } }
.glas {
  padding: 20px; border-radius: 24px;
  background: oklch(0.2 0.014 70 / 0.62); border: 1px solid oklch(1 0 0 / 0.12);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}

/* Themenwahl: jede Kategorie als kleines Plakat */
.auswahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.auswahl button {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end; min-height: 112px; padding: 12px; text-align: left;
  border: 0; border-radius: var(--r-flaeche); background: var(--w-bg); color: var(--w-text);
  font: 720 19px/1.05 var(--display); font-stretch: 86%; letter-spacing: -0.01em; cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.auswahl button .kunst { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.auswahl button::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--w-tief) 4%, var(--w-tief-weich) 34%, transparent 72%);
}
.auswahl button::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 3px solid var(--text); opacity: 0; transition: opacity 160ms ease;
}
.auswahl button:active { transform: scale(0.97); }
.auswahl .haken {
  position: absolute; top: 9px; right: 9px; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--text); color: var(--bg);
  opacity: 0; transform: scale(0.8); transition: opacity 160ms ease, transform 200ms var(--ease-out);
}
.auswahl .haken .icon { width: 18px; height: 18px; stroke-width: 2.6; }
.auswahl button[aria-pressed="true"]::after { opacity: 1; }
.auswahl button[aria-pressed="true"] .haken { opacity: 1; transform: none; }
.gruppe-titel { font-size: 13px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--leise); }
.seite.ohne-dock { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
.unten-fest { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 0 0 10px var(--bg), 0 -24px 30px 10px var(--bg); }

/* ---------- Feed und Karten ---------- */

.feed {
  height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.feed::-webkit-scrollbar { display: none; }
.feed:focus-visible { outline-offset: -3px; }

.karte {
  --bild-min: 196px;
  position: relative; isolation: isolate;
  min-height: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column;
  padding-bottom: calc(var(--dock-h) + 26px + env(safe-area-inset-bottom));
  background: var(--w-bg); color: var(--w-text);
}
/* Das Bild nimmt allen Platz, den der Text nicht braucht. Marke, Etikett und Titel liegen darauf. */
.bild {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  flex: 1 0 var(--bild-min);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 9px;
  padding: var(--kopf-h) var(--rand) 4px;
}
.bild .kunst { position: absolute; left: 0; top: -40px; z-index: -2; width: 100%; height: calc(100% + 80px); }
.bild::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, var(--w-tief-weich), transparent 92px),
    linear-gradient(to top, var(--w-bg) 0, var(--w-bg-weich) 44px, transparent 150px);
}
.karte-inhalt {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px;
  padding: 8px var(--rand) 0;
}

.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.etikett {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 30px; padding: 0 12px 0 9px; border-radius: 999px;
  background: var(--w-tief-weich); border: 1px solid oklch(1 0 0 / 0.14);
  font-size: 12.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--w-text);
}
.etikett .icon { width: 16px; height: 16px; color: var(--c3); }
.marker {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border-radius: 999px;
  background: var(--c4); color: var(--w-tief);
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.bild h2 { font: 650 16.5px/1.3 var(--lauf); color: var(--c3); text-wrap: balance; }
.hook {
  --hook: min(42px, 10.8vw);
  font: 760 var(--hook)/1.03 var(--display); font-stretch: 84%;
  letter-spacing: -0.028em; text-wrap: balance; hyphens: auto;
  color: var(--w-text);
}
.hook.gr-m { --hook: min(35px, 9vw); }
.hook.gr-s { --hook: min(29.5px, 7.6vw); line-height: 1.06; }
.frage { --hook: min(29px, 7.5vw); line-height: 1.1; }
.fliess { color: var(--w-text-2); hyphens: auto; }
.beispiel, .kasten {
  position: relative; padding: 12px 16px 13px 18px; border-radius: var(--r-flaeche);
  background: oklch(1 0 0 / 0.075);
  font-size: 15.5px; line-height: 1.48; color: var(--w-text-2); hyphens: auto;
}
.beispiel::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--c3);
}
.beispiel b, .kasten b {
  display: block; margin-bottom: 3px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c3);
}
.kasten { font-size: 16.5px; color: var(--w-text); border: 1px solid oklch(1 0 0 / 0.12); }
/* Der Merksatz ist der Aufkleber auf dem Plakat: helle Fläche, dunkle Schrift. */
.merk {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 16px 12px 13px; border-radius: var(--r-flaeche);
  background: var(--c3); color: var(--w-tief);
  font-size: 16px; line-height: 1.38; font-weight: 650;
}
.merk .icon { width: 20px; height: 20px; margin-top: 1px; }
.quelle { font-size: 12.5px; line-height: 1.4; color: var(--w-leise); }

.aktionen { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.aktionen .rechts { margin-left: auto; }

/* Einpassen: app.js schaltet diese Stufen der Reihe nach zu, bis die Karte auf den Bildschirm passt. */
.eng1 { --bild-min: 164px; }
.eng1 .hook { font-size: calc(var(--hook) * 0.88); }
.eng2 .karte-inhalt { gap: 10px; }
.eng2 .fliess { font-size: 16px; line-height: 1.44; }
.eng2 .beispiel { font-size: 14.5px; padding-block: 9px 10px; }
.eng2 .merk { font-size: 15px; padding-block: 9px; }
.eng3 { --bild-min: 132px; }
.eng3 .hook { font-size: calc(var(--hook) * 0.78); }
.eng3 .karte-inhalt { gap: 8px; }
.eng3 .fliess { font-size: 15.5px; line-height: 1.42; }

/* Quiz */
.optionen { display: grid; gap: 8px; }
.option {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 22px; align-items: center; gap: 12px;
  min-height: 54px; padding: 8px 14px 8px 12px; text-align: left;
  border: 1.5px solid oklch(1 0 0 / 0.16); border-radius: var(--r-flaeche);
  background: oklch(1 0 0 / 0.08); color: var(--w-text);
  font-size: 16px; line-height: 1.28; cursor: pointer;
  transition: transform 140ms var(--ease-out);
}
.option .buchstabe {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: oklch(1 0 0 / 0.14); font: 720 14px/1 var(--display);
}
.option:not([disabled]):active { transform: scale(0.98); }
.option .icon { width: 22px; height: 22px; stroke-width: 2.4; }
.option[disabled] { cursor: default; color: var(--w-leise); }
.option.richtig { border-color: var(--gut); background: oklch(0.84 0.16 150 / 0.16); color: var(--w-text); }
.option.richtig .buchstabe { background: var(--gut); color: oklch(0.2 0.05 150); animation: pop 320ms var(--ease-out); }
.option.richtig .icon { color: var(--gut); }
.option.falsch { border-color: var(--schlecht); color: var(--w-text); animation: ruetteln 300ms var(--ease-in-out); }
.option.falsch .buchstabe { background: var(--schlecht); color: oklch(0.2 0.05 25); }
.option.falsch .icon { color: var(--schlecht); }
@keyframes ruetteln { 25% { transform: translateX(-6px); } 60% { transform: translateX(5px); } 85% { transform: translateX(-2px); } }
@media (hover: hover) and (pointer: fine) {
  .option:not([disabled]):hover { background: oklch(1 0 0 / 0.14); }
}
.aufloesung { display: grid; gap: 5px; font-size: 15.5px; line-height: 1.46; color: var(--w-text-2); }
.aufloesung strong { display: flex; align-items: center; gap: 8px; font: 740 21px/1.1 var(--display); font-stretch: 88%; color: var(--w-text); }
.aufloesung strong .icon { width: 22px; height: 22px; stroke-width: 2.6; }
.aufloesung.gut strong .icon { color: var(--gut); }
.aufloesung.daneben strong .icon { color: var(--schlecht); }
.einblenden { animation: einblenden 220ms var(--ease-out) both; }
@keyframes einblenden { from { opacity: 0; transform: translateY(8px); } }

/* Übung mit Uhr */
.uebung-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.uebung-knoepfe .knopf { flex: 1 1 auto; padding-inline: 18px; }
.karte .knopf:not(.still) { background: var(--w-text); border-color: var(--w-text); color: var(--w-tief); }
.uhr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.uhr b { font: 780 54px/0.9 var(--display); font-stretch: 80%; font-variant-numeric: tabular-nums; min-width: 1.3em; }
.uhr .bahn { height: 10px; border-radius: 5px; background: oklch(1 0 0 / 0.14); overflow: hidden; }
.uhr .bahn i { display: block; height: 100%; border-radius: 5px; background: var(--c3); transform-origin: left; animation: ablauf 30s linear forwards; }
@keyframes ablauf { to { transform: scaleX(0); } }

/* Doppeltipp-Herz: selten, darf Freude machen */
.herzflug {
  position: absolute; left: 50%; top: 40%; width: 112px; height: 112px; margin: -56px 0 0 -56px;
  color: var(--w-text); pointer-events: none;
  animation: herzflug 640ms var(--ease-out) both;
}
.herzflug .icon { width: 100%; height: 100%; fill: currentColor; }
@keyframes herzflug {
  0% { opacity: 0; transform: scale(0.86) rotate(-8deg); }
  25% { opacity: 1; transform: scale(1.1) rotate(4deg); }
  60% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(1) translateY(-22px); }
}
.rund.pop .icon { animation: pop 260ms var(--ease-out); }
@keyframes pop { 40% { transform: scale(1.26); } }

/* Zwischenkarten */
.zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.zahl { padding: 12px 14px; border-radius: var(--r-flaeche); background: oklch(1 0 0 / 0.08); }
.zahl b { display: block; font: 780 34px/1 var(--display); font-stretch: 82%; letter-spacing: -0.02em; }
.zahl span { font-size: 13px; line-height: 1.3; color: var(--w-leise); }

.skelett i { display: block; height: 16px; border-radius: 8px; background: oklch(1 0 0 / 0.1); animation: atmen 1.1s ease-in-out infinite alternate; }
.skelett i:nth-child(1) { width: 38%; height: 30px; border-radius: 15px; }
.skelett i:nth-child(2) { width: 92%; height: 38px; }
.skelett i:nth-child(3) { width: 70%; height: 38px; margin-bottom: 8px; }
.skelett i:nth-child(6) { width: 60%; }
@keyframes atmen { from { opacity: 0.45; } to { opacity: 1; } }

/* Scrollen gibt der Grafik Tiefe: Sie wandert langsamer als die Karte. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .feed .bild .kunst {
      animation: tiefe linear both;
      animation-timeline: view(block);
    }
    @keyframes tiefe {
      from { transform: translateY(-38px); }
      to { transform: translateY(38px); }
    }
  }
}
/* Auftakt: Beim ersten Erscheinen setzen die Akzente der Grafik ein. */
.auftakt .kunst .k3, .auftakt .kunst .k4, .auftakt .kunst .l3, .auftakt .kunst .l4 {
  transform-box: fill-box; transform-origin: center;
  animation: akzent 560ms var(--ease-out) both;
}
.auftakt .kunst .k4, .auftakt .kunst .l4 { animation-delay: 90ms; }
@keyframes akzent { from { opacity: 0; transform: scale(0.8); } }

/* ---------- Gemerkt ---------- */

.liste { display: grid; gap: 10px; }
.liste button {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 14px;
  width: 100%; padding: 8px 14px 8px 8px; text-align: left;
  border: 1px solid oklch(1 0 0 / 0.1); border-radius: 22px;
  background: var(--flaeche); cursor: pointer;
  transition: transform 140ms var(--ease-out);
}
.liste button:active { transform: scale(0.985); }
.daumen { position: relative; overflow: hidden; height: 76px; border-radius: 15px; background: var(--w-bg); }
.daumen .kunst { position: absolute; inset: 0; width: 100%; height: 100%; }
.liste .zeile { display: grid; gap: 3px; }
.liste .ort { font-size: 11.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leise); }
.liste .zeile-titel { font: 720 19px/1.1 var(--display); font-stretch: 88%; color: var(--text); }
.liste .zeile-text {
  font-size: 14.5px; line-height: 1.4; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .liste button:hover { background: var(--flaeche-2); }
}

/* ---------- Profil ---------- */

.schwerpunkt {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 4px; align-content: end; min-height: 216px; padding: 18px;
  border-radius: 26px; background: var(--w-bg); color: var(--w-text);
}
.schwerpunkt .kunst { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.schwerpunkt::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--w-tief) 6%, var(--w-tief-weich) 42%, transparent 82%);
}
.schwerpunkt .ort { font-size: 12.5px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--c3); }
.schwerpunkt .gross { font-size: 42px; }
.schwerpunkt p:last-child { font-size: 15px; color: var(--w-text-2); }

.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kachel { padding: 14px 16px 15px; border-radius: var(--r-flaeche); background: var(--flaeche); border: 1px solid oklch(1 0 0 / 0.07); }
.kachel b { display: block; font: 780 40px/1 var(--display); font-stretch: 80%; letter-spacing: -0.025em; }
.kachel b small { font: 500 15px/1 var(--lauf); letter-spacing: 0; color: var(--leise); }
.kachel span { font-size: 14px; color: var(--leise); }

.balken { display: grid; gap: 13px; }
.balken li { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; align-items: baseline; }
.balken .name { display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 600; }
.balken .wert { font-size: 13.5px; color: var(--leise); font-variant-numeric: tabular-nums; }
.balken .spur { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--flaeche-2); overflow: hidden; }
.balken .spur i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--text-2); }
.balken li.minus .name { color: var(--leise); }

.erklaerung { display: grid; gap: 12px; color: var(--text-2); font-size: 16px; counter-reset: schritt; }
.erklaerung li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.erklaerung li::before {
  content: counter(schritt); counter-increment: schritt;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--flaeche-2); font: 720 14px/1 var(--display); color: var(--text);
}

details.klapp { border: 1px solid var(--glas-rand); border-radius: var(--r-flaeche); background: var(--flaeche); }
details.klapp summary {
  display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 16px;
  font-weight: 600; cursor: pointer; list-style: none; border-radius: var(--r-flaeche);
}
details.klapp summary::-webkit-details-marker { display: none; }
details.klapp .formular { padding: 4px 16px 18px; }
.konto { display: grid; gap: 10px; }

/* ---------- Toast, Blatt, Dialog ---------- */

.toast {
  position: absolute; left: 50%; top: calc(var(--kopf-h) + 8px); z-index: 40;
  width: max-content; max-width: calc(100% - 40px); padding: 11px 18px;
  border-radius: 999px; background: var(--text); color: var(--bg);
  box-shadow: 0 10px 30px oklch(0 0 0 / 0.4);
  font-size: 15px; font-weight: 650; line-height: 1.3; text-align: center;
  opacity: 0; transform: translate(-50%, -10px); pointer-events: none;
  transition: opacity 160ms ease, transform 160ms var(--ease-out);
}
.toast.an { opacity: 1; transform: translate(-50%, 0); transition-duration: 240ms; }

dialog { color: var(--text); border: 0; padding: 0; }
dialog::backdrop { background: oklch(0.08 0.01 70 / 0.7); }

.blatt {
  position: fixed; inset: auto 0 0 0; margin: 0 auto;
  width: 100%; max-width: var(--spalte); max-height: 85dvh; overflow-y: auto;
  padding: 10px var(--rand) calc(22px + env(safe-area-inset-bottom));
  border-radius: 30px 30px 0 0; border-top: 1px solid oklch(1 0 0 / 0.16);
  background: var(--w-tief, var(--flaeche));
}
.blatt[open] { display: grid; gap: 16px; animation: blatt-auf 280ms var(--ease-drawer); }
.blatt[open]::backdrop { animation: abdunkeln 200ms ease; }
@keyframes blatt-auf { from { transform: translateY(100%); } }
@keyframes abdunkeln { from { opacity: 0; } }
.blatt-griff { width: 40px; height: 4px; margin: 0 auto 6px; border-radius: 2px; background: var(--linie-stark); }
.blatt h2 { font: 760 30px/1.05 var(--display); font-stretch: 84%; letter-spacing: -0.02em; }
.blatt p { color: var(--w-text-2, var(--text-2)); }
.blatt-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.blatt-knoepfe .knopf { padding: 0 10px; gap: 6px; font-size: 15.5px; white-space: nowrap; }
.blatt .knopf:not(.still) { background: var(--w-text, var(--text)); border-color: var(--w-text, var(--text)); color: var(--w-tief, var(--bg)); }

.vollbild {
  position: fixed; inset: 0; margin: 0 auto;
  width: 100%; max-width: var(--spalte); height: 100dvh; max-height: none;
  background: var(--bg); overflow-y: auto;
}
.vollbild[open] { animation: einblenden 220ms var(--ease-out); }
.vollbild .zu { position: absolute; top: 8px; right: 10px; z-index: 2; background: oklch(0 0 0 / 0.4); color: var(--text); }
.vollbild .karte { min-height: 100dvh; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
.vollbild .aktionen { padding: 0 var(--rand); margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  html, .leiste::before, .knopf, .rund, .option, .leiste a, .auswahl button, .auswahl .haken, .liste button { transition: none; }
  .knopf:active, .rund:active, .option:active, .leiste a:active, .auswahl button:active, .liste button:active { transform: none; }
  .einblenden, .vollbild[open], .buehne .strom, .auftakt .kunst * { animation-name: nur-deckkraft; }
  .blatt[open] { animation: nur-deckkraft 160ms ease; }
  .herzflug { animation: nur-deckkraft 400ms ease reverse both; }
  .rund.pop .icon, .skelett i, .ring.puls, .option.falsch, .option.richtig .buchstabe { animation: none; }
  .toast, .toast.an { transform: translate(-50%, 0); }
  @keyframes nur-deckkraft { from { opacity: 0; } }
}