/* =====================================================================
   Position 7 · Sprechender Helm Datenströme
   Raum Wandel-Struktur

   Tokens und Bausteine (Leisten, Bühne, Ebenen, Pillen, DGS-Overlay)
   sind aus der bestehenden Station des Raums Wandel-Struktur übernommen.
   Neu für Station 7 ist nur die Akzentfarbe --petrol für die Datenströme.
   Keine externen Fonts, keine Schatten, keine Verläufe.
   ===================================================================== */

:root{
  --weiss:#FFFFFF;
  --papier:#FDFBF7;
  --rot:#A0122F;
  --rot-hell:#B5143A;
  --rot-tief:#7C0D24;
  --gold:#C9A227;
  --gold-text:#A87F16;
  --gold-fuell:#D7B24A;
  --text:#4F4F4F;
  --text-stark:#2E2E2E;
  --linie:#EAE4D6;
  --spur:#F4F0E8;

  /* Stationsakzent Position 7: Datenströme */
  --petrol:#2B6470;
  --petrol-hell:#D9E6E8;

  /* nur lokal installierte Schriften, nichts wird nachgeladen */
  --schrift:"Source Sans 3","Source Sans Pro","Segoe UI",Frutiger,"Myriad Pro",system-ui,sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;overflow:hidden;
  background:var(--weiss);color:var(--text);
  font-family:var(--schrift);font-weight:400;
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
}
button,input{font:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}

/* ================= Rahmen ================= */
.station{position:fixed;inset:0;background:var(--weiss)}
.leiste{
  position:absolute;left:0;right:0;display:flex;align-items:flex-start;
  gap:1.2rem;justify-content:space-between;flex-wrap:wrap;
  padding:clamp(1rem,2.6vh,1.9rem) clamp(1.2rem,3.4vw,3.4rem);
  pointer-events:none;z-index:2;
}
.leiste.oben{top:0}
.leiste.unten{bottom:0;align-items:center}
.leiste > *{pointer-events:auto}
.marke{
  font-size:clamp(.68rem,.86vw,.84rem);font-weight:700;line-height:1.42;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold-text);
}
.marke.rechts{text-align:right}
.dienste{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}

.buehne{position:absolute;inset:0}
.ebene{
  position:absolute;
  top:clamp(4.4rem,10vh,7rem);bottom:clamp(6.2rem,12vh,8rem);
  left:clamp(1.2rem,4vw,4rem);right:clamp(1.2rem,4vw,4rem);
  display:none;flex-direction:column;align-items:center;min-height:0;
}
.ebene[data-aktiv]{display:flex;animation:auf .4s ease both}
@keyframes auf{from{opacity:0}to{opacity:1}}

/* ================= Typografie ================= */
.eyebrow{
  flex:0 0 auto;display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;justify-content:center;
  font-size:clamp(.68rem,.86vw,.84rem);font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold-text);
  margin-bottom:clamp(.5rem,1.4vh,1rem);
}
h1,h2{
  flex:0 0 auto;margin:0;color:var(--rot);font-weight:700;
  letter-spacing:-.012em;line-height:1.16;text-align:center;text-wrap:balance;
}
h1{font-size:clamp(1.75rem,3.4vw,3.2rem);max-width:26ch}
h2{font-size:clamp(1.4rem,2.5vw,2.3rem);max-width:28ch}
.lead{
  flex:0 0 auto;margin:clamp(.5rem,1.5vh,1.1rem) 0 0;max-width:40rem;
  text-align:center;color:var(--text);
  font-size:clamp(1.05rem,1.4vw,1.4rem);line-height:1.45;
}
.regel{
  flex:0 0 auto;width:min(38rem,100%);height:2px;background:var(--gold);
  margin:clamp(.6rem,1.8vh,1.3rem) 0;
}
.hinweis{
  flex:0 0 auto;margin:clamp(.4rem,1.1vh,.8rem) 0 0;max-width:52rem;text-align:center;
  font-size:clamp(.84rem,1vw,1rem);line-height:1.45;color:var(--text);
}

