/* Startseite (Kopfbühne, Beispiele, Preis & Leistung, Ablauf, Fragen, Anfrage) sowie Bibliothek (/beispiele) und Konfigurator-Seite (/konfigurator).
   Seit 16.10.2026 ohne die früheren Abschnitte Leistung A–E, Projektbühnen und Stufenleiter (gesichert in _internal/archiv/startseite-2026-10-16/).
   Grundlage (Tokens, Schrift, Navigation, Knöpfe, Fuß): site.css. Scroll-Mitlauf über --hp (Kopf) und --tl (Zeitleiste des Ablaufs), 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.3rem);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}

/* Raum: WebGL-Szene über der gesamten Kopfbühne (assets/raum.js); die CSS-Bühne darunter bleibt Rückfall und gibt die Maße vor */
canvas.raum{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity .9s var(--ease)}
html.raum-bereit canvas.raum{opacity:1}
html.raum .b-rahmen{transition:opacity .7s var(--ease)}
html.raum.raum-bereit .b-rahmen{opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility 0s .7s}
html.raum-bereit .buehne.wischt .fenster-flaeche img{transition:none}

/* Bühne: echte Ansichten der Beispielseiten, räumlich gesetzt (Perspektive), Maßlinien wie im Entwurf */
.buehne{grid-area:buehne;position:relative;margin:0;touch-action:pan-y}
.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:78%;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:not(.b-pizza),.handy-flaeche img:not(.b-pizza){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)}
/* Bewegungsfilm der Folie (CSS-Bühne am Handy und als Rückfall): liegt über dem Standbild (gleiches erstes Bild), wird erst eingeblendet, wenn er wirklich läuft.
   Ebenen: altes Standbild < alter Film (z 1, bis der Wisch fertig ist) < neues Standbild (z 2) < neuer Film (z 3). Nie ein schwarzes Zwischenbild: ohne laufenden Film bleibt das Standbild. */
.fenster-flaeche video,.handy-flaeche video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:1;pointer-events:none;background:#000;transition:opacity .35s var(--ease)}
.fenster-flaeche video.spielt,.handy-flaeche video.spielt{opacity:1}
.fenster-flaeche video.vorn,.handy-flaeche video.vorn{z-index:3}
/* Ablage der Videoelemente der WebGL-Szene (nicht sichtbar, aber im Dokument) */
.film-lager{position:absolute;left:0;top:0;width:2px;height:2px;overflow:hidden;opacity:0;pointer-events:none;z-index:-1}
.film-lager video{width:2px;height:2px}
.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}
/* Pizza (nur CENERE): ruhig verankert statt schwebend. Standbild (Freisteller) als Rückfall und bis die echte 3D-Pizza läuft:
   .b-pizza-d = Computerfenster, an der Stelle der Seite rechts der Überschrift (nur Rückfall ohne WebGL) · .b-pizza-h + canvas.pizza-handy = Handybildschirm,
   obere Hälfte wie auf der mobilen Seite (die Pizza dreht sich dort live, assets/pizza-handy.js). Die Pizza liegt auf dem Bildschirm und überdeckt weder Text noch Knöpfe. */
