/* METAMOR Seiten-Muster „Welten“ (Zentrale für mitgebaut.com, Tonis Idee 22.10.2026).
   Jede Deck-Karte ist ein Werkzeug. Klick: Puls-Welle über die Seite, Akzent --welt und Hintergrund wechseln,
   darunter baut sich die Szene des Werkzeugs auf. Farben nur aus dem Design-Kern (gold, glut, signal). Präfixe: welt, sz-, Szenen-Namen. */
:root { --welt: var(--gold); --welt-hauch: color-mix(in srgb, var(--welt) 12%, transparent); --welt-linie: color-mix(in srgb, var(--welt) 18%, transparent); }

/* Hintergrund der Welt: feine Textur hinter allem, wechselt mit dem Werkzeug */
.welt-grund { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 900ms var(--kurve);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 18%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 90% 70% at 50% 18%, #000 10%, transparent 75%); }
.welt-grund.da { opacity: 1; }
.welt-grund[data-muster="raster"] { background-image: linear-gradient(var(--welt-linie) 1px, transparent 1px), linear-gradient(90deg, var(--welt-linie) 1px, transparent 1px); background-size: 56px 56px; }
.welt-grund[data-muster="radar"] { background-image: repeating-radial-gradient(circle at 50% 24%, transparent 0 89px, var(--welt-linie) 89px 90px); }
.welt-grund[data-muster="punkte"] { background-image: radial-gradient(var(--welt-linie) 1.4px, transparent 1.8px); background-size: 24px 24px; }
.welt-grund[data-muster="linien"] { background-image: repeating-linear-gradient(115deg, transparent 0 38px, var(--welt-linie) 38px 39px); }

/* Puls-Welle vom Klickpunkt über die ganze Seite */
.welle-ring { position: fixed; z-index: 45; pointer-events: none; border-radius: 50%; border: 1.5px solid var(--welt); transform: translate(-50%, -50%) scale(0); }
.welle-flaeche { position: fixed; inset: 0; z-index: 44; pointer-events: none; background: var(--welt-hauch); }

/* Held */
.held-zentrale { display: grid; gap: 14px; justify-items: center; text-align: center; padding-block: clamp(28px, 4vw, 48px) 0; }
.held-zentrale h1 { font-size: clamp(36px, 5vw, 72px); max-width: 24ch; transition: opacity 260ms var(--kurve), filter 260ms var(--kurve), transform 260ms var(--kurve); }
.held-zentrale .lead { max-width: 50ch; transition: opacity 260ms var(--kurve); }
.held-zentrale .label { transition: color 400ms var(--kurve); }
.welt-an .held-zentrale > .label { color: var(--welt); }
.held-zentrale .wechsel { opacity: 0; filter: blur(6px); transform: translateY(8px); }
.fuer-wahl { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 6px; }
.fuer-wahl .label { margin-right: 4px; }
.fuer-wahl button, .bereich-reiter button { min-height: 40px; padding: 8px 16px; border: 1px solid var(--rand-deko); border-radius: 999px; background: transparent; color: var(--tinte-2); font: 500 14px var(--text); cursor: pointer; transition: background 200ms var(--kurve), color 200ms var(--kurve), border-color 200ms var(--kurve); }
.fuer-wahl button:hover, .bereich-reiter button:hover { color: var(--tinte); border-color: var(--rand-bedien); }
.fuer-wahl button[aria-pressed="true"], .bereich-reiter button[aria-selected="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--onyx); }

/* Ruhiger Puls hinter der vorderen Karte: lädt zum Antippen ein */
.zentrale-puls { position: absolute; left: 50%; bottom: calc(6% + clamp(210px, 19vw, 270px) * .75); width: clamp(210px, 19vw, 270px); aspect-ratio: 1; transform: translate(-50%, 50%); pointer-events: none; z-index: 0; }
.zentrale-puls i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--welt); opacity: 0; animation: zentrale-puls 3600ms var(--kurve) infinite; }
.zentrale-puls i:nth-child(2) { animation-delay: 1200ms; }
.zentrale-puls i:nth-child(3) { animation-delay: 2400ms; }
@keyframes zentrale-puls { 0% { transform: scale(.7); opacity: .55; } 100% { transform: scale(2.3); opacity: 0; } }
/* 12 Karten: die verdeckten hinten im Fächer dürfen die Seite nicht verbreitern */
.deck[data-welt] { overflow-x: clip; }
.deck[data-welt] .deck-karte.vorn { box-shadow: inset 0 0 0 1.5px var(--welt), 0 0 0 1px var(--welt-hauch), 0 30px 70px -26px rgba(0, 0, 0, .95), 0 0 60px -10px var(--welt-hauch); }

/* Welt-Abschnitt */
.welt { display: grid; gap: 28px; padding-block: clamp(48px, 6vw, 88px) clamp(24px, 3vw, 40px); scroll-margin-top: 12px; }
.welt[hidden] { display: none; }
.welt-kopf { display: grid; gap: 12px; }
.welt-kopf .label, .welt .label { color: var(--welt); }
.welt-unten { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px 48px; }
.welt-kann ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.welt-kann li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: baseline; color: var(--tinte); }
.welt-kann li::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--welt); transform: translateY(1px); }
.welt-echt { margin-top: 20px; display: grid; gap: 10px; }
.welt-echt div { display: flex; flex-wrap: wrap; gap: 8px; }
.welt-echt a { padding: 6px 12px; border-radius: 999px; background: var(--nacht-2); color: var(--tinte); font-size: 14px; text-decoration: none; }
.welt-echt a:hover { background: var(--nacht-3); }
.welt-bau { display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: var(--r-gross); background: var(--nacht-1); }
.bau-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: var(--r-mittel); background: var(--nacht-2); }
.bau-wahl button { min-height: 40px; border: 0; border-radius: var(--r-klein); background: transparent; color: var(--tinte-2); font: 600 14px var(--text); cursor: pointer; }
.bau-wahl button[aria-checked="true"] { background: var(--nacht-3); color: var(--tinte); box-shadow: inset 0 -2px 0 var(--welt); }
.bau-zeit { font: 700 clamp(32px, 3.6vw, 48px)/1 var(--display); text-transform: uppercase; color: var(--tinte); }
.welt-weiter { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.welt-zurueck { color: var(--tinte-2); font-size: 15px; }

/* Szenen: gemeinsamer Rahmen */
.szene { position: relative; min-height: clamp(380px, 36vw, 480px); padding: clamp(16px, 2.4vw, 28px); border-radius: var(--r-gross); background: var(--nacht-1); box-shadow: inset 0 0 0 1px var(--rand-deko); display: grid; gap: 18px; align-content: start; overflow: hidden; }
.sz-beispiel { position: absolute; top: 14px; right: 14px; padding: 3px 8px; border-radius: 6px; background: var(--nacht-3); color: var(--tinte-3); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; z-index: 3; }
.sz-fuss { font: 500 13px/1.5 var(--mono); letter-spacing: .04em; color: var(--welt); min-height: 1.5em; opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--kurve), transform 400ms var(--kurve); }
.sz-fuss.da { opacity: 1; transform: none; }
.sz-zwei { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.sz-titel { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); }
.flieger { position: fixed; left: 0; top: 0; z-index: 46; pointer-events: none; padding: 7px 11px; border-radius: 8px; background: var(--nacht-2); color: var(--tinte); font: 500 12px/1.2 var(--text); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--welt), 0 10px 24px -12px rgba(0, 0, 0, .8); }
.flieger.punkt { width: 12px; height: 12px; padding: 0; border-radius: 50%; background: var(--welt); box-shadow: none; }
.erscheint { opacity: 0; transform: translateY(8px) scale(.96); transition: opacity 360ms var(--kurve), transform 360ms var(--kurve); }
.erscheint.da { opacity: 1; transform: none; }

