/* Nightchest Website: Designsystem (Entwurf 27.09.2026)
   Dieselbe Welt wie die App (docs/designsystem.md im App-Repo): Nachtviolett als Bühne,
   Amethyst als einziger Akzent, Poppins überall, Gold nur in der Wortmarke.
   Leitelement der Website ist das Brett: ein beleuchtetes Regalbrett, auf dem das
   echte Ding der Seite steht (Slab, Karte, Set, Werkzeug). */

/* Poppins liegt auf dem eigenen Server (keine Anfrage an Google, DSGVO). */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(schrift/poppins-latin-400-normal.woff2) format("woff2");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:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(schrift/poppins-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(schrift/poppins-latin-500-normal.woff2) format("woff2");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:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(schrift/poppins-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(schrift/poppins-latin-600-normal.woff2) format("woff2");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:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(schrift/poppins-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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:Poppins;font-style:italic;font-weight:400;font-display:swap;src:url(schrift/poppins-latin-400-italic.woff2) format("woff2")}

:root {
  /* Farben */
  --nacht: #0b0913;          /* Seitengrund */
  --flaeche: #120e1b;        /* Kästen */
  --tiefe: #191330;          /* Kasten im Kasten, Felder */
  --hauch: #221a3c;          /* Hover, Auswahl */
  --linie: rgba(196, 178, 255, .10);
  --linie2: rgba(196, 178, 255, .20);
  --text: #ece8f6;
  --text2: #b1a9c6;          /* 7,9:1 auf --nacht */
  --text3: #a59dbf;          /* 6,4:1 auf --nacht, 5,0:1 auf --hauch */
  --amethyst: #a78bf5;
  --amethyst-tief: #6b4fd8;
  --amethyst-hell: #d5c8ff;
  --dunst: rgba(122, 90, 240, .18);
  --glut-rgb: 124, 90, 240;
  --gold: #f3c038;           /* nur Wortmarke */
  --etikett: #f4f1ea;        /* Grader-Etikett */
  --plus: #8fd4b0; --minus: #e58b9c;

  /* Schrift: Poppins, Maßstab nach Bringhurst (15, 17, 22, 30, 44, 64) */
  --sans: "Poppins", system-ui, sans-serif;
  --s-0: 15px; --s-1: 17px; --s-2: 22px; --s-3: clamp(24px, 2.4vw, 30px);
  --s-4: clamp(30px, 3.6vw, 44px); --s-5: clamp(38px, 5.4vw, 66px);

  /* Maße */
  --breite: min(1440px, 88vw);   /* Toms Regel: am Rechner rund 80 bis 90 % nutzen */
  --lesen: 68ch;                 /* Fließtext nie breiter */
  --r-klein: 12px; --r: 20px; --r-gross: 28px; --pille: 999px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --schatten: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -24px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--nacht); color: var(--text);
  font: 400 var(--s-0)/1.65 var(--sans); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--amethyst-hell); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--amethyst); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.huelle { width: var(--breite); margin: 0 auto; }