/* Kennzeichnungen: Entwurf, Prototyp, Testaudio */
.kennung{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1.5px solid var(--gold);border-radius:999px;background:var(--papier);
  padding:.32rem .9rem;
  font-size:clamp(.64rem,.8vw,.78rem);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold-text);line-height:1.3;
}
.kennung.test{border-color:var(--rot);color:var(--rot)}

/* ================= Pillen ================= */
.pille{
  appearance:none;border:0;cursor:pointer;border-radius:999px;position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.8rem;
  padding:clamp(.85rem,1.7vh,1.1rem) clamp(1.5rem,2.6vw,2.1rem);
  min-height:58px;font-weight:700;font-size:clamp(.95rem,1.2vw,1.14rem);
  background:var(--rot);color:#fff;
  transition:background .14s ease,transform .12s ease,color .14s ease,border-color .14s ease;
}
.pille:hover{background:var(--rot-hell)}
a.pille{text-decoration:none}
.pille:active{transform:translateY(1px)}
.pille.rand{background:var(--weiss);color:var(--text-stark);border:2px solid var(--gold)}
.pille.rand:hover{background:var(--papier);border-color:var(--rot);color:var(--rot)}
.pille.leise{
  background:var(--weiss);color:var(--text);border:1.5px solid var(--linie);
  font-weight:600;min-height:48px;padding:.7rem 1.3rem;font-size:clamp(.82rem,1vw,.95rem);
}
.pille.leise:hover{background:var(--papier);color:var(--rot);border-color:var(--rot)}
.pille[disabled],.pille[disabled]:hover{opacity:.4;cursor:default;transform:none}
.pille.rand[disabled]:hover{border-color:var(--gold);color:var(--text-stark);background:var(--weiss)}
.pille.leise[disabled]:hover{border-color:var(--linie);color:var(--text);background:var(--weiss)}
.hand,.ikon{flex:0 0 auto;width:1.55em;height:1.55em;display:block}

/* Großer Auslöseknopf mit dezentem Signal (Ring statt Schatten) */
.pille.gross{
  padding:clamp(1.1rem,2.6vh,1.7rem) clamp(2rem,3.4vw,3rem);
  font-size:clamp(1.12rem,1.5vw,1.5rem);min-height:84px;min-width:min(22rem,100%);
}
.pille.gross::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;
  border:2px solid var(--rot);opacity:0;pointer-events:none;
  animation:signalring 3.6s ease-out infinite;
}
@keyframes signalring{
  0%,40%{opacity:0;transform:scale(1)}
  48%{opacity:.45;transform:scale(1)}
  100%{opacity:0;transform:scale(1.14,1.35)}
}
.signal .w{animation:welle 3.6s ease-in-out infinite;opacity:.35}
.signal .w2{animation-delay:.25s}
.signal .w3{animation-delay:.5s}
@keyframes welle{0%,35%,100%{opacity:.35}50%{opacity:1}}

.knopfreihe{
  flex:0 0 auto;display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(.7rem,2vh,1.5rem);
}

/* ================= Datenkappe (SVG) ================= */
.kappe{
  flex:1 1 auto;min-height:0;width:100%;
  display:flex;align-items:center;justify-content:center;
  margin:clamp(.4rem,1.2vh,1rem) 0;
}
.kappe svg{height:100%;width:auto;max-width:min(100%,44rem);max-height:34rem;display:block;overflow:visible}
.kappe.klein{min-height:6rem}
.kappe.klein svg{max-height:18rem}