.b-pizza{position:absolute;aspect-ratio:1;object-fit:contain;pointer-events:none;z-index:5;transition:opacity .4s var(--ease)}
.b-pizza-d{left:61.2%;top:23.6%;width:35.5%;height:auto;z-index:3;filter:drop-shadow(0 14px 14px rgba(0,0,0,.55))}
.b-pizza-h{left:10.5%;top:5.3%;width:79%;height:auto;filter:drop-shadow(0 8px 8px rgba(0,0,0,.5))}
canvas.pizza-handy{display:none;position:absolute;left:10.5%;top:5.3%;width:79%;aspect-ratio:1;z-index:5;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
html.pizza-live canvas.pizza-handy{opacity:1}
html.pizza-live .b-pizza-h{opacity:0}
.buehne:not([data-folie="cenere"]) .b-pizza,.buehne:not([data-folie="cenere"]) canvas.pizza-handy{opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.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)}
/* Beschriftung, Steuerung und Positionsanzeige der Diashow: feste Höhen, damit beim Wechsel nichts springt */
.buehne-leiste{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;column-gap:1.1rem;margin-top:.5rem;padding:0 .4rem;min-height:56px;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-titel{margin:0;display:flex;flex-direction:column;gap:.45rem;min-width:0}
.buehne-titel b{font-weight:500;color:var(--text-3);letter-spacing:.2em;font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buehne-titel span{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buehne-link{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;padding:0 .2rem;color:var(--gold-hell);text-decoration:none;white-space:nowrap}
.buehne-link span:first-child{background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size var(--t-mittel) var(--ease)}
.buehne-link:hover span:first-child,.buehne-link:focus-visible span:first-child{background-size:100% 1px}
.buehne-link .pf{width:18px;height:1px;background:currentColor;position:relative;transition:width var(--t-mittel) var(--ease)}
.buehne-link .pf::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.buehne-link:hover .pf{width:26px}
.buehne-steuerung{display:flex;align-items:center;gap:.35rem}
.stbtn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-width:44px;min-height:44px;padding:0;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),background var(--t-schnell)}
.stbtn:hover{border-color:var(--gold);color:var(--gold-hell)}
.stbtn i{display:block}
.pf-l,.pf-r{width:9px;height:9px;border-top:2px solid currentColor;border-left:2px solid currentColor}
.pf-l{transform:rotate(-45deg);margin-left:4px}
.pf-r{transform:rotate(135deg);margin-right:4px}
.pause{padding:0 .95rem;min-width:7.8rem}   /* feste Breite: „Pause“ ↔ „Abspielen“ verschiebt nichts */
.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.ruhig .pause{display:none}
/* Ruhemodus („Bewegung reduzieren“ im System): Knopf „Bewegung abspielen“ anstelle von Pause; Standard bleibt das Standbild */
.bew{padding:0 .7rem;gap:.5rem;color:var(--gold-hell);border-color:var(--gold-tief);letter-spacing:.04em;font-size:.62rem;white-space:nowrap}
.bew[hidden]{display:none}
.bew i{width:0;height:0;border:5px solid transparent;border-left:9px solid currentColor;border-right:0}
@media (max-width:1180px){.bew-b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}   /* schmale Bühne: sichtbar nur „Abspielen“ (das Wort „Bewegung“ bleibt im Namen des Knopfs) */
.bew:hover{background:rgba(233,194,116,.08)}
.bew:focus-visible{outline:2px solid var(--gold-hell);outline-offset:2px}
.buehne-takte{display:flex;gap:6px;margin:.2rem 0 0;padding:0 .4rem;list-style:none}
.buehne-takte li{flex:1;min-width:0}
.buehne-takte button{position:relative;display:block;width:100%;height:44px;padding:0;border:0;background:none;cursor:pointer}
.buehne-takte button::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--linie-2);transition:background var(--t-schnell)}
.buehne-takte button:hover::before{background:var(--text-3)}
.buehne-takte button.fertig::before{background:var(--gold-tief)}
.buehne-takte button span{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--gold);transform-origin:left;transform:scaleX(0);pointer-events:none}
.buehne-takte button.jetzt::before{background:var(--linie-3)}
.buehne-takte button:focus-visible{outline:2px solid var(--gold-hell);outline-offset:1px}
.buehne.ruhig .buehne-takte button.jetzt span{transform:scaleX(1)!important}

