/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --canvas:#0B1017;
  --canvas-deep:#070B10;
  --panel:#131A24;
  --panel-hi:#18212D;
  --accent:#5EA2F1;
  --accent-hover:#8CC0F8;
  --accent-muted:#22405F;
  --line:#1E2836;
  --line-strong:#33445A;
  --text-primary:#E9EFF7;
  --text-secondary:#96A6BA;

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Newsreader",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --tshadow:0 1px 2px rgba(4,7,12,.95),0 3px 12px rgba(4,7,12,.8),0 10px 44px rgba(4,7,12,.82);
  --gut:clamp(20px,5vw,80px);
}

*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:clamp(16px,1.05vw,18px);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  opacity:0;transition:opacity .8s var(--ease);
}
body.lit{opacity:1}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.022em;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--accent-muted);color:#fff}

.kicker{
  font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 18px
}
.lede{font-size:1.14rem;color:var(--text-secondary);max-width:56ch}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#08111C;
  padding:12px 20px;border-radius:0 0 10px 0;font-family:var(--mono);font-size:.8rem
}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ============================================================
   2. THE ENVIRONMENT LAYER (one place, not stacked sections)
   ============================================================ */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env::before{
  content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(ellipse 55% 45% at 22% 18%,rgba(94,162,241,.10),transparent 62%),
    radial-gradient(ellipse 50% 50% at 82% 74%,rgba(60,112,170,.09),transparent 64%);
  animation:envdrift 96s var(--ease-soft) -22s infinite alternate
}
.env::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(190,210,235,.055) .6px,transparent .7px);
  background-size:3px 3px
}
@keyframes envdrift{
  0%{transform:translate3d(-2.5%,-1.5%,0) scale(1)}
  100%{transform:translate3d(2.5%,2%,0) scale(1.08)}
}
.motes{position:absolute;inset:0}
.mote{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:rgba(150,190,240,.5);animation:moteup linear infinite
}
@keyframes moteup{
  0%{transform:translateY(0);opacity:0}
  12%{opacity:.55}
  88%{opacity:.4}
  100%{transform:translateY(-115vh);opacity:0}
}

/* ============================================================
   3. NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:28px;
  padding:16px var(--gut);
  transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent
}
.nav.solid{background:rgba(9,13,19,.78);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand svg{flex:none}
.brand b{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em}
/* Bildmarke im Kopf. Die Höhe steuert alles, die Breite folgt dem Seitenverhältnis. */
.nav .brand img{height:38px;width:auto;display:block}
@media (max-width:600px){.nav .brand img{height:31px}}
.navlinks{display:flex;gap:26px;align-items:baseline}
.navlinks a{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;color:var(--text-secondary);
  text-decoration:none;position:relative;padding-bottom:3px;transition:color .35s var(--ease)
}
.navlinks a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);
  transition:right .4s var(--ease)
}
.navlinks a:hover{color:var(--text-primary)}
/* Solange die Leiste durchsichtig ist, liegt sie über dem Filmbild. */
.nav:not(.solid) .navlinks a{color:#C6D3E4;text-shadow:0 1px 3px rgba(4,7,12,.95),0 2px 14px rgba(4,7,12,.8)}
.nav:not(.solid) .brand b{text-shadow:0 1px 3px rgba(4,7,12,.95),0 2px 14px rgba(4,7,12,.8)}
.navlinks a:hover::after{right:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;
  padding:11px 20px;border-radius:999px;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)
}
.btn-p{background:var(--accent);color:#08111C;font-weight:500}
.btn-p:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-g{border-color:var(--line-strong);color:var(--text-primary)}
.btn-g:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ============================================================
   4. HERO, THE SCRUB STAGE
   ============================================================ */
.hero{position:relative;height:560vh;z-index:1}
.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--canvas-deep)
}
/* Bühne ohne Filmmaterial: eine gestaltete Fläche, kein leerer Kasten. */
.stage.no-media{
  background:#000
}
.stage.no-media .band::before{opacity:calc(.06 + .14*var(--k,1))}
.stage.no-media .scrim,.stage.no-media .vig{opacity:.45}
.stage.has-grid.no-media{background:linear-gradient(168deg,#111A28 0%,#070B10 58%,#0A1119 100%)}
.stage.has-grid .scrim,.stage.has-grid .vig{opacity:1}

.hero-grid{
  position:absolute;top:clamp(90px,13vh,150px);bottom:clamp(90px,13vh,150px);left:0;right:clamp(16px,3vw,48px);
  overflow:hidden
}
.hero-grid .track{
  display:flex;flex-direction:column;gap:clamp(6px,1vw,12px);height:200%;
  animation:heroGridScroll 34s linear infinite
}
.hero-grid .row{display:flex;gap:clamp(6px,1vw,12px);flex:1;min-height:0}
.hero-grid .gt{
  position:relative;overflow:hidden;flex:1;border-radius:10px;
  border:1px solid rgba(148,180,220,.2);
  box-shadow:0 18px 40px -14px rgba(2,4,8,.85),0 0 0 1px rgba(2,4,8,.4)
}
.hero-grid .gt.w2{flex:2}
.hero-grid .gt img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.25) saturate(.7) brightness(.6) contrast(1.05)
}
.hero-grid::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(6,9,14,.4)
}
@keyframes heroGridScroll{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media (max-width:900px){.hero-grid{left:0}}
@media (prefers-reduced-motion:reduce){.hero-grid .track{animation:none}}
/* .hero-panel (Apex-Studio-Mockup-Vorlage) geparkt, siehe Kommentar im Markup oben.
.hero-panel{
  position:absolute;top:clamp(90px,13vh,150px);bottom:clamp(90px,13vh,150px);left:58%;right:clamp(16px,3vw,48px);
  border-radius:14px;overflow:hidden;
  border:1px solid rgba(148,180,220,.2);
  box-shadow:0 24px 60px -18px rgba(2,4,8,.85),0 0 0 1px rgba(2,4,8,.4)
}
.hero-panel img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
@media (max-width:900px){.hero-panel{left:0}}
*/
.poster{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity 1.1s var(--ease)
}
.stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s var(--ease);transform:translateZ(0)
}
.stage.video-ready video{opacity:1}
.stage.video-ready .poster{opacity:0}
.stage.video-failed video{display:none}

.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 92% at 50% 46%,rgba(7,10,16,0) 33%,rgba(7,10,16,.66) 100%)
}
.vig{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,10,16,.9) 0%,rgba(7,10,16,.5) 12%,rgba(7,10,16,0) 27%,rgba(7,10,16,0) 74%,rgba(7,10,16,.62) 100%)
}

