/* KickerUp – Mitternacht (Simon, 21.10.2026): fast schwarz, warmes Weiß als Schrift, Bernstein als einziger Akzent.
   Aufbau wie falthangar.com (schwebender Kopf, Werkbank mit mitlaufender Bühne, Schrittkarten), Farben eigen. */
@font-face { font-family: 'Archivo'; src: url('schrift/archivo-500-900-latin.woff2') format('woff2'); font-weight: 500 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Archivo'; src: url('schrift/archivo-500-900-latin-ext.woff2') format('woff2'); font-weight: 500 900; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF; }
@font-face { font-family: 'Instrument Sans'; src: url('schrift/instrument-sans-400-700-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Instrument Sans'; src: url('schrift/instrument-sans-400-700-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'IBM Plex Mono'; src: url('schrift/ibm-plex-mono-500-latin.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('schrift/ibm-plex-mono-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --grund: #050607;
  --grund-2: #08090b;
  --grund-3: #0e1013;
  --flaeche: #0c0d10;
  --flaeche-2: #131519;
  --tinte: #f3f0e8;
  --tinte-2: #bcbfc5;
  --tinte-3: #8a8e96;
  --akzent: #f6b941;
  --akzent-hell: #ffd481;
  --akzent-tief: #b47b16;
  --akzent-tinte: #1b1305;
  /* dieselben Farben als Kanäle für Durchsicht: rgb(var(--akzent-rgb) / .3) */
  --grund-rgb: 5 6 7;
  --glas-rgb: 9 10 12;
  --glas-hell-rgb: 28 30 35;
  --tinte-rgb: 243 240 232;
  --akzent-rgb: 246 185 65;
  --licht-rgb: 255 238 214;
  /* Verläufe: Schaustück, Werkbank, Profikarten, Produkte */
  --held-1: #15181d;
  --held-2: #08090b;
  --wb-1: #181b21;
  --wb-2: #0b0c0f;
  --wb-3: #060708;
  --karte-1: #121419;
  --karte-2: #0b0c0f;
  --karte-3: #07080a;
  --karte-licht: #1d2129;
  --produkt-1: #1a1d23;
  --linie: rgb(var(--tinte-rgb) / .09);
  --linie-2: rgb(var(--tinte-rgb) / .17);
  --akzent-weich: rgb(var(--akzent-rgb) / .12);
  --feld: #2d6a47;
  --gegner: #9db3d4;
  --schrift-marke: 'Archivo', 'Arial Black', 'Segoe UI', sans-serif;
  --schrift: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --schrift-daten: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;
  --rand: clamp(16px, 3.4vw, 48px);
  --breite: 1480px;
  --kopf-oben: 14px;
  --kopf: 60px;
  --kopf-platz: calc(env(safe-area-inset-top, 0px) + var(--kopf-oben) + var(--kopf) + 14px);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --radius: 18px;
  --radius-klein: 10px;
  --schatten: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 70px -40px rgba(0, 0, 0, .8);
  --kante: inset 0 1px 0 rgba(255, 255, 255, .06);
  color-scheme: dark;
}
/* Farbwelten (zur Wahl, umgeschaltet per data-farbe an <html>; ohne Angabe gilt Mitternacht, oben in :root).
   Flutlicht: Waldschwarz, Knochenweiß, Bernstein (erste Fassung). Champagner: warmes Schwarz, Champagnergold.
   Arena: Graphit und Eisblau wie eine Halle unter LED-Licht. Licht und Akzente der 3D-Szene ziehen mit (buehne.js). */
:root[data-farbe="flutlicht"] {
  --grund: #0a0f0c; --grund-2: #0e1511; --grund-3: #142019; --flaeche: #111914; --flaeche-2: #17221b;
  --tinte: #efebe0; --tinte-2: #bcc5b9; --tinte-3: #8f9b8f;
  --akzent: #f4b740; --akzent-hell: #ffd27a; --akzent-tief: #b9801b; --akzent-tinte: #1b1305;
  --grund-rgb: 10 15 12; --glas-rgb: 12 18 14; --glas-hell-rgb: 30 42 35; --tinte-rgb: 239 235 224; --akzent-rgb: 244 183 64; --licht-rgb: 255 230 190;
  --held-1: #1a2a20; --held-2: #0d1411; --wb-1: #1d2f24; --wb-2: #101914; --wb-3: #0a100d;
  --karte-1: #16241b; --karte-2: #0f1813; --karte-3: #0b110e; --karte-licht: #23362a; --produkt-1: #213226;
}
:root[data-farbe="champagner"] {
  --grund: #0b0a08; --grund-2: #100e0b; --grund-3: #17140f; --flaeche: #13110d; --flaeche-2: #1b1813;
  --tinte: #f4ecdc; --tinte-2: #cbc1ab; --tinte-3: #9b917d;
  --akzent: #dcbc7c; --akzent-hell: #eed6a2; --akzent-tief: #9c7c3c; --akzent-tinte: #1a1408;
  --grund-rgb: 11 10 8; --glas-rgb: 16 14 11; --glas-hell-rgb: 40 35 27; --tinte-rgb: 244 236 220; --akzent-rgb: 220 188 124; --licht-rgb: 255 226 176;
  --held-1: #231e15; --held-2: #0f0d0a; --wb-1: #262016; --wb-2: #13110c; --wb-3: #0b0a08;
  --karte-1: #1e1a13; --karte-2: #13100c; --karte-3: #0c0b08; --karte-licht: #2e2719; --produkt-1: #2a2418;
}
:root[data-farbe="arena"] {
  --grund: #08090c; --grund-2: #0c0e12; --grund-3: #12151b; --flaeche: #101318; --flaeche-2: #171b22;
  --tinte: #eef2f7; --tinte-2: #b5bdc9; --tinte-3: #858f9d;
  --akzent: #7cc8ff; --akzent-hell: #abdcff; --akzent-tief: #3a86c0; --akzent-tinte: #04121d;
  --grund-rgb: 8 9 12; --glas-rgb: 12 15 20; --glas-hell-rgb: 30 37 48; --tinte-rgb: 238 242 247; --akzent-rgb: 124 200 255; --licht-rgb: 205 230 255;
  --held-1: #151c27; --held-2: #0a0d12; --wb-1: #19212d; --wb-2: #0d1016; --wb-3: #08090c;
  --karte-1: #161c26; --karte-2: #0e1218; --karte-3: #0a0c10; --karte-licht: #1e2836; --produkt-1: #1b2330;
}
html { background: var(--grund); scroll-padding-top: var(--kopf-platz); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--tinte); font-family: var(--schrift); font-size: 17px; line-height: 1.65; letter-spacing: .005em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body::after { content: ''; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E"); }
:where(h1, h2, h3, h4, p, ol, ul, figure, dl, dd, blockquote) { margin: 0; padding: 0; }
:where(ol, ul) { list-style: none; }
a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--akzent-hell); }
button { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--akzent); color: var(--akzent-tinte); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zahl { font-variant-numeric: tabular-nums; }
.ueberzeile { font-family: var(--schrift-daten); font-weight: 500; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); }
.marke-schrift { font-family: var(--schrift-marke); font-weight: 850; text-transform: uppercase; letter-spacing: -.02em; line-height: .94; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Kopf ---------- */
.kopf { position: fixed; z-index: 50; top: calc(env(safe-area-inset-top, 0px) + var(--kopf-oben)); left: var(--rand); right: var(--rand); height: var(--kopf);
  display: flex; align-items: center; gap: 18px; padding: 0 8px 0 18px; border-radius: 999px; max-width: calc(var(--breite) - 2 * var(--rand)); margin: 0 auto;
  background: linear-gradient(180deg, rgb(var(--glas-hell-rgb) / .46), rgb(var(--glas-rgb) / .6)); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .03), 0 24px 50px -26px rgba(0, 0, 0, .95), 0 2px 8px -3px rgba(0, 0, 0, .6); }
/* Liquid Glass: Lichtkante (heller links und rechts, wo das Glas sich biegt), weicher Glanz oben, warmer Schein unten */
.kopf::before, .kopf::after { content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: inherit; }
.kopf::before { inset: 0; padding: 1px; background: linear-gradient(100deg, rgba(255, 255, 255, .46), rgba(255, 255, 255, .1) 16%, rgba(255, 255, 255, .03) 50%, rgba(255, 255, 255, .1) 84%, rgba(255, 255, 255, .28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.kopf::after { inset: 1px; background: radial-gradient(55% 130% at 10% -30%, rgba(255, 255, 255, .11), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 45%), radial-gradient(35% 120% at 92% 140%, rgb(var(--akzent-rgb) / .1), transparent 70%); }
.logo { display: flex; align-items: center; gap: 10px; color: var(--tinte); text-decoration: none; flex: none; }
.logo:hover { color: var(--tinte); }
.logo .marke-logo { height: 34px; width: auto; }
.nav { display: flex; gap: 2px; margin: 0 auto; }
.nav { align-items: center; }
.nav a { position: relative; color: var(--tinte-2); text-decoration: none; font-size: 15px; font-weight: 500; padding: 9px 14px; border-radius: 999px; transition: color .15s, background-color .15s, box-shadow .15s; }
.nav a:hover { color: var(--tinte); background: rgb(var(--tinte-rgb) / .06); }
.nav a[aria-current="page"] { color: var(--tinte); background: linear-gradient(180deg, rgb(var(--tinte-rgb) / .12), rgb(var(--tinte-rgb) / .05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgb(var(--tinte-rgb) / .07); }
.nav a[aria-current="page"]::after { content: ''; position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 8px rgb(var(--akzent-rgb) / .9); }
.nav::after { content: ''; flex: none; width: 1px; height: 24px; margin-left: 12px; background: linear-gradient(transparent, rgb(var(--tinte-rgb) / .3), transparent); }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 650; font-size: 15.5px; text-decoration: none; white-space: nowrap; transition: transform .14s var(--ease), background-color .15s, color .15s; }
.knopf:active { transform: translateY(1px) scale(.98); }
.knopf-voll { background: var(--akzent); color: var(--akzent-tinte); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 30px -14px rgb(var(--akzent-rgb) / .55); }
.knopf-voll:hover { background: var(--akzent-hell); color: var(--akzent-tinte); }
.knopf-leise { background: rgb(var(--tinte-rgb) / .07); color: var(--tinte); box-shadow: inset 0 0 0 1px var(--linie-2); }
.knopf-leise:hover { background: rgb(var(--tinte-rgb) / .12); color: var(--tinte); }
.knopf svg { width: 18px; height: 18px; flex: none; }
.kopf .knopf { min-height: 44px; }
.kopf .knopf-kopf { color: var(--akzent); background: linear-gradient(180deg, rgb(var(--akzent-rgb) / .2), rgb(var(--akzent-rgb) / .06));
  box-shadow: inset 0 0 0 1px rgb(var(--akzent-rgb) / .5), inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 26px -6px rgb(var(--akzent-rgb) / .55); }
.kopf .knopf-kopf:hover { color: var(--akzent-hell); background: linear-gradient(180deg, rgb(var(--akzent-rgb) / .3), rgb(var(--akzent-rgb) / .12)); }
.menue-knopf { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(var(--tinte-rgb) / .08); cursor: pointer; place-items: center; }
.menue-knopf svg { width: 20px; height: 20px; }
.menue { position: fixed; inset: 0; z-index: 49; background: rgb(var(--grund-rgb) / .86); backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4); padding: calc(var(--kopf-platz) + 12px) var(--rand) 32px; display: flex; flex-direction: column; gap: 4px; }
.menue a { font-family: var(--schrift-marke); font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 8vw, 44px); letter-spacing: -.02em; color: var(--tinte); text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--linie); }
@media (max-width: 1080px) { .nav { display: none; } .menue-knopf { display: grid; } .kopf { justify-content: space-between; } .kopf .knopf-kopf { margin-left: auto; } }
/* Am Handy bleibt vom Shop-Knopf das Taschen-Symbol, der Name bleibt für Vorleser */
@media (max-width: 480px) { .kopf .knopf-kopf { flex: none; width: 44px; padding: 0; } .kopf .knopf-kopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .logo .marke-logo { height: 30px; } }

/* ---------- Startseite: Schaustück ---------- */
.held { position: relative; min-height: max(640px, 100svh); overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 70% 40%, var(--held-1) 0%, var(--held-2) 55%, var(--grund) 100%); }
.held .buehne-flaeche { position: absolute; inset: 0; z-index: 1; }
/* Gegenüber am Tisch: Fotos hinter der Leinwand, der Tisch verdeckt sie. Lage und Maßstab setzt schaustueck.js
   (Bild in CSS 1000 px hoch, skaliert von oben links). Scharf und in voller Farbe (Simon, 21.10.2026: „super gesund“),
   unten ins Dunkel ausgeblendet wie unter Flutlicht von oben; beim Wechsel geht das Licht an.
   Lichtschein am Rahmen, Maske am Bild: an derselben Ebene schnitte die Maske den Schein zu einem Rechteck. */
.held-leute { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; transition: opacity .5s; }
.leute-weg .held-leute, .leute-weg .held-profi { opacity: 0; visibility: hidden; }
.held-person { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; will-change: transform, opacity; transition: opacity 1.2s var(--ease);
  filter: drop-shadow(0 0 3px rgb(var(--akzent-rgb) / .45)) drop-shadow(0 -20px 70px rgb(var(--akzent-rgb) / .18)); }
.held-person img { display: block; height: 1000px; width: auto; max-width: none; filter: brightness(.95) contrast(1.04) saturate(1.04);
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 97%); mask-image: linear-gradient(180deg, #000 50%, transparent 97%); }
.held-person[data-haltung="aufrecht"] img { -webkit-mask-image: linear-gradient(180deg, #000 33%, transparent 76%); mask-image: linear-gradient(180deg, #000 33%, transparent 76%); }
.held-person.ist-da { opacity: 1; }
.held-person.ist-da img { animation: licht-an 1.6s var(--ease) both; }
@keyframes licht-an { 0% { filter: brightness(.3) contrast(1.04) saturate(.7); } 100% { filter: brightness(.95) contrast(1.04) saturate(1.04); } }
.held-profi { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease); }
.held-profi.ist-gesetzt { opacity: 1; }
.hp-linie { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: linear-gradient(90deg, var(--akzent), rgb(var(--akzent-rgb) / .35)); transition: opacity .3s; }
.hp-linie::before { content: ''; position: absolute; left: -3.5px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 4px rgb(var(--akzent-rgb) / .18); }
.hp-karte { position: absolute; left: 0; top: 0; pointer-events: auto; width: max-content; max-width: min(20rem, calc(100vw - 32px)); padding: 11px 16px 14px; border-radius: 16px;
  background: rgb(var(--glas-rgb) / .58); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px var(--linie), 0 24px 50px -30px #000; }
.hp-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hp-ticks { display: flex; gap: 4px; }
.hp-ticks button { width: 24px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; border-radius: 4px; }
.hp-ticks button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.hp-ticks i { position: relative; display: block; height: 3px; border-radius: 2px; overflow: hidden; background: rgb(var(--tinte-rgb) / .18); }
.hp-ticks i::after { content: ''; position: absolute; inset: 0; background: var(--akzent); transform-origin: 0 50%; transform: scaleX(0); }
.hp-ticks [aria-pressed="true"] i::after { transform: scaleX(var(--lauf, 1)); }
.hp-namen { display: grid; margin-top: 7px; }
.hp-name { grid-area: 1 / 1; display: grid; gap: 6px; color: var(--tinte); text-decoration: none; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .45s, transform .45s var(--ease), visibility 0s .45s; }
.hp-name.ist-da { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .2s, transform .5s .2s var(--ease), visibility 0s; }
.hp-name strong { font-family: var(--schrift-marke); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; line-height: .92; font-size: clamp(21px, 1.9vw, 30px); transition: color .2s; }
.hp-name span { font-family: var(--schrift-daten); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2); }
.hp-name span b { color: var(--akzent-tinte); background: var(--akzent); font-weight: 600; padding: 2px 6px; border-radius: 5px; margin-right: 4px; letter-spacing: .04em; }
.hp-name:hover strong, .hp-name:focus-visible strong { color: var(--akzent); }
@media (max-width: 760px), (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) { .hp-karte { padding: 8px 12px 10px; border-radius: 13px; } .hp-name strong { font-size: 18px; } .hp-name span { font-size: 10.5px; } .hp-kopf .ueberzeile { font-size: 10px; } }
.ohne-3d .held-leute, .ohne-3d .held-profi { display: none; }
.held-mini { display: none; }
@media (max-width: 760px) {
  .held-leute, .held-profi { display: none; }
  .held-mini { display: inline-flex; align-self: flex-start; align-items: center; gap: 11px; margin-bottom: 16px; padding: 5px 16px 5px 5px; border-radius: 999px; color: var(--tinte); text-decoration: none;
    background: rgb(var(--glas-rgb) / .66); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--linie); }
  .hm-koepfe { display: flex; }
  .hm-koepfe img { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, rgb(var(--akzent-rgb) / .5), var(--karte-1) 72%); box-shadow: 0 0 0 2px var(--held-2), 0 0 0 3px rgb(var(--akzent-rgb) / .5); }
  .hm-koepfe img + img { margin-left: -11px; }
  .hm-text { display: grid; gap: 2px; line-height: 1.15; }
  .hm-text .ueberzeile { font-size: 10px; }
  .hm-text b { font-size: 14.5px; font-weight: 650; }
}
.held .buehne-flaeche canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.held-spalte { position: absolute; z-index: 2; left: 0; bottom: 0; top: 0; width: min(52rem, 100%); pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--grund-rgb) / .94) 0%, rgb(var(--grund-rgb) / .88) 44%, rgb(var(--grund-rgb) / .62) 68%, rgb(var(--grund-rgb) / 0) 100%); }
/* Schrift über der 3D-Szene: leiser dunkler Hof, damit Stangen und Fotos hinter den Buchstaben nicht stören (gemessen) */
.held h1, .held p.unter, .held-text > .ueberzeile { text-shadow: 0 1px 2px rgb(var(--grund-rgb) / .6), 0 0 22px rgb(var(--grund-rgb) / .85); }
@media (max-width: 760px) {
  /* Abdunklung erst 40 px über der Profi-Leiste, nach 120 px dicht: der Tisch darüber bleibt frei */
  .held-spalte { width: 100%; top: auto; height: calc(100% - var(--kopf-platz) - var(--tischband) + 40px);
    background: linear-gradient(180deg, rgb(var(--grund-rgb) / 0) 0, rgb(var(--grund-rgb) / .95) 120px, rgb(var(--grund-rgb) / .97) 100%); }
  .held-knoepfe { gap: 10px; }
  .held-knoepfe .knopf { flex: 1 1 auto; padding: 0 16px; }
}
.held-text { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; min-height: max(640px, 100svh);
  padding: calc(var(--kopf-platz) + 24px) var(--rand) clamp(28px, 5vh, 56px); max-width: var(--breite); margin: 0 auto; pointer-events: none; }
