/* =============================================================
   Hero-Zylinder - 1:1 aus der bestehenden Website uebernommen.

   Die Regeln stammen unveraendert aus der alten index.html
   (Abschnitte "HERO", "OVERLAY CONTENT", "focus caption",
   "Zurueck-Button", "control hint + speed meter", "loader" und
   "HERO VISUAL ALIGNMENT"). Geaendert wurde nur:

   1. Die Variablen des alten :root liegen jetzt auf .hero, damit
      sie nicht mit dem Designsystem in site.css kollidieren.
   2. Generische Selektoren (h1) sind auf .hero eingegrenzt, damit
      sie nicht auf den Rest der Seite durchschlagen.
   3. Kopfzeile im Overlay entfaellt - die Seite hat jetzt einen
      durchgehenden Header. Buttons nutzen die Systemklassen.
   4. Hoehe um die Headerhoehe reduziert.

   Wird NACH site.css geladen.
   ============================================================= */

.hero{
  --bg: oklch(11% 0.010 45);
  --bg-deep: oklch(8% 0.008 45);
  --text: oklch(94% 0.005 80);
  --text-muted: oklch(66% 0.010 80);
  --accent: oklch(70% 0.19 62);
  --line: oklch(28% 0.012 48);
  --ease: cubic-bezier(0.22,1,0.36,1);
}

/* ---------- HERO ---------- */
.hero{
  position:relative;width:100%;
  height:calc(100svh - 4.75rem);min-height:34rem;
  overflow:hidden;
  /* var(--coal-deep) am Ende: ein echter background-color-Wert statt nur
     transparenter Gradient-Layer, damit Kontrastpruefungen etwas Reales
     zum Messen haben, auch bevor #stage fertig geladen hat/faehrt. */
  background:
    radial-gradient(900px 520px at 70% 34%, rgba(214,161,95,.12), transparent 58%),
    linear-gradient(180deg,#0c0a09 0%,#13100d 58%,#0c0a09 100%) var(--coal-deep,#0c0a09);
}
/* Der Zylinder sitzt mittig im Canvas. Indem das Canvas nach oben
   ueber den Hero hinausragt, wandert die Szenenmitte um die halbe
   Zugabe nach oben - ohne Eingriff in js/hero.bundled.js.
   height explizit, nicht auto: bei einem <canvas> loest auto ueber
   das intrinsische Seitenverhaeltnis auf, nicht ueber top/bottom. */
#stage{position:absolute;left:0;right:0;top:-6rem;width:100%;height:calc(100% + 6rem);display:block;
       z-index:1;opacity:0;transition:opacity 1.1s var(--ease);cursor:grab;touch-action:pan-y}
#stage.ready{opacity:1}
#stage.grabbing{cursor:grabbing}

.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(90deg, rgba(12,10,9,.82) 0%, rgba(12,10,9,.54) 34%, rgba(12,10,9,.08) 53%, transparent 70%),
    linear-gradient(180deg, rgba(12,10,9,.52) 0%, transparent 30%, rgba(12,10,9,.72) 100%);
}

/* ---------- OVERLAY CONTENT ---------- */
/* Inhalt vertikal zentriert. Vorher lag er per space-between am
   unteren Rand - das ergab oben eine tote Flaeche von ~350px und
   unten nur 11px Luft bis zur Hinweis-Pille. */
.overlay{position:absolute;inset:0;z-index:3;pointer-events:none;
         display:flex;flex-direction:column;justify-content:center;
         transition:opacity .5s var(--ease)}
.overlay.dim{opacity:0.12}