/* --- caption bands --- */
.band{
  position:absolute;inset:0;display:flex;align-items:center;
  padding:0 var(--gut);pointer-events:none;opacity:0;
  text-shadow:var(--tshadow)
}
.band::before{
  content:"";position:absolute;inset:-6%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 62% 58% at 26% 50%,rgba(4,6,11,.70) 0%,rgba(4,6,11,.46) 46%,rgba(4,6,11,0) 76%)
}
.band .inner{position:relative;max-width:min(46ch,52vw)}
.stage.has-grid .band .inner{max-width:min(42ch,36vw)}
@media (max-width:900px){.stage.has-grid .band .inner{max-width:min(46ch,52vw)}}
.band .line{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.1rem,5.1vw,4.4rem);line-height:1.03;letter-spacing:-.028em;
  margin:0
}
.band .w{display:inline-block;white-space:pre}
.band .c{display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* entrance: drift down */
.band[data-entrance="drift"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px))
}
/* entrance: halves parting */
.band[data-entrance="halves"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)))
}
/* entrance: blur to sharp */
.band[data-entrance="blur"] .stack{position:relative}
.band[data-entrance="blur"] .soft{
  position:absolute;inset:0;filter:blur(11px);
  opacity:calc(1 - clamp(0,var(--k,0)*1.15,1))
}
.band[data-entrance="blur"] .sharp{opacity:clamp(0,var(--k,0)*1.15,1)}
/* entrance: staged settle */
.band[data-entrance="settle"]{align-items:center}
.band[data-entrance="settle"] .inner{max-width:min(58ch,64vw)}
.stage.has-grid .band[data-entrance="settle"] .inner{max-width:min(44ch,37vw)}
@media (max-width:900px){.stage.has-grid .band[data-entrance="settle"] .inner{max-width:min(58ch,64vw)}}
.band[data-entrance="settle"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 22px))
}
.band[data-entrance="settle"] .sub{
  --ks:clamp(0,(var(--k,0) - .58)*3.4,1);
  opacity:var(--ks);transform:translateY(calc((1 - var(--ks)) * 14px));
  margin-top:22px;font-size:1.1rem;color:#C7D4E4;max-width:48ch
}
.band[data-entrance="settle"] .row{
  --kb:clamp(0,(var(--k,0) - .74)*4.6,1);
  opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 12px));
  display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;pointer-events:auto
}
.band[data-entrance="settle"] .kicker{
  --kk:clamp(0,var(--k,0)*3,1);opacity:var(--kk)
}
.band .btn{text-shadow:none}

.hero-shade{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 78% 62% at 50% 44%,rgba(4,6,11,.60) 0%,rgba(4,6,11,.34) 52%,rgba(4,6,11,0) 78%);
  transition:opacity .5s linear
}

/* --- loading ring + scroll cue --- */
.hud{
  position:absolute;left:0;right:0;bottom:26px;display:flex;justify-content:center;
  align-items:center;gap:12px;pointer-events:none
}
.ring{width:34px;height:34px;color:var(--accent);opacity:.85;transition:opacity .6s var(--ease)}
.ring.done{opacity:0}
.cue{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:#BACBE0;background:rgba(7,10,16,.55);border:1px solid rgba(96,120,155,.3);
  border-radius:999px;padding:7px 14px;backdrop-filter:blur(10px);
  text-shadow:0 1px 3px rgba(4,6,11,.85)
}
.cue svg{animation:nudge 3.2s var(--ease-soft) -.8s infinite}
@keyframes nudge{0%,72%,100%{transform:translateY(0);opacity:.75}84%{transform:translateY(4px);opacity:1}}
@media (max-height:560px){.hud{display:none}}

/* --- static hero (phones, reduced motion) --- */
.hero.static{height:100vh}
.hero.static .stage{height:100vh}
.hero.static .band:not([data-entrance="settle"]){display:none}
.hero.static .band[data-entrance="settle"]{opacity:1}
.hero.static .band[data-entrance="settle"] .w,
.hero.static .band[data-entrance="settle"] .sub,
.hero.static .band[data-entrance="settle"] .row,
.hero.static .band[data-entrance="settle"] .kicker{opacity:1;transform:none}
.hero.static .band::before{opacity:.35}
/* Standbild-Kopf: der Verlauf legt sich unter die Schrift, nicht darüber,
   weil .vig im Markup vor den Textbändern steht. */
.hero.static .vig{
  background:
    linear-gradient(100deg,rgba(6,9,14,.95) 0%,rgba(6,9,14,.88) 34%,rgba(6,9,14,.52) 66%,rgba(6,9,14,.3) 100%),
    linear-gradient(180deg,rgba(6,9,14,.92) 0%,rgba(6,9,14,0) 26%,rgba(6,9,14,0) 76%,rgba(6,9,14,.6) 100%)
}
@media (max-width:900px){
  .hero.static .vig{
    background:linear-gradient(180deg,rgba(6,9,14,.94) 0%,rgba(6,9,14,.86) 42%,rgba(6,9,14,.8) 100%)
  }
}
.hero.static .hud .ring{display:none}
.hero.static video{display:none}
/* ============================================================
   5. THE SIGNATURE: DIE SCHLIFFKANTE
   ============================================================ */
.edge{
  position:fixed;left:calc(var(--gut) * .42);top:0;bottom:0;width:22px;z-index:2;
  pointer-events:none;opacity:0;transition:opacity .8s var(--ease)
}
.edge.on{opacity:1}
.edge svg{width:100%;height:100%}
.edge .track{stroke:var(--line);stroke-width:1}
.edge .draw{
  stroke:var(--accent);stroke-width:1.4;
  stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--off,1000)
}
.edge .glint{fill:var(--accent);filter:blur(2px);opacity:.9}
@media (max-width:1180px){.edge{display:none}}

/* ============================================================
   6. SECTIONS, SHARED
   ============================================================ */
main{position:relative;z-index:3;background:var(--canvas)}
section{padding:clamp(96px,13vh,168px) var(--gut);position:relative}
.head{max-width:62ch}
.head h2{font-size:clamp(2rem,4.1vw,3.5rem);margin-bottom:20px}
.rule{
  height:1px;background:var(--line);margin:0 var(--gut);
  transform:scaleX(0);transform-origin:center;transition:transform 1.2s var(--ease)
}
.rule.in{transform:scaleX(1)}

/* entrance choreography */
.rise{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.in .rise,.rise.in{opacity:1;transform:none}
.stg .rise:nth-child(1){transition-delay:0ms}
.stg .rise:nth-child(2){transition-delay:90ms}
.stg .rise:nth-child(3){transition-delay:180ms}
.stg .rise:nth-child(4){transition-delay:270ms}
.stg.done .rise:nth-child(1),
.stg.done .rise:nth-child(2),
.stg.done .rise:nth-child(3),
.stg.done .rise:nth-child(4){transition-delay:0ms !important}

/* ============================================================
   7. PROBLEM
   ============================================================ */
#problem{text-align:center}
#problem .head{margin:0 auto}
#problem h2{font-size:clamp(2.2rem,4.6vw,3.9rem)}
.pains{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin:clamp(48px,7vh,84px) auto 0;max-width:1080px;text-align:left
}
.pain{padding:30px clamp(18px,2.4vw,36px);border-left:1px solid var(--line);position:relative}
.pain:first-child{border-left:0}
.pain h3{
  font-size:1.16rem;font-weight:600;letter-spacing:-.01em;margin-bottom:10px;color:var(--text-primary)
}
.pain p{color:var(--text-secondary);font-size:.98rem}
.pain::after{
  content:"";position:absolute;left:-1px;top:30%;width:1px;height:0;background:var(--accent);
  transition:height 1s var(--ease) .2s
}
.pain:first-child::after{display:none}
.in .pain::after{height:40%}
.turn{
  margin:clamp(46px,6vh,72px) auto 0;max-width:34ch;
  font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2.1vw,1.6rem);
  line-height:1.25;letter-spacing:-.015em
}
.turn em{font-style:normal;color:var(--accent)}
#preis .preis-detail{
  margin:18px auto 0;max-width:52ch;color:var(--text-secondary);
  font-size:1rem;line-height:1.6
}
@media (max-width:820px){
  .pains{grid-template-columns:1fr}
  .pain{border-left:0;border-top:1px solid var(--line);padding:26px 0}
  .pain:first-child{border-top:0}
  .pain::after{left:0;top:0;width:0;height:1px;transition:width 1s var(--ease) .2s}
  .in .pain::after{width:44px;height:1px}
}