/* Handy: fester Streifen für den Tisch zwischen Kopfleiste und Schrift, mindestens 150 px (Simon, 23.10.2026: „noch ein
   bisschen mehr vom Tischkicker … nach unten in der mobilen Ansicht“; vorher blieben bei 320 bis 375 px nur 40 bis 55 px).
   schaustueck.js setzt den Tisch mittig hinein. Steht hinter der Grundregel, sonst gewinnt deren padding. */
@media (max-width: 760px) {
  .held { --tischband: clamp(150px, 22svh, 230px); }
  .held-text { box-sizing: border-box; justify-content: flex-end; padding-top: calc(var(--kopf-platz) + var(--tischband)); }
}
.held-text > * { pointer-events: auto; max-width: 40rem; }
.held h1 { font-family: var(--schrift-marke); font-weight: 870; text-transform: uppercase; letter-spacing: -.035em; line-height: .9; font-size: clamp(2.9rem, 6vw, 6rem); margin: 14px 0 18px; max-width: 52rem; }
.held h1 em { font-style: normal; color: var(--akzent); }
.held p.unter { color: var(--tinte-2); font-size: clamp(17px, 1.5vw, 19.5px); max-width: 32rem; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* Abzug: der Griff des Schaustücks, nach Simons Vorlage vom 21.10.2026. Leuchtende Spur bis zur Griffmitte, gerillter
   Gummigriff mit Pfeilen, Tor mit Netz und Glimmen, Phasen als Punkte auf einer Linie (durch: glimmt, jetzt: hell).
   Griff- und Torbreite liest schaustueck.js aus dem Bild, die Spur folgt über --spur. */
.abzug { position: relative; margin-top: 28px; max-width: 31rem; padding: 16px 20px 14px; border-radius: 22px;
  background: linear-gradient(180deg, rgb(var(--glas-hell-rgb) / .55), rgb(var(--glas-rgb) / .84) 62%);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgb(var(--tinte-rgb) / .09), 0 30px 60px -30px #000; }
.abzug-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.abzug-status { font-size: 14.5px; color: var(--tinte-2); transition: color .2s; }
.abzug.ist-tor .abzug-status { color: var(--akzent); font-weight: 650; }
.abzug-bahn { --spur: 0px; position: relative; height: 74px; margin: 6px 0 2px; cursor: grab; touch-action: none; outline: none; }
.abzug-bahn:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 12px; }
.abzug-bahn.zieht { cursor: grabbing; }
.abzug-stange { position: absolute; left: 0; right: 56px; top: 50%; height: 8px; margin-top: -2px; border-radius: 5px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgb(var(--tinte-rgb) / .07)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .75), 0 1px 0 rgb(var(--tinte-rgb) / .07); }
.abzug-spur { position: absolute; left: 0; top: 0; bottom: 0; width: var(--spur); border-radius: inherit;
  background: linear-gradient(180deg, var(--akzent-hell), var(--akzent) 55%, var(--akzent-tief));
  box-shadow: 0 0 16px rgb(var(--akzent-rgb) / .55), 0 0 3px rgb(var(--akzent-rgb) / .9); }
.abzug-tor { position: absolute; right: 0; top: 50%; width: 44px; height: 44px; margin-top: -20px; border-radius: 9px; border: 1.5px solid rgb(var(--akzent-rgb) / .75);
  background: repeating-linear-gradient(90deg, rgb(var(--akzent-rgb) / .3) 0 1px, transparent 1px 6px), repeating-linear-gradient(0deg, rgb(var(--akzent-rgb) / .3) 0 1px, transparent 1px 6px), rgba(0, 0, 0, .55);
  box-shadow: 0 0 18px -2px rgb(var(--akzent-rgb) / .38), inset 0 0 10px rgba(0, 0, 0, .65); transition: background-color .25s, box-shadow .25s; }
.abzug.ist-tor .abzug-tor { background-color: rgb(var(--akzent-rgb) / .85); box-shadow: 0 0 32px 2px rgb(var(--akzent-rgb) / .7); }
.abzug-griff { position: absolute; top: 50%; left: 0; width: 112px; height: 40px; margin-top: -18px; border-radius: 13px; will-change: transform;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .5)), repeating-linear-gradient(90deg, #0b0d0d 0 6px, #2a3030 6px 8px, #0b0d0d 8px 9px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -2px 4px rgba(0, 0, 0, .8), inset 5px 0 7px rgba(0, 0, 0, .65), inset -5px 0 7px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .65), 0 14px 22px -10px #000;
  transition: transform .5s var(--ease); }