.headline{
  max-width:min(860px,calc(100vw - 40px));
  padding-left:clamp(22px,5vw,76px);
  padding-right:clamp(22px,4vw,56px);
  /* Im zentrierten Overlay hebt Bodenpolster den Inhalt ueber die
     Mitte - gewollt, der Hero soll oben ansetzen. */
  padding-bottom:clamp(40px,9vh,84px);
}
.hero h1{
  font-family:'Newsreader',Georgia,serif;
  font-weight:500;
  line-height:.93;
  font-size:clamp(44px,6.4vw,92px);
  letter-spacing:-.04em;
  text-wrap:balance;
  max-width:720px;
  color:oklch(94% 0.005 80);
  text-shadow:0 16px 60px rgba(0,0,0,.45);
}
.sub{
  font-family:'Source Sans 3',system-ui,sans-serif;
  color:#d8c8b7;
  font-size:clamp(15px,1.25vw,19px);
  line-height:1.42;
  max-width:580px;
  margin-top:14px;
}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px;pointer-events:auto}
/* ---------- focus caption (Vorher/Nachher) ---------- */
.caption{position:absolute;left:50%;bottom:70px;transform:translate(-50%,12px);
         z-index:4;text-align:center;pointer-events:none;opacity:0;
         transition:opacity .45s var(--ease),transform .45s var(--ease)}
