/* =============================================================
   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;
  background:
    radial-gradient(900px 520px at 70% 34%, rgba(214,161,95,.12), transparent 58%),
    linear-gradient(180deg,#0c0a09 0%,#13100d 58%,#0c0a09 100%);
}
/* 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);
}
.kicker{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:'Source Sans 3',system-ui,sans-serif;
  color:#d6a15f;font-size:13px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:22px;
}
.kicker::before{content:'';width:48px;height:1px;background:#d6a15f;flex:none}

.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);
}
.hero h1 .hero-seo{
  display:block;
  font-family:'Source Sans 3',system-ui,sans-serif;
  font-size:clamp(16px,1.5vw,20px);
  font-weight:700;
  line-height:1.3;
  letter-spacing:0;
  color:#d6a15f;
  text-shadow:none;
  margin-top:18px;
}
.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 ---------- */
.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:12px;letter-spacing:0.14em;text-transform:uppercase;
      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}

/* ---------- 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. */
body.hero-focus .overlay,
body.hero-focus .caption,
body.hero-focus .hint,
body.hero-focus .backbtn{
  opacity:0!important;
  pointer-events:none!important;
  visibility:hidden!important;
}
/* Wie im Original: im Fokus liegt nur das Projekt frei. Zurueck geht
   per Klick auf die Buehne (cursor:zoom-out) oder mit Escape - beides
   haengt in js/hero.source.js. */

/* Unter 860px blendet site.css die feste Kontaktleiste ein (60px plus
   Trennlinie). Der Hero wird um Header und Leiste gekuerzt, sonst
   verschwindet die Hinweis-Pille hinter "Anrufen / WhatsApp". */
@media (max-width:53.75rem){
  .hero{height:calc(100svh - 4.25rem - 4.625rem);min-height:30rem}
  /* Kuerzerer Hero: derselbe Versatz waere anteilig doppelt so
     stark wie auf Desktop, deshalb halbiert. */
  #stage{top:-3rem;height:calc(100% + 3rem)}
}
@media (max-width:640px){
  .headline{padding-bottom:104px}
  .cbar{width:120px}
  .hero h1{font-size:clamp(46px,14vw,72px)}
  .sub{font-size:17px}
  .hint{max-width:calc(100vw - 28px);font-size:10px;gap:10px;padding:9px 14px}
}
@media (prefers-reduced-motion: reduce){
  #stage{transition:none}
  .caption,.backbtn,.hint,.loader,.overlay{transition:none}
}