/* CONTAVOX Erklärseite contavox.ch/so-funktionierts (Phase 1, 19.10.2026)
   Aufbau wie eine Versammlung: dunkles Band oben (wie das Kopfband der Stimm-App), helle Fläche mit den sieben
   Schritten der Mitglieder (Text links, Gerät rechts), dunkles Band für die Leitung, dann Sicherheit und Fragen.
   Farben und Schrift aus app/klickmodell/css/contavox.css; die neuen Marken-Token von Paket C ersetzen später nur
   den :root-Block. Grün, Rot, Schiefergrau nur für Ja, Nein, Enthaltung, immer mit ✓ ✕ –.
   Strenge CSP der Startseite: keine Inline-Stile, keine data:-Bilder. Animationen: erklaer.js setzt data-schritt
   und schaltet Klassen (weg, an, tippt); ohne Bewegung (prefers-reduced-motion) steht der letzte Schritt still. */
@font-face {
  font-family: 'Mona Sans';
  src: url('/schriften/mona-sans.woff2') format('woff2');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
:root {
  --nacht: #110c2b; --tief: #21175a;
  --violett: #5b3fd9; --violett-tief: #4229b6; --violett-oben: #7c62ff; --violett-hell: #bcb0ff; --violett-zart: #eeeafe;
  --eis: #f4f3fa; --eis-2: #e8e5f4; --weiss: #ffffff;
  --tinte: #16132d; --tinte-2: #4b4767; --linie: rgba(22, 19, 45, 0.12); --linie-feld: #c4bfd9;
  --text-dunkel: #f0edfc; --text-dunkel-2: rgba(232, 228, 252, 0.78); --linie-dunkel: rgba(200, 190, 255, 0.2);
  --ja: #17784a; --ja-zart: #e3f2e9; --ja-rand: #a6d2b9;
  --nein: #bf2e3a; --nein-zart: #fbe8e9; --nein-rand: #ebb2b7;
  --enth: #4c566e; --enth-zart: #e9ebf0; --enth-rand: #c2c7d3;
  --geraet: #16132d; --zoom-grau: #232329; --zoom-grau-2: #34343c; --zoom-text: #e9e9ef;
  --schrift: 'Mona Sans', 'Helvetica Neue', Arial, sans-serif;
  --kurve: cubic-bezier(.19, 1, .22, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: hidden; background: var(--eis); color: var(--tinte);
  font-family: var(--schrift); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ul, ol { margin: 0; }
:focus-visible { outline: 3px solid var(--violett); outline-offset: 3px; border-radius: 10px; }
.nacht :focus-visible { outline-color: var(--violett-hell); }
.rand {
  width: 100%; max-width: 1180px; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 760px) { .rand { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 5; padding: 10px 16px; border-radius: 999px; background: var(--weiss); color: var(--tinte); font-weight: 650; text-decoration: none; }
.sprung:focus { top: 12px; }

/* ---------- dunkle Bänder ---------- */
.nacht {
  color: var(--text-dunkel);
  background:
    radial-gradient(60% 70% at 85% 0%, rgba(124, 98, 255, 0.45), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(91, 63, 217, 0.28), transparent 70%),
    linear-gradient(175deg, var(--tief), var(--nacht) 80%);
}
.kopf { display: flex; align-items: center; gap: 16px; padding-block: 16px; }
.heim { display: inline-flex; min-height: 44px; align-items: center; border-radius: 8px; }
.wortmarke { height: 22px; width: auto; }
.sprachwahl { margin-left: auto; display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--linie-dunkel); background: rgba(255, 255, 255, 0.06); }
.sprachwahl button { min-width: 48px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--text-dunkel-2); font-size: 15px; font-weight: 650; letter-spacing: 0.05em; }
.sprachwahl button:hover { color: var(--text-dunkel); }
.sprachwahl button[aria-pressed="true"] { background: var(--weiss); color: var(--tinte); }
@media (max-width: 400px) { .wortmarke { height: 17px; } .kopf { gap: 10px; } .sprachwahl button { min-width: 44px; } }

.einstieg { display: grid; gap: 28px; padding-block: 28px 48px; }
@media (min-width: 980px) { .einstieg { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: end; padding-block: 56px 72px; } }
.einstieg-text { display: grid; gap: 18px; min-width: 0; }
.gross { font-weight: 690; font-variation-settings: 'wdth' 100; font-size: clamp(38px, 4.4vw + 18px, 74px); line-height: 0.98; letter-spacing: -0.028em; text-wrap: balance; }
.gross-2 { font-weight: 680; font-variation-settings: 'wdth' 100; font-size: clamp(30px, 2.4vw + 20px, 48px); line-height: 1.04; letter-spacing: -0.022em; text-wrap: balance; }
.lead { max-width: 32em; font-size: clamp(18px, 0.5vw + 16px, 21px); color: var(--text-dunkel-2); text-wrap: pretty; }
.ueberblick {
  display: grid; gap: 14px; padding: 20px; border-radius: 26px; min-width: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 0 0 1px rgba(200, 190, 255, 0.22) inset;
}
.ueberblick-titel { font-size: 14px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violett-hell); }
.ueberblick-liste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.ueberblick-liste a {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px 6px 6px; border-radius: 999px;
  text-decoration: none; font-weight: 620; font-size: 17px; transition: background 0.3s;
}
.ueberblick-liste a:hover { background: rgba(255, 255, 255, 0.08); }
.nr {
  flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; color: #fff;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.55) 0 8%, transparent 26%), radial-gradient(circle at 50% 46%, #8a70ff, #4a2ccc 62%, #26117a 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}
.ueberblick-mehr { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 12px; border-top: 1px solid var(--linie-dunkel); }
.ueberblick-mehr a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--text-dunkel-2); text-underline-offset: 4px; }
.ueberblick-mehr a:hover { color: var(--text-dunkel); }