/* A Termine: Briefkasten und Woche */
.kasten-feld { display: grid; justify-items: center; gap: 12px; }
.kasten { position: relative; width: clamp(130px, 13vw, 170px); aspect-ratio: 1.1; border-radius: 48% 48% 12px 12px / 40% 40% 12px 12px; background: var(--nacht-2); box-shadow: inset 0 0 0 1.5px var(--welt); }
.kasten::before { content: ''; position: absolute; left: 22%; right: 22%; top: 40%; height: 7px; border-radius: 4px; background: var(--onyx); }
.kasten::after { content: ''; position: absolute; left: 50%; bottom: -26px; width: 8px; height: 26px; margin-left: -4px; background: var(--rand-bedien); }
.kasten-fahne { position: absolute; right: -16px; top: 22%; width: 6px; height: 46%; background: var(--rand-bedien); transform-origin: 50% 100%; transform: rotate(90deg); transition: transform 500ms cubic-bezier(.3, 1.6, .5, 1); }
.kasten-fahne::after { content: ''; position: absolute; top: 0; left: 6px; width: 22px; height: 16px; border-radius: 0 4px 4px 0; background: var(--glut); }
.kasten.voll .kasten-fahne { transform: none; }
.kasten.stoss { animation: kasten-stoss 240ms var(--kurve); }
@keyframes kasten-stoss { 30% { transform: scale(1.06) rotate(-2deg); } 70% { transform: scale(.98) rotate(1deg); } }
.kasten-zahl { margin-top: 26px; font: 700 clamp(40px, 4vw, 56px)/1 var(--display); font-variant-numeric: tabular-nums; }
.kal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.kal-tag { display: grid; gap: 6px; align-content: start; }
.kal-tag > b { font: 500 12px var(--mono); color: var(--tinte-3); letter-spacing: .06em; }
.kal-platz { min-height: 48px; border-radius: 8px; border: 1px dashed var(--rand-deko); display: grid; }
.kal-eintrag { padding: 6px 8px; border-radius: 8px; background: var(--welt-hauch); box-shadow: inset 2px 0 0 var(--welt); font-size: 12px; line-height: 1.3; color: var(--tinte); animation: eintrag-rein 420ms var(--kurve); }
.kal-eintrag small { display: block; font: 500 11px var(--mono); color: var(--tinte-3); }
.kal-eintrag.dringend { box-shadow: inset 2px 0 0 var(--glut); background: var(--glut-hauch); }
@keyframes eintrag-rein { from { opacity: 0; transform: scale(.9) translateY(-6px); } }
.antwort-zeile { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.antwort-zeile span { padding: 5px 10px; border-radius: 999px; background: var(--nacht-2); font-size: 12px; color: var(--tinte-2); animation: eintrag-rein 420ms var(--kurve); }

/* B Lead-Scouting: Radar */
.radar { position: relative; width: min(100%, 360px); aspect-ratio: 1; justify-self: center; border-radius: 50%; background: repeating-radial-gradient(circle closest-side, transparent 0 calc(25% - 1px), var(--welt-linie) calc(25% - 1px) 25%); box-shadow: inset 0 0 0 1px var(--welt-linie); }
.radar::before, .radar::after { content: ''; position: absolute; background: var(--welt-linie); }
.radar::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.radar::after { top: 50%; left: 0; right: 0; height: 1px; }
.radar-arm { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 290deg, color-mix(in srgb, var(--welt) 38%, transparent) 360deg); animation: radar-dreh 4000ms linear infinite; animation-play-state: paused; }
.szene.laeuft .radar-arm { animation-play-state: running; }
@keyframes radar-dreh { to { transform: rotate(360deg); } }
.radar-punkt { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--tinte-2); transform: scale(0); transition: transform 300ms cubic-bezier(.3, 1.6, .5, 1), background 300ms; z-index: 2; }
.radar-punkt.da { transform: scale(1); }
.radar-punkt.heiss { background: var(--welt); box-shadow: 0 0 0 4px var(--welt-hauch); }
.radar-punkt.heiss::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--welt); animation: zentrale-puls 2000ms var(--kurve) infinite; }
.radar-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; min-height: 300px; }
.treffer { display: grid; grid-template-columns: 1fr auto 64px; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 8px; background: var(--nacht-2); font-size: 14px; animation: eintrag-rein 420ms var(--kurve); }
.treffer small { display: block; color: var(--tinte-3); font-size: 12px; }
.treffer b { font: 500 13px var(--mono); font-variant-numeric: tabular-nums; }
.treffer i { height: 4px; border-radius: 2px; background: var(--rand-deko); position: relative; overflow: hidden; }
.treffer i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--tinte-3); }
.treffer.heiss { box-shadow: inset 2px 0 0 var(--welt); }
.treffer.heiss i::after { background: var(--welt); }

