/* ============================================================
   nocardio — Marketing-Website
   Tokens woertlich aus day66/app/globals.css:
     dunkel = Theme "flieder"   hell = Theme "aurora"
   Formskala neu (siehe 03-prompts/00-master.md, Abschnitt 4).
   ============================================================ */

/* ---------- 1. FARBE ---------- */
:root {
  --color-bg:         #050509;
  --color-surface:    #0f0d16;
  --color-surface-2:  #181523;
  --color-border:     #28243c;
  --color-text:       #efecf6;
  --color-text-dim:   #a39bb8;
  --color-accent:     #c4b1f5;
  --color-accent-fg:  #1a142e;
  --color-accent-ink: #c4b1f5;
  --color-success:    #86e3ad;
  --color-danger:     #f5a3a3;
  --color-danger-fg:  #1f0a0a;
  --grad-base:        #c4b1f5;
  --knopf-rand:       transparent;
  --knopf-schein:     0 0 #0000;
  --ambient:
    radial-gradient(80% 68% at 12% -10%, rgba(196,177,245,.34) 0%, transparent 70%),
    radial-gradient(72% 62% at 92%   4%, rgba(255,255,255,.10) 0%, transparent 70%),
    radial-gradient(80% 68% at 58%  32%, rgba(143,180,247,.20) 0%, transparent 72%);
  color-scheme: dark;
}

/* Hell = Theme "aurora". WICHTIG: --color-accent-ink ist ein EIGENER,
   dunklerer Wert. Der helle Akzent traegt als Schriftfarbe nicht. */
:root[data-mode="hell"] {
  --color-bg:         #fbfaff;
  --color-surface:    #f4f2ff;
  --color-surface-2:  #ebebf5;
  --color-border:     #d8d8ea;
  --color-text:       #0f0f19;
  --color-text-dim:   #717177;
  --color-accent:     #a199d1;
  --color-accent-fg:  #241a33;
  --color-accent-ink: #5c609f;
  --color-success:    #12873d;
  --color-danger:     #c02626;
  --color-danger-fg:  #ffffff;
  --grad-base:        #5c609f;
  --knopf-rand:       rgba(255,255,255,.7);
  --knopf-schein:     inset 0 0 10px 2px rgba(255,255,255,.5);
  --ambient:
    radial-gradient(85% 70% at 10% -8%, rgba(196,186,255,.85) 0%, transparent 70%),
    radial-gradient(75% 65% at 95%  6%, rgba(196,177,245,.75) 0%, transparent 70%),
    radial-gradient(85% 70% at 58% 34%, rgba(178,208,255,.70) 0%, transparent 72%);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-mode="dunkel"]) {
    --color-bg:#fbfaff; --color-surface:#f4f2ff; --color-surface-2:#ebebf5;
    --color-border:#d8d8ea; --color-text:#0f0f19; --color-text-dim:#717177;
    --color-accent:#a199d1; --color-accent-fg:#241a33; --color-accent-ink:#5c609f;
    --color-success:#12873d; --color-danger:#c02626; --color-danger-fg:#ffffff;
    --grad-base:#5c609f;
    --knopf-rand:rgba(255,255,255,.7);
    --knopf-schein:inset 0 0 10px 2px rgba(255,255,255,.5);
    --ambient:
      radial-gradient(85% 70% at 10% -8%, rgba(196,186,255,.85) 0%, transparent 70%),
      radial-gradient(75% 65% at 95%  6%, rgba(196,177,245,.75) 0%, transparent 70%),
      radial-gradient(85% 70% at 58% 34%, rgba(178,208,255,.70) 0%, transparent 72%);
    color-scheme: light;
  }
}

/* Abgeleitete Flaechen — identisch zur App */
:root {
  --kk-hervor:        var(--color-accent);
  --kk-sek-deckung:   .42;
  --flaeche-aktiv:    color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
  --ton-ruhig:        color-mix(in srgb, var(--color-text-dim) 55%, var(--color-bg));
  /* 75 Prozent Rand plus ein Viertel Textfarbe - NICHT gegen den Grund
     gemischt. Gegen den Grund gemischt wird die Linie heller als der Rand,
     und auf weissem Grund verschwindet sie ganz. Dieselbe Formel benutzen
     die uebrigen Seiten in public/v2, damit die Kanten ueberall gleich
     kraeftig sind. */
  --ton-linie:        color-mix(in srgb, var(--color-border) 75%, var(--color-text));
}