/* ============================================================
   8. LEISTUNGEN
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(44px,6vh,72px)}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:transform .6s var(--ease),border-color .6s var(--ease)
}
.card:hover{transform:translateY(-5px);border-color:var(--line-strong)}
.card .shot{aspect-ratio:4/3;overflow:hidden;background:var(--canvas-deep);position:relative}
.card .shot img{width:100%;height:100%;object-fit:cover;animation:breathe 26s var(--ease-soft) -6s infinite alternate}
@keyframes breathe{0%{transform:scale(1.02)}100%{transform:scale(1.09)}}
.card .shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,16,23,0) 42%,rgba(11,16,23,.72) 100%)
}
.card .body{padding:26px clamp(20px,2vw,30px) 30px}
.card .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--accent);display:block;margin-bottom:12px}
.card h3{font-size:1.42rem;margin-bottom:12px}
.card p{color:var(--text-secondary);font-size:1rem}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
/* Fehlt eine Bilddatei, verschwindet der Bildbereich ganz. Eine Textkachel sieht
   gewollt aus, ein kaputtes Bildsymbol sieht nach Pannenseite aus. */
.card .shot.fehlt{display:none}
/* Die Projektkacheln stehen nicht im festen Dreierraster, sondern fließen.
   Eine einzelne Referenz steht dann breit und mittig statt verloren in einer
   von drei Spalten, drei stehen nebeneinander wie zuvor. */
#projekte .cards{display:flex;flex-wrap:wrap}
#projekte .card{flex:1 1 320px;max-width:860px}
/* Projektkacheln zeigen Bildschirmaufnahmen, deshalb Breitbild statt 4:3. */
#projekte .shot{aspect-ratio:16/9}
#projekte .shot video{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .7s var(--ease)
}
#projekte .shot.ready video{opacity:1}
/* Fehlt die Datei noch, sagt die Kachel das, statt schwarz zu bleiben. */
#projekte .shot.leer::before{
  content:"Video folgt";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--text-secondary);opacity:.45
}
/* Verweis auf die echte Seite, damit die Referenz nachprüfbar bleibt. */
#projekte .card .live,
#vorschau .card .live{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--text-secondary);text-decoration:none;
  border-bottom:1px solid var(--line-strong);padding-bottom:3px;
  transition:color .4s var(--ease),border-color .4s var(--ease)
}
#vorschau .card .live{margin-top:13px;font-size:.68rem}
#projekte .card .live:hover,
#vorschau .card .live:hover{color:var(--accent);border-color:var(--accent)}
#projekte .card .live .arw,
#vorschau .card .live .arw{transition:transform .4s var(--ease)}
#projekte .card .live:hover .arw,
#vorschau .card .live:hover .arw{transform:translateX(3px)}


/* ============================================================
   8b. VORSCHAU (zwei fertige Seiten, live im Rahmen)
   Die beiden Seiten liegen unter /vorschau und laufen echt, nicht als Bild.
   Der Rahmen rechnet mit einer festen Bildschirmbreite (--vw) und schrumpft
   sie auf die Kachelbreite. Am Telefon wird stattdessen die Handyansicht der
   Seite gezeigt, weil ein Schreibtischbildschirm auf 340px unlesbar wird.
   ============================================================ */
.wvs{
  display:grid;
  /* Genau vier Seiten, nicht mehr, nicht weniger, deshalb fest vier Spalten
     statt einer auf beliebig viele Kacheln angelegten Fließspalte. Die
     Höchstbreite ist bewusst groß, damit die Reihe auf einem normalen
     Bildschirm möglichst viel Platz bekommt. */
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.4vw,22px);
  max-width:1760px;
  margin-top:clamp(40px,5vh,64px)
}
@media (max-width:1100px){.wvs{grid-template-columns:1fr;max-width:600px}}

.wv{--vw:1440;--vh:900}
@media (max-width:720px){.wv{--vw:430;--vh:560}}

/* Die Kachel ist klein, also darf die Schrift darin nicht so groß bleiben
   wie in den breiten Projektkacheln darüber. */
.wv .body{padding:20px 20px 24px}
.wv h3{font-size:1.16rem;margin-bottom:9px}
.wv p{font-size:.93rem;line-height:1.6}
.wv .n{margin-bottom:10px}

