/* ==========================================================================
   Bahnmonitor — Thema „Wartesaal“ (rot, mit Augenzwinkern)
   Wählbar je Konto unter Einstellungen → Aussehen. Greift nur bei
   <html data-thema="rot">; ohne das Attribut bleibt das gelbe Markendesign.
   Bildmarke: Skelett wartet auf der Bank (app/static/icons/icon-rot.svg).
   Kein DB-Logo, kein DB-Schriftzug; Pflichtsatz im Fuß bleibt.
   ========================================================================== */
html:root[data-thema="rot"]{
  --bm-accent:#EC0016;
  --bm-on-accent:#FFFFFF;
}
html[data-thema="rot"] .marke{
  width:auto;height:36px;padding-left:46px;font:700 26px/36px var(--bm-display);letter-spacing:-.01em;
  color:var(--bm-ink);background:url(../../icons/icon-rot.svg) left center/36px 36px no-repeat}
html[data-thema="rot"] .kopf{border-bottom:3px solid var(--bm-accent)}
html[data-thema="rot"] nav.haupt a.akzent{color:#FFFFFF}
html[data-thema="rot"] .knopf.akzent{color:#FFFFFF}
@media (hover:hover) and (pointer:fine){
  html[data-thema="rot"] .knopf.akzent:hover{background:var(--bm-ink);border-color:var(--bm-ink);color:#FFFFFF}
  html[data-thema="rot"] main a:not(.knopf):hover{color:#FFFFFF}
}
/* Wartesaal-Zeile über dem Fuß */
.wartesaal{display:none}
html[data-thema="rot"] .wartesaal{display:block;margin:0 0 12px;font:700 18px/1.2 var(--bm-display);color:var(--bm-ink)}
@media (prefers-color-scheme: dark){
  html:root[data-thema="rot"]:not([data-theme="light"]) .marke{color:var(--bm-ink);background-image:url(../../icons/icon-rot.svg)}
}
html:root[data-theme="dark"][data-thema="rot"] .marke{background-image:url(../../icons/icon-rot.svg)}

/* Auswahl in den Einstellungen */
.themawahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.themawahl label{display:grid;gap:10px;padding:14px;border:2px solid var(--bm-line-strong);cursor:pointer}
.themawahl label:has(input:checked){border-color:var(--bm-ink);box-shadow:inset 0 -4px 0 var(--bm-ink)}
.themawahl input{position:absolute;opacity:0}
.themawahl input:focus-visible+span{outline:3px solid var(--bm-ink);outline-offset:4px}
.themawahl .muster{display:flex;align-items:center;gap:10px;font:700 18px/1 var(--bm-display)}
.themawahl .muster img{width:40px;height:40px}
.themawahl small{color:var(--bm-muted);font-size:13px;line-height:1.4}
@media (max-width:520px){.themawahl{grid-template-columns:minmax(0,1fr)}}

/* ---------- Wartesaal, Fassung 2: rote Kopfleiste, große Bildmarke, Motiv als Schatten ---------- */
html[data-thema="rot"] .kopf{background:var(--bm-accent);border-bottom:0;padding:14px 0}
html[data-thema="rot"] .marke,
html:root[data-thema="rot"]:not([data-theme="light"]) .marke,
html:root[data-theme="dark"][data-thema="rot"] .marke{
  height:56px;padding-left:68px;font-size:32px;line-height:56px;color:#FFFFFF;
  background:url(../../icons/icon-rot-negativ.svg) left center/56px 56px no-repeat}
html[data-thema="rot"] nav.haupt a,html[data-thema="rot"] nav.haupt a .ic{color:#FFFFFF}
html[data-thema="rot"] nav.haupt a{opacity:.85}
html[data-thema="rot"] nav.haupt a[aria-current]{opacity:1;border-bottom-color:#FFFFFF}
html[data-thema="rot"] .kopf .knopf.leise{color:#FFFFFF;border-color:#FFFFFF;background:transparent}
@media (hover:hover) and (pointer:fine){
  html[data-thema="rot"] nav.haupt a:hover{opacity:1;color:#FFFFFF}
  html[data-thema="rot"] .kopf .knopf.leise:hover{background:#FFFFFF;color:var(--bm-accent)}
}
html[data-thema="rot"] .kopf :focus-visible{outline-color:#FFFFFF}

/* Das Motiv als Schatten: groß, halbtransparent, unten rechts – liegt hinter allem */
html[data-thema="rot"] body{position:relative}
html[data-thema="rot"] body::after{content:"";position:fixed;right:-2vw;bottom:-1vw;z-index:0;pointer-events:none;
  width:min(44vw,560px);aspect-ratio:370/372;background:url(../../icons/skelett_motiv.svg) right bottom/contain no-repeat;opacity:.07}
html[data-thema="rot"] main,html[data-thema="rot"] .fuss,html[data-thema="rot"] .kopf{position:relative;z-index:1}
html[data-thema="rot"] .fuss{background:transparent;border-top:2px solid var(--bm-accent)}
@media (prefers-color-scheme: dark){html[data-thema="rot"]:not([data-theme="light"]) body::after{opacity:.14}}
html[data-theme="dark"][data-thema="rot"] body::after{opacity:.14}

/* Wartesaal-Zeile im Fuß mit kleinem Motiv */
html[data-thema="rot"] .wartesaal{display:flex;align-items:center;gap:12px;font-size:22px}
html[data-thema="rot"] .wartesaal::before{content:"";width:44px;height:44px;flex:none;background:url(../../icons/skelett_motiv.svg) center/contain no-repeat}

@media (max-width:900px){
  html[data-thema="rot"] body::after{width:78vw;bottom:calc(64px + env(safe-area-inset-bottom));opacity:.06}
}
@media (max-width:520px){
  html[data-thema="rot"] .marke,
  html:root[data-thema="rot"]:not([data-theme="light"]) .marke,
  html:root[data-theme="dark"][data-thema="rot"] .marke{height:40px;padding-left:50px;font-size:24px;line-height:40px;background-size:40px 40px}
  html[data-thema="rot"] .kopf{padding:10px 0}
}
@media print{html[data-thema="rot"] body::after{display:none}}

/* Kopfleiste beim Scrollen sichtbar (überschreibt position:relative von oben) */
@media (min-width:700px){ html[data-thema="rot"] .kopf{position:sticky;top:0;z-index:50} }