/* Startseite: Kopfbühne, Leistung (Demonstrationen), Projektbühnen, Paketstufen, Ablauf, Fragen, Anfrage.
   Grundlage (Tokens, Schrift, Navigation, Knöpfe, Fuß): site.css. Scroll-Mitlauf über --hp (Kopf) und --p (Projekte), gesetzt von site.js. */

/* ================= HELD ================= */
.held{position:relative;min-height:100svh;padding-top:calc(var(--kopf-h) + clamp(2rem,5vw,4.5rem));overflow:clip;isolation:isolate;background:var(--grund)}
.held-licht{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 52% at 80% 28%,rgba(233,194,116,.17),transparent 72%),
    radial-gradient(46% 58% at 4% 104%,rgba(64,96,160,.26),transparent 72%),
    linear-gradient(90deg,rgba(150,172,206,.05) 1px,transparent 1px) 0 0/clamp(72px,9vw,128px) 100%,
    linear-gradient(180deg,#0a0d13,#0c1018 60%,var(--grund))}
.held-licht::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 46%,rgba(255,230,170,.055) 53%,transparent 60%);-webkit-mask:linear-gradient(180deg,#000,transparent 85%);mask:linear-gradient(180deg,#000,transparent 85%)}
.held>.wrap{position:relative;z-index:1}
.held.korn::before{-webkit-mask:linear-gradient(180deg,#000 65%,transparent);mask:linear-gradient(180deg,#000 65%,transparent)}
.held::after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,13,19,0),var(--grund))}
.held-raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);grid-template-areas:"titel buehne" "rest buehne";column-gap:clamp(1.5rem,3.4vw,4rem);align-items:center;min-height:calc(100svh - var(--kopf-h) - 10.5rem)}
.held-titel{grid-area:titel;align-self:end}
.held-rest{grid-area:rest;align-self:start;padding-top:2rem;display:flex;flex-direction:column;gap:1.6rem;align-items:flex-start}
.held h1{margin-top:1.6rem;font-weight:240;font-size:clamp(3rem,6vw,5.9rem);line-height:.9;letter-spacing:-.05em}
.held h1 .z{display:block}
.held h1 .z2{font-weight:800;letter-spacing:-.06em;color:var(--text)}
.held h1 .z3{margin-top:.6em;font-size:.34em;font-weight:400;letter-spacing:-.012em;line-height:1.15;color:var(--gold)}
.held-aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.held-rest .lead{max-width:30em}

/* Bühne: echte Ansichten der Beispielseiten, räumlich gesetzt (Perspektive), Maßlinien wie im Entwurf */
.buehne{grid-area:buehne;position:relative;margin:0;margin-right:calc(-1 * clamp(0rem,(100vw - var(--breite)) / 2 + var(--seite) - 1.2rem,9rem))}
.b-rahmen{padding:clamp(1.8rem,3.6vw,3.4rem) clamp(.8rem,1.6vw,1.6rem) clamp(3.6rem,5.4vw,5.2rem)}
.b-szene{perspective:1700px;perspective-origin:28% 38%}
.b-geraete{position:relative;width:92%;transform-style:preserve-3d;
  transform:rotateY(calc(-14deg * (1 - var(--hp,0)))) rotateX(calc(5deg * (1 - var(--hp,0)))) translate3d(0,calc(var(--hp,0) * 46px),0)}
.fenster{position:relative;border-radius:10px;overflow:hidden;background:#05070a;border:1px solid var(--linie-3);
  box-shadow:0 70px 120px -34px rgba(0,0,0,.9),0 0 90px -30px rgba(233,194,116,.22)}
.fenster-leiste{display:flex;align-items:center;gap:.42rem;height:30px;padding:0 .8rem;background:linear-gradient(#1c2333,#151b29);border-bottom:1px solid var(--linie-2)}
.fenster-leiste i{width:8px;height:8px;border-radius:50%;background:var(--f4)}
.fenster-leiste span{margin-left:.8rem;padding:.32rem .8rem;background:var(--f0);border-radius:2px;font:500 .62rem/1 var(--mono);letter-spacing:.08em;color:var(--text-3)}
.fenster-flaeche{position:relative;aspect-ratio:1200/750;overflow:hidden;background:#000}
.fenster-flaeche::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.1) 0%,transparent 26%,rgba(255,236,190,.16) 46%,transparent 62%) 0 0/260% 100%;background-position:0 0;animation:glanz 11s var(--ease-io) 2s infinite}
@keyframes glanz{0%,62%{background-position:0 0}100%{background-position:100% 0}}
.fenster-flaeche img,.handy-flaeche img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;clip-path:inset(0 0 0 100%);transition:opacity 0s .95s,clip-path 0s .95s}
.fenster-flaeche img.aktiv,.handy-flaeche img.aktiv{opacity:1;z-index:2;clip-path:inset(0)}
.buehne.wischt .fenster-flaeche img.aktiv,.buehne.wischt .handy-flaeche img.aktiv{transition:clip-path .95s var(--ease-io)}
.handy{position:absolute;right:-8%;bottom:-5%;width:25%;aspect-ratio:312/675;padding:5px;border-radius:clamp(14px,2.2vw,28px);
  background:linear-gradient(150deg,#56617a 0%,#161b26 34%,#0b0e14 62%,#3a4358 100%);
  box-shadow:0 50px 90px -20px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.08),0 0 60px -18px rgba(233,194,116,.35);
  transform:translateZ(90px) rotateY(-7deg)}