/* Fensterleiste, damit die Kachel auf den ersten Blick als Website liest. */
.wv .chrome{
  display:flex;align-items:center;gap:6px;
  padding:9px 12px;background:var(--panel-hi);border-bottom:1px solid var(--line)
}
.wv .chrome i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);flex:none}
.wv .chrome .url{
  margin-left:7px;font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;
  color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* Die Bühne. Ihr Seitenverhältnis kommt vom nachgebauten Bildschirm,
   deshalb füllt der verkleinerte Rahmen sie exakt aus. */
.wv .glass{
  position:relative;overflow:hidden;
  aspect-ratio:var(--vw)/var(--vh);
  background:var(--canvas-deep)
}
/* Solange der Rahmen lädt, steht hier ein Wort statt einer schwarzen Fläche. */
.wv .glass::before{
  content:"Vorschau lädt";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  color:var(--text-secondary);opacity:.42
}
.wv iframe{
  position:absolute;top:0;left:0;z-index:1;border:0;
  width:calc(var(--vw) * 1px);height:calc(var(--vh) * 1px);
  transform-origin:0 0;transform:scale(var(--s,.26));
  background:#fff;
  /* Der Rahmen wird angesehen, nicht bedient. Bedient wird die echte Seite. */
  pointer-events:none
}
/* --s setzt das Skript exakt auf Kachelbreite geteilt durch --vw. Die Werte
   hier sind nur da, damit ohne Javascript trotzdem etwas Sinnvolles steht. */
@media (max-width:720px){.wv iframe{transform:scale(var(--s,.77))}}

/* Auf dem Handy zeigt die Kachel ein Standbild statt der echten Seite im Rahmen:
   ein nachgeladener Livefr-Rahmen zeigt dort ohnehin nur die Mobilansicht der
   Beispielseite noch einmal verkleinert, das wirkt gedrängt und blitzt beim
   Nachladen kurz weiß auf. Ein Bild lädt sauber ein wie die Projektkacheln. */
.wv-shot{display:none}
@media (max-width:720px){
  .wv-shot{
    display:block;position:absolute;inset:0;z-index:1;
    width:100%;height:100%;object-fit:cover;object-position:top;
    background:var(--canvas-deep);
    opacity:0;transition:opacity .5s var(--ease)
  }
  .wv-shot.loaded{opacity:1}
  .wv .glass iframe{display:none}
}

/* Die ganze Fläche ist der Weg zur echten Seite. */
.wv .open{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  text-decoration:none;
  background:linear-gradient(180deg,rgba(11,16,23,0) 38%,rgba(11,16,23,.62) 100%);
  opacity:0;transition:opacity .45s var(--ease)
}
.wv:hover .open,.wv .open:focus-visible{opacity:1}
.wv .open > span{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;
  padding:9px 16px;border-radius:999px;
  background:var(--accent);color:#08111C;
  transform:translateY(7px);transition:transform .45s var(--ease)
}
.wv:hover .open > span,.wv .open:focus-visible > span{transform:none}
.wv .open .arw{transition:transform .4s var(--ease)}
.wv .open:hover .arw{transform:translateX(4px)}
/* Am Touchgerät gibt es kein Darüberfahren, also steht der Knopf einfach da. */
@media (pointer:coarse){
  .wv .open{opacity:1;background:linear-gradient(180deg,rgba(11,16,23,0) 52%,rgba(11,16,23,.66) 100%)}
  .wv .open > span{transform:none}
}

/* ============================================================
   9. DER SCHLIFF (the interactive moment)
   ============================================================ */
#schliff{background:var(--canvas-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:center}
.slab{
  position:relative;aspect-ratio:5/4;border-radius:18px;overflow:hidden;
  background:linear-gradient(155deg,#151C26,#0D131B);border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;gap:22px;
  padding:clamp(24px,3.4vw,52px)
}
.slab .dull{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.6rem,3.2vw,2.7rem);line-height:1.05;
  filter:blur(calc((1 - var(--p,0)) * 7px));
  color:color-mix(in srgb,var(--text-primary) calc(38% + 62% * var(--p,0)),#3A4756);
  transition:color .1s linear
}
.slab .meter{display:flex;align-items:baseline;gap:12px}
.slab .num{
  font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,6vw,4.4rem);
  letter-spacing:-.04em;line-height:1;
  color:color-mix(in srgb,var(--accent) calc(20% + 80% * var(--p,0)),#3A4756)
}
.slab .unit{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.slab .bar{height:2px;background:var(--line);position:relative;border-radius:2px}
.slab .bar i{
  position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--accent);
  width:calc(var(--p,0) * 100%)
}
.slab .sheen{
  position:absolute;top:0;bottom:0;width:34%;pointer-events:none;
  left:calc(var(--p,0) * 132% - 34%);
  background:linear-gradient(100deg,rgba(94,162,241,0),rgba(146,196,247,.16),rgba(94,162,241,0));
  opacity:calc(.25 + .75 * var(--p,0))
}
.slab .checks{display:flex;flex-direction:column;gap:9px}
.slab .chk{
  display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:.76rem;
  letter-spacing:.04em;color:#5D6C7E;transition:color .5s var(--ease)
}
.slab .chk i{
  width:7px;height:7px;border-radius:50%;background:#2A3542;flex:none;
  transition:background .5s var(--ease),box-shadow .5s var(--ease)
}
.slab .chk.on{color:var(--text-primary)}
.slab .chk.on i{background:var(--accent);box-shadow:0 0 12px rgba(94,162,241,.8)}
.holdrow{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}
.hold{
  -webkit-user-select:none;user-select:none;touch-action:none;
  background:transparent;border:1px solid var(--line-strong);color:var(--text-primary)
}
.hold:hover{border-color:var(--accent);color:var(--accent)}
.hold.holding{background:var(--accent-muted);border-color:var(--accent);color:var(--text-primary)}
.holdnote{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:#5D6C7E}
.afterword{
  margin-top:26px;font-size:1.05rem;color:var(--text-secondary);max-width:44ch;
  opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease)
}
.afterword.on{opacity:1;transform:none}
.tiny{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:#4E5A6A;margin-top:14px}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ============================================================
   10. ABLAUF
   ============================================================ */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:clamp(48px,7vh,84px);position:relative
}
.steps::before{
  content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:var(--line)
}
.step{padding:0 clamp(14px,1.8vw,30px) 0 0;position:relative}
.step .dot{
  width:23px;height:23px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--canvas);display:grid;place-items:center;position:relative;z-index:2;
  margin-bottom:24px;transition:border-color .6s var(--ease),background .6s var(--ease)
}
.step .dot span{width:6px;height:6px;border-radius:50%;background:var(--line-strong);transition:background .6s var(--ease),box-shadow .6s var(--ease)}
.in .step .dot{border-color:var(--accent)}
.in .step .dot span{background:var(--accent);box-shadow:0 0 10px rgba(94,162,241,.7)}
.step .when{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:10px}
.step h3{font-size:1.28rem;margin-bottom:11px}
.step p{color:var(--text-secondary);font-size:.98rem;max-width:30ch}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:34px}
  .steps::before{left:11px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .step{padding:0 0 0 46px}
  .step .dot{position:absolute;left:0;top:0;margin:0}
}

/* ============================================================
   11. PREIS UND VERSPRECHEN
   ============================================================ */
#preis{text-align:center;position:relative;overflow:hidden}
#preis .glow{
  position:absolute;left:50%;top:44%;width:min(760px,92vw);aspect-ratio:2/1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(94,162,241,.16),transparent 68%);
  animation:pulse 11s var(--ease-soft) -3s infinite alternate
}
@keyframes pulse{0%{opacity:.5;transform:translate(-50%,-50%) scale(.94)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
#preis .head{margin:0 auto;position:relative}
#preis h2{font-size:clamp(2.2rem,5vw,4.1rem)}
#preis .lede{margin:0 auto}
.promises{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);
  margin:clamp(52px,7vh,88px) auto 0;max-width:1080px;text-align:left;position:relative
}
.promise{border-top:1px solid var(--line-strong);padding-top:22px}
.promise b{
  display:block;font-family:var(--display);font-weight:600;font-size:1.2rem;
  letter-spacing:-.015em;margin-bottom:9px
}
.promise p{color:var(--text-secondary);font-size:.97rem}
.promise .no{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--accent);display:block;margin-bottom:14px}
@media (max-width:900px){.promises{grid-template-columns:1fr}}

/* ============================================================
   12. FRAGEN
   ============================================================ */