/* ---------- 2. FORM ---------- */
:root {
  --radius-xs:.375rem; --radius-sm:.5rem;  --radius-md:.75rem;
  --radius-lg:1rem;    --radius-xl:1.5rem; --radius-2xl:2rem;
  --radius-full:9999px; --radius-phone:2.75rem;

  --space-1:.25rem; --space-2:.5rem;  --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem;   --space-7:3rem;   --space-8:4rem;
  --space-9:6rem;   --space-10:8rem;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem;
  --text-lg:1.125rem; --text-xl:1.25rem;
  --text-2xl: clamp(1.5rem,   1.30rem + 1.0vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.55rem + 1.6vw, 2.25rem);
  --text-4xl: clamp(2.25rem,  1.60rem + 3.2vw, 3.25rem);
  --text-hero:clamp(2.25rem,  1.40rem + 4.0vw, 3.75rem);

  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12);
  --shadow-phone:0 40px 80px -20px rgba(0,0,0,.55);

  --dauer-mikro:160ms; --dauer-einblend:450ms; --dauer-popup:380ms;
  --kurve:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 3. GRUNDLAGE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--color-bg);color:var(--color-text);-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-sans);font-size:var(--text-base);line-height:1.6;
  background:var(--color-bg);color:var(--color-text);
  -webkit-font-smoothing:antialiased;min-height:100dvh;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--color-accent-ink);outline-offset:2px;border-radius:var(--radius-xs)}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
ol,ul{margin:0;padding:0}

/* Atmosphaere — liegt fest hinter allem, wird NIE animiert */
.ambient{position:fixed;inset:0;background:var(--ambient);pointer-events:none;z-index:0;opacity:.9}
.seite{position:relative;z-index:1}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 4. LAYOUT ---------- */
.wrap{width:100%;max-width:80rem;margin:0 auto;padding-inline:var(--space-4)}

/* SEHGROESSE, EIN EINZIGER WERT: --ue-skala.
   Betreiber, 27.08.2026: "ist viel zu viel gezoomt ... weil ich auf dem
   14 zoll mac nichts sehe." Gemessen bei 1512 x 982: Ueberschrift 60 px,
   Kacheln 400 x 398, drei je Reihe.

   zoom nimmt alles mit - Schrift, Abstaende, Bilder. Die Breite von .wrap
   wird gegengerechnet, damit der gewonnene Platz nicht als Rand verfaellt.
   NUR innerhalb von main: Kopf und Fuss bleiben so gross wie auf den
   uebrigen Seiten, sonst faellt die Leiste aus der Reihe.
   Erst ab 768 px - am Handy stimmen die Groessen bereits. */
:root{ --ue-skala: .75; --ue-text: 1.3333 }
@media (min-width:768px){
  main{ zoom:var(--ue-skala) }
  main .wrap{ max-width:calc(80rem / var(--ue-skala)) }

  /* ZWEITER REGLER: --ue-text. Betreiber, 27.08.2026: "sieht besser aus nur
     die textgroesse muss vergroessert werden."

     zoom verkleinert Schrift und Abstaende gemeinsam - gewollt war aber nur
     das Zweite. Gemessen bei .75: Kachelangaben 9 px, Filterbeschriftungen
     9 px, Kacheltext 9,8 px. Das liest niemand.

     1,3333 ist genau der Kehrwert von .75: Der Fliesstext steht damit wieder
     in seiner urspruenglichen Groesse auf dem Schirm, waehrend Abstaende,
     Bilder und Kacheln klein bleiben. Die UEBERSCHRIFTEN bekommen ihn
     bewusst NICHT - sie waren der Grund, warum die Seite zu gross wirkte. */
  main{
    --text-xs:calc(.75rem * var(--ue-text));
    --text-sm:calc(.875rem * var(--ue-text));
    --text-base:calc(1rem * var(--ue-text));
    --text-lg:calc(1.125rem * var(--ue-text));
    --text-xl:calc(1.25rem * var(--ue-text));
    font-size:var(--text-base);
  }
  main .ue-kachel b{font-size:calc(.9375rem * var(--ue-text))}
  main .ue-kachel__kurz{font-size:calc(.8125rem * var(--ue-text))}
  main .ue-filter select,main .ue-filter input{font-size:calc(.9375rem * var(--ue-text))}
  main .ue-filter__marke{font-size:calc(var(--text-xs))}
}
@media (min-width:640px){.wrap{padding-inline:var(--space-5)}}
.prosa{max-width:65ch}
.eng{max-width:52ch}

section{padding-block:var(--space-8)}
@media (min-width:640px){section{padding-block:var(--space-9)}}
@media (min-width:1024px){section{padding-block:var(--space-10)}}

/* ---------- 5. TYPOGRAFIE ---------- */
/* WOERTLICH VON DER STARTSEITE. Betreiber, 31.08.2026: "im Selben Stil wie
   die startseite Aussehen und schreibstil. Soll Apple erinnern."
   public/v2/seite.html setzt die Augenbraue als Schreibmaschinenschrift mit
   .18em Sperrung in accent-ink und die Ueberschriften mit Gewicht 800 und
   -.03em. Vorher standen hier 600/.12em und 700/-.02em - dieselbe Idee, aber
   eben nicht dieselben Werte. Jetzt sind es dieselben. */