.k-schiene{stroke:var(--gold);stroke-width:4;stroke-linecap:round;fill:none}
.k-halter{fill:var(--weiss);stroke:var(--gold);stroke-width:2.5}
.k-kabel{fill:none;stroke:var(--petrol);stroke-width:3.2;stroke-linecap:round}
.k-strom{
  fill:none;stroke:var(--petrol-hell);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:3 15;animation:strom 5.5s linear infinite;
}
.k-strom.gegen{animation-duration:7s}
@keyframes strom{to{stroke-dashoffset:-72}}
.k-schale{fill:var(--weiss);stroke:var(--text-stark);stroke-width:3;stroke-linejoin:round}
.k-naht{fill:none;stroke:var(--linie);stroke-width:2;stroke-linecap:round}
.k-band{fill:var(--papier);stroke:var(--text-stark);stroke-width:3;stroke-linejoin:round}
.k-gitter{fill:var(--text)}
.k-knoten{fill:var(--weiss);stroke:var(--petrol);stroke-width:3}
.k-kern{fill:var(--petrol)}
.k-schall{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;opacity:.28}

/* während der Wiedergabe: Schall sichtbar, Ströme etwas lebendiger */
.station[data-spielt] .k-schall{animation:schall 2.4s ease-in-out infinite}
.station[data-spielt] .k-schall.s2{animation-delay:.3s}
.station[data-spielt] .k-schall.s3{animation-delay:.6s}
.station[data-spielt] .k-strom{animation-duration:3s;stroke:#9CC0C6}
@keyframes schall{0%,100%{opacity:.25}50%{opacity:.95}}
/* auf der Audioseite ruht der Strom, solange nichts läuft */
#e-audio .k-strom{animation-play-state:paused}
.station[data-spielt] #e-audio .k-strom{animation-play-state:running}

/* ================= Audioseite ================= */
#e-audio{justify-content:center}
.statement-kopf{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.55rem;
  margin-bottom:clamp(.5rem,1.4vh,1rem);
}
.statement-titel{
  margin:0;color:var(--text-stark);font-weight:700;text-align:center;
  font-size:clamp(1.1rem,1.6vw,1.55rem);line-height:1.25;
}
.kennungen{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}

.spieler{flex:0 0 auto;width:min(52rem,100%);display:flex;flex-direction:column;gap:clamp(.6rem,1.6vh,1.1rem)}

.platzhalter{
  border:2px solid var(--gold);border-radius:24px;background:var(--papier);
  padding:clamp(.8rem,2vh,1.3rem) 1.5rem;text-align:center;
}
.platzhalter strong{
  display:block;color:var(--rot);font-size:clamp(1.05rem,1.45vw,1.4rem);line-height:1.3;
}
.platzhalter span{display:block;margin-top:.3rem;font-size:clamp(.84rem,1vw,.98rem);line-height:1.4}
.platzhalter code{font-family:inherit;font-weight:700;color:var(--text-stark)}

/* Fortschritt: Spur + Füllung + transparenter Regler darüber */
.fortschritt{display:flex;align-items:center;gap:1rem}
.fortschritt .spurwrap{flex:1 1 auto}
.spurwrap{position:relative;height:56px;min-width:0;display:flex;align-items:center}
.spurwrap .spur{position:absolute;left:0;right:0;height:10px;border-radius:99px;background:var(--spur);overflow:hidden}
.spurwrap .fuell{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--petrol)}
.spurwrap .knauf{
  position:absolute;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;left:0;
  border-radius:50%;background:var(--rot);border:4px solid var(--weiss);pointer-events:none;
}
.regler{
  position:relative;z-index:1;appearance:none;-webkit-appearance:none;
  width:100%;height:56px;margin:0;background:transparent;cursor:pointer;
}
.regler::-webkit-slider-runnable-track{height:56px;background:transparent}
.regler::-moz-range-track{height:56px;background:transparent}
.regler::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:56px;background:transparent;border:0}
.regler::-moz-range-thumb{width:56px;height:56px;background:transparent;border:0}
.regler:focus-visible{outline:none}
.spurwrap:focus-within .knauf{outline:3px solid var(--rot);outline-offset:3px}
.regler[disabled]{cursor:default}
.spieler[data-gesperrt] .spurwrap,.spieler[data-gesperrt] .zeit,.spieler[data-gesperrt] .laut{opacity:.4}