.abzug-pfeile { position: absolute; left: 50%; bottom: calc(100% + 5px); width: 26px; height: 13px; margin-left: -13px; color: var(--akzent); filter: drop-shadow(0 0 5px rgb(var(--akzent-rgb) / .8)); transition: opacity .3s; }
.abzug-pfeile svg { display: block; width: 100%; height: 100%; animation: pfeile 1.6s var(--ease) infinite; }
@keyframes pfeile { 0%, 100% { transform: translateX(-3px); opacity: .55; } 50% { transform: translateX(3px); opacity: 1; } }
.abzug.ist-tor .abzug-pfeile { opacity: 0; }
.abzug-bahn.zieht .abzug-griff, .abzug.laeuft .abzug-griff { transition: none; }
@media (hover: hover) and (pointer: fine) { .abzug-bahn:hover .abzug-griff { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 4px rgba(0, 0, 0, .8), inset 5px 0 7px rgba(0, 0, 0, .65), inset -5px 0 7px rgba(0, 0, 0, .65), 0 0 0 1px rgb(var(--akzent-rgb) / .35), 0 16px 26px -10px #000; } }
.abzug.wartet .abzug-griff { animation: abzug-wink 3.2s var(--ease) 1.2s infinite; }
@keyframes abzug-wink { 0%, 70%, 100% { transform: translateX(0); } 78% { transform: translateX(14px); } 86% { transform: translateX(0); } }
.abzug-phasen { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font-family: var(--schrift-daten); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-3); }
.abzug-phasen::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 5px; height: 1px; background: rgb(var(--tinte-rgb) / .14); }
.abzug-phasen li { position: relative; padding-top: 18px; transition: color .25s; }
.abzug-phasen li::before { content: ''; position: absolute; left: 50%; top: 5px; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: rgb(var(--tinte-rgb) / .24); transition: transform .3s var(--ease), background-color .25s, box-shadow .25s; }
.abzug-phasen li.ist-durch { color: var(--tinte-2); }
.abzug-phasen li.ist-durch::before { background: var(--akzent); box-shadow: 0 0 8px rgb(var(--akzent-rgb) / .85); }
.abzug-phasen li.ist-aktiv { color: var(--tinte); font-weight: 600; }
.abzug-phasen li.ist-aktiv::before { background: var(--akzent-hell); transform: scale(1.55); box-shadow: 0 0 0 2px rgb(var(--akzent-rgb) / .28), 0 0 12px rgb(var(--akzent-rgb) / .95); }
@media (prefers-reduced-motion: reduce) { .abzug.wartet .abzug-griff, .abzug-pfeile svg { animation: none; } }
@media (max-width: 480px) { .abzug { padding: 12px 14px 10px; } .abzug-kopf { flex-direction: column; align-items: flex-start; gap: 2px; } .abzug-kopf .ueberzeile { white-space: nowrap; }
  .abzug-phasen { font-size: 10px; letter-spacing: .05em; } .abzug-griff { width: 84px; } .abzug-tor { width: 38px; height: 38px; margin-top: -17px; } .abzug-stange { right: 48px; } }
.ohne-3d .abzug { display: none; }
.held-poster { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.ohne-3d .held-poster { opacity: 1; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding-top: clamp(80px, 11vw, 150px); padding-bottom: clamp(40px, 6vw, 80px); }
.abschnitt-kopf { display: grid; gap: 14px; margin-bottom: clamp(30px, 4vw, 54px); max-width: 52rem; }
.abschnitt h2, .profi-buehne h2 { font-family: var(--schrift-marke); font-weight: 850; text-transform: uppercase; letter-spacing: -.03em; line-height: .95; font-size: clamp(2.3rem, 5vw, 4.4rem); }
.abschnitt-kopf p { color: var(--tinte-2); font-size: 18px; max-width: 40rem; }
.leise { color: var(--tinte-2); }

/* Drei Schaustücke: großes Feld links, zwei rechts */
.vorn { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.vorn a { position: relative; display: block; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--tinte); background: var(--flaeche); box-shadow: var(--schatten), var(--kante); min-height: 260px; isolation: isolate; }
.vorn a:first-child { grid-row: span 2; min-height: 560px; }
.vorn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease); }
.vorn a::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(var(--grund-rgb) / .95) 0%, rgb(var(--grund-rgb) / .9) 32%, rgb(var(--grund-rgb) / .55) 60%, rgb(var(--grund-rgb) / 0) 82%); }
/* Schrift über den hellen Tischseiten der neuen Poster und Filme (gemessen): leiser dunkler Hof wie im Schaustück */
.vorn .vorn-text { text-shadow: 0 1px 2px rgb(var(--grund-rgb) / .7), 0 0 18px rgb(var(--grund-rgb) / .9); }
/* Wie bei den Profikarten hängt der dunkle Grund an der Schrift: dicht hinter jeder Zeile, 90 px darüber ausgeblendet */
.vorn .vorn-text::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: -90px; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--grund-rgb) / 0) 0, rgb(var(--grund-rgb) / .6) 40px, rgb(var(--grund-rgb) / .9) 72px, rgb(var(--grund-rgb) / .94) 90px, rgb(var(--grund-rgb) / .96) 100%); }
.vorn .vorn-text { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 2.4vw, 30px); display: grid; gap: 6px; }
.vorn h3 { font-family: var(--schrift-marke); font-weight: 850; text-transform: uppercase; letter-spacing: -.025em; line-height: .95; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.vorn a:first-child h3 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); }
.vorn p { color: var(--tinte-2); font-size: 15.5px; max-width: 30rem; }
@media (hover: hover) and (pointer: fine) { .vorn a:hover img { transform: scale(1.035); } }
@media (max-width: 860px) { .vorn { grid-template-columns: 1fr; } .vorn a:first-child { grid-row: auto; min-height: 420px; } }

/* Aufstellung: alle Techniken als Tafel */
.aufstellung { border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten), var(--kante); overflow: hidden; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; border-bottom: 1px solid var(--linie); }
.filter button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: rgb(var(--tinte-rgb) / .05); color: var(--tinte-2); cursor: pointer; font-size: 14.5px; font-weight: 550; transition: background-color .15s, color .15s; }
.filter button:hover { background: rgb(var(--tinte-rgb) / .1); color: var(--tinte); }
.filter button[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-tinte); }
.filter .zaehler { font-family: var(--schrift-daten); font-size: 12px; opacity: .7; margin-left: 6px; }
.tafel { width: 100%; border-collapse: collapse; }
.tafel th { text-align: left; font-family: var(--schrift-daten); font-weight: 500; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-3); padding: 12px 16px; border-bottom: 1px solid var(--linie); }
.tafel td { padding: 0; border-bottom: 1px solid var(--linie); }
.tafel tr:last-child td { border-bottom: 0; }
.tafel .zeile { display: grid; grid-template-columns: 92px minmax(0, 1.4fr) minmax(0, 1fr) 110px 120px 28px; align-items: center; gap: 12px; padding: 14px 16px; color: var(--tinte); text-decoration: none; transition: background-color .15s; }
.tafel a.zeile:hover { background: rgb(var(--akzent-rgb) / .06); }
.tafel .nr { font-family: var(--schrift-daten); font-size: 13px; color: var(--tinte-3); }
.tafel .name { font-weight: 650; font-size: 17px; line-height: 1.3; display: flex; align-items: center; gap: 14px; }
.tafel .mini { width: 78px; height: 52px; flex: none; object-fit: cover; border-radius: 9px; background: var(--flaeche-2); box-shadow: inset 0 0 0 1px var(--linie); }
@media (max-width: 860px) { .tafel .mini { width: 58px; height: 40px; } }
.tafel .name small { display: block; font-weight: 450; color: var(--tinte-3); font-size: 13.5px; }
.tafel .stange { color: var(--tinte-2); font-size: 14.5px; }
.punkte { display: inline-flex; gap: 4px; }
.punkte i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--tinte-rgb) / .14); }
.punkte i.an { background: var(--akzent); }
.tafel .pfeil { color: var(--tinte-3); }
.tafel tr[data-bald] .zeile { color: var(--tinte-3); }
.marke-bald { font-family: var(--schrift-daten); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-3); border: 1px solid var(--linie-2); border-radius: 999px; padding: 2px 8px; }
@media (max-width: 860px) {
  .tafel thead { display: none; }
  .tafel .zeile { grid-template-columns: 64px minmax(0, 1fr) 24px; row-gap: 4px; }
  .tafel .stange, .tafel .stufe, .tafel .schwer { grid-column: 2; font-size: 13.5px; }
  .tafel .stufe, .tafel .schwer { display: none; }
  .tafel .pfeil { grid-row: 1; grid-column: 3; }
}

/* ---------- Werkbank (Technikseite) ---------- */
.technik-kopf { padding: calc(var(--kopf-platz) + 36px) 0 28px; }
.brot { display: flex; gap: 8px; font-size: 14px; color: var(--tinte-3); margin-bottom: 18px; }
.brot a { color: var(--tinte-2); text-decoration: none; }
.brot a:hover { color: var(--akzent); }
.technik-kopf h1 { font-family: var(--schrift-marke); font-weight: 870; text-transform: uppercase; letter-spacing: -.035em; line-height: .9; font-size: clamp(3rem, 8vw, 7rem); }
.technik-kopf .unter { font-size: clamp(18px, 1.7vw, 22px); color: var(--tinte-2); margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: rgb(var(--tinte-rgb) / .06); box-shadow: inset 0 0 0 1px var(--linie); font-size: 14px; color: var(--tinte-2); }
.chip b { color: var(--tinte); font-weight: 650; }
.technik-kopf .kurz { max-width: 46rem; margin-top: 22px; font-size: 18.5px; color: var(--tinte); }

/* ---------- Werkbank (Bedienung neu am 23.10.2026, Simon: „perfekt bedienbar … in Vollbild … auf einem Tablet“) ----------
   Bühne = Szene oben, Steuerleiste darunter: die Leiste verdeckt die Szene nicht mehr (nur am Telefon liegt sie darüber).
   Zeile 1: Schritt zurück, Abspielen, Schritt weiter, Ablauf, Zeitlupe. Zeile 2: Blickwahl mit Namen, Stangenwinkel,
   Menü „Anzeige“ mit den Schaltern. Oben rechts in der Szene „Vollbild“. */
.werkbank { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(20px, 3vw, 44px); align-items: start; padding-bottom: 60px; }
.wb-vk { display: none; }
.wb-buehne { position: sticky; top: var(--kopf-platz); height: calc(100svh - var(--kopf-platz) - 20px); min-height: 520px; order: 2;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; container: buehne / inline-size;
  border-radius: 24px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 60% 30%, var(--wb-1) 0%, var(--wb-2) 58%, var(--wb-3) 100%);
  box-shadow: 0 0 0 1px rgb(var(--tinte-rgb) / .07), 0 40px 90px -50px #000; }
.wb-szene { position: relative; min-height: 0; }
.wb-leinwand { position: absolute; inset: 0; transition: opacity .25s; }
.wb-leinwand canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.wb-leinwand canvas:active { cursor: grabbing; }
.wechselt .wb-leinwand { opacity: .35; }
.wb-kopf { position: absolute; z-index: 3; top: 16px; left: 16px; display: grid; gap: 2px; padding: 10px 16px 12px; border-radius: 14px; background: rgb(var(--grund-rgb) / .66); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--linie); max-width: calc(100% - 180px); }
.wb-kopf strong { font-family: var(--schrift-marke); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: 20px; line-height: 1.1; }
.wb-vollbild { position: absolute; z-index: 3; top: 16px; right: 16px; background: rgb(var(--grund-rgb) / .66); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--linie); color: var(--tinte); }
.wb-vollbild:hover { background: rgb(var(--glas-hell-rgb) / .9); }
.wb-zurueckblick { position: absolute; z-index: 3; bottom: 16px; left: 16px; background: rgb(var(--grund-rgb) / .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgb(var(--akzent-rgb) / .45); color: var(--tinte); }
.wb-tipp { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--tinte); text-align: center;
  background: rgb(var(--grund-rgb) / .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--linie); pointer-events: none; transition: opacity .4s; }
.wb-tipp.geht { opacity: 0; }
.wb-zurueckblick:not([hidden]) ~ .wb-tipp { display: none; }