.faqwrap{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(30px,5vw,88px);align-items:start}
.faqhead{position:sticky;top:96px}
.faq{border-top:1px solid var(--line)}
.q{
  width:100%;background:none;border:0;border-bottom:1px solid var(--line);
  color:var(--text-primary);text-align:left;cursor:pointer;
  padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:clamp(1.02rem,1.5vw,1.2rem);
  letter-spacing:-.012em;line-height:1.35;
  transition:color .4s var(--ease)
}
.q:hover{color:var(--accent)}
.q .pm{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:14px;height:14px}
.q .pm::before,.q .pm::after{
  content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:var(--accent);
  transition:transform .45s var(--ease)
}
.q .pm::after{transform:rotate(90deg)}
.q[aria-expanded="true"] .pm::after{transform:rotate(0)}
.a{
  overflow:hidden;height:0;border-bottom:1px solid var(--line);
  transition:height .5s var(--ease)
}
.a p{padding:0 0 26px;color:var(--text-secondary);max-width:58ch}
@media (max-width:900px){.faqwrap{grid-template-columns:1fr}.faqhead{position:static}}

/* ============================================================
   13. ANFRAGE
   ============================================================ */
#anfrage{position:relative;overflow:hidden}
#anfrage .bg{
  position:absolute;inset:0;background-size:cover;background-position:center;opacity:.3
}
#anfrage .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--canvas) 0%,rgba(11,16,23,.86) 34%,rgba(11,16,23,.94) 100%)
}
.formwrap{
  position:relative;max-width:660px;margin:0 auto;
  background:rgba(19,26,36,.86);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:20px;padding:clamp(28px,4vw,54px)
}
.formwrap .head{text-align:center;margin:0 auto clamp(28px,4vh,42px)}
.formwrap h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
form{display:grid;gap:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:8px}
input,textarea{
  width:100%;background:var(--canvas-deep);border:1px solid var(--line-strong);
  border-radius:11px;padding:13px 15px;color:var(--text-primary);
  font-family:var(--body);font-size:1rem;
  transition:border-color .4s var(--ease),background .4s var(--ease)
}
input::placeholder,textarea::placeholder{color:#566374}
input:focus,textarea:focus{border-color:var(--accent);background:#0A1119;outline:none}
textarea{resize:vertical;min-height:118px}
form .btn{width:100%;padding:15px 20px;font-size:.84rem;margin-top:6px}
.formnote{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:#566374;text-align:center;margin-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formerr{font-size:.9rem;color:#E2A0A0;text-align:center;margin-top:14px}
form .btn[disabled]{opacity:.55;cursor:default;transform:none}
.sent{
  display:none;text-align:center;padding:22px 0
}
.sent b{display:block;font-family:var(--display);font-weight:700;font-size:1.5rem;margin-bottom:10px}
.sent p{color:var(--text-secondary)}
.formwrap.done form{display:none}
.formwrap.done .sent{display:block}
@media (max-width:620px){.two{grid-template-columns:1fr}}

/* ============================================================
   14. FOOTER
   ============================================================ */
footer{
  position:relative;z-index:3;background:var(--canvas-deep);border-top:1px solid var(--line);
  padding:clamp(48px,7vh,76px) var(--gut) 36px
}
.frow{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;justify-content:space-between}
/* Dieselbe Bildmarke wie im Kopf, nur ruhiger gesetzt. */
footer .brand img{height:30px;width:auto;display:block;opacity:.85;transition:opacity .4s var(--ease)}
footer .brand:hover img{opacity:1}
.fnav{display:flex;flex-wrap:wrap;gap:22px}
.fnav a,.flegal a{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--text-secondary);
  text-decoration:none;transition:color .35s var(--ease)
}
.fnav a:hover,.flegal a:hover{color:var(--accent)}
.fbase{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line)
}
.flegal{display:flex;gap:20px}
.fsmall{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:#4E5A6A}

/* ============================================================
   15. STATIC HERO GATES (must match the JS strings exactly)
   ============================================================ */
@media (max-width:720px){
  .hero{height:100vh}
  .hero .stage{height:100vh}
  .hero .band:not([data-entrance="settle"]){display:none}
  .hero .band[data-entrance="settle"]{opacity:1}
  .hero .band[data-entrance="settle"] .w,
  .hero .band[data-entrance="settle"] .sub,
  .hero .band[data-entrance="settle"] .row,
  .hero .band[data-entrance="settle"] .kicker{opacity:1;transform:none}
  .hero video{display:none}
  .hud .ring{display:none}
}
@media (orientation:portrait) and (max-width:1024px){
  .hero{height:100vh}
  .hero .stage{height:100vh}
  .hero .band:not([data-entrance="settle"]){display:none}
  .hero .band[data-entrance="settle"]{opacity:1}
  .hero .band[data-entrance="settle"] .w,
  .hero .band[data-entrance="settle"] .sub,
  .hero .band[data-entrance="settle"] .row,
  .hero .band[data-entrance="settle"] .kicker{opacity:1;transform:none}
  .hero video{display:none}
  .hud .ring{display:none}
}
@media (orientation:portrait) and (pointer:coarse){
  .hero{height:100vh}
  .hero .stage{height:100vh}
  .hero .band:not([data-entrance="settle"]){display:none}
  .hero .band[data-entrance="settle"]{opacity:1}
  .hero .band[data-entrance="settle"] .w,
  .hero .band[data-entrance="settle"] .sub,
  .hero .band[data-entrance="settle"] .row,
  .hero .band[data-entrance="settle"] .kicker{opacity:1;transform:none}
  .hero video{display:none}
  .hud .ring{display:none}
}
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px){
  .hero{height:100vh}
  .hero .stage{height:100vh}
  .hero .band:not([data-entrance="settle"]){display:none}
  .hero .band[data-entrance="settle"]{opacity:1}
  .hero .band[data-entrance="settle"] .w,
  .hero .band[data-entrance="settle"] .sub,
  .hero .band[data-entrance="settle"] .row,
  .hero .band[data-entrance="settle"] .kicker{opacity:1;transform:none}
  .hero video{display:none}
  .hud .ring{display:none}
}
@media (max-width:720px){
  .band .line{font-size:clamp(1.9rem,8.4vw,2.8rem)}
  .band .inner{max-width:none}
  .band[data-entrance="settle"] .inner{max-width:none}
  .band::before{background:radial-gradient(ellipse 96% 72% at 50% 52%,rgba(4,6,11,.78) 0%,rgba(4,6,11,.5) 50%,rgba(4,6,11,0) 80%)}
  .navlinks{display:none}
  section{padding-left:20px;padding-right:20px}
}

/* ============================================================
   15b. WAS AM HANDY WEGFÄLLT
   Auf dem Telefon ist Platz das knappste Gut. Was hier verschwindet,
   verschwindet nur hier, der Desktop bleibt vollständig.
   ============================================================ */

/* Der Schliff-Regler. Ab 900px klappt .split auf eine Spalte, damit steht die
   Vergleichsfläche oben statt links, und der Satz "Links steht eine übliche
   Seite" stimmt nicht mehr. Dazu kostet der Abschnitt einen ganzen Bildschirm
   für ein Erlebnis, das bewusstes Gedrückthalten verlangt. Am Desktop, wo
   nebeneinander wirklich nebeneinander heißt, bleibt er. */
@media (max-width:900px){
  #schliff{display:none}
}

/* Die zwei freiwilligen Formularfelder. Ab 620px steht jedes Feld auf eigener
   Zeile, erst dort kosten sie wirklich Platz. Der Abschnitt verspricht "Zwei
   Sätze reichen", also fragt er am Handy auch nur das Nötige. */
@media (max-width:620px){
  #anfrageForm .optional{display:none}
}

/* Der Anfrage-Knopf in der Leiste doppelt sich auf dem ersten Bildschirm mit
   dem im Hero. Er kommt, sobald der Hero durch ist, und bleibt dann. */
@media (max-width:720px){
  .nav .btn-p{transition:opacity .45s var(--ease)}
  .nav:not(.past-hero) .btn-p{opacity:0;pointer-events:none}
}

/* ============================================================
   16. REDUCED MOTION, HONOURED COMPLETELY
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0ms !important
  }
  body{opacity:1}
  .hero{height:100vh}
  .hero .stage{height:100vh}
  .hero .band:not([data-entrance="settle"]){display:none}
  .hero .band[data-entrance="settle"]{opacity:1}
  .hero .band[data-entrance="settle"] .w,
  .hero .band[data-entrance="settle"] .sub,
  .hero .band[data-entrance="settle"] .row,
  .hero .band[data-entrance="settle"] .kicker{opacity:1;transform:none}
  .hero video{display:none}
  .hud .ring{display:none}
  .rise{opacity:1;transform:none}
  .rule{transform:scaleX(1)}
  .in .pain::after{height:40%}
  .card .shot img{transform:scale(1.04)}
  .slab .dull{filter:none}
  .edge .draw{stroke-dashoffset:0}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ---- Über mich: Mindmap ---- */
#ueber .head{max-width:none}
#ueber .head h2{margin-top:10px}

.mindmap{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:clamp(28px,5vw,64px);
  max-width:1180px;margin:clamp(50px,8vh,90px) auto 0;
  padding:20px 0
}
.mm-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.mm-wire{
  fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;
  filter:url(#mmGlow)
}

.mm-center{
  flex:none;display:flex;flex-direction:column;align-items:center;gap:14px;
  position:relative;z-index:2
}
.mm-center .portrait{
  width:108px;height:108px;object-fit:cover;border-radius:50%;
  border:1px solid var(--line);box-shadow:0 16px 34px -14px rgba(2,4,8,.85);
  background:var(--panel)
}
.mm-name{
  font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--text-primary);white-space:nowrap;
  background:var(--canvas);padding:3px 10px;border-radius:5px;position:relative;z-index:2
}

.mm-side{flex:none;display:flex;align-items:center;gap:18px;position:relative;z-index:2}
.mm-label{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;writing-mode:horizontal-tb;
  background:var(--canvas);padding:4px 9px;border-radius:5px
}
.mm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.mm-list li{
  font-family:var(--mono);font-size:.78rem;color:var(--text-secondary);white-space:nowrap;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:7px 13px
}

.mindmap-mobile{display:none}

@media (max-width:900px){
  .mindmap{display:none}
  .mindmap-mobile{
    display:flex;flex-direction:column;align-items:center;gap:40px;
    max-width:420px;margin:44px auto 0;text-align:center;
    position:relative
  }
  .mmm-center{display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;z-index:2}
  .mmm-center .portrait{
    width:104px;height:104px;object-fit:cover;border-radius:50%;
    border:1px solid var(--line);box-shadow:0 16px 34px -14px rgba(2,4,8,.85);
    background:var(--panel)
  }
  .mmm-group{display:flex;flex-direction:column;align-items:center;gap:16px;position:relative;z-index:2}
  .mmm-group .mm-list{align-items:center}
  .mmm-group .mm-list li{white-space:normal}
}

/* Dritter Hero-Button "Über mich" nur am Handy, am Desktop steht die Nav dafür bereit. */
.btn-mobile-only{display:none}
@media (max-width:720px){.btn-mobile-only{display:inline-flex}}

/* ---- Intro-Loader: Logo startet groß mittig und fliegt zur Nav-Position ---- */
.preloader{
  position:fixed;inset:0;z-index:998;
  background:var(--canvas-deep);
  opacity:1;transition:opacity .6s var(--ease) .15s
}
.preloader.done{opacity:0;pointer-events:none}

.preloader-logo{
  position:fixed;top:50%;left:50%;z-index:999;
  width:200px;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.85);
  transition:opacity .6s var(--ease),transform .6s var(--ease)
}
.preloader-logo picture,.preloader-logo img{width:100%;height:auto;display:block}
.preloader-logo.in{opacity:1;transform:translate(-50%,-50%) scale(1)}
.preloader-logo.fly{transition:transform 1.05s cubic-bezier(.65,0,.35,1)}
.preloader-logo.hide{display:none}
@media (prefers-reduced-motion:reduce){
  .preloader-logo{transition:opacity .3s linear !important}
  .preloader{transition:opacity .3s linear}
}