/* C Web-App: baut sich nach Bereich auf */
.app-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.app-wahl button { min-height: 36px; padding: 6px 14px; border: 1px solid var(--rand-deko); border-radius: 999px; background: transparent; color: var(--tinte-2); font: 500 13px var(--text); cursor: pointer; }
.app-wahl button[aria-pressed="true"] { border-color: var(--welt); color: var(--tinte); background: var(--welt-hauch); }
.app-rahmen { position: relative; border-radius: var(--r-mittel); background: var(--onyx); box-shadow: inset 0 0 0 1px var(--rand-deko); overflow: hidden; min-height: 300px; }
.app-leiste { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--rand-deko); font: 600 14px var(--text); }
.app-leiste i { width: 9px; height: 9px; border-radius: 50%; background: var(--rand-deko); }
.app-leiste span { margin-left: 6px; }
.app-leiste em { margin-left: auto; font: 500 11px var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: var(--welt-hauch); color: var(--welt); }
.app-koerper { display: grid; grid-template-columns: 150px 1fr; min-height: 260px; }
.app-seite { list-style: none; margin: 0; padding: 12px 8px; display: grid; gap: 4px; align-content: start; border-right: 1px solid var(--rand-deko); }
.app-seite li { padding: 7px 10px; border-radius: 6px; font-size: 13px; color: var(--tinte-2); }
.app-seite li:first-child { background: var(--nacht-2); color: var(--tinte); box-shadow: inset 2px 0 0 var(--welt); }
.app-inhalt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; align-content: start; }
.modul { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 10px; background: var(--nacht-1); box-shadow: inset 0 0 0 1px var(--rand-deko); min-height: 112px; }
.modul > b { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); }
.modul .gross { font: 700 30px/1 var(--display); }
.modul .klein { font-size: 12px; color: var(--tinte-3); }
.modul ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; }
.modul li { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--rand-deko); }
.modul li em { font-style: normal; color: var(--tinte-3); font-size: 12px; white-space: nowrap; }
.modul .balken-zeile { display: grid; grid-template-columns: 1fr 90px; gap: 8px; align-items: center; font-size: 12px; color: var(--tinte-2); }
.modul .balken-zeile i { height: 6px; border-radius: 3px; background: var(--nacht-3); position: relative; overflow: hidden; }
.modul .balken-zeile i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--welt); transition: width 700ms var(--kurve); }
.modul .kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.modul .kacheln span { aspect-ratio: 1; border-radius: 4px; background: var(--nacht-3); }
.modul .kacheln span:nth-child(3n+1) { background: var(--welt-hauch); }
.app-login { position: absolute; inset: 41px 0 0; display: grid; place-items: center; background: var(--onyx); transition: opacity 400ms var(--kurve); z-index: 2; }
.app-login.weg { opacity: 0; pointer-events: none; }
.app-login div { display: grid; gap: 8px; width: min(260px, 80%); padding: 18px; border-radius: 12px; background: var(--nacht-1); box-shadow: inset 0 0 0 1px var(--rand-deko); }
.app-login b { font: 700 22px var(--display); text-transform: uppercase; }
.app-login span { padding: 8px 10px; border-radius: 8px; background: var(--nacht-2); font: 500 12px var(--mono); color: var(--tinte-2); min-height: 32px; }
.app-login span:last-child { background: var(--welt); color: var(--onyx); text-align: center; font-family: var(--text); font-weight: 600; }
.app-standard { display: flex; flex-wrap: wrap; gap: 8px; }
.app-standard span { padding: 4px 10px; border-radius: 999px; background: var(--nacht-2); font: 500 12px var(--mono); color: var(--tinte-2); }

/* D Info-Operator: Trichter */
.trichter { position: relative; display: grid; gap: 8px; justify-items: center; }
.tr-stufe { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; width: var(--b); min-height: 50px; padding: 8px 14px; border-radius: 10px; background: color-mix(in srgb, var(--nacht-2) 88%, transparent); box-shadow: inset 0 0 0 1px var(--welt-linie); font-size: 13px; }
.tr-stufe b { font: 700 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.tr-stufe:last-child { box-shadow: inset 0 0 0 1.5px var(--welt); }
.tr-tropfen { position: absolute; z-index: 2; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--welt); pointer-events: none; }
.tr-steuer { display: grid; gap: 14px; align-content: start; }
.tr-steuer output { font: 700 clamp(30px, 3vw, 40px)/1 var(--display); }
.tr-steuer input[type="range"] { width: 100%; accent-color: var(--welt); }
.tr-annahmen { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font: 500 12px/1.5 var(--mono); color: var(--tinte-3); }
.tr-modell { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tr-modell div { padding: 10px; border-radius: 8px; background: var(--nacht-2); font-size: 13px; color: var(--tinte-2); }
.tr-modell b { display: block; color: var(--tinte); font-size: 14px; }

/* E Posteingang: Stapel und Spuren */
.post-stapel { position: relative; height: 220px; display: grid; place-items: center; }
.post-stapel > span { position: absolute; bottom: 0; }
.post-mail { position: absolute; left: 50%; top: 50%; width: 150px; margin: -18px 0 0 -75px; padding: 7px 10px; border-radius: 8px; background: var(--nacht-2); box-shadow: inset 0 0 0 1px var(--rand-deko); font-size: 12px; line-height: 1.3; transform: rotate(var(--r)) translate(var(--dx), var(--dy)); }
.post-mail.dringend { box-shadow: inset 0 0 0 1px var(--glut); }
.post-spuren { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.spur { display: grid; gap: 6px; align-content: start; min-height: 220px; padding: 8px; border-radius: 10px; background: var(--onyx); box-shadow: inset 0 0 0 1px var(--rand-deko); }
.spur > b { display: flex; justify-content: space-between; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); }
.spur > b em { font-style: normal; color: var(--welt); }
.spur .post-mail { position: static; width: auto; margin: 0; transform: none; }
.spur .post-mail small { display: block; margin-top: 3px; font: 500 10px var(--mono); color: var(--welt); text-transform: uppercase; letter-spacing: .06em; }

/* F Angebote: Notiz wird Dokument */
.notiz { display: grid; gap: 10px; padding: 16px; border-radius: 12px; background: var(--nacht-2); }
.pegel { display: flex; align-items: center; gap: 3px; height: 40px; }
.pegel i { flex: 1; height: calc(var(--h, .2) * 100%); min-height: 3px; border-radius: 2px; background: var(--welt); opacity: .8; transition: height 120ms linear; }
.notiz p { font-size: 14px; color: var(--tinte-2); min-height: 4.5em; }
.blatt { position: relative; display: grid; gap: 10px; padding: clamp(16px, 2vw, 24px); border-radius: 10px; background: var(--nacht-2); box-shadow: inset 0 0 0 1px var(--rand-deko); min-height: 300px; align-content: start; }
.blatt-kopf { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rand-deko); font-size: 13px; color: var(--tinte-2); }
.blatt-kopf b { color: var(--tinte); font: 700 18px var(--display); text-transform: uppercase; }
.pos { display: grid; grid-template-columns: 28px 1fr auto 86px; gap: 10px; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--rand-deko); animation: eintrag-rein 360ms var(--kurve); }
.pos span:nth-child(1), .pos span:nth-child(3) { color: var(--tinte-3); font-family: var(--mono); font-size: 12px; }
.pos span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.summe { display: flex; justify-content: space-between; padding-top: 6px; font: 700 22px var(--display); font-variant-numeric: tabular-nums; }
/* Stempel unter der Summe, verdeckt keine Zahl */
.stempel { justify-self: end; margin-top: 4px; padding: 8px 14px; border: 2px solid var(--glut); border-radius: 8px; color: var(--glut); font: 700 18px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; transform: rotate(-8deg) scale(1.6); opacity: 0; transition: transform 380ms cubic-bezier(.3, 1.6, .5, 1), opacity 200ms; }
.stempel.da { transform: rotate(-8deg); opacity: 1; }
.stempel.ok { border-color: var(--signal); color: var(--signal); }