.wb-leiste { position: relative; z-index: 4; display: grid; gap: 10px; padding: 12px 14px 14px;
  background: rgb(var(--grund-rgb) / .8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 var(--linie); }
.wb-zeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wb-zeile .abstand { flex: 1; }
.wb-flach { min-height: 40px; min-width: 40px; padding: 0 12px; border-radius: 12px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; flex: none; text-decoration: none;
  background: rgb(var(--tinte-rgb) / .06); color: var(--tinte-2); font-size: 14px; font-weight: 600; transition: background-color .15s, color .15s, transform .12s var(--ease); }
.wb-flach:hover { background: rgb(var(--tinte-rgb) / .12); color: var(--tinte); }
.wb-flach:active { transform: scale(.96); }
.wb-flach[aria-pressed="true"] { background: var(--akzent-weich); color: var(--akzent); box-shadow: inset 0 0 0 1px rgb(var(--akzent-rgb) / .35); }
.wb-flach svg { width: 18px; height: 18px; flex: none; }
.wb-flach.gross { min-width: 52px; background: var(--akzent); color: var(--akzent-tinte); box-shadow: none; }
.wb-flach.gross:hover { background: var(--akzent-hell); color: var(--akzent-tinte); }
.wb-flach.gross .pause, .wb-flach.gross .nochmal, .wb-flach.gross[aria-pressed="true"] .start, .wb-flach.gross.ist-ende .start { display: none; }
.wb-flach.gross[aria-pressed="true"] .pause, .wb-flach.gross.ist-ende .nochmal { display: block; }
.wb-regler { position: relative; height: 40px; cursor: pointer; touch-action: none; flex: 1; min-width: 120px; }
.wb-spur { position: absolute; left: 0; right: 0; top: 12px; height: 6px; border-radius: 6px; background: rgb(var(--tinte-rgb) / .12); overflow: hidden; }
.wb-fortschritt { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--akzent); }
.wb-knopf { position: absolute; top: 6px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--tinte); box-shadow: 0 0 0 4px rgb(var(--akzent-rgb) / .3), 0 4px 10px #000; pointer-events: none; }
.wb-marken { position: absolute; left: 0; right: 0; top: 23px; height: 17px; }
.wb-marken button { position: absolute; transform: translateX(-50%); top: 0; border: 0; background: none; cursor: pointer; color: var(--tinte-3); font-family: var(--schrift-daten); font-size: 11.5px; padding: 2px 4px; line-height: 1; }
.wb-marken button::before { content: ''; position: absolute; left: 50%; top: -12px; width: 1px; height: 8px; background: rgb(var(--tinte-rgb) / .3); }
.wb-marken button.ist-aktiv { color: var(--akzent); }
.wb-regler:focus-visible { outline-offset: 2px; }

/* Blickwahl: ein Feld mit Namen; „Auto“ folgt den Schritten, ein gewählter Blick bleibt */
.wb-blickwahl { display: inline-flex; gap: 2px; padding: 3px; border-radius: 13px; background: rgb(var(--tinte-rgb) / .06); min-width: 0; }
.wb-blickwahl button { min-height: 36px; padding: 0 11px; border-radius: 10px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; flex: none;
  background: none; color: var(--tinte-2); font-size: 13.5px; font-weight: 600; transition: background-color .15s, color .15s; }
.wb-blickwahl button svg { width: 17px; height: 17px; flex: none; }
.wb-blickwahl button:hover { color: var(--tinte); background: rgb(var(--tinte-rgb) / .08); }
.wb-blickwahl button[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-tinte); }
.wb-winkel { display: inline-flex; align-items: center; gap: 8px; font-family: var(--schrift-daten); font-size: 12.5px; color: var(--tinte-3); flex: none; }
.wb-winkel svg { width: 26px; height: 26px; }
.wb-winkel [data-winkelnadel] { transform-origin: 50% 50%; transform-box: fill-box; }

/* Menü „Anzeige“: Schalter mit Namen, klappt über der Leiste auf */
.wb-anzeigemenue { position: absolute; z-index: 6; right: 12px; bottom: calc(100% + 8px); width: min(300px, calc(100% - 24px)); display: grid; gap: 2px; padding: 10px;
  border-radius: 16px; background: rgb(var(--grund-rgb) / .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--linie), 0 24px 50px -20px #000; }
.wb-anzeigemenue[hidden] { display: none; }
.wb-anzeigemenue .ueberzeile { padding: 4px 10px 6px; color: var(--tinte-3); }
.wb-wahl { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--tinte-2); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.wb-wahl svg { width: 18px; height: 18px; flex: none; }
.wb-wahl span { flex: 1; }
.wb-wahl i { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: rgb(var(--tinte-rgb) / .18); transition: background-color .15s; }
.wb-wahl i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--tinte-2); transition: transform .18s var(--ease), background-color .15s; }
.wb-wahl[aria-pressed="true"] { color: var(--tinte); }
.wb-wahl[aria-pressed="true"] i { background: var(--akzent); }
.wb-wahl[aria-pressed="true"] i::after { transform: translateX(16px); background: var(--akzent-tinte); }
.wb-wahl:hover { background: rgb(var(--tinte-rgb) / .06); }

.wb-ohne3d { position: absolute; inset: 0; display: none; place-items: center; text-align: center; padding: 32px; color: var(--tinte-2); }
.ohne-3d .wb-ohne3d { display: grid; }
.ohne-3d .wb-leiste, .ohne-3d .wb-vollbild, .ohne-3d .wb-tipp { display: none; }
.wb-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.ohne-3d .wb-poster { opacity: 1; }

.wb-schritte { order: 1; display: grid; gap: 14px; padding-top: 4px; }
.wb-schritte li { position: relative; padding: 22px 22px 24px 70px; border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--kante), inset 0 0 0 1px var(--linie); cursor: pointer; transition: background-color .2s, box-shadow .2s; min-height: 32vh; display: flex; flex-direction: column; justify-content: center; }
.wb-schritte li:hover { background: var(--flaeche-2); }
.wb-schritte li.ist-aktiv { background: linear-gradient(180deg, rgb(var(--akzent-rgb) / .09), rgb(var(--akzent-rgb) / .03)); box-shadow: inset 0 0 0 1px rgb(var(--akzent-rgb) / .4); }
.wb-schritte .nummer { position: absolute; left: 20px; top: 22px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--schrift-daten); font-weight: 600; font-size: 13.5px; background: rgb(var(--tinte-rgb) / .07); color: var(--tinte-2); }
.wb-schritte li.ist-aktiv .nummer { background: var(--akzent); color: var(--akzent-tinte); }
.wb-schritte h3 { font-family: var(--schrift-marke); font-weight: 800; text-transform: uppercase; letter-spacing: -.015em; font-size: 22px; line-height: 1.1; margin-bottom: 8px; }
.wb-schritte p { color: var(--tinte-2); font-size: 16.5px; }
.wb-schritte li.ist-aktiv p { color: var(--tinte); }
/* Die Leiste richtet sich nach der Breite der Bühne, nicht des Fensters (neben den Karten ist sie schmal) */
@container buehne (max-width: 760px) { .wb-winkel span { display: none; } }
@container buehne (max-width: 680px) { .wb-blickwahl button svg { display: none; } .wb-blickwahl button { padding: 0 10px; } }
@container buehne (max-width: 520px) { .wb-zeile-blick .wb-anzeige .lang { display: none; } }
@media (max-width: 860px) {
  .werkbank { grid-template-columns: 1fr; gap: 14px; }
  .wb-buehne { order: 0; position: sticky; top: calc(var(--kopf-platz) - 8px); height: min(58svh, 520px); min-height: 380px; z-index: 5; border-radius: 18px; }
  .wb-schritte li { min-height: 0; padding: 18px 18px 20px 62px; }
  .wb-schritte .nummer { left: 16px; top: 18px; }
  .wb-kopf { top: 10px; left: 10px; padding: 8px 12px 9px; max-width: calc(100% - 140px); }
  .wb-kopf strong { font-size: 16px; }
  .wb-vollbild { top: 10px; right: 10px; }
  .wb-zurueckblick { left: 10px; bottom: 10px; }
}
@media (min-width: 600px) and (max-width: 860px) { .wb-buehne { height: min(70svh, 760px); } }
/* Telefon: die Leiste liegt über der Szene wie bisher, der Ablauf bekommt eine eigene Zeile */
@media (max-width: 599px) {
  .wb-buehne { display: block; }
  .wb-szene { position: absolute; inset: 0; }
  .wb-leiste { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 10px; gap: 8px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--linie); background: rgb(var(--grund-rgb) / .76); }
  .wb-zeile-ablauf { flex-wrap: wrap; row-gap: 2px; }
  .wb-zeile-ablauf .wb-regler { order: 9; flex: 1 0 100%; height: 34px; }
  .wb-zeile-ablauf [data-aktion="zeitlupe"] { margin-left: auto; }
  .wb-marken button { font-size: 0; padding: 6px 8px; }
  .wb-winkel, .wb-zeile-blick .abstand { display: none; }
  .wb-blickwahl { flex: 1; }
  .wb-blickwahl button { flex: 1 1 0; padding: 0 4px; font-size: 12.5px; }
  .wb-blickwahl button svg { display: none; }
  .wb-zeile .wb-flach .lang { display: none; }
  .wb-anzeigemenue { left: 0; right: 0; width: auto; grid-template-columns: 1fr 1fr; column-gap: 4px; }
  .wb-anzeigemenue .ueberzeile { grid-column: 1 / -1; }
  .wb-wahl { font-size: 13.5px; padding: 0 8px; gap: 8px; }
  .wb-wahl svg { display: none; }
  .wb-zurueckblick { bottom: auto; top: 64px; }
  .wb-tipp { bottom: auto; top: 64px; font-size: 13px; }
  .wb-vollbild .lang { display: none; }
}

/* ---------- Vollbild: Lernansicht über die ganze Fläche ----------
   Quer (ab 640 px breit): Kopf oben, Bühne links, Schrittliste rechts (die aktive Karte offen, die anderen als Titel zum
   Antippen). Hochkant: Kopf, Bühne, darunter die Karte des aktiven Schritts. */