.handy-flaeche{position:relative;height:100%;border-radius:calc(clamp(14px,2.2vw,28px) - 4px);overflow:hidden;background:#000}
.mass{position:absolute;display:flex;align-items:center;gap:.6rem;font:500 .62rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.mass::before,.mass::after{content:"";flex:1;height:1px;background:var(--linie-3)}
.mass-d{left:0;top:-1.7rem;width:100%}
.mass-h{right:-8%;bottom:-3.3rem;width:25%;transform:translateZ(90px)}
.buehne-leiste{display:flex;align-items:center;gap:1.2rem;margin-top:.4rem;padding:0 .4rem;font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.buehne-zaehler{color:var(--gold);min-width:5.5ch;font-variant-numeric:tabular-nums}
.buehne-leiste a{display:inline-flex;align-items:center;gap:.9rem;min-height:44px;color:var(--text);text-decoration:none}
.buehne-leiste a .pf{color:var(--gold);background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size var(--t-mittel) var(--ease)}
.buehne-leiste a:hover .pf{background-size:100% 1px}
.pause{margin-left:auto;display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:0 .95rem;border:1px solid var(--linie-2);background:none;color:var(--text-2);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;transition:border-color var(--t-schnell),color var(--t-schnell)}
.pause:hover{border-color:var(--gold);color:var(--gold-hell)}
.pause i{width:9px;height:10px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.pause[aria-pressed="true"] i{width:0;height:0;border:5px solid transparent;border-left:9px solid currentColor;border-right:0}
.buehne-takte{display:flex;gap:6px;margin-top:.5rem;padding:0 .4rem}
.buehne-takte span{position:relative;flex:1;height:2px;background:var(--linie-2);overflow:hidden}
.buehne-takte span.fertig{background:var(--gold-tief)}
.buehne-takte span.jetzt::after{content:"";position:absolute;inset:0;background:var(--gold);transform-origin:left;animation:takt 5s linear forwards}
.buehne.pausiert .buehne-takte .jetzt::after{animation-play-state:paused}
@keyframes takt{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Fakten als Messleiste */
.fakten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(2rem,5vw,3.5rem) 0 0;position:relative;border-top:1px solid var(--linie-2)}
.fakten::before{content:"";position:absolute;top:-1px;left:0;width:34%;height:1px;background:var(--gold-verlauf)}
.fakten>div{padding:1.5rem 1.4rem 1.9rem 0;border-right:1px solid var(--linie)}
.fakten>div+div{padding-left:1.6rem}
.fakten>div:last-child{border-right:0}
.fakten dt{font:500 .68rem/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.fakten dd{margin:.6rem 0 0;font:300 clamp(1.5rem,2.5vw,2.2rem)/1.05 var(--anzeige);letter-spacing:-.035em;color:var(--text)}
.fakten dd small{display:block;margin-top:.5rem;font:400 .8rem/1.45 var(--fliess);letter-spacing:0;color:var(--text-3);max-width:24ch}

@media (max-width:980px){
  .fakten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fakten>div:nth-child(2){border-right:0}
  .fakten>div:nth-child(n+3){border-top:1px solid var(--linie)}
  .fakten>div:nth-child(3){padding-left:0}
}
@media (max-width:860px){
  .held{min-height:0;padding-bottom:1rem}
  .held-raster{grid-template-columns:minmax(0,1fr);grid-template-areas:"titel" "buehne" "rest";min-height:0;row-gap:1.4rem}
  .held h1{font-size:clamp(3rem,15.5vw,4.6rem);margin-top:1.2rem}
  .held-rest{padding-top:.4rem;gap:1.3rem}
  .buehne{margin-right:0}
  .b-rahmen{padding:2rem .4rem 3.4rem}
  .b-geraete{width:100%;transform:none}
  .handy{right:-1%;bottom:-11%;width:27%;transform:none}
  .mass-h{right:-1%;bottom:-3.4rem;width:27%;transform:none}
  .buehne-leiste{flex-wrap:wrap;gap:.3rem 1rem}
  .fakten>div{padding:1.3rem 1rem 1.5rem 0}
}

/* ================= Kopfzeile jedes großen Abschnitts ================= */
.sek-kopf{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:2rem clamp(2rem,5vw,5rem);align-items:end;margin-bottom:clamp(3rem,7vw,6rem)}
.sek-kopf>*:not(.sek-gross){position:relative;z-index:1}
.sek-gross::before,.projekt-gross::before{content:attr(data-n)}
.sek-gross{position:absolute;right:0;top:-.52em;font:800 clamp(9rem,22vw,20rem)/1 var(--anzeige);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(150,172,206,.16);pointer-events:none;user-select:none;z-index:0}
.sek-kopf .titel{margin-top:1.4rem}
@media (max-width:860px){.sek-kopf{grid-template-columns:minmax(0,1fr)}.sek-gross{font-size:clamp(7rem,38vw,11rem);top:-.42em}}

/* ================= LEISTUNG ================= */
.leistung{padding-bottom:0;overflow-x:clip}
.demo{position:relative;padding-block:clamp(3.5rem,8vw,7rem)}
.nr{display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;margin-bottom:1.3rem;border:1px solid var(--gold);color:var(--gold);font:500 .8rem/1 var(--mono)}
.demo-text h3,.demo-d-kopf h3{font:300 clamp(2rem,4vw,3.5rem)/1 var(--anzeige);letter-spacing:-.04em;margin-bottom:1.1rem}
.demo-text p,.demo-d-kopf p{color:var(--text-2);max-width:32em}
.demo-unter{margin-top:1.4rem;font:400 .8rem/1.55 var(--mono);letter-spacing:.02em;color:var(--text-3);max-width:60ch}

/* A: Gestaltungswelten */
.demo-a-in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,5vw,5.5rem);align-items:center}
.welt-liste{display:flex;flex-direction:column;margin-top:2.2rem;border-top:1px solid var(--linie-2)}
.welt-liste button{display:flex;align-items:center;gap:1.2rem;min-height:66px;padding:0 .4rem;background:none;border:0;border-bottom:1px solid var(--linie-2);cursor:pointer;text-align:left;font:300 clamp(1.5rem,2.6vw,2.3rem)/1 var(--anzeige);letter-spacing:-.035em;color:var(--text-3);transition:color var(--t-mittel),padding var(--t-mittel) var(--ease),background var(--t-mittel)}
.welt-liste button i{font:500 .68rem/1 var(--mono);font-style:normal;letter-spacing:.14em;color:var(--text-3);transition:color var(--t-mittel)}
.welt-liste button:hover{color:var(--text);padding-left:.9rem}
.welt-liste button[aria-pressed="true"]{color:var(--text);font-weight:720;padding-left:1.1rem;background:linear-gradient(90deg,rgba(233,194,116,.14),transparent 80%)}
.welt-liste button[aria-pressed="true"] i{color:var(--gold)}
.welten{display:grid;grid-template-columns:minmax(0,1fr)}
.welt{grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:16/11;overflow:hidden;border-radius:2px;box-shadow:0 60px 110px -40px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;clip-path:inset(0 0 0 100%);transition:clip-path .95s var(--ease-io),opacity 0s .95s,visibility 0s .95s}
.welt.aktiv{opacity:1;visibility:visible;clip-path:inset(0);z-index:2;transition:clip-path .95s var(--ease-io)}
.welt>div{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.9rem;padding:clamp(1.2rem,3vw,2.8rem)}
.welt img{width:100%;height:100%;object-fit:cover}
.w-label{font:500 .6rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.welt h4{font-size:clamp(1.6rem,3.6vw,3.2rem);line-height:.98}
.welt p{font-size:clamp(.82rem,1.3vw,1rem);line-height:1.45;max-width:20em}
.w-knopf{display:inline-block;margin-top:.4rem;padding:.75em 1.3em;font:700 clamp(.7rem,1vw,.85rem)/1 var(--fliess)}
.w-barber{background:#1a1816;color:#f1ebe3}
.w-barber h4{font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:.9}
.w-barber .w-knopf{background:#c53d2c;color:#fff}
.w-barber img{filter:grayscale(.55) contrast(1.05)}
.w-baeck{background:#f1e6d2;color:#3a2a1a;text-align:center}
.w-baeck>div{align-items:center}
.w-baeck h4{font-family:Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:-.02em;font-size:clamp(1.5rem,3.2vw,2.8rem)}
.w-baeck .w-knopf{background:#3a2a1a;color:#f1e6d2;border-radius:999px}
.w-baeck img{border-radius:999px 999px 0 0;width:84%;margin:1.2rem auto 0;height:calc(100% - 1.2rem)}
.w-eis{background:#ffdfe9;color:#62294a}
.w-eis h4{font-weight:800;letter-spacing:-.045em}
.w-eis .w-knopf{background:#6fe0b6;color:#0f3d2c;border-radius:999px}
.w-eis img{border-radius:34px;width:calc(100% - 2rem);height:calc(100% - 2rem);margin:1rem}
.w-immo{background:#0a1730;color:#e9dcc0}
.w-immo h4{font-weight:300;letter-spacing:.22em;text-transform:uppercase;font-size:clamp(1.3rem,2.8vw,2.4rem)}
.w-immo .w-knopf{border:1px solid #c9a65d;color:#e9dcc0;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.w-immo .w-label{color:#c9a65d;opacity:1}

/* B: Desktop → Handy (echter Umbau per Container-Abfrage) */
.demo-b{border-block:1px solid var(--linie)}
.demo-b-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,5vw,5.5rem);align-items:center}
.adapt-buehne{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:clamp(320px,34vw,470px);padding:2.6rem 1.4rem 0;background:linear-gradient(180deg,var(--f2),var(--f1));border:1px solid var(--linie-2)}
.adapt-lineal{position:absolute;top:0;left:0;right:0;height:26px;background:repeating-linear-gradient(90deg,var(--linie-3) 0 1px,transparent 1px 12px) 0 0/100% 10px no-repeat,repeating-linear-gradient(90deg,var(--linie-3) 0 1px,transparent 1px 60px) 0 0/100% 18px no-repeat}
.adapt-geraet{container-type:inline-size;width:100%;align-self:flex-end;background:#211911;color:#f0e6d6;border:1px solid var(--linie-3);border-bottom:0;border-radius:10px 10px 0 0;overflow:hidden;transition:width .9s var(--ease);position:relative;min-height:300px;display:flex;flex-direction:column}
.adapt-geraet[data-breite="tablet"]{width:66%}
.adapt-geraet[data-breite="handy"]{width:min(34%,230px);min-width:190px;border-radius:26px 26px 0 0;border-width:5px;border-color:#3a4358}
.adapt-geraet>*{font-size:clamp(10px,2.2cqw,16px)}
.ms-kopf{display:flex;align-items:center;gap:1.4em;padding:1em 1.4em;border-bottom:1px solid rgba(240,230,214,.12)}
.ms-logo{font:800 1.5em/1 var(--anzeige);letter-spacing:-.03em}
.ms-nav{display:flex;gap:1.4em;margin-left:auto;opacity:.78}
.ms-burger{display:none;margin-left:auto;width:1.7em;height:1em;border-top:2px solid #e9b25e;border-bottom:2px solid #e9b25e;position:relative}
.ms-burger::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#e9b25e;margin-top:-1px}
.ms-anrufen{padding:.6em 1.1em;background:#e9b25e;color:#2a1c0a;font-weight:700;border-radius:2px}
.ms-held{display:grid;grid-template-columns:1.05fr 1fr;flex:1;min-height:0}
.ms-held>div{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.9em;padding:2em 1.6em}
.ms-held h4{font-size:2.6em;line-height:.95}
.ms-held p{opacity:.78;font-size:1.05em;line-height:1.4}
.ms-held img{width:100%;height:100%;object-fit:cover}
.ms-held .w-knopf{background:#e9b25e;color:#2a1c0a;font-size:1em}
.ms-leiste{display:flex;justify-content:space-between;gap:1em;padding:1em 1.4em;border-top:1px solid rgba(240,230,214,.12);font-size:.9em;opacity:.8}
.ms-anrufleiste{display:none;padding:1em;text-align:center;background:#e9b25e;color:#2a1c0a;font-weight:800}
/* Tablet-Breite: Navigation bleibt, Bild wandert unter den Text, Schrift kleiner */
@container (max-width:520px){
  .ms-nav{gap:.9em}
  .ms-held{grid-template-columns:1fr}
  .ms-held img{order:2;height:9em}
  .ms-held h4{font-size:2.2em}
  .ms-leiste{font-size:.85em}
}
/* Handy-Breite: Menü hinter einem Knopf, fester Anruf-Balken, kein Anrufen-Knopf oben */
@container (max-width:340px){
  .ms-nav{display:none}.ms-burger{display:block}.ms-anrufen{display:none}
  .ms-held img{order:-1;height:8em}
  .ms-held h4{font-size:2.1em}
  .ms-leiste{flex-direction:column;gap:.3em}
  .ms-anrufleiste{display:block}
}
.demo-leiste{display:inline-flex;margin-top:2rem;border:1px solid var(--linie-3)}
.demo-leiste button{min-height:48px;padding:0 1.3rem;background:none;border:0;border-right:1px solid var(--linie-3);cursor:pointer;font:500 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);transition:background var(--t-schnell),color var(--t-schnell)}
.demo-leiste button:last-child{border-right:0}
.demo-leiste button:hover{color:var(--text);background:rgba(255,255,255,.03)}
.demo-leiste button[aria-pressed="true"]{background:var(--gold-verlauf);color:#1a1205;font-weight:700}

/* C: Bewegung nur auf Klick — volle Breite, Kino */
.demo-c{padding:0}
.video-flaeche{position:relative;min-height:clamp(440px,68vh,680px);display:flex;align-items:flex-end;overflow:hidden;background:#000}
.video-flaeche>img,.video-flaeche video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.video-schleier{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,8,12,.94),rgba(6,8,12,.5) 55%,rgba(6,8,12,.12)),linear-gradient(180deg,transparent 45%,rgba(6,8,12,.75));transition:opacity var(--t-lang)}
.video-flaeche.spielt .video-schleier{opacity:.45}
.video-inhalt{position:relative;z-index:2;padding-block:clamp(2.5rem,6vw,5rem)}
.video-flaeche.spielt .video-start{display:none}
.video-steuer{display:none;position:absolute;right:var(--seite);bottom:1.4rem;z-index:3;min-height:44px;padding:0 1.2rem;background:rgba(6,8,12,.75);border:1px solid var(--linie-3);color:var(--text);cursor:pointer;font:500 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.video-flaeche.spielt .video-steuer{display:inline-flex;align-items:center}
.demo-c>.demo-unter{padding-top:0;margin-top:1.2rem}

/* D: Komposition — Bauplan-Schemata */
.demo-d-kopf{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);column-gap:2rem;align-items:start}
.demo-d-kopf .nr{grid-row:1/3}
.demo-d-kopf h3{margin:0}
.demo-d-kopf p{grid-column:3;grid-row:1}
.wire-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,2vw,1.6rem);margin-top:2.6rem}
.wire{margin:0}
.wire figcaption{margin-top:.9rem;font:500 .68rem/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.wire-bild{position:relative;display:grid;gap:6px;aspect-ratio:3/4;padding:10px;background:var(--f2) linear-gradient(var(--linie) 1px,transparent 1px) 0 0/22px 22px;border:1px solid var(--linie-2)}
.wire-bild::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--linie) 1px,transparent 1px) 0 0/22px 22px;pointer-events:none}
.wire-bild i{position:relative;background:rgba(150,172,206,.14);border:1px solid var(--linie-3)}
.wire-bild b{position:relative;align-self:center;width:46%;height:12px;background:var(--gold)}
.wire-std{grid-template-columns:repeat(3,1fr);grid-template-rows:1.7fr 1fr .35fr .35fr}
.wire-std i:nth-child(1){grid-column:1/-1}
.wire-std i:nth-child(5){grid-column:1/-1}
.wire-std b{grid-column:1/-1}
.wire-a{grid-template-columns:1fr 1fr;grid-template-rows:.6fr .5fr .5fr .6fr}
.wire-a i:nth-child(1){grid-column:1;grid-row:1}
.wire-a i:nth-child(2){grid-column:1;grid-row:2}
.wire-a i:nth-child(3){grid-column:1;grid-row:3}
.wire-a i:nth-child(4){grid-column:2;grid-row:1/4}
.wire-a b{grid-column:1;grid-row:4}
.wire-b{grid-template-columns:1fr 1fr;grid-template-rows:1.3fr .5fr .5fr .4fr}
.wire-b i:nth-child(1){grid-column:1/-1;grid-row:1}
.wire-b i:nth-child(2){grid-column:1;grid-row:2/4;margin-right:26%}
.wire-b i:nth-child(3){grid-column:2;grid-row:3/5;margin-left:26%}
.wire-b i:nth-child(4){grid-column:1;grid-row:4;width:50%}
.wire-b b{grid-column:2;grid-row:2;margin-left:26%}
.wire-c{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr)}
.wire-c i:nth-child(1){grid-column:1/5;grid-row:1/4}
.wire-c i:nth-child(2){grid-column:3/7;grid-row:3/6;background:rgba(233,194,116,.16);border-color:var(--gold-tief)}
.wire-c i:nth-child(3){grid-column:1/3;grid-row:5/7}
.wire-c i:nth-child(4){grid-column:5/7;grid-row:1/3}
.wire-c b{grid-column:3/5;grid-row:6}
.leistung-fuss{padding-block:clamp(3rem,7vw,6rem) clamp(5rem,9vw,8rem)}
.leistung-zeile{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:2rem;padding-block:1.8rem;border-top:1px solid var(--linie-2)}
.leistung-zeile:last-child{border-bottom:1px solid var(--linie-2)}
.leistung-zeile h3{font:500 .72rem/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding-top:.4rem}
.leistung-zeile p{color:var(--text-2);max-width:46em}
.leistung-zeile p+p{margin-top:.8rem}

@media (max-width:860px){
  .demo-a-in,.demo-b-in{grid-template-columns:minmax(0,1fr)}
  .demo-b .demo-text{order:-1}
  .welt{grid-template-columns:1fr;aspect-ratio:auto;grid-template-rows:auto 1fr}
  .welt>div{padding:1.4rem}
  .w-immo img{order:-1}
  .welt img{height:11rem}
  .w-baeck img{width:70%;margin:1.2rem auto 0;height:12rem}
  .w-eis img{height:11rem;margin:1rem}
  .adapt-geraet[data-breite="tablet"]{width:78%}
  .adapt-geraet[data-breite="handy"]{width:52%}
  .video-flaeche{min-height:560px}
  .demo-d-kopf{grid-template-columns:auto minmax(0,1fr)}
  .demo-d-kopf p{grid-column:1/-1;grid-row:auto;margin-top:1rem}
  .wire-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leistung-zeile{grid-template-columns:minmax(0,1fr);gap:.6rem}
}

/* ================= PROJEKTE ================= */
.beispiele{position:relative;padding-top:clamp(5rem,10vw,9rem);overflow-x:clip}
.bsp-kopf{margin-bottom:clamp(2rem,5vw,4rem)}
.bsp-index{position:fixed;right:clamp(.6rem,1.6vw,1.6rem);top:50%;z-index:45;display:none;flex-direction:column;gap:.1rem;transform:translate(14px,-50%);opacity:0;visibility:hidden;transition:opacity var(--t-mittel),transform var(--t-mittel) var(--ease),visibility 0s linear var(--t-mittel)}
.bsp-index.an{opacity:1;visibility:visible;transform:translate(0,-50%);transition-delay:0s}
.bsp-index a{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;min-height:44px;padding:0 .2rem 0 .8rem;text-decoration:none;font:500 .66rem/1 var(--mono);letter-spacing:.14em;color:var(--text-3);position:relative;transition:color var(--t-schnell)}
.bsp-index a::after{content:"";width:14px;height:1px;background:currentColor;transition:width var(--t-mittel) var(--ease),background var(--t-mittel)}
.bsp-index a:hover,.bsp-index a.jetzt{color:var(--text)}
.bsp-index a.jetzt::after{width:30px;background:var(--gold)}
.bsp-index a.jetzt b{color:var(--gold)}
.bsp-index b{font-weight:500}
@media (min-width:1180px){.bsp-index{display:flex}}

.projekt{--atm:#1d0c08;--glow:rgba(214,100,40,.34);--akz:#f59a4b;position:relative;min-height:min(92svh,900px);padding-block:clamp(4rem,7.5vw,7rem);background:var(--atm);overflow:clip;isolation:isolate}
.projekt-licht{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--grund) 0,rgba(10,13,19,0) 24%,rgba(10,13,19,0) 76%,var(--grund) 100%),radial-gradient(64% 58% at var(--lx,72%) 42%,var(--glow),transparent 72%)}
.projekt-in{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(.8rem,2vw,2rem);row-gap:1.6rem;align-items:center}
.projekt-gross{position:absolute;z-index:0;top:50%;left:0;font:800 clamp(14rem,30vw,28rem)/.8 var(--anzeige);letter-spacing:-.08em;color:transparent;-webkit-text-stroke:1px var(--akz);opacity:.2;pointer-events:none;user-select:none;translate:calc((var(--p,.5) - .5) * -140px) -50%}
.projekt-kopf,.projekt-rumpf,.pm{position:relative;z-index:2}
.projekt-nr{display:flex;align-items:center;gap:1rem;font:500 .72rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--text-2);margin-bottom:1.3rem}
.projekt-nr b{color:var(--akz);font-weight:500}
.projekt-nr::after{content:"";width:3rem;height:1px;background:var(--akz);opacity:.7}
.beispiele .titel{font-size:clamp(2.6rem,6vw,5.8rem)}
.projekt-kopf h3{font:700 clamp(2.2rem,5.6vw,5.2rem)/.92 var(--anzeige);letter-spacing:-.05em;overflow-wrap:normal;hyphens:none}
.projekt-rumpf p{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.55;color:var(--text-2);max-width:26em}
.projekt-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0}
.projekt-tags li{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem .9rem;border:1px solid var(--linie-3);font:500 .7rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.projekt-tags li::before{content:"";width:5px;height:5px;background:var(--akz)}
.projekt-link{display:inline-flex;align-items:center;gap:1rem;min-height:52px;padding:0 0 0 1.3rem;border:1px solid var(--akz);color:var(--text);text-decoration:none;font-weight:650;transition:background var(--t-mittel) var(--ease),color var(--t-mittel)}
.projekt-link span[aria-hidden]{align-self:stretch;width:52px;border-left:1px solid var(--akz);background:var(--akz);-webkit-mask:none;position:relative}
.projekt-link span[aria-hidden]::after{content:"";position:absolute;inset:0;background:#10100e;-webkit-mask:url("pfeil-r.svg") center/18px no-repeat;mask:url("pfeil-r.svg") center/18px no-repeat;transition:transform var(--t-mittel) var(--ease)}
.projekt-link:hover{background:rgba(255,255,255,.06)}
.projekt-link:hover span[aria-hidden]::after{transform:translateX(4px)}

/* Gerätepaar: Desktop (.fx) + Handy (.hx), gemeinsam perspektivisch; Mitlauf nur über das Einzelattribut translate */
.pm{display:block;color:inherit;text-decoration:none;perspective:1800px}
.fx{position:relative;display:block;border-radius:10px;overflow:hidden;background:#05070a;border:1px solid rgba(255,255,255,.14);box-shadow:0 60px 110px -30px rgba(0,0,0,.92),0 0 90px -30px var(--glow);translate:0 calc((.5 - var(--p,.5)) * 56px);transition:transform var(--t-lang) var(--ease)}
.fx-bar{display:flex;align-items:center;gap:.4rem;height:26px;padding:0 .7rem;background:#161c29;border-bottom:1px solid var(--linie-2)}
.fx-bar i{width:7px;height:7px;border-radius:50%;background:#2c364b}
.fx img{width:100%;aspect-ratio:1200/750;object-fit:cover}
.hx{position:absolute;display:block;width:24%;aspect-ratio:312/675;padding:4px;border-radius:clamp(12px,1.8vw,24px);background:linear-gradient(150deg,#56617a 0%,#161b26 34%,#0b0e14 62%,#3a4358 100%);box-shadow:0 40px 80px -18px rgba(0,0,0,.95),0 0 60px -20px var(--glow),inset 0 0 0 1px rgba(255,255,255,.08);translate:0 calc((.5 - var(--p,.5)) * -110px);transition:transform var(--t-lang) var(--ease)}
.hx img{width:100%;height:100%;object-fit:cover;border-radius:calc(clamp(12px,1.8vw,24px) - 3px)}
.pm:hover .fx{transform:translateY(-8px)}
.pm:hover .hx{transform:translateY(-14px)}

/* --- 01 Pizzeria: Text links, Geräte rechts, Glut von rechts --- */
.p-pizza{--atm:#1b0b07;--glow:rgba(222,92,34,.36);--akz:#f59a4b;--lx:78%}
.p-pizza .projekt-kopf{grid-column:1/6;grid-row:1}
.p-pizza .projekt-rumpf{grid-column:1/6;grid-row:2;align-self:start}
.p-pizza .pm{grid-column:6/13;grid-row:1/3}
.p-pizza .fx{transform:rotateY(-9deg) rotateX(3deg)}
.p-pizza .hx{right:-3%;bottom:-9%}
.p-pizza .projekt-gross{left:-2%}

/* --- 02 Barbershop: Geräte links, Text rechts, Anthrazit mit Barber-Rot --- */
.p-barber{--atm:#14110f;--glow:rgba(200,58,40,.3);--akz:#e4553f;--lx:22%}
.p-barber::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(-58deg,rgba(228,85,63,.055) 0 2px,transparent 2px 28px);-webkit-mask:linear-gradient(90deg,#000,transparent 60%);mask:linear-gradient(90deg,#000,transparent 60%)}
.p-barber .pm{grid-column:1/8;grid-row:1/3}
.p-barber .projekt-kopf{grid-column:8/13;grid-row:1;align-self:end}
.p-barber .projekt-rumpf{grid-column:8/13;grid-row:2;align-self:start}
.p-barber .projekt-kopf h3{text-transform:uppercase;letter-spacing:-.02em;font-weight:800;font-size:clamp(2.2rem,4.3vw,4.3rem)}
.p-barber .fx{transform:rotateY(9deg) rotateX(3deg)}
.p-barber .hx{left:-3%;right:auto;bottom:-9%}
.p-barber .projekt-gross{left:auto;right:0}

/* --- 03 Bäckerei: volle Breite, Titel über allem, Gerät mittig --- */
.p-baeck{--atm:#191208;--glow:rgba(236,172,74,.3);--akz:#f0b450;--lx:50%}
.p-baeck .projekt-kopf{grid-column:1/13;grid-row:1;text-align:center}
.p-baeck .projekt-kopf .projekt-nr{justify-content:center}
.p-baeck .projekt-kopf .projekt-nr::after{display:none}
.p-baeck .projekt-kopf h3{font-size:clamp(2.2rem,5.6vw,5.2rem);font-weight:200;letter-spacing:-.06em;line-height:.85;background:linear-gradient(180deg,#fff1cf 10%,#f0b450 60%,#9b6a25);-webkit-background-clip:text;background-clip:text;color:transparent}
.p-baeck .pm{grid-column:2/12;grid-row:2}
.p-baeck .projekt-rumpf{grid-column:4/10;grid-row:3;text-align:center;justify-self:center}
.p-baeck .projekt-rumpf p{margin-inline:auto}
.p-baeck .projekt-tags{justify-content:center}
.p-baeck .fx{transform:rotateX(4deg)}
.p-baeck .hx{right:-2%;bottom:-10%;width:19%}
.p-baeck .projekt-gross{left:50%;translate:calc(-50% + (var(--p,.5) - .5) * -140px) -50%;opacity:.1}

/* --- 04 Kickz: Titel überlappt das Gerät, schräg, Lime --- */
.p-kickz{--atm:#0a0d07;--glow:rgba(176,232,48,.22);--akz:#c6f24a;--lx:38%}
.p-kickz .pm{grid-column:1/9;grid-row:1/3}
.p-kickz .projekt-kopf{grid-column:6/13;grid-row:1;align-self:start;margin-top:-1.5rem;z-index:4}
.p-kickz .projekt-rumpf{grid-column:9/13;grid-row:2;align-self:end;padding-left:1rem}
.p-kickz .projekt-kopf h3{font-size:clamp(2.2rem,5.6vw,5.2rem);font-weight:800;text-transform:uppercase;letter-spacing:-.06em;transform:skewX(-9deg);color:var(--akz)}
.p-kickz .fx{transform:rotate(-3deg);border-color:rgba(198,242,74,.3)}
.p-kickz .hx{right:2%;bottom:-14%;width:24%;transform:rotate(5deg)}
.p-kickz .projekt-gross{left:auto;right:0;-webkit-text-stroke-color:var(--akz)}

/* --- 05 Novum: breite Kinoleinwand, schmale Textspalte mit Goldlinie --- */
.p-novum{--atm:#09121f;--glow:rgba(70,118,210,.3);--akz:#d8b56a;--lx:60%}
.p-novum .projekt-kopf{grid-column:1/5;grid-row:1;align-self:end;padding-left:1.6rem;border-left:1px solid var(--akz)}
.p-novum .projekt-rumpf{grid-column:1/5;grid-row:2;align-self:start;padding-left:1.6rem;border-left:1px solid var(--akz)}
.p-novum .pm{grid-column:5/13;grid-row:1/3;margin-right:calc(-1 * clamp(0rem,(100vw - var(--breite)) / 2 + var(--seite) - 1.5rem,10rem))}
.p-novum .projekt-kopf h3{font-weight:300;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(1.5rem,2.5vw,2.4rem);line-height:1.15}
.p-novum .projekt-nr{letter-spacing:.3em}
.p-novum .fx{transform:rotateY(-5deg);border-color:rgba(216,181,106,.35)}
.p-novum .hx{right:5%;bottom:-11%;width:21%}

/* --- 06 Eiszeit: Handy zuerst, Desktop dahinter, weiche Pastelltöne --- */
.p-eis{--atm:#170f1e;--glow:rgba(255,142,186,.3);--akz:#ff9ec4;--lx:30%}
.p-eis .pm{grid-column:1/8;grid-row:1/3;padding:0 0 3rem 14%}
.p-eis .projekt-kopf{grid-column:8/13;grid-row:1;align-self:end}
.p-eis .projekt-rumpf{grid-column:8/13;grid-row:2;align-self:start}
.p-eis .projekt-kopf h3{font-weight:800;letter-spacing:-.06em;color:#ffd3e3}
.p-eis .fx{transform:rotateY(8deg) scale(.92);opacity:.92;border-radius:26px;border-color:rgba(255,158,196,.3)}
.p-eis .fx-bar{display:none}
.p-eis .hx{position:absolute;left:0;bottom:0;width:34%;border-radius:34px;padding:5px;z-index:2}
.p-eis .hx img{border-radius:29px}
.p-eis .projekt-tags li{border-radius:999px}
.p-eis .projekt-link{border-radius:999px;overflow:hidden;padding-left:1.5rem}

.bsp-schluss{position:relative;padding-block:clamp(4rem,8vw,7rem);background:var(--grund)}
.bsp-schluss-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem 4rem;padding-top:3rem;border-top:1px solid var(--linie-2)}
.bsp-schluss p{font:300 clamp(1.6rem,3vw,2.6rem)/1.15 var(--anzeige);letter-spacing:-.035em;max-width:24em}

@media (max-width:860px){
  .projekt{min-height:0;padding-block:clamp(3.5rem,14vw,5rem)}
  .projekt-in{grid-template-columns:minmax(0,1fr);row-gap:1.4rem}
  .projekt .projekt-kopf,.projekt .projekt-rumpf,.projekt .pm{grid-column:1/-1;grid-row:auto;margin:0;padding:0;border:0;text-align:left;justify-self:stretch;align-self:auto}
  .projekt .projekt-kopf{order:1}.projekt .pm{order:2;margin-bottom:2.2rem}.projekt .projekt-rumpf{order:3}
  .projekt-gross{font-size:clamp(10rem,54vw,16rem);top:2.6rem;translate:0 0;left:auto;right:0}
  .projekt .projekt-kopf .projekt-nr{justify-content:flex-start}
  .projekt .projekt-kopf .projekt-nr::after{display:block}
  .projekt .projekt-tags{justify-content:flex-start}
  .projekt .projekt-rumpf p{margin-inline:0}
  .projekt-kopf h3,.p-baeck .projekt-kopf h3,.p-kickz .projekt-kopf h3{font-size:clamp(2.2rem,9vw,2.6rem)}
  .p-novum .projekt-kopf h3{font-size:clamp(1.5rem,6vw,2.2rem)}
  .fx,.p-pizza .fx,.p-barber .fx,.p-baeck .fx,.p-kickz .fx,.p-novum .fx,.p-eis .fx{transform:none;translate:none}
  .hx,.p-pizza .hx,.p-barber .hx,.p-baeck .hx,.p-kickz .hx,.p-novum .hx{right:-1%;left:auto;bottom:-9%;width:27%;transform:none;translate:none}
  .p-eis .pm{padding:0 0 2.4rem 18%}
  .p-eis .hx{left:0;right:auto;width:36%}
  .p-eis .fx{border-radius:18px}
  .pm:hover .fx,.pm:hover .hx{transform:none}
  .bsp-schluss-in{flex-direction:column;align-items:flex-start}
}

/* ================= PAKETE (Startseite): Stufenleiter ================= */
.pak-kopf .regel{color:var(--text-2);max-width:32em}
.pak-kopf .regel strong{display:block;margin-bottom:.6rem;color:var(--gold-hell);font-weight:650}
.pak-cta{margin-top:1.6rem;display:flex}
.leiter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;border-bottom:1px solid var(--linie-3)}
.sk{position:relative;display:flex;flex-direction:column;gap:1.2rem;padding:clamp(1.6rem,2.6vw,2.7rem);border:1px solid var(--linie-2);border-bottom:0}
.sk+.sk{margin-left:-1px}
.sk{--sk-pad:clamp(1.6rem,2.6vw,2.7rem)}
.sk-1{background:var(--f1)}
.sk-2{background:var(--f2);border-color:var(--linie-3);padding-top:calc(var(--sk-pad) + 5rem)}
.sk-3{background:linear-gradient(180deg,#232c40 0%,#161b27 50%,#0f131c);border-color:rgba(233,194,116,.5);box-shadow:0 -50px 100px -50px rgba(233,194,116,.35);padding-top:calc(var(--sk-pad) + 10rem)}
.sk::before{position:absolute;top:2.6rem;right:1.4rem;font:800 clamp(4.5rem,7vw,7rem)/.8 var(--anzeige);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px var(--linie-3);pointer-events:none}
.sk-1::before{content:"01"}.sk-2::before{content:"02"}.sk-3::before{content:"03";-webkit-text-stroke-color:rgba(233,194,116,.55)}
.sk-nr{font:500 .7rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--text-3)}
.sk-3 .sk-nr{color:var(--gold)}
.flagge{position:absolute;top:0;right:0;padding:.5rem .9rem;background:var(--gold-verlauf);color:#1a1205;font:700 .64rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase}
.sk h3{font-size:clamp(2.1rem,3.6vw,3.4rem);letter-spacing:-.05em;line-height:.95}
.sk-1 h3{font-weight:300}.sk-2 h3{font-weight:540}.sk-3 h3{font-weight:800}
.sk .fuer{color:var(--text-2);font-size:1.02rem;line-height:1.55}
.sk ul{display:flex;flex-direction:column}
.sk li{padding:.85rem 0 .85rem 1.3rem;border-top:1px solid var(--linie);font-size:.95rem;line-height:1.5;color:var(--text-2);position:relative}
.sk li::before{content:"";position:absolute;left:0;top:1.45rem;width:.6rem;height:1px;background:var(--gold)}
.sk-preis{margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--linie-2);display:flex;flex-direction:column;gap:.35rem}
.sk-preis .lab{font:500 .66rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.sk-preis strong{font:300 clamp(2.6rem,4.6vw,4.2rem)/1 var(--anzeige);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.sk-2 .sk-preis strong{font-weight:520}.sk-3 .sk-preis strong{font-weight:800;background:var(--gold-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.sk-preis .danach{font-size:.9rem;color:var(--text-2)}
.sk .btn{align-self:flex-start}
.pak-fuss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem);padding-top:2.2rem;color:var(--text-2);font-size:.95rem}
.pak-fuss p+p{margin-top:.7rem}
.pak-fuss strong{color:var(--text)}
.pak-fuss a{color:var(--gold-hell);text-underline-offset:.2em}
@media (max-width:980px){
  .leiter{grid-template-columns:minmax(0,1fr);border-bottom:0;gap:1px}
  .sk,.sk-1,.sk-2,.sk-3{min-height:0;padding-top:var(--sk-pad);border:1px solid var(--linie-2);margin-left:0;box-shadow:none}
  .sk::before{top:1.4rem}
  .sk-1{border-left:2px solid var(--linie-3)}.sk-2{border-left:4px solid var(--gold-tief)}.sk-3{border-left:6px solid var(--gold)}
  .sk .btn{align-self:stretch;justify-content:space-between}
  .pak-fuss{grid-template-columns:minmax(0,1fr)}
}

/* ================= ABLAUF ================= */
.ablauf-raster{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,6vw,7rem);align-items:start}
.ablauf-kopf{position:sticky;top:calc(var(--kopf-h) + 2rem)}
.ablauf-kopf .sek-gross{top:-.7em;right:auto;left:0}
.ablauf-kopf .etikett,.ablauf-kopf .titel,.ablauf-kopf .brauche{position:relative;z-index:1}
.ablauf-kopf .titel{margin-top:1.4rem;font-size:clamp(2.2rem,4.4vw,4rem)}
.brauche{margin-top:2.6rem;padding:1.6rem 1.7rem;background:var(--f2);border:1px solid var(--linie-2);border-left:2px solid var(--gold)}
.brauche h3{font:500 .7rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.brauche li{padding:.55rem 0 .55rem 1.2rem;position:relative;font-size:.95rem;color:var(--text-2);border-top:1px solid var(--linie)}
.brauche li:first-child{border-top:0}
.brauche li::before{content:"";position:absolute;left:0;top:1.2rem;width:.5rem;height:1px;background:var(--gold)}
.brauche .klein{margin-top:1rem}
.schritte{position:relative;padding-top:.4rem}
.schritte::before{content:"";position:absolute;left:1.45rem;top:0;bottom:0;width:1px;background:var(--linie-2)}
.schritte::after{content:"";position:absolute;left:1.45rem;top:0;bottom:0;width:1px;background:var(--gold-verlauf);transform-origin:top;transform:scaleY(var(--tl,1))}
.schritte li{position:relative;display:grid;grid-template-columns:2.9rem minmax(0,1fr);gap:1.5rem;padding-bottom:2.8rem}
.schritte li:last-child{padding-bottom:0}
.sn{position:relative;z-index:1;display:grid;place-items:center;width:2.9rem;height:2.9rem;background:var(--f1);border:1px solid var(--gold);font:500 .78rem/1 var(--mono);color:var(--gold)}
.schritte h3{font:600 clamp(1.3rem,2vw,1.65rem)/1.15 var(--anzeige);letter-spacing:-.03em;margin:.45rem 0 .6rem}
.schritte p{color:var(--text-2);max-width:36em}

/* ================= PERSÖNLICH ================= */
.ich-raster{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.ich .titel{margin:1.4rem 0 1.8rem}
.belege{position:relative;padding:2rem 2rem 1.6rem;background:var(--f2);border:1px solid var(--linie-2);counter-reset:b}
.belege::before{content:"";position:absolute;top:-1px;left:-1px;width:40%;height:2px;background:var(--gold-verlauf)}
.belege h3{font:500 .7rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.belege li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);padding:1.05rem 0;border-top:1px solid var(--linie);counter-increment:b;color:var(--text-2);font-size:.98rem;line-height:1.55}
.belege li::before{content:counter(b,decimal-leading-zero);font:500 .7rem/1.9 var(--mono);color:var(--gold);letter-spacing:.1em}
.belege li strong{color:var(--text)}
.belege .klein{margin-top:.8rem}

/* ================= FRAGEN ================= */
.fragen-raster{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(2rem,6vw,7rem);align-items:start}
.fragen-kopf{position:sticky;top:calc(var(--kopf-h) + 2rem)}
.fragen-kopf .titel{margin:1.4rem 0 1.4rem;font-size:clamp(2.2rem,4.4vw,4rem)}
.fragen-kopf .link-pfeil{margin-top:1.4rem}
.frage{border-top:1px solid var(--linie-2)}
.frage:last-child{border-bottom:1px solid var(--linie-2)}
.frage summary{display:flex;justify-content:space-between;align-items:center;gap:1.4rem;min-height:70px;padding:1.05rem 0;cursor:pointer;list-style:none;font:500 clamp(1.05rem,1.6vw,1.3rem)/1.3 var(--anzeige);letter-spacing:-.02em;transition:color var(--t-schnell)}
.frage summary::-webkit-details-marker{display:none}
.frage summary:hover{color:var(--gold-hell)}
.frage summary::after{content:"";flex:none;width:20px;height:20px;background:linear-gradient(var(--gold),var(--gold)) center/100% 1.5px no-repeat,linear-gradient(var(--gold),var(--gold)) center/1.5px 100% no-repeat;transition:transform var(--t-mittel) var(--ease)}
.frage[open] summary{color:var(--gold-hell)}
.frage[open] summary::after{transform:rotate(45deg)}
.frage p{padding:0 3.2rem 1.7rem 0;color:var(--text-2);max-width:42em}

/* ================= ANFRAGE ================= */
.anfrage{overflow:clip}
.anfrage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(50% 55% at 12% 20%,rgba(233,194,116,.1),transparent 70%),radial-gradient(50% 60% at 100% 100%,rgba(64,96,160,.2),transparent 70%)}
.anfrage-raster{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.anfrage-kopf{position:sticky;top:calc(var(--kopf-h) + 2rem)}
.anfrage-kopf .titel{margin:1.4rem 0 1.6rem;font-size:clamp(2.2rem,4.3vw,3.9rem)}
.anfrage-kopf .titel:focus{outline:0}
.ablaufkurz{counter-reset:a;margin-top:2.2rem;display:grid;gap:0;border-top:1px solid var(--linie-2)}
.ablaufkurz li{display:grid;grid-template-columns:2.4rem minmax(0,1fr);padding:1rem 0;border-bottom:1px solid var(--linie-2);counter-increment:a;color:var(--text-2)}
.ablaufkurz li::before{content:counter(a,decimal-leading-zero);font:500 .72rem/1.9 var(--mono);color:var(--gold);letter-spacing:.1em}
.direkt{margin-top:2.4rem;display:flex;flex-direction:column;gap:.3rem}
.direkt span{font:500 .68rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.direkt a{display:inline-flex;align-items:center;min-height:44px;width:fit-content;font:300 clamp(1.25rem,2vw,1.7rem)/1.2 var(--anzeige);letter-spacing:-.02em;color:var(--gold-hell);text-decoration:none;background:linear-gradient(var(--gold),var(--gold)) 0 calc(100% - 6px)/100% 1px no-repeat}
.direkt a:hover{color:var(--gold)}
.formular{position:relative;padding:clamp(1.4rem,3.4vw,3rem);background:linear-gradient(180deg,var(--f3),var(--f2));border:1px solid var(--linie-3);box-shadow:0 70px 120px -50px rgba(0,0,0,.9)}
.formular::before{content:"";position:absolute;top:-1px;left:-1px;width:46%;height:2px;background:var(--gold-verlauf)}
.formular h3{font:600 1.7rem/1.1 var(--anzeige);letter-spacing:-.03em}
.intro{margin:.8rem 0 1.8rem;color:var(--text-2);font-size:.95rem}
.ohne-js{padding:1rem 1.2rem;border:1px solid var(--linie-3);color:var(--text-2);margin-bottom:1rem}
.js .ohne-js{display:none}
.feld-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem 1.4rem}
.feld.voll{grid-column:1/-1}
.feld label{display:block;margin-bottom:.5rem;font:600 .84rem/1.3 var(--fliess);color:var(--text-2)}
.opt-hinweis{font-weight:400;color:var(--text-3)}
.feld input,.feld select,.feld textarea,.nachricht-kopie{width:100%;min-height:52px;padding:.8rem 1rem;background:var(--f0);border:1px solid var(--linie-2);border-radius:2px;color:var(--text);transition:border-color var(--t-schnell),box-shadow var(--t-schnell)}
.feld textarea{min-height:150px;resize:vertical;line-height:1.55}
.feld select{appearance:none;-webkit-appearance:none;padding-right:2.8rem;background:var(--f0) url("pfeil.svg") no-repeat right 1rem center/16px}
.feld select option{background:var(--f2);color:var(--text)}
.feld input::placeholder,.feld textarea::placeholder{color:var(--text-3);opacity:1}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--linie-3)}
.feld input:focus,.feld select:focus,.feld textarea:focus,.nachricht-kopie:focus{outline:2px solid transparent;border-color:var(--gold);box-shadow:0 0 0 3px rgba(233,194,116,.26)}
.hat-fehler input,.hat-fehler select{border-color:var(--fehler)}
.fehler-text{display:none;margin-top:.45rem;font-size:.85rem;color:var(--fehler)}
.hat-fehler .fehler-text{display:block}
.fehler-uebersicht{display:none;margin-bottom:1.4rem;padding:1rem 1.2rem;background:rgba(255,154,141,.07);border:1px solid rgba(255,154,141,.45);border-left:3px solid var(--fehler);color:var(--text)}
.fehler-uebersicht.zeigen-sich{display:block}
.fehler-uebersicht:focus{outline:2px solid var(--gold);outline-offset:2px}
.fehler-uebersicht ul{margin-top:.6rem;display:grid;gap:.2rem}
.fehler-uebersicht a{color:var(--fehler);display:inline-flex;align-items:center;min-height:32px}
.senden{margin-top:1.8rem}
.datenschutz-hinweis{margin-top:1.2rem;font-size:.85rem;color:var(--text-3);max-width:40em}
.textlink{display:inline-flex;align-items:center;min-height:44px;margin-top:.4rem;color:var(--gold-hell);font-size:.9rem;text-underline-offset:.2em}
.gesendet{display:none}
.gesendet.zeigen-sich{display:block}
.gesendet:focus{outline:0}
.gesendet h3{font-size:clamp(1.8rem,3vw,2.4rem)}
.gesendet>p{margin:1rem 0 1.6rem;color:var(--text-2);max-width:36em}
.aktionen{display:flex;flex-wrap:wrap;gap:.9rem}
#nichtsGeoeffnet{margin-top:2rem;border-top:1px solid var(--linie-2);padding-top:1rem}
#nichtsGeoeffnet summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--gold-hell);font-weight:600}
#nichtsGeoeffnet p{margin:.8rem 0 1rem;color:var(--text-2);font-size:.95rem}
.kopiert{min-height:1.6em;margin-top:.8rem;font-size:.9rem;color:var(--text-2)}
.kopiert.ok{color:var(--erfolg)}
.nachricht-kopie{margin-top:.8rem;min-height:190px;font:.82rem/1.55 var(--mono);resize:vertical}

@media (max-width:980px){
  .ablauf-raster,.ich-raster,.fragen-raster,.anfrage-raster{grid-template-columns:minmax(0,1fr)}
  .ablauf-kopf,.fragen-kopf,.anfrage-kopf{position:static}
  .ablauf-kopf .sek-gross{right:-2%;left:auto}
}
@media (max-width:620px){
  .feld-raster{grid-template-columns:minmax(0,1fr)}
  .formular{padding:1.3rem 1.1rem}
  .schritte li{grid-template-columns:2.6rem minmax(0,1fr);gap:1rem}
  .schritte::before,.schritte::after{left:1.3rem}
  .sn{width:2.6rem;height:2.6rem}
  .frage p{padding-right:0}
  .belege{padding:1.5rem 1.2rem 1.2rem}
}