/* G Berichte: Diktat wird Bericht */
.mikro { display: grid; gap: 14px; padding: 16px; border-radius: 12px; background: var(--nacht-2); }
.mikro-kopf { display: flex; align-items: center; gap: 10px; font: 500 12px var(--mono); color: var(--tinte-3); letter-spacing: .06em; text-transform: uppercase; }
.mikro-kopf i { width: 10px; height: 10px; border-radius: 50%; background: var(--krit); animation: zentrale-puls 1600ms var(--kurve) infinite; }
.mitschrift { font-size: 15px; line-height: 1.55; min-height: 7.5em; }
.mitschrift mark { background: var(--welt-hauch); color: inherit; border-radius: 3px; box-shadow: 0 1px 0 var(--welt); }
.bericht { display: grid; gap: 10px; padding: clamp(16px, 2vw, 22px); border-radius: 10px; background: var(--nacht-2); box-shadow: inset 0 0 0 1px var(--rand-deko); }
.bericht-zeile { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rand-deko); font-size: 14px; }
.bericht-zeile b { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); padding-top: 3px; }
.bericht-zeile span { min-height: 1.4em; }
.bericht-zeile span:empty::after { content: ''; display: block; width: 70%; height: 10px; margin-top: 5px; border-radius: 4px; background: var(--nacht-3); }

/* H Abstimmung */
.code-feld { display: grid; justify-items: center; gap: 10px; }
.code-raster { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; width: min(100%, 170px); padding: 10px; border-radius: 10px; background: var(--tinte); }
.code-raster i { aspect-ratio: 1; background: var(--onyx); border-radius: 1px; }
.code-raster i.l { background: transparent; }
.code-feld b { font: 700 28px var(--display); letter-spacing: .12em; }
.optionen { display: grid; gap: 14px; }
.option { display: grid; gap: 6px; }
.option > div { display: flex; justify-content: space-between; font-size: 15px; }
.option > div b { font: 500 14px var(--mono); font-variant-numeric: tabular-nums; }
.option > i { height: 14px; border-radius: 7px; background: var(--nacht-2); position: relative; overflow: hidden; }
.option > i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: 7px; background: var(--tinte-3); transition: width 260ms var(--kurve); }
.option.vorn > i::after { background: var(--welt); }
.option.sieg > div span { color: var(--welt); font-weight: 600; }

/* I Webseite: Blöcke fallen in Rahmen */
.sz-bloecke { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, .8fr); gap: clamp(16px, 3vw, 40px); align-items: end; }
.browser, .handy { border-radius: 12px; background: var(--onyx); box-shadow: inset 0 0 0 1px var(--rand-deko); overflow: hidden; }
.browser > b, .handy > b { display: block; height: 28px; border-bottom: 1px solid var(--rand-deko); background: var(--nacht-1); }
.handy { width: min(100%, 150px); justify-self: center; border-radius: 22px; }
.seite-flaeche { display: grid; gap: 6px; padding: 8px; min-height: 280px; align-content: start; }
.handy .seite-flaeche { min-height: 280px; gap: 4px; padding: 6px; }
.block { display: grid; gap: 5px; align-content: center; padding: 10px; border-radius: 6px; background: var(--nacht-1); box-shadow: inset 0 0 0 1px var(--rand-deko); opacity: 0; transform: translateY(-40px); }
.block.da { opacity: 1; transform: none; transition: transform 520ms cubic-bezier(.3, 1.5, .5, 1), opacity 200ms; }
.block i { display: block; height: 6px; border-radius: 3px; background: var(--nacht-3); }
.block i.t { height: 12px; width: 60%; background: var(--tinte-3); }
.block i.k { width: 34%; height: 14px; background: var(--glut); border-radius: 4px; }
.block.held { min-height: 92px; box-shadow: inset 0 0 0 1px var(--welt-linie); background: var(--welt-hauch); }
.block.drei { grid-template-columns: repeat(3, 1fr); min-height: 54px; }
.block.drei i { height: 36px; border-radius: 4px; }
.block.nav { min-height: 24px; grid-template-columns: 20% 1fr 18%; padding: 6px 8px; }
.handy .block { padding: 6px; }
.handy .block.drei { grid-template-columns: 1fr; }
.handy .block.drei i { height: 18px; }
.handy .block.held { min-height: 64px; }
.block-namen { display: flex; flex-wrap: wrap; gap: 6px; }
.block-namen span { padding: 4px 10px; border-radius: 999px; background: var(--nacht-2); font: 500 12px var(--mono); color: var(--tinte-3); }
.block-namen span.da { color: var(--tinte); box-shadow: inset 0 0 0 1px var(--welt); }

/* J Wartungsplan */
.monate { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.monate span { padding: 6px 0; border-radius: 6px; text-align: center; background: var(--nacht-2); font: 500 11px var(--mono); color: var(--tinte-3); transition: background 200ms, color 200ms; }
.monate span.jetzt { background: var(--welt); color: var(--onyx); }
.monate span.vorbei { color: var(--tinte-2); }
.anlagen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.anlage { display: grid; gap: 4px; padding: 12px; border-radius: 10px; background: var(--nacht-2); box-shadow: inset 0 0 0 1px var(--rand-deko); transition: box-shadow 300ms; }
.anlage b { font-size: 14px; }
.anlage small { color: var(--tinte-3); font-size: 12px; }
.anlage em { font: 500 11px var(--mono); font-style: normal; letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-3); }
.anlage.faellig { box-shadow: inset 0 0 0 1.5px var(--glut); }
.anlage.faellig em { color: var(--glut); }
.anlage.geplant { box-shadow: inset 0 0 0 1.5px var(--gold); }
.anlage.geplant em { color: var(--gold); }
.anlage.erledigt { box-shadow: inset 0 0 0 1.5px var(--signal); }
.anlage.erledigt em { color: var(--signal); }