/* ============================================================
   JÜNGSTE PROJEKTE: Einflug von rechts, eine Kachel nach der anderen.
   Jede Kachel schwenkt leicht gedreht und unscharf von rechts herein und
   wird scharf. Danach öffnet sich das Bild von rechts nach links, eine
   Lichtkante läuft mit, zuletzt steigt der Text nach.
   ============================================================ */
#projekte{overflow-x:clip}
#projekte .cards{perspective:1400px}
#projekte .card.rise{
  opacity:0;
  transform:translateX(140px) rotateY(-22deg) scale(.94);
  transform-origin:right center;
  filter:blur(10px);
  transition:
    opacity .9s var(--ease),
    transform 1.15s cubic-bezier(.16,1,.3,1),
    filter .9s var(--ease),
    border-color .6s var(--ease);
}
#projekte .cards.in .card.rise{opacity:1;transform:none;filter:none}
#projekte .cards.in .card.rise:hover{transform:translateY(-5px)}
#projekte .stg .card.rise:nth-child(1){transition-delay:0ms}
#projekte .stg .card.rise:nth-child(2){transition-delay:320ms}
#projekte .stg .card.rise:nth-child(3){transition-delay:640ms}
#projekte .stg .card.rise:nth-child(4){transition-delay:960ms}

/* Bild öffnet sich von rechts */
#projekte .card .shot{
  clip-path:inset(0 0 0 100%);
  transition:clip-path 1s cubic-bezier(.65,0,.35,1);
}
#projekte .cards.in .card .shot{clip-path:inset(0 0 0 0)}
/* Lichtkante, die über das Bild wischt */
#projekte .card .kante{
  position:absolute;top:0;bottom:0;left:100%;width:3px;z-index:2;
  background:var(--accent);
  box-shadow:0 0 18px 4px var(--accent);
  opacity:0;pointer-events:none;
}
#projekte .cards.in .card .kante{animation:kante 1s cubic-bezier(.65,0,.35,1) both}
@keyframes kante{
  0%{left:100%;opacity:0}
  10%{opacity:1}
  85%{opacity:1}
  100%{left:0;opacity:0}
}
/* Text steigt nach */
#projekte .card .body > *{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
#projekte .cards.in .card .body > *{opacity:1;transform:none}

