/* buehne.css — Bildwelt, Tiefe und Bewegung.
   Das Design-System verlangt Reportage-Bildwelt mit Navy-Scrim und erlaubt genau
   eine bewusste Überlappung (Kennzahl-Karte am Hero, minus 26 px). Kein Parallax,
   kein Bounce, keine Rotation — Fades sind mit einer Bewegung gekoppelt, mehr nicht. */

/* ── Video-Hero ───────────────────────────────────────────────────────── */
.hero-video{
  position:relative; overflow:hidden; background:var(--cc-blue-950);
  min-height:min(86vh,760px); display:flex; align-items:flex-end;
}
.hero-video video,.hero-video .standbild{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
/* Navy-Scrim: auf Bildern liegt immer der Schutzverlauf, nie Text ohne Schutz */
.hero-video::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right,rgba(5,21,38,.95) 0%,rgba(5,21,38,.80) 44%,rgba(5,21,38,.26) 74%,rgba(5,21,38,.44) 100%),
    linear-gradient(to top,rgba(5,21,38,.85) 0%,rgba(5,21,38,.20) 42%,rgba(5,21,38,0) 100%);
}
.hero-video::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:var(--pattern-diagonal); opacity:.75;
}
.hero-video .wrap{
  position:relative; z-index:3; width:100%;
  padding-top:calc(var(--section-y) * 1.1); padding-bottom:calc(var(--section-y) * .7);
}
.hero-video h1{
  font-size:var(--text-display-xl); line-height:var(--lh-display-xl); letter-spacing:var(--ls-display-xl);
  color:var(--text-inverse); font-weight:var(--weight-black); max-width:16ch; margin-bottom:var(--space-6);
}
.hero-video .lead{
  font-size:var(--text-body-l); line-height:var(--lh-body-l);
  max-width:56ch; color:var(--text-inverse-muted);
}
.hero-video .cc-eyebrow{color:var(--cc-orange-400); display:block; margin-bottom:var(--space-4)}
.hero-video .hero-aktionen{margin-top:var(--space-10)}

/* Signatur: die Transfer-Schiene, 22 Grad nach vorn. Genau eine pro Ansicht. */
.hero-schiene{
  position:absolute; z-index:2; top:0; right:9%; width:3px; height:100%;
  background:linear-gradient(to bottom,rgba(244,123,32,0) 0%,rgba(244,123,32,.55) 22%,rgba(244,123,32,.55) 78%,rgba(244,123,32,0) 100%);
  transform:skewX(calc(var(--angle-transfer) * -1)); pointer-events:none;
}
.hero-schiene i{
  position:absolute; left:-4px; width:11px; height:11px; border-radius:50%;
  background:var(--cc-orange-400); box-shadow:0 0 20px 5px rgba(244,123,32,.55);
  animation:schiene 6s var(--ease-in-out) infinite;
}
@keyframes schiene{0%,100%{top:14%; opacity:.3} 50%{top:74%; opacity:1}}

/* Überlappende Kennzahlenleiste — die eine erlaubte Überlappung */
.hero-zahlen{position:relative; z-index:5; margin-top:-26px}
.hero-zahlen .innen{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); gap:1px;
  background:var(--border-subtle); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);
}
.hero-zahlen .z{background:var(--surface-card); padding:22px 24px}
.hero-zahlen .zv{
  font-family:var(--font-display); font-weight:var(--weight-bold); font-size:var(--text-metric);
  line-height:var(--lh-metric); letter-spacing:var(--ls-metric);
  font-variant-numeric:tabular-nums; color:var(--text-strong);
}
.hero-zahlen .zk{
  font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--text-muted); margin-top:8px;
}

/* ── Bildband über die volle Breite ───────────────────────────────────── */
.band{
  position:relative; overflow:hidden; background:var(--cc-blue-950);
  min-height:min(60vh,520px); display:flex; align-items:center;
}
.band img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
/* Zwei Ebenen Schutz: ein gerichteter Verlauf für die Textseite und ein
   flacher Grundschleier, damit auch helle Bildpartien den Text tragen. */
