/* ------------------------------------------------------------------
   Zweistufige Fassung: dunkle Buehne, helle Arbeitsflaechen.

   Das Dunkel bleibt, wo die Seite vorfuehrt – Kopfbereich, Bildbaender,
   Zahlen, Stimmen, Kontakt. Hell wird, wo der Besucher arbeitet und
   prueft: Zonenvergleich, Ablauf, Kalkulator, Betreuung, Unterlagen, FAQ.

   Gearbeitet wird ueber die Token, nicht ueber einzelne Bauteile: auf den
   hellen Abschnitten werden dieselben Namen neu belegt, die die dunkle
   Fassung setzt. Alles darin folgt dann von selbst – auch `--gold-ink`,
   das die Grundgestaltung ohnehin schon als dunkles Gold fuer helle
   Gruende kennt. Nur die fest eingetragenen Weisswerte muessen von Hand
   gespiegelt werden.

   Wird nur auf Seiten geladen, die <body class="sgf-hell"> tragen.
------------------------------------------------------------------ */

body.sgf-hell {
  --papier:#F4F1EB;          /* warmes Off-White, kein kaltes Grau */
  --tinte:#1A1814;           /* warmes Fast-Schwarz */
  --blende:clamp(190px,26vw,360px);  /* Laenge des Verlaufs, auch auf dem Handy nicht zu kurz */
}

/* ---- Der helle Block: Token neu belegen ---- */
body.sgf-hell #zonen,
body.sgf-hell #ablauf,
body.sgf-hell #preise,
body.sgf-hell #betreuung,
body.sgf-hell .g-betreuung,
body.sgf-hell #unterlagen,
body.sgf-hell #faq {
  color-scheme:light;
  --sky:var(--papier); --sky-2:#EFEBE3; --sky-3:var(--papier);
  --ink:var(--tinte);
  --ink-70:rgba(26,24,20,.78);
  --ink-50:rgba(26,24,20,.56);
  --ink-25:rgba(26,24,20,.28);
  --line:rgba(26,24,20,.15);
  --gold:#B08A34;            /* als Linie */
  --gold-2:#8A671C;
  --gold-ink:#7A5A25;        /* als Schrift – 5,3:1 auf Papier */
  --paper:transparent;
  --paper-2:rgba(26,24,20,.035);
  background:var(--papier);
  color:var(--ink);
}

/* ---- Der Uebergang ----
   Keine Kante, sondern ein langer Verlauf. Er sitzt als eigene Ebene hinter
   dem Abschnitt – und zwar vollstaendig innerhalb davon. Dafuer bekommt der
   Abschnitt zusaetzliches Polster, sodass die Blende ganz im Leerraum liegt:
   weder verdeckt sie den Text des dunklen Abschnitts darueber (was auf dem
   Handy passierte, wo die Abstaende enger sind), noch steht eigener Text auf
   halbdunklem Grund.

   Die Stufen sind bewusst ungleich verteilt. Ein linearer Verlauf von Schwarz
   auf Creme hellt am Anfang viel zu schnell auf und wirkt dadurch wie eine
   Kante mit Unschaerfe. Diese Rampe bleibt lange dunkel und oeffnet sich erst
   im letzten Drittel. */
body.sgf-hell #zonen,
body.sgf-hell #faq{background:var(--papier);position:relative;isolation:isolate;border:0}
body.sgf-hell #zonen{padding-top:calc(var(--luft) + var(--blende) * .5)}
body.sgf-hell #faq{padding-bottom:calc(var(--luft) + var(--blende) * .5)}
body.sgf-hell #zonen::before,
body.sgf-hell #faq::after{
  content:'';position:absolute;left:0;right:0;z-index:-1;pointer-events:none;
  height:var(--blende)}