html.wb-vollbild-an, html.wb-vollbild-an body { overflow: hidden; overscroll-behavior: none; }
.werkbank.ist-vollbild { position: fixed; inset: 0; z-index: 100; margin: 0; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  gap: 0; align-items: stretch; background: var(--grund);
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "kopf" "buehne" "schritte"; }
.ist-vollbild .wb-vk { grid-area: kopf; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--grund); box-shadow: inset 0 -1px 0 var(--linie); }
.wb-vk-titel { flex: 1; min-width: 0; display: grid; gap: 1px; }
.wb-vk-titel .ueberzeile { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-vk-titel strong { font-family: var(--schrift-marke); font-weight: 850; text-transform: uppercase; letter-spacing: -.015em; font-size: 20px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-vk-nav { display: flex; gap: 6px; flex: none; }
.wb-wechsel .lang { display: grid; text-align: left; line-height: 1.15; max-width: 15ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-wechsel[rel="next"] .lang { text-align: right; }
.wb-wechsel .lang small { font-size: 11px; font-weight: 500; color: var(--tinte-3); text-transform: uppercase; letter-spacing: .08em; font-family: var(--schrift-daten); }
.ist-vollbild .wb-buehne { grid-area: buehne; position: relative; top: auto; height: auto; min-height: 0; order: 0; z-index: auto; border-radius: 0; box-shadow: none; }
.ist-vollbild .wb-vollbild, .ist-vollbild .wb-kopf { display: none; }   /* Schritt steht in der Liste daneben oder darunter */
.ist-vollbild .wb-schritte { grid-area: schritte; order: 0; display: block; padding: 10px 12px; max-height: 32svh; overflow-y: auto; overscroll-behavior: contain; background: var(--grund-2); box-shadow: inset 0 1px 0 var(--linie); }
.ist-vollbild .wb-schritte li { min-height: 0; padding: 12px 14px 14px 56px; display: none; }
.ist-vollbild .wb-schritte li.ist-aktiv { display: block; }
.ist-vollbild .wb-schritte .nummer { left: 14px; top: 12px; width: 30px; height: 30px; font-size: 12.5px; }
.ist-vollbild .wb-schritte h3 { font-size: 18px; margin: 4px 0 6px; }
.ist-vollbild .wb-schritte p { font-size: 15.5px; }
@media (min-aspect-ratio: 1/1) and (min-width: 640px) {
  .werkbank.ist-vollbild { grid-template-columns: minmax(0, 1fr) clamp(270px, 27vw, 380px); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "kopf kopf" "buehne schritte"; }
  .ist-vollbild .wb-schritte { display: grid; align-content: start; gap: 8px; max-height: none; padding: 12px; box-shadow: inset 1px 0 0 var(--linie); }
  .ist-vollbild .wb-schritte li { display: block; padding: 12px 14px 12px 54px; }
  .ist-vollbild .wb-schritte li:not(.ist-aktiv) h3 { margin: 4px 0 2px; font-size: 16px; color: var(--tinte-2); }
  .ist-vollbild .wb-schritte li:not(.ist-aktiv) p { display: none; }
}
@media (max-width: 1100px) { .wb-wechsel .lang { max-width: none; } .wb-wechsel .lang > :not(small) { display: none; } .wb-wechsel .lang small { font-size: 14px; font-weight: 600; color: inherit; text-transform: none; letter-spacing: 0; font-family: inherit; } }
@media (max-width: 760px) { .wb-vk .lang { display: none; } .wb-vk-titel strong { font-size: 17px; } }

/* Auswahl aller Techniken im Vollbild */
.wb-wahlfenster { position: fixed; inset: 0; z-index: 110; display: grid; grid-template-rows: auto minmax(0, 1fr); background: rgb(var(--grund-rgb) / .97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.wb-wahlfenster[hidden] { display: none; }
.wb-wahl-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 20px; box-shadow: inset 0 -1px 0 var(--linie); }
.wb-wahl-kopf strong { font-family: var(--schrift-marke); font-weight: 850; text-transform: uppercase; letter-spacing: -.015em; font-size: 22px; }
.wb-wahl-liste { overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 40px; display: grid; gap: 26px; align-content: start; }
.wb-wahl-liste h3 { margin-bottom: 10px; }
.wb-wahl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 172px), 1fr)); gap: 10px; }
.wb-wahl-raster a { display: grid; grid-template-rows: auto 1fr; border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--tinte); background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); transition: box-shadow .15s, background-color .15s; }
.wb-wahl-raster a:hover { background: var(--flaeche-2); }
.wb-wahl-raster a.ist-aktiv { box-shadow: inset 0 0 0 2px var(--akzent); }
.wb-wahl-raster img, .wb-wahl-raster .ohne-bild { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--wb-2); }
.wb-wahl-raster a > span { display: grid; gap: 2px; padding: 9px 12px 11px; font-weight: 600; font-size: 15px; line-height: 1.2; }
.wb-wahl-raster small { font-family: var(--schrift-daten); font-size: 11px; color: var(--tinte-3); letter-spacing: .06em; }

/* Details unter der Werkbank */
.details { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; padding-bottom: 40px; }
.block { grid-column: span 6; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--kante), inset 0 0 0 1px var(--linie); }
.block.breit { grid-column: span 12; }
.block.drittel { grid-column: span 4; }
.block h2 { font-family: var(--schrift-marke); font-weight: 800; text-transform: uppercase; letter-spacing: -.015em; font-size: 22px; margin-bottom: 14px; }
.block ul { display: grid; gap: 10px; }
.block li { position: relative; padding-left: 22px; color: var(--tinte-2); }
.block li::before { content: ''; position: absolute; left: 2px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); opacity: .8; }
.block.fehler li::before { background: #e36f55; border-radius: 2px; transform: rotate(45deg); }
.block p { color: var(--tinte-2); }
.quellen { display: grid; gap: 8px; }
.quellen li::before { display: none; }
.quellen li { padding-left: 0; }
.quellen a { color: var(--tinte-2); text-decoration-color: rgb(var(--tinte-rgb) / .3); }
.quellen a:hover { color: var(--akzent); }
@media (max-width: 860px) { .block, .block.drittel { grid-column: span 12; } }
.blaettern { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 10px 0 90px; }
.blaettern a { display: grid; gap: 4px; padding: 22px 24px; border-radius: var(--radius); background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); text-decoration: none; color: var(--tinte); transition: background-color .15s; }
.blaettern a:hover { background: var(--flaeche-2); color: var(--tinte); }
.blaettern a:last-child { text-align: right; }
.blaettern span { font-family: var(--schrift-daten); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-3); }
.blaettern strong { font-family: var(--schrift-marke); font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.02em; }

/* ---------- Schule: Lernpfad ---------- */
.pfad { position: relative; display: grid; gap: 14px; }
.pfad::before { content: ''; position: absolute; left: 31px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--akzent), rgb(var(--akzent-rgb) / .1)); }
.stufe { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; }
.stufe .level { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--grund); box-shadow: inset 0 0 0 2px var(--akzent); font-family: var(--schrift-marke); font-weight: 900; font-size: 26px; z-index: 1; }
.stufe-karte { padding: 20px 24px; border-radius: var(--radius); background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); }
.stufe-karte h3 { font-family: var(--schrift-marke); font-weight: 800; text-transform: uppercase; letter-spacing: -.015em; font-size: 21px; }
.stufe-karte .ziel { color: var(--tinte-2); margin: 4px 0 12px; }
.pruefung { display: grid; gap: 6px; }
.pruefung li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 8px 0; border-top: 1px solid var(--linie); font-size: 15.5px; color: var(--tinte-2); }
.pruefung li b { font-family: var(--schrift-daten); font-weight: 500; color: var(--akzent); font-size: 13.5px; }
.verweise { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.verweise a { font-size: 13.5px; padding: 4px 10px; border-radius: 999px; background: var(--akzent-weich); text-decoration: none; }

/* ---------- Profis ---------- */
.entwurf-hinweis { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border-radius: 14px; background: rgb(var(--akzent-rgb) / .08); box-shadow: inset 0 0 0 1px rgb(var(--akzent-rgb) / .3); color: var(--tinte); font-size: 15.5px; margin-bottom: 28px; }
.entwurf-hinweis svg { width: 22px; height: 22px; flex: none; color: var(--akzent); margin-top: 2px; }
.profis { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; }
.profi { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 22px; overflow: hidden; background: var(--flaeche); box-shadow: var(--schatten), var(--kante); }
.profi-bild { position: relative; aspect-ratio: 4 / 3.4; background: radial-gradient(90% 80% at 50% 30%, var(--karte-licht) 0%, var(--wb-2) 70%); display: grid; place-items: center; overflow: hidden; }
.profi-bild svg { height: 86%; width: auto; }
.profi-bild .initialen { position: absolute; left: 14px; right: 14px; bottom: 4px; font-family: var(--schrift-marke); font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 4.2vw, 70px); line-height: 1; letter-spacing: -.05em; color: rgb(var(--tinte-rgb) / .07); text-align: right; overflow: hidden; white-space: nowrap; }
.profi-bild .foto-folgt { position: absolute; left: 14px; top: 14px; font-family: var(--schrift-daten); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-3); }
.profi-text { padding: 22px 24px 26px; display: grid; gap: 12px; align-content: start; }
.profi h3 { font-family: var(--schrift-marke); font-weight: 850; text-transform: uppercase; letter-spacing: -.025em; line-height: .95; font-size: clamp(26px, 2.6vw, 36px); }
.profi .land { color: var(--tinte-3); font-size: 14.5px; }
.rang { display: grid; gap: 6px; }
.rang li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--linie); font-size: 15px; }
.rang .platz { font-family: var(--schrift-marke); font-weight: 900; font-size: 22px; color: var(--akzent); }
.rang .pkt { font-family: var(--schrift-daten); font-size: 12.5px; color: var(--tinte-3); }
.erfolge li { position: relative; padding-left: 18px; color: var(--tinte-2); font-size: 15px; margin-top: 6px; }
.erfolge li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--tinte-3); }
.gespann { margin-top: 18px; padding: clamp(22px, 3vw, 36px); border-radius: 22px; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.gespann h3 { font-family: var(--schrift-marke); font-weight: 850; text-transform: uppercase; font-size: clamp(26px, 3vw, 40px); line-height: .95; letter-spacing: -.025em; }
.gespann ul { display: grid; gap: 10px; }
.gespann li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--linie); color: var(--tinte-2); }
.gespann li b { font-family: var(--schrift-daten); font-weight: 600; color: var(--tinte); }
@media (max-width: 1100px) { .profis { grid-template-columns: 1fr; } .gespann { grid-template-columns: 1fr; } }
/* Tablets: Bild links, Rangliste rechts, statt drei schmaler Spalten */
@media (min-width: 700px) and (max-width: 1100px) {
  .profi { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: none; }
  .profi-bild { aspect-ratio: auto; min-height: 380px; }
}

/* ---------- Training: Tischmodus ---------- */
.training { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.uhr { position: sticky; top: var(--kopf-platz); padding: 26px; border-radius: 24px; background: var(--flaeche); box-shadow: var(--schatten), inset 0 0 0 1px var(--linie); display: grid; gap: 16px; }
.uhr .anzeige { font-family: var(--schrift-marke); font-weight: 900; font-size: clamp(64px, 8vw, 104px); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.uhr .block-name { font-weight: 650; font-size: 18px; }
.uhr .uhr-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.uhr .strich { display: flex; align-items: center; gap: 12px; }
.uhr .strich output { font-family: var(--schrift-marke); font-weight: 900; font-size: 40px; min-width: 2ch; font-variant-numeric: tabular-nums; }
.bloecke { display: grid; gap: 14px; counter-reset: block; }
.trainingsblock { padding: 22px 24px; border-radius: var(--radius); background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); display: grid; gap: 10px; }
.trainingsblock.ist-aktiv { box-shadow: inset 0 0 0 1px rgb(var(--akzent-rgb) / .5); background: linear-gradient(180deg, rgb(var(--akzent-rgb) / .08), rgb(var(--akzent-rgb) / .02)); }
.trainingsblock header { display: flex; align-items: baseline; gap: 14px; justify-content: space-between; }
.trainingsblock h3 { font-family: var(--schrift-marke); font-weight: 800; text-transform: uppercase; font-size: 21px; letter-spacing: -.015em; }
.trainingsblock .min { font-family: var(--schrift-daten); color: var(--akzent); font-size: 14px; white-space: nowrap; }
.trainingsblock ol { display: grid; gap: 6px; counter-reset: s; }
.trainingsblock ol li { counter-increment: s; position: relative; padding-left: 28px; color: var(--tinte-2); }
.trainingsblock ol li::before { content: counter(s); position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgb(var(--tinte-rgb) / .07); font-family: var(--schrift-daten); font-size: 11px; display: grid; place-items: center; }
.trainingsblock .erfolg { font-size: 15px; color: var(--tinte); padding: 10px 14px; border-radius: 10px; background: rgb(var(--tinte-rgb) / .04); }
.trainingsblock .quelle { font-size: 13.5px; color: var(--tinte-3); }
@media (max-width: 960px) { .training { grid-template-columns: 1fr; } .uhr { position: sticky; top: calc(var(--kopf-platz) - 6px); z-index: 4; padding: 14px 18px; grid-template-columns: auto 1fr; align-items: center; gap: 10px 16px; } .uhr .anzeige { font-size: 48px; } .uhr .strich output { font-size: 28px; } }

/* ---------- Lexikon ---------- */
.suche { display: flex; gap: 10px; align-items: center; padding: 6px 6px 6px 18px; border-radius: 999px; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie-2); max-width: 34rem; margin-bottom: 26px; }
.suche svg { width: 20px; height: 20px; color: var(--tinte-3); flex: none; }
.suche input { flex: 1; min-height: 44px; background: none; border: 0; color: var(--tinte); font: inherit; outline: none; }
.lexikon { columns: 2 22rem; column-gap: clamp(20px, 3vw, 44px); }
.lex { break-inside: avoid; padding: 16px 0 18px; border-top: 1px solid var(--linie); }
.lex dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.lex dt b { font-family: var(--schrift-marke); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: 20px; }
.lex .art { font-family: var(--schrift-daten); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-3); }
.lex .fremd { font-size: 14px; color: var(--tinte-3); }
.lex .fremd i { font-style: normal; color: var(--tinte-2); }
.lex dd { color: var(--tinte-2); margin-top: 6px; font-size: 16px; }
.lex dd a { font-size: 14.5px; }