.kicker{
  font-family:var(--font-mono);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--color-accent-ink);margin-bottom:var(--space-3);
}
h1{font-size:var(--text-hero);font-weight:800;line-height:1.08;letter-spacing:-.03em}
h2{font-size:var(--text-3xl);font-weight:800;line-height:1.08;letter-spacing:-.03em}
h3{font-size:var(--text-xl);font-weight:700;line-height:1.3}
.gross{font-size:var(--text-lg);line-height:1.55}
.dim{color:var(--color-text-dim)}
.klein{font-size:var(--text-sm)}

/* ---------- 6. KNOEPFE UND LINKS ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:3rem;padding:0 var(--space-5);border-radius:var(--radius-md);
  background:var(--color-accent);color:var(--color-accent-fg);
  border:1px solid var(--knopf-rand);box-shadow:var(--knopf-schein);
  font:inherit;font-weight:700;text-decoration:none;cursor:pointer;
  transition:transform var(--dauer-mikro) var(--kurve);
}
.knopf:hover{transform:translateY(-1px);text-decoration:none}
.knopf:active{transform:scale(.98)}
.knopf--umriss{
  background:transparent;color:var(--color-accent-ink);
  border:1px solid var(--color-accent);box-shadow:none;
}
.textlink{
  display:inline-flex;align-items:center;gap:.35em;min-height:2.75rem;
  color:var(--color-accent-ink);font-weight:600;
}
.textlink .pfeil{transition:transform var(--dauer-mikro) var(--kurve)}
.textlink:hover .pfeil{transform:translateX(2px)}
.leise{color:var(--color-text-dim);font-weight:400}

/* ---------- 7. HANDY ---------- */
.geraet{
  position:relative;width:100%;max-width:17rem;margin-inline:auto;
  aspect-ratio:402/874;border-radius:var(--radius-phone);
  border:1px solid var(--color-border);box-shadow:var(--shadow-phone);
  overflow:hidden;background:var(--color-bg);
  transform-style:preserve-3d;
}
.geraet img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.geraet--gross{max-width:19rem}
.geraet--klein{max-width:12rem}

/* Bewegung: der SICHTBARE Zustand ist der Standard.
   Erst wenn JS laeuft, bekommt .js-bewegt einen Startzustand. */
.buehne{perspective:1400px}
.js-bewegt .geraet{
  transform:translateX(var(--gx,0)) rotateY(var(--gry,0deg)) scale(var(--gsc,1));
  transition:transform 120ms linear;
  will-change:transform;
}

/* ---------- 8. POPUPS ---------- */
.popup{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg);
  background:var(--color-surface-2);border:1px solid var(--color-border);
  box-shadow:var(--shadow-md);font-size:var(--text-sm);font-weight:600;
  color:var(--color-text);
}
.popup-reihe{
  display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;
  margin-top:var(--space-5);
}
.js-bewegt .popup{opacity:0;transform:translateY(8px)}
.js-bewegt .popup.sichtbar{
  opacity:1;transform:none;
  transition:opacity var(--dauer-popup) var(--kurve),transform var(--dauer-popup) var(--kurve);
}

/* ---------- 9. EINBLENDUNG ---------- */
/* Standard = sichtbar. Nur mit JS wird kurz weggenommen. */
.js-bewegt .rein{opacity:0;transform:translateY(14px)}
.js-bewegt .rein.da{
  opacity:1;transform:none;
  transition:opacity var(--dauer-einblend) var(--kurve),transform var(--dauer-einblend) var(--kurve);
}

/* ---------- 10. TABELLE ---------- */
.tabelle-huelle{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:var(--text-base)}
caption{text-align:left;padding-bottom:var(--space-3);color:var(--color-text-dim)}
th,td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--ton-linie);vertical-align:top}
thead th{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-dim);font-weight:600}
tbody th{font-weight:500}
td{text-align:center;white-space:nowrap}
tbody tr:hover{background:var(--ton-linie)}
tr.hebt th,tr.hebt td{background:var(--flaeche-aktiv);font-weight:700}
.zusatz{display:block;font-size:var(--text-sm);color:var(--color-text-dim);font-weight:400;margin-top:var(--space-1);white-space:normal}