body.sgf-hell #zonen::before{
  top:0;
  background:linear-gradient(180deg,
    #050505 0%, #090808 12%, #100E0C 24%, #1B1815 36%, #2C2822 47%,
    #454038 58%, #645E55 68%, #8A847B 77%, #AFA9A0 85%, #CFCAC2 92%,
    #E8E4DD 97%, var(--papier) 100%)}
body.sgf-hell #faq::after{
  bottom:0;
  background:linear-gradient(0deg,
    #050505 0%, #090808 12%, #100E0C 24%, #1B1815 36%, #2C2822 47%,
    #454038 58%, #645E55 68%, #8A847B 77%, #AFA9A0 85%, #CFCAC2 92%,
    #E8E4DD 97%, var(--papier) 100%)}

/* ---- Fest eingetragene Weisswerte der dunklen Fassung, hier gespiegelt ---- */

/* Augenbraue: rgba(255,255,255,.52) */
body.sgf-hell #zonen .eyebrow, body.sgf-hell #ablauf .eyebrow,
body.sgf-hell #preise .eyebrow, body.sgf-hell #betreuung .eyebrow,
body.sgf-hell .g-betreuung .eyebrow, body.sgf-hell #unterlagen .eyebrow,
body.sgf-hell #faq .eyebrow{color:rgba(26,24,20,.58)}

/* Haarlinien: ueberall rgba(255,255,255,.10) */
body.sgf-hell .stat, body.sgf-hell .steps li, body.sgf-hell .checklist li,
body.sgf-hell .pkg, body.sgf-hell .opt-row, body.sgf-hell .offer-list,
body.sgf-hell .care-table th, body.sgf-hell .care-table td{border-top-color:rgba(26,24,20,.13)}
body.sgf-hell .faq details, body.sgf-hell .offer-list li{border-bottom-color:rgba(26,24,20,.13)}
body.sgf-hell .pkg:hover{border-top-color:rgba(26,24,20,.42)}
body.sgf-hell #zonen-tabelle tbody td{border-bottom-color:rgba(26,24,20,.12)}

/* Flaechen: aus weissem Hauch wird tintiger Hauch */
body.sgf-hell .calc-step, body.sgf-hell .offer, body.sgf-hell .summary,
body.sgf-hell .xp, body.sgf-hell .xp-col{background:rgba(26,24,20,.035);
  border:1px solid var(--line);box-shadow:none}
body.sgf-hell .tags li{background:rgba(26,24,20,.05);border-color:var(--line)}
body.sgf-hell .care-opt{background:rgba(26,24,20,.03)}
body.sgf-hell .care-opt[aria-checked="true"]{background:rgba(26,24,20,.08);
  border-color:rgba(26,24,20,.45)}

/* Bedienelemente */
body.sgf-hell .seg{background:rgba(26,24,20,.06)}
body.sgf-hell .seg button{color:var(--ink-70)}
body.sgf-hell .seg button[aria-checked="true"]{background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(26,24,20,.14)}
body.sgf-hell .qty{background:rgba(26,24,20,.06)}
body.sgf-hell .qty button{background:rgba(26,24,20,.10);color:var(--ink)}
body.sgf-hell .qty button:hover{background:rgba(26,24,20,.22)}
body.sgf-hell .offer-list li .ol-x:hover{background:rgba(26,24,20,.14);color:var(--ink)}

/* Eingabefelder: hier lohnt echtes Weiss – es sagt „hier schreibt man hinein".
   Schalter und Auswahlknoepfe sind ausgenommen, sonst verschwinden sie. */
body.sgf-hell #preise input:not([type=checkbox]):not([type=radio]),
body.sgf-hell #preise select,
body.sgf-hell #preise textarea{background:#fff;color:var(--ink);
  border:1px solid rgba(26,24,20,.22)}
body.sgf-hell #preise input::placeholder,
body.sgf-hell #preise textarea::placeholder{color:rgba(26,24,20,.42)}
body.sgf-hell .toggle input{background:rgba(26,24,20,.22)}
body.sgf-hell .toggle input:checked{background:var(--tinte)}

/* Knoepfe: heller Grund braucht eine dunkle Kontur statt einer weissen */
body.sgf-hell #zonen .pill, body.sgf-hell #ablauf .pill, body.sgf-hell #preise .pill,
body.sgf-hell #betreuung .pill, body.sgf-hell .g-betreuung .pill,
body.sgf-hell #unterlagen .pill, body.sgf-hell #faq .pill{
  border:1px solid rgba(26,24,20,.28);background:rgba(26,24,20,.04);color:var(--ink)}
body.sgf-hell #zonen .pill:hover, body.sgf-hell #ablauf .pill:hover,
body.sgf-hell #preise .pill:hover, body.sgf-hell #betreuung .pill:hover,
body.sgf-hell .g-betreuung .pill:hover, body.sgf-hell #unterlagen .pill:hover,
body.sgf-hell #faq .pill:hover{background:rgba(26,24,20,.10);
  border-color:rgba(26,24,20,.55);color:var(--ink)}
body.sgf-hell #preise .pill-gold, body.sgf-hell #preise .pill-ink,
body.sgf-hell .g-betreuung .pill-gold{border-color:var(--gold-ink);
  color:var(--gold-ink);background:transparent}
body.sgf-hell #preise .pill-gold:hover, body.sgf-hell #preise .pill-ink:hover,
body.sgf-hell .g-betreuung .pill-gold:hover{background:rgba(122,90,37,.09);
  color:var(--gold-ink)}

/* Der WhatsApp-Knopf schwebt ueber beiden Welten: auf hellem Grund wird die
   weisse Glasfassung unsichtbar, also hier ein fester dunkler Knopf. */
body.sgf-hell .wa-btn{background:rgba(20,18,14,.90);color:#fff;
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px)}
body.sgf-hell .wa-btn:hover{background:rgba(20,18,14,1)}

/* Die Navigation schwebt ueber beiden Welten. Ihr Glas ist auf Dunkel gerechnet
   (42 % Schwarz) – ueber dem hellen Block wird daraus ein helles Grau, auf dem
   die weisse Schrift verschwindet. Auf dieser Fassung deshalb ein festeres Glas,
   das ueber Bild wie ueber Papier traegt. */
body.sgf-hell .nav{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),rgba(10,9,8,.86);
  border-bottom-color:rgba(255,255,255,.10)}
body.sgf-hell .menu{background:rgba(10,9,8,.96)}