/* 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}
.fakten-hinweis{margin:1.1rem 0 0;max-width:68ch}

@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}
  /* Handykomposition (bewusst eigene, keine verkleinerte Computeransicht): Das Handy ist das große, vordere Gerät und trägt die Pizza (wie die mobile Seite selbst),
     der Computer steht dahinter und wird nur von seiner leeren Pizzafläche her überdeckt – die Überschrift im Fenster bleibt frei. Feste Fläche: nichts springt beim Wechsel. */
  .b-rahmen{padding:2.1rem .2rem 2.9rem}
  .b-szene{perspective:none}
  .b-geraete{width:min(100%,34rem);margin:0 auto;aspect-ratio:354/300;transform:none}
  .fenster{position:absolute;left:0;top:13%;width:69%}
  .handy{right:1%;top:0;bottom:auto;width:38%;transform:none}
  .mass-d{top:calc(13% - 1.7rem);width:69%}
  .mass-h{right:1%;bottom:-2.2rem;width:38%;transform:none}
  .b-pizza-d{display:none}
  canvas.pizza-handy{display:block}
  .buehne-leiste{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"z t" "l s";row-gap:.2rem;min-height:116px}
  .buehne-zaehler{grid-area:z}
  .buehne-titel{grid-area:t}
  .buehne-link{grid-area:l}
  .buehne-steuerung{grid-area:s;justify-self:end}
  .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}}


/* Eckdaten-Streifen im Kopf mit drei Angaben */
.fakten.fakten-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fakten.fakten-3>div:nth-child(2){border-right:1px solid var(--linie)}
.fakten.fakten-3>div:nth-child(n+3){border-top:0}
.fakten.fakten-3>div:nth-child(3){padding-left:1.6rem;border-right:0}
.fakten dd small a,.intro a{color:var(--gold-hell);text-underline-offset:.2em}
@media (max-width:700px){
  .fakten.fakten-3{grid-template-columns:minmax(0,1fr)}
  .fakten.fakten-3>div,.fakten.fakten-3>div+div,.fakten.fakten-3>div:nth-child(3){padding:1.1rem 0;border-right:0;border-bottom:1px solid var(--linie)}
  .fakten.fakten-3>div:last-child{border-bottom:0}
}

/* ================= BEISPIELE (Startseite): fünf Karten + eine Einladung, Bibliothek auf /beispiele ================= */
.beispiele{overflow-x:clip}
.bsp-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);list-style:none;margin:0;padding:0}
.bsp-karte{--akz:var(--gold);position:relative;display:flex;flex-direction:column;background:var(--f1);border:1px solid var(--linie-2);border-top:2px solid var(--akz);transition:border-color var(--t-mittel),transform var(--t-mittel) var(--ease),box-shadow var(--t-mittel)}
.bsp-karte:hover{border-color:var(--linie-3);border-top-color:var(--akz);transform:translateY(-3px);box-shadow:0 34px 60px -34px rgba(0,0,0,.85)}
.bsp-karte:focus-within{outline:2px solid var(--gold-hell);outline-offset:3px}
.bsp-industrie{--akz:#5fd2ff}.bsp-immobilien{--akz:#d4b184}.bsp-handwerk{--akz:#d59b5c}.bsp-praxis{--akz:#8fc0a0}.bsp-cenere{--akz:#ff8a47}
.bsp-bild{position:relative;overflow:hidden;aspect-ratio:8/5;background:var(--f0)}
.bsp-bild .bsp-d{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.bsp-bild .bsp-h{position:absolute;right:5%;bottom:-16%;width:22%;height:auto;border:1px solid var(--linie-3);border-radius:9px;box-shadow:0 18px 36px -10px rgba(0,0,0,.8)}
.bsp-text{display:flex;flex-direction:column;gap:.55rem;flex:1;padding:1.25rem 1.35rem 1.5rem}
.bsp-marke{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;font:500 .68rem/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--akz)}
.bsp-marke i{font-style:normal;color:var(--text-3)}
.bsp-karte h3{margin:0;font:700 clamp(1.5rem,2vw,1.85rem)/1.1 var(--anzeige);letter-spacing:-.035em}
.bsp-karte h3 a{color:var(--text);text-decoration:none}
.bsp-karte h3 a::after{content:"";position:absolute;inset:0;z-index:1}   /* die ganze Karte ist der Link (ein Link je Karte, kein Doppelverweis) */
.bsp-karte p{margin:0;color:var(--text-2);font-size:.95rem;line-height:1.55}
.bsp-mehr{margin-top:auto;padding-top:.8rem;font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hell)}
.bsp-mehr::after{content:" →"}
.bsp-frei{justify-content:center;gap:1rem;padding:clamp(1.4rem,2.4vw,2.2rem);border-style:dashed;border-top-style:dashed;border-color:var(--linie-3);background:transparent}
.bsp-frei:hover{transform:none;box-shadow:none}
.bsp-frei p.anzeige{font:300 clamp(1.5rem,2.3vw,2.1rem)/1.15 var(--anzeige);letter-spacing:-.035em;color:var(--text)}
.bsp-frei p.anzeige strong{font-weight:760}
.bsp-frei .link-pfeil{align-self:flex-start}
.bsp-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:clamp(1.4rem,3vw,2.4rem);padding-top:1.4rem;border-top:1px solid var(--linie-2)}
.bsp-fuss .klein{max-width:60ch;margin:0}