.zeit{
  flex:0 0 auto;min-width:3.2em;
  font-size:clamp(.92rem,1.15vw,1.1rem);font-weight:600;color:var(--text-stark);
  font-variant-numeric:tabular-nums;
}

.steuer{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;align-items:center}
.steuer .pille{min-height:72px;min-width:10.5rem;font-size:clamp(1rem,1.3vw,1.24rem)}

.laut{display:flex;align-items:center;gap:.8rem;justify-content:center;flex-wrap:wrap}
.laut .titel{
  font-size:clamp(.68rem,.86vw,.84rem);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-text);
}
.laut .pille{min-width:58px;padding:.6rem;font-size:1.4rem;line-height:1}
.laut .spurwrap{flex:1 1 12rem;max-width:22rem}
.laut .wert{min-width:3.2rem;font-weight:600;color:var(--text-stark);font-variant-numeric:tabular-nums}

.status{
  margin:0;text-align:center;min-height:1.4em;
  font-size:clamp(.92rem,1.15vw,1.08rem);font-weight:600;color:var(--petrol);
}

/* ================= Overlays (DGS, Sprechtext) ================= */
.overlay{position:fixed;inset:0;z-index:40;display:none;padding:clamp(1rem,4vw,3rem);background:rgba(255,255,255,.97)}
.overlay[data-aktiv]{display:flex;align-items:center;justify-content:center}
.dgsbox{max-width:52rem;width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:1.1rem;min-height:0}
.dgsbox h2{max-width:30ch}
.dgsrahmen{
  width:100%;aspect-ratio:16/9;background:var(--papier);
  border:2px solid var(--gold);border-radius:24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;text-align:center;padding:1.6rem;min-height:0;
}
.dgsrahmen .hand{width:clamp(48px,7vw,88px);height:auto;color:var(--rot)}
.dgsrahmen .platz{
  font-size:clamp(.68rem,.86vw,.82rem);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-text);
}
.dgsrahmen p{margin:0;max-width:48ch;font-size:clamp(.9rem,1.15vw,1.06rem);line-height:1.45}

.textrahmen{
  flex:1 1 auto;min-height:0;width:100%;overflow-y:auto;
  background:var(--papier);border:2px solid var(--gold);border-radius:24px;
  padding:clamp(1rem,2.6vh,1.8rem) clamp(1.1rem,3vw,2.4rem);
}
.textrahmen p{
  margin:0 0 .9em;max-width:62ch;font-size:clamp(.98rem,1.2vw,1.14rem);
  line-height:1.55;color:var(--text-stark);
}
.textrahmen p:last-child{margin-bottom:0}

@media (max-width:1280px){
  .leiste.unten .marke.rechts{max-width:17em}
}
@media (max-width:900px){
  .marke.rechts{display:none}
  .steuer .pille{min-width:8.5rem}
}
@media (max-height:700px){
  .kappe.klein{display:none}
}
@media (max-height:600px){
  .lead{display:none}
}
@media (max-width:600px){
  .kappe.klein{display:none}
  .steuer{gap:.5rem}
  .steuer .pille{min-width:0;flex:1 1 6.5rem;padding:.8rem .9rem;gap:.45rem;min-height:64px}
  .steuer .ikon{display:none}
  .laut{flex-wrap:nowrap;gap:.5rem}
  .laut .titel{display:none}
  .laut .spurwrap{flex:1 1 4rem}
  .laut .wert{display:none}
  .leiste.unten .pille{min-height:48px;padding:.6rem 1rem;font-size:.9rem}
  .station[data-seite="audio"] .ebene{bottom:11rem}
  .spieler{gap:.5rem}
  .kennung{letter-spacing:.06em}
  .leiste.unten .marke.rechts{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s!important;animation-iteration-count:1!important;
    transition-duration:.001s!important;
  }
  .pille.gross::after{display:none}
  .signal .w{opacity:1}
  .k-schall{opacity:.6}
}