.band::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg,rgba(5,21,38,.97) 0%,rgba(5,21,38,.93) 34%,rgba(5,21,38,.62) 62%,rgba(5,21,38,.34) 100%),
    linear-gradient(rgba(5,21,38,.30),rgba(5,21,38,.30));
}
.band .wrap{position:relative; z-index:2; padding-top:var(--space-16); padding-bottom:var(--space-16)}
.band h2{
  color:var(--text-inverse); font-size:var(--text-display-l); line-height:var(--lh-display-l);
  letter-spacing:var(--ls-display-l); max-width:19ch;
}
.band .wrap > *{max-width:56ch}
.band p{
  color:var(--text-inverse-muted); font-size:var(--text-body-l); line-height:var(--lh-body-l);
  max-width:52ch; margin-top:var(--space-5);
}
.band .cc-eyebrow{color:var(--cc-orange-400); display:block; margin-bottom:var(--space-4)}
.band-zahlen{display:flex; gap:var(--space-12); flex-wrap:wrap; margin-top:var(--space-10)}
.band-zahlen div .v{
  font-family:var(--font-display); font-weight:var(--weight-bold); font-size:var(--text-metric);
  line-height:1; letter-spacing:var(--ls-metric); color:var(--text-inverse); font-variant-numeric:tabular-nums;
}
.band-zahlen div .k{
  font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--cc-orange-400); margin-top:8px;
}

/* ── Werkzeug-Kacheln mit Bühne ───────────────────────────────────────── */
.portfolio-gross{display:grid; grid-template-columns:repeat(auto-fit,minmax(430px,1fr)); gap:var(--gutter)}
.kachel-gross{
  display:flex; flex-direction:column; overflow:hidden; text-decoration:none;
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.kachel-gross:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--cc-blue-300)}
.kachel-buehne{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--gradient-hero); display:flex; align-items:center; justify-content:center;
}
.kachel-buehne::after{content:""; position:absolute; inset:0; background:var(--pattern-diagonal); opacity:.6}
.kachel-buehne img{width:100%; height:100%; object-fit:cover}
.kachel-marke{
  position:absolute; z-index:3; top:16px; left:16px;
  font-size:var(--text-micro); letter-spacing:var(--ls-micro); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--cc-orange-300);
  /* Deckend, damit die Marke auch auf hellen Fotos lesbar bleibt */
  background:rgba(5,21,38,.88); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-pill); padding:6px 13px;
  box-shadow:0 2px 8px rgba(5,21,38,.28);
}

/* Schematische Andeutung der Oberfläche — kein Screenshot, keine erfundenen Daten */
.mini{position:relative; z-index:2; width:76%; display:flex; flex-direction:column; gap:7px}
.mini .bar{height:9px; border-radius:var(--radius-pill); background:rgba(255,255,255,.16)}
.mini .bar.kurz{width:42%}
.mini .bar.mittel{width:66%}
.mini .bar.akzent{background:var(--cc-orange-500); width:32%}
.mini .reihe{display:flex; gap:7px; align-items:stretch}
.mini .box{
  flex:1; height:40px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.15);
}
.mini .box.akzent{background:rgba(244,123,32,.22); border-color:rgba(244,123,32,.48)}
.mini .box.schmal{flex:.45}
.mini .saeulen{display:flex; gap:7px; align-items:flex-end; height:64px}
.mini .saeulen span{flex:1; background:rgba(255,255,255,.14); border-radius:3px 3px 0 0}
.mini .saeulen span.akzent{background:var(--cc-orange-500)}

