/* Mumfiimedia · Theme „Black“
   Liegt über style.css. Zurück zur hellen Version: in index.html die Zeile mit theme-dark.css
   und die Klasse "theme-dark" am <body> entfernen (Backup: _backup/website_hell_2026-10-18_v5). */

:root{
  --paper:#050506;
  --mist:#0C0C0E;
  --stone:#6E6D68;
  --graphite:#A3A29D;
  --ink:#ECEBE8;
  --line:rgba(255,255,255,.09);
  color-scheme:dark;
}
body{background:var(--paper);color:var(--ink)}

/* Header: immer dunkles Glas */
.site-header.scrolled{background:rgba(5,5,6,.6);box-shadow:0 1px 0 var(--line)}
.mobile-nav{background:rgba(5,5,6,.92)}
.header-actions .pill.glass,.site-header .pill.glass{color:var(--ink);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.menu-btn i{background:var(--ink)}

/* Glas auf Schwarz */
.glass,.glass.light{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px -30px rgba(0,0,0,.9)}
.pill.glass:hover,.pill.glass.light:hover{background:rgba(255,255,255,.14)}
.pill,.btn{color:var(--ink)}
.pill.solid{background:var(--ink);color:#050506}
.pill.solid:hover{background:#fff}

/* Flächen */
.case{background:#08080A}
.contact{background:linear-gradient(180deg,var(--paper),#0B0B0D)}
.pkg{border-top-color:rgba(255,255,255,.5);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0))}
.work-media{background:#0C0C0E}
.process,.faq{background:var(--paper)}
.proof{border-color:var(--line)}

/* Formular */
.field input,.field textarea,.field select{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{background:rgba(255,255,255,.08)}
.field select option{background:#0C0C0E}

/* Tracker-Boxen in Bildern */
.trk{border-color:rgba(255,255,255,.45);--c:#ECEBE8}

/* Statement-Glas */
.statement-glass .title{color:var(--ink)}

/* Nahtlos: keine sichtbaren Sections. Alle Flächen transparent, Übergänge über Verläufe,
   durchgehende Glows hinter der ganzen Seite. */
main{position:relative;isolation:isolate}
main::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 900px at 8% 1500px,rgba(255,102,0,.10),transparent 70%),
    radial-gradient(45% 1100px at 96% 2700px,rgba(255,140,40,.08),transparent 70%),
    radial-gradient(38% 900px at 0% 4000px,rgba(255,102,0,.07),transparent 70%),
    radial-gradient(50% 1200px at 100% 5300px,rgba(255,120,30,.08),transparent 70%),
    radial-gradient(40% 1000px at 20% 6600px,rgba(255,102,0,.07),transparent 70%),
    radial-gradient(60% 900px at 60% 100%,rgba(255,102,0,.09),transparent 70%)}
.proof,.section,.process,.faq,.contact{background:transparent!important;border:0!important}
.site-footer{border-top:0;background:transparent}

/* Hero läuft unten weich ins Seitenschwarz aus */
.hero-dark{background:transparent}
.hero-dark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--paper) 92%)}
.hero-dark .hero-copy,.hero-dark .hero-tc{z-index:1}
.hero-dark .hero-media{background:transparent}

/* Trennlinien laufen aus statt hart zu enden */
.slug{border-bottom:0;position:relative}
.slug::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 60%,transparent)}
.proc-steps,.proc-steps li,.facts,.facts div,.direct,.direct li{border-color:rgba(255,255,255,.06)}

/* Abstand zwischen den Blöcken etwas enger, damit es als ein Fluss wirkt */
/* Abstand der Sections steht jetzt zentral in style.css */
.proof-inner{padding-block:clamp(20px,3vw,40px)}