/* K Content-Fließband */
.band { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; position: relative; }
.station { display: grid; gap: 6px; align-content: start; min-height: 230px; padding: 8px; border-radius: 10px; background: var(--onyx); box-shadow: inset 0 0 0 1px var(--rand-deko); }
.station > b { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); }
.station.tor { box-shadow: inset 0 0 0 1px var(--glut); }
.station.tor > b { color: var(--glut); }
.teil { padding: 8px; border-radius: 8px; background: var(--nacht-2); font-size: 12px; line-height: 1.3; box-shadow: inset 2px 0 0 var(--welt); }
.teil small { display: block; margin-top: 3px; font: 500 10px var(--mono); color: var(--tinte-3); letter-spacing: .04em; text-transform: uppercase; }
.teil.ja { box-shadow: inset 2px 0 0 var(--signal); }

/* L Sprachassistent */
.orb { position: relative; width: min(100%, 220px); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.orb i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--welt-linie); transition: transform 180ms ease-out; }
.orb i:nth-child(2) { inset: 14%; border-color: color-mix(in srgb, var(--welt) 34%, transparent); }
.orb i:nth-child(3) { inset: 30%; border: 0; background: var(--welt-hauch); box-shadow: inset 0 0 0 1.5px var(--welt); }
.orb b { position: relative; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--welt); }
.gespraech { display: grid; gap: 10px; align-content: start; min-height: 290px; }
.blase { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; animation: eintrag-rein 360ms var(--kurve); }
.blase.du { justify-self: end; background: var(--nacht-3); border-bottom-right-radius: 4px; }
.blase.ki { justify-self: start; background: var(--welt-hauch); box-shadow: inset 0 0 0 1px var(--welt-linie); border-bottom-left-radius: 4px; }

/* Abteilungen */
.bereiche { display: grid; gap: 28px; }
.bereiche-kopf, .portfolio-kopf, .spiel-kopf { display: grid; gap: 14px; }
.bereich-reiter { display: flex; flex-wrap: wrap; gap: 8px; }
.bereich-feld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px 48px; padding: clamp(20px, 3vw, 36px); border-radius: var(--r-gross); background: var(--nacht-1); animation: eintrag-rein 360ms var(--kurve); }
.bereich-feld > div { display: grid; gap: 14px; align-content: start; }
.bereich-feld h3 { font-size: clamp(26px, 2.6vw, 36px); }
.bereich-echt { padding: 10px 14px; border-radius: var(--r-klein); background: var(--welt-hauch); font-size: 14px; }
.bereich-link { color: var(--tinte-2); font-size: 15px; }
.probleme { display: grid; gap: 8px; align-content: start; }
.problem { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; width: 100%; min-height: 64px; padding: 12px 16px; border: 0; border-radius: var(--r-mittel); background: var(--nacht-2); color: var(--tinte); font: 400 15px/1.4 var(--text); text-align: left; cursor: pointer; transition: background 200ms var(--kurve), transform 200ms var(--kurve); }
.problem:hover { background: var(--nacht-3); }
.problem:active { transform: scale(.99); }
.problem small { grid-column: 1; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.problem span:last-child { grid-row: 1 / span 2; grid-column: 2; font: 500 18px var(--mono); color: var(--tinte-3); }
.modell { grid-column: 1 / -1; display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--rand-deko); }
.modell ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: m; }
.modell li { display: grid; gap: 6px; counter-increment: m; font-size: 14px; color: var(--tinte-2); }
.modell li::before { content: counter(m, decimal-leading-zero); font: 500 13px var(--mono); color: var(--glut); }
.modell li b { color: var(--tinte); }

/* Portfolio */
.portfolio { display: grid; gap: 28px; }
.portfolio-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.projekt { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: var(--r-mittel); background: var(--nacht-1); box-shadow: inset 0 0 0 1px var(--rand-deko); transition: box-shadow 300ms var(--kurve), transform 300ms var(--kurve); animation: eintrag-rein 360ms var(--kurve) both; animation-delay: calc(var(--i, 0) * 30ms); }
.projekt:hover { transform: translateY(-2px); }
.projekt.passt { box-shadow: inset 0 0 0 1.5px var(--welt); }
.projekt-kopf { display: flex; justify-content: space-between; gap: 8px; }
.projekt-kopf .label { color: var(--tinte-3); }
.projekt-stand { padding: 2px 8px; border-radius: 6px; background: var(--nacht-3); font: 500 11px var(--mono); color: var(--tinte-2); letter-spacing: .04em; text-transform: uppercase; }
.projekt-stand.live { background: var(--welt-hauch); color: var(--signal); }
.projekt h3 { font-size: 22px; }
.projekt p { font-size: 14px; color: var(--tinte-2); }
.projekt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.projekt-tags span { font: 500 11px var(--mono); color: var(--tinte-3); letter-spacing: .04em; }

/* Spielwiese */
.spielwiese { display: grid; gap: 28px; }
.spiel { display: grid; gap: 16px; }
.spiel-spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.spiel-spalte { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: var(--r-mittel); background: var(--nacht-1); }
.spiel-spalte > b { font: 700 22px var(--display); text-transform: uppercase; }
.spiel-spalte button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--rand-deko); border-radius: var(--r-klein); background: transparent; color: var(--tinte-2); font: 400 14px/1.35 var(--text); text-align: left; cursor: pointer; }
.spiel-spalte button[aria-pressed="true"] { border-color: var(--welt); background: var(--welt-hauch); color: var(--tinte); }
.spiel-lauf { display: grid; gap: 16px; padding: clamp(16px, 2.4vw, 28px); border-radius: var(--r-gross); background: var(--nacht-1); }
.spiel-strecke { position: relative; display: flex; justify-content: space-between; align-items: center; height: 28px; margin-inline: 10px; }
.spiel-strecke::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--rand-deko); }
.spiel-strecke i { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--nacht-3); box-shadow: inset 0 0 0 1.5px var(--rand-bedien); transition: background 300ms, box-shadow 300ms; }
.spiel-strecke i.an { background: var(--welt); box-shadow: 0 0 0 6px var(--welt-hauch); }
.spiel-strecke b { position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 4px; border-radius: 50%; background: var(--glut); opacity: 0; }
.spiel-log { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; min-height: 120px; font-size: 15px; }
.spiel-log li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; animation: eintrag-rein 360ms var(--kurve); }
.spiel-log li b { font: 500 12px/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--welt); }
.spiel-log li.fazit { grid-template-columns: 1fr; padding: 12px 14px; border-radius: var(--r-klein); background: var(--welt-hauch); }
.spiel-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }

.werkfluss-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding-block: 28px; border-block: 1px solid var(--rand-deko); }
.werkfluss-band > div { display: grid; gap: 8px; }

@media (max-width: 860px) {
  .sz-zwei, .welt-unten, .bereich-feld { grid-template-columns: 1fr; }
  .spiel-spalten { grid-template-columns: 1fr 1fr; }
  .modell ol { grid-template-columns: 1fr 1fr; }
  .post-spuren { grid-template-columns: 1fr 1fr; }
  .spur { min-height: 120px; }
  .post-stapel { height: 170px; }
  .radar { width: min(100%, 280px); }
  .radar-liste { min-height: 0; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  /* Zielgruppe auf dem Handy in einer wischbaren Zeile, damit das Deck im ersten Bild bleibt */
  .fuer-wahl { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; justify-self: stretch; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); scrollbar-width: none; }
  .fuer-wahl::-webkit-scrollbar { display: none; }
  .fuer-wahl button { flex: none; }
  .kal { grid-template-columns: 1fr; }
  .kal-tag { grid-template-columns: 30px repeat(3, minmax(0, 1fr)); align-items: center; }
  .kal-platz { min-height: 40px; }
  .app-koerper { grid-template-columns: 1fr; }
  .app-seite { display: flex; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--rand-deko); padding: 8px; }
  .app-seite li { white-space: nowrap; }
  .app-inhalt { grid-template-columns: 1fr; }
  .band { grid-template-columns: 1fr; }
  .station { grid-template-columns: 70px 1fr 1fr; min-height: 60px; align-items: center; }
  .station > b { grid-row: span 3; }
  .anlagen { grid-template-columns: 1fr 1fr; }
  .anlage:nth-child(n+7) { display: none; }
  .monate span { font-size: 9px; padding: 5px 0; }
  .sz-bloecke { grid-template-columns: 1fr; }
  .handy { display: none; }
  .spiel-spalten { grid-template-columns: 1fr; }
  .spiel-log li { grid-template-columns: 1fr; gap: 2px; }
  .tr-modell { grid-template-columns: 1fr; }
  .bericht-zeile { grid-template-columns: 1fr; gap: 2px; }
  .treffer { grid-template-columns: 1fr auto; }
  .treffer i { grid-column: 1 / -1; }
  .pos { grid-template-columns: 22px 1fr 70px; }
  .pos span:nth-child(3) { display: none; }
}
/* Tiefennetz-Welt: 3D-Netz auf Canvas, Zähler oben, Erzählzeile unten */
.tn-box { position: relative; height: clamp(440px, 46vw, 600px); margin: calc(-1 * clamp(16px, 2.4vw, 28px)); margin-bottom: 0; border-radius: var(--r-gross) var(--r-gross) 0 0; overflow: hidden; background: radial-gradient(60% 55% at 50% 50%, var(--welt-hauch), transparent 70%); }
.tn-canvas, .tiefe-buehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.tn-hud { position: absolute; top: 14px; left: 16px; display: flex; flex-wrap: wrap; gap: 6px 16px; pointer-events: none; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); }
.tn-hud span { display: flex; align-items: baseline; gap: 6px; }
.tn-hud b { font: 700 22px/1 var(--display); color: var(--tinte); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.tn-phase { position: absolute; left: 16px; right: 16px; bottom: 14px; margin: 0; max-width: none; font: 600 clamp(16px, 1.6vw, 20px)/1.3 var(--text); color: var(--tinte); pointer-events: none; text-wrap: balance; }
.tn-phase.neu { animation: tn-satz 600ms var(--kurve); }
@keyframes tn-satz { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.tn-tip { position: absolute; z-index: 3; display: grid; gap: 2px; max-width: 220px; padding: 8px 10px; border-radius: var(--r-klein); background: var(--nacht-2); box-shadow: inset 0 0 0 1px var(--rand-deko), 0 12px 30px -16px rgba(0, 0, 0, .8); pointer-events: none; font-size: 13px; line-height: 1.35; }
.tn-tip span { color: var(--tinte-3); font-size: 12px; }
.tn-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }

/* Abschnitt Tiefennetz: Text links, schwebendes Werk rechts */
.tiefe { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.tiefe-text { display: grid; gap: 16px; justify-items: start; }
.tiefe-text b { color: var(--glut); }
.tiefe-buehne { position: relative; aspect-ratio: 1.15; min-height: 340px; border-radius: var(--r-gross); background: radial-gradient(55% 55% at 50% 50%, var(--gold-hauch), transparent 72%); }

/* Matrix nach Maß */
.mx-quelle { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-modul { min-height: 32px; padding: 5px 10px; border: 1px solid var(--rand-deko); border-radius: 8px; background: transparent; color: var(--tinte-3); font: 500 12.5px var(--text); cursor: pointer; transition: color 200ms, border-color 200ms, background 200ms; }
.mx-quelle .mx-modul.an { color: var(--tinte); border-color: var(--welt); background: var(--welt-hauch); }
.mx-ziel { border-radius: var(--r-mittel); background: var(--onyx); box-shadow: inset 0 0 0 1px var(--rand-deko); min-height: 220px; overflow: hidden; }
.mx-kopf { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--rand-deko); font: 600 14px var(--text); }
.mx-kopf i { width: 9px; height: 9px; border-radius: 50%; background: var(--rand-deko); }
.mx-kopf b { margin-left: 6px; }
.mx-kopf em { margin-left: auto; font: 500 11px var(--mono); font-style: normal; color: var(--welt); letter-spacing: .04em; }
.mx-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; padding: 12px; }
.mx-slots .mx-modul { display: grid; place-items: center; min-height: 44px; color: var(--tinte); border-color: var(--welt-linie); background: var(--nacht-1); box-shadow: inset 2px 0 0 var(--welt); cursor: default; }

/* Schaltzentrale */
.sz-pult { display: grid; grid-template-columns: minmax(0, 1fr) minmax(48px, .7fr) minmax(0, 1fr); align-items: stretch; min-height: 260px; }
.sz-schalter, .sz-ziele { display: grid; gap: 10px; align-content: space-around; }
.sz-leitung { width: 100%; height: 100%; }
.schalter { min-height: 54px; padding: 10px 14px; border: 0; border-radius: var(--r-mittel); background: var(--nacht-2); box-shadow: inset 0 -3px 0 var(--rand-deko), inset 0 0 0 1px var(--rand-deko); color: var(--tinte); font: 600 14px var(--text); text-align: left; cursor: pointer; transition: transform 120ms var(--kurve), box-shadow 120ms var(--kurve); }
.schalter:hover { box-shadow: inset 0 -3px 0 var(--welt), inset 0 0 0 1px var(--welt-linie); }
.schalter.gedrueckt { animation: schalter-druck 260ms var(--kurve); }
@keyframes schalter-druck { 40% { transform: translateY(2px) scale(.98); box-shadow: inset 0 -1px 0 var(--welt), inset 0 0 0 1px var(--welt); } }
.sz-ziel { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 14px; border-radius: var(--r-mittel); background: var(--onyx); box-shadow: inset 0 0 0 1px var(--rand-deko); font-size: 14px; }
.sz-ziel i { width: 12px; height: 12px; border-radius: 3px; background: var(--rand-bedien); flex: none; }
.sz-ziel.trifft { animation: ziel-trifft 900ms var(--kurve); }
.sz-ziel.trifft i { background: var(--signal); }
@keyframes ziel-trifft { 20% { box-shadow: inset 0 0 0 1.5px var(--signal), 0 0 0 6px color-mix(in srgb, var(--signal) 18%, transparent); } }
.sz-frei { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tinte-2); cursor: pointer; }
.sz-frei input { width: 18px; height: 18px; accent-color: var(--glut); }
.sz-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 64px; }
.sz-log li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; animation: eintrag-rein 360ms var(--kurve); }
.sz-log li b { font: 500 12px var(--mono); color: var(--welt); }
.sz-ja { min-height: 32px; padding: 4px 12px; border: 0; border-radius: 8px; background: var(--glut); color: var(--glut-tinte); font: 600 13px var(--text); cursor: pointer; }