/* ================= PREIS & LEISTUNG ================= */
.preis{overflow-x:clip}
.preis-raster{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1.2rem,2.6vw,2.4rem);align-items:stretch}
.preis-karte{position:relative;display:flex;flex-direction:column;gap:1.3rem;padding:clamp(1.5rem,3vw,2.6rem);background:linear-gradient(180deg,var(--f3),var(--f2));border:1px solid var(--linie-3)}
.preis-karte::before{content:"";position:absolute;top:-1px;left:-1px;width:42%;height:2px;background:var(--gold-verlauf)}
.preis-etikett{margin:0;font:500 .68rem/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.preis-zahl{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin:0}
.preis-zahl b{font:300 clamp(3.2rem,6.4vw,5.6rem)/.95 var(--anzeige);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--text)}
.preis-zahl span{font:400 .95rem/1.4 var(--fliess);color:var(--text-2);max-width:26ch}
.preis-karte h3{margin:0;font:600 1.15rem/1.3 var(--anzeige);letter-spacing:-.02em;color:var(--text)}
.preis-liste{display:grid;gap:0;margin:0;padding:0;list-style:none}
.preis-liste li{position:relative;padding:.7rem 0 .7rem 1.4rem;border-top:1px solid var(--linie);color:var(--text-2);font-size:.97rem;line-height:1.5}
.preis-liste li:first-child{border-top:0}
.preis-liste li::before{content:"";position:absolute;left:0;top:1.28rem;width:.6rem;height:1px;background:var(--gold)}
.preis-liste li strong{color:var(--text);font-weight:600}
.preis-nicht{margin:0;padding:1rem 1.1rem;border:1px dashed var(--linie-3);color:var(--text-3);font-size:.9rem;line-height:1.55}
.preis-nicht strong{color:var(--text-2);font-weight:600}
.preis-alt{margin:0;color:var(--text-2);max-width:34em}
.preis-mehr{display:flex;flex-direction:column;gap:1.1rem;padding:clamp(1.5rem,3vw,2.4rem);background:var(--f1);border:1px solid var(--linie-2)}
.preis-mehr h3{margin:0;font:300 clamp(1.7rem,2.6vw,2.3rem)/1.1 var(--anzeige);letter-spacing:-.04em;color:var(--text)}
.preis-mehr h3 strong{font-weight:760}
.preis-mehr p{margin:0;color:var(--text-2);line-height:1.6}
.preis-mehr .aktionen{margin-top:auto;padding-top:.6rem}
.preis-mehr .klein{margin-top:0}
.preis-fakten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(1.6rem,4vw,2.8rem) 0 0;border-top:1px solid var(--linie-2);position:relative}
.preis-fakten::before{content:"";position:absolute;top:-1px;left:0;width:34%;height:1px;background:var(--gold-verlauf)}
.preis-fakten>div{padding:1.4rem 1.4rem 1.6rem 0;border-right:1px solid var(--linie)}
.preis-fakten>div+div{padding-left:1.6rem}
.preis-fakten>div:last-child{border-right:0}
.preis-fakten dt{font:500 .68rem/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.preis-fakten dd{margin:.6rem 0 0;font:300 clamp(1.3rem,2vw,1.8rem)/1.1 var(--anzeige);letter-spacing:-.03em;color:var(--text)}
.preis-fakten dd small{display:block;margin-top:.5rem;font:400 .85rem/1.5 var(--fliess);letter-spacing:0;color:var(--text-3);max-width:34ch}
.preis-hinweis{margin:1.1rem 0 0;max-width:70ch}

/* ================= Bibliothek (/beispiele) ================= */
.bib-kopf{padding-top:calc(var(--kopf-h) + clamp(3rem,7vw,6rem));padding-bottom:clamp(2rem,4vw,3rem)}
.bib-kopf .titel{margin:1.4rem 0 1.4rem}
.bib-liste{display:grid;gap:clamp(1rem,2vw,1.6rem);list-style:none;margin:0;padding:0 0 clamp(3rem,6vw,5rem)}
.bib-eintrag{--akz:var(--gold);position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.2rem,3vw,2.6rem);align-items:center;padding:clamp(1rem,2vw,1.6rem);background:var(--f1);border:1px solid var(--linie-2);border-left:3px solid var(--akz)}
.bib-eintrag:focus-within{outline:2px solid var(--gold-hell);outline-offset:3px}
.bib-bild{position:relative;overflow:hidden;aspect-ratio:8/5;background:var(--f0);border:1px solid var(--linie-2)}
.bib-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.bib-text{display:flex;flex-direction:column;gap:.7rem}
.bib-marke{margin:0;font:500 .68rem/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--akz)}
.bib-text h2{margin:0;font:700 clamp(1.7rem,3vw,2.5rem)/1.05 var(--anzeige);letter-spacing:-.04em}
.bib-text h2 a{color:var(--text);text-decoration:none}
.bib-text h2 a::after{content:"";position:absolute;inset:0;z-index:1}
.bib-text p{margin:0;color:var(--text-2);max-width:40em}
.bib-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 0;padding:0;list-style:none}
.bib-tags li{padding:.2rem .6rem;border:1px solid var(--linie-3);border-radius:99px;font:500 .64rem/1.4 var(--mono);letter-spacing:.06em;color:var(--text-2)}
.bib-link{margin-top:.4rem;font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hell)}
.bib-link::after{content:" →"}
.bib-unten{padding-block:clamp(2.4rem,5vw,4rem);border-top:1px solid var(--linie-2)}
.bib-unten-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 3rem}
.bib-unten p{margin:0;font:300 clamp(1.5rem,2.6vw,2.2rem)/1.2 var(--anzeige);letter-spacing:-.035em;max-width:24em}
.bib-unten .aktionen{align-items:center}

