/* RAUMRISS · Blau nur für die Startseite (index.html). Lädt nach glas.css.
   Freundliches helles Blau auch im Dunkelmodus: dieselben Werte gelten in beiden Modi. */
:root{
  --g-grund-farbe:#7fa9d6;
  --g-grund-bild:linear-gradient(165deg,#b9d4ef 0%,#8db4de 38%,#5f90c6 78%,#4a7db6 100%);
  --g-schleier:radial-gradient(70% 60% at 18% 0%,rgba(255,255,255,.35),transparent 70%);
  --g-glas:rgba(255,255,255,.42);
  --g-glas-dicht:rgba(255,255,255,.7);
  --g-linie:rgba(16,34,64,.10);
  --g-fuge:rgba(30,60,110,.14);
  --g-schatten:0 1px 1px rgba(20,40,80,.05),0 10px 22px -14px rgba(20,45,90,.25),0 34px 70px -34px rgba(20,45,90,.4);
  --g-schatten-kachel:0 1px 1px rgba(20,40,80,.05),0 4px 9px -6px rgba(20,45,90,.22);
  --g-tint:rgba(255,255,255,.5);
  --g-tint-linie:rgba(16,34,64,.08);
  --g-tinte:#0d1a2e;
  --g-zweit:rgba(13,26,46,.74);
  --g-dritt:rgba(13,26,46,.56);
  --g-akzent-text:#a83400;
  --g-pill-an-text:#0d1a2e;
  --g-grat:rgba(255,255,255,.96);
  --g-schatten-kachel:0 1px 1px rgba(20,40,80,.05),0 4px 9px -6px rgba(20,45,90,.22);
  --g-pill-an:#ffffff;
}
@media (prefers-color-scheme:dark){:root{
  --g-grund-farbe:#7fa9d6;
  --g-grund-bild:linear-gradient(165deg,#b9d4ef 0%,#8db4de 38%,#5f90c6 78%,#4a7db6 100%);
  --g-schleier:radial-gradient(70% 60% at 18% 0%,rgba(255,255,255,.35),transparent 70%);
  --g-glas:rgba(255,255,255,.42);
  --g-glas-dicht:rgba(255,255,255,.7);
  --g-linie:rgba(16,34,64,.10);
  --g-fuge:rgba(30,60,110,.14);
  --g-schatten:0 1px 1px rgba(20,40,80,.05),0 10px 22px -14px rgba(20,45,90,.25),0 34px 70px -34px rgba(20,45,90,.4);
  --g-schatten-kachel:0 1px 1px rgba(20,40,80,.05),0 4px 9px -6px rgba(20,45,90,.22);
  --g-tint:rgba(255,255,255,.5);
  --g-tint-linie:rgba(16,34,64,.08);
  --g-tinte:#0d1a2e;
  --g-zweit:rgba(13,26,46,.74);
  --g-dritt:rgba(13,26,46,.56);
  --g-akzent-text:#a83400;
  --g-pill-an-text:#0d1a2e;
  --g-grat:rgba(255,255,255,.96);
  --g-schatten-kachel:0 1px 1px rgba(20,40,80,.05),0 4px 9px -6px rgba(20,45,90,.22);
  --g-pill-an:#ffffff;
}}
/* Blau: Startseite (eigene dunkle Bühne) */
html.glas{background:#7fa9d6}
.buehne,.studio-teil{background:radial-gradient(70% 55% at 20% 0%,rgba(255,255,255,.28),transparent 70%),linear-gradient(170deg,#9cc0e6 0%,#6d9bd0 40%,#4a7db6 75%,#3a6aa3 100%)!important}
.buehne .licht{background:radial-gradient(45% 40% at 50% 62%,rgba(255,255,255,calc(.22 - var(--p,0) * .12)),transparent 70%)!important}
.titel .eyebrow{color:rgba(255,255,255,.82)!important}
.titel h1{color:#fff;text-shadow:0 2px 30px rgba(20,45,90,.25)}
.scrolltipp{color:rgba(255,255,255,.8)!important}
.hell{background:#dfeaf6!important}
.buehne .widget{background:rgba(16,24,40,.62)!important;border-color:rgba(255,255,255,.18)!important;box-shadow:0 24px 50px -20px rgba(10,25,55,.55),inset 0 1px 0 rgba(255,255,255,.14)!important}
/* Lesbarkeit: helle Abschnitte erben die Glas-Tinte, damit Text in Hell und Dunkel lesbar bleibt */
.hell{--rr-tinte:var(--g-tinte);--rr-zweit:var(--g-zweit);color:var(--g-tinte)}
.hell :is(h1,h2,h3,.titel-l,blockquote){color:var(--g-tinte)}
.hell :is(.unter,.zweit,cite,.geraete-fuss div){color:var(--g-zweit)}
.hell .rr-link,.hell .eyebrow.orange{color:var(--g-akzent-text)}
/* Studio-Teil: tieferes Blau, damit weiße Schrift und graue Zeilen Kontrast haben */
.studio-teil{background:radial-gradient(70% 55% at 20% 0%,rgba(255,255,255,.2),transparent 70%),linear-gradient(170deg,#6a9ad0 0%,#4f82bd 45%,#3a6ca8 100%)!important}
.studio-teil :is(h2,.titel-l){color:#fff}
.studio-teil .unter{color:rgba(255,255,255,.86)!important}
.studio-teil .fakten{border-top-color:rgba(255,255,255,.28)!important}
.studio-teil .fakten div{color:rgba(255,255,255,.78)!important}
.studio-teil .fakten b{color:#fff!important}
.studio-teil .eyebrow{color:#ffb38a!important}
.studio-teil .rr-link{color:#ffb38a!important}
/* Fließende Übergänge: jeder Abschnitt beginnt mit der Farbe, mit der der vorige endet. Keine harten Kanten. */
.start-held{background:radial-gradient(70% 55% at 20% 0%,rgba(255,255,255,.28),transparent 70%),linear-gradient(180deg,#9cc0e6 0%,#6d9bd0 45%,#7aa6d8 75%,#b9d4ef 90%,#dfeaf6 100%)}
/* Bühne steht jetzt nach dem Studio: kommt aus dem hellen Blau und geht ins helle Blau */
.buehne{background:radial-gradient(60% 40% at 50% 55%,rgba(255,255,255,.22),transparent 70%),linear-gradient(180deg,#dfeaf6 0%,#a9c7e9 12%,#7aa6d8 35%,#5a8cc8 65%,#8fb5e0 88%,#dfeaf6 100%)!important}
.buehne .titel .eyebrow{color:var(--g-akzent-text)!important}
.buehne .titel h2{color:var(--g-tinte);text-shadow:none}
.buehne .titel h2 em{font-style:normal;color:#ff4d00}
.buehne .scrolltipp{color:var(--g-zweit)!important}
.geraete.hell{background:#dfeaf6!important}
.apps{background:radial-gradient(70% 40% at 18% 8%,rgba(255,255,255,.35),transparent 70%),linear-gradient(180deg,#dfeaf6 0%,#b9d4ef 14%,#8db4de 52%,#6a9ad0 100%)!important}
.studio-teil{background:linear-gradient(180deg,#6a9ad0 0%,#4f82bd 30%,#3a6ca8 62%,#5d8dc6 82%,#a9c7e9 93%,#dfeaf6 100%)!important}
.studio-teil::before{display:none}
.ueber.hell{background:linear-gradient(180deg,#dfeaf6 0%,#dfeaf6 70%,#f5f5f7 100%)!important}