/* =========================================================================
   Solveit-Services GmbH — Landingpage IT-Umzug München
   Rezept „Kabelplan“ (B2B/Produkt): heller Grund, Logo-Blau trägt Text und
   Knöpfe, Cyan nur als Licht auf Dunkel (Hero, Szene, Fußzeile).
   Schrift: Archivo (Display) · Instrument Sans (Text) · Lora
   kursiv (ein Akzentwort je Überschrift) · JetBrains Mono (Etiketten). Lokal.
   Bewegung: Charakter „Präzise“ — 0,45 s, --e-soft, 10 px.
   ========================================================================= */

@property --sicht{syntax:'<number>';inherits:true;initial-value:1}
@property --tp{syntax:'<number>';inherits:false;initial-value:.6}

:root{
  /* Navy — Hero, Szene, Fußzeile */
  --n0:#061224;        /* #FFF darauf 18.75 · --d2 11.87 · --d4 7.11 */
  --n1:#0A1A33;        /* #FFF darauf 17.38 · --d2 11.0 · --d4 6.59 */
  --n2:#102544;        /* #FFF darauf 15.33 · --d2 9.70 · --d4 5.81 */
  --n3:#18345C;        /* #FFF darauf 12.47 · --d2 7.89 · --d4 4.72 */
  /* Logo-Blau — trägt Text und Knöpfe auf Hell */
  --blau:#0A5493;      /* auf #FFF 7.77 · auf --fl 7.23 · auf --fl2 6.77 · #FFF darauf 7.77 */
  --blau-d:#0B3F75;    /* #FFF darauf 10.59 */
  --blau-h:#1667B8;    /* #FFF darauf 5.73 (Hover) */
  /* Cyan — nur Licht auf Dunkel, nie Text auf Hell */
  --cyan:#3FD9F2;      /* auf --n0 11.09 · auf --n1 10.28 · auf #FFF 1.69 → nur Deko · --n0 darauf 11.09 */
  --cyan-h:#7FE3F5;    /* auf --n1 11.76 */
  /* Flächen */
  --weiss:#FFFFFF;     /* --t1 darauf 18.27 · --t3 5.74 */
  --fl:#F4F7FB;        /* --t1 darauf 17.0 · --t3 5.34 */
  --fl2:#EAF0F7;       /* --t1 darauf 15.93 · --t2 8.19 · --t3 5.00 · --blau 6.77 */
  --linie:#DCE4EE;     /* nur Rahmen/Trenner, nie Text · auf #FFF 1.28 */
  /* Tinte */
  --t1:#0B1526;        /* auf --fl 17.0 */
  --t2:#3A475C;        /* auf #FFF 9.39 · auf --fl 8.74 */
  --t3:#5B6779;        /* auf #FFF 5.74 · auf --fl 5.34 */
  /* Text auf Dunkel */
  --d1:#FFFFFF;        /* auf --n1 17.38 · auf --n3 12.47 */
  --d2:#C3CFDD;        /* auf --n1 11.0 */
  --d3:#A9B8CC;        /* auf --n1 8.62 */
  --d4:#8FA1B8;        /* auf --n1 6.59 · auf --n3 4.72 */
  /* Status */
  --gruen:#22C55E;     /* Deko · auf --n1 7.63 */
  --gruen-h:#4ADE80;   /* auf --n1 9.97 */
  --gruen-t:#15803D;   /* Text auf #FFF 5.02 */
  --rot:#B91C1C;       /* Text auf #FFF 6.47 */
  --rot-d:#DC2626;     /* Deko */
  --petrol:#0E7490;    /* auf #FFF 5.36 */

  /* Zwei Verläufe: einer trägt Text, einer ist nur Deko */
  --verlauf:linear-gradient(135deg,#0A5493 0%,#0B3F75 100%);        /* #FFF darauf ≥ 7.77 */
  --verlauf-deko:linear-gradient(90deg,#0A5493 0%,#3FD9F2 100%);    /* nie unter Text */

  --r-knopf:10px; --r-karte:20px; --r-gross:26px;
  --sch-1:0 1px 2px rgba(11,21,38,.04),0 2px 6px rgba(11,21,38,.03);
  --sch-2:0 1px 2px rgba(11,21,38,.04),0 12px 32px -12px rgba(11,21,38,.06);
  --sch-3:0 2px 4px rgba(11,21,38,.04),0 24px 56px -24px rgba(11,21,38,.06);

  --f-display:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-serif:"Lora",Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --e-soft:cubic-bezier(.22,1,.36,1);
  --e-calm:cubic-bezier(.25,1,.3,1);
  --spring:linear(0,.28 7.6%,.79 17%,.99 22.4%,1.06 26%,1.08 30%,1.03 39%,1 50%,1 100%);

  --wrap:1200px;
  --sek:clamp(76px,8.5vw,128px);
}
@supports (animation-timing-function: linear(0,1)){
  :root{
    --e-soft:linear(0,.0492,.1613,.2979,.4356,.5617,.6701,.759,.8294,.8833,.9233,.9521,.9721,.9857,.9944,.9996,1.0026,1.0039,1.0043,1.0042,1.0037,1.0031,1.0025,1);
    --e-calm:linear(0,.1012,.28,.4507,.5905,.6983,.779,.8387,.8824,.9143,.9376,.9546,.967,.976,.9825,.9873,.9907,.9933,.9951,.9964,.9974,.9981,.9986,1);
  }
}

/* ---------- Grundlage ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px;background:var(--weiss)}
body{margin:0;font-family:var(--f-text);font-size:16px;line-height:1.62;letter-spacing:-.011em;color:var(--t2);background:var(--weiss);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;letter-spacing:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);color:var(--t1);font-weight:600;text-wrap:balance}
p{margin:0}
p,li{text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
code{font-family:var(--f-mono)}
:focus-visible{outline:3px solid var(--blau-h);outline-offset:3px;border-radius:6px}
::selection{background:var(--blau);color:#fff}
input{caret-color:var(--blau)}
.glas input{caret-color:var(--cyan)}
.hero :focus-visible,.szene :focus-visible,.fuss :focus-visible,.glas :focus-visible{outline-color:var(--cyan)}
.wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}

/* Überschriften: genau ein kursives Serifenwort */
.nw{white-space:nowrap}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1em;line-height:.9;color:var(--blau)}
.h2{font-size:clamp(1.72rem,1.15rem + 1.6vw,2.35rem);line-height:1.14;letter-spacing:-.024em}
.h2 br{display:block}
.kicker{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1rem;font-size:.75rem;font-weight:500;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--blau)}
.kicker i{width:22px;height:22px;border-radius:8px;display:grid;place-items:center;background:var(--fl2);color:var(--blau);flex:none}
.kicker svg{width:14px;height:14px}
.kicker--hell{color:var(--cyan)}
.kicker--hell i{background:rgba(63,217,242,.12);color:var(--cyan)}
.lead{font-size:1.06rem;line-height:1.62;color:var(--t2);max-width:38rem}
.kopfblock{max-width:44rem;margin-bottom:clamp(2.2rem,3.6vw,3.2rem)}
.kopfblock--mitte{margin-inline:auto;text-align:center}
.kopfblock--mitte .lead{margin-inline:auto}
.sek{padding-block:var(--sek);position:relative}

/* ---------- Knöpfe -------------------------------------------------------- */
.btn{--h:52px;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:var(--h);
  padding:.5rem 1.25rem;border-radius:var(--r-knopf);border:1px solid transparent;cursor:pointer;
  font-family:var(--f-text);font-size:.98rem;font-weight:600;line-height:1.2;letter-spacing:-.006em;text-decoration:none;white-space:nowrap;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .25s var(--ease),transform .18s var(--spring)}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}}