/* ---------- helle Fläche, Schritte ---------- */
.flaeche { background: var(--eis); }
.schritte { display: grid; gap: clamp(56px, 7vw, 104px); padding-block: clamp(48px, 6vw, 96px); }
.schritt { display: grid; gap: 24px; align-items: center; scroll-margin-top: 16px; }
.schritt > * { min-width: 0; }
@media (min-width: 980px) {
  .schritt { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; }
  .schritt-breit { grid-template-columns: minmax(0, 1fr); }
  .schritt-breit > .schritt-text { max-width: 760px; }
  #wortmeldung { row-gap: 72px; }
}
.schritt-text { display: grid; gap: 14px; align-content: start; }
.schritt-nr { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--violett-tief); }
.schritt-nr-hell { color: var(--violett-hell); }
.schritt h2 { font-weight: 670; font-variation-settings: 'wdth' 100; font-size: clamp(28px, 1.8vw + 20px, 42px); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
.schritt h3 { font-weight: 660; font-variation-settings: 'wdth' 100; font-size: clamp(24px, 1vw + 19px, 32px); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.satz { font-size: clamp(19px, 0.5vw + 17px, 22px); line-height: 1.5; max-width: 34em; text-wrap: pretty; }
.gut { color: var(--tinte-2); max-width: 34em; text-wrap: pretty; }
.gut strong { display: block; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte); margin-bottom: 2px; }
.tipps { display: grid; gap: 10px; padding: 0; list-style: none; max-width: 40em; }
.tipps li { position: relative; padding-left: 34px; text-wrap: pretty; }
.tipps li::before { content: ''; position: absolute; left: 4px; top: 0.36em; width: 18px; height: 18px; border-radius: 50%; background: var(--violett); box-shadow: 0 0 0 4px var(--violett-zart); }
.warum { display: grid; gap: 6px; padding: 18px 20px; border-radius: 20px; background: var(--violett-zart); color: var(--tinte); max-width: 34em; }
.warum-titel { font-weight: 660; color: var(--violett-tief); }
.hinweis-saal { max-width: 46em; color: var(--tinte-2); font-size: 17px; padding-left: 16px; border-left: 3px solid var(--linie-feld); }
.varianten { display: grid; gap: 24px; }
@media (min-width: 980px) { .varianten { grid-template-columns: 1fr 1fr; } }
.variante-titel { display: flex; align-items: center; gap: 10px; font-weight: 660; font-size: 19px; font-variation-settings: 'wdth' 100; }
.variante-buchstabe { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--tinte); color: #fff; font-size: 15px; font-weight: 700; }

/* ---------- Bühne einer Animation ---------- */
.ablauf {
  position: relative; margin: 0; display: grid; gap: 16px; padding: 18px; border-radius: 28px; min-width: 0;
  background: var(--weiss); border: 1px solid rgba(22, 19, 45, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 30px 60px -44px rgba(33, 23, 90, 0.5);
}
.geraete {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 16px; padding: 22px 8px;
  border-radius: 20px; container-type: inline-size;
  background: radial-gradient(70% 70% at 50% 30%, rgba(124, 98, 255, 0.14), transparent 70%), var(--eis);
}
.steuer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.punkte { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: p; flex: 1 1 260px; min-width: 0; }
.punkte li { counter-increment: p; }
.punkte button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 5px; border-radius: 999px; border: 0;
  background: var(--eis); color: var(--tinte-2); font-size: 15px; font-weight: 600; line-height: 1.2; text-align: left;
  transition: background 0.3s, color 0.3s;
}
.punkte button::before {
  content: counter(p); display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--weiss); color: var(--tinte-2); font-weight: 700; font-size: 14px; box-shadow: 0 0 0 1px var(--linie) inset;
}
.punkte button:hover { color: var(--tinte); }
.punkte li[aria-current="step"] button { background: var(--violett); color: #fff; }
.punkte li[aria-current="step"] button::before { background: #fff; color: var(--violett-tief); box-shadow: none; }
.spielen {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 0;
  background: transparent; color: var(--tinte-2); font-size: 15px; font-weight: 600; box-shadow: 0 0 0 1.5px var(--linie-feld) inset;
}
.spielen::before { content: ''; width: 10px; height: 12px; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; }
.spielen[data-zustand="steht"]::before { width: 0; height: 0; border-right: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.spielen:hover { color: var(--tinte); box-shadow: 0 0 0 1.5px var(--violett) inset; }
.bildmarke {
  position: absolute; top: 12px; right: 12px; z-index: 2; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 650; letter-spacing: 0.03em; color: var(--violett-tief); background: var(--weiss); border: 1px dashed var(--violett-hell);
}
.variante .bildmarke { position: static; justify-self: start; }
.ablauf-dunkel { background: rgba(255, 255, 255, 0.05); border-color: var(--linie-dunkel); box-shadow: none; }
.ablauf-dunkel .geraete { background: radial-gradient(70% 70% at 50% 30%, rgba(124, 98, 255, 0.25), transparent 70%), rgba(0, 0, 0, 0.18); }
.ablauf-dunkel .punkte button { background: rgba(255, 255, 255, 0.08); color: var(--text-dunkel-2); }
.ablauf-dunkel .punkte button::before { background: rgba(255, 255, 255, 0.12); color: var(--text-dunkel); box-shadow: none; }
.ablauf-dunkel .punkte button:hover { color: var(--text-dunkel); }
.ablauf-dunkel .punkte li[aria-current="step"] button { background: var(--weiss); color: var(--tinte); }
.ablauf-dunkel .punkte li[aria-current="step"] button::before { background: var(--violett); color: #fff; }
.ablauf-dunkel .spielen { color: var(--text-dunkel-2); box-shadow: 0 0 0 1.5px var(--linie-dunkel) inset; }
.ablauf-dunkel .bildmarke { background: var(--nacht); color: var(--violett-hell); }

/* ---------- Ablauf-Mechanik (erklaer.js) ---------- */
.weg { display: none !important; }
:where(.ablauf [data-ab]:not(.weg):not(.s-bild)) { animation: auf 0.4s var(--kurve) both; }
@keyframes auf { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } }
[data-tipp] { position: relative; }
.tippt { animation: druck 0.6s var(--kurve); }
.tippt::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 3.4em; height: 3.4em; margin: -1.7em 0 0 -1.7em; border-radius: 50%;
  pointer-events: none; z-index: 3; background: rgba(91, 63, 217, 0.32); border: 0.24em solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 0.22em rgba(91, 63, 217, 0.55), 0 0.4em 1em rgba(17, 12, 43, 0.35);
  animation: tipp 0.9s ease-out both;
}
@keyframes tipp { 0% { opacity: 0; transform: scale(0.4); } 22% { opacity: 1; transform: scale(1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes druck { 30% { transform: scale(0.96); } }

/* ---------- Handy ---------- */
.handy {
  font-size: 10px; width: 25em; height: 50em; flex: none; padding: 0.9em; border-radius: 3.9em; background: var(--geraet);
  box-shadow: 0 0 0 0.15em #2b2650 inset, 0 2.6em 4.4em -2em rgba(17, 12, 43, 0.6);
}
@media (min-width: 400px) { .handy { font-size: 10.6px; } }
@media (min-width: 1100px) { .handy { font-size: 11.2px; } }
.schirm { position: relative; height: 100%; overflow: hidden; border-radius: 3.1em; background: var(--eis); }
.s-bild { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity 0.4s var(--kurve), transform 0.5s var(--kurve), visibility 0.4s; }
.s-bild.weg { display: flex !important; opacity: 0; visibility: hidden; transform: translateX(8%); }
.s-kopf {
  display: grid; gap: 0.3em; padding: 2.6em 1.5em 1.1em; color: var(--text-dunkel);
  background: radial-gradient(70% 160% at 88% -30%, rgba(124, 98, 255, 0.55), transparent 62%), linear-gradient(180deg, var(--tief), var(--nacht));
}
.s-marke { display: inline-flex; align-items: center; font-weight: 760; font-variation-settings: 'wdth' 125; letter-spacing: 0.16em; font-size: 1.15em; line-height: 1; }
.s-marke i, .s-kugel-klein, .s-kugel-gross {
  display: inline-grid; place-items: center; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 8%, transparent 24%), radial-gradient(circle at 64% 72%, rgba(188, 176, 255, 0.95), transparent 56%), radial-gradient(circle at 50% 46%, #8a70ff, #4a2ccc 62%, #26117a 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.38) inset;
}
.s-marke i { width: 0.95em; height: 0.95em; margin: 0 0.12em 0 0.02em; }
.s-marke-dunkel { color: var(--tinte); font-size: 1.9em; }
.s-anlass { font-size: 1.2em; font-weight: 600; color: var(--text-dunkel-2); }
.s-inhalt { display: flex; flex-direction: column; gap: 0.85em; padding: 1.4em; min-height: 0; }
.s-mitte { flex: 1; align-items: center; justify-content: center; text-align: center; gap: 1.1em; padding-bottom: 4em; }
.s-titel { font-weight: 670; font-variation-settings: 'wdth' 100; font-size: 1.95em; line-height: 1.08; letter-spacing: -0.015em; }
.s-frage { font-size: 1.85em; margin-bottom: 0.2em; }
.s-text { font-size: 1.25em; line-height: 1.4; color: var(--tinte-2); }
.s-klein { font-size: 1.05em; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte-2); }
.s-klein-hell { font-size: 1.05em; font-weight: 600; color: var(--text-dunkel-2); }
.s-chip { align-self: center; display: inline-flex; align-items: center; gap: 0.4em; padding: 0.35em 1em; border-radius: 999px; background: var(--eis-2); font-size: 1.15em; font-weight: 620; }
.s-inhalt:not(.s-mitte) > .s-chip { align-self: flex-start; }
.s-chip-schloss::before { content: ''; width: 0.75em; height: 0.6em; border-radius: 0.15em; background: var(--tinte); box-shadow: 0 -0.35em 0 -0.12em var(--eis-2), 0 -0.38em 0 0 var(--tinte); }
.s-uhr { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
.s-knopf {
  display: grid; place-items: center; min-height: 3.9em; padding: 0 1.4em; border-radius: 999px; color: #fff; text-align: center;
  font-size: 1.32em; font-weight: 650; line-height: 1.15;
  background: linear-gradient(180deg, var(--violett-oben), var(--violett-tief)); box-shadow: 0 0.8em 1.6em -0.9em rgba(91, 63, 217, 0.9);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.s-knopf-ruhig { background: var(--weiss); color: var(--tinte); box-shadow: 0 0 0 0.14em var(--linie-feld) inset; }
.s-knopf-hell { background: var(--weiss); color: var(--violett-tief); box-shadow: none; }
.s-knopf-aus { background: var(--eis-2); color: var(--tinte-2); box-shadow: none; }
.s-knopf-aus.an { background: linear-gradient(180deg, var(--violett-oben), var(--violett-tief)); color: #fff; box-shadow: 0 0.8em 1.6em -0.9em rgba(91, 63, 217, 0.9); }
.s-feld { display: grid; gap: 0.35em; }
.s-label { font-size: 1.15em; font-weight: 640; }
.s-eingabe {
  display: flex; align-items: center; min-height: 3.6em; padding: 0 1em; border-radius: 1em; background: var(--weiss);
  border: 0.15em solid var(--linie-feld); font-size: 1.2em; font-weight: 560; overflow: hidden; white-space: nowrap;
}
.s-eingabe-hoch { align-items: flex-start; min-height: 6.4em; padding-block: 0.7em; white-space: normal; }
.s-getippt { display: inline-block; }
.ablauf .s-getippt:not(.weg) { animation: tippen 0.9s steps(12, end) both; }
.ablauf .s-getippt-lang:not(.weg) { animation-duration: 1.4s; animation-timing-function: steps(26, end); }
@keyframes tippen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.s-option {
  display: flex; align-items: center; gap: 0.9em; padding: 0.9em 1.1em; border-radius: 1.3em; background: var(--weiss);
  border: 0.15em solid var(--linie-feld); font-size: 1.1em; line-height: 1.25; transition: border-color 0.3s, background 0.3s;
}
.s-option b { display: block; font-size: 1.15em; }
.s-unter { display: block; font-size: 0.95em; color: var(--tinte-2); }
.s-radio { flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; border: 0.18em solid var(--linie-feld); background: var(--weiss); transition: all 0.3s; }
.s-option.an { border-color: var(--violett); background: var(--violett-zart); }
.s-option.an .s-radio { border-color: var(--violett); box-shadow: 0 0 0 0.3em var(--weiss) inset; background: var(--violett); }

/* Mails */
.s-post { padding-top: 2.6em; background: var(--weiss); }
.s-postkopf { padding: 0.6em 1.4em 1em; font-weight: 700; font-size: 2em; font-variation-settings: 'wdth' 100; }
.s-mail { display: flex; align-items: center; gap: 0.8em; padding: 1.1em 1.4em; border-top: 1px solid var(--linie); font-size: 1.15em; }
.s-mail-text { display: grid; min-width: 0; flex: 1; line-height: 1.3; color: var(--tinte-2); }
.s-mail-text b { color: var(--tinte); }
.s-mail-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-mail-neu { background: var(--violett-zart); }
.s-mail-neu .s-mail-text span { color: var(--tinte); font-weight: 600; }
.s-punkt { flex: none; width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--violett); }
.s-zeit { flex: none; align-self: flex-start; font-size: 0.9em; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.s-brief { gap: 0.8em; padding: 3em 1.5em 1.4em; background: var(--weiss); }
.s-brief .s-titel { font-size: 1.7em; }
.s-zugang { display: grid; gap: 0.25em; padding: 0.9em 1.1em; border-radius: 1.1em; background: var(--eis); font-size: 1.15em; }
.s-zugang .s-klein { font-size: 0.85em; color: var(--violett-tief); }
.s-zugang p { display: flex; justify-content: space-between; gap: 1em; }
.s-zoomlink { display: flex; align-items: center; gap: 0.6em; font-size: 1.1em; }
.s-zoom-zeichen { flex: none; width: 1.6em; height: 1.1em; border-radius: 0.3em; background: var(--tinte-2); }

/* Jetzt-Karte, Listen */
.s-jetzt {
  display: grid; gap: 0.55em; padding: 1.2em; border-radius: 1.6em; color: var(--text-dunkel);
  background: radial-gradient(80% 120% at 100% 0%, rgba(124, 98, 255, 0.6), transparent 60%), linear-gradient(160deg, var(--tief), var(--nacht));
}
.s-jetzt b { font-size: 1.55em; line-height: 1.12; font-variation-settings: 'wdth' 100; }
.s-jetzt-chip { justify-self: start; padding: 0.25em 0.8em; border-radius: 999px; font-size: 1.05em; font-weight: 650; background: rgba(255, 255, 255, 0.12); }
.s-jetzt-laeuft { background: var(--weiss); color: var(--violett-tief); }
.s-jetzt-laeuft::before { content: ''; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.45em; border-radius: 50%; background: var(--violett); vertical-align: 0.05em; animation: puls 1.6s ease-in-out infinite; }
@keyframes puls { 50% { opacity: 0.25; } }
.s-stand { font-size: 1.15em; color: var(--text-dunkel-2); font-variant-numeric: tabular-nums; }
.s-stand b { font-size: 1.25em; color: var(--text-dunkel); }
.s-jetzt .s-knopf { min-height: 3.4em; margin-top: 0.2em; }
.s-zeile { display: flex; align-items: center; gap: 0.8em; padding: 0.55em 0; border-bottom: 1px solid var(--linie); font-size: 1.15em; }
.s-zeile > span:first-child { flex: none; display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--eis-2); font-weight: 700; font-size: 0.9em; }
.s-zeile > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-zeile em { flex: none; font-style: normal; font-size: 0.85em; color: var(--tinte-2); }
.s-erledigt { color: var(--tinte-2); }
.s-aktuell { font-weight: 650; }
.s-aktuell > span:first-child { background: var(--violett); color: #fff; }
.s-aktuell em { color: var(--violett-tief); font-weight: 650; }

/* Abstimmen */
.s-antwort {
  display: flex; align-items: center; gap: 0.8em; min-height: 4.4em; padding: 0 1.2em; border-radius: 1.3em; font-size: 1.35em; font-weight: 650;
  background: var(--weiss); border: 0.15em solid; transition: background 0.3s, color 0.3s;
}
.s-antwort i { flex: none; display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; font-style: normal; font-size: 0.9em; color: #fff; }
.s-ja { border-color: var(--ja-rand); color: var(--ja); } .s-ja i { background: var(--ja); } .s-ja i::before { content: '✓'; }
.s-nein { border-color: var(--nein-rand); color: var(--nein); } .s-nein i { background: var(--nein); } .s-nein i::before { content: '✕'; }
.s-enth { border-color: var(--enth-rand); color: var(--enth); } .s-enth i { background: var(--enth); } .s-enth i::before { content: '–'; }
.s-ja.an { background: var(--ja); border-color: var(--ja); color: #fff; } .s-ja.an i { background: #fff; color: var(--ja); }
.s-kugel-gross { width: 6.4em; height: 6.4em; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.38) inset, 0 0 3em rgba(124, 98, 255, 0.55); }
.s-kugel-gross svg, .s-kugel-klein svg { width: 55%; height: 55%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.s-kugel-klein { width: 2.2em; height: 2.2em; }
.ablauf .s-bild:not(.weg) .s-kugel-gross { animation: kugel 0.7s var(--kurve) both 0.1s; }
@keyframes kugel { from { transform: scale(0.4) translateY(-1.5em); opacity: 0; } to { transform: none; opacity: 1; } }

/* Wahl */
.s-stand-hell { align-self: flex-start; display: inline-flex; gap: 0.35em; padding: 0.3em 0.9em; border-radius: 999px; background: var(--violett-zart); color: var(--violett-tief); font-weight: 650; font-size: 1.15em; font-variant-numeric: tabular-nums; }
.s-person {
  display: flex; align-items: center; gap: 0.8em; padding: 0.7em 0.9em; border-radius: 1.2em; background: var(--weiss);
  border: 0.15em solid var(--linie-feld); font-size: 1.1em; line-height: 1.2; transition: border-color 0.3s, background 0.3s;
}
.s-person b { font-size: 1.1em; }
.s-box { flex: none; display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 0.45em; border: 0.18em solid var(--linie-feld); background: var(--weiss); transition: all 0.3s; }
.s-kurz { flex: none; display: inline-grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--eis-2); font-weight: 700; font-size: 0.95em; }
.s-person.an { border-color: var(--violett); background: var(--violett-zart); }
.s-person.an .s-box, .s-haekchen.an .s-box { background: var(--violett); border-color: var(--violett); }
.s-person.an .s-box::before, .s-haekchen.an .s-box::before { content: '✓'; color: #fff; font-size: 1.1em; font-weight: 700; }

/* Wortmeldung, Frage */
.s-spricht { display: grid; gap: 0.2em; padding: 1em 1.1em; border-radius: 1.2em; background: var(--weiss); border: 1px solid var(--linie); }
.s-spricht b { font-size: 1.45em; }
.s-bestaetigt { display: flex; align-items: center; gap: 0.7em; padding: 0.8em 1em; border-radius: 1.2em; background: var(--violett-zart); color: var(--violett-tief); font-weight: 650; font-size: 1.15em; }
.s-haekchen { display: flex; align-items: center; gap: 0.7em; font-size: 1.15em; }

/* ---------- Sendung (Ausschnitt der Übertragung) ---------- */
.sendung {
  font-size: 10px; position: relative; width: 28em; max-width: 100%; min-height: 15.75em; flex: none; overflow: hidden; border-radius: 1.4em;
  display: flex; align-items: flex-end; padding: 3.4em 1.4em 1.4em;
  background: radial-gradient(60% 70% at 70% 30%, #3a26a6, transparent 70%), linear-gradient(170deg, #241a55, #0d0922);
  box-shadow: 0 0 0 0.5em var(--geraet), 0 2em 3em -2em rgba(17, 12, 43, 0.6);
}
@media (min-width: 1100px) { .sendung { font-size: 10.6px; } }
.sendung-marke { position: absolute; top: 1em; left: 1.2em; font-size: 1.1em; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dunkel-2); }
.sendung-marke::before { content: ''; display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.5em; border-radius: 50%; background: #e0434f; vertical-align: 0.05em; }
.platte { display: grid; gap: 0.35em; width: 100%; padding: 0.9em 1.1em; border-radius: 0.9em; background: var(--weiss); color: var(--tinte); border: 0.25em solid #0c0820; }
.platte b { font-size: 1.45em; line-height: 1.1; font-variation-settings: 'wdth' 100; }
.platte-reiter { justify-self: start; padding: 0.15em 0.7em; border-radius: 0.5em; background: var(--violett); color: #fff; font-size: 1.05em; font-weight: 650; }
.platte-urteil { text-transform: uppercase; letter-spacing: 0.06em; }
.platte-zahl { font-size: 1.15em; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.balken { display: grid; grid-template-columns: 6.6em 1fr 2.4em; align-items: center; gap: 0.6em; font-size: 1.05em; font-weight: 620; font-variant-numeric: tabular-nums; }
.balken-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balken-spur { height: 0.9em; border-radius: 999px; background: var(--eis-2); overflow: hidden; }
.balken-wert { display: block; height: 100%; border-radius: 999px; transform-origin: left; }
.balken-zahl { text-align: right; }
.b-ja, .b-ja2 { background: var(--ja); } .b-nein, .b-nein2 { background: var(--nein); } .b-enth, .b-enth2 { background: var(--enth); }
.b-ja { width: 77%; } .b-nein { width: 12%; } .b-enth { width: 11%; }
.b-ja2 { width: 78%; } .b-nein2 { width: 12%; } .b-enth2 { width: 10%; }
.ablauf [data-ab]:not(.weg) .balken-wert { animation: wachsen 1.1s var(--kurve) both 0.25s; }
@keyframes wachsen { from { transform: scaleX(0); } }
.geraete-mit-sendung { align-items: center; }

/* ---------- Zoom-Karte (Wortmeldung) ---------- */
.zoomkarte {
  font-size: 10px; width: 22em; flex: none; display: grid; gap: 1em; padding: 1.3em; border-radius: 1.6em; background: var(--zoom-grau); color: var(--zoom-text);
  box-shadow: 0 2em 3em -2em rgba(17, 12, 43, 0.6);
}
@media (min-width: 1100px) { .zoomkarte { font-size: 10.6px; } }
.zoomkarte-kopf { font-size: 1.1em; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: #a9a9b6; }
.zoomkarte-ruhe { display: flex; align-items: center; gap: 0.8em; font-size: 1.35em; font-weight: 620; }
.zoomkarte-an { color: #8ee0ae; }
.zoomkarte-frage { display: grid; gap: 0.9em; font-size: 1.25em; line-height: 1.35; }
.zk-knopf { justify-self: start; padding: 0.6em 1.1em; border-radius: 0.7em; background: #2d8cff; color: #fff; font-weight: 650; }
.mik { position: relative; flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; background: #3a3a44; }
.mik::before { content: ''; position: absolute; left: 50%; top: 22%; width: 0.7em; height: 1.1em; margin-left: -0.35em; border-radius: 0.4em; background: currentColor; }
.mik::after { content: ''; position: absolute; left: 50%; top: 58%; width: 0.15em; height: 0.5em; margin-left: -0.075em; background: currentColor; }
.mik-aus { color: #ff6b6b; }
.mik-aus { background: linear-gradient(45deg, transparent 46%, #ff6b6b 46% 54%, transparent 54%), #3a3a44; }
.zoomkarte-an .mik { background: #1f5b3b; }
.geraete-mit-zoomkarte { align-items: center; }

/* ---------- Laptop ---------- */
.laptop { font-size: 1cqw; width: 64em; flex: none; }
.laptop-schirm { position: relative; aspect-ratio: 16 / 10; padding: 1.2em; border-radius: 1.8em 1.8em 0.4em 0.4em; background: var(--geraet); overflow: hidden; }
.laptop-fuss { height: 2.2em; margin-inline: -4%; border-radius: 0 0 1.6em 1.6em; background: linear-gradient(180deg, #3a3560, #1d1a36); clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%); }
.geraete-zoom { flex-wrap: nowrap; gap: 3cqw; padding-inline: 2.5cqw; }
.geraete-zoom .handy-klein { font-size: 1.24cqw; }
.laptop-geteilt { width: 92em; font-size: 1cqw; }
.laptop-geteilt .laptop-schirm { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0.8em; }

.zoom { display: grid; grid-template-rows: auto 1fr auto; height: 100%; border-radius: 0.6em; overflow: hidden; background: var(--zoom-grau); color: var(--zoom-text); min-width: 0; }
.zoom-leiste { display: flex; justify-content: space-between; gap: 1em; padding: 0.7em 1.1em; font-size: 1.9em; color: #a9a9b6; white-space: nowrap; overflow: hidden; }
.zoom-leiste span:first-child { font-weight: 700; color: var(--zoom-text); }
.zoom-bild { position: relative; overflow: hidden; background: #111; }
.saal { position: absolute; inset: 0; width: 100%; height: 100%; }
.zoom-bauchbinde { position: absolute; left: 4%; bottom: 7%; display: flex; flex-wrap: wrap; gap: 0 0.6em; align-items: baseline; padding: 0.5em 1em; border-radius: 0.5em; background: var(--weiss); color: var(--tinte); border: 0.25em solid #0c0820; font-size: 1.9em; line-height: 1.2; max-width: 80%; }
.zoom-bauchbinde span { color: var(--violett-tief); font-weight: 650; }
.zoom-sprache { position: absolute; top: 5%; right: 3%; display: inline-flex; align-items: center; gap: 0.4em; padding: 0.25em 0.7em; border-radius: 999px; background: rgba(0, 0, 0, 0.6); font-size: 1.8em; font-weight: 650; }
.zoom-menue { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); display: grid; min-width: 46%; padding: 0.4em; border-radius: 0.8em; background: var(--zoom-grau-2); box-shadow: 0 1em 2em rgba(0, 0, 0, 0.5); font-size: 1.85em; }
.zoom-menue span { display: flex; align-items: center; gap: 0.5em; padding: 0.3em 0.8em; border-radius: 0.5em; }
.zoom-menue span::before { content: ''; width: 0.9em; text-align: center; }
.zoom-wahl.an { background: #2d8cff; color: #fff; }
.zoom-wahl.an::before { content: '✓'; }
.zoom-knoepfe { display: flex; justify-content: center; gap: 2em; padding: 0.7em 1em; background: #18181d; }
.zoom-k { display: inline-flex; flex-direction: column; align-items: center; gap: 0.3em; padding: 0.3em 0.6em; border-radius: 0.6em; font-size: 1.7em; color: #c9c9d3; }
.zoom-k-dolm { color: #fff; }
.zoom-k-weg { justify-content: center; color: #ff6b6b; font-weight: 650; }
.zoom-globus { display: inline-block; width: 1.4em; height: 1.4em; border-radius: 50%; border: 0.14em solid currentColor; background: linear-gradient(90deg, transparent 46%, currentColor 46% 54%, transparent 54%), linear-gradient(0deg, transparent 46%, currentColor 46% 54%, transparent 54%); }
.zoom-sprache .zoom-globus { width: 1em; height: 1em; }
.zoom-ton { display: inline-block; width: 1.3em; height: 1.3em; border-radius: 0.2em 50% 50% 0.2em; background: currentColor; }

.fenster { display: grid; grid-template-rows: auto 1fr; height: 100%; border-radius: 0.6em; overflow: hidden; background: var(--weiss); min-width: 0; }
.fenster-leiste { display: flex; align-items: center; gap: 1em; padding: 0.6em 1em; background: #e6e3f0; font-size: 1.7em; color: var(--tinte-2); white-space: nowrap; overflow: hidden; }
.fenster-punkte { flex: none; width: 0.6em; height: 0.6em; border-radius: 50%; background: #e0605a; box-shadow: 1em 0 0 #e8b04a, 2em 0 0 #5bbf5a; margin-right: 2em; }
.fenster-adresse { flex: 1; padding: 0.15em 0.8em; border-radius: 999px; background: var(--weiss); overflow: hidden; text-overflow: ellipsis; }
.schirm-fenster { font-size: 0.95em; border-radius: 0; }
.schirm-fenster .s-kopf { padding-top: 1.3em; }

/* ---------- Pult der Leitung ---------- */
.laptop-gross { font-size: 1.02cqw; }
.ablauf-dunkel .geraete { flex-wrap: nowrap; gap: 3cqw; }
@media (max-width: 760px) { .ablauf-dunkel .geraete { flex-wrap: wrap; } }
@container (max-width: 640px) {
  .laptop-gross { font-size: 1.5cqw; }
  .sendung-klein { width: 80cqw !important; font-size: 2.6cqw !important; }
}
.fenster-voll { height: 100%; }
.pult { display: grid; grid-template-columns: 28% 1fr; min-height: 0; background: var(--eis); color: var(--tinte); }
.pult-seite { display: flex; flex-direction: column; gap: 0.5em; padding: 1.4em 1em; background: var(--weiss); border-right: 1px solid var(--linie); min-width: 0; }
.pult-seite .s-marke { margin-bottom: 0.8em; }
.pult-trakt { padding: 0.45em 0.7em; border-radius: 0.6em; font-size: 1.7em; color: var(--tinte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pult-trakt-an { background: var(--violett-zart); color: var(--violett-tief); font-weight: 650; }
.pult-haupt { display: flex; flex-direction: column; gap: 0.75em; padding: 1.5em 1.8em; min-width: 0; }
.pult-klein { font-size: 1.6em; color: var(--tinte-2); font-weight: 600; }
.pult-frage { font-size: 2.4em; line-height: 1.12; font-variation-settings: 'wdth' 100; }
.pult-zeile { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4em 1em; }
.pult-status { padding: 0.2em 0.8em; border-radius: 999px; background: var(--eis-2); font-size: 1.6em; font-weight: 650; }
.pult-status-an { background: var(--violett); color: #fff; }
.pult-zahl { font-size: 3.4em; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.pult-zahl-text { font-size: 1.6em; color: var(--tinte-2); }
.pult-knopf { align-self: flex-start; padding: 0.6em 1.3em; border-radius: 999px; color: #fff; font-size: 1.8em; font-weight: 650; background: linear-gradient(180deg, var(--violett-oben), var(--violett-tief)); }
.pult-knopf-ruhig { background: var(--weiss); color: var(--tinte); box-shadow: 0 0 0 0.12em var(--linie-feld) inset; }
.pult-resultat { display: grid; gap: 0.7em; }
.pult-resultat .balken { font-size: 1.6em; }
.pult-vorschlag { font-size: 1.6em; font-weight: 650; color: var(--violett-tief); }
.sendung-klein { width: 30cqw; font-size: 1.1cqw; min-height: 0; padding: 3em 1em 1em; }
.sendung-klein .balken { grid-template-columns: 5.6em 1fr 2.4em; }

/* ---------- Leitung ---------- */
.leitung-innen { display: grid; gap: 36px; padding-block: clamp(56px, 7vw, 104px); }
.leitung-kopf { display: grid; gap: 16px; max-width: 760px; }
.leitung-handbuch { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 22px; border-radius: 999px; background: var(--weiss); color: var(--tinte); font-weight: 650; text-decoration: none; }
.leitung-handbuch:hover { background: var(--violett-zart); }
.leitung-handbuch svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.phasen { display: grid; gap: 14px; }
@media (min-width: 900px) { .phasen { grid-template-columns: repeat(3, 1fr); } }
.phase { display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: 22px; background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px var(--linie-dunkel) inset; min-width: 0; }
.phase h3 { font-weight: 660; font-variation-settings: 'wdth' 100; font-size: 24px; }
.phase ul { display: grid; gap: 10px; padding: 0; list-style: none; color: var(--text-dunkel-2); }
.phase li { position: relative; padding-left: 22px; text-wrap: pretty; }
.phase li::before { content: ''; position: absolute; left: 2px; top: 0.6em; width: 9px; height: 9px; border-radius: 50%; background: var(--violett-hell); }

/* ---------- Sicherheit, Fragen, Fuss ---------- */
.sicherheit-innen, .fragen-innen { display: grid; gap: 32px; padding-block: clamp(56px, 7vw, 96px) 0; }
.fragen-innen { padding-bottom: clamp(56px, 7vw, 96px); }
.punkte-sicher { list-style: none; padding: 0; display: grid; gap: 14px; }
@media (min-width: 820px) { .punkte-sicher { grid-template-columns: 1fr 1fr; } }
.punkte-sicher li { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 22px; background: var(--weiss); border: 1px solid rgba(22, 19, 45, 0.06); min-width: 0; }
.punkte-sicher h3 { font-size: 20px; font-weight: 660; font-variation-settings: 'wdth' 100; margin-bottom: 4px; }
.punkte-sicher p { color: var(--tinte-2); text-wrap: pretty; }
.zeichen { flex: none; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--violett-zart); }
.zeichen svg { width: 24px; height: 24px; fill: none; stroke: var(--violett-tief); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.datenort { display: grid; gap: 8px; padding: 22px 24px; border-radius: 22px; background: var(--eis-2); max-width: 760px; }
.datenort h3 { font-size: 20px; font-weight: 660; }
.datenort p { color: var(--tinte-2); text-wrap: pretty; }
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { border-radius: 18px; background: var(--weiss); border: 1px solid rgba(22, 19, 45, 0.06); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 20px; cursor: pointer;
  font-weight: 640; font-size: 19px; list-style: none; border-radius: 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 2.5px solid var(--violett); border-bottom: 2.5px solid var(--violett); transform: rotate(45deg) translate(-3px, -3px); transition: transform 0.3s var(--kurve); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details p { padding: 0 20px 18px; color: var(--tinte-2); max-width: 40em; text-wrap: pretty; }
.fuss-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 24px 32px; font-size: 15px; color: var(--text-dunkel-2); }
.fuss-zurueck { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; color: var(--text-dunkel); text-underline-offset: 4px; }
.fuss-ef { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-dunkel); text-decoration-color: var(--violett-hell); text-underline-offset: 4px; }
.fuss-ef:hover { text-decoration-thickness: 2px; }

/* ---------- Schmal ---------- */
@media (max-width: 520px) {
  .ablauf { padding: 12px; border-radius: 22px; }
  .geraete { padding: 18px 4px; }
  .bildmarke { top: 8px; right: 8px; }
  .geraete-zoom .handy-klein { font-size: 1.26cqw; }
}

/* ---------- ohne Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.s-antwort-klein { min-height: 3.2em; font-size: 1.15em; }

/* ---------- Schalter Ablauf / Echte Ansicht, Bildschirmfotos ---------- */
.ansicht { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--eis); }
.ansicht button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--tinte-2); font-size: 15px; font-weight: 600; }
.ansicht button[aria-pressed="true"] { background: var(--tinte); color: #fff; }
.ablauf-dunkel .ansicht { background: rgba(255, 255, 255, 0.08); }
.ablauf-dunkel .ansicht button { color: var(--text-dunkel-2); }
.ablauf-dunkel .ansicht button[aria-pressed="true"] { background: var(--weiss); color: var(--tinte); }
.echt {
  display: flex; gap: 16px; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px; border-radius: 20px;
  background: radial-gradient(70% 70% at 50% 30%, rgba(124, 98, 255, 0.14), transparent 70%), var(--eis); flex-wrap: wrap; justify-content: center;
}
.echt[hidden] { display: none; }
.echt-bild { margin: 0; display: grid; gap: 8px; flex: 0 0 auto; width: min(230px, 100%); scroll-snap-align: start; }
.echt-breit { width: min(520px, 100%); }
.echt-bild img { width: 100%; height: auto; border-radius: 22px; box-shadow: 0 0 0 1px var(--linie), 0 20px 40px -28px rgba(17, 12, 43, 0.5); background: var(--weiss); }
.echt-breit img { border-radius: 14px; }
.echt-bild figcaption { font-size: 15px; font-weight: 600; color: var(--tinte-2); text-align: center; }
.echt-hinweis { flex-basis: 100%; margin: 0; text-align: center; font-size: 14px; color: var(--tinte-2); }
.ablauf-dunkel .echt { background: radial-gradient(70% 70% at 50% 30%, rgba(124, 98, 255, 0.25), transparent 70%), rgba(0, 0, 0, 0.18); }
.ablauf-dunkel .echt-bild figcaption, .ablauf-dunkel .echt-hinweis { color: var(--text-dunkel-2); }
.geraete[hidden], .punkte[hidden], .spielen[hidden] { display: none !important; }