/* ==========================================================================
   Schaufenster — ENTWURF 01.10.2026 (Branch entwurf-wow-2026-10)
   Daniel: "mehr Grafik und Animation, damit man sieht, der kann wirklich
   Webseiten bauen". Antwort: keine aufgelegte Deko (am 20.08. verworfen),
   sondern Daniels ECHTE Kundenseiten in Bewegung.
   1. Hero: drei Browserfenster mit echten Kundenseiten, räumlich gestaffelt,
      die Seiten scrollen darin langsam durch. Folgt leicht der Maus.
   2. Referenzen: jede Karte ist ein Browserfenster; Maus darauf = die ganze
      Seite läuft durch. Am Handy läuft sie einmal durch, sobald die Karte
      ins Bild kommt.
   3. H2 bauen sich Wort für Wort auf (nur mit html.anim, sonst sofort da).
   Nur transform/opacity. prefers-reduced-motion: alles steht still.
   ========================================================================== */

/* ---------- Browserfenster (gemeinsam für Hero + Referenzen) ---------- */
.sf-fenster{display:block;border-radius:14px;overflow:hidden;background:#0B0E11;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 80px -30px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.4)}
.sf-leiste{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#15191E;
  border-bottom:1px solid rgba(255,255,255,.08)}
.sf-leiste i{width:9px;height:9px;border-radius:50%;background:#2E343B;flex:0 0 auto}
.sf-leiste i:nth-child(1){background:#E2685C}.sf-leiste i:nth-child(2){background:#E0B34E}.sf-leiste i:nth-child(3){background:#5DBE6B}
.sf-leiste span{flex:1;margin-left:8px;height:18px;border-radius:999px;background:rgba(255,255,255,.06);
  font:500 10.5px/18px var(--ff-mono);color:#9AA4AD;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-blick{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#fff}
.sf-blick img{position:absolute;left:0;top:0;width:100%;height:auto;display:block;will-change:transform}

/* ---------- 1. Hero-Schaufenster ---------- */
.schaufenster{position:relative;margin:34px 0 -24px;height:250px;pointer-events:none}
.sf-tiefe{position:absolute;inset:0;perspective:1400px}
.sf-ebene{position:absolute;width:250px;transform-style:preserve-3d}
.sf-ebene .sf-fenster{transform:rotateY(var(--dreh,0deg)) rotateX(var(--kipp,0deg))}
.sf-ebene--1{left:50%;top:44px;margin-left:-125px;z-index:3}
.sf-ebene--2{left:0;top:0;z-index:2;--dreh:16deg;width:200px;opacity:.88}
.sf-ebene--3{right:0;top:12px;z-index:1;--dreh:-16deg;width:200px;opacity:.88}
@media(max-width:420px){.sf-ebene--2{left:-36px}.sf-ebene--3{right:-36px}}

@media(min-width:1100px){
  .hero__inhalt .container{position:relative}
  .schaufenster{position:absolute;margin:0;right:20px;top:50%;width:min(46%,560px);height:470px;
    transform:translateY(-50%);pointer-events:auto}
  .sf-tiefe{transform:translate3d(var(--mx,0px),var(--my,0px),0);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .sf-ebene{transform:rotateY(calc(var(--ry,0) * 1deg)) rotateX(calc(var(--rx,0) * 1deg));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .sf-ebene--1{left:auto;right:6%;top:118px;margin:0;width:66%;--dreh:-13deg;--kipp:4deg}
  .sf-ebene--2{left:0;top:6px;width:56%;--dreh:-13deg;--kipp:4deg;opacity:.8}
  .sf-ebene--3{right:-2%;top:0;width:44%;--dreh:-13deg;--kipp:4deg;opacity:.62}
  .hero__h1,.hero__sub{position:relative;z-index:2}
}

/* Bewegung nur, wenn erlaubt */
@media (prefers-reduced-motion:no-preference){
  .sf-auftritt{animation:sf-auf 1.1s cubic-bezier(.16,1,.3,1) both}
  .sf-ebene--3 .sf-auftritt{animation-delay:.35s}
  .sf-ebene--2 .sf-auftritt{animation-delay:.5s}
  .sf-ebene--1 .sf-auftritt{animation-delay:.65s}
  .sf-schwebe{animation:sf-schweben 7s ease-in-out infinite alternate}
  .sf-ebene--2 .sf-schwebe{animation-duration:8.5s;animation-delay:-3s}
  .sf-ebene--3 .sf-schwebe{animation-duration:9.5s;animation-delay:-6s}
  .schaufenster .sf-blick img{animation:sf-lauf 22s cubic-bezier(.45,0,.55,1) infinite alternate}
  .sf-ebene--2 .sf-blick img{animation-duration:27s;animation-delay:-9s}
  .sf-ebene--3 .sf-blick img{animation-duration:31s;animation-delay:-17s}
  .sf-pause .sf-schwebe,.sf-pause .sf-blick img{animation-play-state:paused}
}
@keyframes sf-auf{from{opacity:0;transform:translateY(46px) scale(.94)}to{opacity:1;transform:none}}
@keyframes sf-schweben{from{transform:translateY(0)}to{transform:translateY(-14px)}}
@keyframes sf-lauf{0%,10%{transform:translateY(0)}90%,100%{transform:translateY(-74%)}}

/* ---------- 2. Referenzen als Browserfenster ---------- */
#projekte .bildkarte .sf-fenster{border-radius:0;border:0;border-bottom:1px solid var(--rand);box-shadow:none}
#projekte .bildkarte .sf-blick img{transition:transform 1.4s cubic-bezier(.45,0,.55,1)}
#projekte .bildkarte:hover{transform:translateY(-6px)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  #projekte .bildkarte:hover .sf-blick img,
  #projekte .bildkarte:focus-visible .sf-blick img{transform:translateY(-78%);transition-duration:7s}
}
@media (hover:none) and (prefers-reduced-motion:no-preference){
  html.anim #projekte .bildkarte.ist-da .sf-blick img{animation:sf-ref 11s cubic-bezier(.45,0,.55,1) 1s 2 alternate both}
}
@keyframes sf-ref{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(-78%)}}
#projekte .sf-hinweis{display:flex;align-items:center;gap:8px;margin:-6px 0 22px;
  font:500 12.5px var(--ff-mono);color:var(--ink3)}
#projekte .sf-hinweis i{color:var(--tl)}

/* ---------- 3. Überschriften Wort für Wort ---------- */
.wortweise .wort{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.wortweise .wort>span{display:inline-block}
html.anim .wortweise{opacity:1;transform:none}
html.anim .wortweise .wort>span{transform:translateY(110%)}
html.anim .wortweise.ist-da .wort>span{transform:none;
  transition:transform .9s cubic-bezier(.16,1,.3,1) calc(var(--verzug,0ms) + var(--w) * 65ms)}
#projekte .sf-touch{display:none}
@media (hover:none){#projekte .sf-maus{display:none}#projekte .sf-touch{display:inline}}
@media (prefers-reduced-motion:reduce){#projekte .sf-hinweis{display:none}}

/* ---------- 4. Icons zeichnen sich selbst (01.10., Daniel: „das auch“) ----------
   Eigene Linien-Icons statt Phosphor-Schrift (eine Schrift kann man nicht zeichnen). Jeder Strich hat
   pathLength=1. Ohne JS / reduced-motion stehen sie fertig da; mit html.anim zeichnen sie sich EINMAL,
   sobald die Karte .ist-da bekommt (bewegung.js). */
.usp__icon .zi,.mini__icon .zi{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.zi path{stroke-dasharray:1 2;stroke-dashoffset:0}
html.anim :is(.karte,.usp):not(.ist-da) .zi path{stroke-dashoffset:1}
html.anim :is(.karte,.usp).ist-da .zi path{transition:stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) calc(var(--verzug,0ms) + .3s + var(--i) * .2s)}
html.anim .karte .mini__icon{transition:border-color .6s ease calc(var(--verzug,0ms) + 1.2s),background-color .6s ease calc(var(--verzug,0ms) + 1.2s)}
html.anim .karte:not(.ist-da) .mini__icon{border-color:var(--rand)}
.karte.ist-da .mini__icon,html:not(.anim) .mini__icon{border-color:rgba(77,197,227,.45);background:rgba(77,197,227,.07)}

/* ---------- 5. Prozess-Linie läuft beim Scrollen mit ----------
   Wächst nur, schrumpft nie (Hausregel: keine Rückwärts-Animation). JS misst Lage der Nummern und setzt
   --x/--oben/--hoehe; ohne JS bleibt die Linie unsichtbar und die Nummern sind normale Kreise. */
.prozess{position:relative}
.prozess__nr{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;padding:0;font-size:12.5px;
  border:1px solid rgba(77,197,227,.5);background:#0F1216;position:relative;z-index:1;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.prozess__nr.zl-an{background:var(--tl);color:var(--tl-ink);border-color:var(--tl);transform:scale(1.08)}
.prozess .prozess__schritt{backdrop-filter:none;-webkit-backdrop-filter:none}
.zl-spur{display:none;position:absolute;z-index:3;width:2px;margin-left:-1px;border-radius:2px;background:rgba(255,255,255,.12);pointer-events:none}
.prozess.zl-bereit .zl-spur{display:block}
.zl-linie{position:absolute;inset:0;border-radius:inherit;background:var(--tl);transform-origin:top;transform:scaleY(0);transition:transform .25s linear}

/* ==========================================================================
   Unterseiten (01.10.2026, Daniel: „damit die Leute wissen, was wichtig ist,
   was sie klicken sollen“)
   ========================================================================== */
/* ---------- 6. Haupt-Knöpfe rufen einmal ----------
   Jeder btn--primary im Inhalt (nicht Kopf, nicht Formular) bekommt beim ersten Hineinscrollen zwei
   Ring-Impulse (Umriss, kein Leuchten) und das Icon stupst kurz an. Läuft genau einmal; hängt NICHT an html.anim (buch/blog haben keine
   Scroll-Bewegung, dort nimmt bewegung.js die Klasse wieder weg), nur an reduced-motion. */
.btn-ruf{position:relative}
.btn-ruf::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:3px solid var(--tl);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .btn-ruf.ruf-an::after{animation:ruf-ring 1.3s cubic-bezier(.2,.8,.2,1) .35s 3}
  .btn-ruf.ruf-an{animation:ruf-hop .8s ease .35s 1}
  .btn-ruf.ruf-an>i:first-child{display:inline-block;animation:ruf-stups .9s cubic-bezier(.34,1.56,.64,1) .35s 2}
}
@keyframes ruf-ring{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.07,1.4)}}
@keyframes ruf-hop{0%,100%{scale:1}25%{scale:1.05}50%{scale:.98}70%{scale:1.02}}
@keyframes ruf-stups{0%,100%{transform:none}35%{transform:translateX(3px) rotate(-8deg) scale(1.15)}}

/* ---------- 7. Software-Screenshots als Browserfenster ---------- */
.fenster-rahmen{display:block;position:relative;border-radius:var(--r);overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0B0E11}
.fenster-rahmen>.sf-leiste{position:relative;z-index:1}
.fenster-rahmen>img{display:block;width:100%;height:auto}
.product__bild>.fenster-rahmen{margin:0}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .fenster-schwebt{transform:perspective(1400px) rotateY(-7deg) rotateX(2deg);box-shadow:0 40px 80px -30px rgba(0,0,0,.75);
    animation:fenster-schweben 7s ease-in-out infinite alternate}
}
@keyframes fenster-schweben{from{translate:0 0}to{translate:0 -12px}}
.fenster-rahmen>img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.fenster-rahmen:hover>img{transform:scale(1.02)}}