.caption.show{opacity:1;transform:translate(-50%,0)}
.caption.single .cstate{display:none}
.caption .ctitle{font-family:'Newsreader',Georgia,serif;font-weight:500;
                 font-size:clamp(26px,3.4vw,40px);letter-spacing:-.04em;
                 line-height:1;color:#ece4d8}
.cstate{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:12px}
.cstate .lbl{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
             color:var(--text-muted);min-width:64px}
.cstate .lbl.before{text-align:right}
.cstate .lbl.on{color:#d6a15f}
.cbar{position:relative;width:160px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.cbar i{position:absolute;inset:0 auto 0 0;width:0%;background:#d6a15f;
        box-shadow:0 0 10px rgba(214,161,95,.72)}

/* ---------- Zurueck-Button (nur im Fokus) ---------- */
.backbtn{position:absolute;top:26px;right:clamp(22px,4vw,56px);z-index:6;
         font-family:'Source Sans 3',system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:0.06em;
         color:var(--text);background:rgba(12,10,9,.58);backdrop-filter:blur(8px);
         border:1px solid rgba(236,228,216,.24);padding:11px 18px;border-radius:999px;cursor:pointer;
         opacity:0;transform:translateY(-8px);pointer-events:none;
         transition:opacity .35s var(--ease),transform .35s var(--ease),border-color .2s,color .2s}
.backbtn.show{opacity:1;transform:translateY(0);pointer-events:auto}
.backbtn:hover{border-color:#d6a15f;color:#d6a15f}

/* ---------- control hint + speed meter ---------- */
/* "Animation ziehen - Projekt anklicken" ist eine Anleitung, kein Label
   (36 Zeichen, ganzer Satz mit Trenner) - DESIGN.mds Label-Only-Caps-
   Regel erlaubt Versalien fuer Pills/Labels, nicht fuer Fliesstext.
   Deshalb Normalschrift; die Pillenform (Hintergrund, Rand, Punkt)
   bleibt unveraendert. */
.hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
      z-index:4;display:flex;align-items:center;gap:16px;
      font-family:'Source Sans 3',system-ui,sans-serif;
      font-size:12.5px;letter-spacing:0.01em;
      color:#a99c8f;pointer-events:none;white-space:nowrap;
      background:rgba(12,10,9,.52);backdrop-filter:blur(8px);
      border:1px solid rgba(236,228,216,.18);padding:9px 18px;border-radius:999px;
      transition:opacity .4s var(--ease)}
.hint .dot{width:6px;height:6px;border-radius:50%;background:#d6a15f;
           box-shadow:0 0 10px rgba(214,161,95,.72)}
.meter{width:64px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;width:0%;background:#d6a15f;
         transition:width .12s linear;box-shadow:0 0 10px rgba(214,161,95,.72)}

/* ---------- loader ---------- */
.loader{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
        background:transparent;pointer-events:none;transition:opacity .6s var(--ease)}
.loader.gone{opacity:0;pointer-events:none}
.loader .ring{display:none}

/* ---------- Vergleichs-Karte (Drag-to-Reveal), nur Mobile ----------
   Der WebGL-Zylinder ist unter 860px kaum sichtbar (schmaler Streifen
   am Rand), laedt dort aber trotzdem die vollen ~472 KB JS. Darunter
   ersetzt diese Karte den Zylinder komplett; hero.bundled.js wird ab
   dieser Breite gar nicht erst geladen (siehe Ladelogik in index.html).
   Aufgebaut in assets/hero-compare.js, Bilder aus
   window.__HERO_PROJECTS__ - derselben Quelle wie der Zylinder. */
.hcompare{display:none}

/* ---------- Fokusmodus: angeklicktes Projekt liegt frei im Vordergrund ---------- */
body.hero-focus #stage{z-index:30!important;cursor:zoom-out}
body.hero-focus .hero::after{opacity:0!important}
/* Die Kopfzeile blieb hier frueher ausgeblendet. Darunter schien der
   helle Seitengrund durch, weil der Hero erst unter ihr beginnt - ueber
   dem herangezoomten Bild stand dadurch ein weisser Streifen. Sie bleibt
   jetzt stehen; die Kachel wird ohnehin in den Hero eingepasst und
   beginnt damit von selbst unterhalb der Kopfzeile.

   .caption und .backbtn gehoeren NICHT in dieses Hide-Set: js/hero.source.js
   setzt beim Fokussieren gezielt .show auf beide (captionEl.classList.add
   ('show'), backBtn.classList.add('show')), damit Projekttitel, Vorher/
   Nachher-Fortschritt und der Zurueck-Button gerade WAEHREND des Fokus
   sichtbar werden - das !important hier hat diese Absicht bisher komplett
   uebersteuert und den Nutzer ohne jede Rueckmeldung und ohne sichtbaren
   Ausstieg dagelassen (Kritik-Fund: Fokusmodus ohne Ausstieg). Ohne .show
   sind beide laut ihrer eigenen Basis-Regel ohnehin unsichtbar - dieses
   Set muss sie also nicht zusaetzlich verstecken. */
body.hero-focus .overlay,
body.hero-focus .hint{
  opacity:0!important;
  pointer-events:none!important;
  visibility:hidden!important;
}
/* #stage bekommt im Fokus z-index:30 (oben), .caption liegt normal auf 4
   und .backbtn auf 6 - beide lagen also, obwohl korrekt auf opacity:1
   geschaltet, unsichtbar UNTER dem herangezoomten Bild. Erst hier sichtbar
   und erst hier wirklich vorhanden: die eigentliche Ursache des "kein
   Ausstieg"-Befunds war nicht nur die Opacity, sondern die Stapelreihenfolge. */
body.hero-focus .caption{z-index:31}
body.hero-focus .backbtn{z-index:32}

/* Unter 860px ersetzt die Vergleichs-Karte den Zylinder vollstaendig:
   Zylinder-Chrome ausblenden, Hero von fester Bildschirmhoehe auf
   normalen Dokumentfluss umstellen (Kopf, dann Karte, dann naechster
   Abschnitt), Kopfzeile/feste Kontaktleiste bleiben ueber var(--kopf-h)
   beruecksichtigt. */
@media (max-width:53.75rem){
  .hero{
    height:auto;min-height:640px;overflow:visible;
    padding:calc(var(--kopf-h) + var(--s-6)) 0 var(--s-8);
    /* Reiner Verlauf statt Foto: der Hintergrund zeigte bisher dasselbe
       Sternenhimmel-Foto, das direkt darunter als erste Karte der
       Vergleichs-Kachel erscheint - fuer Besucher wirkte das wie ein
       doppelt vorhandenes Bild. Der Verlauf uebernimmt weiter die
       Foto-Betonung oben (Text muss tragen) und unten (blendet zur
       Karte ueber), zeigt dabei aber kein konkretes Projektfoto mehr. */
    background: linear-gradient(180deg, #171310 0%, #100d0b 46%, var(--coal-deep,#0c0a09) 100%);
  }
  #stage,.backbtn,.caption,.hint,.loader{display:none}
  .hero::after{display:none}
  .overlay{position:static;display:block;pointer-events:auto}
  .headline{max-width:none;padding-left:clamp(22px,6vw,32px);padding-right:clamp(22px,6vw,32px);padding-bottom:0}

  .hcompare{display:block;margin-top:var(--s-7);padding:0 clamp(22px,6vw,32px)}
  .hcompare__frame{
    position:relative;overflow:hidden;aspect-ratio:4/5;
    background:var(--coal-deep);touch-action:pan-y;cursor:ew-resize;
    --reveal:50%;
  }
  .hcompare__img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
  }
  .hcompare__img--before{clip-path:inset(0 calc(100% - var(--reveal)) 0 0)}
  .hcompare__handle{
    position:absolute;top:0;bottom:0;left:var(--reveal);transform:translateX(-50%);
    width:3px;background:var(--copper-warm);box-shadow:0 0 0 1px rgba(12,10,9,.4);
    pointer-events:none;
  }
  .hcompare__grip{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:44px;height:44px;border-radius:999px;
    background:var(--coal-deep);border:1.5px solid var(--copper-warm);color:var(--copper-warm);
    display:grid;place-items:center;box-shadow:0 3px 8px rgba(0,0,0,.4);
  }
  .hcompare__tag{
    position:absolute;bottom:var(--s-3);pointer-events:none;
    padding:.4375rem .8125rem;border-radius:999px;font-size:var(--t-xs);font-weight:800;
    background:rgba(13,10,8,.88);color:var(--chalk);
  }
  .hcompare__tag--before{left:var(--s-3)}
  .hcompare__tag--after{right:var(--s-3);background:var(--copper-warm);color:var(--coal)}

  .hcompare__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-4)}
  .hcompare__nav{
    display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:999px;
    background:transparent;border:1px solid var(--coal-line);color:var(--chalk-quiet);cursor:pointer;
    transition:border-color .2s var(--ease-out),color .2s var(--ease-out);
  }
  .hcompare__nav:hover{border-color:var(--copper-warm);color:var(--copper-warm)}
  .hcompare__title{
    flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-family:var(--ff-display);font-weight:500;font-size:var(--t-d4);
    color:var(--chalk);letter-spacing:-.02em;line-height:1.15;
  }
  .hcompare__dots{display:flex;justify-content:center;gap:var(--s-1);margin-top:var(--s-3)}
  .hcompare__dot{width:44px;height:32px;display:grid;place-items:center;background:transparent;border:none;cursor:pointer}
  .hcompare__dot::before{content:'';width:7px;height:7px;border-radius:999px;background:var(--coal-line);
                          transition:background .2s var(--ease-out),transform .2s var(--ease-out)}
  .hcompare__dot[aria-current="true"]::before{background:var(--copper-warm);transform:scale(1.3)}

  .hcompare__hint{
    display:flex;align-items:center;gap:10px;justify-content:center;margin-top:var(--s-2);
    font-size:var(--t-xs);letter-spacing:.04em;color:var(--chalk-quiet);transition:opacity .4s var(--ease)}
  .hcompare__hint.hide{opacity:0}
  .hcompare__hint .dot{width:6px;height:6px;border-radius:50%;background:var(--copper-warm);
                        box-shadow:0 0 10px rgba(200,144,79,.6)}

  .hcompare__grip{animation:hcompare-nudge 1.8s var(--ease) .8s 2}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(46px,14vw,72px)}
  .sub{font-size:17px}
}
@keyframes hcompare-nudge{
  0%,100%{transform:translate(-50%,-50%)}
  25%{transform:translate(calc(-50% - 10px),-50%)}
  75%{transform:translate(calc(-50% + 10px),-50%)}
}
@media (prefers-reduced-motion: reduce){
  #stage{transition:none}
  .caption,.backbtn,.hint,.loader,.overlay{transition:none}
  .hcompare__grip{animation:none}
  .hcompare__hint{transition:none}
}