/* Ansicht wählen: Hell (Standard), Verlauf, Kosmos. Lädt als letztes Stylesheet im Kopf (nach f28.css).
   Hell = heutiges Aussehen: Ohne data-ansicht=verlauf|kosmos greift hier nur der Umschalter selbst.
   Kosmos: die meisten Farben kommen aus ansicht-kosmos.css (erzeugt von werkzeuge/ansicht-kosmos.py, nur bei Kosmos
   geladen). Hier stehen Grund, Sterne, Kopf, Fuß und Korrekturen. Regeln hier tragen html[data-ansicht=…] und sind
   damit stärker als die erzeugten Regeln. */

/* ================= Umschalter ================= */
html:not([data-ansicht]) .ans-kopf,html:not([data-ansicht]) .ans-fusszeile{display:none}
.ans-gruppe{border:0;margin:0;padding:0;min-width:0}
.ans-legende{font:800 .72rem/1.2 var(--display,Montserrat,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#7b2048;padding:0;margin:0 0 .55rem}
.ans-option{position:relative;display:flex;align-items:center;gap:.75rem;cursor:pointer;border-radius:.85rem;border:1.5px solid transparent;color:#333}
.ans-option[hidden]{display:none}
.ans-option input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ans-option:has(input:focus-visible){outline:3px solid #b72f67;outline-offset:2px}
.ans-option:hover{background:#fbf0f5}
html[data-ansicht=hell] .ans-o-hell,html[data-ansicht=verlauf] .ans-o-verlauf,html[data-ansicht=kosmos] .ans-o-kosmos{border-color:#b72f67;background:#fbf0f5}
.ans-muster{width:1.9rem;height:1.9rem;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(51,51,51,.22)}
.ans-m-hell{background:radial-gradient(circle at 72% 28%,#f7d3e4 0 32%,transparent 34%),#fff}
.ans-m-verlauf{background:linear-gradient(118deg,#9c54a1,#dd428c 60%,#f2696c)}
.ans-m-kosmos{background:radial-gradient(circle at 30% 34%,#fff 0 1.5px,transparent 2px),radial-gradient(circle at 64% 58%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 44% 74%,#f3a6c9 0 1px,transparent 1.5px),radial-gradient(circle at 70% 120%,rgba(221,66,140,.75),transparent 62%),#150716}
.ans-text{display:grid;gap:.1rem;min-width:0}
.ans-name{font:700 .98rem/1.2 var(--display,Montserrat,sans-serif)}
.ans-info{font:400 .85rem/1.35 var(--body,'Open Sans',sans-serif);color:#5f5f5f}
.ans-haken{margin-left:auto;width:1.25rem;height:1.25rem;color:#b72f67;opacity:0}
.ans-haken svg{width:100%;height:100%;display:block}
html[data-ansicht=hell] .ans-o-hell .ans-haken,html[data-ansicht=verlauf] .ans-o-verlauf .ans-haken,html[data-ansicht=kosmos] .ans-o-kosmos .ans-haken{opacity:1}

/* Kopfzeile: runder Knopf neben der Suche, kleines Auswahlfeld (wie .f28-suche-knopf) */
.ans-kopf{position:relative;display:flex;flex:none}
.ans-knopf{display:inline-flex;align-items:center;justify-content:center;width:2.9rem;height:2.9rem;padding:0;flex:none;border-radius:999px;
  border:1px solid var(--linie,#eedbe5);background:#fff;color:var(--tinte,#333);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.ans-knopf svg{width:1.2rem;height:1.2rem;flex:none}
.ans-knopf:hover,.ans-knopf[aria-expanded=true]{background:var(--flaeche,#f6e7ef);color:var(--marke,#b72f67);border-color:var(--linie-2,#daa7c6)}
.ans-knopf:focus-visible{outline:3px solid #b72f67;outline-offset:2px}
.ans-feld{position:absolute;z-index:80;top:calc(100% + .7rem);right:0;width:18.5rem;padding:1rem;border-radius:1.1rem;background:#fff;color:#333;border:1px solid #eedbe5;
  box-shadow:0 2px 4px rgba(58,16,56,.06),0 30px 60px -24px rgba(58,16,56,.38);text-align:left}
.ans-feld[hidden]{display:none}
.ans-feld .ans-option{padding:.55rem .6rem}
.ans-feld .ans-option+.ans-option{margin-top:.25rem}
.ans-fuss{margin:.7rem .2rem 0;font:400 .8rem/1.4 var(--body,'Open Sans',sans-serif);color:#5f5f5f}
@media (max-width:1060px){.ans-knopf{width:2.65rem;height:2.65rem}}
@media (max-width:520px){.ans-kopf{position:static}.kopf>.wrap{position:relative}
  .ans-feld{left:16px;right:16px;top:calc(100% + .3rem);width:auto}}

/* Fußzeile: Ansicht: Hell · Verlauf · Kosmos */
.ans-fusszeile{display:flex;justify-content:center;margin:1.6rem 0 0;padding:1.2rem 0;border-top:1px solid var(--linie,#eedbe5)}
.ans-leiste{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:center}
.ans-leiste .ans-legende{float:left;margin:0 .6rem 0 0;font-size:.8rem;letter-spacing:.12em}
.ans-leiste .ans-option{gap:.5rem;padding:.4rem .9rem .4rem .45rem;border:1.5px solid var(--linie,#eedbe5);border-radius:999px;background:#fff;min-height:2.75rem;box-sizing:border-box}
.ans-leiste .ans-muster{width:1.6rem;height:1.6rem}
.ans-leiste .ans-name{font-size:.92rem}
html[data-ansicht=hell] .ans-leiste .ans-o-hell,html[data-ansicht=verlauf] .ans-leiste .ans-o-verlauf,html[data-ansicht=kosmos] .ans-leiste .ans-o-kosmos{border-color:#b72f67;background:#fbf0f5}
@media (max-width:520px){.ans-leiste{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
  .ans-leiste .ans-legende{grid-column:1/-1;float:none;margin:0 0 .3rem;text-align:center}
  .ans-leiste .ans-option{flex-direction:column;gap:.3rem;border-radius:1rem;padding:.6rem .3rem;justify-content:center}}
@media (prefers-reduced-motion:reduce){.ans-knopf,.ans-feld,.ans-option{transition:none!important;animation:none!important}}

/* ================= Verlauf ================= */
html[data-ansicht=verlauf]{--ans-tief:linear-gradient(118deg,#8e2f78 0%,#a8306b 52%,#b23c4e 100%);
  --ans-hell:linear-gradient(118deg,#9c54a1 0%,#bf4c98 34%,#dd428c 64%,#f2696c 100%)}
html[data-ansicht=verlauf] .kopf{background:var(--ans-tief)!important;border-bottom-color:transparent!important;box-shadow:0 10px 30px -18px rgba(70,0,45,.6)}
html[data-ansicht=verlauf] .kopf .f28-suche-knopf,html[data-ansicht=verlauf] .kopf .menue-knopf,html[data-ansicht=verlauf] .kopf .ans-knopf{background:rgba(255,255,255,.12)!important;color:#fff!important;border-color:rgba(255,255,255,.55)!important}
/* Menü in der Kopfzeile weiß; auf dem Handy bleibt das aufgeklappte Menü eine helle Fläche wie in Hell */
@media (min-width:1061px){html[data-ansicht=verlauf] .kopf .f28-nav>a,html[data-ansicht=verlauf] .kopf .f28-gruppe-knopf{color:#fff!important}
html[data-ansicht=verlauf] .kopf .f28-nav>a[aria-current],html[data-ansicht=verlauf] .kopf .f28-gruppe-knopf.f28-aktiv{background:rgba(40,0,30,.2)!important}
html[data-ansicht=verlauf] .kopf .f28-nav>a[aria-current]::after,html[data-ansicht=verlauf] .kopf .f28-gruppe-knopf.f28-aktiv::after{background:#fff!important}}
html[data-ansicht=verlauf] .kopf :focus-visible{outline-color:#fff!important}
html[data-ansicht=verlauf] .kopf .fortschritt{background:#fff!important}
html[data-ansicht=verlauf] .kopf .logo img,html[data-ansicht=verlauf] .fuss-raster img{background:#fff;border-radius:12px;padding:5px 10px;margin:-5px -10px;box-sizing:content-box}
html[data-ansicht=verlauf] .fuss{background:var(--ans-tief)!important;border-top:0!important;color:#fff}
html[data-ansicht=verlauf] main>section:first-child{position:relative;background:
  linear-gradient(90deg,rgba(60,8,52,.42) 0%,rgba(60,8,52,.3) 100%),var(--ans-hell)!important}
/* Schrift auf der Verlaufsfläche weiß. Karten, Knöpfe, Felder und Grafiken behalten die Farben von Hell. */
html[data-ansicht=verlauf] main>section:first-child :is(h1,h2,h3,h4,p,li,small,span,a,b,strong,em,dt,dd,div,nav,ol,ul,figcaption,label,time):not(
  .knopf,.pille,.held-chip,.held-ausschnitt,.held-beweis,.held-bild,.f26-beispiel,.f26-abo,.f26-werkzeug,.f26-app,.f26-wz-zeichen,.ch-kreis,.pr-steckbrief,.fb-karte,.kl-hinweis,.kl-held-karte,.f28-planung,.fi-status,.fi-wahl-panel,.fi-rollen,.fi-brief,.fi-entwurf,.fi-nur,
  .ab,.vs,.kv-ziel-bild,.f26-abo-fluss,.f28-projekt-bild,.telefon,.fb-strecke,.desk-mini,.kv-rahmen,.f26-hinweis-bild,.ch-woche,.kn-grafik,.f26-kompass-buehne,.fs-wege,.kf-wege,.ob-info,.f26-bau,.f26-entwuerfe,.ds-punkte,.kv-video,.b-kachel,.f27-bild,.f27-telefon,.md-vorschau,video,picture,canvas,iframe,[role=img],[aria-hidden=true],
  :is(.knopf,.pille,.held-chip,.held-ausschnitt,.held-beweis,.held-bild,.f26-beispiel,.f26-abo,.f26-werkzeug,.f26-app,.f26-wz-zeichen,.ch-kreis,.pr-steckbrief,.fb-karte,.kl-hinweis,.kl-held-karte,.f28-planung,.fi-status,.fi-wahl-panel,.fi-rollen,.fi-brief,.fi-entwurf,.fi-nur,
  .ab,.vs,.kv-ziel-bild,.f26-abo-fluss,.f28-projekt-bild,.telefon,.fb-strecke,.desk-mini,.kv-rahmen,.f26-hinweis-bild,.ch-woche,.kn-grafik,.f26-kompass-buehne,.fs-wege,.kf-wege,.ob-info,.f26-bau,.f26-entwuerfe,.ds-punkte,.kv-video,.b-kachel,.f27-bild,.f27-telefon,.md-vorschau,video,picture,canvas,iframe,[role=img],[aria-hidden=true],button,form) *){color:#fff!important}
/* Grafiken im Seitenanfang erben die Schrift von Hell, nicht das Weiß der Fläche (Stärke 0: eigene Farben gehen vor) */
:where(html[data-ansicht=verlauf] main>section:first-child) :where([role=img]:not(svg),.held-bild,.ab,.vs,.kv-ziel-bild,.f26-abo-fluss,.f28-projekt-bild,.telefon,.fb-strecke,.desk-mini,.kv-rahmen,.f26-hinweis-bild,.ch-woche,.kn-grafik,.f26-kompass-buehne,.fs-wege,.ob-info,.f26-bau,.f26-entwuerfe,.ds-punkte,.kv-video,.b-kachel,.f27-bild,.f27-telefon,.md-vorschau,video,picture,canvas,iframe){color:#333}
html[data-ansicht=verlauf] main>section:first-child .verlauf-text{background:none!important;-webkit-text-fill-color:#ffe1ee!important;color:#ffe1ee!important}
html[data-ansicht=verlauf] main>section:first-child a:not(.knopf){text-decoration-color:rgba(255,255,255,.7)}
html[data-ansicht=verlauf] main>section:first-child .knopf.haupt{background:#fff!important;color:#8e2f78!important;box-shadow:0 10px 24px -14px rgba(40,0,30,.6)!important}
html[data-ansicht=verlauf] main>section:first-child .knopf.leise{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.75)!important}
html[data-ansicht=verlauf] main>section:first-child .knopf:focus-visible{outline-color:#fff!important}
/* Fußzeile: Schrift weiß, die aufklappbaren Rechtstexte bleiben helle Karten */
html[data-ansicht=verlauf] .fuss :is(h3,h4,p,li,a,span,small,ul):not(.rechtliches *,.ans-fusszeile *){color:#fff!important}
html[data-ansicht=verlauf] .fuss a:not(.rechtliches *){text-decoration-color:rgba(255,255,255,.6)}
html[data-ansicht=verlauf] .fuss :focus-visible{outline-color:#fff!important}
html[data-ansicht=verlauf] .band.zart{background:linear-gradient(118deg,#f7eef9 0%,#fdeef5 50%,#fff1ee 100%)!important}
html[data-ansicht=verlauf] .ans-fusszeile{border-top-color:rgba(255,255,255,.3)}
html[data-ansicht=verlauf] .ans-fusszeile .ans-legende{color:#fff}
html[data-ansicht=verlauf] .ans-leiste .ans-option{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#fff}
html[data-ansicht=verlauf] .ans-leiste .ans-o-verlauf{background:#fff;color:#8e2f78;border-color:#fff}
html[data-ansicht=verlauf] .ans-leiste .ans-option:has(input:focus-visible){outline-color:#fff}

/* ================= Kosmos ================= */
html[data-ansicht=kosmos]{color-scheme:dark;background:#150716!important}
html[data-ansicht=kosmos] body{background:transparent!important}
html[data-ansicht=kosmos] body::before,html[data-ansicht=kosmos] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
html[data-ansicht=kosmos] body::before{background:
  radial-gradient(1100px 620px at 80% 118%,rgba(221,66,140,.34),rgba(156,84,161,.10) 46%,transparent 72%),
  radial-gradient(620px 420px at 96% 4%,rgba(156,84,161,.22),transparent 70%),
  radial-gradient(520px 360px at 4% 2%,rgba(156,84,161,.14),transparent 70%),
  linear-gradient(180deg,#130614 0%,#1c0a1f 55%,#250c27 100%)}
html[data-ansicht=kosmos] body::after{opacity:.75;background:
  radial-gradient(1.4px 1.4px at 28px 34px,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 182px 16px,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 75px 89px,#fff 50%,transparent 51%),
  radial-gradient(1.4px 1.4px at 119px 148px,#fff 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 74px 5px,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 256px 203px,rgba(243,166,201,.85) 50%,transparent 51%),
  radial-gradient(1px 1px at 8px 100px,rgba(255,230,245,.9) 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 131px 98px,rgba(255,230,245,.9) 50%,transparent 51%),
  radial-gradient(1px 1px at 34px 85px,rgba(243,166,201,.85) 50%,transparent 51%),
  radial-gradient(1px 1px at 309px 179px,rgba(243,166,201,.85) 50%,transparent 51%),
  radial-gradient(1.7px 1.7px at 423px 54px,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 462px 459px,rgba(255,230,245,.9) 50%,transparent 51%),
  radial-gradient(1px 1px at 670px 503px,rgba(243,166,201,.85) 50%,transparent 51%),
  radial-gradient(1.4px 1.4px at 473px 115px,#fff 50%,transparent 51%);
  background-size:197px 173px,197px 173px,263px 211px,263px 211px,331px 283px,331px 283px,419px 347px,419px 347px,541px 461px,541px 461px,613px 523px,613px 523px,733px 587px,733px 587px}
@media (prefers-reduced-motion:no-preference){
  html[data-ansicht=kosmos] body::after{animation:ans-funkeln 6s ease-in-out infinite alternate}
  @keyframes ans-funkeln{from{opacity:.75}to{opacity:.45}}
}
html[data-ansicht=kosmos] .kopf{background:rgba(21,7,22,.92)!important;border-bottom-color:rgba(255,255,255,.08)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-ansicht=kosmos] .kopf .f28-nav>a,html[data-ansicht=kosmos] .kopf .f28-gruppe-knopf{color:#f4e9f0!important}
html[data-ansicht=kosmos] .kopf .f28-gruppe-knopf.f28-aktiv,html[data-ansicht=kosmos] .kopf .f28-nav>a[aria-current]{color:#f3a6c9!important}
html[data-ansicht=kosmos] .kopf .f28-suche-knopf,html[data-ansicht=kosmos] .kopf .menue-knopf,html[data-ansicht=kosmos] .kopf .ans-knopf{background:rgba(255,255,255,.06)!important;color:#f4e9f0!important;border-color:rgba(255,255,255,.22)!important}
/* Orbit: Etikett über dem leuchtenden Bühnenhintergrund deckend, damit die Schrift überall lesbar bleibt */
html[data-ansicht=kosmos] .ob-buehne .pille{background-color:#2a1230!important}
/* Laufband: Grafik mit color:inherit (f28.css), erbt die Schrift von Hell */
html[data-ansicht=kosmos] .f28-laufband{color:var(--ans-hell-farbe,#333)}
html[data-ansicht=kosmos] .fuss{background:transparent!important;border-top-color:rgba(255,255,255,.1)!important}
html[data-ansicht=kosmos] .kopf .logo img,html[data-ansicht=kosmos] .fuss-raster img{background:#fff;border-radius:12px;padding:5px 10px;margin:-5px -10px;box-sizing:content-box}

/* Umschalter in Kosmos */
html[data-ansicht=kosmos] .ans-feld{background:#221026;color:#f4e9f0;border-color:rgba(255,255,255,.14)}
html[data-ansicht=kosmos] .ans-option{color:#f4e9f0}
html[data-ansicht=kosmos] .ans-option:hover{background:rgba(240,140,186,.08)}
html[data-ansicht=kosmos] .ans-o-kosmos{border-color:#f08cba;background:rgba(240,140,186,.12)}
html[data-ansicht=kosmos] .ans-option:has(input:focus-visible){outline-color:#f3a6c9}
html[data-ansicht=kosmos] .ans-info,html[data-ansicht=kosmos] .ans-fuss{color:#cdb9c8}
html[data-ansicht=kosmos] .ans-legende{color:#f3a6c9}
html[data-ansicht=kosmos] .ans-haken{color:#f08cba}
html[data-ansicht=kosmos] .ans-knopf:focus-visible{outline-color:#f3a6c9}
html[data-ansicht=kosmos] .ans-leiste .ans-option{background:transparent;border-color:rgba(255,255,255,.2)}
html[data-ansicht=kosmos] .ans-leiste .ans-o-kosmos{border-color:#f08cba;background:rgba(240,140,186,.12)}
html[data-ansicht=kosmos] .ans-fusszeile{border-top-color:rgba(255,255,255,.12)}

/* Knopf „Fortschritt auf diesem Gerät speichern“ (speicherwahl.js, Stil im style-Attribut) */
html[data-ansicht=kosmos] body>p>button[aria-pressed]{background:#221026!important;color:#f4e9f0!important;border-color:rgba(255,255,255,.3)!important}
html[data-ansicht=kosmos] body>p>button[aria-pressed]+span{color:#cdb9c8}