/* ---------- 11. KARTEN, LISTEN ---------- */
.karte{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);padding:var(--space-6);
}
.karte--ruhig{background:transparent;border-color:var(--ton-linie)}
.schritte{list-style:none;counter-reset:s;display:grid;gap:var(--space-3)}
.schritte li{counter-increment:s;display:grid;grid-template-columns:2rem 1fr;gap:var(--space-3);align-items:start}
.schritte li::before{
  content:counter(s);display:grid;place-items:center;
  width:2rem;height:2rem;border-radius:var(--radius-full);
  background:var(--flaeche-aktiv);color:var(--color-accent-ink);
  font-weight:700;font-size:var(--text-sm);
}
.raster{display:grid;gap:var(--space-5)}
@media (min-width:768px){.raster--3{grid-template-columns:repeat(3,1fr)}.raster--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.raster--4{grid-template-columns:repeat(4,1fr)}}

/* ---------- 12. SEKTIONS-RASTER (Desktop) ---------- */
.paar{display:grid;gap:var(--space-6);align-items:center}
@media (min-width:1024px){
  .paar{grid-template-columns:1fr 1fr;gap:var(--space-7)}
  .paar--gedreht .paar__text{order:2}
  .paar--gedreht .paar__bild{order:1}
}

/* ---------- 13. KOPF UND FUSS ---------- */
/* DER SCHLEIER LIEGT AUF EINER EIGENEN EBENE, nicht auf .kopf selbst.
   Grund: Ein Element mit backdrop-filter wird zur Hintergrundwurzel fuer alles
   darin. Das Klappmenue haengt im Kopf, reicht aber weit darunter — es
   zeichnete deshalb den KOPF weich statt der Seite, und ausserhalb der
   Kopfkante war da nichts. Sichtbar wurde das am Handy: die Ueberschrift las
   sich glasklar durch die Tafel hindurch. Mit dem Schleier auf ::before ist
   .kopf keine Hintergrundwurzel mehr und die Tafel sieht die Seite. */
.kopf{
  position:sticky;top:env(safe-area-inset-top);z-index:20;
  border-bottom:1px solid var(--ton-linie);
}
.kopf::before{
  content:"";position:absolute;inset:0;z-index:-1;
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  background:color-mix(in srgb,var(--color-bg) 62%,transparent);
}
/* Die Leiste haelt selbst den Rahmen von 80rem — sie sitzt AUSSERHALB von
   .wrap, weil der Schleier ueber die volle Breite laufen muss, der Inhalt
   darin aber nicht. */
.kopf__inner{
  position:relative;max-width:80rem;margin-inline:auto;
  padding:var(--space-2) var(--space-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
}
.marke{font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;font-size:var(--text-lg);color:var(--color-text)}
.marke:hover{text-decoration:none}
.marke .strike{color:var(--color-accent-ink);text-decoration:line-through;text-decoration-thickness:2px}
.marke .tld{color:var(--color-text-dim);font-size:.75em}

/* Beide Knoepfe rechts und ohne Rahmen — Betreiber, 26.08.2026: "beide
   buttons sollen keine rahmen haben" und "beim Handy bitte auch beide rechts". */
.kopf__knoepfe{display:flex;align-items:center;gap:var(--space-1);margin-inline-end:-.6rem}
.kopf__knopf{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;
  border:0;background:transparent;color:var(--color-text);cursor:pointer;font:inherit;
}
.kopf__knopf:hover{text-decoration:none;color:var(--color-accent-ink)}
.kopf__knopf svg{width:1.25rem;height:1.25rem}
.burger{display:grid;gap:4px}
.burger span{display:block;width:16px;height:1.5px;background:currentColor;border-radius:2px}

/* DIE TAFEL WAR AUF DEN v2-SEITEN IMMER OFFEN: dort stand hidden NEBEN einem
   inline display:grid, und die Regel [hidden]{display:none} aus dem
   Browser-Stylesheet verliert gegen jede Angabe im Dokument. Hier steht das
   display in der Klasse, deshalb genuegt eine Regel mit hoeherer
   Genauigkeit — kein !important noetig. */
.menuetafel{
  position:absolute;top:calc(100% + var(--space-2));right:var(--space-5);z-index:1;
  display:grid;gap:var(--space-4);padding:var(--space-5);min-width:15rem;
  border-radius:var(--radius-md);border:1px solid var(--ton-linie);
  background:color-mix(in srgb,var(--color-bg) 62%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  box-shadow:var(--shadow-md);
}
.menuetafel[hidden]{display:none}
.menuetafel__kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.menuetafel__linie{height:1px;background:var(--ton-linie)}
.menuetafel nav,.menuetafel__fuss{display:grid}
.menuekreuz{
  display:grid;place-items:center;width:1.75rem;height:1.75rem;
  border:0;background:transparent;color:var(--color-text-dim);cursor:pointer;
}
.menuekreuz:hover{color:var(--color-text)}
.menuekreuz svg{width:1.05rem;height:1.05rem}
.menuezeile{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding-block:var(--space-2);border:0;background:transparent;text-align:start;
  font:inherit;font-size:var(--text-sm);color:var(--color-text);cursor:pointer;
}
.menuezeile:hover{color:var(--color-accent-ink);text-decoration:none}
.menuezeile[aria-current="page"]{color:var(--color-text-dim);cursor:default}
.menuezeile[aria-current="page"]::after{content:"\00B7";color:var(--color-accent-ink);font-size:1.5em;line-height:1}

.fuss{border-top:1px solid var(--ton-linie);padding-block:var(--space-8);margin-top:var(--space-8)}
.fuss__raster{display:grid;gap:var(--space-6);grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){.fuss__raster{grid-template-columns:repeat(4,1fr)}}
.fuss h2{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-dim);font-weight:600;margin-bottom:var(--space-3)}
.fuss ul{list-style:none;display:grid;gap:var(--space-2);font-size:var(--text-sm)}
.fuss a{color:var(--color-text-dim)}
.fuss a:hover{color:var(--color-text)}
.fuss__unten{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;align-items:center;margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--ton-linie);font-size:var(--text-sm);color:var(--color-text-dim)}