/* Kollektiv-Bot */
.dc-chat { border-radius: var(--r-mittel); background: var(--onyx); box-shadow: inset 0 0 0 1px var(--rand-deko); overflow: hidden; }
.dc-kopf { padding: 10px 14px; border-bottom: 1px solid var(--rand-deko); font: 600 14px var(--text); color: var(--tinte-2); }
.dc-liste { display: grid; gap: 12px; padding: 14px; min-height: 300px; align-content: start; }
.dc-msg { display: grid; grid-template-columns: 32px 1fr; gap: 10px; animation: eintrag-rein 360ms var(--kurve); }
.dc-msg > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--nacht-3); font: 600 13px var(--text); font-style: normal; color: var(--tinte); }
.dc-msg.bot > i { background: var(--welt); color: var(--onyx); }
.dc-msg b { font-size: 13px; }
.dc-msg.bot b { color: var(--welt); }
.dc-msg p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; }
.dc-reaktionen { display: flex; gap: 6px; margin-top: 6px; }
.dc-reaktionen span { padding: 2px 10px; border-radius: 999px; background: var(--nacht-2); box-shadow: inset 0 0 0 1px var(--rand-deko); font: 500 12px var(--mono); font-variant-numeric: tabular-nums; }
.dc-reaktionen span:first-child { box-shadow: inset 0 0 0 1px var(--welt); color: var(--welt); }
.dc-seite { display: grid; gap: 12px; align-content: start; }
.dc-stufen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dc-stufe { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 10px; background: var(--nacht-2); font-size: 12px; color: var(--tinte-3); transition: color 300ms, background 300ms; }
.dc-stufe i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--rand-bedien); transition: background 300ms, border-color 300ms; }
.dc-stufe.an { color: var(--tinte); background: var(--welt-hauch); }
.dc-stufe.an i { background: var(--welt); border-color: var(--welt); }
.dc-aufgaben { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dc-aufgaben li { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 8px; background: var(--nacht-2); font-size: 14px; }
.dc-aufgaben em { font: 500 12px var(--mono); font-style: normal; color: var(--tinte-3); }
.dc-aufgaben li.vergeben { box-shadow: inset 2px 0 0 var(--welt); }
.dc-aufgaben li.vergeben em { color: var(--welt); }

/* Ideen-Kompass */
.kk-fragen { display: grid; gap: 14px; }
.kk-frage { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-mittel); background: var(--nacht-2); }
.kk-frage > b { font: 700 20px/1.1 var(--display); text-transform: uppercase; }
.kk-satz { font: 600 clamp(20px, 2.2vw, 28px)/1.35 var(--text); max-width: none; text-wrap: pretty; }
.kk-luecke { display: inline-block; min-width: 3ch; padding: 0 6px; border-radius: 6px; border-bottom: 2px dashed var(--rand-bedien); color: var(--tinte-3); }
.kk-luecke.voll { color: var(--tinte); border-bottom: 2px solid var(--welt); background: var(--welt-hauch); }
.kk-felder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kk-felder span { padding: 10px 6px; border-radius: 8px; background: var(--nacht-2); text-align: center; font-size: 13px; color: var(--tinte-3); transition: background 400ms, color 400ms, box-shadow 400ms; }
.kk-felder span.an { background: var(--welt-hauch); color: var(--tinte); box-shadow: inset 0 0 0 1px var(--welt); }

/* Handbuch-Werk: Zettelstapel links, Buch mit Kapiteln und Prüf-Marken rechts */
.hb-stapel { position: relative; min-height: 260px; display: grid; place-items: end center; padding-bottom: 6px; }
.hb-zettel { position: absolute; left: 50%; top: 16px; width: min(220px, 80%); padding: 8px 10px; border-radius: 8px; background: var(--nacht-2); box-shadow: inset 0 0 0 1px var(--rand-deko), 0 8px 20px -14px rgba(0, 0, 0, .8); font-size: 12.5px; line-height: 1.3; transform: translate(-50%, var(--dy)) rotate(var(--r)); transition: transform 600ms var(--kurve), opacity 500ms var(--kurve); }
.hb-zettel.weg { opacity: .32; transform: translate(-50%, calc(var(--dy) * .55)) rotate(0deg) scale(.92); box-shadow: inset 2px 0 0 var(--signal); }
.hb-buch { border-radius: var(--r-mittel); background: var(--onyx); box-shadow: inset 0 0 0 1px var(--rand-deko), inset 4px 0 0 var(--welt); padding: 16px 18px; min-height: 260px; }
.hb-kopf { display: grid; gap: 4px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--rand-deko); }
.hb-kopf b { font: 700 24px/1 var(--display); text-transform: uppercase; }
.hb-kapitel { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: k; }
.hb-kapitel li { counter-increment: k; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--rand-deko); font-size: 14px; }
.hb-kapitel li::before { content: counter(k, decimal-leading-zero); font: 500 12px var(--mono); color: var(--welt); }
.hb-kapitel em { font: 500 10.5px/1 var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 4px; border: 1px solid currentColor; }
.hb-kapitel .marke-geprueft { color: var(--signal); }
.hb-kapitel .marke-ungeprueft { color: var(--gold); }
.hb-kapitel .marke-gesperrt { color: var(--krit); }