/* ---------- Kopf: wie die App (Marke links, rechts ein voller Knopf und runde Knöpfe, keine Leiste in der Mitte) ---------- */
.kopf { position: sticky; top: 0; z-index: 20; background: linear-gradient(180deg, rgba(11, 9, 19, .92), rgba(11, 9, 19, .72)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.kopf .huelle { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 84px; }
.zeichen { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.zeichen .truhe { width: 48px; height: 48px; filter: drop-shadow(0 0 12px rgba(var(--glut-rgb), .6)); }
.zeichen .wort { height: 27px; width: auto; }
.kopfrechts { display: flex; align-items: center; gap: 10px; }
.klappmenue { position: absolute; right: 0; top: 76px; width: 280px; padding: 8px; border-radius: 22px; border: 1px solid var(--linie2);
  background: linear-gradient(180deg, #221a3c, #120e1b); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 60px -30px rgba(var(--glut-rgb), .6); }
.klappmenue[hidden] { display: none; }
.klappmenue a { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 14px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 14.5px; }
.klappmenue a:hover, .klappmenue a[aria-current="page"] { background: var(--dunst); color: var(--amethyst-hell); }
.klappmenue a small { color: var(--text3); font-weight: 400; font-size: 13px; }
.klappmenue hr { border: 0; border-top: 1px solid var(--linie); margin: 6px 8px; }

/* ---------- Knöpfe: dieselben Werte wie in der App (stil.css .kn) ---------- */
.kn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 14px/1.2 var(--sans); padding: 11px 18px; border-radius: var(--pille);
  border: 1px solid rgba(167, 139, 245, .45); color: var(--text); background: rgba(34, 26, 60, .55); text-decoration: none; cursor: pointer;
  transition: transform .14s var(--ease), background .18s, color .18s, border-color .18s, box-shadow .25s; }
.kn:hover { border-color: rgba(196, 178, 255, .34); }
.kn:active { transform: scale(.97); }
.kn.voll { background: var(--amethyst); border-color: var(--amethyst); color: #140c2a; font-weight: 600; box-shadow: 0 10px 30px -12px rgba(var(--glut-rgb), .9); }
.kn.voll:hover { background: var(--amethyst-hell); border-color: var(--amethyst-hell); box-shadow: 0 0 30px rgba(167, 139, 245, .45), 0 10px 30px -12px rgba(var(--glut-rgb), .9); }
.kn.leise { border-color: transparent; background: rgba(167, 139, 245, .10); color: var(--text2); }
.kn.leise:hover { background: var(--dunst); color: var(--amethyst-hell); }
.kn.gross { padding: 14px 24px; font-size: 15px; }
.kn.klein { padding: 9px 14px; font-size: 13.5px; }
.kn.rund { width: 44px; height: 44px; padding: 0; border-color: var(--linie2); font-weight: 600; }
.kn.rund svg { width: 18px; height: 18px; }
.zurueck { display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: var(--pille); border: 1px solid var(--linie2); color: var(--text2); text-decoration: none; font-size: 14px; font-weight: 500; }
.zurueck i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(34, 26, 60, .9); font-style: normal; color: var(--text); }
.zurueck:hover { color: var(--text); border-color: rgba(196, 178, 255, .34); }
.oben { padding-top: 18px; }

/* ---------- Überschriften ---------- */
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; line-height: 1.12; margin: 0; text-wrap: balance; }
h1 { font-size: var(--s-5); }
h2 { font-size: var(--s-4); }
h3 { font-size: var(--s-2); letter-spacing: -.01em; line-height: 1.25; }
.lead { font-size: var(--s-1); color: var(--text2); max-width: 56ch; text-wrap: pretty; }
.mitte { text-align: center; } .mitte .lead { margin-inline: auto; }
p { text-wrap: pretty; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(64px, 9vw, 128px) 0; }
.abschnitt + .abschnitt { padding-top: 0; }
.kopfzeile { text-align: center; max-width: 780px; margin: 0 auto clamp(36px, 5vw, 56px); }
.kopfzeile .lead { margin: 16px auto 0; }

/* ---------- Das Brett (Leitelement) ---------- */
.buehne { position: relative; padding: clamp(36px, 4.4vw, 64px) 0 0; overflow: hidden; isolation: isolate; }
.buehne::before { /* Lichtkegel von oben */
  content: ""; position: absolute; inset: -20% 10% auto; height: 120%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 0%, rgba(var(--glut-rgb), .34), transparent 70%); }
.buehne .text { text-align: center; max-width: 900px; margin: 0 auto; }
.buehne .text .lead { margin: 18px auto 26px; }
.buehne .knoepfe { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.brett { position: relative; margin-top: clamp(32px, 4vw, 52px); display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 1.8vw, 28px); padding: 0 12px; }
.brett::after { /* die Kante des Bretts mit Glut */
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 18px; z-index: 2;
  background: linear-gradient(180deg, #2a2148 0%, #140f24 60%, #0b0913 100%);
  border-top: 1px solid rgba(213, 200, 255, .45);
  box-shadow: 0 -18px 60px -8px rgba(var(--glut-rgb), .55), 0 -2px 18px rgba(var(--glut-rgb), .5); }
.slab { margin: 0; position: relative; width: clamp(92px, 12vw, 190px); aspect-ratio: 0.62; border-radius: 10px; overflow: hidden; flex: none;
  box-shadow: 0 30px 40px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.12);
  transform-origin: 50% 100%; transition: transform .4s var(--ease); background: #1a1528; transform: perspective(900px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); }
.slab img { width: 100%; height: 100%; object-fit: cover; }
.slab::after { /* Glas: ein Streiflicht, das der Neigung folgt */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 58%);
  transform: translateX(var(--licht, -30%)); transition: transform .4s var(--ease); mix-blend-mode: screen; }
.slab.klein { width: clamp(62px, 8vw, 128px); }
.slab.klein:first-child, .slab.klein:last-of-type { width: clamp(54px, 6.6vw, 108px); filter: brightness(.82); }
.slab.held { width: clamp(140px, 15vw, 232px); z-index: 1; }
.brett .schild { position: absolute; bottom: -46px; left: 50%; transform: translateX(-50%); font-size: 13px; color: var(--text3); text-align: center; width: max-content; max-width: 100%; }
.unterbrett { height: 70px; }

/* ---------- Nebeneinander: Text und Gerät ---------- */
.neben { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.neben.dreh > :first-child { order: 2; }
.neben .text p { color: var(--text2); max-width: var(--lesen); }
.neben .text h2 { margin-bottom: 18px; }
.haken { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 12px; }
.haken li { position: relative; padding-left: 30px; color: var(--text); }
.haken li::before { content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 9px; border-left: 2px solid var(--amethyst); border-bottom: 2px solid var(--amethyst); transform: rotate(-45deg); }
.geraet { justify-self: center; width: min(340px, 100%); aspect-ratio: 390 / 800; border-radius: 42px; padding: 10px; background: linear-gradient(160deg, #2b2346, #120e1b);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -30px rgba(0,0,0,.95), 0 0 80px -20px rgba(var(--glut-rgb), .45); }
.geraet img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 33px; }

/* ---------- Leiste der Spiele ---------- */
.spiele { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1100px; margin: 0 auto; }
.spiele a { text-decoration: none; color: var(--text); font-weight: 500; font-size: 15px; padding: 11px 18px; border-radius: var(--pille); background: var(--flaeche); border: 1px solid var(--linie); transition: background .18s, border-color .18s; }
.spiele a:hover { background: var(--hauch); border-color: var(--linie2); }
.spiele a small { color: var(--text3); font-weight: 400; margin-left: 6px; }

/* ---------- Drei Arten (Einzelkarte, Slab, Sealed): Fotos statt Kacheln ---------- */
.arten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.art { position: relative; border-radius: var(--r-gross); overflow: hidden; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; background: var(--flaeche); }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(11,9,19,.92) 80%); }
.art > div { position: relative; z-index: 1; }
.art p { color: var(--text2); margin: 8px 0 0; }

/* ---------- Schritte (echte Reihenfolge, darum Zahlen) ---------- */
.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 48px); counter-reset: s; }
.schritt { counter-increment: s; }
.schritt::before { content: counter(s); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linie2); color: var(--amethyst-hell); font-weight: 600; margin-bottom: 18px; }
.schritt p { color: var(--text2); margin: 8px 0 0; }