/* ---------- 14. STORE-ABZEICHEN ---------- */
.stores{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:var(--space-5)}
.store{
  display:flex;align-items:center;gap:var(--space-3);
  height:3rem;padding:0 var(--space-4);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  opacity:.55;font-size:var(--text-sm);color:var(--color-text);
}
.store b{font-weight:700}
.store span{color:var(--color-text-dim)}

/* ---------- 15. SPRACHHINWEIS ---------- */
.sprachhinweis{
  display:none;align-items:center;justify-content:center;gap:var(--space-4);
  padding:var(--space-3) var(--space-4);background:var(--color-surface-2);
  border-bottom:1px solid var(--color-border);font-size:var(--text-sm);text-align:center;
}
.sprachhinweis.an{display:flex}
.sprachhinweis button{background:none;border:0;color:var(--color-text-dim);cursor:pointer;font:inherit;padding:var(--space-2)}

/* ---------- 16. UEBUNGSVERZEICHNIS ---------- */
.ue-liste{list-style:none;display:grid;gap:var(--space-4);grid-template-columns:1fr}
@media (min-width:640px){.ue-liste{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.ue-liste{grid-template-columns:repeat(3,1fr)}}
.ue-karte{display:flex;gap:var(--space-4);align-items:center;padding:var(--space-3);border:1px solid var(--ton-linie);border-radius:var(--radius-lg);color:var(--color-text)}
.ue-karte:hover{border-color:var(--color-accent);text-decoration:none;background:var(--color-surface)}
.ue-karte img{width:4.5rem;height:4.5rem;object-fit:contain;flex:none;background:var(--color-surface-2);border-radius:var(--radius-md)}
.ue-karte b{display:block;font-size:var(--text-sm);font-weight:600;line-height:1.3}
.ue-karte small{color:var(--color-text-dim);font-size:var(--text-xs)}
.marken{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.marke-chip{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);
  border:1px solid var(--color-border);font-size:var(--text-sm);color:var(--color-text);
}
a.marke-chip:hover{border-color:var(--color-accent);text-decoration:none}
.brotkrumen{font-size:var(--text-sm);color:var(--color-text-dim);margin-bottom:var(--space-4)}
.brotkrumen a{color:var(--color-text-dim)}
.brotkrumen a:hover{color:var(--color-text)}

/* ---------- 17. RECHTSTEXT ---------- */
.rechtstext{max-width:70ch;line-height:1.7}
.rechtstext h2{font-size:var(--text-xl);margin-top:var(--space-7);margin-bottom:var(--space-3)}
.rechtstext p{margin-bottom:var(--space-4)}
.rechtstext ul,.rechtstext ol{margin:0 0 var(--space-4) var(--space-5);display:grid;gap:var(--space-2)}
.rechtstext li{list-style:disc}
.rechtstext blockquote{margin:var(--space-4) 0;padding-left:var(--space-4);border-left:3px solid var(--color-border)}

/* ---------- 18. BEWEGUNG AUS ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js-bewegt .geraet{transform:none!important}
  .js-bewegt .rein,.js-bewegt .popup{opacity:1!important;transform:none!important}
}


/* ---------- 19. UEBUNGSDATENBANK ---------- */
/* Abstaende der Uebungsseiten: die Bausteine setzen ihren eigenen oberen
   Abstand, damit die Bauskripte keine style-Attribute mehr tragen muessen. */
.ue-vorspann{margin-top:var(--space-5)}
.ue-zahlen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-top:var(--space-5)}
.ue-zahlen__punkt{color:color-mix(in srgb,var(--color-text-dim) 60%,transparent)}
.ue-zahlen__frei{color:var(--color-accent-ink)}
.ue-h1{font-size:var(--text-4xl)}
.ue-h2{margin-top:var(--space-8)}
.ue-chips{margin-top:var(--space-4)}
.ue-prosa{margin-top:var(--space-5);display:grid;gap:var(--space-4)}
.ue-sammelkopf{margin-bottom:var(--space-6)}
.ue-kurz{max-width:52ch}
/* Sechs Schritte in zwei gleichen Spalten: 1 2 / 3 4 / 5 6. Das halbiert die
   Hoehe und nimmt dieselbe Zweiteilung auf, die schon die Tafeln darueber
   haben. Die Ziffern stehen sichtbar davor, deshalb ist die Lesefolge
   zeilenweise eindeutig. */