@media (max-width: 860px) {
  .tiefe { grid-template-columns: 1fr; }
  .tiefe-buehne { aspect-ratio: 1; min-height: 300px; }
}
@media (max-width: 640px) {
  .tn-box { height: 480px; }
  .tn-hud b { font-size: 18px; }
  .sz-pult { grid-template-columns: minmax(0, 1.1fr) 40px minmax(0, 1fr); min-height: 300px; }
  .schalter, .sz-ziel { font-size: 13px; padding: 8px 10px; min-height: 58px; }
  .mx-slots { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .dc-liste { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .zentrale-puls { display: none; } }

/* ── W.E.T.: die Kollektiv-Karte (Tonis Wunsch 23.10.2026). Liegt sie vorn, wird die ganze Seite zu Licht.
   Farben: Kupfer-Verlauf aus dem Design-Kern (#FFF8F0, #FFE2C4, #E2A878), Gold und Glut. Logo nur als Bild, nie verzerrt. ── */
:root { --wet: #e2a878; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --wet: #7d5f1c; } }
:root[data-theme="light"] { --wet: #7d5f1c; }
@property --wet-winkel { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.deck-karte.karte-kollektiv { background: radial-gradient(120% 85% at 50% 32%, #3a2412 0%, #1d130a 46%, #0e0a07 100%); color: #fff8f0;
  box-shadow: inset 0 0 0 1px rgba(226, 168, 120, .45), 0 24px 50px -28px rgba(0, 0, 0, .9), 0 0 50px -18px rgba(226, 168, 120, .5); }
.deck-karte.karte-kollektiv::before { inset: 0; padding: 1.5px; border-radius: inherit; opacity: 1; z-index: 5;
  background: conic-gradient(from var(--wet-winkel), #e2a878, #fff8f0 12%, #c9a24b 25%, #e88630 40%, #e2a878 55%, #ffe2c4 70%, #c9a24b 85%, #e2a878);
  -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);
  animation: wet-rand 6s linear infinite; }
@keyframes wet-rand { to { --wet-winkel: 360deg; } }
.deck-karte.karte-kollektiv.vorn { box-shadow: 0 0 0 1px rgba(226, 168, 120, .5), 0 30px 70px -26px rgba(0, 0, 0, .95), 0 0 90px -10px rgba(226, 168, 120, .55); }
.deck[data-welt] .deck-karte.karte-kollektiv.vorn { box-shadow: 0 0 0 1px rgba(226, 168, 120, .5), 0 30px 70px -26px rgba(0, 0, 0, .95), 0 0 90px -10px rgba(226, 168, 120, .55); }
.karte-kollektiv .deck-text { background: linear-gradient(transparent, #120b06 30%); }
.karte-kollektiv .deck-text .label { color: #e2a878; }
.karte-kollektiv .deck-text strong { font-size: clamp(30px, 3vw, 38px); letter-spacing: .06em; background: linear-gradient(100deg, #ffe2c4, #e2a878 45%, #c9a24b 70%, #fff8f0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.karte-kollektiv .deck-text span:last-child { color: #e9dcc8; }
.karte-kollektiv .deck-beispiel { background: rgba(226, 168, 120, .16); color: #ffe2c4; }

/* Seite in W.E.T.-Licht */
.wet-schicht { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1200ms var(--kurve);
  background: radial-gradient(90% 55% at 50% 108%, rgba(232, 134, 48, .26), transparent 70%), radial-gradient(70% 45% at 50% 28%, rgba(226, 168, 120, .12), transparent 70%); }
.wet-schicht canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wet-an .wet-schicht { opacity: 1; }
.welt-grund { transition: opacity 900ms var(--kurve), filter 900ms var(--kurve); }
.wet-an .welt-grund { opacity: .25; }
.held-zentrale { position: relative; isolation: isolate; }
.wet-zeichen { position: absolute; left: 50%; top: 4px; z-index: -1; width: min(760px, 92%); transform: translateX(-50%) scale(.96); opacity: 0; pointer-events: none; transition: opacity 900ms var(--kurve), transform 1200ms var(--kurve); }
.wet-an .wet-zeichen { opacity: .12; transform: translateX(-50%) scale(1); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .wet-an .wet-zeichen { filter: brightness(.3); opacity: .07; } }
:root[data-theme="light"] .wet-an .wet-zeichen { filter: brightness(.3); opacity: .07; }
.wet-an .held-zentrale > .label { color: var(--wet); }
.wet-zeile { display: block; margin-top: .18em; font-size: .46em; font-weight: 600; letter-spacing: .05em; color: var(--wet); }
.wet-an .zentrale-puls i { border-color: var(--wet); }

/* Welt der Kollektiv-Karte: Lichter-Szene und Einladung statt Bauzeit */
.lichter { position: relative; height: clamp(320px, 38vw, 440px); border-radius: var(--r-mittel); overflow: hidden; background: radial-gradient(80% 90% at 50% 50%, #1a1009, #070504 75%); }
.lichter canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lichter-zahl { position: absolute; left: 16px; top: 14px; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #e2a878; }
.lichter-satz { position: absolute; left: 50%; bottom: 18px; width: min(92%, 34ch); transform: translateX(-50%); margin: 0; text-align: center; color: #fff8f0; font: 600 clamp(20px, 2.2vw, 28px)/1.15 var(--display); text-transform: uppercase; text-wrap: balance; }
.welt-einladung { display: none; }
.welt[data-art="kollektiv"] .welt-bau, .welt[data-art="kollektiv"] .welt-weiter { display: none; }
.welt[data-art="kollektiv"] .welt-einladung { display: grid; gap: 16px; align-content: start; padding: 22px; border-radius: var(--r-gross);
  background: linear-gradient(160deg, rgba(226, 168, 120, .12), transparent 60%), var(--nacht-1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wet) 40%, transparent); }
.welt-einladung .lead { font-size: 17px; }
.welt-einladung > div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.wet-weg { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 4px; counter-reset: w; }
.wet-weg li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; background: var(--nacht-2); color: var(--tinte-2); font: 500 12px/1.2 var(--text); }
.wet-weg li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--wet) calc(20% + var(--n, 0) * 12%), var(--nacht-3)); box-shadow: 0 0 calc(var(--n, 0) * 2px) var(--wet); }
.wet-weg li:last-child { color: var(--tinte); box-shadow: inset 0 0 0 1px var(--wet); }
@media (prefers-reduced-motion: reduce) { .deck-karte.karte-kollektiv::before { animation: none; } }