/* ---------- Merkmale: Liste mit Linie, keine Kartenreihe ---------- */
.merkmale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 6vw, 96px); }
.merkmal { padding: 26px 0; border-top: 1px solid var(--linie2); display: grid; grid-template-columns: 1fr; gap: 6px; }
.merkmal p { margin: 0; color: var(--text2); max-width: 52ch; }

/* ---------- Notiz des Sammlers (Ich-Form, wie das Vorwort) ---------- */
.notiz { max-width: 760px; margin: 0 auto; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-gross); background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid var(--linie2); box-shadow: var(--schatten); }
.notiz p { font-size: var(--s-1); color: var(--text); margin: 0 0 14px; }
.notiz .von { color: var(--amethyst-hell); font-style: italic; font-size: 14px; }

/* ---------- Stufen ---------- */
.stufen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.stufe { border-radius: var(--r-gross); padding: 30px; background: var(--flaeche); border: 1px solid var(--linie); display: flex; flex-direction: column; gap: 14px; }
.stufe.empfohlen { background: linear-gradient(180deg, rgba(var(--glut-rgb), .16), var(--flaeche) 45%); border-color: rgba(167, 139, 245, .55); box-shadow: 0 0 60px -20px rgba(var(--glut-rgb), .7); }
.stufe .preis { font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.stufe .preis small { font-size: 15px; color: var(--text2); font-weight: 400; margin-left: 4px; }
.stufe .satz { color: var(--text2); margin: 0; }
.stufe ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 9px; flex: 1; }
.stufe li { padding-left: 26px; position: relative; font-size: 14.5px; }
.stufe li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--amethyst); border-bottom: 2px solid var(--amethyst); transform: rotate(-45deg); }
/* Reiterleiste mit leuchtendem Kissen: jede Wahl aus wenigen, wie in der App (Toms Wahl 03.10.2026) */
.reiterleiste { position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--pille); border: 1px solid var(--linie2); margin: 0 auto 28px;
  background: linear-gradient(180deg, rgba(34, 26, 60, .72), rgba(18, 14, 27, .72)); box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 24px 50px -30px rgba(0,0,0,.9), 0 0 60px -30px rgba(var(--glut-rgb), .6); }