/* Zeitplan pro Kachel: Einflug, dann Bild, dann Text */
#projekte .card:nth-child(1) .shot{transition-delay:450ms}
#projekte .card:nth-child(1) .kante{animation-delay:450ms !important}
#projekte .card:nth-child(1) .body > *{transition-delay:900ms}
#projekte .card:nth-child(2) .shot{transition-delay:770ms}
#projekte .card:nth-child(2) .kante{animation-delay:770ms !important}
#projekte .card:nth-child(2) .body > *{transition-delay:1220ms}
#projekte .card:nth-child(3) .shot{transition-delay:1090ms}
#projekte .card:nth-child(3) .kante{animation-delay:1090ms !important}
#projekte .card:nth-child(3) .body > *{transition-delay:1540ms}
#projekte .card:nth-child(4) .shot{transition-delay:1410ms}
#projekte .card:nth-child(4) .kante{animation-delay:1410ms !important}
#projekte .card:nth-child(4) .body > *{transition-delay:1860ms}

@media (prefers-reduced-motion:reduce){
  #projekte .card.rise,
  #projekte .card .shot,
  #projekte .card .body > *{opacity:1;transform:none;filter:none;clip-path:none;transition:none}
  #projekte .card .kante{display:none}
}

/* ============================================================
   JÜNGSTE PROJEKTE: schlichter Look.
   Kein Kartenrahmen, kein Kartenhintergrund, das Bild steht groß für sich,
   darunter nur Name und Link in kleiner Schrift. Die lange Beschreibung
   ist ausgeblendet (steht aber noch im HTML, falls sie zurück soll).
   ============================================================ */
#projekte .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3.4vw,56px) clamp(20px,2.6vw,40px)}
#projekte .card{
  max-width:none;background:none;border:0;border-radius:0;overflow:visible;
}
#projekte .card:hover{border-color:transparent}
#projekte .card .shot{
  border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.75);
}
#projekte .card .shot::after{display:none}
#projekte .card .shot img{animation:none}
#projekte .card .shot img,
#projekte .card .shot video{transition:transform .9s var(--ease),opacity .7s var(--ease)}
#projekte .card:hover .shot img,
#projekte .card:hover .shot video{transform:scale(1.035)}
#projekte .card .body{padding:18px 2px 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
#projekte .card .n{display:none}
#projekte .card h3{font-size:1.02rem;margin:0;font-weight:600;letter-spacing:.01em}
#projekte .card .body p{display:none}
#projekte .card .live{margin-top:0;font-size:.68rem}
@media (max-width:900px){#projekte .cards{grid-template-columns:1fr}}

/* ============================================================
   JÜNGSTE PROJEKTE: Raster wie bei DesignTribe.
   Drei Spalten, hohe Kacheln (Hochformat), kleine Ecken, darunter Name und
   eine Zeile in Akzentfarbe. Rechts oben ein runder Knopf zur Live-Seite.
   ============================================================ */
#projekte .cards{grid-template-columns:repeat(3,1fr);gap:clamp(40px,5vw,64px) clamp(12px,1.2vw,18px)}
#projekte .shot,
#projekte .card .shot{aspect-ratio:4/5;border-radius:8px}
#projekte .card .shot img,
#projekte .card .shot video{object-fit:cover;object-position:top center}
#projekte .card .body{display:block;padding:20px 0 0}
#projekte .card h3{font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:500;margin:0 0 4px;letter-spacing:0}
#projekte .card .live{
  margin:0;font-family:inherit;font-size:clamp(.95rem,1.1vw,1.08rem);letter-spacing:0;
  color:var(--accent);text-decoration:none
}
#projekte .card .live .arw{display:none}
#projekte .card .ext{
  position:absolute;top:16px;right:16px;z-index:3;
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:#111;box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:transform .4s var(--ease)
}
#projekte .card .ext svg{width:20px;height:20px}
#projekte .card .ext:hover{transform:scale(1.08)}
@media (max-width:900px){#projekte .cards{grid-template-columns:1fr 1fr}}
@media (max-width:600px){#projekte .cards{grid-template-columns:1fr}}

/* ============================================================
   JÜNGSTE PROJEKTE: Handy in der Kachel.
   Die Kachel ist eine dunkle Bühne, in der Mitte steht ein Handy, darin
   läuft die Bildschirmaufnahme der Handy-Version in Dauerschleife.
   Videos: assets/<name>-handy.mp4, Standbild: assets/<name>-handy.jpg
   ============================================================ */
#projekte .handy-kachel{
  display:grid;place-items:center;
  background:
    radial-gradient(60% 50% at 50% 55%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    linear-gradient(160deg,#1c2533 0%,#0e141d 100%);
}
#projekte .handy{
  position:absolute;top:7%;bottom:7%;left:50%;transform:translateX(-50%);aspect-ratio:27/50;
  padding:7px;border-radius:clamp(26px,3vw,40px);
  background:linear-gradient(145deg,#3a4250,#12161d 45%,#2b313b);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 30px 60px -20px rgba(0,0,0,.8),
    0 0 0 1px rgba(0,0,0,.6);
  transition:transform .7s var(--ease)
}
/* Kamera-Pille oben */
#projekte .handy::after{
  content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:28%;height:12px;border-radius:10px;background:#05070a;z-index:2
}
#projekte .handy .screen{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:clamp(20px,2.4vw,33px);background:#05070a
}
#projekte .handy .screen video{
  width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  opacity:0;transition:opacity .7s var(--ease);transform:none !important
}
#projekte .handy .screen.ready video{opacity:1}
#projekte .handy .screen.leer::before{
  content:"Video folgt";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--text-secondary);opacity:.5
}
#projekte .card:hover .handy{transform:translateX(-50%) translateY(-8px) rotate(-1.5deg)}

/* Handy steht frei auf der Seite: keine Fläche, kein Schatten hinter der Kachel. */
#projekte .card .shot.handy-kachel{background:none;box-shadow:none;border-radius:0}

/* ============================================================
   VORSCHAU: gleiche Kachelgröße wie bei den jüngsten Projekten.
   Drei Spalten, Hochformat 4:5, ohne Rahmen und ohne Fensterleiste,
   darunter nur Titel und Branche. Die Seite im Rahmen wird in
   Tablet-Breite (800px) gezeigt, damit sie im Hochformat lesbar bleibt.
   Einflug wie oben: von rechts, eine Kachel nach der anderen.
   ============================================================ */