/* ================= Konfigurator-Seite (/konfigurator) ================= */
.konf-kopf{padding-top:calc(var(--kopf-h) + clamp(3rem,7vw,5.5rem));padding-bottom:clamp(1.4rem,3vw,2.4rem)}
.konf-kopf .sek-kopf{margin-bottom:clamp(1.6rem,4vw,3rem)}
.konf-kopf h1.titel{margin-top:1.4rem}
.konf-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 1.4rem;padding:0;list-style:none;counter-reset:ks;border-top:1px solid var(--linie-2)}
.konf-schritte li{counter-increment:ks;padding:1rem 1.2rem 1rem 0;border-right:1px solid var(--linie);color:var(--text-2);font-size:.95rem;line-height:1.45}
.konf-schritte li+li{padding-left:1.2rem}
.konf-schritte li:last-child{border-right:0}
.konf-schritte li::before{content:counter(ks,decimal-leading-zero);display:block;margin-bottom:.35rem;font:500 .7rem/1 var(--mono);letter-spacing:.14em;color:var(--gold)}
.konf-schritte b{color:var(--text);font-weight:600}
.konf-weg{margin:0;padding:1rem 1.2rem;border:1px solid var(--linie-2);border-left:2px solid var(--gold);background:var(--f1);color:var(--text-2);font-size:.95rem;line-height:1.55;max-width:62em}
.konf-weg strong{color:var(--text);font-weight:600}
.konf-beratung{margin:0 0 1.6rem}
.konf-beratung .konf-opt-k{border-style:dashed}
.konf-seite-haupt{padding-bottom:clamp(2rem,5vw,4rem)}
.konf-naechste{margin:1.4rem 0 0;color:var(--text-2);font-size:.95rem;line-height:1.6;max-width:62em}
.konf-naechste strong{color:var(--text)}
.konf-form-zusammen{margin:0 0 1.4rem}
@media (max-width:900px){
  .konf-schritte{grid-template-columns:minmax(0,1fr)}
  .konf-schritte li,.konf-schritte li+li{padding:.9rem 0;border-right:0;border-bottom:1px solid var(--linie)}
}

