/* Navy Dark: Dark-Konzept fuer die Startseite. Liegt NACH styles.css und ueberschreibt nur Farben.
   Prinzip: --navy ist im Original zu 82 % Tinte (Text, Rahmen, Linien) und nur 29-mal Flaeche.
   Deshalb wird --navy zur hellen Tinte, und die wenigen Flaechen bekommen dunklen Text. */
:root{
  --navy:#eef1f3; --navy-2:#2c5c80;
  --white:#24506f; --card:#24506f; --text:#eef1f3; --meta:#c9d5de;
  --rule:rgba(255,255,255,.14); --rule-2:rgba(255,255,255,.28);
  --line-bg:#1c3d5a;
  --ground:#1c3d5a; --deep:#16324b; --surf:#24506f; --surf2:#2c5c80; --onsolid:#1c3d5a;
}
html,body{background:#1c3d5a;color:#eef1f3}

/* Flaechen, die im Original weiss sind */
.overlay,.cap-cap,.mbox .mcap,.film .cap,.end .pill,.special,.card .special,.contact,
.pcard,.vbead,.vtag,.pack,dialog.sheet,dialog.panel,.tab,.fbtn,.pclose,.ppic,
.person .pic,.people .person .mk,.stop ul li::before,.pack ul li::before,
.overlay .big::before,.pbeitrag::before,.st{background:#24506f}
.playbtn,.vbead:hover .play,.vbead:focus-visible .play{background:#2c5c80}

/* Logotraeger bleiben hell, sonst verschwinden die Sponsorenlogos */
/* .sign ist doppelt belegt: Trassen-Karte (Text) und Sponsorenschild (Logo).
   Nur das Schild muss hell bleiben, die Karte wird dunkel. */
.wagon,.sp-mark,.bc-ziel .av{background:#fff}
#bereiche .sign{background:#24506f;border-color:var(--rule)}

/* Dort, wo weisser Text auf einer jetzt hellen Flaeche saesse */
.skip,.btn:hover,.tab[aria-selected="true"],.fbtn[aria-pressed="true"],
.contact .ini,.pcard.zahl,.pcard.zahl b,.ctabox,.pack.hi,.pack.hi .pn,.pack.hi h3,
.pack.hi .note,.pack.hi .slots,.pclose:hover{color:#1c3d5a}

/* Primaerbutton: dunkler Text auf Orange statt weiss (2,65:1 -> 8,0:1) */
.btn-primary,.btn-primary:hover,.btn-primary:focus-visible{color:#152e44;background:var(--orange)}
.btn-ghost{color:#eef1f3;border-color:rgba(255,255,255,.28)}
.btn-ghost:hover,.ft .btn-ghost:hover{background:#2c5c80;color:#eef1f3}

/* Fusszeile: eigener, tieferer Grund, damit sie sich vom Seitengrund absetzt */
.ft{--fbg:#16324b;--ft:#eef1f3;--fm:#c9d5de;--cell:#24506f;--edge:rgba(255,255,255,.14)}
.ft .pill{background:#2c5c80;color:#eef1f3}

/* Weisse Ringe und Schatten, die auf hellem Grund gedacht waren */
.st,.people .person .mk,.vbead{box-shadow:0 0 0 4px #1c3d5a}

/* Bilder im Dunkeln eine Spur ruhiger */
.simg img,.cap img,.pic img{filter:brightness(.94)}

/* Header: im Original rgba(255,255,255,.94), also nicht von der #fff-Regel erfasst */
.hd{background:rgba(28,61,90,.92)}
.ov-nav,.overlay{background:#24506f}

/* Schienenband der Logo-Leiste ruhiger, die hellen Schwellen dominierten sonst */
.rails{opacity:1}
.band-station{background:transparent}

/* Lok: Rumpf ist jetzt hell, also muss die Zierlinie dunkel werden */
.loco::before{background:#1c3d5a;opacity:.55}
.wagon.tail{color:var(--navy)}

/* ---------- Iteration nach Felix' Durchsicht ---------- */

/* Straenge der Trasse waren mit 16 % zu blass fuer dunklen Grund */
.trasse .s-track{stroke-opacity:.30}
.trasse .dot{stroke:#1c3d5a}

/* Klappen der Tage lagen als #1c3d5a hart im CSS, also blau in blau */
.day,.day-head .big{background:#2f628a;box-shadow:inset 0 1px 0 #eef1f322}
.day::before,.day-head .big::before{background:#eef1f31f}

/* Portraits nicht mehr entsaettigen, das sah wie Nachrufe aus */
.people .person>.pic img{filter:none;opacity:.85}
.people .person .pic.on{box-shadow:0 0 0 8px #1c3d5a,0 0 0 11px var(--navy)}
.people .person:hover>.pic img{opacity:1}

/* "ca. 400 Teilnehmende": Flaeche ist jetzt hell, der Text war noch weiss */
.pcard.zahl>span{color:rgba(28,61,90,.75)}


/* Abschnitte gegeneinander absetzen. Auf schwarzem Grund traegt eine reine
   Flaechendifferenz kaum, deshalb zusaetzlich eine Haarlinie an jeder Kante. */
:root{--ground:#1c3d5a;--card:#26547a}
html,body{background:#1c3d5a}
.station.card{background:#26547a;border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}
.ft{--fbg:#16324b;border-top:1px solid rgba(255,255,255,.10)}
.station.end{border-top:1px solid rgba(255,255,255,.10)}

/* Die Klapphaelften tragen background:#1c3d5a hart im CSS und uebermalen die .day-Regel */
.flip>span{background:#2f628a;color:#eef1f3}
.day,.day-head .big{color:#eef1f3}

/* ---------- Zweite Iteration ---------- */

/* Die Schiene ist im Original ein weisses Fuellrechteck mit Schwellen und Schienen darauf.
   Meine Deckkraft hat das Ganze verwaschen. Jetzt: Grund = Seitengrund, Linien hell. */
.rails{opacity:1}

.splus-grp{color:var(--navy)}

/* Abschnittskontrast deutlicher. "So war es 2026" war bisher gar nicht abgesetzt. */
:root{--card:#26547a}
.station.card,#rueckblick,#stimmen{background:#26547a;
  border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13)}



/* Sponsorenlogos. Zwei Fallen auf einmal:
   1) .sp-item .slogo hat zwei Klassen und schlaegt jede einklassige Regel.
   2) .slogo img traegt mix-blend-mode:multiply. Auf Weiss loest das den weissen
      Eigenhintergrund der Logodateien auf, auf Dunkel loescht es das Logo.
   Also: echte weisse Kachel in einheitlicher Groesse, Blendmodus zurueck auf normal. */
.sp-item .slogo{background:#fff;border-radius:10px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  width:180px;height:78px;padding:12px 18px;
  transition:transform .2s var(--ease),box-shadow .2s}
.sp-item .slogo:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.45)}
[data-tier="0"] .sp-item .slogo{width:240px;height:98px}
[data-tier="1"] .sp-item .slogo{width:208px;height:88px}
.sp-item .slogo img{mix-blend-mode:normal;max-width:100%;max-height:100%;height:auto;width:auto}
.sp-item .slogo:hover img{opacity:1}

/* ================= Unterseiten ================= */

/* Logoleiste "2026 auf der Buehne" (.flogo) hat wie .slogo mix-blend-mode:multiply.
   Gleiche Loesung: weisse Kachel, Blendmodus normal, einheitliche Groesse. */
.flogo{background:#fff;border-radius:8px;box-sizing:border-box;justify-content:center;
  width:164px;height:64px;padding:10px 14px}
.flogo img{mix-blend-mode:normal;max-width:100%;max-height:100%}
.flogo .lname{color:#1c3d5a;opacity:.85}
.flogos,.orgs{gap:12px}

/* CTA-Box lag auf var(--navy), also jetzt hell mit weisser Schrift.
   Als angehobene dunkle Flaeche bleibt der weisse Text richtig. */
.ctabox{background:#2f628a;color:#fff}

/* Lightbox der Mediathek: Schliessen-Knopf war navy mit weissem Icon */
dialog.lightbox .lightbox-close,dialog.lb .x{background:#eef1f3;color:#1c3d5a}
dialog.lightbox::backdrop,dialog.lb::backdrop,dialog.sheet::backdrop{background:rgba(0,0,0,.88)}
dialog.panel::backdrop{background:rgba(0,0,0,.6)}

/* Sponsorenschild (Haltestelle) traegt Firmenlogos, bleibt hell */
.sign{background:#fff}
/* Nur das Sponsorenschild ist hell und braucht dunklen Text.
   Die Trassen-Karten auf der Startseite tragen dieselbe Klasse, sind aber dunkel. */
.sign:not(#bereiche .sign) .kicker,.sign:not(#bereiche .sign) h3,.sign:not(#bereiche .sign) p{color:#1c3d5a}
#bereiche .sign .kicker{color:#c9d5de}
#bereiche .sign h3{color:#eef1f3}
#bereiche .sign p{color:#c9d5de}

/* Paketkarten und Tabellen der Unterseiten */
.pack,.tiers,.tier{background:transparent}
.card .tiers{background:transparent}
.prose h2,.prose h3{color:var(--navy)}
.prose{color:var(--text)}

/* Portraitring war weiss und im Hellen unsichtbar, auf Dunkel ein weisser Donut */
.person .pic{box-shadow:0 0 0 10px #1c3d5a,0 0 0 13px transparent}
.people .person .pic.on{box-shadow:0 0 0 8px #1c3d5a,0 0 0 11px var(--navy)}
@media(max-width:760px){
  .person .pic{box-shadow:0 0 0 6px #1c3d5a}
  .people .person .pic.on{box-shadow:0 0 0 6px #1c3d5a,0 0 0 9px var(--navy)}
}

/* ===== Kontrast-Audit =====
   Alle Regeln, die im Original weissen Text auf eine var(--navy)-Flaeche setzen.
   Weil --navy jetzt helle Tinte ist, sind diese Flaechen hell geworden und der
   weisse Text unlesbar. Die Selektoren sind bewusst 1:1 gespiegelt: bei gleicher
   Spezifitaet gewinnt die spaetere Datei, damit greifen sie zuverlaessig. */

.skip{color:#1c3d5a}
.btn:hover{color:#1c3d5a}
.tab[aria-selected="true"],.fbtn[aria-pressed="true"]{color:#1c3d5a}
.contact .ini{color:#1c3d5a}
.pclose:hover{color:#1c3d5a}

/* Paketkarte "Gold": Kopf war schon dunkel, Liste und Fussnote nicht */
.pack.hi{color:#1c3d5a}
.pack.hi .pn,.pack.hi h3,.pack.hi .note{color:#1c3d5a}
.pack.hi .slots{color:rgba(28,61,90,.78)}
.pack.hi .slots.full{color:rgba(28,61,90,.78)}
.pack.hi ul li{color:rgba(28,61,90,.78)}
.pack.hi ul li::before{background:#1c3d5a;border-color:#1c3d5a}

/* Zahlkachel */
.pcard.zahl{color:#1c3d5a}
.pcard.zahl b{color:#1c3d5a}
.pcard.zahl>span{color:rgba(28,61,90,.78)}



/* Playbuttons: Verhalten wie im Original. In Ruhe halbtransparent mit hellem Rand,
   beim Hover deckend hell. Kaputt war nur die Icon-Farbe, die per var(--navy) auf
   helle Tinte umgesprungen ist und damit hell auf hell stand. */
.film:hover .playbtn,.film:focus-visible .playbtn,
.clip:hover .playbtn,.clip:focus-visible .playbtn{background:#fff;color:#1c3d5a}
.vbead:hover .play,.vbead:focus-visible .play{background:#fff;color:#1c3d5a}
.vbead:hover,.vbead:focus-visible{box-shadow:0 0 0 3px #1c3d5a,0 0 0 6px #eef1f3}
.film .cap,.clip .cap{background:#fff;color:#1c3d5a}
.film:hover .cap,.film:focus-visible .cap,
.clip:hover .cap,.clip:focus-visible .cap{box-shadow:0 0 0 2px #eef1f3}

/* ===== Sekundaerfarbe nach Jessicas Wunsch =====
   #128f8b erreicht auf dem Navy-Grund nur 2,86:1 und ist damit als Textfarbe zu
   schwach. Verwendet wird deshalb dieselbe Farbe aufgehellt: Farbton 178 Grad und
   Saettigung 78 % sind identisch, nur die Helligkeit steigt. Auf dem Grund kommt
   sie damit auf 5,63:1. Sie traegt die Grafik, Orange bleibt Handlung und Position. */
:root{--teal:#1accc6;--teal-tief:#128f8b}

/* Trasse und Gleis in der Sekundaerfarbe */
#trasse-track stop,#trasse-grad stop{stop-color:var(--teal)}
#mast path{stroke:var(--teal)}
.rails .gl-linie,#schwellen .gl-linie{fill:var(--teal)}
.trasse .s-track{stroke:var(--teal);stroke-opacity:.34}
.trasse .sa,.trasse .ra,.trasse .rc,.trasse .la,.trasse .lb{stroke:var(--teal)}

/* Haltepunkte auf der Linie */
.st{border-color:var(--teal)}
.st.on{background:var(--teal)}
.card .st.on{background:var(--teal)}
.people .person .pic.on{box-shadow:0 0 0 8px #1c3d5a,0 0 0 11px var(--teal)}

/* Kicker und Auszeichnungen */
.kicker,.th-k,.v-name,.tagl,.cat{color:var(--teal)}
.tier-head .free{color:var(--teal)}

/* Der Endknoten im Footer bleibt orange, er markiert die Ankunft */
body.home .tafel .st-end{border-color:var(--teal)}
body.home .tafel .st-end.on{background:var(--orange);border-color:var(--orange)}

/* Grund des Schienenbands */
.rails .gl-grund{fill:#1c3d5a}

/* Logo: beide Fassungen liegen im Markup, hier wird umgeschaltet */
.brand img.qm-hell{display:none}
.brand img.qm-dunkel{display:block}

/* Die Trasse wird mit z-index 1 ueber den Footer gemalt, dadurch lief die Linie
   sichtbar quer ueber den orangenen Haltepunkt. Der Knoten kommt darueber. */
body.home .tafel .trail{z-index:3}

/* Die Buehnenfarben sind fuer helle Gruende gemischt. Plenum ist exakt der
   Grundton dieser Fassung (#1c3d5a) und waere unsichtbar. Deshalb wird jede
   Buehnenfarbe hier zur hellen Tinte hin aufgehellt, die Zuordnung bleibt. */
/* Die Buehnenfarbe kommt fuer helle Gruende gemischt und wird hier aufgehellt,
   sonst faellt ein dunkler Ton im Navygrund zusammen. Sie traegt den Ring vor
   dem Ortsnamen. Der Name selbst bleibt neutral, sonst wird die Zeile bunt. */
.slot[data-stage-color]{--stage-sicht:color-mix(in oklab,var(--stage,#1c3d5a),#eef1f3 65%)}
.slot .ort::before{border-color:var(--stage-sicht,currentColor)}
/* Die Markenfarben sind fuer helle Gruende gemischt. Auf dem Navygrund wird
   erst aufgehellt, dann Flaeche und Rand aus dem aufgehellten Ton gezogen,
   sonst faellt ein dunkler Ton (Pause, Grau) im Untergrund zusammen. */
/* Die Farben aus dem CMS sind fuer helle Gruende gemischt. Auf dem Navygrund
   wird erst aufgehellt, dann werden Flaeche, Rand und Schrift aus dem
   aufgehellten Ton gezogen, sonst faellt ein dunkler Ton im Untergrund zusammen. */
.slot{--typ-sicht:color-mix(in oklab,var(--typ,#1c3d5a),#eef1f3 55%);
  --typ-schrift:color-mix(in oklab,var(--typ,#1c3d5a),#eef1f3 70%);
  background:color-mix(in oklab,var(--typ-sicht),transparent 80%)}
/* Die Art steht auf der Flaeche ihrer eigenen Farbe. Beide aus demselben Ton
   zu ziehen ergibt zu wenig Abstand: gemessen 3,9 bis 4,3 und damit unter AA.
   Die Schrift wird deshalb staerker aufgehellt als die Flaeche, gemessen
   danach 4,77 bis 5,24 ueber alle neun Arten. */
.slot .format{color:var(--typ-schrift)}
.slot .mk{--tagsicht:color-mix(in oklab,var(--tagfarbe,#c9d5de),#eef1f3 55%);
  color:var(--tagsicht);
  background:color-mix(in oklab,var(--tagsicht),transparent 88%);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--tagsicht),transparent 62%)}

/* Filterleiste auf dunklem Grund */
.agf-b{border-color:rgba(238,241,243,.28);color:var(--ink,#eef1f3)}
.agf-b:hover{border-color:#eef1f3}
.agf-b[aria-pressed="true"]{background:#eef1f3;border-color:#eef1f3;color:#1c3d5a}

/* Zeitraster und Filterschalter auf dunklem Grund */
.zr-zeit b{color:var(--ink,#eef1f3)}
.agf-auf{border-color:rgba(238,241,243,.28);color:var(--ink,#eef1f3)}
.agf-auf:hover{border-color:#eef1f3}
.slot .spk .ini-sm{background:rgba(238,241,243,.12);color:#eef1f3}

/* Newsletter-Popup: eigene Flaeche, damit es sich vom Seitengrund abhebt. */
.nlp{background:var(--card);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.nlp-zeile{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
.nlp-close{border-color:rgba(255,255,255,.28)}
/* Fehlermeldung: das Rot aus styles.css ist fuer hellen Grund gedacht, auf Navy kaum lesbar */
.nlp-in.has-error .nl-status{color:#ffb4a8}