.reiterleiste button { position: relative; z-index: 1; font: 500 14px var(--sans); color: var(--text2); background: none; border: 0; padding: 9px 20px; border-radius: var(--pille); cursor: pointer; white-space: nowrap; }
.reiterleiste button small { font-size: 12px; font-weight: 500; margin-left: 6px; opacity: .8; }
.reiterleiste button[aria-pressed="true"] { color: #140c2a; font-weight: 600; }
.reiterleiste .kissen { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: var(--pille); background: var(--amethyst); box-shadow: 0 0 24px rgba(167, 139, 245, .55); transition: left .32s var(--ease), width .32s var(--ease); }

/* ---------- Tabelle ---------- */
.tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabelle th, .tabelle td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { color: var(--text2); font-weight: 500; }
.tabelle td:first-child { color: var(--text); font-weight: 500; }
.tabellenrahmen { border: 1px solid var(--linie); border-radius: var(--r); overflow-x: auto; background: var(--flaeche); }

/* ---------- Grader-Etikett (wie in der App) ---------- */
.etikett { display: inline-flex; align-items: center; gap: 8px; background: var(--etikett); color: #1a1a1a; font-weight: 600; font-size: 13px; padding: 4px 10px; border-radius: 6px; }
.etikett b { font-size: 16px; }
.noten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.noten.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.note { border-radius: var(--r-klein); background: var(--flaeche); border: 1px solid var(--linie); padding: 14px 16px; }
.note b { display: block; font-size: 26px; letter-spacing: -.02em; }
.note span { color: var(--text2); font-size: 13.5px; }

/* ---------- Fragen ---------- */
.fragen { max-width: 860px; margin: 0 auto; }
.fragen details { border-bottom: 1px solid var(--linie2); }
.fragen summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font-weight: 500; font-size: var(--s-1); position: relative; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--amethyst); border-bottom: 2px solid var(--amethyst); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease); }
.fragen details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.fragen details p { color: var(--text2); margin: 0 0 22px; max-width: var(--lesen); }

/* ---------- Brotkrumen, Stand ---------- */
.krumen { font-size: 13.5px; color: var(--text3); padding-top: 22px; }
.krumen a { color: var(--text2); text-decoration: none; }
.krumen a:hover { color: var(--text); }
.krumen span { margin: 0 8px; }
.stand { font-size: 13px; color: var(--text3); }