.ue-schritte{margin-top:var(--space-6);max-width:none}
@media (min-width:900px){
  .ue-schritte{grid-template-columns:1fr 1fr;column-gap:var(--space-7);row-gap:var(--space-5)}
}
.ue-abschluss{margin-top:var(--space-8);max-width:46ch;display:grid;gap:var(--space-5)}
.pfad{font-family:var(--font-mono);color:var(--color-text)}

/* Filterband. Es ist das einzige Formular der Website, deshalb stehen die
   Feldstile hier und nicht in einem eigenen Formularabschnitt. */
.ue-filter{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3) var(--space-4);
  margin-top:var(--space-7);padding:var(--space-5);
  border:1px solid var(--ton-linie);border-radius:var(--radius-xl);
}
.ue-filter__feld{display:flex;flex-direction:column;gap:var(--space-2);flex:1 1 100%}
@media (min-width:768px){
  .ue-filter__feld{flex:0 0 16rem}
  .ue-filter__feld--breit{flex:1 1 12.5rem;min-width:12.5rem}
}
.ue-filter__marke{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-dim)}
.ue-filter__wahl{position:relative;display:block}
.ue-filter select,.ue-filter input{
  width:100%;min-height:3rem;padding:var(--space-3) var(--space-4);
  background:var(--color-bg);border:1px solid var(--color-border);
  border-radius:var(--radius-md);color:var(--color-text);
  font:inherit;font-size:var(--text-base);   /* 16px: darunter zoomt iOS Safari beim Fokus */
  -webkit-appearance:none;appearance:none;
}
.ue-filter select{padding-right:2.625rem;cursor:pointer}
@media (min-width:768px){.ue-filter select,.ue-filter input{font-size:.9375rem}}
.ue-filter__pfeil{position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--color-text-dim)}
.ue-filter__feld--aktiv .ue-filter__marke,
.ue-filter__feld--aktiv .ue-filter__pfeil{color:var(--color-accent-ink)}
.ue-filter__feld--aktiv select{
  border-color:var(--color-accent);background:var(--color-bg);
  color:var(--color-accent-ink);font-weight:700;
}
.ue-filter .knopf{flex:0 0 auto}
.ue-filter__auf{display:inline-flex;align-items:center;min-height:3rem}
.ue-filter__fuss{flex:0 0 100%;margin:0}
.ue-status{margin-top:var(--space-4)}
.ue-status[hidden]{display:none}

/* Kachel mit vier Angaben. Unter 768 px wird sie zur Zeile — dieselbe Kachel,
   nur anders gefaltet, damit es keine zweite Liste im Quelltext braucht. */
.ue-liste--kacheln{grid-template-columns:1fr}
@media (min-width:640px){.ue-liste--kacheln{grid-template-columns:1fr}}
/* ALLE Kacheln gleich gross, nicht nur die einer Zeile.
   Zwei Dinge muessen dafuer zusammenkommen: grid-auto-rows:1fr macht die
   ZEILEN untereinander gleich hoch, und die gekuerzte Beschreibung deckelt,
   wie hoch die hoechste ueberhaupt werden kann. Ohne den Deckel zoege eine
   einzige lange Beschreibung alle 206 Kacheln mit in die Hoehe. */
/* auto-fill statt fester Dreierteilung: Mit der gegengerechneten Breite
   waere jede Kachel sonst genau so gross wie vorher, nur bei kleinerer
   Schrift. So werden aus drei Kacheln je Reihe vier kleinere. */
@media (min-width:768px){.ue-liste--kacheln{grid-template-columns:repeat(auto-fill,minmax(24rem,1fr));grid-auto-rows:1fr}}
.ue-liste--kacheln > li{display:flex}
.ue-kachel{
  flex:1 1 auto;
  display:flex;flex-direction:row;gap:var(--space-4);align-items:flex-start;
  padding:var(--space-3);border:1px solid var(--ton-linie);
  border-radius:var(--radius-lg);color:var(--color-text);
}
/* Weiss, nicht flieder - Betreiber, 27.08.2026: "diese farbe bei
   markierten weg und weiss benutzen". Der Rahmen traegt die Markierung
   allein. --color-bg statt #fff, sonst waere die Kachel im dunklen
   Modus beim Zeigen ploetzlich hell. */