#vorschau{overflow-x:clip}
#vorschau .wvs{
  grid-template-columns:repeat(3,1fr);max-width:none;
  gap:clamp(40px,5vw,64px) clamp(12px,1.2vw,18px);
  perspective:1400px
}
#vorschau .wv{--vw:800;--vh:1000;background:none;border:0;border-radius:0;overflow:visible}
#vorschau .wv:hover{border-color:transparent}
#vorschau .wv .chrome{display:none}
#vorschau .wv .glass{border-radius:8px;background:var(--canvas-deep)}
#vorschau .wv .body{display:flex;flex-direction:column;padding:20px 0 0}
#vorschau .wv h3{order:1;font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:500;margin:0 0 4px}
#vorschau .wv .n{
  order:2;margin:0;font-family:inherit;font-size:clamp(.95rem,1.1vw,1.08rem);
  letter-spacing:0;text-transform:none;color:var(--accent)
}
#vorschau .wv .body p,
#vorschau .wv .body .live{display:none}
@media (max-width:1100px){#vorschau .wvs{grid-template-columns:1fr 1fr;max-width:none}}
@media (max-width:600px){#vorschau .wvs{grid-template-columns:1fr}}
@media (max-width:720px){#vorschau .wv{--vw:430;--vh:538}}

/* Einflug */
#vorschau .wv.rise{
  opacity:0;
  transform:translateX(140px) rotateY(-22deg) scale(.94);
  transform-origin:right center;
  filter:blur(10px);
  transition:
    opacity .9s var(--ease),
    transform 1.15s cubic-bezier(.16,1,.3,1),
    filter .9s var(--ease);
}
#vorschau .wvs.in .wv.rise{opacity:1;transform:none;filter:none}
#vorschau .wvs.in .wv.rise:hover{transform:translateY(-5px)}
#vorschau .stg .wv.rise:nth-child(1){transition-delay:0ms}
#vorschau .stg .wv.rise:nth-child(2){transition-delay:320ms}
#vorschau .stg .wv.rise:nth-child(3){transition-delay:640ms}
#vorschau .stg .wv.rise:nth-child(4){transition-delay:960ms}

#vorschau .wv .glass{clip-path:inset(0 0 0 100%);transition:clip-path 1s cubic-bezier(.65,0,.35,1)}
#vorschau .wvs.in .wv .glass{clip-path:inset(0 0 0 0)}
#vorschau .wv .kante{
  position:absolute;top:0;bottom:0;left:100%;width:3px;z-index:3;
  background:var(--accent);box-shadow:0 0 18px 4px var(--accent);
  opacity:0;pointer-events:none;
}
#vorschau .wvs.in .wv .kante{animation:kante 1s cubic-bezier(.65,0,.35,1) both}
#vorschau .wv .body > *{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
#vorschau .wvs.in .wv .body > *{opacity:1;transform:none}

#vorschau .wv:nth-child(1) .glass{transition-delay:450ms}
#vorschau .wv:nth-child(1) .kante{animation-delay:450ms !important}
#vorschau .wv:nth-child(1) .body > *{transition-delay:900ms}
#vorschau .wv:nth-child(2) .glass{transition-delay:770ms}
#vorschau .wv:nth-child(2) .kante{animation-delay:770ms !important}
#vorschau .wv:nth-child(2) .body > *{transition-delay:1220ms}
#vorschau .wv:nth-child(3) .glass{transition-delay:1090ms}
#vorschau .wv:nth-child(3) .kante{animation-delay:1090ms !important}
#vorschau .wv:nth-child(3) .body > *{transition-delay:1540ms}
#vorschau .wv:nth-child(4) .glass{transition-delay:1410ms}
#vorschau .wv:nth-child(4) .kante{animation-delay:1410ms !important}
#vorschau .wv:nth-child(4) .body > *{transition-delay:1860ms}

@media (prefers-reduced-motion:reduce){
  #vorschau .wv.rise,
  #vorschau .wv .glass,
  #vorschau .wv .body > *{opacity:1;transform:none;filter:none;clip-path:none;transition:none}
  #vorschau .wv .kante{display:none}
}

/* Vorschau am PC: alle vier in einer Reihe, kleinere Kacheln. */
#vorschau .wvs{grid-template-columns:repeat(4,1fr);gap:clamp(32px,4vw,48px) clamp(12px,1.2vw,16px)}
#vorschau .wv h3{font-size:clamp(1rem,1.15vw,1.15rem)}
#vorschau .wv .n{font-size:clamp(.85rem,.95vw,.95rem)}
#vorschau .wv .body{padding-top:14px}
@media (max-width:1100px){#vorschau .wvs{grid-template-columns:1fr 1fr}}
@media (max-width:600px){#vorschau .wvs{grid-template-columns:1fr}}

/* Vorschau deutlich kleiner: die Reihe bekommt eine Höchstbreite,
   so werden die vier Kacheln schmaler, stehen aber weiter nebeneinander. */
#vorschau .wvs{max-width:920px;gap:28px 14px}
#vorschau .wv h3{font-size:.98rem}
#vorschau .wv .n{font-size:.85rem}
#vorschau .wv .body{padding-top:12px}
@media (max-width:1100px){#vorschau .wvs{max-width:560px}}
@media (max-width:600px){#vorschau .wvs{max-width:340px}}

/* Vorschau: am PC vier Kacheln über die volle Breite verteilt (links bündig
   bis rechts bündig), jede Kachel etwas größer als zuvor, der Rest ist Abstand.
   Am Handy alle untereinander. */
#vorschau .wvs{
  max-width:none;
  grid-template-columns:repeat(4,minmax(0,250px));
  justify-content:space-between;
  gap:28px 14px
}
@media (max-width:1100px){
  #vorschau .wvs{grid-template-columns:repeat(2,minmax(0,250px));justify-content:space-evenly;max-width:none}
}
@media (max-width:600px){
  #vorschau .wvs{grid-template-columns:minmax(0,380px);justify-content:center;gap:36px;max-width:none}
}

/* Am Handy: statt des quer aufgenommenen Standbilds (würde im Hochformat
   seitlich abgeschnitten) läuft die echte Seite in Handy-Breite im Rahmen. */
@media (max-width:720px){
  #vorschau .wv{--vw:430;--vh:538}
  #vorschau .wv .wv-shot{display:none}
  #vorschau .wv .glass iframe{display:block}
}

/* Handy: Vorschau-Kacheln schmaler, mittig. PC bleibt unverändert. */
@media (max-width:600px){
  #vorschau .wvs{grid-template-columns:minmax(0,270px);justify-content:center}
}

/* Handy: Vorschau-Kacheln wie bei DesignTribe, ca. 80 % der Bildschirmbreite. */
@media (max-width:600px){
  #vorschau .wvs{grid-template-columns:minmax(0,80vw);justify-content:center}
}

/* ============================================================
   VORSCHAU mit Mockup-Bildern (Laptop + Handy, 3:2).
   Das Bild wird nicht beschnitten: die Kachel hat genau das
   Seitenverhältnis des Bildes, es wird nur verkleinert.
   ============================================================ */
#vorschau .wv .glass{aspect-ratio:3/2}
#vorschau .wv .glass::before{content:none}
#vorschau .wv .glass picture{position:absolute;inset:0;display:block}
#vorschau .wv .wv-shot{
  display:block;position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#0e141d;opacity:1
}
#vorschau .wv .glass iframe{display:none}
/* PC: vier nebeneinander, von ganz links bis ganz rechts */
#vorschau .wvs{grid-template-columns:repeat(4,1fr);justify-content:stretch;gap:32px 16px}
@media (max-width:1100px){#vorschau .wvs{grid-template-columns:repeat(2,1fr);justify-content:stretch}}
@media (max-width:720px){
  #vorschau .wv .wv-shot{display:block}
  #vorschau .wv .glass iframe{display:none}
}
@media (max-width:600px){#vorschau .wvs{grid-template-columns:minmax(0,80vw);justify-content:center}}