/* ---------- Regeln, Tische, Shop ---------- */
.regel-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.regel { padding: 22px 24px; border-radius: var(--radius); background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); display: grid; gap: 8px; align-content: start; }
.regel .nr { font-family: var(--schrift-daten); font-size: 12px; color: var(--tinte-3); letter-spacing: .1em; }
.regel h3 { font-family: var(--schrift-marke); font-weight: 800; text-transform: uppercase; font-size: 20px; letter-spacing: -.01em; }
.regel .kurz { color: var(--tinte); font-weight: 550; }
.regel p { color: var(--tinte-2); font-size: 15.5px; }
@media (max-width: 860px) { .regel-liste { grid-template-columns: 1fr; } }
.regal { display: grid; gap: 34px; }
.regal-gruppe h3 { font-family: var(--schrift-marke); font-weight: 800; text-transform: uppercase; font-size: 24px; letter-spacing: -.015em; margin-bottom: 4px; }
.regal-gruppe > p { color: var(--tinte-2); margin-bottom: 14px; }
.produkte { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.produkt { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius); overflow: hidden; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); }
.produkt-bild { aspect-ratio: 4 / 3; display: grid; place-items: center; background: radial-gradient(80% 80% at 50% 40%, var(--produkt-1), var(--flaeche)); }
.produkt-bild svg { width: 62%; height: 62%; }
.produkt-text { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.produkt h4 { font-weight: 700; font-size: 17px; line-height: 1.3; }
.produkt p { color: var(--tinte-2); font-size: 14.5px; }
/* Preis und Knopf unten bündig, der Knopf über die ganze Breite (Simon, 23.10.2026: zum Kaufen auffordern) */
.preis { display: grid; gap: 12px; margin-top: auto; padding-top: 10px; }
.preis b { font-family: var(--schrift-daten); font-weight: 600; font-size: 15px; }
.preis small { display: block; color: var(--tinte-3); font-size: 12px; }
.kauf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 650; font-size: 14.5px; text-decoration: none; color: var(--akzent-tinte); background: var(--akzent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .14s var(--ease), background-color .15s, color .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
/* Hover nur mit Maus: am Finger bliebe der Knopf nach dem Herausnehmen hell stehen */
@media (hover: hover) { .kauf:hover { color: var(--akzent-tinte); background: var(--akzent-hell); } }
.kauf:active { transform: translateY(1px) scale(.98); }
.kauf svg { width: 17px; height: 17px; flex: none; }
.kauf .kauf-haken, .kauf[aria-pressed="true"] .kauf-tasche { display: none; }
.kauf[aria-pressed="true"] .kauf-haken { display: block; }
.kauf[aria-pressed="true"] { color: var(--akzent); background: rgb(var(--akzent-rgb) / .12); box-shadow: inset 0 0 0 1px rgb(var(--akzent-rgb) / .55); }
.kauf-leise { color: var(--tinte); background: rgb(var(--tinte-rgb) / .07); box-shadow: inset 0 0 0 1px var(--linie-2); }
@media (hover: hover) { .kauf-leise:hover { color: var(--tinte); background: rgb(var(--tinte-rgb) / .12); } }
.regal-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin: calc(clamp(30px, 4vw, 54px) * -.5) 0 24px; }
.regal-wahl a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--tinte); text-decoration: none; font-size: 14.5px; font-weight: 600;
  background: rgb(var(--tinte-rgb) / .06); box-shadow: inset 0 0 0 1px var(--linie-2); transition: background-color .15s, box-shadow .15s; }
.regal-wahl a:hover { color: var(--tinte); background: rgb(var(--akzent-rgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--akzent-rgb) / .5); }
.regal-wahl span { font-family: var(--schrift-daten); font-size: 12px; font-weight: 500; color: var(--tinte-3); }
/* Warenkorb-Leiste unten, erscheint mit dem ersten Artikel */
.korb { position: fixed; z-index: 48; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); transform: translateX(-50%); width: min(560px, calc(100% - 2 * var(--rand)));
  display: flex; align-items: center; gap: 14px; padding: 7px 7px 7px 18px; border-radius: 999px;
  background: linear-gradient(180deg, rgb(var(--glas-hell-rgb) / .55), rgb(var(--glas-rgb) / .8)); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 0 0 1px rgb(var(--akzent-rgb) / .4), inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 50px -20px rgba(0, 0, 0, .95); animation: korb-rein .32s var(--ease); }
@keyframes korb-rein { from { opacity: 0; transform: translate(-50%, 18px); } }
.korb-symbol { position: relative; flex: none; margin-right: 8px; color: var(--akzent); }
.korb-symbol svg { width: 24px; height: 24px; }
.korb-symbol b { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--akzent); color: var(--akzent-tinte); font: 700 11px/18px var(--schrift-daten); text-align: center; }
.korb-text { flex: 1; min-width: 0; display: grid; font-size: 14.5px; font-weight: 650; color: var(--tinte); }
.korb-text small { color: var(--tinte-2); font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.korb .knopf { flex: none; min-height: 44px; padding: 0 18px; }
@media (max-width: 400px) { .korb { gap: 10px; padding-left: 14px; } .korb .knopf { padding: 0 14px; } }
@media (prefers-reduced-motion: reduce) { .korb { animation: none; } }
.tische { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tisch-karte { padding: 20px 22px; border-radius: var(--radius); background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); display: grid; gap: 8px; align-content: start; }
.tisch-karte h3 { font-family: var(--schrift-marke); font-weight: 800; text-transform: uppercase; font-size: 22px; letter-spacing: -.015em; }
.tisch-karte .status { font-family: var(--schrift-daten); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--akzent); }
.tisch-karte li { color: var(--tinte-2); font-size: 15px; padding-left: 16px; position: relative; }
.tisch-karte li::before { content: ''; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--tinte-3); }

/* Startseite: Abschnitte Schule und Training als breite Bänder */
.band { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 70px); align-items: center; }
.band-liste { display: grid; gap: 0; border-top: 1px solid var(--linie); }
.band-liste li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--linie); }
.band-liste .l { font-family: var(--schrift-marke); font-weight: 900; font-size: 26px; color: var(--akzent); }
.band-liste .t { font-weight: 600; }
.band-liste .s { color: var(--tinte-3); font-size: 14px; }
@media (max-width: 900px) { .band { grid-template-columns: 1fr; } }
.zitatlos { font-family: var(--schrift-marke); font-weight: 850; text-transform: uppercase; letter-spacing: -.03em; line-height: .95; font-size: clamp(2.2rem, 5vw, 4.4rem); }

/* ---------- Fuß ---------- */
.fuss { margin-top: 40px; padding: 60px 0 calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linie); background: var(--grund-2); }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
.fuss h4 { font-family: var(--schrift-daten); font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: 12px; }
.fuss ul { display: grid; gap: 6px; }
.fuss a { color: var(--tinte-2); text-decoration: none; }
.fuss a:hover { color: var(--akzent); }
.fuss .entwurf { color: var(--tinte-3); font-size: 14.5px; max-width: 30rem; margin-top: 12px; }
@media (max-width: 760px) { .fuss-raster { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Startseite: Lerne von den Besten ----------
   Ebenen je Karte: Lichtkegel, Spielfeldlinien, Platzziffer, freigestellter Spieler, Schrift. Mit der Maus verschieben
   sich Ziffer und Spieler gegeneinander (--mx, --my aus seite.js), ohne Maus steht alles ruhig. */
.profi-buehne { position: relative; padding: clamp(90px, 11vw, 160px) 0 clamp(30px, 4vw, 60px); overflow: hidden;
  background: radial-gradient(60% 50% at 50% 0%, rgb(var(--akzent-rgb) / .07), transparent 70%), var(--grund); }
.pb-kopf { display: grid; gap: 14px; margin-bottom: clamp(30px, 4vw, 56px); max-width: 60rem; }
.pb-kopf h2 { font-family: var(--schrift-marke); font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .86; font-size: clamp(3.2rem, 9vw, 8.6rem); }
.pb-kopf h2 span { color: var(--akzent); }
.pb-kopf p { color: var(--tinte-2); font-size: 18px; max-width: 42rem; }
.profi-raster { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.pk { --mx: 0; --my: 0; position: relative; display: block; overflow: hidden; border-radius: 26px; isolation: isolate; text-decoration: none; color: var(--tinte);
  min-height: clamp(540px, 52vw, 700px); background: linear-gradient(180deg, var(--karte-1) 0%, var(--karte-2) 62%, var(--karte-3) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgb(var(--tinte-rgb) / .07), 0 50px 90px -60px #000; transition: transform .35s var(--ease); }
.pk-licht { position: absolute; inset: -10% -20% 30%; z-index: -4; background: radial-gradient(50% 55% at calc(50% + var(--mx) * 16%) calc(45% + var(--my) * 12%), rgb(var(--akzent-rgb) / .32), rgb(var(--akzent-rgb) / .06) 55%, transparent 72%); pointer-events: none; }
.pk-feld { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; color: rgb(var(--tinte-rgb) / .07); }
.pk-platz { position: absolute; z-index: -2; top: 4%; left: 50%; font-family: var(--schrift-marke); font-weight: 900; line-height: .8; letter-spacing: -.08em;
  font-size: clamp(260px, 30vw, 460px); color: rgb(var(--akzent-rgb) / .16); transform: translate(calc(-50% + var(--mx) * -14px), calc(var(--my) * -10px)); pointer-events: none; }
.pk-gross .pk-platz { font-size: clamp(320px, 38vw, 600px); color: rgb(var(--akzent-rgb) / .2); }
.pk-bild { position: absolute; inset: 0; z-index: -1; margin: 0; transform: translate(calc(var(--mx) * 10px), calc(var(--my) * 6px)); }
.pk-person { position: absolute; bottom: 21%; height: 74%; width: auto; max-width: none; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)) saturate(.96);
  left: 50%; transform: translateX(calc(var(--fx, .5) * -100%)); transition: transform .6s var(--ease); transform-origin: 50% 100%; }
/* --fx = waagerechte Bildmitte (profis.js: foto.mitte, sonst die Kopfmitte), sie steht in der Kartenmitte.
   Tony groß (Simon, 21.10.2026: „mehr vom gesicht … etwas nach rechts“): Bild höher, Kopf rechts der Mitte, und der
   dunkle Verlauf hängt an der Schrift statt an der Karte, so reicht er nur 100 px über die erste Zeile. */
.pk-gross .pk-person { bottom: 32%; height: 68%; }
.pk-text::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: -100px; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--grund-rgb) / 0) 0, rgb(var(--grund-rgb) / .5) 45px, rgb(var(--grund-rgb) / .88) 80px, rgb(var(--grund-rgb) / .96) 100px, var(--karte-3) 100%); }
.pk-rang, .pk p { text-shadow: 0 0 2px rgb(var(--grund-rgb) / .7), 0 0 14px rgb(var(--grund-rgb) / .85); }   /* Schrift über Jacke und Logo (gemessen) */
.pk-text { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 8px; }
.pk-rang { font-family: var(--schrift-daten); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); }
.pk-rang b { color: var(--akzent-tinte); background: var(--akzent); font-weight: 600; padding: 3px 8px; border-radius: 6px; margin-right: 6px; letter-spacing: .06em; }
.pk h3 { font-family: var(--schrift-marke); font-weight: 900; text-transform: uppercase; letter-spacing: -.035em; line-height: .9; font-size: clamp(32px, 3.2vw, 50px); }
.pk-gross h3 { font-size: clamp(44px, 5vw, 80px); }
.pk p { color: var(--tinte-2); font-size: 15px; line-height: 1.5; max-width: 34rem; }
.pk-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 650; font-size: 15px; color: var(--akzent); }
.pk-link svg { width: 17px; height: 17px; transition: transform .2s var(--ease); }
.pk-ersatz { position: absolute; inset: 0; display: grid; place-items: center; }
.pk-ersatz svg { height: 60%; width: auto; margin-bottom: 24%; }
.pk-ersatz .ueberzeile { position: absolute; left: 22px; top: 20px; color: var(--tinte-3); }
@media (hover: hover) and (pointer: fine) {
  .pk:hover { transform: translateY(-4px); }
  .pk:hover .pk-person { transform: translateX(calc(var(--fx, .5) * -100%)) scale(1.035); }
  .pk:hover .pk-link svg { transform: translateX(4px); }
}
.pk-hinweis { margin-top: 16px; font-size: 13.5px; color: var(--tinte-3); max-width: 72rem; }
@media (max-width: 1100px) {   /* Tablets: Karten zum Wischen statt drei schmaler Spalten */
  .profi-raster { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82vw, 420px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; margin: 0 calc(-1 * var(--rand)); padding-inline: var(--rand); scroll-padding-inline: var(--rand); }
  .profi-raster::-webkit-scrollbar { display: none; }
  .pk { scroll-snap-align: start; min-height: 560px; }
  .pk-gross h3 { font-size: clamp(36px, 9vw, 52px); }
}
@media (prefers-reduced-motion: reduce) { .pk-platz, .pk-bild { transform: none !important; } .pk-platz { transform: translateX(-50%) !important; } }