@media (max-width:1100px){
  .bsp-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .preis-raster{grid-template-columns:minmax(0,1fr)}
  .bib-eintrag{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .bsp-raster{grid-template-columns:minmax(0,1fr)}
  .preis-fakten{grid-template-columns:minmax(0,1fr)}
  .preis-fakten>div,.preis-fakten>div+div{padding:1.1rem 0;border-right:0;border-bottom:1px solid var(--linie)}
  .preis-fakten>div:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  html:not(.bewegung-an) .bsp-karte{transition:none}
  html:not(.bewegung-an) .bsp-karte:hover{transform:none}
}


/* ================= 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}
}

/* Handy: Pause-Knopf nur als Symbol (der Text bleibt für Hilfstechniken im Knopf), damit Link und drei Knöpfe auch bei „Abspielen“ in eine Zeile passen */
@media (max-width:560px){
  .pause{padding:0;min-width:44px}
  .pause > span:not(.sr-only),.bew > span:not(.sr-only){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bew{padding:0;min-width:44px}
  .buehne-steuerung{gap:.25rem}
}
@media (max-width:420px){.buehne-takte{gap:2px;padding:0}}   /* sieben Positionsknöpfe: so breit wie möglich (Tippfläche) */
@media (max-width:380px){.buehne-link{gap:.5rem;letter-spacing:.1em}}
@media (prefers-reduced-motion:reduce){
  html:not(.bewegung-an) .buehne.wischt .fenster-flaeche img.aktiv, html:not(.bewegung-an) .buehne.wischt .handy-flaeche img.aktiv{transition:none}
  html:not(.bewegung-an) .fenster-flaeche video, html:not(.bewegung-an) .handy-flaeche video{transition:none}
  html:not(.bewegung-an) .fenster-flaeche::after{animation:none}
}

/* Bibliothek: Akzentfarbe je Beispiel (wie die Karten der Startseite) */
.bib-eintrag[data-akz="industrie"]{--akz:#5fd2ff}.bib-eintrag[data-akz="immobilien"]{--akz:#d4b184}.bib-eintrag[data-akz="handwerk"]{--akz:#d59b5c}.bib-eintrag[data-akz="praxis"]{--akz:#8fc0a0}.bib-eintrag[data-akz="cenere"]{--akz:#ff8a47}.bib-eintrag[data-akz="friseur"]{--akz:#8294ff}

/* Firefox-Fund 16.10.2026: die Umrissziffer „03“ im Ablauf ragt am Handy 8 px über den Rand (Firefox zählt das als Überlauf); wie bei den anderen Abschnitten abschneiden */
.ablauf{overflow-x:clip}

/* Konfigurator-Seite: Auswahlbereich als eigener Abschnitt (die feste Leiste unten erscheint erst hier, nicht über der Einleitung) */
.konf-haupt{padding-top:clamp(.5rem,2vw,1.5rem);padding-bottom:clamp(3rem,6vw,5rem)}
/* Link im Ablauf (Schritt 05) zur Video-Anleitung /einrichtung */
.schritte .schritt-link{margin-top:.7rem}