.btn:active{transform:scale(.975)}
.btn svg{width:19px;height:19px;flex:none;transition:transform .25s var(--e-soft)}
@media (hover:hover){.btn:hover svg[aria-hidden]:last-child:not(:first-child){transform:translateX(3px)}}
.btn--p{background:var(--blau);color:#fff}
.btn--p:hover{background:var(--blau-h);box-shadow:0 0 0 5px rgba(10,84,147,.12)}
.btn--s,.btn--s2{background:var(--weiss);color:var(--t1);border-color:var(--linie)}
.btn--s:hover,.btn--s2:hover{border-color:var(--blau);color:var(--blau)}
.btn--s svg,.btn--s2 svg{color:var(--blau)}
.btn--lg{--h:56px;font-size:1.02rem;padding-inline:1.35rem}
.knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
/* auf Dunkel: Cyan mit Navy-Schrift, Glas als Zweitknopf */
.hero .btn--p,.szene .btn--p,.glas .btn--p{background:var(--cyan);color:var(--n0)}
.hero .btn--p:hover,.szene .btn--p:hover,.glas .btn--p:hover{background:var(--cyan-h);box-shadow:0 0 0 5px rgba(63,217,242,.16)}
.hero .btn--s,.glas .btn--s{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.22)}
.hero .btn--s:hover,.glas .btn--s:hover{background:rgba(255,255,255,.13);border-color:var(--cyan);color:#fff}
.hero .btn--s svg,.glas .btn--s svg{color:var(--cyan)}

/* Haken, die sich zeichnen */
.haken{display:grid;gap:.6rem}
.haken li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:.7rem;align-items:start;line-height:1.5;color:var(--t1)}
.ck{width:24px;height:24px;margin-top:.02rem;border-radius:999px;background:var(--fl2);display:grid;place-items:center}
.ck svg{width:15px;height:15px}
.ck path{fill:none;stroke:var(--blau);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .7s var(--e-calm) var(--ck-d,0ms)}
html:not(.js) .ck path,.is-da .ck path,.ist-da .ck path,.pop:not([hidden]) .ck path{stroke-dashoffset:0}
.haken li:nth-child(1){--ck-d:80ms}.haken li:nth-child(2){--ck-d:230ms}.haken li:nth-child(3){--ck-d:380ms}
.haken li:nth-child(4){--ck-d:530ms}.haken li:nth-child(5){--ck-d:680ms}.haken li:nth-child(6){--ck-d:830ms}
.hero .haken li,.haken--hell li{color:#fff}
.hero .ck,.haken--hell .ck{background:rgba(63,217,242,.14)}
.hero .ck path,.haken--hell .ck path{stroke:var(--cyan)}

/* Reveal: 10 px, einmal */
html.js .rv{opacity:0;transform:translateY(10px);transition:opacity .45s var(--e-soft),transform .45s var(--e-soft)}
html.js .rv.is-da{opacity:1;transform:none}
html.js .rv-g > *{opacity:0;transform:translateY(10px);transition:opacity .45s var(--e-soft),transform .45s var(--e-soft)}
html.js .rv-g.is-da > *{opacity:1;transform:none}
.rv-g.is-da > :nth-child(2){transition-delay:80ms}.rv-g.is-da > :nth-child(3){transition-delay:160ms}
.rv-g.is-da > :nth-child(4){transition-delay:240ms}.rv-g.is-da > :nth-child(5){transition-delay:320ms}
.rv-g.is-da > :nth-child(6){transition-delay:400ms}
@media (max-width:760px){html.js .rv:not(.is-da),html.js .rv-g:not(.is-da) > *{transform:translateY(6px)}}

/* „Beispielansicht“ an jeder nachgebauten Oberfläche */
.etikett-pille{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .55rem;border-radius:999px;background:var(--fl2);color:var(--t3);
  font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;line-height:1.3;white-space:nowrap}
.etikett-pille--dunkel{background:rgba(255,255,255,.08);color:var(--d3)}

/* ---------- Kopfzeile ----------------------------------------------------- */
.kopf{position:fixed;inset:0 0 auto;z-index:900;padding-block:1rem;
  transition:background .26s var(--ease),box-shadow .26s var(--ease),padding .26s var(--ease)}
.kopf__in{display:flex;align-items:center;gap:1.5rem}
.kopf__logo{position:relative;display:flex;align-items:center;min-height:44px;flex:none;line-height:0}
.kopf__logo img{width:auto;height:36px;transition:opacity .26s var(--ease),height .26s var(--ease)}
.kopf__logo-b{position:absolute;left:0;top:0;opacity:0}
.kopf__nav{display:flex;gap:1.6rem;margin-left:auto}
.kopf__nav a{position:relative;text-decoration:none;font-size:.94rem;font-weight:500;color:rgba(255,255,255,.88);transition:color .2s var(--ease)}
.kopf__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;border-radius:2px;background:var(--cyan);transition:right .28s var(--e-soft)}
.kopf__nav a:hover::after{right:0}
.kopf__tel{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:600;color:#fff;font-size:.96rem;white-space:nowrap}
.kopf__tel svg{width:18px;height:18px;color:var(--cyan)}
.kopf .btn{--h:44px;padding-inline:1rem;font-size:.93rem}
.kopf .btn--p{background:var(--cyan);color:var(--n0)}
.kopf .btn--p:hover{background:var(--cyan-h)}
.kopf__ikon{display:none}
.kopf__ikon span{display:none}
.kopf.ist-fest{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 1px 0 var(--linie),0 8px 24px -16px rgba(11,21,38,.06);padding-block:.6rem}
.kopf.ist-fest .kopf__logo img{height:32px}
.kopf.ist-fest .kopf__logo-w{opacity:0}
.kopf.ist-fest .kopf__logo-b{opacity:1}
.kopf.ist-fest .kopf__nav a{color:var(--t2)}
.kopf.ist-fest .kopf__nav a:hover{color:var(--t1)}
.kopf.ist-fest .kopf__nav a::after{background:var(--blau)}
.kopf.ist-fest .kopf__tel{color:var(--t1)}
.kopf.ist-fest .kopf__tel svg{color:var(--blau)}
.kopf.ist-fest .btn--p{background:var(--blau);color:#fff}
.kopf.ist-fest .btn--p:hover{background:var(--blau-h)}

/* ---------- Hero ---------------------------------------------------------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--n0);color:var(--d2);min-height:min(900px,100svh);display:flex;align-items:center;
  padding:clamp(112px,10vw,140px) 0 clamp(124px,10vw,150px)}
.hero__bild{position:absolute;inset:0;z-index:-2}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:64% 50%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(6,18,36,.95) 0%,rgba(6,18,36,.88) 30%,rgba(6,18,36,.6) 52%,rgba(6,18,36,.3) 70%,rgba(6,18,36,.5) 100%),
    linear-gradient(180deg,rgba(6,18,36,.55) 0%,rgba(6,18,36,0) 22%,rgba(6,18,36,0) 70%,rgba(6,18,36,.85) 100%)}
.hero__raster{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(2rem,4.5vw,4.5rem);align-items:center;width:min(var(--wrap),100% - 48px);margin-inline:auto}
/* Formular oben verankert: wächst die Karte von Schritt zu Schritt, springt sie nicht mittig hin und her */
.hero__raster>.st--karte{align-self:start}
.hero h1.hero__kicker{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.15rem;font-family:var(--f-text);font-size:.75rem;font-weight:500;line-height:1.3;
  letter-spacing:.04em;text-transform:uppercase;color:var(--cyan)}
.hero h1.hero__kicker::before{content:"";width:22px;height:22px;flex:none;border-radius:8px;background:rgba(63,217,242,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FD9F2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6-6.5-11a6.5 6.5 0 0113 0c0 5-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E") center/14px no-repeat}
.hero__ansage{font-size:clamp(2.5rem,1.35rem + 3.4vw,4rem);line-height:1.04;letter-spacing:-.038em;font-weight:700;color:#fff}
.hero__ansage .serif{color:var(--cyan);font-size:1.08em;letter-spacing:-.01em}
.hero__text{margin-top:1.3rem;font-size:15.5px;line-height:1.62;max-width:31rem;color:var(--d2)}
.hero .haken{margin-top:1.4rem;gap:.55rem}
.hero .haken li{font-size:.97rem;font-weight:500}
.hero__vertrauen{display:flex;align-items:center;gap:.55rem;margin-top:1.4rem;font-size:.9rem;font-weight:600;color:#fff}
.ul{position:relative;display:inline-block;white-space:nowrap}
.ul::after{content:"";position:absolute;left:-.02em;right:-.04em;top:calc(100% - .14em);height:.2em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 11.5C40 7.5 92 5 198 3.2c-44 3.6-90 6.4-126 9.6C48 14.6 20 14.8 2 11.5Z' fill='%233FD9F2'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--e-calm) .7s}
.hero.ist-da .ul::after,html:not(.js) .ul::after{clip-path:inset(0 0 0 0)}
html.js .hero .st{opacity:0;transform:translateY(10px);transition:opacity .55s var(--e-soft),transform .55s var(--e-soft)}
html.js .hero.ist-da .st{opacity:1;transform:none}
.hero.ist-da .st:nth-child(2){transition-delay:.08s}.hero.ist-da .st:nth-child(3){transition-delay:.16s}
.hero.ist-da .st:nth-child(4){transition-delay:.24s}.hero.ist-da .st:nth-child(5){transition-delay:.32s}
.hero.ist-da .st:nth-child(6){transition-delay:.4s}.hero.ist-da .st--karte{transition-delay:.2s}

/* ---------- Formular-Karte ------------------------------------------------- */
.qk{position:relative;border-radius:var(--r-gross);padding:clamp(1.3rem,2.1vw,1.85rem);color:var(--t2)}
.qk--hell{background:var(--weiss);border:1px solid var(--linie);box-shadow:var(--sch-3)}
.glas{background:#0D1F3B;border:1px solid rgba(255,255,255,.14);color:var(--d2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -34px rgba(0,0,0,.6)}
.qk__titel{font-size:1.28rem;line-height:1.2;letter-spacing:-.02em;color:var(--t1)}
.qk__unter{margin-top:.3rem;font-size:.88rem;color:var(--t3)}
.qk__unter span{display:inline-block}   /* zweiter Satz rutscht als Ganzes in die nächste Zeile */
.glas .qk__titel{color:#fff}
.glas .qk__unter{color:var(--d3)}
.qk__kopf{margin-bottom:1.05rem}
.fortschritt{margin-bottom:1rem}
.fortschritt__zeile{display:flex;justify-content:space-between;gap:1rem;font-size:.76rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--t2)}
.glas .fortschritt__zeile{color:var(--d2)}
.fortschritt__bahn{margin-top:.45rem;height:5px;border-radius:999px;background:var(--fl2);overflow:hidden}
.glas .fortschritt__bahn{background:rgba(255,255,255,.1)}
.fortschritt__f{height:100%;width:33.34%;border-radius:999px;background:var(--verlauf-deko);transition:width .45s var(--e-soft)}
.schritt{border:0;margin:0;padding:0;min-width:0}
.schritt.ist-neu{animation:reinSchritt .34s var(--e-soft)}
@keyframes reinSchritt{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.schritt__frage{font-family:var(--f-display);font-size:1.02rem;font-weight:600;letter-spacing:-.012em;line-height:1.35;color:var(--t1);margin-bottom:.8rem;padding:0}
.glas .schritt__frage{color:#fff}
.felder{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.7rem .6rem}
.feld{display:grid;align-content:start;gap:.28rem;min-width:0;grid-column:span 3}
.feld--voll{grid-column:1/-1}
.feld--plz{grid-column:span 2}
.feld--ort{grid-column:span 4}
.feld label{font-size:.79rem;font-weight:600;color:var(--t1)}
.glas .feld label{color:#fff}
.feld input,.feld select{width:100%;min-height:48px;padding:.6rem .8rem;border:1px solid #CBD6E3;border-radius:var(--r-knopf);background:var(--weiss);
  font:inherit;font-size:16px;color:var(--t1);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.feld input::placeholder{color:var(--t3)}
.feld select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;cursor:pointer;
  background:var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%230A5493' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .8rem center/16px no-repeat}
.feld input:focus,.feld select:focus{outline:none;border-color:var(--blau);box-shadow:0 0 0 3px rgba(10,84,147,.14)}
.glas .feld input,.glas .feld select{background-color:rgba(6,18,36,.45);border-color:rgba(255,255,255,.2);color:#fff}
.glas .feld select{color-scheme:dark;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%233FD9F2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.glas .feld option{background:#0D1F3B;color:#fff}
.feld option{color:var(--t1)}
.feld select:has(option[value=""]:checked){color:var(--t3)}
.glas .feld select:has(option[value=""]:checked){color:var(--d4)}
.glas .feld input::placeholder{color:var(--d4)}
.glas .feld input:focus,.glas .feld select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(63,217,242,.2)}
.feld input.ist-falsch,.feld select.ist-falsch{border-color:var(--rot-d);animation:ruetteln .38s var(--ease)}
.glas .feld input.ist-falsch{border-color:#FF8C8C}
@keyframes ruetteln{0%,100%{transform:translateX(0)}22%{transform:translateX(-4px)}45%{transform:translateX(4px)}68%{transform:translateX(-2px)}86%{transform:translateX(2px)}}
.zustimmung{display:grid;grid-template-columns:20px minmax(0,1fr);gap:.55rem;margin-top:.75rem;font-size:.79rem;line-height:1.45;color:var(--t2);cursor:pointer}
.zustimmung input{width:18px;height:18px;margin:.1rem 0 0;accent-color:var(--blau)}
.zustimmung a{color:var(--blau)}
.glas .zustimmung{color:var(--d2)}
.glas .zustimmung input{accent-color:var(--cyan)}
.glas .zustimmung a{color:var(--cyan-h)}
.mitumzug{display:grid;grid-template-columns:20px minmax(0,1fr);gap:.55rem;margin-top:.15rem;font-size:.86rem;line-height:1.45;color:var(--t1);cursor:pointer}
.mitumzug input{width:18px;height:18px;margin:.1rem 0 0;accent-color:var(--blau)}
.mitumzug span{text-wrap:pretty}
.glas .mitumzug{color:var(--d1)}
.glas .mitumzug input{accent-color:var(--cyan)}
.topf{display:none!important}
.qk__steuer{display:flex;gap:.55rem;margin-top:1.05rem}
.qk__steuer .btn{--h:52px;flex:1}
.qk__steuer .zurueck{flex:0 0 auto;padding-inline:.95rem}
.qk__fehler{display:none;margin-top:.7rem;padding:.55rem .75rem;border-radius:var(--r-knopf);background:#FDF0F0;border:1px solid #F3C7C7;color:var(--rot);font-size:.84rem;font-weight:600;text-wrap:pretty}
.zustimmung span{text-wrap:pretty}   /* CA26: kein Einzelwort in der letzten Zeile (Zustimmung, Meldungen) */
.glas .qk__fehler{background:rgba(255,120,120,.14);border-color:rgba(255,140,140,.35);color:#FFD7D7}
.qk__fehler.ist-an{display:block}
.qk__fehler a{color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.danke h3:focus{outline:none}
.qk__vertrauen{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.1rem;margin-top:.95rem;font-size:.84rem;font-weight:600;color:var(--t1)}
.qk__vertrauen span{display:inline-flex;align-items:center;gap:.35rem}
.qk__vertrauen svg{width:15px;height:15px;color:var(--blau)}
.glas .qk__vertrauen{color:#fff}
.glas .qk__vertrauen svg{color:var(--cyan)}
.qk [hidden]{display:none!important}
.danke{text-align:center;padding:1.2rem .4rem .4rem}
.danke__ic{width:64px;height:64px;margin:0 auto 1rem;border-radius:999px;background:rgba(34,197,94,.14);display:grid;place-items:center}
.danke__ic svg{width:32px;height:32px}
.danke__ic path{fill:none;stroke:var(--gruen-t);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:hakenZ .7s var(--e-calm) .15s forwards}
.glas .danke__ic path{stroke:var(--gruen-h)}
@keyframes hakenZ{to{stroke-dashoffset:0}}
.danke h3{font-size:1.28rem;color:var(--t1)}
.glas .danke h3{color:#fff}
.danke p{margin-top:.6rem;font-size:.94rem}
.danke .btn{margin-top:1.1rem}
.btn.laedt{pointer-events:none;opacity:.85}
.btn.laedt::before{content:"";width:16px;height:16px;border-radius:999px;border:2px solid currentColor;border-right-color:transparent;animation:dreh .7s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

/* ---------- Leiste am Hero-Rand -------------------------------------------- */
.leiste{position:relative;z-index:3;margin-top:-64px}
.leiste__raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:var(--r-karte);background:var(--weiss);border:1px solid var(--linie);box-shadow:var(--sch-3)}
.leiste__i{display:flex;gap:.85rem;align-items:flex-start;padding:1.3rem 1.25rem}
.leiste__i + .leiste__i{border-left:1px solid var(--linie)}
.leiste__i i{width:42px;height:42px;flex:none;border-radius:12px;background:var(--fl);display:grid;place-items:center;color:var(--blau)}
.leiste__i svg{width:22px;height:22px;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s var(--e-calm) var(--d,0ms)}
html:not(.js) .leiste__i svg,.leiste__raster.is-da .leiste__i svg{stroke-dashoffset:0}
.leiste__i:nth-child(2){--d:150ms}.leiste__i:nth-child(3){--d:300ms}.leiste__i:nth-child(4){--d:450ms}
.leiste__i b{display:block;font-family:var(--f-display);font-weight:600;font-size:.98rem;letter-spacing:-.014em;color:var(--t1);line-height:1.3}
.leiste__i span{display:block;margin-top:.15rem;font-size:.85rem;line-height:1.45;color:var(--t3)}

/* ---------- Problem --------------------------------------------------------- */
.problem{background:var(--fl)}
.problem__raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.problem .lead{margin-top:1.1rem}
.problem__liste{margin-top:1.4rem;max-width:38rem}
.bon-wrap{filter:drop-shadow(0 2px 3px rgba(11,21,38,.05)) drop-shadow(0 22px 34px rgba(11,21,38,.06))}
.bon{--z:14px;position:relative;max-width:27rem;margin-inline:auto;padding:1.7rem 1.6rem calc(1.9rem + var(--z));background:var(--weiss);border-radius:10px 10px 0 0;transform:rotate(-1.4deg);
  font-family:var(--f-mono);color:var(--t1);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%}
.bon__kopf{text-align:center;padding-bottom:1rem;border-bottom:2px dashed #C9D4E2}
.bon__kopf b{display:block;font-size:.92rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.bon__kopf span{display:block;margin-top:.3rem;font-size:.72rem;color:var(--t3)}
.bon__liste{display:grid;gap:.55rem;padding:1.1rem 0;border-bottom:2px dashed #C9D4E2}
.bon__liste li{display:flex;align-items:baseline;gap:.4rem;font-size:.8rem}
.bon__liste li i{flex:1;min-width:1rem;border-bottom:2px dotted #C9D4E2;transform:translateY(-.25rem)}
.bon__liste li em{font-style:normal;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--rot)}
.bon__rechnung{display:grid;gap:.35rem;padding:1rem 0 .9rem;font-size:.8rem;color:var(--t2)}
.bon__rechnung div{display:flex;justify-content:space-between;gap:1rem}
.bon__rechnung b{font-weight:500;color:var(--t1)}
.bon__summe{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.2rem 1rem;padding-top:.9rem;border-top:2px solid var(--t1)}
.bon__summe span{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--t2);padding-bottom:.4rem}
.bon__summe b{margin-left:auto;font-family:var(--f-display);font-size:clamp(2.1rem,1.6rem + 1.6vw,2.7rem);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--rot)}
.bon__fuss{margin-top:1rem;text-align:center;font-size:.74rem;color:var(--t3)}
/* Bon füllt sich: Posten nacheinander, zuletzt die Summe */
html.js .rv .bon__liste li,html.js .rv .bon__summe b{opacity:0;transform:translateX(8px);transition:opacity .4s var(--e-soft),transform .4s var(--e-soft)}
html.js .rv.is-da .bon__liste li,html.js .rv.is-da .bon__summe b{opacity:1;transform:none}
.rv.is-da .bon__liste li:nth-child(1){transition-delay:.25s}.rv.is-da .bon__liste li:nth-child(2){transition-delay:.4s}
.rv.is-da .bon__liste li:nth-child(3){transition-delay:.55s}.rv.is-da .bon__liste li:nth-child(4){transition-delay:.7s}
.rv.is-da .bon__liste li:nth-child(5){transition-delay:.85s}.rv.is-da .bon__summe b{transition-delay:1.15s}

/* ---------- Szene: Freitag bis Montag (CSS-3D, einzige Live-Bewegung) -------- */
.szene{background:radial-gradient(ellipse 60% 70% at 78% 40%,rgba(22,103,184,.22),rgba(22,103,184,0) 70%),var(--n0);color:var(--d2);overflow:hidden}
.szene .h2{color:#fff}
/* Zweizeilig in der Textspalte: Zeile 1 misst 494 px bei 37,6 px, Spalte 511 px (1440) / 488 px (1180) */
/* Zweispaltig ab 1081 px: steilere Formel, 2,2 rem erst um 1160 px — sonst drei Zeilen bei 1081–1140 */
.szene .h2,.protokoll .h2{font-size:clamp(1.72rem,.18rem + 2.78vw,2.2rem)}
.szene .serif{color:var(--cyan)}
.szene .lead{color:var(--d2);margin-top:1.1rem}
.szene__raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.tage{margin-top:1.8rem;display:grid;gap:.2rem;counter-reset:tag}
.tage li{position:relative;display:grid;grid-template-columns:28px 5.6rem minmax(0,1fr);gap:.75rem;align-items:center;padding:.6rem .75rem;border-radius:var(--r-knopf);
  transition:background .35s var(--ease)}
.tage li::before{content:"";width:22px;height:22px;border-radius:999px;border:1.5px solid rgba(255,255,255,.22);justify-self:center;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.tage b{font-size:.8rem;font-weight:600;letter-spacing:.01em;color:var(--d4);transition:color .3s var(--ease)}
.tage span{font-size:.95rem;color:var(--d3);line-height:1.4;transition:color .3s var(--ease)}
.tage li[data-st="an"]{background:rgba(63,217,242,.07)}
.tage li[data-st="an"]::before{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(63,217,242,.14);background:radial-gradient(circle,var(--cyan) 0 4px,transparent 4.5px)}
.tage li[data-st="an"] b{color:var(--cyan)}
.tage li[data-st="an"] span{color:#fff}
.tage li[data-st="ok"]::before{border-color:var(--gruen);background:var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l3 3L12.4 5' fill='none' stroke='%23061224' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.tage li[data-st="ok"] span{color:var(--d2)}

.buehne-huelle{position:relative}
.buehne{position:relative;aspect-ratio:600/470;border-radius:var(--r-gross);overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 70% 60% at 50% 55%,rgba(63,217,242,.07),rgba(63,217,242,0) 70%),linear-gradient(180deg,#0C1D38,#081428);
  border:1px solid rgba(63,217,242,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 80px -40px rgba(0,0,0,.7);
  transition:opacity .35s var(--ease)}
.buehne.wechsel{opacity:0}
.buehne.wechsel *{transition:none!important}
.buehne.pausiert .inventar{animation-play-state:paused}
html:not(.js) .tag{opacity:1;--tp:1}
html:not(.js) .hud__tag--ok{opacity:1;transform:none}
.skala{position:absolute;left:0;top:0;width:600px;height:470px;transform-origin:0 0;transform:scale(var(--s,1));perspective:1700px;perspective-origin:50% 38%}
.welt{--rz:-38deg;position:absolute;left:80px;top:128px;width:440px;height:300px;transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(var(--rz))}
.boden{position:absolute;inset:0;border-radius:18px;
  background:
    repeating-linear-gradient(0deg,rgba(63,217,242,.07) 0 1px,transparent 1px 20px),
    repeating-linear-gradient(90deg,rgba(63,217,242,.07) 0 1px,transparent 1px 20px),
    linear-gradient(160deg,#122A4D,#0B1C38);
  box-shadow:inset 0 0 0 1px rgba(63,217,242,.22),0 0 60px rgba(63,217,242,.06);transition:box-shadow .8s var(--ease)}
.welt[data-st="mo"] .boden{box-shadow:inset 0 0 0 1px rgba(74,222,128,.4),0 0 80px rgba(34,197,94,.12)}
.boden__ort{position:absolute;left:16px;bottom:12px;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d4);
  opacity:0;transition:opacity .4s var(--ease)}
.boden__ort.an{opacity:1}
html:not(.js) .boden__ort--alt{opacity:1}
.kabel{position:absolute;left:0;top:0;width:440px;height:300px;max-width:none;transform:translateZ(1px);overflow:visible;pointer-events:none}
.kabel path{fill:none;stroke:#2F5A93;stroke-width:2.4;stroke-linejoin:round;stroke-dasharray:1 1.05;stroke-dashoffset:0;
  transition:stroke-dashoffset .7s var(--e-calm) calc(var(--k) * 50ms),stroke .6s var(--ease)}
.welt:is([data-st="ab"],[data-st="sa"]) .kabel path{stroke-dashoffset:1.02}
.welt:is([data-st="so"],[data-st="mo"]) .kabel path{stroke:var(--cyan);transition:stroke-dashoffset .9s var(--e-calm) calc(var(--k) * 230ms + 500ms),stroke .3s var(--ease)}
.welt[data-st="mo"] .kabel{filter:drop-shadow(0 0 3px rgba(63,217,242,.6))}

.inventar{position:absolute;inset:0;transform-style:preserve-3d}
.welt[data-st="sa"] .inventar{animation:umzug 3.6s var(--ease) both}
.welt[data-st="sa"] .inventar *{transition:none!important}
@keyframes umzug{
  0%{transform:none;--sicht:1}
  38%{transform:translate3d(520px,0,0);--sicht:0}
  40%{transform:translate3d(520px,0,0);--sicht:0}
  40.01%{transform:translate3d(-520px,0,0);--sicht:0}
  48%{transform:translate3d(-520px,0,0);--sicht:0}
  92%,100%{transform:none;--sicht:1}
}
.obj{position:absolute;left:var(--x);top:var(--y);transform-style:preserve-3d}
.platz{width:72px;height:40px}
.rack{width:56px;height:64px}
.drucker{width:50px;height:40px}
.box{position:absolute;inset:0;transform-style:preserve-3d}
.box i{position:absolute;display:block;opacity:calc(var(--sicht) * var(--o,1))}
.box .f-t{left:0;top:0;width:100%;height:100%;transform:translateZ(var(--h))}
.box .f-v{left:0;top:calc(100% - var(--h));width:100%;height:var(--h);transform-origin:bottom;transform:rotateX(-90deg)}
.box .f-l{left:0;top:0;width:var(--h);height:100%;transform-origin:left;transform:rotateY(-90deg)}
/* Tisch */
.box--tisch{--h:24px}
.box--tisch .f-t{background:linear-gradient(135deg,#E3EAF3,#C9D5E4);border-radius:2px}
.box--tisch .f-v{background:#7F94B2}
.box--tisch .f-l{background:#62789A}
/* Monitor: steht auf dem Tisch, klappt beim Abbau weg */
.schirm{position:absolute;left:14px;top:-14px;width:44px;height:30px;padding:2.5px;border-radius:3px;background:#0B1526;
  transform-origin:bottom;transform:translateZ(24px) rotateX(-90deg);opacity:var(--sicht);
  transition:transform .6s var(--e-soft) calc(var(--i,0) * 70ms),opacity .4s var(--ease) calc(var(--i,0) * 70ms)}
.schirm i{display:block;width:100%;height:100%;border-radius:2px;background:linear-gradient(160deg,#21456F,#16325A);transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.welt:is([data-st="ab"],[data-st="sa"]) .schirm{transform:translateZ(24.5px) rotateX(0deg);opacity:0}
.welt[data-st="mo"] .schirm i{background:linear-gradient(160deg,#7FE3F5,#1667B8);box-shadow:0 0 14px rgba(63,217,242,.55)}
.welt[data-st="mo"] .platz:nth-child(n) .schirm i{transition-delay:calc(var(--i,0) * 160ms)}
/* Flightcase auf dem Tisch */
.box--case{--h:26px;--o:0;inset:5px auto auto 12px;width:48px;height:30px;transform:translateZ(24px) scale3d(.3,.3,.3);transform-origin:50% 50%;
  transition:transform .5s var(--spring) calc(var(--i,0) * 90ms + 250ms)}
.box--case i{transition:opacity .3s var(--ease) calc(var(--i,0) * 90ms + 250ms)}
.box--case .f-t{background:#1667B8;box-shadow:inset 0 0 0 2px #A9BCD3}
.box--case .f-v{background:#0A5493;box-shadow:inset 0 0 0 2px #A9BCD3}
.box--case .f-v::after{content:"";position:absolute;left:30%;top:30%;width:40%;height:34%;border-radius:1px;background:#F4F7FB}
.box--case .f-l{background:#0B3F75;box-shadow:inset 0 0 0 2px #93A8C2}
.welt:is([data-st="ab"],[data-st="sa"]) .box--case{--o:1;transform:translateZ(24px) scale3d(1,1,1)}
/* Rack */
.box--rack{--h:130px}
.box--rack .f-t{background:#24436E;border-radius:2px}
.box--rack .f-v{background:
  radial-gradient(circle at 18% 50%,var(--led,#3FD9F2) 0 1.6px,transparent 2px) 0 4px/100% 13px repeat-y,
  repeating-linear-gradient(180deg,#142B4C 0 11px,#1D3A63 11px 13px);box-shadow:inset 0 0 0 3px #0E2240}
.box--rack .f-l{background:linear-gradient(180deg,#112849,#0D1F3C)}
.welt[data-st="mo"] .box--rack{--led:#4ADE80}
.box--case-hoch{--h:140px;--o:0;inset:-5px;width:auto;height:auto;transform:scale3d(.85,.85,.2);transition:transform .55s var(--spring) .2s}
.box--case-hoch i{transition:opacity .35s var(--ease) .2s}
.box--case-hoch .f-t{background:#2A3F5F;box-shadow:inset 0 0 0 3px #B4C3D6}
.box--case-hoch .f-v{background:linear-gradient(180deg,#263B5A,#1D2F4A);box-shadow:inset 0 0 0 3px #B4C3D6}
.box--case-hoch .f-v::after{content:"";position:absolute;left:28%;top:12%;width:44%;height:10%;border-radius:1px;background:#F4F7FB}
.box--case-hoch .f-l{background:#1A2B45;box-shadow:inset 0 0 0 3px #9DAFC6}
.welt:is([data-st="ab"],[data-st="sa"]) .box--case-hoch{--o:1;transform:none}
/* Drucker */
.box--drucker{--h:30px}
.box--drucker .f-t{background:linear-gradient(135deg,#EEF2F7,#D2DCE8);box-shadow:inset 0 -6px 0 -3px #95A6BD}
.box--drucker .f-v{background:#B3C1D3}
.box--drucker .f-v::after{content:"";position:absolute;left:18%;right:18%;top:38%;height:3px;border-radius:2px;background:#5E7290}
.box--drucker .f-l{background:#91A3BB}
/* Etiketten: Billboard zur Kamera */
.tag{position:absolute;left:50%;top:50%;display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:6px;white-space:nowrap;
  background:#F4F7FB;color:var(--t1);box-shadow:0 0 0 1px rgba(6,18,36,.35),0 6px 14px -6px rgba(0,0,0,.6);
  font-family:var(--f-mono);font-size:max(11px,calc(9px / var(--s,1)));font-weight:500;line-height:1.2;letter-spacing:.02em;
  transform-origin:0 0;transform:translateZ(var(--z)) rotateZ(calc(-1 * var(--rz))) rotateX(-56deg) scale(var(--tp)) translate(-50%,-100%);
  opacity:0;--tp:.6;transition:opacity .25s var(--ease),--tp .45s var(--spring),background .35s var(--ease) calc(var(--i,0) * 160ms)}
.tag b{font-weight:500}
.tag em{font-style:normal;color:var(--t3);font-size:.86em}
.tag.an{opacity:var(--sicht);--tp:1}
.tag::before{content:"";display:none;width:9px;height:9px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.2 3.2L13 4.6' fill='none' stroke='%23061224' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.rack .tag{--i:6}.drucker .tag{--i:7}
.welt[data-st="mo"] .tag{background:var(--gruen-h)}
.welt[data-st="mo"] .tag::before{display:block}
.welt[data-st="mo"] .tag em{color:#14532D}
/* HUD über der Bühne (nicht skaliert) */
.hud{position:absolute;left:16px;top:16px;z-index:3;height:30px}
.hud__tag{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:.45rem;padding:.38rem .75rem;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,.06);border:1px solid rgba(63,217,242,.28);color:var(--d2);font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.02em;
  opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .4s var(--e-soft)}
.hud__tag::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--cyan)}
.hud__tag.an{opacity:1;transform:none}
.hud__tag--ok{border-color:rgba(74,222,128,.45);color:var(--gruen-h)}
.hud__tag--ok::before{background:var(--gruen-h)}
.woche{position:absolute;right:16px;top:20px;z-index:3;display:flex;gap:4px}
.woche i{display:block;width:38px;padding-top:9px;font-style:normal;font-family:var(--f-mono);font-size:.62rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--d4);
  background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)) top/100% 3px no-repeat;transition:color .3s var(--ease),background-image .3s var(--ease)}
.woche i[data-st="an"]{color:var(--cyan);background-image:linear-gradient(var(--cyan),var(--cyan))}
.woche i[data-st="ok"]{color:var(--d3);background-image:linear-gradient(rgba(63,217,242,.5),rgba(63,217,242,.5))}
.buehne__pille{position:absolute;right:14px;bottom:14px;z-index:3}
.szene__pause{position:absolute;left:14px;bottom:14px;z-index:4;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;min-width:44px;padding:.3rem .9rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(6,18,36,.6);color:var(--d2);cursor:pointer;font-size:.76rem;font-weight:600;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.szene__pause:hover{background:rgba(255,255,255,.1);border-color:var(--cyan);color:#fff}
.szene__pause svg{width:13px;height:13px}
.standbild .szene__pause{display:none}
html:not(.js) .szene__pause{display:none}

/* ---------- Leistungen (vier Karten) ------------------------------------------ */
.leist{background:var(--weiss)}
.k4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.k4__k{display:flex;flex-direction:column;border-radius:var(--r-karte);background:var(--fl);border:1px solid var(--linie);overflow:hidden;
  transition:border-color .2s var(--ease),box-shadow .25s var(--ease)}
@media (hover:hover){.k4__k:hover{border-color:#C3D2E3;box-shadow:var(--sch-2)}.k4__k:hover .k4__bild img{transform:scale(1.035)}}
.k4__bild{aspect-ratio:4/3;overflow:hidden;background:var(--fl2)}
.k4__bild img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e-calm)}
.k4__bild--blau{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;align-content:center;padding:1.1rem;background:var(--verlauf)}
.k4__bild--blau span{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.85rem .4rem;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  font-size:.76rem;font-weight:500;line-height:1.25;text-align:center;color:#E3ECF7}
.k4__bild--blau svg{width:22px;height:22px;color:var(--cyan)}
.k4__text{flex:1;display:flex;flex-direction:column;gap:.5rem;padding:1.2rem 1.2rem 1.3rem}
.k4__nr{display:block;font-size:.84rem;font-weight:600;color:var(--blau)}
.k4__text h3{font-size:1.08rem;line-height:1.3;letter-spacing:-.016em}
.k4__text p{font-size:.92rem;line-height:1.58}
.tag-l{display:flex;flex-wrap:wrap;gap:.4rem}
.tag-l li{padding:.26rem .62rem;border-radius:999px;background:var(--weiss);border:1px solid var(--linie);font-size:.78rem;font-weight:500;line-height:1.35;color:var(--t2)}
.k4__text .tag-l{margin-top:auto;padding-top:.7rem}
/* Kombi-Umzug (Florian 09.10.2026): Band unter den IT-Karten, quer statt als fünfte Karte */
.k4-plus{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1rem 2.6rem;align-items:center;margin-top:1rem;padding:1.35rem 1.6rem;border-radius:var(--r-karte);background:var(--fl);border:1px solid var(--linie)}
.k4-plus__text{display:flex;flex-direction:column;gap:.5rem}
.k4-plus h3{font-size:1.08rem;line-height:1.3;letter-spacing:-.016em}
.k4-plus p{font-size:.92rem;line-height:1.58}
.k4-plus__seite{display:flex;flex-direction:column;gap:.75rem}
.k4-plus__hinweis{color:var(--t3)}

/* ---------- Vergleich ----------------------------------------------------------- */
.vgl{background:var(--fl)}
.vgl__raster{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:1rem;align-items:stretch}
.vglk{border-radius:var(--r-gross);padding:clamp(1.4rem,1.1rem + 1.2vw,2.2rem)}
.vglk--gut{background:var(--verlauf);color:#fff;box-shadow:0 2px 4px rgba(10,84,147,.04),0 30px 60px -30px rgba(10,84,147,.06);position:relative;overflow:hidden}
.vglk__kopf{display:flex;align-items:center;gap:.85rem;min-height:52px;margin-bottom:1.3rem;padding-bottom:1.1rem;border-bottom:1px solid rgba(255,255,255,.16)}
.vglk__kopf img{height:40px;width:auto}
.vglk--gut .haken{gap:.75rem}
.vglk--gut .haken li{font-size:.98rem}
.vglk--grau{background:var(--weiss);border:1px solid var(--linie)}
.vglk--grau .vglk__kopf{border-bottom-color:var(--linie)}
.vglk__leer{width:44px;height:44px;flex:none;border-radius:12px;background:var(--fl2);display:grid;place-items:center;color:var(--t3)}
.vglk__kopf b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:var(--t1);letter-spacing:-.015em}
.vglk__kopf div>span{display:block;font-size:.84rem;color:var(--t3)}
.nein{display:grid;gap:.75rem}
.nein li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:.7rem;align-items:start;line-height:1.5;color:var(--t2);font-size:.96rem}
.nein li::before{content:"";width:24px;height:24px;border-radius:999px;background:#FDF0F0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8l8 8M16 8l-8 8' fill='none' stroke='%23B91C1C' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat}
.vgl__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:1rem;padding:1.2rem 1.4rem;border-radius:var(--r-karte);background:var(--weiss);border:1px solid var(--linie)}
.vgl__fuss p{font-size:.98rem;color:var(--t1);max-width:44rem}

/* ---------- Kabelplan & Übergabe ------------------------------------------------- */
.protokoll{background:var(--weiss)}
.protokoll__raster{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.protokoll .lead{margin-top:1.1rem}
.protokoll__text{margin-top:.9rem;max-width:36rem}
.protokoll .haken{margin-top:1.4rem}
.blatt{position:relative;border-radius:var(--r-karte);background:var(--weiss);border:1px solid var(--linie);box-shadow:var(--sch-3);padding:clamp(1.1rem,.9rem + .8vw,1.6rem)}
.blatt::before{content:"";position:absolute;inset:10px -10px -10px 10px;z-index:-1;border-radius:var(--r-karte);background:var(--fl2);border:1px solid var(--linie)}
.blatt__kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:.9rem;border-bottom:2px solid var(--t1)}
.blatt__kopf b{display:block;font-family:var(--f-display);font-size:1.15rem;font-weight:700;letter-spacing:-.02em;color:var(--t1)}
.blatt__kopf div span{display:block;margin-top:.1rem;font-family:var(--f-mono);font-size:.74rem;color:var(--t3)}
.blatt__sep{font-style:normal}
@media (max-width:374px){.blatt__sep{display:block;height:0;overflow:hidden}} /* Umbruch bewusst ohne hängenden Punkt */
.blatt__tabelle{display:grid;font-size:.86rem}
.blatt__z{display:grid;grid-template-columns:3.2rem minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) 2rem;gap:.6rem;align-items:center;padding:.62rem 0;border-bottom:1px solid #EDF1F6;color:var(--t1)}
.blatt__z--kopf{font-family:var(--f-mono);font-size:.66rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);padding-block:.75rem .5rem}
.blatt__z code{display:inline-block;padding:.12rem .4rem;border-radius:5px;background:#EEF4FB;color:var(--blau);font-size:.76rem;font-weight:500}
.blatt__z span:nth-child(3){font-family:var(--f-mono);font-size:.78rem;color:var(--t3)}
.blatt__z span:nth-child(4){font-family:var(--f-mono);font-size:.78rem;color:var(--blau)}
.blatt__z .ok{justify-self:center;width:24px;height:24px;border-radius:999px;background:rgba(34,197,94,.14);display:grid;place-items:center}
.blatt__z .ok svg{width:14px;height:14px}
.blatt__z .ok path{fill:none;stroke:var(--gruen-t);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;
  transition:stroke-dashoffset .6s var(--e-calm) var(--ok-d,0ms)}
html:not(.js) .blatt__z .ok path,.is-da .blatt__z .ok path{stroke-dashoffset:0}
.blatt__z:nth-child(2){--ok-d:300ms}.blatt__z:nth-child(3){--ok-d:450ms}.blatt__z:nth-child(4){--ok-d:600ms}.blatt__z:nth-child(5){--ok-d:750ms}
.blatt__z:nth-child(6){--ok-d:900ms}.blatt__z:nth-child(7){--ok-d:1050ms}.blatt__z:nth-child(8){--ok-d:1200ms}
.blatt__fuss{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-top:1.1rem;font-size:.86rem;color:var(--t2)}
.blatt__fuss b{color:var(--gruen-t);font-family:var(--f-mono);font-weight:500}
.blatt__unterschrift{position:relative;min-width:12rem;padding-top:1.6rem;border-top:0;font-family:var(--f-mono);font-size:.72rem;color:var(--t3);text-align:right}
.blatt__unterschrift::before{content:"";position:absolute;left:0;right:0;top:1.3rem;height:1px;background:#B9C6D6}
.blatt__unterschrift i{position:absolute;left:12%;right:20%;top:0;height:1.5rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 26' preserveAspectRatio='none'%3E%3Cpath d='M3 19c10-12 18-16 21-11s-6 12-2 12 12-15 18-15-3 13 3 13 9-9 14-9 2 7 7 7 10-8 16-8 5 6 11 5 22-7 63-9' fill='none' stroke='%230A5493' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--e-calm) 1.4s}
html:not(.js) .blatt__unterschrift i,.is-da .blatt__unterschrift i{clip-path:inset(0)}

/* ---------- Ablauf ---------------------------------------------------------------- */
.ablauf{background:var(--fl)}
.ablauf__linie{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;counter-reset:s}
.ablauf__linie::before{content:"";position:absolute;left:28px;right:calc(25% - 28px);top:27px;height:2px;border-radius:2px;background:var(--verlauf-deko);
  transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--e-calm) .3s}
html:not(.js) .ablauf__linie::before,.ablauf__linie.is-da::before{transform:none}
.schritt4{position:relative}
.schritt4__nr{position:relative;z-index:1;width:56px;height:56px;border-radius:999px;display:grid;place-items:center;background:var(--weiss);border:1px solid var(--linie);color:var(--blau);box-shadow:var(--sch-1);
  font-family:var(--f-display);font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums}
.schritt4 h3{margin-top:1.1rem;font-size:1.12rem;line-height:1.3;letter-spacing:-.016em}
.schritt4 p{margin-top:.45rem;font-size:.94rem;line-height:1.58}
.vorher{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);margin-top:clamp(2.4rem,4vw,3.4rem);border-radius:var(--r-gross);background:var(--weiss);border:1px solid var(--linie);overflow:hidden;box-shadow:var(--sch-2)}
.vorher__bild{min-height:100%;background:var(--fl2)}
.vorher__bild img{width:100%;height:100%;object-fit:cover}
.vorher__text{padding:clamp(1.4rem,1.1rem + 1.4vw,2.4rem)}
.vorher__text h3{font-size:1.3rem;line-height:1.25;letter-spacing:-.02em}
.vorher__text p{margin-top:.55rem;font-size:.96rem}
.vorher .haken{margin-top:1.2rem;gap:.65rem}
.vorher .haken li{font-size:.96rem}

/* ---------- Für wen ------------------------------------------------------------------ */
.fuerwen{background:var(--weiss)}
.wer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.werk{display:flex;flex-direction:column;gap:.6rem;padding:1.5rem 1.4rem;border-radius:var(--r-karte);background:var(--fl);border:1px solid var(--linie);
  transition:border-color .2s var(--ease),box-shadow .25s var(--ease)}
@media (hover:hover){.werk:hover{border-color:#C3D2E3;box-shadow:var(--sch-2)}}
.werk h3{font-size:1.08rem;line-height:1.3;letter-spacing:-.016em}
.werk p{font-size:.93rem;line-height:1.58}
.werk--blau{background:var(--verlauf);border-color:transparent;color:#fff}
.werk--blau h3{color:#fff}
.werk--blau p{color:#E3ECF7}

/* ---------- Anfrage ------------------------------------------------------------------- */
.anfrage{background:linear-gradient(180deg,var(--fl) 0%,var(--fl2) 100%)}
.anfrage__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);gap:clamp(2rem,4.5vw,4.5rem);align-items:center}
.anfrage .lead{margin-top:1.1rem}
.anfrage__haken{margin-top:1.4rem}
.anfrage__chat{justify-self:end;width:100%;max-width:34rem}
.chat{border-radius:var(--r-karte);background:var(--weiss);border:1px solid var(--linie);box-shadow:var(--sch-2);overflow:hidden}
.chat__kopf{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border-bottom:1px solid var(--linie)}
.chat__kopf img{width:34px;height:34px;flex:none;border-radius:9px}
.chat__kopf > div{flex:1;min-width:0}
.chat__kopf b{display:block;font-size:.88rem;font-weight:600;color:var(--t1);line-height:1.25}
.chat__unter{display:block;font-size:.76rem;color:var(--t3);line-height:1.3}
.chat__unter.tippt{color:var(--blau)}
.chat__verlauf{padding:1rem}
.chat__flow{display:flex;flex-direction:column;gap:.5rem}
.msg{max-width:86%;padding:.6rem .8rem;border-radius:var(--r-karte);font-size:.86rem;line-height:1.48}
.msg--in{align-self:flex-start;background:var(--fl2);color:var(--t1);border-top-left-radius:4px}
.msg--out{align-self:flex-end;background:var(--blau);color:#fff;border-top-right-radius:4px}
.chat__status{display:flex;align-items:center;gap:.7rem;margin-top:.3rem;padding:.7rem .85rem;border-radius:var(--r-knopf);background:#F0FAF4;border:1px solid #C9EBD5}
.chat__status .ck{background:rgba(34,197,94,.18)}
.chat__status .ck path{stroke:var(--gruen-t)}
.chat__status b{display:block;font-size:.86rem;color:var(--t1);line-height:1.3}
.chat__status div span{display:block;font-size:.76rem;color:var(--t3)}
.chat.is-schritt .msg,.chat.is-schritt .chat__status{opacity:0;transform:translateY(8px)}
.chat.is-schritt .msg.is-da,.chat.is-schritt .chat__status.is-da{opacity:1;transform:none;transition:opacity .45s var(--e-soft),transform .45s var(--e-soft)}
.chat.is-schritt .chat__status:not(.is-da) .ck path{stroke-dashoffset:26}

/* ---------- Fragen --------------------------------------------------------------------- */
.fragen{background:var(--weiss);overflow:hidden}
.fragen .wrap{position:relative;z-index:1}
.faq__liste{display:grid;gap:.6rem;max-width:820px;margin-inline:auto}
.faq__i{border-radius:var(--r-karte);background:var(--weiss);border:1px solid var(--linie);transition:border-color .2s var(--ease),box-shadow .25s var(--ease)}
.faq__i.ist-auf{border-color:#C3D2E3;box-shadow:var(--sch-2)}
.faq__f{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:58px;padding:1rem 1.2rem;border:0;background:none;cursor:pointer;text-align:left;
  font-family:var(--f-display);font-size:1.02rem;font-weight:600;letter-spacing:-.012em;line-height:1.35;color:var(--t1)}
.faq__ic{width:32px;height:32px;flex:none;border-radius:999px;background:var(--fl2);display:grid;place-items:center;transition:background .22s var(--ease),transform .3s var(--spring)}
.faq__ic svg{width:15px;height:15px;color:var(--blau)}
.faq__i.ist-auf .faq__ic{background:var(--blau);transform:rotate(45deg)}
.faq__i.ist-auf .faq__ic svg{color:#fff}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--e-calm)}
.faq__i.ist-auf .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{padding:0 1.2rem 1.15rem;font-size:.96rem;line-height:1.65;max-width:44rem}
.faq__fuss{margin:2rem auto 0;max-width:820px;text-align:center;font-size:.95rem;line-height:1.6}
.faq__fuss a{color:var(--blau);font-weight:600;text-decoration:none;white-space:nowrap}
.faq__fuss a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Final-CTA -------------------------------------------------------------------- */
.final{background:var(--fl);padding-block:0 var(--sek)}
.final__karte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;border-radius:var(--r-gross);background:var(--weiss);border:1px solid var(--linie);box-shadow:var(--sch-3);overflow:hidden}
.final__text{padding:clamp(1.6rem,1.2rem + 2vw,3.2rem)}
.final__text > p{margin-top:1rem;max-width:30rem;font-size:1.02rem}
.final__bild{position:relative;min-height:320px;background:var(--fl2)}
.final__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Fußzeile ---------------------------------------------------------------------- */
.fuss{background:var(--n0);color:var(--d3);padding:3.4rem 0 2.2rem;font-size:.92rem}
.fuss__raster{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:2rem}
.fuss img{height:40px;width:auto}
.fuss p{margin-top:1rem;max-width:26rem;line-height:1.6}
.fuss h4{font-size:.8rem;font-weight:600;letter-spacing:.01em;color:var(--d2);margin-bottom:.4rem}
.fuss ul{display:grid;gap:0}
.fuss li{min-height:44px;display:flex;align-items:center}
.fuss a{text-decoration:none;color:var(--d3)}
.fuss li a{display:inline-flex;align-items:center;min-height:44px}
.fuss a:hover{color:#fff}
.fuss__unten{margin-top:2.2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem 2rem;font-size:.84rem}
.fuss__unten nav{display:flex;flex-wrap:wrap;gap:0 1.3rem}
.fuss__unten nav a,.fuss__unten nav button{min-height:44px;display:inline-flex;align-items:center}
.fuss__unten button{background:none;border:0;padding:0;cursor:pointer;color:var(--d3);font-size:.84rem}
.fuss__unten button:hover{color:#fff}

/* ---------- Kontaktknopf ------------------------------------------------------------------- */
.fab{position:fixed;right:18px;bottom:18px;z-index:940;display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--e-soft)}
.fab.weg{opacity:0;transform:translateY(12px);visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--e-soft),visibility 0s linear .3s}
.fab.weg .fab__k{pointer-events:none}
.fab__aus{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
.fab__l{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.5rem 1rem .5rem .55rem;border-radius:999px;background:var(--weiss);color:var(--t1);border:1px solid var(--linie);
  text-decoration:none;font-weight:600;font-size:.9rem;box-shadow:0 18px 40px -18px rgba(11,21,38,.12);opacity:0;transform:translateY(8px) scale(.96);pointer-events:none;visibility:hidden;
  transition:opacity .22s var(--ease),transform .3s var(--spring),visibility 0s linear .3s}
.fab__l i{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:var(--fl2);color:var(--blau);flex:none}
.fab__l svg{width:18px;height:18px}
.fab__l--tel i{background:var(--blau);color:#fff}
.fab.ist-auf .fab__l{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.fab__k{pointer-events:auto;width:58px;height:58px;border-radius:999px;border:0;color:#fff;cursor:pointer;display:grid;place-items:center;
  background:var(--verlauf);box-shadow:0 14px 32px -12px rgba(10,84,147,.22);transition:transform .2s var(--spring)}
.fab__k:hover{transform:translateY(-2px)}
.fab__k svg{width:24px;height:24px;transition:transform .3s var(--spring)}
.fab__k .i-zu{display:none;transform:rotate(45deg)}
.fab.ist-auf .fab__k .i-auf{display:none}
.fab.ist-auf .fab__k .i-zu{display:block}

/* ---------- Modal + Pop-up ----------------------------------------------------------------- */
.modal,.pop{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:24px;background:rgba(6,18,36,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal[hidden],.pop[hidden]{display:none}
.modal:not([hidden]),.pop:not([hidden]){animation:einblenden .3s var(--ease)}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
.modal__karte{position:relative;width:min(540px,100%);max-height:calc(100vh - 48px);overflow:auto;animation:hoch .38s var(--spring);border-radius:var(--r-gross)}
@keyframes hoch{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.modal .qk{box-shadow:0 40px 80px -30px rgba(6,18,36,.5)}
.modal .qk__kopf{padding-right:52px}
@media (min-width:861px) and (max-height:760px){   /* Laptop 1280 × 720: Formular ohne Innen-Scrollen */
  .modal .qk{padding:1.1rem 1.4rem}
  .modal .qk__kopf{margin-bottom:.8rem}
  .modal .felder{row-gap:.55rem}
  .modal .qk__steuer{margin-top:.8rem}
  .modal .qk__vertrauen{margin-top:.7rem}
}
.modal__zu,.pop__zu{position:absolute;top:12px;right:12px;z-index:4;width:44px;height:44px;border-radius:999px;border:1px solid var(--linie);cursor:pointer;
  display:grid;place-items:center;background:var(--weiss);color:var(--t1);transition:border-color .2s var(--ease)}
.modal__zu:hover,.pop__zu:hover{border-color:var(--blau)}
.modal__zu svg,.pop__zu svg{width:16px;height:16px}
body.overlay-offen{overflow:hidden}
.pop__karte{position:relative;width:min(430px,100%);max-height:calc(100vh - 48px);overflow:auto;border-radius:var(--r-gross);text-align:center;
  background:var(--weiss);animation:hoch .38s var(--spring);box-shadow:0 40px 80px -30px rgba(6,18,36,.5)}
.pop__bild{position:relative;height:150px}
.pop__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.pop__badge{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);width:64px;height:64px;border-radius:18px;display:grid;place-items:center;
  background:var(--verlauf);color:#fff;box-shadow:0 0 0 5px var(--weiss)}
.pop__badge svg{width:28px;height:28px}
.pop__text{padding:2.8rem 1.6rem 1.5rem}
.pop__text h3{font-size:1.32rem;line-height:1.2;letter-spacing:-.022em}
.pop__text > p{margin-top:.6rem;font-size:.95rem;line-height:1.55}
.pop .haken{width:fit-content;margin:1rem auto 0;text-align:left}
.pop .haken li{font-size:.93rem}
.pop .haken li:nth-child(1){--ck-d:380ms}.pop .haken li:nth-child(2){--ck-d:530ms}.pop .haken li:nth-child(3){--ck-d:680ms}
.pop__knoepfe{display:grid;gap:.55rem;margin-top:1.2rem}
.pop__knoepfe .btn{width:100%}
.pop__trust{margin-top:.9rem;font-weight:600;font-size:.88rem;color:var(--t1)}

/* ---------- Rechtsseiten + 404 --------------------------------------------------------- */
.r-seite{background:var(--fl);color:var(--t2)}
.r-seite .kopf{background:rgba(255,255,255,.95);box-shadow:0 1px 0 var(--linie);padding-block:.6rem}
.r-seite .kopf__logo img{height:32px}
.r-kopf{padding:clamp(110px,11vw,140px) 0 2.2rem;background:var(--weiss);border-bottom:1px solid var(--linie)}
.r-kopf h1{font-size:clamp(2rem,1.4rem + 2vw,2.6rem);line-height:1.1;letter-spacing:-.03em}
.r-kopf p{margin-top:.6rem;max-width:40rem}
.r-zurueck{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:1.1rem;font-size:.9rem;font-weight:600;color:var(--blau);text-decoration:none}
.r-zurueck svg{width:17px;height:17px;transform:rotate(180deg)}
.r-text{max-width:46rem;padding:2.6rem 0 4.5rem}
.r-text h2{font-size:1.32rem;line-height:1.3;margin:2.2rem 0 .7rem}
.r-text h2:first-child{margin-top:0}
.r-text h3{font-size:1.06rem;line-height:1.35;margin:1.5rem 0 .5rem}
.r-text p,.r-text li{font-size:1rem;line-height:1.7}
.r-text p + p{margin-top:.7rem}
.r-text ul{list-style:disc;padding-left:1.3rem;margin:.6rem 0 .8rem}
.r-text a{color:var(--blau)}
.r-box{margin:.8rem 0 1rem;padding:1.1rem 1.25rem;border-radius:var(--r-karte);background:var(--weiss);border:1px solid var(--linie)}
.r-box p{margin:0}
.r-box p + p{margin-top:.2rem}
.r-text button.r-link{background:none;border:0;padding:0;color:var(--blau);text-decoration:underline;cursor:pointer;font:inherit}
.fehlerseite{min-height:100vh;display:grid;place-items:center;text-align:center;padding:120px 20px 60px;background:var(--fl)}
.fehlerseite h1{font-size:clamp(2rem,1.4rem + 2vw,2.8rem);line-height:1.12;letter-spacing:-.03em}
.fehlerseite p{margin:.8rem auto 0;max-width:30rem}
.fehlerseite .knoepfe{justify-content:center}

/* ---------- Responsiv ------------------------------------------------------------------ */
@media (max-width:1080px){
  .szene .h2,.protokoll .h2{font-size:clamp(1.72rem,1.15rem + 1.6vw,2.2rem)}
  .kopf__nav{display:none}
  .kopf__tel{margin-left:auto}
  .wer{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__raster{grid-template-columns:minmax(0,1fr)}
  .anfrage__raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem}
  .hero{min-height:0}
  .hero .qk{max-width:560px}
  .leiste{margin-top:-44px}
  .leiste__raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leiste__i:nth-child(3){border-left:0}
  .leiste__i:nth-child(n+3){border-top:1px solid var(--linie)}
  .szene__raster{grid-template-columns:minmax(0,1fr)}
  .szene__text{max-width:44rem}
  .tage{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
  .protokoll__raster{grid-template-columns:minmax(0,1fr)}
  .problem__raster{grid-template-columns:minmax(0,1.2fr) minmax(0,.86fr);gap:2rem}
  .blatt{max-width:640px}
  .k4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .k4__bild{aspect-ratio:16/9}
  .ablauf__linie{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.2rem}
  .ablauf__linie::before{display:none}
}
@media (max-width:860px){
  .anfrage__raster{grid-template-columns:minmax(0,1fr)}
  .anfrage__chat{justify-self:start;max-width:600px}
  .problem__raster{grid-template-columns:minmax(0,1fr)}
  .bon{margin-inline:0}
  .vgl__raster{grid-template-columns:minmax(0,1fr)}
  .vorher,.final__karte{grid-template-columns:minmax(0,1fr)}
  .vorher__bild{aspect-ratio:16/9}
  .final__bild{min-height:0;aspect-ratio:16/9}
}
@media (max-width:760px){
  .wrap,.hero__raster{width:min(var(--wrap),100% - 32px)}
  .kopf{padding-block:.7rem}
  .kopf__in{gap:.5rem}
  .kopf__logo img{height:30px}
  .kopf.ist-fest .kopf__logo img{height:28px}
  .kopf__tel,.kopf .kopf__cta{display:none}
  .kopf__ikon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-knopf);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;text-decoration:none}
  .kopf__ikon svg{width:20px;height:20px}
  .kopf__ikon--tel{margin-left:auto;width:auto;padding:0 .8rem;gap:.4rem;display:inline-flex;align-items:center;font-weight:600;font-size:.86rem;white-space:nowrap}
  .kopf__ikon--tel span{display:inline}
  .kopf__ikon--tel svg{width:17px;height:17px;color:var(--cyan)}
  .kopf.ist-fest .kopf__ikon{background:var(--fl);border-color:var(--linie);color:var(--t1)}
  .kopf.ist-fest .kopf__ikon svg{color:var(--blau)}
  .hero{padding-top:94px;padding-bottom:86px}
  .hero__bild img{object-position:50% 30%}
  .hero::before{background:linear-gradient(180deg,rgba(6,18,36,.78) 0%,rgba(6,18,36,.72) 40%,rgba(6,18,36,.9) 80%,rgba(6,18,36,.96) 100%)}
  .hero__ansage{font-size:clamp(2.2rem,9.4vw,2.7rem)}
  .hero__text{font-size:15px}
  .knoepfe .btn{width:100%}
  .leiste{margin-top:-32px}
  .leiste__i{padding:1rem .9rem;gap:.6rem;flex-direction:column}
  .leiste__i i{width:36px;height:36px}
  .leiste__i svg{width:19px;height:19px}
  .leiste__i b{font-size:.92rem}
  .leiste__i span{font-size:.8rem}
  .tage{grid-template-columns:minmax(0,1fr)}
  .tage li{grid-template-columns:26px 4.6rem minmax(0,1fr);padding:.5rem .55rem}
  .hud__tag{font-size:.66rem;padding:.3rem .6rem}
  .woche i{width:28px}
  .wer{grid-template-columns:minmax(0,1fr)}
  .ablauf__linie{grid-template-columns:minmax(0,1fr)}
  .blatt__z{grid-template-columns:3.6rem minmax(0,1.45fr) minmax(0,1fr) 2rem;font-size:.8rem} /* 1.45fr: „Netzwerkdrucker“ ab 360 px einzeilig */
  .blatt__z > :nth-child(3){display:none}
  .blatt::before{display:none}
  .vgl__fuss .btn{width:100%}
  .fuss__raster{grid-template-columns:minmax(0,1fr)}
  .modal .qk__kopf{padding-right:48px}
}
@media (max-width:600px){
  .k4{grid-template-columns:minmax(0,1fr)}
  .k4-plus{grid-template-columns:minmax(0,1fr);padding:1.2rem}
  .h2,.szene .h2,.protokoll .h2{font-size:min(1.72rem,5.9vw)}   /* Überschriften mobil zweizeilig (Florian 09.10.2026), jede Zeile ein Satz */
  .qk__titel,.danke h3{font-size:min(1.28rem,5.4vw)}.vorher__text h3{font-size:min(1.3rem,5.4vw)}.pop__text h3{font-size:min(1.32rem,5.4vw)}   /* H3 bleibt unter der H2 */
}
@media (max-width:520px){
  .feld{grid-column:1/-1}
  .feld--plz{grid-column:span 2}
  .feld--ort{grid-column:span 4}
}
@media (max-width:400px){
  .btn--lg{padding-inline:.9rem;font-size:.95rem}
  .kopf__ikon--tel{padding:0 .6rem;font-size:.8rem}
  /* Leiste einspaltig, Icon links: zweispaltig bricht „Büro-IT“ am Bindestrich und „Großraum / München“ */
  .leiste__raster{grid-template-columns:minmax(0,1fr)}
  .leiste__i{flex-direction:row;align-items:center;gap:.8rem;padding:.8rem 1rem}
  .leiste__i + .leiste__i{border-left:0;border-top:1px solid var(--linie)}
  /* Chat-Kopf: Etikett in eigene Zeile, sonst schiebt es den Firmennamen zusammen */
  .chat__kopf{flex-wrap:wrap;row-gap:.45rem}
  .chat__kopf > div{flex:1 1 auto}
  .chat__kopf .etikett-pille{margin-left:calc(34px + .7rem)}
  .chat__status b{font-size:.8rem}
}

/* ---------- Weniger Bewegung --------------------------------------------------------- */
@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}
  html.js .rv,html.js .rv-g > *,html.js .hero .st,html.js .rv .bon__liste li,html.js .rv .bon__summe b{opacity:1;transform:none}
  .bon{transform:none}
  .ul::after{clip-path:inset(0)}
  .ck path,.blatt__z .ok path,.leiste__i svg{stroke-dashoffset:0}
  .ablauf__linie::before{transform:none}
  .blatt__unterschrift i{clip-path:inset(0)}
}