/* Profi-Seite: dieselben Ebenen in der Karte */
.profi-bild { background: radial-gradient(55% 60% at 50% 40%, rgb(var(--akzent-rgb) / .26), rgb(var(--akzent-rgb) / .04) 60%, transparent 75%), linear-gradient(180deg, var(--karte-1), var(--karte-2)); }
.profi-bild .pk-person { bottom: 0; height: 96%; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); }

/* ---------- Schaustück: Flutlicht, Einflug, Torblitz ----------
   Lichtkegel hinter den Profis (sie stehen im Gegenlicht), langsam pendelnd. Torblitz sitzt am Tor (schaustueck.js). */
.held-licht { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 2.4s var(--ease) .4s; }
.held.ist-gelandet .held-licht, .ohne-3d .held-licht { opacity: 1; }
.held-licht i { position: absolute; top: -14%; left: var(--x); width: 30vmax; height: 125%; margin-left: -15vmax; transform-origin: 50% 0; transform: rotate(var(--w));
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgb(var(--licht-rgb) / .17) 0%, rgb(var(--licht-rgb) / .07) 38%, rgb(var(--licht-rgb) / 0) 70%);
  animation: kegel 18s ease-in-out infinite alternate; will-change: transform; }
.held-licht i:nth-child(1) { --x: 50%; --w: 9deg; }
.held-licht i:nth-child(2) { --x: 66%; --w: -4deg; animation-duration: 23s; animation-delay: -6s; }
.held-licht i:nth-child(3) { --x: 84%; --w: -14deg; animation-duration: 20s; animation-delay: -11s; opacity: .7; }
@keyframes kegel { from { transform: rotate(calc(var(--w) - 3deg)); } to { transform: rotate(calc(var(--w) + 3deg)); } }
@media (max-width: 760px) { .held-licht i:nth-child(1) { --x: 30%; } .held-licht i:nth-child(3) { display: none; } }
.held-blitz { position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; }
.held-blitz::before { content: ''; position: absolute; left: -26vmin; top: -26vmin; width: 52vmin; height: 52vmin; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgb(var(--akzent-rgb) / .55), rgb(var(--akzent-rgb) / .16) 45%, transparent); }
/* Einflug: Überschrift steigt zeilenweise auf, der Rest folgt; das Namensschild erst nach der Landung */
.held h1 .z { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.held h1 .z > * { display: block; animation: zeile-hoch 1.1s var(--ease) both; }
.held h1 .z:nth-child(1) > * { animation-delay: .35s; }
.held h1 .z:nth-child(2) > * { animation-delay: .5s; }
@keyframes zeile-hoch { from { transform: translateY(105%); } to { transform: none; } }
.held-text > :not(h1) { animation: auftauchen .9s var(--ease) both; }
.held-text > .ueberzeile { animation-delay: .2s; }
.held-text > .unter { animation-delay: .75s; }
.held-text > .held-knoepfe { animation-delay: .9s; }
.held-text > .abzug { animation-delay: 1.1s; }
.held-text > .held-mini { animation-delay: .1s; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.held:not(.ist-gelandet) .held-profi, .held:not(.ist-gelandet) .held-leute { opacity: 0 !important; }   /* flache Fotos nicht im Flug von oben */
.held-leute { transition: opacity 1.4s var(--ease); }
@media (prefers-reduced-motion: reduce) { .held h1 .z > *, .held-text > :not(h1) { animation: none; } .held-licht i { animation: none; } .held-person.ist-da img { animation: none; } }

/* ---------- Farbwelt wählen (Entwurf) ---------- */
.fw-knopf { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .17), rgba(255, 255, 255, .04) 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 14px -6px #000; transition: box-shadow .15s; }
.fw-knopf:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgb(var(--akzent-rgb) / .4), 0 6px 14px -6px #000; }
.fw-knopf i, .farbwahl i { display: block; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.fw-knopf i { background: linear-gradient(135deg, var(--grund) 0 50%, var(--akzent) 50% 100%); }
.farbwahl { position: fixed; z-index: 55; top: calc(var(--kopf-platz) - 4px); right: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))); display: grid; gap: 2px; min-width: 13.5rem; padding: 12px 8px 8px;
  border-radius: 18px; background: rgb(var(--glas-rgb) / .9); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px var(--linie-2), 0 30px 60px -26px #000; }
.farbwahl .ueberzeile { padding: 0 10px 6px; font-size: 11px; }
.farbwahl button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 11px; background: none; cursor: pointer; color: var(--tinte-2); font-size: 15px; font-weight: 550; text-align: left; }
.farbwahl button:hover { background: rgb(var(--tinte-rgb) / .07); color: var(--tinte); }
.farbwahl button i { width: 22px; height: 22px; background: linear-gradient(135deg, var(--g) 0 50%, var(--a) 50% 100%); }
.farbwahl button[aria-pressed="true"] { color: var(--tinte); background: rgb(var(--akzent-rgb) / .1); }
.farbwahl button[aria-pressed="true"] i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 0 2px var(--grund), 0 0 0 3.5px var(--akzent); }
@media (max-width: 1080px) { .kopf .fw-knopf { margin-left: auto; } .kopf .fw-knopf + .knopf-kopf { margin-left: 0; } }

@media (max-width: 400px) { .kopf .fw-knopf { display: none; } .kopf .fw-knopf + .knopf-kopf { margin-left: auto; } .kopf { gap: 10px; padding-left: 14px; } .logo .marke-logo { height: 28px; } }
.menue-knopf { flex: none; }
.menue { overflow-y: auto; }
@media (max-width: 760px) { .held-text > .ueberzeile { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: rgb(var(--glas-rgb) / .84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--linie); } }
.menue-farbe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; }
.menue-farbe .ueberzeile { flex: 1 0 100%; }
.menue-farbe button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; cursor: pointer; background: rgb(var(--tinte-rgb) / .06); color: var(--tinte-2); font-size: 14.5px; }
.menue-farbe button i { display: block; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--g) 0 50%, var(--a) 50% 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.menue-farbe button[aria-pressed="true"] { color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--akzent); }
/* Feste Akzentfarbe in eingebetteten Bildchen folgt der Farbwelt */
svg [fill="#f4b740"] { fill: var(--akzent); }
svg [stroke="#f4b740"] { stroke: var(--akzent); }

/* ---------- Schaustück am Tablet hochkant (Simon, 21.10.2026: „tabletoptimieren“) ----------
   Tisch oben über die ganze Breite, Profis dahinter, Schrift und Griff unten. Dieselbe Grenze in schaustueck.js. */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .held-spalte { width: 100%; top: auto; height: 62%; background: linear-gradient(0deg, rgb(var(--grund-rgb) / .97) 0%, rgb(var(--grund-rgb) / .94) 62%, rgb(var(--grund-rgb) / .75) 80%, rgb(var(--grund-rgb) / 0) 100%); }
  .held-text { box-sizing: border-box; justify-content: flex-end; padding-bottom: clamp(32px, 4vh, 56px); }   /* sonst rutscht der Griff unter den Rand */
  .held h1 { font-size: clamp(3.6rem, 8.4vw, 6rem); }
  /* Überzeile liegt vor der weißen Tischseite (gemessen 1,4 : 1): Glasmarke wie am Handy */
  .held-text > .ueberzeile { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: rgb(var(--glas-rgb) / .84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--linie); }
  .held-licht i:nth-child(1) { --x: 34%; } .held-licht i:nth-child(2) { --x: 58%; } .held-licht i:nth-child(3) { --x: 80%; }
}

/* ---------- Logo KickerUp nach Simons Vorlage (23.10.2026, Formen in quelle/logo.js) ----------
   „Kicker“ in der Schriftfarbe, „Up“ in der Akzentfarbe (Simon: „unsere farbdesign von der schrift beibehalten“), Figur in
   der Akzentfarbe, Stange in Stahl. Alles folgt der Farbwelt. */
.marke-logo { display: block; overflow: visible; --lg-figur: var(--akzent); --lg-stange: var(--stahl, var(--tinte-3)); }
.lg-kicker { fill: var(--tinte); }
.lg-up { fill: var(--akzent); }
.lg-figur { fill: var(--lg-figur); transform-origin: 156.75px 85px; }   /* Drehpunkt: Mitte der Stange */
.lg-stange { fill: var(--lg-stange); }
.lg-mitte { opacity: 0; }
.fuss .logo .marke-logo { height: 40px; }
/* Fährt die Maus über das Logo, spielt die Figur den Jet: klemmen, seitlich an der Stange rollen, einmal über die Stange
   schlagen (von vorn gesehen staucht die Drehung bis zum Kopfstand), Schuss kurz vor 360°, zurück in die Mitte. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .logo:hover .lg-figur, .logo:focus-visible .lg-figur { animation: lg-jet .95s cubic-bezier(.33, 0, .25, 1) both; }
  .logo:hover .lg-mitte, .logo:focus-visible .lg-mitte { animation: lg-mitte .95s linear both; }
}
@keyframes lg-jet {
  0% { transform: translateX(0) scaleY(1); }
  14% { transform: translateX(0) scaleY(.84); }
  44% { transform: translateX(-24px) scaleY(.84); }
  60% { transform: translateX(-24px) scaleY(-1); }
  74% { transform: translateX(-24px) scaleY(.94); }
  100% { transform: translateX(0) scaleY(1); }
}
@keyframes lg-mitte { 0%, 100% { opacity: 0; } 8%, 92% { opacity: 1; } }

/* ---------- Kontakt: Demo-Anfragestrecke, unten auf jeder Seite ---------- */
.kontakt { position: relative; margin-top: clamp(40px, 6vw, 90px); padding: clamp(80px, 10vw, 140px) 0 clamp(50px, 6vw, 90px); isolation: isolate; border-top: 1px solid var(--linie);
  background: radial-gradient(55% 70% at 88% 20%, rgb(var(--akzent-rgb) / .08), transparent 70%), linear-gradient(180deg, var(--grund), var(--grund-2)); }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.kontakt-kopf { display: grid; gap: 16px; position: sticky; top: calc(var(--kopf-platz) + 24px); }
.kontakt-kopf h2 { font-family: var(--schrift-marke); font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .86; font-size: clamp(3.1rem, 7vw, 6.6rem); }
.kontakt-kopf h2 span { color: var(--akzent); }
.kontakt-kopf > p:not([class]) { color: var(--tinte-2); font-size: 18px; max-width: 30rem; }
.kontakt-demo { display: flex; gap: 10px; align-items: flex-start; max-width: 30rem; padding: 12px 16px; border-radius: 14px; font-size: 14.5px; color: var(--tinte-2);
  background: rgb(var(--akzent-rgb) / .07); box-shadow: inset 0 0 0 1px rgb(var(--akzent-rgb) / .26); }