/* ---------- Schluss ---------- */
.schluss { text-align: center; padding: clamp(72px, 10vw, 140px) 0; position: relative; overflow: hidden; }
.schluss::before { content: ""; position: absolute; left: 50%; bottom: -40%; width: 900px; height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(var(--glut-rgb), .35), transparent); z-index: -1; }
.schluss h2 { margin-bottom: 16px; }
.schluss .lead { margin: 0 auto 30px; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--linie); padding: 56px 0 40px; color: var(--text2); font-size: 14px; }
.fuss .huelle { display: grid; grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)); gap: 32px; }
.fuss h4, .fuss .kopf4 { color: var(--text); font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fuss a { color: var(--text2); text-decoration: none; }
.fuss a:hover { color: var(--text); }
.fuss .rechtlich { grid-column: 1 / -1; border-top: 1px solid var(--linie); padding-top: 22px; font-size: 12.5px; color: var(--text3); text-align: center; }

/* ---------- App-Bauteile, dieselben Werte wie in der App ---------- */
/* Kennzahl: Kasten, Name oben, Zahl, Satz darunter (Familie 5) */
.kasten { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 18px 20px; text-align: left; }
.kasten small { display: block; font-size: 12px; color: var(--text3); }
.kasten b { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 2px 0; }
.kasten span { font-size: 12.5px; color: var(--text2); }
.kaesten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* Kosten als Abzeichen wie in der Werkstatt (Familie 8) */
.pille { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--pille); border: 1px solid var(--linie2); color: var(--text2); line-height: 1.3; }
.pille.frei { color: var(--plus); border-color: rgba(143, 212, 176, .35); }
.pille.schl { color: #d9b877; border-color: rgba(217, 184, 119, .35); }
.pille.plan { color: var(--amethyst-hell); border-color: rgba(167, 139, 245, .4); }
/* An und aus: Kreis zum Abhaken (Familie 3) */
.kreis { display: inline-grid; place-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(196, 178, 255, .34); flex: none; }
.kreis.an { background: rgba(143, 212, 176, .15); border-color: var(--plus); }
.kreis.an::before { content: "✓"; color: var(--plus); font-weight: 700; font-size: 15px; line-height: 1; }
.kreiszeile { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
/* Gesperrt: breite Zeile mit Schloss (Familie 7) */
.stufenhinweis { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px dashed rgba(196, 178, 255, .34); background: rgba(34, 26, 60, .35); font-size: 13.5px; color: var(--text2); }
.stufenhinweis svg { width: 16px; height: 16px; flex: none; color: var(--amethyst-hell); }
.stufenhinweis span { flex: 1; min-width: 160px; }
.stufenhinweis a { margin-left: auto; color: var(--amethyst-hell); white-space: nowrap; }
/* Leer: Mitte mit Titel und nächstem Schritt (Familie 9) */
.leerzustand { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; width: 100%; padding: 22px 12px; color: var(--text3); font-size: 14px; border-radius: 18px; background: var(--tiefe); }
.leerzustand > b { font-size: 18px; font-weight: 600; color: var(--text); }
.leerzustand > p { margin: 0; max-width: 520px; line-height: 1.5; }
.leerzustand > .kn { margin-top: 10px; }
/* Balken: Punkt mit dünnem Strich (Familie 11) */
.strich { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(196, 178, 255, .16); }
.strich i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--amethyst); }
.strich i::after { content: ""; position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--amethyst); box-shadow: 0 0 12px rgba(167, 139, 245, .8); }
.balkenzeile { display: grid; grid-template-columns: 70px minmax(0, 1fr) 60px; gap: 14px; align-items: center; font-size: 13.5px; width: 100%; }
.balkenzeile span:last-child { text-align: right; color: var(--text2); }

/* Bausteine im Designsystem: links was und wo in der App, rechts das Bauteil selbst */
.bausteine { display: grid; gap: 14px; max-width: 1040px; margin: 0 auto; }
.baustein { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: center; padding: 24px 28px; border-radius: var(--r-gross); background: var(--flaeche); border: 1px solid var(--linie); }
.baustein h3 { font-size: 17px; }
.baustein .wo { display: block; color: var(--text3); font-size: 13px; margin-top: 6px; line-height: 1.5; }
.baustein .zeigt { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-width: 0; }
.baustein .zeigt.spalte { flex-direction: column; align-items: stretch; }
.baustein .reiterleiste { margin: 0; }

/* ---------- Drei Dinge: Einzelkarte, Slab, Set, jedes auf seinem Brett ---------- */
.dreier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.ding { text-align: center; }
.ding .platz { position: relative; height: 380px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; }
.ding .platz::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 12px; border-radius: 3px;
  background: linear-gradient(180deg, #2a2148 0%, #140f24 70%, #0b0913 100%); border-top: 1px solid rgba(213, 200, 255, .45);
  box-shadow: 0 -14px 40px -10px rgba(var(--glut-rgb), .55); }