.kachel-text{padding:var(--pad-card); display:flex; flex-direction:column; gap:10px; flex:1}
.kachel-text .kname{
  font-family:var(--font-display); font-weight:var(--weight-bold); font-size:var(--text-h2);
  line-height:var(--lh-h2); letter-spacing:var(--ls-h2); color:var(--text-strong);
}
.kachel-text .ksub{margin-bottom:0}
.kachel-text .kdesc{font-size:var(--text-body-s); line-height:1.65; color:var(--text-body-color); flex:1}
.kachel-text .kgo{
  font-size:var(--text-body-s); font-weight:var(--weight-semibold); color:var(--text-link);
  display:inline-flex; align-items:center; gap:7px;
}
.kachel-gross:hover .kgo{color:var(--text-link-hover)}

/* ── Scroll-Reveal ──────────────────────────────────────────────────────
   Der Startzustand gilt nur, wenn JavaScript läuft (html.js wird im Kopf
   gesetzt). Ohne JavaScript ist die Seite vollständig sichtbar — ein
   Reveal darf niemals Inhalt verbergen. */
.js .auf{
  opacity:0; transform:translateY(20px);
  transition:opacity var(--dur-slow) var(--ease-entrance),transform var(--dur-slow) var(--ease-entrance);
}
.js .auf.da{opacity:1; transform:none}
.auf-1{transition-delay:70ms} .auf-2{transition-delay:140ms} .auf-3{transition-delay:210ms}
.auf-4{transition-delay:280ms} .auf-5{transition-delay:350ms} .auf-6{transition-delay:420ms}

/* ── Abschluss-Aufruf auf Navy ────────────────────────────────────────── */
.aufruf{
  position:relative; overflow:hidden; background:var(--gradient-hero);
  padding:var(--section-y) 0; text-align:center;
}
.aufruf::before{content:""; position:absolute; inset:0; background:var(--pattern-grid); opacity:.55}
.aufruf > *{position:relative; z-index:1}
.aufruf h2{
  color:var(--text-inverse); font-size:var(--text-display-l);
  line-height:var(--lh-display-l); letter-spacing:var(--ls-display-l);
}
.aufruf p{color:var(--text-inverse-muted); font-size:var(--text-body-l); max-width:54ch; margin:var(--space-5) auto var(--space-10)}

/* ── Bewegung abschaltbar ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .auf{opacity:1; transform:none}
  .hero-schiene i{animation:none; top:46%}
}

/* ── Mobil ────────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .hero-video{min-height:auto}
  .hero-video h1{font-size:clamp(32px,8vw,46px)}
  .hero-video::before{
    background:linear-gradient(to bottom,rgba(5,21,38,.70) 0%,rgba(5,21,38,.90) 58%,rgba(5,21,38,.96) 100%);
  }
  .hero-schiene{right:5%}
  .band{min-height:auto}
  .band-zahlen{gap:var(--space-8)}
  .portfolio-gross{grid-template-columns:1fr}
}
@media (max-width:520px){
  .hero-zahlen{margin-top:-18px}
  .hero-zahlen .innen{grid-template-columns:1fr 1fr}
  .kachel-text .kname{font-size:var(--text-h3)}
  .band-zahlen{gap:var(--space-6)}
}

/* ── Produktseiten-Kopf auf Bild ──────────────────────────────────────── */
.band-kopf{min-height:min(54vh,460px)}
.band-kopf h1{
  color:var(--text-inverse); font-size:var(--text-display-l); line-height:var(--lh-display-l);
  letter-spacing:var(--ls-display-l); margin-bottom:var(--space-4); max-width:20ch;
}
.band-kopf .lead{
  color:var(--text-inverse-muted); font-size:var(--text-body-l);
  line-height:var(--lh-body-l); max-width:58ch;
}
.band-kopf .cc-eyebrow{color:var(--cc-orange-400); display:block; margin-bottom:var(--space-3)}
.zurueck-hell{color:rgba(255,255,255,.62)}
.zurueck-hell:hover{color:var(--cc-orange-400)}
@media (max-width:860px){
  .band-kopf{min-height:auto}
  .band-kopf h1{font-size:clamp(28px,7vw,38px)}
}