.kontakt-demo svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--akzent); }
.strecke { position: relative; display: grid; gap: 26px; padding: clamp(20px, 2.6vw, 34px); border-radius: 26px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--karte-1), var(--karte-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgb(var(--tinte-rgb) / .08), 0 50px 90px -60px #000; }
.strecke::before { content: ''; position: absolute; top: -40%; right: -30%; width: 70%; aspect-ratio: 1; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgb(var(--akzent-rgb) / .1), transparent); }
.strecke-schritt { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 14px; transition: opacity .4s var(--ease); }
.strecke-schritt:disabled { opacity: .36; }
.strecke legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 14px; font-family: var(--schrift-marke); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: 20px; }
.strecke-nr { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--schrift-daten); font-weight: 600; font-size: 13px; background: var(--akzent); color: var(--akzent-tinte); }
.strecke-schritt:disabled .strecke-nr { background: rgb(var(--tinte-rgb) / .14); color: var(--tinte); }
.strecke-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.strecke-wahl label { position: relative; display: block; cursor: pointer; }
.strecke-wahl input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.strecke-wahl span { position: relative; display: flex; align-items: center; min-height: 58px; padding: 12px 16px 12px 48px; border-radius: 14px; font-weight: 600; font-size: 15.5px; line-height: 1.25; color: var(--tinte-2);
  background: rgb(var(--tinte-rgb) / .05); box-shadow: inset 0 0 0 1px var(--linie-2); transition: background-color .15s, box-shadow .15s, color .15s; }
.strecke-wahl span::before { content: ''; position: absolute; left: 17px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgb(var(--tinte-rgb) / .35); transition: box-shadow .25s var(--ease); }
.strecke-wahl input:checked + span { color: var(--tinte); background: rgb(var(--akzent-rgb) / .12); box-shadow: inset 0 0 0 1.5px var(--akzent), 0 0 30px -12px rgb(var(--akzent-rgb) / .7); }
.strecke-wahl input:checked + span::before { box-shadow: inset 0 0 0 6px var(--akzent); }
.strecke-wahl input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .strecke-wahl label:hover span { color: var(--tinte); background: rgb(var(--tinte-rgb) / .09); } }
.feld { display: grid; gap: 6px; min-width: 0; }
.feld > span { font-size: 14px; font-weight: 600; color: var(--tinte-2); }
.feld input, .feld textarea, .feld select { width: 100%; box-sizing: border-box; min-height: 50px; padding: 12px 14px; border: 0; border-radius: 12px; outline: none;
  font: inherit; font-size: 16px; color: var(--tinte); background: rgb(var(--grund-rgb) / .62); box-shadow: inset 0 0 0 1px var(--linie-2); transition: box-shadow .15s; }
.feld textarea { min-height: 124px; resize: vertical; line-height: 1.5; }
.feld select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcbfc5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.feld select option, .feld select optgroup { background: var(--flaeche-2); color: var(--tinte); }
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible { box-shadow: inset 0 0 0 2px var(--akzent); }
.feld [aria-invalid] { box-shadow: inset 0 0 0 1.5px #f08a73; }
.feld ::placeholder { color: var(--tinte-3); opacity: 1; }
.feld-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.strecke-fehler { font-size: 14.5px; color: #f6a593; }
.strecke-fehler:empty { display: none; }
.strecke-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 2px; }
.strecke-fuss > span { font-size: 14px; color: var(--tinte-3); }
.strecke.ist-fertig .strecke-schritt { display: none; }
.strecke-danke { display: grid; justify-items: start; gap: 12px; padding: 8px 2px; outline: none; animation: auftauchen .7s var(--ease) both; }
.strecke-haken { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--akzent); color: var(--akzent-tinte); box-shadow: 0 0 44px -6px rgb(var(--akzent-rgb) / .75); }
.strecke-haken svg { width: 28px; height: 28px; }
.strecke-haken path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: haken .6s .25s var(--ease) forwards; }
@keyframes haken { to { stroke-dashoffset: 0; } }
.strecke-danke h3 { font-family: var(--schrift-marke); font-weight: 900; text-transform: uppercase; letter-spacing: -.035em; line-height: .95; font-size: clamp(32px, 4vw, 50px); }
.strecke-danke p { color: var(--tinte-2); max-width: 30rem; }
@media (max-width: 900px) { .kontakt-raster { grid-template-columns: 1fr; } .kontakt-kopf { position: static; } }
@media (max-width: 560px) { .strecke-wahl, .feld-paar { grid-template-columns: 1fr; } .strecke-wahl span { min-height: 52px; } }
@media (prefers-reduced-motion: reduce) { .strecke-haken path { stroke-dashoffset: 0; animation: none; } }

/* Demoseite von callithero: Zeile mit dem Sprachpuls ganz unten (Simon, 21.10.2026) */
.fuss-demo { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--linie); }
.demo-marke { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; text-decoration: none; }
.fuss .demo-marke { color: var(--tinte-3); }
.fuss .demo-marke:hover { color: var(--tinte); }
.demo-marke .sprachpuls { width: 28px; height: 28px; flex: none; border-radius: 7px; box-shadow: 0 0 0 1px rgb(var(--tinte-rgb) / .16); }

/* ---------- Tablets und Touch (Simon, 21.10.2026: „tabletoptimieren, damit man die Steuerung perfekt machen kann“) ----------
   Mit dem Finger (pointer: coarse) ist jede Trefferfläche mindestens 44 px groß. */
@media (pointer: coarse) {
  .wb-flach { min-height: 44px; min-width: 44px; }
  .wb-blickwahl button { min-height: 44px; min-width: 44px; }
  .wb-wahl { min-height: 48px; }
  .wb-regler, .wb-zeile-ablauf .wb-regler { height: 48px; }
  .wb-spur { top: 14px; height: 8px; }
  .wb-knopf { top: 7px; width: 22px; height: 22px; margin-left: -11px; }
  .wb-marken { top: 28px; height: 20px; }
  .wb-marken button { pointer-events: none; }   /* der Finger traf beim Spulen die Marke und startete den Schritt; Schritte über ‹ › und die Karten */
  .nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .hp-ticks { gap: 0; }
  .hp-ticks button { width: 44px; height: 44px; margin: -13px -8px; }   /* volle Trefferfläche, im Schild nur 28 px breit */
  .hp-ticks button + button { margin-left: -4px; }
  .logo { min-height: 44px; }
  .hp-name { min-height: 44px; align-content: center; }
  .filter button { min-height: 44px; }
  .abzug-bahn { height: 84px; }
  .abzug-griff { height: 46px; margin-top: -21px; }
  .brot a { display: inline-flex; align-items: center; min-height: 44px; }
  .quellen a, .fuss ul a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* TV-Wiederholung im Schaustück (eigene Idee, 21.10.2026): Kinobalken, Schild mit rotem Punkt, Fotos aus */
.held-balken { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 8vh; background: #000; pointer-events: none; transform: scaleY(0); transform-origin: 50% 0; transition: transform .5s var(--ease); }
.held-balken-unten { top: auto; bottom: 0; transform-origin: 50% 100%; }
.in-wiederholung .held-balken { transform: none; }
.held-wdh { position: absolute; z-index: 4; top: calc(var(--kopf-platz) + 6px); right: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))); display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px; border-radius: 10px; background: rgb(var(--glas-rgb) / .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--linie-2);
  font-family: var(--schrift-daten); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte); opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .35s var(--ease); pointer-events: none; }
.held-wdh b { font-weight: 600; }
.held-wdh .wdh-tempo { color: var(--akzent); }
.wdh-punkt { width: 9px; height: 9px; border-radius: 50%; background: #ff4b3e; box-shadow: 0 0 10px #ff4b3e; animation: wdh-blinken 1s steps(2, jump-none) infinite; }
@keyframes wdh-blinken { 50% { opacity: .25; } }
.in-wiederholung .held-wdh { opacity: 1; transform: none; }
.in-wiederholung .held-leute, .in-wiederholung .held-profi { opacity: 0 !important; visibility: hidden; transition: none; }
@media (max-width: 760px) { .held-wdh { top: calc(var(--kopf-platz) + 4px); font-size: 11px; } .held-balken { height: 5vh; } }
/* Während der Wiederholung füllt das helle Spielfeld das Bild: die Schriftseite dunkelt weiter ab */
.held-schleier { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: linear-gradient(90deg, rgb(var(--grund-rgb) / .9) 0%, rgb(var(--grund-rgb) / .82) 48%, rgb(var(--grund-rgb) / .4) 72%, rgb(var(--grund-rgb) / 0) 90%); }
.in-wiederholung .held-schleier { opacity: 1; }
@media (max-width: 760px), (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .held-schleier { background: linear-gradient(0deg, rgb(var(--grund-rgb) / .92) 0%, rgb(var(--grund-rgb) / .85) 50%, rgb(var(--grund-rgb) / 0) 70%); } }

/* Gestaffeltes Erscheinen beim Scrollen (seite.js) und Lichtschwenk über die Titelkarten (eigene Ideen, 21.10.2026).
   Über translate statt transform, damit das Anheben beim Überfahren (transform) weiter gleitet. */
.zeigen { opacity: 0; translate: 0 32px; transition: opacity .9s var(--ease) var(--verzug, 0ms), translate 1s var(--ease) var(--verzug, 0ms), transform .35s var(--ease); }
.zeigen.ist-gezeigt { opacity: 1; translate: none; }
.vorn .vorn-text { z-index: 1; }
.vorn a::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 32%, rgb(var(--licht-rgb) / .08) 44%, rgb(var(--licht-rgb) / .22) 50%, rgb(var(--licht-rgb) / .08) 56%, transparent 68%); }
.vorn a.ist-gezeigt::before { animation: schwenk 1.8s calc(var(--verzug, 0ms) + .35s) var(--ease) both; }
@media (hover: hover) and (pointer: fine) { .vorn a:hover::before { animation: schwenk 1.3s var(--ease) both; } }
@keyframes schwenk { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .vorn a::before { display: none; } }
.vorn video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease), transform .6s var(--ease); }
.vorn video.laeuft { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .vorn a:hover video { transform: scale(1.035); } }
.quelle-zeile { display: block; margin-top: 6px; font-size: 13px; color: var(--tinte-3); }
.quelle-zeile a { color: var(--tinte-3); text-decoration-color: rgb(var(--tinte-rgb) / .25); }
.quelle-zeile a:hover { color: var(--akzent); }
/* Schild links vom Gesicht (Tablet hochkant): Punkt am Gesicht, also rechts */
.held-profi.nach-links .hp-linie { background: linear-gradient(270deg, var(--akzent), rgb(var(--akzent-rgb) / .35)); }
.held-profi.nach-links .hp-linie::before { left: auto; right: -3.5px; }
/* Ab 861 px: Schrift links, der Grund läuft nach rechts aus, Tor und Film bleiben rechts im Bild */
@media (min-width: 861px) {
  .vorn .vorn-text { right: 36%; }
  .vorn .vorn-text::before { right: -40%; background: linear-gradient(90deg, rgb(var(--grund-rgb) / .95) 0%, rgb(var(--grund-rgb) / .93) 70%, rgb(var(--grund-rgb) / .5) 88%, rgb(var(--grund-rgb) / 0) 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px); mask-image: linear-gradient(180deg, transparent 0, #000 90px); }
  .vorn a::after { background: linear-gradient(0deg, rgb(var(--grund-rgb) / .7) 0%, rgb(var(--grund-rgb) / .25) 40%, rgb(var(--grund-rgb) / 0) 70%); }
}
/* Untertitel (Simon, 21.10.2026): ab Tablet bricht er nach „in 3D:“, die drei Verben bleiben in einer Zeile */
@media (min-width: 761px) { .held p.unter .unter-z2 { display: block; } }