.ding .platz img { max-height: 350px; width: auto; border-radius: 10px; box-shadow: 0 30px 40px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1); }
.ding h3 { margin-top: 26px; }
.ding p { color: var(--text2); margin: 8px auto 0; max-width: 32ch; }
.setkachel { width: min(310px, 100%); text-align: left; padding: 20px; border-radius: 22px; background: var(--flaeche); border: 1px solid var(--linie2); box-shadow: 0 30px 40px -24px rgba(0,0,0,.9); margin-bottom: 40px; }
.setkachel h4, .setkachel .kopf4 { margin: 0; font-size: 18px; font-weight: 600; }
.setkachel .sprache { font-size: 13px; color: var(--text2); }
.setkachel .fort { display: flex; align-items: center; gap: 14px; margin: 14px 0 16px; font-size: 13px; color: var(--text2); }
.setkachel .kaesten { grid-template-columns: 1fr 1fr; gap: 8px; }
.setkachel .kasten { padding: 12px 14px; border-radius: 14px; background: var(--tiefe); }
.setkachel .kasten b { font-size: 20px; }

/* ---------- Vorher, nachher: dein Foto und was in der Truhe steht (wie „Dein Foto → Nach dem Upgrade“ in der App) ---------- */
.wandel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); align-items: center; max-width: 1040px; margin: 0 auto; }
.wandel figure { margin: 0; text-align: center; }
.wandel figure img { margin: 0 auto; height: 500px; width: auto; max-width: 100%; object-fit: contain; border-radius: 14px; box-shadow: 0 30px 50px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.08); }
.wandel figcaption { margin-top: 18px; color: var(--text2); font-size: 14px; }
.wandel figcaption b { display: block; color: var(--text); font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.wandel .pfeil { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--linie2); color: var(--amethyst-hell); font-size: 22px; }
.unterwandel { max-width: 1040px; margin: clamp(32px, 4vw, 48px) auto 0; }
.satzunter { text-align: center; color: var(--text2); max-width: 62ch; margin: clamp(28px, 4vw, 40px) auto 0; }

/* ---------- In der Hand: ein Slab zum Neigen und Umdrehen ---------- */
.handstueck { display: grid; justify-items: center; gap: 18px; perspective: 1200px; }
.handstueck .koerper { position: relative; width: min(330px, 70vw); aspect-ratio: 598 / 1000; cursor: pointer; transform-style: preserve-3d;
  transform: rotateY(calc(var(--ry, 0deg) + var(--dreh, 0deg))) rotateX(var(--rx, 0deg)); transition: transform .6s var(--ease); }
.handstueck .koerper.hinten { --dreh: 180deg; }
.handstueck .seite { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 50px 70px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.12), 0 0 90px -20px rgba(var(--glut-rgb), .55); }
.handstueck .seite img { width: 100%; height: 100%; object-fit: cover; }
.handstueck .seite.rueck { transform: rotateY(180deg); }
.handstueck .seite::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 58%); transform: translateX(var(--licht, -30%)); transition: transform .4s var(--ease); }
.handstueck .schild { font-size: 13px; color: var(--text3); text-align: center; margin: 0; }

/* ---------- Grader: echte Etiketten aus der Sammlung ---------- */
.etiketten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.etikettfoto { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--flaeche); border: 1px solid var(--linie); }
.etikettfoto img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; object-position: center 40%; }
.etikettfoto figcaption { padding: 14px 18px; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.etikettfoto figcaption b { font-weight: 600; }
.etikettfoto figcaption span { color: var(--text3); font-size: 13px; text-align: right; }
.weitere { text-align: center; color: var(--text2); margin: 26px auto 0; max-width: 70ch; }

/* ---------- Zertifikat: die Nummer auf dem echten Etikett ---------- */
.zertifikat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.zertifikat figure { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: 0 30px 50px -24px rgba(0,0,0,.95); }
.zertifikat figure .ring { position: absolute; border: 2px solid var(--amethyst); border-radius: 10px; box-shadow: 0 0 0 4px rgba(167, 139, 245, .25), 0 0 30px rgba(167, 139, 245, .7); }
.zertifikat .text h2 { margin-bottom: 16px; }
.zertifikat .text p { color: var(--text2); max-width: 52ch; }
.zertifikat .kasten { margin: 22px 0; max-width: 360px; }

/* ---------- Abschnittsformen als Liste ---------- */
.formen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 6vw, 96px); }
.form { padding: 22px 0; border-top: 1px solid var(--linie2); }
.form p { margin: 6px 0 0; color: var(--text2); }

