/* ============================================================
   SEKTIONS-SYSTEM · Werte 1:1 aus index.html übernommen
   - Dunkel (Marken-Sektion): wie .hero  → oranger Eck-Glow + dunkle
     Diagonale + feines Linienraster. Glow-Ecke wandert per Klasse.
   - Creme (Lese-Sektion): wie .proof    → warmer Übergang an der
     Oberkante + dezenter BLAUER Glow, der von oben einfließt.
   KEIN neues Design. Nur die bestehenden Rezepte als Klassen.
   ============================================================ */

/* overflow: clip statt hidden (Inhaber-Entscheid 28.07., Desktop-Fix) —
   FEHLERFUND vom /insider-Mobilbau: eine hidden-Box ist trotzdem ein
   Scroll-Container. Ein Fragment-Link auf einen Anker IN der Sektion
   (z. B. /insider.html#making von /method aus) scrollte dann INNERHALB
   der Sektion (die Glow-Ebene liefert den Spielraum) und schob den
   Inhalt sichtbar hoch. clip clippt identisch, ist aber unscrollbar.
   hidden davor bleibt als Rueckfalllinie fuer alte Browser (kennt ein
   Browser clip nicht, gilt weiter hidden — nie visible). */
.section{ position:relative; isolation:isolate; overflow:hidden; overflow:clip; }
.section > .container{ position:relative; z-index:1; }

/* ---------- DUNKEL (Marken-Sektion) — exakt wie .hero ---------- */
.section--dark{
  color:#fff;
  background:
    radial-gradient(circle at var(--glow-x,2%) var(--glow-y,3%),
      rgba(227,130,50,0.32), rgba(227,130,50,0.08) 14%, rgba(227,130,50,0.00) 24%),
    linear-gradient(135deg, #1a3050 0%, #13283F 30%, #0f1f30 100%);
}
/* feines Linienraster — exakt wie .hero::after */
.section--dark::after{
  content:""; position:absolute; inset:-10%; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.016) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.010) 0 1px, transparent 1px 28px);
  opacity:.12; mix-blend-mode:soft-light;
}
/* Eck-Glow wandert (Positionen + Stärken aus index.html) */
.section--dark.glow-tl{ --glow-x:2%;  --glow-y:3%;  }   /* Hero  (0.32) */
.section--dark.glow-tr{ --glow-x:98%; --glow-y:3%;  }
.section--dark.glow-bl{ --glow-x:2%;  --glow-y:97%; }   /* Book */
.section--dark.glow-br{ --glow-x:98%; --glow-y:97%; }   /* App  */

/* ---------- CREME (Lese-Sektion) — exakt wie .proof ---------- */
.section--cream{
  color:#13283F;
  background:#F8F6F1;            /* --surface-warm */
}
/* warmer Übergang an der Oberkante (Dunkel→Creme weich) — wie .proof::before */
.section--cream::before{
  content:""; position:absolute; top:-34px; left:0; right:0; height:72px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(190,176,148,0.20) 0%, rgba(248,246,241,0.94) 72%, rgba(248,246,241,0.00) 100%);
}
/* dezenter BLAUER Glow, fließt von oben ein — wie .proof::after */
.section--cream::after{
  content:""; position:absolute; left:-180px; top:-26px; width:700px; height:470px; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 34% 18%, rgba(55,104,156,0.18), rgba(55,104,156,0.08) 30%, rgba(55,104,156,0.00) 72%);
  filter:blur(18px); opacity:.95;
}