.ue-kachel:hover{border-color:var(--color-accent);background:var(--color-bg);text-decoration:none}
.ue-kachel__bild{
  position:relative;display:block;flex:none;width:5rem;height:5rem;
  background:var(--color-surface-2);border-radius:var(--radius-md);overflow:hidden;
}
.ue-kachel__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ue-kachel__text{display:flex;flex-direction:column;gap:.3125rem;min-width:0}
.ue-kachel b{font-size:.9375rem;font-weight:600;line-height:1.3}
.ue-kachel small{font-size:var(--text-xs);color:var(--color-text-dim)}
.ue-kachel__kurz{
  font-size:.8125rem;line-height:1.5;color:var(--color-text-dim);text-wrap:pretty;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
}
@media (min-width:768px){
  /* align-items MUSS hier zurueck auf stretch. In der Zeilenfassung steht
     flex-start, und in der gedrehten Spaltenfassung ist flex-start die
     QUERachse: das Bildkaestchen bekaeme dann seine Inhaltsbreite, und die ist
     null, weil das Bild darin absolut liegt. */
  .ue-kachel{flex-direction:column;align-items:stretch;gap:var(--space-3)}
  .ue-kachel__bild{width:100%;height:auto;aspect-ratio:16/10}
}

/* ============================================================
   EINZELNE UEBUNG - SYMMETRISCHER AUFBAU
   Betreiber, 31.08.2026: "Die Videos sind viel zu gross formatiert bitte 1/4
   davon ... Video und Koerperkarte koennen nebeneinander sein (die Groesse
   jetzt von der Koerperkarte ist super auch fuers Video) ... Ich moechte dass
   die Ganze Anordnung symetrisch ist."

   Der Aufbau von oben nach unten, alles um dieselbe Mittelachse:
     Kopf (mittig)  ->  zwei gleich breite Tafeln (Video | Koerperkarte)
     ->  Schritte in zwei gleichen Spalten  ->  vier gleich breite Angaben
     ->  drei aehnliche Uebungen  ->  Schlussblock (mittig).

   ZUR GROESSE: Das Video lief vorher ueber die volle Breite - gemessen
   1227 x 689 bei einem Fenster von 1280 px. In der halben Spalte sind es
   574 x 323, also 22 Prozent der Flaeche. Das ist das gewuenschte Viertel
   und zugleich genau die Breite, die die Koerperkarte vorher schon hatte
   (gemessen 597 px). Deshalb steht hier keine feste Bildgroesse: Die
   Spaltenhaelfte IST das Mass.
   ============================================================ */

/* Kopf: Brotkrume, Titel, Kurzbeschreibung und Merkmale stehen mittig.
   Die Brotkrume steht bewusst mit in der Mitte - eine linksbuendige
   Hilfszeile ueber einem mittigen Kopf bricht genau die Achse, um die es
   hier geht. */
.ue-kopf{text-align:center;max-width:46rem;margin-inline:auto}
.ue-kopf .ue-kurz{margin-top:var(--space-5);margin-inline:auto}
.ue-kopf .marken{justify-content:center}

/* Die zwei Tafeln. align-items ist der Vorgabewert stretch, damit beide
   gleich hoch werden, egal welche mehr Inhalt hat. */
.ue-buehne{display:grid;gap:var(--space-5);margin-top:var(--space-7)}
@media (min-width:900px){.ue-buehne{grid-template-columns:1fr 1fr;gap:var(--space-6)}}
/* Zwei Klassen, damit die Regel den eigenen Abstand der Koerperkarte
   sicher schlaegt - unabhaengig davon, welche Regel spaeter in der Datei
   steht. Ein Gleichstand waere hier stumm falsch. */
.ue-buehne .koerperkarte{margin-top:0}
.ue-buehne .kicker{margin-bottom:0}

/* Video. Ohne gesetzte Video-Basis steht im selben Rahmen das Standbild.
   Die Tafel traegt dieselbe Flaeche, denselben Rand und dasselbe Polster wie
   die Koerperkarte - nur so wirken die beiden nebeneinander als ein Paar. */
.ue-video{
  display:flex;flex-direction:column;gap:var(--space-4);margin:0;
  padding:var(--space-5);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
}
.ue-video__rahmen{
  position:relative;display:block;aspect-ratio:16/9;margin-block:auto;
  background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius-md);overflow:hidden;
}
.ue-video__rahmen video,.ue-video__rahmen img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ue-video figcaption{font-size:var(--text-sm);color:var(--color-text-dim)}