/* ---------- Handy ---------- */
@media (max-width: 900px) {
  :root { --breite: calc(100vw - 32px); }
  .kopf .huelle { height: 68px; }
  .zeichen .truhe { width: 40px; height: 40px; } .zeichen .wort { height: 22px; }
  .kopfrechts .kn:not(.rund) { display: none; }
  .klappmenue { top: 62px; width: min(300px, calc(100vw - 32px)); }
  .dreier, .etiketten, .formen, .zertifikat { grid-template-columns: 1fr; }
  .dreier { gap: 56px; }
  .ding .platz { height: 300px; } .ding .platz img { max-height: 270px; }
  .wandel { grid-template-columns: 1fr 1fr; gap: 12px; }
  .wandel .pfeil { display: none; }
  .wandel figure img { height: 240px; }
  .wandel figcaption { font-size: 12.5px; } .wandel figcaption b { font-size: 14px; }
  .kaesten { grid-template-columns: 1fr; }
  .setkachel .kaesten { grid-template-columns: 1fr 1fr; }
  .setkachel { margin-bottom: 24px; }
  .baustein { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .reiterleiste button { padding: 9px 14px; }
  .neben, .neben.dreh { grid-template-columns: 1fr; }
  .neben.dreh > :first-child { order: 0; }
  .arten, .schritte, .stufen, .merkmale { grid-template-columns: 1fr; }
  .art { min-height: 380px; }
  .brett .slab.klein:first-child, .brett .slab.klein:last-of-type { display: none; }
  .slab.held { width: min(44vw, 200px); }
  .slab.klein { width: 22vw; }
  .noten.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss .huelle { grid-template-columns: 1fr 1fr; }
  .fuss .huelle > :first-child { grid-column: 1 / -1; }
}
.ding .platz img.roh { max-height: 290px; }
.handstueck { padding-top: 24px; }
@media (max-width: 900px) { .ding .platz img.roh { max-height: 230px; } }
@media (max-width: 900px) { .unterwandel .kasten b { font-size: 22px; } .unterwandel { gap: 8px; } }
.etikettfoto img { aspect-ratio: auto; height: 132px; object-fit: contain; background: var(--flaeche); }
.zertifikat figure { justify-self: start; width: 100%; }
.zertifikat figure img { width: 100%; height: auto; }
@media (max-width: 900px) { .etikettfoto img { height: auto; } }
/* Einzelkarten als Liste wie in der App, ohne Foto, bis gute Fotos roher Karten da sind (Tom 03.10.2026) */
.listenkachel ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.listenkachel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--tiefe); }
.listenkachel li b { font-size: 14px; font-weight: 600; }
.listenkachel li span { grid-column: 1; font-size: 12.5px; color: var(--text2); }
.listenkachel li em { grid-column: 2; grid-row: 1 / span 2; font-style: normal; }
.ding .platz { height: auto; min-height: 380px; }
@media (max-width: 900px) { .ding .platz { min-height: 0; padding-top: 8px; } .ding .platz .setkachel { margin-bottom: 24px; } }
.spiele span { color: var(--text2); font-weight: 500; font-size: 15px; padding: 11px 18px; border-radius: var(--pille); background: var(--flaeche); border: 1px solid var(--linie); }

/* Nur für Screenreader und Suchmaschinen sichtbar (Überschriftenfolge, 08.10.2026) */
.unsichtbar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Funktionsseiten (09.10.2026): echte App-Bildschirme als Leitelement. Drei Handys auf dem Brett, Rechnerrahmen, Reihe. */
.telefonbrett { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2.4vw, 28px); padding: 0 8px; }
.telefonbrett .geraet { width: clamp(120px, 17vw, 230px); flex: none; }
.telefonbrett .geraet.mitte { width: clamp(150px, 21vw, 280px); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 70px rgba(167,139,245,.35); }
.bildschirm { border-radius: 16px; overflow: hidden; border: 1px solid var(--linie2); background: #120e1b; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.bildschirm .leiste { height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #191330; }
.bildschirm .leiste i { width: 10px; height: 10px; border-radius: 50%; background: rgba(196,178,255,.28); }
.bildschirm img { display: block; width: 100%; height: auto; }
.reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 3vw, 36px); justify-items: center; }
.reihe figure { margin: 0; display: grid; justify-items: center; gap: 12px; }
.reihe figcaption { color: var(--text2); font-size: 14px; text-align: center; max-width: 26ch; }
.reihe .geraet { width: min(260px, 100%); }
.kurz { max-width: 820px; margin: 0 auto; padding: 26px 30px; border-radius: 22px; background: var(--flaeche); border: 1px solid var(--linie2); }
.kurz h2 { font-size: clamp(20px, 2.4vw, 26px); margin: 0 0 10px; }
.kurz p { margin: 0; color: var(--text); font-size: 17px; line-height: 1.6; }
@media (max-width: 700px) { .reihe { grid-template-columns: 1fr; } .telefonbrett .geraet:not(.mitte) { display: none; } .telefonbrett .geraet.mitte { width: min(260px, 70vw); } }

/* Passt dazu und Übersichten (09.10.2026): Verweiskarten aus dem Seitenregister */
.verweise { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.verweis { display: block; padding: 20px 22px; border-radius: 20px; background: var(--flaeche); border: 1px solid var(--linie2); color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s; }
.verweis:hover { border-color: var(--amethyst); transform: translateY(-2px); }
.verweis b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.verweis span { display: block; color: var(--text2); font-size: 14px; line-height: 1.45; }
.verweis:focus-visible { outline: 3px solid var(--amethyst); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .verweis { transition: none; } .verweis:hover { transform: none; } }
/* Pokémon-Set-Seiten (08.10.2026) */
.setzahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:820px;margin:22px auto 0}
.setzahlen div{background:var(--tiefe);border:1px solid var(--linie2);border-radius:16px;padding:14px 10px;text-align:center}
.setzahlen b{display:block;font-size:22px;line-height:1.25}.setzahlen span{font-size:14px;color:var(--text2)}
details.checkliste{max-width:820px;margin:0 auto}
details.checkliste>summary{cursor:pointer;text-align:center;font-weight:600;padding:12px 16px;border:1px solid var(--linie2);border-radius:999px;margin:0 auto 16px;width:max-content;max-width:100%}
details.checkliste>summary:focus-visible{outline:3px solid #d5c8ff;outline-offset:3px}
h3.serie{text-align:center;margin:28px 0 10px;font-size:19px}
.setnachbarn{margin-top:18px}.setnachbarn a{display:inline-block;padding:6px 4px}
p.quelle{font-size:14px;color:var(--text2);margin-top:20px}
@media (max-width:700px){.setzahlen{grid-template-columns:repeat(2,1fr)}}
.setbreit{max-width:820px;margin:0 auto}.setbreit>p{text-align:center;margin-top:16px}
.tabelle .jahr{display:block;font-size:13px;color:var(--text2)}
@media (max-width:700px){.setbreit .tabelle th,.setbreit .tabelle td,.checkliste .tabelle th,.checkliste .tabelle td{padding:10px 6px;font-size:13.5px;hyphens:auto}.setbreit .tabelle,.checkliste .tabelle{min-width:0}}
@media print{body{background:#fff;color:#000}p,span,b,h1,h2,h3,td,th,li{color:#000!important}.nc-ew,header,footer,nav,.buehne .telefonbrett,.unterbrett,.schluss,.verweise,.zurueck,details.checkliste>summary{display:none!important}
.tabelle th,.tabelle td{color:#000;border-color:#999;padding:4px 6px;font-size:11px}.tabellenrahmen{overflow:visible;border:0}a{color:#000;text-decoration:none}}