/* Vier Angaben, gleich breit, nur durch Haarlinien getrennt - keine Kaesten.
   Auf dem Handy untereinander, jede mit ihrer eigenen Linie. */
.ue-fakten{display:grid;margin:var(--space-6) 0 0;border-top:1px solid var(--ton-linie)}
.ue-fakten > div{
  display:grid;gap:var(--space-2);
  padding:var(--space-4) 0;border-bottom:1px solid var(--ton-linie);
}
.ue-fakten dt{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-dim);
}
.ue-fakten dd{margin:0}
@media (min-width:768px){
  .ue-fakten{grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--ton-linie)}
  /* Auch das erste Feld bekommt sein linkes Polster: vier gleich aussehende
     Felder sind hier wichtiger als der buendige Anschluss an den Textrand. */
  .ue-fakten > div{padding:var(--space-5);border-bottom:0;border-left:1px solid var(--ton-linie)}
  .ue-fakten > div:first-child{border-left:0}
}

/* Ueberschriften und Schlussblock der Einzelseite stehen mittig. Nur dort -
   das Verzeichnis und die Sammelseiten bleiben linksbuendig. */
.ue-detail .ue-h2{text-align:center}
.ue-detail .ue-abschluss{margin-inline:auto;text-align:center;justify-items:center}

.paar--oben{align-items:start}
.ue-doppel{margin-top:var(--space-8)}
@media (min-width:1024px){.ue-doppel{gap:var(--space-7)}}

/* Verweisblock: der Crawl-Pfad. Bewusst nackte Linklisten statt Karten —
   er soll sich nicht mit dem Verzeichnis darueber um Aufmerksamkeit streiten. */
.ue-verweise{
  display:grid;gap:var(--space-6);margin-top:var(--space-8);
  padding-top:var(--space-6);border-top:1px solid var(--ton-linie);
}
@media (min-width:768px){.ue-verweise{grid-template-columns:repeat(2,1fr)}}
.ue-verweise__marke{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-dim)}
.ue-verweise__liste{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-top:var(--space-3);font-size:var(--text-sm)}
.ue-verweise__liste a{color:var(--color-text-dim)}
.ue-verweise__liste a:hover{color:var(--color-text)}

/* Koerperkarte. Die Polygone kommen aus day66/lib/bodyMapData.ts; hier steht
   nur, wie primaer, sekundaer und Grundfigur aussehen. */
.koerperkarte{
  display:grid;gap:var(--space-4);margin-top:var(--space-5);padding:var(--space-5);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
}
.koerperkarte__figuren{display:flex;gap:var(--space-3);justify-content:center}
.koerperkarte figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);flex:1;min-width:0}
.koerperkarte svg{width:100%;max-width:8.25rem;height:auto}
.koerperkarte figcaption{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.06em;color:var(--color-text-dim)}
/* Die Karte traegt ihre ganze Aussage ueber den Abstand zwischen
   hervorgehobenem und ruhendem Muskel. Mit dem hellen Akzent auf hellem
   Grund war dieser Abstand am 27.08.2026 gemessen 1,47 (primaer) und 1,03
   (sekundaer) — bei 1,03 ist ein bearbeiteter Muskel von einem unbeteiligten
   nicht mehr zu unterscheiden, die Grafik war dort schlicht leer. Der helle
   Modus nimmt deshalb accent-ink, denselben dunkleren Wert, den Schrift
   nimmt; oben steht warum. */
.kk-teil{fill:var(--color-text-dim);fill-opacity:.28;stroke:var(--color-bg);stroke-width:.4;stroke-linejoin:round}
.kk-teil--sekundaer{fill:var(--kk-hervor);fill-opacity:var(--kk-sek-deckung);stroke:var(--kk-hervor);stroke-width:.5}
.kk-teil--primaer{fill:var(--kk-hervor);fill-opacity:.95;stroke:var(--kk-hervor);stroke-width:.8}
.koerperkarte__legende{display:grid;gap:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--color-border)}
.kk-marke{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.kk-punkt{flex:none;width:.6875rem;height:.6875rem;border-radius:3px;background:var(--kk-hervor)}
.kk-punkt--sekundaer{background:color-mix(in srgb,var(--kk-hervor) 55%,transparent)}

/* Heller Modus: dunklerer Akzent fuer die Koerperkarte. Beide Wege muessen
   belegt sein — das gesetzte Attribut UND die Systemvorgabe ohne Attribut. */
:root[data-mode="hell"] { --kk-hervor: var(--color-accent-ink); --kk-sek-deckung: .55; }
@media (prefers-color-scheme: light) {
  :root:not([data-mode="dunkel"]) { --kk-hervor: var(--color-accent-ink); --kk-sek-deckung: .55; }
}