/* Schriften vom eigenen Server; ohne Dateien greifen Systemschriften */
/* Schriften laut Markenvorgabe (Logo-Spezifikation): Montserrat für Überschriften, Knöpfe, Preise und Navigation; Nunito Sans für Text.
   Variable Schriftdateien vom eigenen Server (schriften-holen.sh), keine Verbindung zu Google. Fehlen sie, greift eine metrisch angeglichene Ersatzschrift. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations'),url('/assets/fonts/montserrat-latin-wght-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:200 1000;font-display:swap;src:url('/assets/fonts/nunito-sans-latin-wght-normal.woff2') format('woff2-variations'),url('/assets/fonts/nunito-sans-latin-wght-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat Ersatz';src:local('Arial'),local('Liberation Sans'),local('Helvetica');ascent-override:84.95%;descent-override:22.03%;line-gap-override:0%;size-adjust:113.95%}
/* ======================================================================
   REPAIRWERK MELLE · DESIGNSYSTEM v2
   Richtung: Präzisionswerkstatt. Graphit für Bühne, Kopf und Fuß,
   warmes Papierweiß für Inhalte, Cyan aus dem Logo als einziger Akzent.
   Ein System, keine Flicken: Jede Stufe steht hier genau einmal.
   ====================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Flächen */
  --bg:#FFFFFF; --paper:#F6F5F2; --sunk:#F6F5F2; --card:#FFFFFF;
  --void:#07090B; --graphite:#0E1215; --graphite2:#161B1F;
  /* Schrift */
  --ink:#0E1316; --soft:#475158; --faint:#5C666D;
  --dink:#EEF2F4; --dsoft:#A9B4BC;
  /* Linien */
  --line:#E4E1DB; --line2:#CDC9C1; --dline:rgba(255,255,255,.12);
  /* Marke: Cyan aus dem Logo; auf hellem Grund die zugängliche Tiefe */
  --cy:#4EC3FF; --ac:#0A6A9E; --ac2:#07567F; --acink:#084C6E; --tint:#E7F3FA; --metal:#A7A7A7;
  /* Status */
  --ok:#17693A; --okbg:#E5F3EA; --bad:#A61F1A; --badbg:#FBEAE8; --warn:#FFF3D6; --warnink:#7A4B00;
  /* Form */
  --r1:8px; --r2:12px; --r3:16px; --r4:24px;
  --sh1:0 1px 2px rgba(14,19,22,.05),0 6px 18px rgba(14,19,22,.05);
  --sh2:0 24px 60px rgba(14,19,22,.18);
  /* Schrift */
  --fd:'Montserrat','Montserrat Ersatz',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --fu:'Nunito Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  /* Raster und Rhythmus */
  --w:1400px; --gut:clamp(1.25rem,4vw,2.5rem); --sec:clamp(4.25rem,8.5vw,7.5rem);
  /* Bewegung */
  --e:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  caret-color:var(--ac); accent-color:var(--ac); scrollbar-color:var(--line2) transparent;
}

/* ---------- Grundlage ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:7.5rem}
@media(max-width:760px){html{scroll-padding-top:6rem}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.62 var(--fu);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--fd);color:inherit;margin:0 0 .6em;text-wrap:balance;overflow-wrap:break-word;hyphens:manual}
h1{font-weight:700;font-size:clamp(2.4rem,5vw,4.6rem);line-height:1.02;letter-spacing:-.03em}
h2{font-weight:700;font-size:clamp(1.8rem,2.9vw,2.7rem);line-height:1.08;letter-spacing:-.025em}
h3{font-weight:700;font-size:1.14rem;line-height:1.3;letter-spacing:-.012em}
h4{font-weight:700;font-size:1rem}
p,li{text-wrap:pretty;overflow-wrap:break-word;hyphens:manual}
p{margin:0 0 1em}
a{color:var(--ac);text-underline-offset:.18em;text-decoration-thickness:.075em}
a:hover{color:var(--ac2)}
sup{font-size:.66em;line-height:0}
::selection{background:#CDEBFB;color:var(--ink)}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:4px}
.dk :focus-visible{outline-color:var(--cy)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:var(--r1)}
.skip:focus{top:1rem}
.dk{background:var(--graphite);color:var(--dink)}
.dk a:not(.b){color:var(--dink)}

/* ---------- Raster ---------- */
.wrap{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)}
section{padding-block:var(--sec)}
.sunk{background:var(--paper)}
.g{display:grid;gap:1.25rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.g2,.g3,.g4,.two{grid-template-columns:minmax(0,1fr)}}
.g>*,.two>*{min-width:0}

/* Abschnittskopf: Überschrift links, Einordnung rechts – kein zentrierter Standardblock */
.hd{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:1rem 4rem;align-items:end;margin-bottom:clamp(2rem,4vw,3.25rem)}
.hd h2{margin:0;max-width:20ch}
.hd p{margin:0;color:var(--soft);max-width:48ch;justify-self:end}
.hd:has(> h2:only-child){grid-template-columns:1fr}
.hd.c{grid-template-columns:1fr;text-align:left}
@media(max-width:860px){.hd{grid-template-columns:1fr;gap:.9rem}.hd p{justify-self:start}}

/* ---------- Karten: nur wo sie einen Gegenstand darstellen ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);padding:clamp(1.25rem,2.4vw,1.75rem)}
.card h3{margin-bottom:.4rem}
.card p{color:var(--soft)}
.card p:last-child{margin-bottom:0}
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic.big{width:26px;height:26px;color:var(--ac);margin-bottom:1rem}

/* ---------- Knöpfe ---------- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:.8em 1.35em;border-radius:10px;border:1.5px solid transparent;
  font:600 .97rem/1.2 var(--fu);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;max-width:100%;
  transition:background-color 120ms var(--ease-out),border-color 120ms var(--ease-out),color 120ms var(--ease-out),transform 120ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.b:active{transform:scale(.97)}
.b .ic{width:18px;height:18px}
.b1{background:var(--cy);color:#06222F;border-color:var(--cy)}
.b1:hover{background:#6FD0FF;border-color:#6FD0FF;color:#06222F}
:where(.sunk,.card,section:not(.dk):not(.hero)) .b1{background:var(--ink);border-color:var(--ink);color:#fff}
:where(section:not(.dk):not(.hero),.card) .b1:hover{background:#262D32;border-color:#262D32;color:#fff}
/* Auf dunklem Grund ist der Hauptknopf immer Cyan – auch in dunklen Karten innerhalb heller Abschnitte */
.dk .b1{background:var(--cy);border-color:var(--cy);color:#06222F}
.dk .b1:hover{background:#6FD0FF;border-color:#6FD0FF;color:#06222F}
.b2{background:transparent;color:var(--ink);border-color:var(--line2)}
.b2:hover{border-color:var(--ink);color:var(--ink)}
.dk .b2{color:#fff;border-color:rgba(255,255,255,.3)}
.dk .b2:hover{border-color:#fff}
.b3{background:transparent;color:var(--ac);border-color:transparent;padding-inline:.6em}
.bs{min-height:40px;padding:.55em 1em;font-size:.9rem}
.bb{width:100%}
.b[disabled]{opacity:.55;cursor:not-allowed}
@media(max-width:400px){.b{white-space:normal;text-align:center;line-height:1.3}}

/* ---------- Hinweise ---------- */
.note{display:flex;gap:.7rem;align-items:flex-start;padding:.9rem 1rem;border-radius:var(--r2);font-size:.94rem;line-height:1.5;max-width:68ch}
.note .ic{margin-top:.12rem}
.n-i{background:var(--tint);color:var(--acink)}
.n-w{background:var(--warn);color:var(--warnink)}
.n-o{background:var(--okbg);color:var(--ok)}

/* ======================================================================
   KOPF
   ====================================================================== */
.util{font-size:.8rem;color:var(--dsoft);background:var(--void);border-bottom:1px solid var(--dline)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:1rem}
.util .l,.util .r{display:flex;gap:1.4rem;align-items:center}
.util span,.util a{display:inline-flex;align-items:center;gap:.4rem;color:var(--dsoft);text-decoration:none}
.util .ic{width:14px;height:14px;color:var(--cy)}
.util a:hover{color:#fff}
.util .util-tel{color:#fff;font-weight:600}
@media(max-width:760px){.util .r,.util .l span:nth-child(2){display:none}}
header.top{position:sticky;top:0;z-index:50;background:rgba(14,18,21,.9);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--dline)}
.bar{display:flex;align-items:center;gap:1.4rem;min-height:66px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:30px;width:auto}
.nav{display:flex;gap:.2rem;list-style:none;margin:0 0 0 auto;padding:0;align-items:center}
.nav>li{position:relative}
.nav>li>a,.nav>li>button{display:inline-flex;align-items:center;gap:.3rem;padding:.55rem .7rem;border-radius:8px;background:none;border:0;color:#C9D2D8;font:500 .92rem var(--fu);text-decoration:none;cursor:pointer;white-space:nowrap;transition:color 120ms var(--ease-out),background-color 120ms var(--ease-out)}
.nav>li>a:hover,.nav>li>button:hover,.nav>li>button[aria-expanded=true]{color:#fff;background:rgba(255,255,255,.06)}
.nav .chev{width:14px;height:14px;transition:transform 160ms var(--ease-out)}
.nav button[aria-expanded=true] .chev{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + .5rem);left:-.5rem;min-width:300px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh2);padding:.5rem;z-index:60;transform-origin:top left;animation:drop 160ms var(--ease-out)}
.drop.wide{min-width:560px;display:grid;grid-template-columns:1fr 1fr}
.drop a,.dk .drop a:not(.b){display:flex;gap:.75rem;align-items:flex-start;padding:.65rem .75rem;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.93rem}
.drop a:hover,.dk .drop a:not(.b):hover{background:var(--paper);color:var(--ink)}
.drop a .ic{color:var(--ac);margin-top:.1rem}
.drop small{display:block;font-weight:400;color:var(--faint);font-size:.8rem;margin-top:.1rem}
@keyframes drop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.hact{display:flex;align-items:center;gap:.55rem;margin-left:.6rem}
.iconb{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);background:transparent;color:#fff;cursor:pointer;flex:none;transition:background-color 120ms var(--ease-out),transform 120ms var(--ease-out)}
.iconb:active{transform:scale(.95)}
.iconb .ic{width:20px;height:20px}
.iconb.wa{background:#25D366;border-color:#25D366;color:#fff}
.iconb.ig{background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%);border-color:transparent;color:#fff}
@media (hover:hover) and (pointer:fine){.iconb:hover{background:rgba(255,255,255,.1)}.iconb.wa:hover{background:#1DAF55;border-color:#1DAF55}.iconb.ig:hover{filter:brightness(1.08);background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}}
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:10px;border:1px solid var(--dline);background:none;color:#fff;cursor:pointer;align-items:center;justify-content:center}
@media(max-width:1240px){.hact .iconb.ig{display:none}}
@media(max-width:1080px){.nav{display:none}.burger{display:inline-flex}.hact{margin-left:auto}}
@media(max-width:760px){.hact .b1{font-size:.86rem;padding:.55rem .85rem;min-height:44px}.bar{gap:.7rem}.logo img{height:26px}}
.mnav{position:fixed;inset:0;z-index:80;background:var(--graphite);color:var(--dink);overflow:auto;padding:1rem var(--gut) 3rem;display:flex;flex-direction:column;gap:.1rem}
.mnav[hidden]{display:none}
.mnav .mh{display:flex;justify-content:space-between;align-items:center;min-height:56px;margin-bottom:.8rem}
.mnav .x{width:44px;height:44px;border-radius:10px;border:1px solid var(--dline);background:none;color:#fff;font-size:1.1rem;cursor:pointer}
.mnav a{display:flex;align-items:center;gap:.5rem;min-height:48px;color:#fff;text-decoration:none;font:600 1.1rem var(--fd);border-bottom:1px solid var(--dline)}
.mnav small{margin-top:1.4rem;color:var(--dsoft);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}

/* ======================================================================
   HERO-FILMBÜHNE
   ====================================================================== */
.hero{position:relative;padding:0;height:200vh;background:var(--void);overflow:clip;color:var(--dink)}
.hero-sticky{position:sticky;top:0;height:100svh;min-height:600px;display:flex;align-items:center;overflow:hidden}
.hero-film{position:absolute;inset:0;background:var(--void)}
.hero-film img,.hero-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero-video{opacity:0;transition:opacity 400ms var(--ease-out)}
.hero.is-live .hero-video{opacity:1}
.hero.is-live .hero-poster{opacity:0;transition:opacity 400ms var(--ease-out)}
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,9,11,.9) 0%,rgba(6,9,11,.86) 30%,rgba(6,9,11,.8) 46%,rgba(6,9,11,.42) 58%,rgba(6,9,11,.1) 72%,rgba(6,9,11,0) 84%),
  linear-gradient(to bottom,rgba(6,9,11,.45) 0%,transparent 16%,transparent 78%,rgba(6,9,11,.55) 100%)}
.hero-copy{position:relative;z-index:2;width:100%}
.hero-copy>*{max-width:46rem}
.hero h1{color:#fff;max-width:17ch;margin-bottom:1.2rem}
.hero .lede{color:#C9D2D8;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6;max-width:44ch;margin-bottom:1.8rem}
.lede-kurz{display:none}
.hero-act{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:2rem}
.hero-act .b2{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-act .b2 .ic{color:#4ADE80}
.hero-points{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.hero-points li{display:flex;gap:.6rem;align-items:flex-start;color:#AEB9C1;font-size:.95rem}
.hero-points .ic{color:var(--cy);width:18px;height:18px;margin-top:.2rem}
.hero-scroll{position:absolute;left:0;right:0;bottom:1.6rem;z-index:2;display:flex;align-items:center;gap:.8rem;padding-inline:max(var(--gut),calc((100% - var(--w))/2 + var(--gut)))}
.hero-track{position:relative;flex:1;max-width:220px;height:2px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
.hero-fill{position:absolute;inset:0;background:var(--cy);transform:scaleX(0);transform-origin:left;will-change:transform}
.hero-scroll small{color:#8D99A2;font-size:.76rem;letter-spacing:.04em}
.hero.is-still{height:auto}
.hero.is-still .hero-sticky{position:relative;height:auto;min-height:0;padding-block:clamp(4rem,9vw,7rem)}
.hero.is-still .hero-scroll{display:none}
@media(max-width:860px){
  .hero{height:175vh}
  .hero-sticky{min-height:0}
  .hero-film img,.hero-film video{object-position:50% 62%}
  .hero-scrim{background:linear-gradient(to bottom,rgba(6,9,11,.95) 0%,rgba(6,9,11,.93) 38%,rgba(6,9,11,.72) 52%,rgba(6,9,11,.25) 76%,rgba(6,9,11,.6) 100%)}
  .hero-act .b{flex:1 1 auto}
}
@media(max-width:560px){
  .hero-sticky{align-items:flex-start;padding-top:5.2rem}
  .hero h1{font-size:clamp(1.9rem,7.6vw,2.45rem)}
  .lede-lang{display:none}.lede-kurz{display:block}
  .hero .lede{margin-bottom:1.3rem}
  .hero-points{display:none}
  .hero-scroll{bottom:1rem}
}

/* ---------- Belegzeile ---------- */
.proof{background:#fff;border-bottom:1px solid var(--line)}
.proof dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.proof dl>div{padding:1.4rem 1.6rem;border-left:1px solid var(--line);min-width:0}
.proof dl>div:first-child{border-left:0;padding-left:0}
.proof dt{font:700 1.35rem/1.1 var(--fd);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.proof dd{margin:.35rem 0 0;font-size:.86rem;line-height:1.45;color:var(--soft)}
@media(max-width:860px){
  .proof dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof dl>div{padding:1rem;border-left:0}
  .proof dl>div:nth-child(2n){border-left:1px solid var(--line)}
  .proof dl>div:nth-child(n+3){border-top:1px solid var(--line)}
  .proof dl>div:nth-child(odd){padding-left:0}
}

/* ---------- Auf einen Blick (zitierfähige Fakten) ---------- */
.glance{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.glance h2{max-width:18ch}
.glance .summary{font-size:1.1rem;color:var(--soft);max-width:46ch}
.facts2{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.facts2>div{padding:1.1rem 0;border-bottom:1px solid var(--line);min-width:0}
.facts2>div:nth-child(odd){padding-right:1.5rem}
.facts2>div:nth-child(even){padding-left:1.5rem;border-left:1px solid var(--line)}
.facts2 dt{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600}
.facts2 dd{margin:.3rem 0 0;font-weight:600;color:var(--ink);line-height:1.4}
@media(max-width:900px){.glance{grid-template-columns:1fr}}
@media(max-width:520px){.facts2{grid-template-columns:1fr}.facts2>div:nth-child(even){padding-left:0;border-left:0}.facts2>div:nth-child(odd){padding-right:0}}

/* ---------- Problemkacheln ---------- */
.ptiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.ptile{display:flex;flex-direction:column;gap:.55rem;min-width:0;padding:1.2rem 1.15rem 1.15rem;background:#fff;border:1px solid var(--line);border-radius:var(--r3);color:var(--ink);text-decoration:none;transition:border-color 140ms var(--ease-out),transform 140ms var(--ease-out)}
.ptile .ic{width:22px;height:22px;color:var(--ac)}
.ptile b{font:700 1rem/1.3 var(--fd);letter-spacing:-.01em}
.ptile small{color:var(--soft);font-size:.86rem;line-height:1.45}
.ptile:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){.ptile:hover{border-color:var(--ink);transform:translateY(-2px);color:var(--ink)}}
@media(max-width:940px){.ptiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:359px){.ptiles{grid-template-columns:minmax(0,1fr)}}

/* ---------- Tempo ---------- */
.speed{background:var(--graphite);color:var(--dink)}
.speed .hd h2{color:#fff}.speed .hd p{color:var(--dsoft)}
.speed-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--dline);border:1px solid var(--dline);border-radius:var(--r4);overflow:hidden}
.speed-c{display:flex;gap:1.6rem;align-items:flex-start;background:var(--graphite);padding:clamp(1.5rem,3vw,2.4rem)}
.speed-c>div:last-child{min-width:0}
.speed-n{flex:none;display:flex;flex-direction:column;line-height:1}
.speed-n b{font:800 clamp(3rem,6vw,4.6rem)/.9 var(--fd);letter-spacing:-.05em;color:var(--cy);font-variant-numeric:tabular-nums}
.speed-n span{margin-top:.5rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dsoft)}
.speed-c h3{color:#fff;font-size:1.25rem;margin-bottom:.4rem}
.speed-c p{color:var(--dsoft);margin-bottom:1.1rem}
.speed-f{margin:1rem 0 0;font-size:.8rem}
.speed-f a{color:var(--dsoft)}
.speed.sc{padding-block:clamp(2.5rem,5vw,3.5rem)}
.speed.sc .speed-c p{margin:0}
@media(max-width:900px){.speed-g{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){.speed-c{flex-direction:column;gap:.8rem}}

/* ---------- Im Inneren: echtes Bild statt Illustration ---------- */
.inside{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.inside h2{font-size:clamp(1.6rem,2.4vw,2.1rem);max-width:18ch}
.inside figure{margin:0;border-radius:var(--r4);overflow:hidden;background:var(--void);box-shadow:var(--sh2)}
.inside figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.inside figcaption{padding:.8rem 1.1rem;font-size:.8rem;color:var(--dsoft);background:var(--graphite)}
.parts{list-style:none;margin:1.4rem 0 0;padding:0;border-top:1px solid var(--line)}
.parts a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600}
.parts a small{color:var(--faint);font-weight:400;font-size:.85rem;text-align:right}
.parts a:hover{color:var(--ac)}
@media(max-width:900px){.inside{grid-template-columns:1fr}}

/* ---------- Teilequalität als Tabelle ---------- */
.qwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r3);background:#fff}
.qtable{width:100%;border-collapse:collapse;min-width:720px;font-size:.95rem}
.qtable th,.qtable td{text-align:left;vertical-align:top;padding:1.05rem 1.2rem;border-bottom:1px solid var(--line)}
.qtable thead th{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600;background:var(--paper)}
.qtable tbody th{font:700 1rem/1.3 var(--fd);width:22%}
.qtable tbody th small{display:block;font:500 .8rem var(--fu);color:var(--faint);margin-top:.25rem}
.qtable td{color:var(--soft)}
.qtable tr:last-child th,.qtable tr:last-child td{border-bottom:0}

/* ---------- Ablauf ---------- */
.steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.6rem;counter-reset:s}
.steps3 li{border-top:2px solid var(--ink);padding-top:1.1rem}
.steps3 li::before{counter-increment:s;content:counter(s,decimal-leading-zero);display:block;color:var(--faint);font:600 .82rem/1 var(--fu);letter-spacing:.14em;margin-bottom:.9rem;font-variant-numeric:tabular-nums}
.steps3 h3{font-size:1.15rem}
.steps3 p{color:var(--soft);margin:0}
@media(max-width:860px){.steps3{grid-template-columns:1fr;gap:1.6rem}}

/* ---------- Gründe ---------- */
.reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3.4rem}
.reasons>div{display:flex;gap:1rem;align-items:flex-start;padding:1.5rem 0;border-top:1px solid var(--line)}
.reasons>div:nth-child(-n+2){border-top:0;padding-top:.4rem}
.reasons .ic{width:21px;height:21px;color:var(--ac);margin-top:.22rem}
.reasons h3{margin:0 0 .3rem;font-size:1.05rem}
.reasons p{margin:0;color:var(--soft);font-size:.97rem}
@media(max-width:860px){.reasons{grid-template-columns:minmax(0,1fr)}.reasons>div:nth-child(2){border-top:1px solid var(--line);padding-top:1.5rem}}

/* ---------- Vorher/Nachher (nur mit echten Fotos sichtbar) ---------- */
.ba-sec[hidden]{display:none}
.ba{position:relative;aspect-ratio:16/10;border-radius:var(--r3);overflow:hidden;background:var(--void);--pos:50%}
.ba img,.ba svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after,.ba img.after{clip-path:inset(0 0 0 var(--pos))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.ba .handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh1)}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-cap{display:flex;justify-content:space-between;font-size:.82rem;color:var(--faint);margin-top:.6rem}
.ba-note{font-size:.82rem;color:var(--faint);margin:.3rem 0 0}

/* ---------- Bewertungen ---------- */
.revs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.4rem}
.rev{scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--r3);padding:1.4rem;display:flex;flex-direction:column;gap:.8rem}
.rev p{margin:0;color:var(--ink)}
.stars{color:#E0A100;letter-spacing:.1em}
.who{display:flex;align-items:center;gap:.6rem;margin-top:auto;font-weight:600;font-size:.92rem}
.who .g{margin-left:auto;font-weight:400;color:var(--faint);font-size:.8rem}
.av{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem}
.revnav{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}
.revnav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:#fff;cursor:pointer}
.revempty{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;padding:1.6rem;border:1px dashed var(--line2);border-radius:var(--r3);background:#fff}
.revempty p{margin:0;color:var(--soft);max-width:60ch}
.revempty .gl{width:44px;height:44px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;font:800 1.2rem var(--fd);color:var(--ink)}

/* ---------- Orte ---------- */
.places{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 1.75rem;border-top:1px solid var(--line)}
.places a{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;padding:.9rem 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;min-height:44px}
.places a small{color:var(--faint);font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}
.places a:hover{color:var(--ac)}

/* ---------- Fragen ---------- */
.faq{border-bottom:1px solid var(--line)}
.faq:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;padding:1.2rem 0;font:600 1.05rem/1.4 var(--fd);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;width:12px;height:12px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-3px,-3px);transition:transform 180ms var(--ease-out)}
.faq[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq p{margin:0 0 1.3rem;color:var(--soft);max-width:70ch}

/* ---------- Abschlussband ---------- */
.cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;background:var(--graphite);color:var(--dink);border-radius:var(--r4);padding:clamp(2rem,5vw,3.5rem)}
.cta h2{color:#fff;margin:0 0 .5rem;max-width:22ch}
.cta p{margin:0;color:var(--dsoft)}
.cta .b1{background:var(--cy)!important;border-color:var(--cy)!important;color:#06222F!important}
@media(max-width:760px){.cta{grid-template-columns:1fr}}

/* ---------- Unterseiten-Kopf ---------- */
.subhero{background:var(--graphite);color:var(--dink);padding-block:clamp(3rem,7vw,5.5rem) clamp(2.5rem,6vw,4.5rem);border-bottom:1px solid var(--dline)}
.subhero h1{color:#fff;font-size:clamp(2.1rem,4.4vw,3.6rem);max-width:22ch;margin-bottom:.9rem}
.subhero p{color:var(--dsoft);font-size:1.12rem;max-width:58ch;margin:0}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 1.6rem;padding:0;font-size:.82rem;color:var(--dsoft)}
.crumbs a{color:var(--dsoft);text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs li+li::before{content:'/';margin-right:.4rem;opacity:.5}

/* ---------- Fließtext ---------- */
.prose{max-width:72ch}
.prose h2{font-size:clamp(1.45rem,2.4vw,1.9rem);margin:2.2em 0 .6em}
.prose p,.prose li{color:var(--soft)}
.prose ul{padding-left:1.2rem}
.prose li{margin-bottom:.4rem}
.prose code{font-size:.88em;background:var(--paper);padding:.1em .35em;border-radius:4px}

/* ---------- Zusammenfassungen und Links ---------- */
.sumrow{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.94rem}
.sumrow span:first-child{color:var(--faint)}
.sumrow span:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.svc-links{display:flex;flex-wrap:wrap;gap:.45rem}
.svc-links a{display:inline-flex;align-items:center;min-height:40px;padding:.4rem .85rem;border:1px solid var(--line2);border-radius:999px;color:var(--ink);text-decoration:none;font-size:.9rem}
.svc-links a:hover{border-color:var(--ink)}
.fig{display:inline-flex;align-items:center;gap:.35em}
.fig .ic{width:15px;height:15px}
.programm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
@media(max-width:900px){.programm{grid-template-columns:1fr}}
.kurz{border:1px solid var(--line2);border-radius:14px;padding:1rem 1.2rem;background:var(--card);margin:0 0 2rem;font-size:1.08rem;color:var(--ink);max-width:70ch}
.kurz b{display:block;font:600 .76rem var(--fu);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:.3rem}

/* ======================================================================
   FUSS
   ====================================================================== */
footer.site{background:var(--void);color:var(--dsoft);padding-block:clamp(3.5rem,7vw,5.5rem) 1.5rem;font-size:.92rem}
footer .fg{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:2.5rem}
footer .fg p{color:var(--dsoft);max-width:36ch;margin-top:1rem}
footer h4{color:#fff;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1rem}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:.45rem}
footer a{color:var(--dsoft);text-decoration:none}
footer a:hover{color:#fff}
footer .fine{border-top:1px solid var(--dline);padding-top:1.4rem;margin-top:2.6rem}
footer .fine h4{margin-bottom:.6rem}
footer .fine p{font-size:.76rem;line-height:1.55;color:#8B969E;margin:0 0 .45rem;max-width:115ch}
footer .fine b{color:#C6CFD5}
footer .fb{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--dline);margin-top:1.4rem;padding-top:1.2rem;font-size:.8rem;color:#8B969E}
@media(max-width:900px){footer .fg{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer .fg{grid-template-columns:1fr}}

/* ---------- Mobile Schnellleiste ---------- */
.mbar{display:none}
@media(max-width:760px){
  body{padding-bottom:4.6rem}
  .mbar{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:.55rem;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom,0px));background:rgba(7,9,11,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--dline)}
  .mbar .b{min-height:46px;padding:.6rem .3rem;font-size:.84rem;white-space:nowrap;text-decoration:none}
  .mbar .b .ic{width:17px;height:17px}
  .mbar .js-wa{background:#1FA855;border-color:#1FA855;color:#fff}
  .mbar .b3{background:#fff;color:var(--ink);border-color:#fff}
  body.has-pnote .mbar{display:none}
}
@media(max-width:359px){.mbar .b{font-size:.76rem}.mbar .b .ic{display:none}}

/* ---------- Touch: Zielgrößen ---------- */
@media (pointer:coarse){
  .b,.iconb,.chip,.burger{min-height:44px}
  .iconb{width:44px;height:44px}
  .crumbs a,.fig,.fb a,.card p>a,.sumrow a,footer li a,.speed-f a,section>.wrap>p>a{display:inline-flex;align-items:center;min-height:24px}
  .ck{min-height:44px;display:flex;align-items:flex-start;gap:.6rem;padding-block:.35rem}
  .ck input[type=checkbox],.ck input[type=radio]{width:24px;height:24px;flex:none;margin-top:.1rem}
}

/* ---------- Bewegung ---------- */
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print{header.top,.util,.mbar,#wa,.pnote,.hero-film,.hero-scroll{display:none!important}.hero{height:auto}.hero-sticky{position:static;height:auto}}
/* Sehr schmale Geräte: der Anfrage-Knopf steht bereits in der Schnellleiste unten */
@media(max-width:374px){.hact .b1{display:none}}
.facts2 a{display:inline-flex;align-items:center;min-height:24px}
/* Lange Ortsnamen (z. B. Georgsmarienhütte) dürfen auf sehr schmalen Geräten umbrechen */
@media(max-width:420px){h1,h2,h3,.sumrow span,.cta h2{overflow-wrap:anywhere}}
.sumrow span{min-width:0}
/* Kurzantwort sitzt direkt unter dem Seitenkopf; der nächste Abschnitt schließt eng an */
.kurz-sec{padding-block:clamp(2.5rem,5vw,3.5rem) 0}
.kurz-sec+section{padding-top:clamp(2.5rem,5vw,3.5rem)}
.kurz-sec .kurz{margin:0}
/* Ungerade Kartenzahl: die letzte Karte nimmt die ganze Zeile statt allein zu stehen */
.g2>.card:last-child:nth-child(odd){grid-column:1/-1}
/* Vergleichstabelle auf dem Handy: jede Zeile als gestapelter Block, kein seitliches Wischen */
@media(max-width:700px){
  .qwrap{overflow:visible;border:0;background:none}
  .qtable{min-width:0}
  .qtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .qtable tbody,.qtable tr,.qtable th,.qtable td{display:block;width:auto}
  .qtable tr{background:#fff;border:1px solid var(--line);border-radius:var(--r3);padding:1.1rem 1.15rem;margin-bottom:.75rem}
  .qtable tbody th{padding:0 0 .6rem;border:0;width:auto;font-size:1.08rem}
  .qtable td{padding:.55rem 0 0;border:0}
  .qtable td::before{content:attr(data-label);display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:.15rem}
}

/* ======================================================================
   Runde 2: Hero-Belegzeile als Blickfang, Einsenden, heller Kompaktblock
   ====================================================================== */
/* Hero-Punkte als ruhige Glaskacheln statt Häkchenliste */
.hero-points{display:flex;flex-wrap:wrap;gap:.5rem}
.hero-points li{white-space:nowrap;padding:.45rem .8rem .45rem .6rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(10,14,17,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#D5DDE2;font-size:.88rem;align-items:center}
.hero-points .ic{margin-top:0}

/* Belegzeile: dunkles Band, das den Film fortsetzt, mit großen Zahlen */
.proof{background:var(--void);border-bottom:0;color:var(--dink);position:relative}
.proof::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(78,195,255,.5),transparent)}
.proof dl>div{padding:clamp(1.6rem,3vw,2.4rem) clamp(1rem,2.4vw,2rem);border-left:1px solid var(--dline)}
.proof dt{font:700 clamp(2.3rem,4.2vw,3.6rem)/1 var(--fd);letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.proof dl>div::before{content:'';display:block;width:28px;height:3px;border-radius:2px;background:var(--cy);margin-bottom:1rem}
.proof dd{margin-top:.6rem;color:var(--dsoft);font-size:.9rem;max-width:22ch}
.proof dl>div{opacity:1;transform:none;transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.proof.pre dl>div{opacity:0;transform:translateY(10px)}
.proof dl>div:nth-child(2){transition-delay:60ms}.proof dl>div:nth-child(3){transition-delay:120ms}.proof dl>div:nth-child(4){transition-delay:180ms}
@media(max-width:860px){.proof dl>div,.proof dl>div:nth-child(2n){border-left:0}.proof dl>div:nth-child(2n){border-left:1px solid var(--dline)}.proof dl>div:nth-child(n+3){border-top:1px solid var(--dline)}}

/* Kompakter Tempo-Block (z. B. Melle-Seite): hell, fügt sich in den Lesefluss */
.speed.sc{background:var(--bg);color:var(--ink)}
.speed.sc .speed-g{background:var(--line);border-color:var(--line)}
.speed.sc .speed-c{background:#fff}
.speed.sc .speed-c h3{color:var(--ink)}
.speed.sc .speed-c p{color:var(--soft)}
.speed.sc .speed-n b{color:var(--ac)}
.speed.sc .speed-n span,.speed.sc .speed-f a{color:var(--faint)}

/* Einsenden: Ablauf links, Zusammenfassung rechts */
.send{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:clamp(2rem,6vw,5.5rem);align-items:start}
.send h2{max-width:18ch;margin-bottom:2rem}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:'';position:absolute;left:19px;top:12px;bottom:12px;width:2px;background:var(--line)}
.timeline li{position:relative;display:flex;gap:1.3rem;padding-bottom:2rem}
.timeline li:last-child{padding-bottom:0}
.tl-n{position:relative;z-index:1;flex:none;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font:700 1rem var(--fd)}
.timeline h3{margin:.45rem 0 .35rem;font-size:1.15rem}
.timeline p{margin:0;color:var(--soft);max-width:56ch}
.send-card{position:sticky;top:6.5rem;background:var(--graphite);color:var(--dink);border-radius:var(--r4);padding:clamp(1.5rem,3vw,2.2rem);display:flex;flex-direction:column;gap:.7rem}
.send-k{margin:0;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dsoft);font-weight:600}
.send-big{display:flex;align-items:center;gap:1rem;padding:.4rem 0 1rem;border-bottom:1px solid var(--dline)}
.send-big b{font:700 4.2rem/1 var(--fd);letter-spacing:-.05em;color:var(--cy)}
.send-big span{color:var(--dink);font-weight:600;line-height:1.35}
.send-card dl{margin:0 0 .6rem}
.send-card dl>div{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--dline);font-size:.93rem}
.send-card dt{color:var(--dsoft)}
.send-card dd{margin:0;color:#fff;font-weight:600;text-align:right}
.send-card .b2 .ic{color:#4ADE80}
.checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1rem}
.checklist li{display:flex;gap:.85rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r3);padding:1.2rem}
.checklist .ic{color:var(--ac);width:22px;height:22px;margin-top:.1rem}
.checklist b{display:block;font-family:var(--fd);font-size:1.02rem;margin-bottom:.2rem}
.checklist span{color:var(--soft);font-size:.94rem;line-height:1.5}
@media(max-width:900px){.send{grid-template-columns:1fr}.send-card{position:static}}

/* Klare Aufteilung: Text links bis rund 44 %, rechts läuft der Film frei */
@media(min-width:861px){
  .hero-copy>*{max-width:min(44rem,42vw)}
  .hero h1{font-size:clamp(2.3rem,3.6vw,3.9rem);max-width:min(44rem,42vw)}
}
/* Adresse in der Infoleiste ist jetzt ein Link zur Route: auf Touch ausreichend hoch */
@media (pointer:coarse){.util a{min-height:32px}}

/* ======================================================================
   STARTSEITE v3 · geführter Weg, eine Aussage pro Abschnitt
   ====================================================================== */
.big{font-size:clamp(2.1rem,4.4vw,3.8rem);line-height:1.04;letter-spacing:-.035em;text-align:center;max-width:18ch;margin:0 auto clamp(2rem,4vw,3rem)}
.flow-hd{text-align:center;margin:0 auto clamp(2.2rem,4.5vw,3.4rem);max-width:44rem}
.flow-hd .big{margin-bottom:.8rem}
.flow-hd p{color:var(--soft);font-size:1.12rem;margin:0}
.proof+section{padding-top:clamp(4.5rem,9vw,7.5rem)}

/* Einstieg: große Kacheln, ein Tipp startet die Anfrage */
.pick .ptiles{gap:1rem}
.pick .ptile{padding:1.6rem 1.4rem;border-radius:var(--r4);gap:.7rem;min-height:150px;justify-content:flex-end;position:relative;overflow:hidden}
.pick .ptile .ic{width:30px;height:30px;position:absolute;top:1.4rem;left:1.4rem}
.pick .ptile b{font-size:1.15rem}
.pick .ptile small{font-size:.85rem}
.pick .ptile::after{content:'→';position:absolute;top:1.25rem;right:1.4rem;font-size:1.2rem;color:var(--faint);transition:transform 160ms var(--ease-out),color 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.pick .ptile:hover::after{transform:translateX(4px);color:var(--ink)}}
@media(max-width:560px){
  /* Handy: nur Symbol und Titel – ein Tipp, kein Lesen */
  .pick .ptile{min-height:0;padding:1.1rem 1rem;justify-content:flex-start;gap:.7rem}
  .pick .ptile .ic{position:static;width:26px;height:26px}
  .pick .ptile b{font-size:clamp(.86rem,3.9vw,1rem);overflow-wrap:normal;word-break:keep-all}
  .pick .ptile{padding-inline:.85rem}
  .pick .ptile small{display:none}
  .pick .ptile::after{top:1rem;right:1rem}
}

/* Ablauf als Scroll-Geschichte */
.flow{background:var(--paper)}
.flow-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.flow-stage{position:sticky;top:calc(50vh - min(26vw,300px));height:min(52vw,600px);border-radius:var(--r4);background:var(--graphite);overflow:hidden;box-shadow:var(--sh2)}
.fv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.98);transition:opacity 450ms var(--ease-out),transform 450ms var(--ease-out)}
.fv.on{opacity:1;transform:none}
.flow-steps{list-style:none;margin:0;padding:0}
.flow-steps li{min-height:min(60vh,520px);display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity 350ms var(--ease-out)}
.flow-steps li.on{opacity:1}
.flow-steps h3{font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.1;letter-spacing:-.03em;margin:.9rem 0 .6rem}
.flow-steps p{color:var(--soft);font-size:1.12rem;max-width:34ch;margin:0}
.fs-meta{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.who{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:999px;background:var(--ink);color:#fff;font-size:.8rem;font-weight:600}
.who.we{background:var(--cy);color:#06222F}
.who::before{content:'Wer:';font-weight:400;opacity:.7}
.dur{font-size:.85rem;color:var(--faint);font-weight:600;font-variant-numeric:tabular-nums}
.fv-m{display:none}
.flow-cta{text-align:center;margin:clamp(2rem,4vw,3rem) 0 0}
@media(max-width:900px){
  .flow-g{grid-template-columns:1fr}
  .flow-stage{display:none}
  .flow-steps li{min-height:0;opacity:1;padding:2rem 0;border-top:1px solid var(--line)}
  .flow-steps li:first-child{border-top:0;padding-top:0}
  .fv-m{display:block;margin-top:1.4rem;border-radius:var(--r4);background:var(--graphite);padding:1.4rem;overflow:hidden}
  .fv-m .mock.photo{margin:-1.4rem}
}

/* Darstellungen im Ablauf: Oberflächen statt Illustrationen */
.mock{font-size:.9rem;color:var(--ink)}
.mock.phone{width:min(300px,80%);background:#fff;border-radius:34px;padding:1.4rem 1.2rem 1.3rem;box-shadow:0 30px 80px rgba(0,0,0,.45);border:8px solid #1C2226}
.mock.offer{width:min(360px,86%);background:#fff;border-radius:var(--r3);padding:1.4rem;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.m-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem;font-weight:700;font-family:var(--fd);font-size:1.05rem}
.m-top small{font:500 .75rem var(--fu);color:var(--faint)}
.mock label{display:block;font-size:.75rem;font-weight:600;color:var(--faint);margin:.7rem 0 .35rem}
.m-in{border:1.5px solid var(--line2);border-radius:10px;padding:.6rem .75rem;font-weight:600}
.m-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.m-chips span{padding:.4rem .65rem;border-radius:999px;border:1.5px solid var(--line2);font-size:.8rem}
.m-chips .on{background:var(--ink);border-color:var(--ink);color:#fff}
.m-btn{margin-top:1.1rem;background:var(--cy);color:#06222F;text-align:center;border-radius:10px;padding:.7rem;font-weight:700}
.m-row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.88rem}
.m-row span{color:var(--faint)}
.mock.photo{margin:0;position:absolute;inset:0}
.mock.photo img{width:100%;height:100%;object-fit:cover}
.mock.photo figcaption{position:absolute;left:1.2rem;bottom:1.2rem;padding:.55rem .9rem;border-radius:999px;background:rgba(7,9,11,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-weight:600;font-size:.88rem}
@media(max-width:900px){.fv-m .mock.photo{position:relative;inset:auto}.fv-m .mock.photo img{aspect-ratio:16/10;height:auto}.fv-m .mock.phone,.fv-m .mock.offer{margin:0 auto;box-shadow:none}}

/* Teilequalität: vier knappe Karten */
.qcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.qcards li{background:#fff;border:1px solid var(--line);border-radius:var(--r4);padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.3rem;min-height:170px}
.qcards b{font:700 1.25rem/1.2 var(--fd);letter-spacing:-.02em}
.qcards small{color:var(--faint);font-size:.82rem}
.qcards span{margin-top:auto;padding-top:1.2rem;font-weight:600;color:var(--ac)}
@media(max-width:900px){.qcards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);padding-bottom:.4rem}.qcards li{flex:0 0 72%;scroll-snap-align:start}}

/* Vertrauen: vier Aussagen, kein Fließtext */
.trust-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.trust-g li{display:flex;flex-direction:column;gap:.35rem;text-align:center;align-items:center}
.trust-g .ic{width:30px;height:30px;color:var(--ac);margin-bottom:.4rem}
.trust-g b{font:700 1.1rem var(--fd);letter-spacing:-.015em}
.trust-g span{color:var(--soft);font-size:.93rem;max-width:22ch}
@media(max-width:860px){.trust-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1rem}}

/* Einzugsgebiet kompakt */
.area{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center}
.area h2{margin-bottom:.6rem;max-width:18ch}
.area p{margin:0;color:var(--soft)}
.area-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.area-chips a{display:inline-flex;align-items:center;min-height:44px;padding:.45rem 1rem;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem}
.area-chips a:hover{border-color:var(--ink)}
.area-chips .more{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:860px){.area{grid-template-columns:1fr}}

/* FAQ und Abschluss */
.faqwrap>div{max-width:860px;margin:0 auto}
.faq-more{text-align:center;margin:1.6rem 0 0}
.final{text-align:center;background:var(--void)}
.final .big{color:#fff;margin-bottom:1rem}
.final p{color:var(--dsoft);font-size:1.12rem;margin:0 auto 2rem;max-width:40ch}

/* Einblenden beim Scrollen: nur Elemente unterhalb des ersten Bildschirms */
.rv.pre{opacity:0;transform:translateY(18px)}
.rv{transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){.rv.pre{opacity:1;transform:none}.fv{transition:none}.flow-steps li{transition:none}}

/* ======================================================================
   REPARATURRECHNER
   ====================================================================== */
.calc{background:var(--bg);padding-top:clamp(4rem,8vw,6.5rem)}
.calc-g{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.calc-steps{display:flex;flex-direction:column;gap:.9rem}
.c-step{display:flex;gap:1.1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r4);padding:clamp(1.2rem,2.5vw,1.7rem)}
.c-step>div{flex:1;min-width:0}
.c-step h3{margin:.25rem 0 1rem;font-size:1.15rem}
.c-n{flex:none;width:32px;height:32px;margin:0;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font:700 .9rem var(--fd)}
.c-such{position:relative}
.c-such .inp{width:100%;font-size:1.05rem;padding:.85rem 1rem}
.c-list{position:absolute;left:0;right:0;top:calc(100% + .35rem);z-index:20;background:#fff;border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh2);padding:.35rem;max-height:320px;overflow:auto}
.c-list button{display:block;width:100%;text-align:left;padding:.7rem .8rem;border:0;background:none;border-radius:10px;font:500 .98rem var(--fu);color:var(--ink);cursor:pointer;min-height:44px}
.c-list button:hover,.c-list button:focus-visible{background:var(--paper)}
.c-list p{margin:.5rem .7rem;color:var(--soft)}
.c-beliebt,.c-reps{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem}
.c-reps{margin-top:0}
.calc .chip{display:inline-flex;align-items:center;min-height:42px;padding:.45rem .95rem;border-radius:999px;border:1.5px solid var(--line2);background:#fff;color:var(--ink);font:500 .92rem var(--fu);cursor:pointer;transition:border-color 120ms var(--ease-out),background-color 120ms var(--ease-out),transform 120ms var(--ease-out)}
.calc .chip:active{transform:scale(.97)}
.calc .chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
@media (hover:hover) and (pointer:fine){.calc .chip:hover{border-color:var(--ink)}}
.c-leer{margin:0;color:var(--faint)}
.c-qual{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.7rem}
.qopt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;text-align:left;padding:1.1rem 1rem 1rem;border-radius:var(--r3);border:1.5px solid var(--line2);background:#fff;cursor:pointer;color:var(--ink);font-family:var(--fu);transition:border-color 120ms var(--ease-out),box-shadow 160ms var(--ease-out),transform 120ms var(--ease-out)}
.qopt:active{transform:scale(.985)}
.qopt[aria-checked=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.qopt b{font:700 1.02rem/1.25 var(--fd)}
.qopt small{color:var(--faint);font-size:.8rem;line-height:1.35}
.q-preis{margin-top:.6rem;font:700 1.55rem/1 var(--fd);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.q-spar{font-size:.8rem;font-weight:600;color:var(--ok)}
.q-spar.q-leer{visibility:hidden}
.q-info{margin-top:.35rem;font-size:.8rem;color:var(--soft);line-height:1.4}
.q-tag{position:absolute;top:-.6rem;right:.8rem;background:var(--cy);color:#06222F;font-size:.7rem;font-weight:700;letter-spacing:.04em;padding:.2rem .55rem;border-radius:999px}
.c-weg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.wopt{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;text-align:left;padding:1rem;border-radius:var(--r3);border:1.5px solid var(--line2);background:#fff;cursor:pointer;color:var(--ink);font-family:var(--fu);transition:border-color 120ms var(--ease-out),transform 120ms var(--ease-out)}
.wopt:active{transform:scale(.985)}
.wopt .ic{color:var(--ac);width:22px;height:22px;margin-bottom:.2rem}
.wopt b{font:700 .98rem var(--fd)}
.wopt small{color:var(--faint);font-size:.8rem}
.wopt[aria-checked=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.calc-sum{position:sticky;top:6.5rem;background:var(--graphite);color:var(--dink);border-radius:var(--r4);padding:clamp(1.4rem,3vw,2rem);display:flex;flex-direction:column;gap:.6rem;min-height:200px}
.calc-sum .c-leer{color:var(--dsoft)}
.s-k{margin:0;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dsoft);font-weight:600}
.s-preis{margin:0;font:700 clamp(2.6rem,5vw,3.6rem)/1 var(--fd);letter-spacing:-.045em;color:#fff;font-variant-numeric:tabular-nums}
.s-spar{margin:0;display:inline-flex;align-self:flex-start;padding:.3rem .7rem;border-radius:999px;background:rgba(74,222,128,.14);color:#6EE7A0;font-weight:700;font-size:.9rem}
.s-steuer{margin:0;font-size:.78rem;color:var(--dsoft)}
.s-dl{margin:.4rem 0}
.s-dl>div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--dline);font-size:.9rem}
.s-dl dt{color:var(--dsoft)}.s-dl dd{margin:0;font-weight:600;text-align:right;color:#fff}
.s-plus{list-style:none;margin:.2rem 0 .6rem;padding:0;display:grid;gap:.35rem;font-size:.85rem;color:var(--dsoft)}
.s-plus li::before{content:'✓';color:var(--cy);margin-right:.5rem;font-weight:700}
.calc-sum .b{margin-top:.2rem}
.s-kombi{margin:.4rem 0 0;font-size:.82rem;color:var(--dsoft)}
.s-kombi a{color:#fff}
.calc-sum.dk .b2,.calc-sum .b2{color:#fff;border-color:rgba(255,255,255,.3);background:transparent}
.calc-sum .b1{background:var(--cy);border-color:var(--cy);color:#06222F}
@media(max-width:980px){.calc-g{grid-template-columns:1fr}.calc-sum{position:static}}
@media(max-width:620px){.c-weg{grid-template-columns:1fr}.c-step{gap:.8rem;padding:1.1rem}.c-n{width:28px;height:28px}.c-qual{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.c-qual{grid-template-columns:1fr}}

/* ======================================================================
   KASSE
   ====================================================================== */
.kasse-g{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:clamp(1.5rem,5vw,4rem);align-items:start}
.kasse-g h2{font-size:1.3rem;margin:2rem 0 1rem}
.kasse-g h2:first-child{margin-top:0}
.k-tage,.k-slots{display:flex;flex-wrap:wrap;gap:.45rem}
.k-slots{margin-top:.8rem}
.kasse-g .chip{display:inline-flex;align-items:center;min-height:44px;padding:.45rem .9rem;border-radius:999px;border:1.5px solid var(--line2);background:#fff;color:var(--ink);font:500 .92rem var(--fu);cursor:pointer}
.kasse-g .chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.k-zahl{display:grid;gap:.6rem}
.k-zahl .ck,.k-rechtl .ck{border:1px solid var(--line);border-radius:var(--r2);padding:.85rem 1rem;background:#fff}
.k-rechtl{display:grid;gap:.7rem;margin-top:2rem}
.k-rechtl small{color:var(--faint)}
.k-sum{position:sticky;top:6.5rem;background:var(--graphite);border-radius:var(--r4);padding:clamp(1.4rem,3vw,2rem);display:flex;flex-direction:column;gap:.5rem}
.k-titel{margin:0;font:700 1.2rem/1.3 var(--fd);color:#fff}
.k-q{margin:0;color:var(--dsoft)}
.k-sum dl{margin:.6rem 0}
.k-sum dl>div{display:flex;justify-content:space-between;padding:.55rem 0;border-bottom:1px solid var(--dline);font-size:.92rem}
.k-sum dt{color:var(--dsoft)}.k-sum dd{margin:0;color:#fff;font-weight:600}
.k-ges dt,.k-ges dd{font:700 1.2rem var(--fd)!important;color:#fff!important}
.k-steuer{margin:0 0 .6rem;font-size:.78rem;color:var(--dsoft)}
.k-fuss{margin:.6rem 0 0;font-size:.8rem;color:var(--dsoft);text-align:center}
.err{display:none}
.fld.bad .err{display:flex}
@media(max-width:900px){.kasse-g{grid-template-columns:1fr}.k-sum{position:static}}
.begleit h2{font-size:1.4rem}
@media print{header.top,.util,footer,.mbar,#wa,.subhero,.note{display:none!important}}
/* Rechner auf dem Handy: volle Breite, Preis rechts neben dem Namen */
@media(max-width:620px){
  .c-step{display:block;position:relative;padding:1.1rem}
  .c-step .c-n{position:absolute;top:1.05rem;left:1.1rem}
  .c-step h3{padding-left:2.5rem;min-height:28px;display:flex;align-items:center;margin:0 0 .9rem}
  .c-qual{grid-template-columns:1fr}
  .qopt{display:grid;grid-template-columns:1fr auto;column-gap:1rem;align-items:start;padding:1rem}
  .qopt b{grid-column:1;grid-row:1}
  .qopt small{grid-column:1;grid-row:2}
  .qopt .q-preis{grid-column:2;grid-row:1/3;margin:0;align-self:center;font-size:1.45rem}
  .qopt .q-spar{grid-column:1/-1;grid-row:3;margin-top:.4rem}
  .qopt .q-spar.q-leer{display:none}
  .qopt .q-info{grid-column:1/-1;grid-row:4}
  .q-tag{right:1rem}
}


/* ======================================================================
   ANWENDUNGSBAUSTEINE (Assistent, Kalender, Formulare, WhatsApp,
   Datenschutz-Hinweis, Firmenkundenbereich, Verwaltung)
   ====================================================================== */
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
@keyframes rise{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes slidein{from{opacity:0;transform:translate3d(var(--sx,14px),0,0)}to{opacity:1;transform:none}}
@keyframes nudge{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
#expIn{transition:transform 1100ms var(--e)}
.fld{margin-bottom:1.05rem}
.fld>label,.fld .gl{display:block;font-size:.86rem;font-weight:600;margin-bottom:.42rem}
.inp{width:100%;padding:.78em .95em;border:1.5px solid var(--line2);border-radius:var(--r1);background:#fff;font-size:.95rem;transition:border-color 90ms linear}
.inp:focus{border-color:var(--ac);outline-offset:1px}
textarea.inp{min-height:110px;resize:vertical}
.hint{font-size:.8rem;color:var(--faint);margin-top:.35rem}
.err{display:none;color:var(--bad);font-size:.81rem;margin-top:.4rem;gap:.35em;align-items:center}
.fld.bad .err{display:flex;animation:rise 150ms var(--e) both}
.fld.bad .inp{border-color:var(--bad);background:var(--badbg)}
.fld.bad{animation:nudge 220ms var(--e)}
.ck{display:flex;gap:.6rem;align-items:flex-start;font-size:.87rem;color:var(--soft);cursor:pointer}
.ck input{margin-top:.28em;width:17px;height:17px;accent-color:var(--ac);flex:none}
.ac{position:relative}
.aclist{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--sh2);max-height:280px;overflow-y:auto;z-index:20}
.aclist button{display:flex;width:100%;justify-content:space-between;gap:.8rem;padding:.62em .9em;background:none;border:none;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;font-size:.9rem}
.aclist button:last-child{border-bottom:none}
.aclist button:hover,.aclist button[aria-selected=true]{background:var(--tint)}
.aclist small{color:var(--faint)}
.aclist .none{padding:.9em;color:var(--faint);font-size:.87rem}
.wiz{background:#fff;border:1px solid var(--line);border-radius:var(--r4);box-shadow:var(--sh2);overflow:hidden;max-width:980px;margin-inline:auto}
.wiz-hd{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 1.5rem;background:var(--sunk);border-bottom:1px solid var(--line);flex-wrap:wrap}
.wiz-hd b{font-family:var(--fd)}
.wiz-hd small{color:var(--faint);font-size:.82rem}
.rail{display:flex;gap:.3rem;margin-top:.45rem}
.rail i{height:3px;width:22px;border-radius:2px;background:var(--line2);transition:background 220ms var(--e),transform 220ms var(--e)}
.rail i.on{background:var(--ac)}
.rail i.now{background:var(--ac);width:34px}
.wiz-body{display:grid;grid-template-columns:1fr 300px}
@media(max-width:880px){.wiz-body{grid-template-columns:1fr}}
.stage{padding:1.5rem;min-height:360px}
.stage-in{animation:slidein 220ms var(--e) both}
.stage h3{font-size:1.25rem}
.stage .lede{color:var(--soft);font-size:.92rem;margin-bottom:1.2rem;max-width:56ch}
.side{background:var(--sunk);border-left:1px solid var(--line);padding:1.4rem}
@media(max-width:880px){.side{border-left:none;border-top:1px solid var(--line)}}
.side h4{font:600 .82rem var(--fd);color:var(--faint);margin-bottom:.8rem}
.foot{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.55rem}
.opt{display:flex;align-items:center;gap:.7rem;padding:.8rem .9rem;border:1.5px solid var(--line2);border-radius:var(--r2);background:#fff;cursor:pointer;text-align:left;font-size:.9rem;font-weight:500;transition:border-color 90ms linear,background 90ms linear,transform 70ms var(--e)}
.opt:hover{border-color:var(--ac)}
.opt:active{transform:scale(.985)}
.opt .ic{color:var(--faint);width:20px;height:20px}
.opt[aria-pressed=true],.opt[aria-checked=true]{border-color:var(--ac);background:var(--tint);box-shadow:inset 0 0 0 1px var(--ac)}
.opt[aria-pressed=true] .ic,.opt[aria-checked=true] .ic{color:var(--ac)}
.opt small{display:block;color:var(--faint);font-size:.77rem;font-weight:400}
.chipline{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{padding:.55em .95em;border-radius:999px;border:1.5px solid var(--line2);background:#fff;cursor:pointer;font-size:.88rem;font-weight:500;transition:border-color 90ms linear,background 90ms linear}
.chip:hover{border-color:var(--ac)}
.chip[aria-checked=true]{background:var(--ac);border-color:var(--ac);color:#fff}
.cal{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;background:#fff}
.cal-hd{display:flex;justify-content:space-between;align-items:center;padding:.65rem .9rem;background:var(--sunk);border-bottom:1px solid var(--line)}
.cal-hd b{font:700 .92rem var(--fd)}
.cal-hd button{width:32px;height:32px;border:1px solid var(--line2);border-radius:var(--r1);background:#fff;cursor:pointer}
.cal-hd button:disabled{opacity:.3;cursor:not-allowed}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:.55rem}
.cal-g .dow{text-align:center;font-size:.72rem;font-weight:600;color:var(--faint);padding:.3rem 0}
.cal-g button{aspect-ratio:1;border:none;background:none;border-radius:var(--r1);font-size:.87rem;cursor:pointer}
.cal-g button:hover:not(:disabled){background:var(--tint);color:var(--acink)}
.cal-g button:disabled{color:var(--line2);cursor:not-allowed}
.cal-g button[aria-pressed=true]{background:var(--ac);color:#fff;font-weight:700}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:.45rem;margin-top:.9rem}
.slots button{padding:.55em;border:1.5px solid var(--line2);border-radius:var(--r1);background:#fff;cursor:pointer;font-size:.87rem}
.slots button:hover{border-color:var(--ac)}
.slots button[aria-pressed=true]{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:600}
.done{text-align:center;padding-block:1.3rem;animation:rise 220ms var(--e) both}
.done .ic{width:48px;height:48px;color:var(--ok);margin:0 auto .6rem}
.ref{display:inline-block;font:800 1.4rem var(--fd);letter-spacing:.04em;color:var(--acink);background:var(--tint);padding:.32em .8em;border-radius:var(--r2);margin:.6rem 0 1rem}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
.fg img{height:26px}
.fg>div>p{font-size:.86rem;color:var(--dsoft);max-width:34ch;margin-top:.9rem}
.fg h4{font:600 .85rem var(--fd);color:#fff;margin-bottom:.8rem}
.fg ul{display:grid;gap:.5rem}
.fg a{color:var(--dsoft);text-decoration:none;font-size:.88rem}
.fg a:hover{color:var(--cy)}
.fb{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid var(--dline);display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;font-size:.8rem;color:#78828A}
@media(max-width:860px){.fg{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.fg>div:first-child{grid-column:1/-1}}
@media(max-width:760px){.stage .inp,.stage .opt,.stage .chip,.foot{scroll-margin-bottom:6rem}}
.bub{max-width:88%;padding:.7em .92em;border-radius:var(--r2);font-size:.88rem;line-height:1.52;animation:rise 160ms var(--e) both;white-space:pre-wrap}
.bub-a{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.bub-u{align-self:flex-end;background:var(--ac);color:#fff;border-bottom-right-radius:4px}
.bub a{color:inherit;font-weight:600}
.go{background:var(--ac);color:#fff;border:none;border-radius:var(--r1);width:38px;height:38px;flex:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.go:disabled{opacity:.45}
.portal-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.4rem;flex-wrap:wrap}
.posrow{display:grid;grid-template-columns:1.2fr .45fr 1.6fr auto;gap:.6rem;align-items:end;padding-bottom:.4rem;border-bottom:1px dashed var(--line);margin-bottom:.8rem}
.posrow .fld{margin-bottom:.4rem}
@media(max-width:700px){.posrow{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.posrow .fld:nth-child(3){grid-column:1/-1}}
.otable{display:grid;gap:.5rem}
.orow{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.orow small{display:block;color:var(--faint);font-size:.8rem}
.st{display:inline-block;font-size:.74rem;font-weight:600;padding:.25em .6em;border-radius:5px;background:var(--sunk);color:var(--soft);white-space:nowrap;font-style:normal}
.st-neu,.st-pruefung{background:var(--warn);color:var(--warnink)}
.st-angebot-gesendet,.st-termin-bestaetigt,.st-beauftragt{background:var(--tint);color:var(--acink)}
.st-in-reparatur,.st-in-arbeit{background:#EEE8FB;color:#4B2A8C}
.st-fertig,.st-abgeschlossen,.st-aktiv{background:var(--okbg);color:var(--ok)}
.st-abgelehnt,.st-storniert,.st-gesperrt{background:var(--badbg);color:var(--bad)}
.adm{background:var(--sunk);min-height:70vh}
.adm-login{max-width:420px;margin:3rem auto}
.adm-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;flex-wrap:wrap}
.adm-top b{font:700 1.2rem var(--fd);display:block}
.adm-top small{color:var(--ok);font-size:.8rem}
.adm-top small::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:.4em;vertical-align:1px}
.adm-tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);margin-bottom:1.3rem;overflow-x:auto}
.adm-tabs button{background:none;border:none;padding:.75rem 1rem;font-weight:600;color:var(--soft);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;display:flex;gap:.45rem;align-items:center}
.adm-tabs button[aria-selected=true]{color:var(--ac);border-bottom-color:var(--ac)}
.adm-badge{background:var(--bad);color:#fff;border-radius:999px;font-size:.72rem;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 .4em}
.adm-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
@media(max-width:800px){.adm-kpis{grid-template-columns:1fr 1fr}}
.adm-kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r3);padding:1.1rem;text-align:left;cursor:pointer}
.adm-kpi b{display:block;font:800 2rem var(--fd);color:var(--ink)}
.adm-kpi span{color:var(--soft);font-size:.87rem}
.adm-kpi.hot{border-color:var(--ac);box-shadow:inset 0 0 0 1px var(--ac)}
.adm-kpi.hot b{color:var(--ac)}
.adm-filter{display:grid;grid-template-columns:1fr 200px auto;gap:.6rem;align-items:center;margin-bottom:1rem}
@media(max-width:700px){.adm-filter{grid-template-columns:1fr}}
.adm-item{background:#fff;border:1px solid var(--line);border-radius:var(--r2);margin-bottom:.5rem}
.adm-item summary{display:flex;gap:.8rem;align-items:center;padding:.8rem 1rem;cursor:pointer;flex-wrap:wrap;list-style:none}
.adm-item summary::-webkit-details-marker{display:none}
.adm-item summary .m{color:var(--soft);font-size:.86rem}
.adm-item summary .r{margin-left:auto;color:var(--faint);font-size:.8rem}
.adm-body{padding:0 1rem 1rem;border-top:1px solid var(--line);padding-top:1rem}
.adm-desc{background:var(--sunk);padding:.8rem;border-radius:var(--r1);white-space:pre-wrap;margin-top:.8rem;font-size:.9rem}
.adm-log{max-height:260px;overflow:auto;font-size:.82rem;display:grid;gap:.5rem}
.adm-log small{display:block;color:var(--faint)}
.adm-save{position:sticky;bottom:0;background:linear-gradient(transparent,var(--sunk) 30%);padding:1.2rem 0 .6rem;margin-top:.6rem}
.adm-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r1);background:var(--sunk)}
.adm-img.empty{display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:.88rem;border:1px dashed var(--line2)}
.adm-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.8rem}
.adm-gal figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.adm-gal img{width:100%;aspect-ratio:4/3;object-fit:cover}
.adm-gal figcaption{display:flex;justify-content:space-between;align-items:center;padding:.4rem .6rem;font-size:.82rem}
.adm-toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.75rem 1.2rem;border-radius:var(--r2);z-index:90;font-size:.9rem;box-shadow:var(--sh2);animation:rise 160ms var(--e) both}
.adm-toast.bad{background:var(--bad)}
.pnote{position:fixed;left:1rem;right:1rem;bottom:1rem;max-width:720px;margin-inline:auto;z-index:70;background:#fff;border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh2);padding:1rem 1.1rem;display:flex;gap:1rem;align-items:center;animation:rise 200ms var(--e) both}
.pnote p{margin:0;font-size:.88rem;color:var(--soft);line-height:1.5}
.pnote p b{color:var(--ink)}
.pnote .b{flex:none}
.pnote .ps{display:none}
@media(max-width:760px){.pnote{left:0;right:0;bottom:0;border-radius:0;border-width:1px 0 0;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px));gap:.8rem}}
@media(max-width:760px){.pnote .pl{display:none}}
@media(max-width:760px){.pnote .ps{display:inline}}
@media(max-width:760px){.pnote p{font-size:.82rem}}
@media print{.pnote{display:none}}
dd,dt,label{overflow-wrap:break-word;hyphens:manual;-webkit-hyphens:manual}
#wa{position:fixed;right:1.2rem;bottom:1.2rem;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
.wa-panel{order:1}
.wa-bubble{order:2}
.wa-fab{order:3}
.wa-panel{max-height:calc(100vh - 7.5rem);overflow:auto;overscroll-behavior:contain}
.wa-fab{display:flex;align-items:center;gap:.5rem;background:#1FA855;color:#fff;border:0;border-radius:999px;padding:.85rem 1.2rem;font-weight:700;font-size:.95rem;box-shadow:0 8px 24px rgba(2,10,18,.45);cursor:pointer}
.wa-fab .ic{width:22px;height:22px}
.wa-fab:hover{background:#198F48}
.wa-fab:focus-visible,.wa-bgo:focus-visible,.wa-x:focus-visible,.wa-bx:focus-visible{outline:3px solid #0B0F12;outline-offset:2px}
.wa-bubble{position:relative;max-width:290px;background:#fff;border:1px solid var(--line);border-radius:16px 16px 4px 16px;padding:.95rem 1rem .9rem;box-shadow:var(--sh2);animation:rise 240ms var(--e) both}
.wa-bubble::after{content:'';position:absolute;right:22px;bottom:-8px;width:14px;height:14px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.wa-bubble p{margin:0 1.2rem .6rem 0;font-size:.9rem;line-height:1.45;color:var(--ink)}
.wa-bgo{background:#1FA855;color:#fff;border:0;border-radius:8px;padding:.5rem .8rem;font-weight:600;font-size:.86rem;cursor:pointer}
.wa-bx,.wa-x{position:absolute;top:.4rem;right:.45rem;background:none;border:0;font-size:.95rem;color:var(--faint);cursor:pointer;width:32px;height:32px;border-radius:8px}
.wa-panel{width:min(360px,calc(100vw - 2rem));background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(11,15,18,.28);overflow:hidden;animation:rise 200ms var(--e) both}
.wa-hd{position:relative;display:flex;gap:.7rem;align-items:center;background:#075E54;color:#fff;padding:.85rem 3rem .85rem 1rem}
.wa-hd b{display:block;font-size:.98rem}
.wa-hd small{color:#CDEAE4;font-size:.78rem}
.wa-av{width:38px;height:38px;border-radius:50%;background:#fff;color:#075E54;font:800 1.05rem var(--fd);display:flex;align-items:center;justify-content:center;flex:none}
.wa-x{color:#fff;top:50%;transform:translateY(-50%)}
.wa-body{padding:1rem;background:#ECE5DD}
.wa-msg{background:#fff;border-radius:0 12px 12px 12px;padding:.7rem .85rem;font-size:.9rem;line-height:1.45;margin-bottom:.9rem;box-shadow:0 1px 1px rgba(0,0,0,.08)}
#waForm .inp{background:#fff;margin-bottom:.5rem;font-size:16px}
#waForm textarea.inp{resize:vertical;min-height:80px}
.wa-send{background:#1FA855!important;border-color:#1FA855!important;display:flex;align-items:center;justify-content:center;gap:.45rem}
.wa-send .ic{width:19px;height:19px}
.wa-note{font-size:.76rem;color:#4A5157;margin:.65rem 0 0;line-height:1.45}
#waErr{margin:-.1rem 0 .5rem}
@media(max-width:760px){#wa{left:.8rem;right:.8rem;bottom:calc(4.8rem + env(safe-area-inset-bottom,0px));align-items:stretch}}
@media(max-width:760px){.wa-fab{display:none}}
@media(max-width:760px){.wa-bubble{align-self:center;max-width:320px;border-radius:16px}}
@media(max-width:760px){.wa-bubble::after{left:50%;right:auto;margin-left:-40px}}
@media(max-width:760px){.wa-panel{width:100%}}
@media(prefers-reduced-motion:reduce){.wa-bubble,.wa-panel{animation:none}}
.wdrows{display:grid;gap:.45rem}
.wdrow{display:grid;grid-template-columns:5.5rem 1fr auto 1fr;gap:.5rem;align-items:center}
.wdrow .inp{padding:.5rem .6rem}
.wdrow span{color:var(--faint);font-size:.85rem}
@media(max-width:560px){.wdrow{grid-template-columns:4.6rem 1fr auto 1fr;font-size:.9rem}}
.chip,.adm-kpi,.wa-fab,.wa-bgo{transition:background 90ms linear,border-color 90ms linear,color 90ms linear,box-shadow 150ms var(--ease-out),transform 120ms var(--ease-out)}
.chip:active,.wa-fab:active,.wa-bgo:active{transform:scale(.97)}
.adm-kpi b{font-variant-numeric:tabular-nums}
.adm-kpi b{font-variant-numeric:tabular-nums}
@media(max-width:760px){.head .wrap{gap:.6rem}}
@media (pointer:coarse){.chip,.wa-fab,.wa-bgo,.inp,select.inp{min-height:44px}}
@media (pointer:coarse){.wa-x,.wa-bx{width:44px;height:44px}}
@media (pointer:coarse){.fb a,.wa-note a,.hint a{display:inline-flex;align-items:center;min-height:24px}}
@media (pointer:coarse){.ck input[type=checkbox],.ck input[type=radio],input[type=checkbox],input[type=radio]{width:22px;height:22px}}
@media (pointer:coarse){.ck{min-height:44px;display:flex;align-items:flex-start;gap:.6rem;padding-block:.35rem}}
@media (pointer:coarse){.ck input[type=checkbox],.ck input[type=radio]{width:24px;height:24px;flex:none;margin-top:.1rem}}
.q-hinweis{grid-column:1/-1;margin:.3rem 0 0;font-size:.8rem;color:var(--faint);line-height:1.45}
.k-vorz{border:1.5px solid var(--line2);border-radius:var(--r2);padding:.9rem 1rem;background:#fff;margin-bottom:.6rem}
.k-vorz b{display:block;margin-bottom:.2rem}
#kFrist:empty{display:none}

/* ---------- Ansprechpartner ---------- */
.person{background:var(--bg)}
.person-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.person-bild{margin:0;border-radius:var(--r4);overflow:hidden;background:var(--graphite);box-shadow:var(--sh2)}
.person-bild img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ueber-bild{max-width:1100px}
.person-text h2{max-width:16ch;margin-bottom:1rem}
.person-lede{font-size:1.12rem;color:var(--soft);max-width:42ch;margin-bottom:1.6rem}
.person-fakten{list-style:none;margin:0 0 1.8rem;padding:0;border-top:1px solid var(--line)}
.person-fakten li{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.person-fakten b{font-weight:600;color:var(--faint)}
.person .b2{color:var(--ink);border-color:var(--line2)}
@media(max-width:900px){.person-g{grid-template-columns:1fr}.person-fakten li{grid-template-columns:1fr;gap:.15rem}}
/* ---------- Vorher/Nachher: Beispiel sichtbar, klar beschriftet ---------- */
.ba-sec .ba{max-width:1100px;margin:0 auto}
.ba-sec .ba-cap{max-width:1100px;margin:.6rem auto 0}
.ba-note{text-align:center;margin-top:.8rem!important}
/* ---------- Neues Logo ohne „Melle“ ---------- */
.logo img{height:22px;width:auto}
@media(max-width:760px){.logo img{height:18px}}
footer .fg img{height:20px!important;width:auto}
.mnav .mh img{height:20px!important;width:auto}
/* ---------- „Vertrag widerrufen“ im Fuß hervorgehoben ---------- */
footer a.f-widerruf{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.widerruf-cta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.widerruf-cta span{color:var(--soft)}
/* Handy: Logo ist breiter geworden – „Angebot anfragen“ steht dort bereits in der Schnellleiste unten */
@media(max-width:480px){.hact .b1{display:none}.logo img{height:17px}}

/* ======================================================================
   ABLAUF ALS STORY  (Anfrage → Zahlung → Rückgabe)
   Ein Rahmen, fünf Kapitel, eine Zeitachse – im Repairwerk-Stil.
   ====================================================================== */
.story-sec{background:var(--paper)}
.story{max-width:1120px;margin:0 auto}
.st-stage{position:relative;height:600px;border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 30px 80px rgba(14,19,22,.12);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sc{position:absolute;inset:0;padding:clamp(1.5rem,3.6vw,3rem);opacity:0;visibility:hidden;transition:opacity 450ms var(--ease-out),visibility 0s linear 450ms;cursor:default}
.sc.on{opacity:1;visibility:visible;transition:opacity 450ms var(--ease-out)}
.sc h3{font-family:var(--fd);font-weight:700;letter-spacing:-.035em;line-height:1.02;margin:0}
.sc h3 span{color:var(--ac)}
.sc-k{margin:0 0 .8rem;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
/* Einblendungen: Kapitel (.a) und Schritt (.e) */
.a{opacity:0;transform:translateY(16px);transition:opacity 600ms var(--ease-out) var(--d,0s),transform 600ms var(--ease-out) var(--d,0s)}
.sc.on .a{opacity:1;transform:none}
.stp .e{opacity:0;transform:translateY(10px);transition:opacity 450ms var(--ease-out) var(--d,0s),transform 450ms var(--ease-out) var(--d,0s)}
.stp.on .e{opacity:1;transform:none}

/* Kapitel 1: Problem */
.sc-problem{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2rem;align-items:center;background:#fff}
.sc-problem h3{font-size:clamp(2.2rem,4.6vw,3.8rem);margin-bottom:1rem}
.sc-problem h3 span{color:var(--faint)}
.sc-lead{margin:0;color:var(--soft);font-size:1.05rem;max-width:34ch}
.bubbles{position:relative;height:100%;min-height:260px}
.bub{position:absolute;left:var(--x);top:var(--y);max-width:66%;padding:.65rem .85rem;border-radius:14px 14px 14px 4px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(14,19,22,.1);font-size:.92rem;font-weight:500;color:var(--ink);line-height:1.35}
.bub small{display:block;font-size:.7rem;color:var(--faint);font-weight:500;margin-bottom:.15rem}
.bub-b{background:var(--paper);border-radius:14px 14px 4px 14px}
.bub-n{background:#FFF7E0;border-style:dashed;border-color:#E9C46A;border-radius:10px}
.bub-n b{display:inline-flex;align-items:center;justify-content:center;width:1.3rem;height:1.3rem;border-radius:50%;background:#C0392B;color:#fff;font-size:.72rem;margin-right:.35rem}
.bub.a{transform:translateY(18px) rotate(var(--r)) scale(.96)}
.sc.on .bub.a{transform:rotate(var(--r))}

/* Kapitel 2: Versprechen */
.sc-claim{background:var(--graphite);display:flex;flex-direction:column;justify-content:flex-end}
.claim-icon{position:absolute;top:clamp(1.5rem,3.6vw,3rem);left:clamp(1.5rem,3.6vw,3rem);width:52px;height:52px;border-radius:12px}
.sc-claim h3{font-size:clamp(2.6rem,6.4vw,5.2rem);max-width:13ch;color:#fff}
.sc-claim .c1,.sc-claim .c2{display:block}
.sc-claim .c2{color:var(--cy)}

/* Kapitel 3: Ablauf */
.sc-ablauf{background:#fff;display:flex;flex-direction:column}
.ab-kopf h3{font-size:clamp(1.6rem,3vw,2.4rem)}
.tl{list-style:none;margin:1.6rem 0 0;padding:1.2rem 0 0;position:relative;display:flex;justify-content:space-between}
.tl::before,.tl::after{content:'';position:absolute;left:7px;right:7px;top:calc(1.2rem + 6px);height:2px;border-radius:2px;background:var(--line)}
.tl::after{right:auto;width:calc((100% - 14px) * var(--pos,0));background:var(--ac);transition:width 700ms var(--ease-out)}
.tl li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.45rem;width:14px}
.tl li i{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--line2);transition:background-color 300ms,border-color 300ms,transform 300ms var(--ease-out)}
.tl li span{font-size:.72rem;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.tl li.erreicht i{background:var(--ac);border-color:var(--ac)}
.tl li.akt i{transform:scale(1.35);box-shadow:0 0 0 5px rgba(78,195,255,.25)}
.tl li.akt span{color:var(--ink)}
.tl-mark{position:absolute;top:-.1rem;left:calc(7px + (100% - 14px) * var(--pos,0));width:10px;height:10px;margin-left:-5px;background:var(--cy);border-radius:50% 50% 50% 0;transform:rotate(-45deg);transition:left 700ms var(--ease-out)}
.stps{position:relative;flex:1;margin-top:1.4rem;min-height:0}
.stp{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2.4rem;align-items:center;opacity:0;visibility:hidden;transition:opacity 350ms var(--ease-out),visibility 0s linear 350ms}
.stp.on{opacity:1;visibility:visible;transition:opacity 350ms var(--ease-out)}
.stp-txt{order:1}
.stp-vis{order:2;display:flex;align-items:center;justify-content:center;height:100%;min-height:0}
.stp-txt .who{display:inline-flex;align-items:center;gap:.35rem;margin:0 0 1rem;padding:.3rem .75rem;border-radius:999px;background:var(--ink);color:#fff;font-size:.8rem;font-weight:600}
.stp-txt .who::before{content:'Wer:';opacity:.65;font-weight:400}
.stp-txt .who.we{background:var(--cy);color:#06222F}
.big-n{margin:0;font:700 clamp(2.6rem,5.2vw,4rem)/1 var(--fd);letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.big-n small{margin-left:.45rem;font:600 .95rem var(--fu);letter-spacing:0;color:var(--ac)}
.stp-txt h4{margin:.9rem 0 .35rem;font:700 1.25rem var(--fd);letter-spacing:-.02em}
.stp-txt p:last-child{margin:0;color:var(--soft);max-width:36ch}
/* Mini-Oberflächen */
.mk{width:min(360px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.2rem 1.3rem;box-shadow:0 20px 50px rgba(14,19,22,.12);font-size:.9rem}
.mk-top{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 .8rem;font:700 1rem var(--fd)}
.mk-top small{font:500 .72rem var(--fu);color:var(--faint);background:var(--paper);padding:.15rem .5rem;border-radius:999px}
.mk-row{display:flex;align-items:center;gap:.6rem;margin:0;padding:.6rem 0;border-bottom:1px solid var(--line)}
.mk-row span{color:var(--faint);flex:1}
.mk-row b{font-weight:600}
.mk-row i{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--okbg);color:var(--ok);display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700}
.mk-preis{margin:1rem 0 0;font:700 2.2rem/1 var(--fd);letter-spacing:-.04em}
.mk-preis small{margin-left:.5rem;font:600 .8rem var(--fu);letter-spacing:0;color:var(--ok)}
.mk-pay{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.mk-pay span{padding:.4rem .7rem;border-radius:8px;border:1.5px solid var(--line2);font-size:.82rem;font-weight:600}
.mk-btn{position:relative;margin:0;height:46px;border-radius:10px;background:var(--ink);color:#fff;font-weight:700;overflow:hidden;transition:background-color 300ms var(--ease-out) 2.3s}
.mk-btn span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform 400ms var(--ease-out) 2.2s,opacity 300ms 2.2s}
.mk-btn-b{transform:translateY(100%);opacity:0}
.stp.on .mk-btn{background:var(--ok)}
.stp.on .mk-btn-a{transform:translateY(-100%);opacity:0}
.stp.on .mk-btn-b{transform:none;opacity:1}
.mk-mail-kopf{display:flex;gap:.7rem;align-items:center;margin:0 0 .9rem;padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.mk-mail-kopf img{width:34px;height:34px;border-radius:8px}
.mk-mail-kopf span{display:flex;flex-direction:column;line-height:1.3}
.mk-mail-kopf small{color:var(--faint)}
.mk-mail-z{margin:.4rem 0 0;padding:.55rem .7rem;border-radius:10px;background:var(--paper)}
.mk-mail.e{transform:translateY(-24px)}
.mk-foto{position:relative;margin:0;padding:0;width:100%;height:100%;max-height:340px;overflow:hidden}
.mk-foto img{width:100%;height:100%;object-fit:cover}
.mk-uhr{position:absolute;right:14px;bottom:14px;width:56px;height:56px;background:rgba(7,9,11,.72);border-radius:50%;padding:6px;transform:rotate(-90deg)}
.mk-uhr circle{fill:none;stroke:rgba(255,255,255,.2);stroke-width:4}
.mk-uhr .mk-uhr-f{stroke:var(--cy);stroke-dasharray:119.4;stroke-dashoffset:119.4;stroke-linecap:round;transition:stroke-dashoffset 3.2s linear .2s}
.stp.on .mk-uhr-f{stroke-dashoffset:0}
.mk-weg{position:relative;height:190px;border:0;box-shadow:none;background:transparent}
.mk-linie{position:absolute;left:0;right:0;bottom:48px;height:2px;background:var(--line2)}
.mk-box{position:absolute;left:0;bottom:50px;width:64px;height:58px;border-radius:8px;background:#fff;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font:700 .9rem var(--fd);transition:left 1.8s var(--ease-in-out) .2s}
.stp.on .mk-box{left:calc(100% - 150px)}
.mk-haus{position:absolute;right:0;bottom:50px;display:flex;flex-direction:column;align-items:center;gap:.2rem}
.mk-haus svg{width:62px;height:56px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.mk-haus small{position:absolute;top:100%;margin-top:.6rem;font-size:.75rem;color:var(--faint);white-space:nowrap}
.mk-tag{position:absolute;left:50%;bottom:0;transform:translateX(-50%);margin:0;padding:.35rem .8rem;border-radius:999px;border:1.5px solid var(--ac);color:var(--ac);font-size:.8rem;font-weight:600;white-space:nowrap}
.stp.on .mk-tag.e{transform:translateX(-50%)}
.mk-tag.e{transform:translateX(-50%) translateY(10px)}

/* Kapitel 4: Vorteile – Kreisblende ins Dunkle */
.sc-vorteile{background:var(--graphite);clip-path:circle(0% at 50% 50%);transition:clip-path 800ms var(--ease-in-out),opacity 0s,visibility 0s linear 800ms}
.sc-vorteile.on{clip-path:circle(150% at 50% 50%);transition:clip-path 800ms var(--ease-in-out),opacity 0s}
.sc-vorteile .sc-k{color:var(--dsoft)}
.sc-vorteile h3{font-size:clamp(2rem,4.2vw,3.4rem);color:#fff;max-width:15ch}
.sc-vorteile h3 span{color:var(--cy)}
.vt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 2.4rem;margin:2rem 0 0;max-width:720px}
.vt div{border-top:2px solid var(--cy);padding-top:.8rem}
.vt dt{font:700 clamp(2rem,4vw,3rem)/1 var(--fd);letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.vt dd{margin:.45rem 0 0;color:var(--dsoft);font-size:.9rem}

/* Kapitel 5: Abschluss */
.sc-ende{background:var(--void);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.4rem}
.ende-logo{width:min(320px,70%);height:auto}
.sc-ende h3{font-size:clamp(2rem,4.6vw,3.6rem);color:#fff}
.sc-ende h3 span{display:block;color:var(--cy)}
.ende-act{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
.sc-ende .b1{background:var(--cy);border-color:var(--cy);color:#06222F}
.sc-ende .b2{color:#fff;border-color:rgba(255,255,255,.3)}

/* Steuerung */
.st-ctrl{display:flex;align-items:center;gap:.6rem;margin-top:1rem}
.st-btn{flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line2);background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 120ms var(--ease-out)}
.st-btn:active{transform:scale(.94)}
.st-play{background:var(--ink);border-color:var(--ink);color:#fff}
.st-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.st-play .i-play{fill:currentColor;stroke:none;display:none}
.story:not(.laeuft) .st-play .i-play{display:block}
.story:not(.laeuft) .st-play .i-pause{display:none}
.st-bars{flex:1;display:flex;gap:.35rem;margin-left:.3rem}
.st-bar{flex:1;height:24px;padding:10px 0;border:0;background:none;cursor:pointer}
.st-bar-lang{flex:3}
.st-bar i{display:block;height:4px;border-radius:4px;background:var(--line2);overflow:hidden;position:relative}
.st-bar i::after{content:'';position:absolute;inset:0;background:var(--ac);transform-origin:left;transform:scaleX(var(--f,0))}

/* Tablet und Handy: Bild oben, Text unten */
@media(max-width:900px){
  .st-stage{height:720px;border-radius:22px}
  .sc-problem{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:1rem}
  .bubbles{min-height:0}
  .bub{max-width:78%;font-size:.86rem}
  .stp{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:1.2rem;align-items:stretch}
  .stp-vis{order:1}
  .stp-txt{order:2}
  .big-n{font-size:2.6rem}
  .stp-txt h4{margin-top:.6rem}
  .mk-foto{max-height:none;border-radius:16px}
  .vt{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
}
@media(max-width:420px){
  .st-stage{height:700px}
  .sc{padding:1.3rem}
  .tl{margin-top:1rem}
  .mk{padding:1rem;font-size:.84rem}
  .mk-preis{font-size:1.8rem}
  .stp-txt .who{margin-bottom:.6rem}
  .stp-txt p:last-child{font-size:.92rem}
}
/* Reduzierte Bewegung: keine Bewegung, Kapitel per Balken oder Tippen wählbar */
@media (prefers-reduced-motion:reduce){
  .a,.stp .e,.sc,.stp,.mk-box,.mk-btn,.mk-btn span,.mk-uhr-f,.tl::after,.tl-mark,.sc-vorteile{transition:none!important}
}
/* Story – Feinschliff */
.sc-claim .c1{color:#fff}
.sc-claim .c2{color:var(--cy)}
.mk-foto{padding:0;border:0;background:var(--graphite)}
.vt dd{overflow-wrap:normal;word-break:normal;hyphens:manual}
@media(min-width:901px){
  .sc-vorteile{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-rows:auto 1fr;column-gap:3.5rem;align-content:center}
  .sc-vorteile .sc-k{grid-column:1;grid-row:1;align-self:end}
  .sc-vorteile h3{grid-column:1;grid-row:2;align-self:start}
  .sc-vorteile .vt{grid-column:2;grid-row:1/3;margin:0;align-self:center}
}
@media(max-width:420px){.vt dd{font-size:.8rem}.vt{column-gap:1rem}}
body.story-sichtbar .wa-bubble{display:none!important}

/* ======================================================================
   HERO v4 – hell, ruhig, der Rechner ist der Einstieg
   ====================================================================== */
.hx{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 85% 10%,#E7F3FA 0%,rgba(231,243,250,0) 55%),linear-gradient(180deg,#F5F5F7 0%,#FBFBFC 100%);padding-block:clamp(2.2rem,5vw,4.5rem) clamp(3rem,6vw,5.5rem)}
.hx-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:clamp(2rem,5vw,5.5rem);align-items:center;min-height:min(760px,calc(100svh - 110px))}
.hx-text{min-width:0}
.hx-rating{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.4rem;padding:.45rem .9rem .45rem .5rem;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh1);color:var(--ink);text-decoration:none;font-size:.9rem}
.hx-rating[hidden]{display:none}
.hx-rating .g{width:26px;height:26px;border-radius:50%;background:var(--paper);display:inline-flex;align-items:center;justify-content:center;font:700 .85rem var(--fd)}
.hx-rating b{font-weight:700}
.hx-rating .stern{color:#E0A100;letter-spacing:.05em}
.hx-h1{font-size:clamp(2.7rem,5.6vw,5rem);line-height:1;letter-spacing:-.04em;color:var(--ink);margin:0 0 1.6rem;max-width:12ch}
.hx-h1 span{display:block;color:var(--ac)}
.hx-chips{list-style:none;margin:0 0 2.2rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.hx-chips li{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem .5rem .65rem;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.92rem;font-weight:500;white-space:nowrap}
.hx-chips .ic{width:17px;height:17px;color:var(--ac)}
.hx-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 1.8rem;max-width:620px;border-top:1px solid var(--line2)}
.hx-facts>div{padding:1rem 1rem 0 0;min-width:0}
.hx-facts dt{font:700 clamp(1.5rem,2.4vw,2rem)/1 var(--fd);letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.hx-facts dd{margin:.4rem 0 0;font-size:.8rem;line-height:1.35;color:var(--faint);overflow-wrap:normal}
.hx-adr{margin:0;display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.88rem;color:var(--faint)}
.hx-adr a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line2)}
/* Rechner-Karte */
.hx-card{background:#fff;border-radius:28px;padding:clamp(1.3rem,2.4vw,1.8rem);box-shadow:0 1px 2px rgba(14,19,22,.04),0 30px 80px rgba(14,19,22,.13);border:1px solid rgba(14,19,22,.05)}
.hx-card-h{font-size:1.35rem;letter-spacing:-.025em;margin:0 0 1rem}
.hx-card .calc-steps{gap:0}
.hx-card .c-step{display:block;position:relative;border:0;border-radius:0;padding:.9rem 0;border-top:1px solid var(--line);background:none}
.hx-card .c-step:first-child{border-top:0;padding-top:0}
.hx-card .c-n{position:absolute;left:0;top:.95rem;width:22px;height:22px;font-size:.72rem}
.hx-card .c-step:first-child .c-n{top:.05rem}
.hx-card .c-step h3{margin:0 0 .7rem;padding-left:2rem;font-size:.95rem;min-height:22px;display:flex;align-items:center}
.hx-card .c-such .inp{font-size:1rem;padding:.75rem .9rem;border-radius:12px}
.hx-card .c-beliebt{margin-top:.6rem;gap:.35rem}
.hx-card .chip{min-height:36px;padding:.35rem .75rem;font-size:.85rem}
.hx-card .c-qual{grid-template-columns:1fr;gap:.45rem}
.hx-card .qopt{display:grid;grid-template-columns:1fr auto;column-gap:1rem;align-items:center;padding:.7rem .9rem;border-radius:14px}
.hx-card .qopt b{grid-column:1;grid-row:1;font-size:.95rem}
.hx-card .qopt small{grid-column:1;grid-row:2;font-size:.75rem}
.hx-card .qopt .q-preis{grid-column:2;grid-row:1/3;margin:0;font-size:1.3rem}
.hx-card .qopt .q-spar{grid-column:1/-1;grid-row:3;margin-top:.25rem;font-size:.76rem}
.hx-card .qopt .q-spar.q-leer,.hx-card .qopt .q-info{display:none}
.hx-card .q-tag{top:-.55rem;right:.8rem}
.hx-card .q-hinweis{font-size:.72rem;margin-top:.15rem}
.hx-card .c-weg{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
.hx-card .wopt{padding:.65rem .6rem;border-radius:12px;gap:.15rem}
.hx-card .wopt .ic{width:18px;height:18px;margin:0}
.hx-card .wopt b{font-size:.82rem}
.hx-card .wopt small{font-size:.7rem}
/* Ergebnis: nur Preis, Ersparnis, Knöpfe – Details stehen in der Kasse */
.hx-card .calc-sum{position:static;margin-top:1rem;min-height:0;border-radius:20px;padding:1.2rem 1.3rem;gap:.45rem}
.hx-card .calc-sum:has(.c-leer){display:none}
.hx-card .s-dl{display:none}
.hx-card .s-preis{font-size:2.6rem}
.hx-card .s-kombi{font-size:.76rem}
@media(max-width:1080px){.hx-g{grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:2.5rem}}
@media(max-width:900px){
  .hx{padding-top:1.6rem}
  .hx-g{grid-template-columns:1fr;min-height:0;gap:1.2rem}
  .hx-text{display:contents}
  .hx-rating{order:1;justify-self:start;margin:0}
  .hx-h1{order:2;font-size:clamp(2.2rem,8.6vw,3.2rem);margin:0}
  .hx-card{order:3}
  .hx-chips{order:4;margin:.6rem 0 0}
  .hx-facts{order:5;margin:0;max-width:none}
  .hx-adr{order:6}
}
@media(max-width:560px){
  .hx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-facts>div:nth-child(n+3){padding-top:1rem}
  .hx-card{border-radius:22px;padding:1.1rem}
  .hx-card .c-weg{grid-template-columns:1fr}
  .hx-card .wopt{flex-direction:row;align-items:center;gap:.6rem}
  .hx-card .wopt small{margin-left:auto}
  .hx-chips li{font-size:.85rem}
}
/* Hero v4 – Feinschliff */
.hx-g{min-height:0;align-items:start}
.hx-text{padding-top:clamp(1rem,3vw,2.6rem)}
.hx-h1{font-size:clamp(2.3rem,4.1vw,3.8rem);max-width:none}
.hx-h1 span{display:inline;color:inherit}
.hx-h1 .nb{white-space:nowrap}
.hx-h1 .zw{display:block;color:var(--ac)}
.hx-card.gewaehlt .c-beliebt{display:none}
body.rechner-sichtbar .wa-bubble{display:none!important}
@media(max-width:900px){.hx-text{padding-top:0}.hx-h1{font-size:clamp(2rem,7.8vw,2.9rem)}}
.hx-card .s-plus{display:grid;margin:.1rem 0 .4rem;gap:.25rem;font-size:.78rem}

/* ======================================================================
   HERO v5 – freigegebenes Design: Werkbank, Rahmen, Rechner rechts
   Navy #071b2b · Cyan #53c4f1 · Weiß #f7fbff · Sekundär #c1d5e2
   ====================================================================== */
:root{--rw-navy:#071b2b;--rw-cyan:#53c4f1;--rw-weiss:#f7fbff;--rw-grau:#c1d5e2}
/* Original-Wortmarke als Bildausschnitt (880 × 86 bei x=329, y=389 im Original 1536 × 1024) */
.rw-sprite{display:block;background-image:url(/media/repairwerk-original-alpha.webp);background-repeat:no-repeat;background-size:calc(1536px * var(--k)) calc(1024px * var(--k));background-position:calc(-329px * var(--k)) calc(-389px * var(--k))}
.rwh{position:relative;isolation:isolate;overflow:hidden;background:var(--rw-navy);color:var(--rw-weiss);min-height:clamp(650px,57.8vw,900px)}
.rwh picture{display:contents}
.rwh-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;pointer-events:none}
.rwh-an{opacity:1}
.rwh-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,16,27,.55),rgba(4,16,27,.15) 48%,transparent 64%),linear-gradient(0deg,rgba(3,15,25,.25),transparent 45%)}
.rwh-glow{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,236,205,.85),rgba(255,214,160,.25) 60%,transparent);opacity:0;pointer-events:none;filter:blur(2px)}
.rwh-frame{position:absolute;inset:28px;border:1px solid rgba(170,216,242,.6);border-radius:30px;pointer-events:none}
.rwh-page{position:relative;z-index:1;min-height:inherit;display:flex;flex-direction:column;padding:48px 58px 48px}
.rwh-head{display:flex;align-items:center;gap:22px}
.rwh-logo{display:block;flex:none;margin-right:auto;line-height:0}
.rwh-wordmark{--k:.215;width:calc(880px * var(--k));height:calc(86px * var(--k))}
.rwh .rwh-nav{margin:0 auto 0 0;display:flex;gap:26px}
.rwh .rwh-nav>li>a,.rwh .rwh-nav>li>button{color:var(--rw-weiss);font:400 15px var(--fu);padding:12px 0;background:none}
.rwh .rwh-nav>li>a:hover,.rwh .rwh-nav>li>button:hover,.rwh .rwh-nav>li>button[aria-expanded=true]{color:#fff;background:none;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--rw-cyan)}
.rwh-primary{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;background:var(--rw-cyan);color:#041724;border-radius:9px;font:600 15px var(--fu);padding:13px 20px;text-decoration:none;cursor:pointer;transition:transform 140ms var(--ease-out),background-color 180ms ease}
.rwh-primary:hover{background:#7fd3f5;color:#041724}
.rwh-primary:active{transform:scale(.98)}
.rwh .burger{border-color:rgba(170,216,242,.4)}
.rwh-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,410px);gap:clamp(2rem,5vw,5rem);align-items:start;margin-top:clamp(2.5rem,5vw,4.6rem)}
.rwh h1{margin:0;color:var(--rw-weiss);font:400 clamp(42px,5.65vw,82px)/1.04 var(--fu);letter-spacing:-.045em;max-width:none}
.rwh h1 span{display:block}
.rwh h1 .rwh-accent{color:var(--rw-cyan);font-size:.7em;letter-spacing:-.035em;margin-top:10px}
.rwh-desc{color:var(--rw-weiss);margin:22px 0 0;font-size:clamp(16px,1.5vw,22px);line-height:1.5}
.rwh-flow{display:inline-block;margin-top:23px;color:#cfecfa;padding:0 0 5px;border-bottom:1px solid var(--rw-cyan);font-size:16px;text-decoration:none}
.rwh-flow:hover{color:#fff}
.rwh-foot{margin:auto 0 0;padding-top:2rem;font-size:14px;color:#d1e5f1}
/* Rechner-Karte: dunkel, deckend genug für sichere Lesbarkeit */
.rwh-calc{margin-top:clamp(0px,6.5vw,100px);padding:clamp(22px,2.2vw,30px);background:rgba(5,20,32,.95);border:1px solid rgba(150,205,239,.55);border-radius:22px;box-shadow:0 15px 44px rgba(0,0,0,.18);color:var(--rw-weiss)}
.rwh-calc h2{margin:0 0 22px;font:600 22px/1.25 var(--fu);letter-spacing:-.025em;color:var(--rw-weiss)}
.rwh-calc label{display:block;font-size:15px;margin-bottom:8px;color:var(--rw-weiss)}
.rwh-such{position:relative}
.rwh-lupe{position:absolute;left:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);fill:none;stroke:#c1d5e2;stroke-width:1.8;pointer-events:none}
.rwh-input,.rwh-calc select{width:100%;min-height:48px;border:1px solid #57819a;border-radius:8px;background:#051421;color:var(--rw-weiss);padding:10px 12px;font-size:16px;font-family:var(--fu)}
.rwh-input{padding-left:44px}
.rwh-input::placeholder{color:#b4c4d0;opacity:1}
.rwh-calc select:disabled{color:#b6c5d0;opacity:1}
.rwh-calc select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c1d5e2' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px;padding-right:44px}
.rwh-calc :focus-visible{outline:3px solid var(--rw-cyan);outline-offset:3px}
.rwh-calc .c-list{background:#051421;border-color:#57819a}
.rwh-calc .c-list button{color:var(--rw-weiss)}
.rwh-calc .c-list button:hover,.rwh-calc .c-list button:focus-visible{background:#0c2a40}
.rwh-calc .c-list p{color:var(--rw-grau)}
.rwh-calc .c-list a{color:var(--rw-cyan)}
.rwh-chips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 20px}
.rwh-chips .chip{min-height:36px;padding:6px 12px;border-radius:18px;background:#071c2c;color:#d9f0fc;border:1px solid #5fa3c5;font-size:13px;cursor:pointer}
.rwh-chips .chip:hover{border-color:var(--rw-cyan)}
.rwh-calc.gewaehlt .rwh-chips{display:none}
.rwh-calc.gewaehlt #cModel{border-color:var(--rw-cyan)}
.rwh-calc.gewaehlt label[for=cRepSel]{margin-top:16px}
.rwh-finden{width:100%;margin-top:18px;min-height:50px}
.rwh-meldung{margin:12px 0 0;font-size:14px;color:#ffd7a8}
.rwh-ergebnis{margin-top:18px;padding-top:16px;border-top:1px solid rgba(150,205,239,.3)}
.rwh-sub{margin:0 0 8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--rw-grau)}
.rwh-calc .c-qual{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:16px}
.rwh-calc .qopt{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;text-align:left;padding:10px 12px;border-radius:10px;background:#071c2c;border:1px solid #2f5a73;color:var(--rw-weiss);cursor:pointer;position:relative}
.rwh-calc .qopt[aria-checked=true]{border-color:var(--rw-cyan);box-shadow:0 0 0 1px var(--rw-cyan)}
.rwh-calc .qopt b{grid-column:1;grid-row:1;font-size:15px;font-weight:600}
.rwh-calc .qopt small{grid-column:1;grid-row:2;font-size:12px;color:var(--rw-grau)}
.rwh-calc .qopt .q-preis{grid-column:2;grid-row:1/3;margin:0;font:700 20px var(--fu);color:#fff}
.rwh-calc .qopt .q-spar{grid-column:1/-1;grid-row:3;margin-top:4px;font-size:12px;color:#7ee2a8}
.rwh-calc .qopt .q-spar.q-leer,.rwh-calc .qopt .q-info{display:none}
.rwh-calc .q-tag{position:absolute;top:-9px;right:10px;background:var(--rw-cyan);color:#041724;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.rwh-calc .q-hinweis{font-size:12px;color:var(--rw-grau);margin:2px 0 0}
.rwh-calc .c-weg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:14px}
.rwh-calc .wopt{display:flex;flex-direction:column;gap:2px;text-align:left;padding:9px 10px;border-radius:10px;background:#071c2c;border:1px solid #2f5a73;color:var(--rw-weiss);cursor:pointer}
.rwh-calc .wopt b{font-size:13px}
.rwh-calc .wopt small{font-size:11.5px;color:var(--rw-grau)}
.rwh-calc .wopt[aria-checked=true]{border-color:var(--rw-cyan);box-shadow:0 0 0 1px var(--rw-cyan)}
.rwh-calc .calc-sum{position:static;background:#0a2436;border-radius:14px;padding:16px;min-height:0;gap:6px}
.rwh-calc .calc-sum .s-dl{display:none}
.rwh-calc .calc-sum .s-preis{font-size:34px}
.rwh-calc .calc-sum .b1{background:var(--rw-cyan);border-color:var(--rw-cyan);color:#041724}
/* Startfläche */
.rwh-intro{display:none;position:fixed;inset:0;z-index:300}
.rw-intro-an .rwh-intro{display:block}
html:not(.rw-intro-js).rw-intro-an .rwh-intro{animation:rwhNotaus 1ms linear 6s forwards}   /* falls das Skript nicht läuft: Seite nach 6 s freigeben */
@keyframes rwhNotaus{to{visibility:hidden;opacity:0}}
.rwh-intro-bg{position:absolute;inset:0;background:var(--rw-navy)}
.rwh-loader{--k:.5;position:absolute;left:50%;top:50%;width:calc(880px * var(--k));height:calc(86px * var(--k));transform:translate(-50%,-50%);transform-origin:50% 50%}
.rwh-icon{position:absolute;inset:0;opacity:0}
.rwh-r,.rwh-w{position:absolute;top:0;height:100%;display:block}
.rwh-r{left:0;width:calc(87px * var(--k));transform:translateX(calc(326px * var(--k)))}
.rwh-w{left:calc(476px * var(--k));width:calc(138px * var(--k));transform:translateX(calc(-60px * var(--k)))}
.rwh-mitte,.rwh-ende,.rwh-ganz{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.rwh-mitte{clip-path:inset(0 52.727273% 0 46.931818%)}
.rwh-ende{clip-path:inset(0 0 0 69.772727%)}
.rwh-skip{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);color:#bfd4e3;border:0;background:none;font:400 14px var(--fu);padding:12px 18px;cursor:pointer;min-height:44px}
.rwh-skip:focus-visible{outline:3px solid var(--rw-cyan);outline-offset:2px;border-radius:6px}
/* Tablet */
@media(max-width:1080px){.rwh .rwh-nav{display:none}.rwh .burger{display:inline-flex}}
@media(max-width:900px){
  .rwh-body{grid-template-columns:1fr;gap:0}
  .rwh-copy{max-width:640px}
  .rwh-calc{margin:48px 0 0;max-width:560px}
}
/* Handy */
@media(max-width:760px){
  .rwh{min-height:0}
  .rwh-photo{object-position:53% 50%}
  .rwh-shade{background:linear-gradient(180deg,rgba(3,15,26,.78),rgba(3,15,26,.3) 46%,rgba(3,15,26,.72))}
  .rwh-frame{inset:14px;border-radius:24px}
  .rwh-page{padding:32px 30px 34px}
  .rwh-head{gap:10px}
  .rwh-wordmark{--k:.14}
  .rwh-cta{padding:10px 12px;font-size:13px}
  .rwh-body{margin-top:44px}
  .rwh h1{font-size:clamp(34px,9.4vw,46px)}
  .rwh h1 .rwh-accent{font-size:.72em}
  .rwh-desc{font-size:17px}
  .rwh-calc{margin:150px 0 0;padding:22px 20px}
  .rwh-calc .c-weg{grid-template-columns:1fr}
  .rwh-foot{font-size:13px;padding-top:1.4rem}
  .rwh-glow{display:none}
  .rwh-loader{--k:.32}
}
@media(max-width:360px){
  .rwh-page{padding-inline:26px}
  .rwh-wordmark{--k:.105}
  .rwh-cta{font-size:12px;padding:9px 10px}
}
@media(max-width:340px){.rwh-cta{display:none}}
@media (prefers-reduced-motion:reduce){.rwh-primary{transition:none}.rwh-intro{display:none!important}}
/* Während der Startsequenz keine weiteren Einblendungen über dem Hero */
.rw-intro-an .pnote,.rw-intro-an #wa{visibility:hidden}
/* Hero v5 – Maße aus dem freigegebenen Entwurf (1672 × 941), als Bildschirmanteile */
@media(min-width:901px){
  .rwh{min-height:max(650px,56.28vw)}
  .rwh-frame{inset:3.3vw;border-radius:clamp(22px,2.1vw,36px)}
  .rwh-page{padding:4.2vw 4.6vw 5.1vw 6.4vw}
  .rwh-head{gap:2vw;padding-right:1.1vw}
  .rwh-logo{margin-right:0}
  .rwh .rwh-nav{margin:0 auto 0 calc(17.2vw - 2vw);gap:2.6vw}
  .rwh .rwh-nav>li>a,.rwh .rwh-nav>li>button{font-size:clamp(15px,1.12vw,19px)}
  .rwh-cta{font-size:clamp(14px,1.08vw,18px);padding:clamp(11px,.85vw,14px) clamp(16px,1.5vw,26px)}
  .rwh-body{margin-top:3.6vw;grid-template-columns:minmax(0,1fr) clamp(320px,26.2vw,470px);gap:3vw}
  .rwh h1{font-size:clamp(42px,5.55vw,98px)}
  .rwh-desc{font-size:clamp(16px,1.36vw,24px);margin-top:1.4vw}
  .rwh-flow{font-size:clamp(15px,1.24vw,21px);margin-top:1.5vw}
  .rwh-foot{font-size:clamp(13px,1.08vw,18px)}
  .rwh-calc{margin-top:7.2vw;padding:clamp(22px,1.85vw,32px)}
  .rwh-calc h2{font-size:clamp(20px,1.55vw,27px);margin-bottom:clamp(16px,1.3vw,24px)}
  .rwh-calc label{font-size:clamp(15px,1.05vw,18px)}
  .rwh-input,.rwh-calc select{min-height:clamp(48px,3.15vw,54px)}
  .rwh-finden{min-height:clamp(50px,3.4vw,58px);font-size:clamp(15px,1.1vw,18px)}
  .rwh-chips .chip{font-size:clamp(13px,.9vw,15px);min-height:clamp(34px,2.2vw,38px)}
  .rwh-wordmark{--k:.18}
}
@media(min-width:1200px){.rwh-wordmark{--k:.2}}
@media(min-width:1400px){.rwh-wordmark{--k:.222}}
@media(min-width:1600px){.rwh-wordmark{--k:.258}}
.rwh{padding:0}
/* Feinabgleich mit dem Entwurf */
.rwh-cta,.rwh-finden{font-weight:500}
.rwh-calc h2{font-weight:500;letter-spacing:-.02em}
@media(min-width:901px){
  .rwh-cta{padding:clamp(11px,.85vw,14px) clamp(14px,1.15vw,20px)}
  .rwh-calc h2{font-size:clamp(19px,1.42vw,25px)}
  .rwh-chips{margin:10px 0 16px}
}
@media(max-width:760px){.rwh-cta{white-space:nowrap;font-size:13px;padding:10px 12px}.rwh-head{gap:10px}}
@media(max-width:360px){.rwh-cta{font-size:12px;padding:9px 10px}}

/* ======================================================================
   THEME „NACHT“ – die Farbwelt des Heros für alle öffentlichen Seiten
   Aktiv über <html class="nacht">. Die Verwaltung bleibt hell.
   :where() hält die Spezifität niedrig, damit Zustände (gewählt, gedrückt)
   weiterhin Vorrang haben.
   ====================================================================== */
html.nacht{
  color-scheme:dark;
  --bg:transparent;--paper:transparent;--sunk:transparent;--card:rgba(9,32,50,.78);
  --void:#041320;--graphite:rgba(5,20,32,.9);--graphite2:#0c2638;
  --ink:#f7fbff;--soft:#c1d5e2;--faint:#a3b9c9;--dink:#f7fbff;--dsoft:#c1d5e2;
  --line:rgba(150,205,239,.18);--line2:rgba(150,205,239,.34);--dline:rgba(150,205,239,.18);
  --cy:#53c4f1;--ac:#53c4f1;--ac2:#7fd3f5;--acink:#a9e2f8;--tint:rgba(83,196,241,.12);
  --ok:#7ee2a8;--okbg:rgba(126,226,168,.14);--bad:#ff9d96;--badbg:rgba(255,120,110,.14);--warn:rgba(255,200,110,.12);--warnink:#ffd58a;
  --sh1:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);--sh2:0 24px 60px rgba(0,0,0,.45);
  caret-color:var(--cy);accent-color:var(--cy);scrollbar-color:rgba(150,205,239,.35) #071b2b;
  background-color:#071b2b;
}
/* Ein durchgehender Hintergrund: langsamer Navy-Verlauf über die ganze Seite plus weiche Lichtinseln,
   die sich beim Scrollen abwechselnd links und rechts zeigen – keine harten Abschnittskanten */
:where(html.nacht) body{
  color:var(--ink);background-color:#071b2b;
  background-image:
    radial-gradient(70% 1100px at 0% 650px,rgba(83,196,241,.075),transparent 70%),
    radial-gradient(62% 1000px at 100% 1650px,rgba(46,120,190,.11),transparent 70%),
    linear-gradient(180deg,#071b2b 0%,#0a2337 22%,#071b2b 46%,#0b2438 70%,#061826 100%);
  background-size:100% 2000px,100% 2000px,100% 100%;
  background-repeat:repeat-y,repeat-y,no-repeat;
}
/* Abschnitte lassen den Verlauf durch */
:where(html.nacht) section.dk,:where(html.nacht) .subhero,:where(html.nacht) .final,:where(html.nacht) .cta,:where(html.nacht) .speed,:where(html.nacht) .sunk{background:transparent}
:where(html.nacht) .subhero{background:radial-gradient(80% 120% at 15% 0%,rgba(83,196,241,.10),transparent 60%)}
:where(html.nacht) .final{background:radial-gradient(60% 90% at 50% 40%,rgba(83,196,241,.10),transparent 70%)}
:where(html.nacht) footer.site{background:linear-gradient(180deg,transparent,rgba(3,12,20,.7) 45%);border-top:1px solid var(--line)}
:where(html.nacht) .util{background:rgba(4,16,27,.55)}
:where(html.nacht) header.top{background:rgba(7,27,43,.8);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
/* Übergang vom Werkbank-Foto in den Seitenhintergrund */
:where(html.nacht) .rwh::after{content:'';position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(180deg,rgba(7,27,43,0),#071b2b);pointer-events:none}
/* Karten und Flächen, die bisher weiß waren */
:where(html.nacht) :is(.ptile,.qwrap,.rev,.revnav button,.revempty,.qtable tr,.checklist li,.qcards li,.area-chips a,.c-step,.calc .chip,.qopt,.wopt,.kasse-g .chip,.k-zahl .ck,.k-rechtl .ck,.wiz,.opt,.chip,.cal,.cal-hd button,.slots button,.k-vorz,.tl li i,.st-btn,.iconb:hover,.hero-act .b2){background:var(--card)}
:where(html.nacht) .nav>li>a:hover,:where(html.nacht) .nav>li>button:hover,:where(html.nacht) .nav>li>button[aria-expanded=true]{background:rgba(150,205,239,.1)}
:where(html.nacht) :is(.drop,.pnote,.wa-panel,.wa-bubble,.wa-msg){background:#0c2638;border-color:var(--line2)}
:where(html.nacht) .wa-bubble::after{background:#0c2638}
:where(html.nacht) :is(.inp,#waForm .inp,.aclist,.c-list){background:#051421;border-color:#57819a;color:var(--ink)}
:where(html.nacht) .inp::placeholder{color:#a3b9c9;opacity:1}
:where(html.nacht) .st-stage{background:rgba(9,32,50,.85);border-color:var(--line2)}
:where(html.nacht) :is(.sc-problem,.sc-ablauf){background:transparent}
/* Invertierte Zustände: vorher dunkel mit weißer Schrift – jetzt Cyan mit dunkler Schrift */
:where(html.nacht) :is(.skip,:where(.sunk,.card,section:not(.dk):not(.hero)) .b1,.av,.tl-n,.m-chips .on,.area-chips .more,.c-n,.calc .chip[aria-pressed=true],.kasse-g .chip[aria-pressed=true],.st-play){background:var(--cy);color:#041724;border-color:var(--cy)}
:where(html.nacht) :is(.rail i.on,.rail i.now,.chip[aria-checked=true],.cal-g button[aria-pressed=true],.slots button[aria-pressed=true],.bub-u,.go){color:#041724}
/* Rollen in der Story: „Du“ hell umrandet, „Repairwerk“ Cyan */
:where(html.nacht) :is(.who,.stp-txt .who){background:rgba(247,251,255,.1);color:#f7fbff;box-shadow:inset 0 0 0 1px rgba(247,251,255,.35)}
:where(html.nacht) :is(.who.we,.stp-txt .who.we){background:var(--cy);color:#041724;box-shadow:none}
/* Mini-Oberflächen in der Story bleiben hell – als Bildschirmfotos auf dunklem Grund */
:where(html.nacht) :is(.mk:not(.mk-weg),.mock,.bub){--ink:#0E1316;--soft:#475158;--faint:#5C666D;--line:#E4E1DB;--line2:#CDC9C1;--ac:#0A6A9E;--ok:#17693A;--okbg:#E5F3EA;--paper:#F6F5F2;--card:#fff;color:var(--ink)}
:where(html.nacht) .mk-box{color:#0E1316}
:where(html.nacht) .mk-haus svg{stroke:#f7fbff}
/* Drucken (z. B. Begleitschein): hell und tintensparend */
@media print{
  html.nacht{color-scheme:light;--bg:#fff;--paper:#fff;--card:#fff;--ink:#0E1316;--soft:#475158;--faint:#5C666D;--line:#E4E1DB;--line2:#CDC9C1;--ac:#0A6A9E;background:#fff}
  :where(html.nacht) body{background:#fff}
}
/* WhatsApp-Knöpfe mit Beschriftung: tieferes Grün für lesbare weiße Schrift (5,0:1 statt 3,1:1) */
.mbar .js-wa,.wa-fab,.wa-bgo{background:#15803D;border-color:#15803D}
.wa-send{background:#15803D!important;border-color:#15803D!important}
.wa-fab{box-shadow:0 8px 24px rgba(2,10,18,.45)}

/* ---------- Kopfzeile: Kunden-Login ---------- */
.kopf-link{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 .7rem;border-radius:10px;color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:500;white-space:nowrap}
.kopf-link .ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.kopf-link:hover{background:rgba(150,205,239,.1)}
.util-insta{color:inherit;text-decoration:none;margin-right:1.2rem}
.util-insta:hover{text-decoration:underline}
.rwh-aktionen{display:flex;align-items:center;gap:6px;color:var(--rw-weiss)}
.rwh-aktionen .kopf-link{color:var(--rw-weiss)}
/* Kopfzeile mit fünf Menüpunkten: ausgewogen verteilen, rechtzeitig einklappen */
.rwh .rwh-nav{margin:0 auto!important;gap:clamp(18px,1.8vw,32px)!important}
.nav>li>a,.nav>li>button{padding-inline:.55rem}
@media(max-width:1360px){
  .kopf-link{width:44px;padding:0;justify-content:center}
  .kopf-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(max-width:1180px){
  header.top .nav,.rwh .rwh-nav{display:none!important}
  header.top .burger,.rwh .burger{display:inline-flex!important}
}
.rwh-cta,.kopf-link,.hact .b1{white-space:nowrap;flex-shrink:0}
@media(max-width:1500px){
  .kopf-link{width:44px;padding:0;justify-content:center}
  .kopf-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(max-width:1280px){
  header.top .nav,.rwh .rwh-nav{display:none!important}
  header.top .burger,.rwh .burger{display:inline-flex!important}
}
/* Handy: Login und Anfrage stehen im Menü bzw. in der Schnellleiste – oben Logo und Menü */
@media(max-width:760px){.kopf-link{display:none!important}}
@media(max-width:480px){.rwh-aktionen .rwh-cta{display:none}}
@media(max-width:1720px){.rwh .kopf-link{width:44px;padding:0;justify-content:center}.rwh .kopf-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media(max-width:1340px){header.top .nav{display:none!important}header.top .burger{display:inline-flex!important}}
@media(max-width:360px){.hact .iconb{display:none}}
/* Google-Bewertung im Hero (nur mit echten Daten sichtbar) – Stern und Note groß, Anzahl darunter */
.rwh-rating{display:inline-flex;flex-direction:column;gap:2px;margin-top:clamp(18px,1.6vw,28px);color:var(--rw-weiss);text-decoration:none}
.rwh-rating[hidden]{display:none}
.rwh-note{display:inline-flex;align-items:center;gap:.4rem;font:500 clamp(26px,2.1vw,36px)/1 var(--fu);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rwh-stern{color:#F5B400;font-size:.85em;line-height:1}
.rwh-rating small{font-size:clamp(13px,1vw,16px);color:var(--rw-grau)}
.rwh-rating:hover small{color:#fff;text-decoration:underline;text-underline-offset:3px}
.person-mehr{margin:0}
.person-mehr a{color:var(--ac);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.ausstattung{list-style:none;margin:.6rem 0 1rem;padding:0;border-top:1px solid var(--line)}
.ausstattung li{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line)}
.ausstattung span{color:var(--soft)}
@media(max-width:600px){.ausstattung li{grid-template-columns:1fr;gap:.15rem}}


/* ---------- Kundenbereich ---------- */
.kb{max-width:980px}
.kb-zugang{max-width:560px}
.kb-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.kb-ref{margin:0 0 .3rem;font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--ac)}
.kb-kopf h2{margin:0}
.kb-akt{margin:0;color:var(--faint);font-size:.85rem}
.kb-schritte{list-style:none;margin:0 0 2rem;padding:0;display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:.6rem;counter-reset:s}
.kb-schritte li{position:relative;display:flex;flex-direction:column;gap:.5rem;padding-top:.2rem}
.kb-schritte li::before{content:'';position:absolute;top:17px;left:36px;right:-.6rem;height:2px;background:var(--line2)}
.kb-schritte li:last-child::before{display:none}
.kb-fertig::before{background:var(--cy)!important}
.kb-punkt{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;border:2px solid var(--line2);background:var(--bg,#071b2b);color:var(--faint)}
.kb-fertig .kb-punkt{background:var(--cy);border-color:var(--cy);color:#041724}
.kb-jetzt .kb-punkt{border-color:var(--cy);color:var(--cy);box-shadow:0 0 0 5px rgba(83,196,241,.18)}
.kb-txt b{display:block;font-size:.92rem;line-height:1.3}
.kb-txt small{display:block;color:var(--faint);font-size:.78rem;margin-top:.2rem}
.kb-offen .kb-txt b{color:var(--faint);font-weight:500}
.kb-g{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:1.6rem;align-items:start}
.kb-daten{margin:0;border-top:1px solid var(--line)}
.kb-daten>div{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.kb-daten dt{color:var(--faint)}
.kb-daten dd{margin:0;font-weight:500}
.kb-aktionen{display:grid;gap:.6rem}
.kb-aktionen .hint{margin:-.2rem 0 .2rem;font-size:.82rem}
.kb-link{color:var(--ac);font-size:.92rem;margin-top:.4rem}
@media(max-width:820px){
  .kb-schritte{grid-template-columns:1fr;gap:0}
  .kb-schritte li{flex-direction:row;align-items:flex-start;gap:.9rem;padding-bottom:1.1rem}
  .kb-schritte li::before{top:36px;left:16px;right:auto;bottom:0;width:2px;height:auto}
  .kb-g{grid-template-columns:1fr}
  .kb-daten>div{grid-template-columns:8rem minmax(0,1fr)}
}
/* Kundenbereich: Bezeichnungen nie mitten im Wort trennen */
.kb-daten dt,.kb-daten dd{overflow-wrap:normal;word-break:normal;hyphens:manual}
@media(max-width:820px){.kb-daten>div{grid-template-columns:max-content minmax(0,1fr);gap:1.2rem}}
/* Unterseiten haben Platz für „Kunden-Login“ als Text bis 1400 px */
@media(min-width:1401px){header.top .kopf-link{width:auto;padding:0 .7rem}header.top .kopf-link span{position:static;width:auto;height:auto;overflow:visible;clip:auto}}
.k-rabatt dt,.k-rabatt dd{color:#7ee2a8!important}
.k-sum dt small{color:var(--dsoft);font-weight:400}
/* Hinweise zur gewählten Qualität sichtbar machen (z. B. „Herstellerlogo kann fehlen“, „unbekanntes Teil“) – vor dem Kauf */
.qopt[aria-checked=true] .q-info,.rwh .qopt[aria-checked=true] .q-info{display:block!important;grid-column:1/-1}
/* ---------- Verwaltung: Preise und Kunden ---------- */
.pe-filter{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:.6rem;align-items:center;margin-top:.8rem}
@media(max-width:820px){.pe-filter{grid-template-columns:1fr}}
.pe-modell{margin-top:1rem}.pe-modell h4{margin:0 0 .6rem}
.pe-tab{overflow-x:auto}
.pe-tab table{width:100%;border-collapse:collapse;min-width:720px;font-size:.92rem}
.pe-tab th,.pe-tab td{padding:.5rem .45rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.pe-tab thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
.pe-preis{width:7rem}
.pe-akt{white-space:nowrap}.pe-akt .b{margin:.15rem .3rem .15rem 0}
.pe-tag{display:inline-block;font-size:.72rem;font-weight:600;padding:.1rem .45rem;border-radius:999px;background:var(--line);color:var(--soft);margin-top:.2rem}
.pe-man{background:#E7F3FA;color:#0A6A9E}.pe-aus{background:#FBEAEA;color:#A3271F}
.pe-schlecht{color:#A3271F;font-weight:700}
.pe-warn td{background:#FFF6E0;color:#7A4B00;font-size:.85rem}
.pe-neu{margin-top:.6rem}.pe-neu summary{cursor:pointer;color:var(--ac);font-weight:600}
.pe-neu-f{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}.pe-neu-f .inp{width:auto;min-width:9rem}
.pe-verlauf{margin-top:1rem}.pe-verlauf ul{margin:.6rem 0 0;padding-left:1.1rem;font-size:.88rem}.pe-verlauf li span{color:var(--faint)}
.ku-liste{margin:.6rem 0 .2rem;padding-left:1rem;font-size:.9rem}.ku-liste li{margin:.25rem 0}
/* ---------- Preisseiten (vom Server erzeugt) ---------- */
.ps{max-width:980px}
.ps-kurz{font-size:1.05rem;line-height:1.6;padding:1rem 1.2rem;border:1px solid var(--line2);border-radius:14px;background:var(--card)}
.ps-rep,.ps-gruppe{margin-top:2rem}
.ps-tab{overflow-x:auto}
.ps-tab table{width:100%;border-collapse:collapse;min-width:520px}
.ps-tab th,.ps-tab td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
.ps-tab thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
.ps-tab tbody th small{display:block;font-weight:400;color:var(--soft);font-size:.85rem;margin-top:.15rem}
.ps-tab td b{font-size:1.1rem}
.ps-hinweis{margin-top:1.6rem;color:var(--soft);font-size:.92rem}
.ps-faq{margin-top:2.4rem}.ps-faq details{border-bottom:1px solid var(--line);padding:.8rem 0}.ps-faq summary{cursor:pointer;font-weight:600}
.ps-links{columns:2;padding-left:1.1rem}@media(max-width:600px){.ps-links{columns:1}}
.ps-mehr{margin-top:2rem}
.ps-dm{display:none}
@media(max-width:600px){
  .ps-rep .ps-tab table{min-width:0}
  .ps-rep .ps-d{display:none}
  .ps-dm{display:inline}
  .ps-tab td b{white-space:nowrap}
}
/* Rechner: Sonstiges Gerät */
.c-sonst{margin-top:.6rem}
.c-sonst-k{background:none;border:0;padding:.3rem 0;color:var(--ac);font:500 .9rem var(--fu);cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:44px}
#cSonstF{display:grid;gap:.4rem;margin-top:.4rem}#cSonstF[hidden]{display:none}
#cSonstF label{font-size:.85rem;color:var(--soft)}
#cSonstF .err{color:var(--bad);font-size:.85rem;margin:0}
#cSonstF .inp{font-size:16px}  /* iOS: unter 16 px zoomt Safari beim Antippen */
/* Bewertungen: Zusammenfassung aus dem Google-Profil, Bewertungskarte im Kundenbereich */
.rev-zus{text-align:center;max-width:560px;margin:0 auto}
.rev-note{font-family:var(--fd);font-size:2.2rem;margin:0}.rev-note .stars{font-size:1.4rem;vertical-align:middle}
.rev-zus p{color:var(--soft)}.rev-akt{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.kb-bewertung{margin-top:1.4rem;padding:1rem 1.2rem;border:1px solid var(--line2);border-radius:14px;background:var(--card)}
.kb-bewertung p{margin:0 0 .8rem}
/* Rechner: Variante ohne Festpreis */
.qopt.q-anfrage{opacity:.92}.qopt.q-anfrage .q-preis-anfrage{font-size:1rem;font-weight:600;color:var(--soft)}
/* ===== Startbereich: Foto fest an die erste Bildschirmhöhe gekoppelt (zoomt nicht mit, wenn der Rechner aufklappt) ===== */
:root{--rwh-bild:max(clamp(650px,57.8vw,900px),100svh)}
@media (min-width:901px){:root{--rwh-bild:max(650px,56.28vw,100svh)}}   /* wie die Mindesthöhe des Startbereichs: Foto in voller Breite ohne Beschnitt */
.rwh-photo{inset:0 0 auto 0;height:var(--rwh-bild);-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent)}
.rwh-shade{inset:0 0 auto 0;height:var(--rwh-bild)}
/* ===== Handy: App-Ansicht – Vollbild, Überschrift oben, Rechner als Glas-Karte im ersten Bildschirm ===== */
@media (max-width:760px){
  :root{--rwh-bild:100svh}
  .rwh{min-height:100svh}
  .rwh-frame{display:none}
  .rwh-shade{background:linear-gradient(180deg,rgba(3,15,26,.84) 0%,rgba(3,15,26,.38) 28%,rgba(3,15,26,.22) 52%,rgba(3,15,26,.82) 100%)}
  .rwh-page{min-height:100svh;padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(18px + env(safe-area-inset-bottom,0px))}
  .rwh-body{display:flex;flex-direction:column;flex:1;margin-top:clamp(18px,4svh,36px)}
  .rwh h1{font-size:clamp(30px,8.6vw,40px);line-height:1.04}
  .rwh-desc{font-size:15.5px;line-height:1.45;margin-top:10px}
  .rwh-calc{margin:auto 0 0;padding:18px 16px 16px;background:rgba(6,22,36,.6);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(255,255,255,.16);border-radius:24px;box-shadow:0 18px 48px rgba(0,0,0,.35)}
  .rwh-calc h2{font-size:19px;margin-bottom:14px}
  .rwh-input,.rwh-calc select{min-height:52px;border-radius:14px;background:rgba(3,14,24,.72)}
  .rwh-calc .rwh-chips{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:2px 16px 6px;margin:10px -16px 14px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent)}
  .rwh-calc .rwh-chips::-webkit-scrollbar{display:none}
  .rwh-calc .rwh-chips .chip{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;border-radius:999px;min-height:40px;padding:8px 14px}
  .rwh-calc .bb,.rwh-calc #cFinden{min-height:52px;border-radius:14px}
  .rwh-calc .qopt{border-radius:16px}
  .rwh-foot{padding-top:14px;font-size:12.5px}
}
@media (max-width:760px){.rwh-calc .c-sonst{margin-top:0}.rwh-calc .c-sonst-k{min-height:36px;font-size:.86rem}}
@media (max-width:760px){
  .rwh-body,.rwh-calc,.rwh-copy{min-width:0;max-width:100%}
  .rwh-calc{width:100%;box-sizing:border-box}
  .rwh-calc .rwh-chips{min-width:0;max-width:none;width:auto}
}
/* niedrige Handys (z. B. iPhone SE): Rechner-Knopf bleibt im ersten Bildschirm */
@media (max-width:760px) and (max-height:720px){
  .rwh h1{font-size:28px}
  .rwh-desc{font-size:14px;margin-top:6px}
  .rwh-body{margin-top:12px}
  .rwh-calc{padding:14px 14px 12px}
  .rwh-calc h2{font-size:17px;margin-bottom:8px}
  .rwh-input,.rwh-calc select{min-height:48px}
  .rwh-calc .rwh-chips{margin:8px -14px 8px}
}
/* Foto mindestens so hoch wie der Startbereich im Grundzustand (gemessen in app.js, ohne aufgeklappten Rechner) */
.rwh-photo,.rwh-shade{height:max(var(--rwh-bild),var(--rwh-start,0px))}

/* =====================================================================
   TYPOGRAFIE-SYSTEM (10/2026) – Markenvorgabe: Montserrat (Display, Knöpfe, Navigation, Preise) + Nunito Sans (Text).
   Steht bewusst am Ende und übersteuert die gewachsenen Einzelwerte.
   ===================================================================== */
:root{
  --t-h1:clamp(2rem,1.25rem + 2.9vw,3.25rem);
  --t-h2:clamp(1.5rem,1.15rem + 1.5vw,2.25rem);
  --t-h3:1.125rem;
  --t-body:1rem;
  --t-klein:.875rem;
}
body{font:400 var(--t-body)/1.65 var(--fu);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--fd);text-wrap:balance}
h1{font-size:var(--t-h1);font-weight:700;line-height:1.08;letter-spacing:-.025em}
h2{font-size:var(--t-h2);font-weight:700;line-height:1.15;letter-spacing:-.02em}
h3{font-size:var(--t-h3);font-weight:600;line-height:1.35;letter-spacing:-.01em}
h4{font-weight:600;letter-spacing:-.005em}
p,li{text-wrap:pretty}
.b{font:600 .95rem/1.2 var(--fd);letter-spacing:0}
.nav>li>a,.nav>li>button,.rwh .rwh-nav>li>a,.rwh .rwh-nav>li>button{font-family:var(--fd);font-weight:500;font-size:.9rem;letter-spacing:-.005em}
.rwh-primary,.kopf-cta{font-family:var(--fd);font-weight:600}
.q-preis,.s-preis,.mk-preis,.k-ges dd,.rwh-calc .qopt .q-preis{font-family:var(--fd);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ref,code,kbd{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* Startbereich: große, leichte Überschrift (freigegebener Entwurf) */
.rwh h1{font:500 clamp(38px,1.6rem + 3.1vw,70px)/1.06 var(--fd);letter-spacing:-.035em}
.rwh h1 .rwh-accent{font-size:.64em;font-weight:500;letter-spacing:-.025em}
.rwh-desc{font:400 clamp(16px,.9rem + .35vw,19px)/1.55 var(--fu)}
.rwh-calc h2{font:600 clamp(19px,1rem + .4vw,22px)/1.25 var(--fd);letter-spacing:-.015em}
.subhero h1{font-size:var(--t-h1)}
.lede{font-size:clamp(1rem,.95rem + .3vw,1.15rem);line-height:1.6}
::selection{background:rgba(78,195,255,.32);color:inherit}
@media (max-width:760px){
  :root{--t-h1:clamp(1.75rem,1.2rem + 2.4vw,2rem);--t-h2:clamp(1.375rem,1.1rem + 1.4vw,1.625rem)}
  .rwh h1{font-size:clamp(28px,7.4vw,32px);line-height:1.08;letter-spacing:-.03em}
  .rwh h1 .rwh-accent{font-size:.68em}
  .rwh-desc{font-size:15px;line-height:1.5}
  .rwh-calc h2{font-size:18px}
  .b{font-size:.92rem}
}

/* =====================================================================
   KOPFZEILE – einheitlich auf Startseite und Unterseiten (10/2026)
   Gleiche Navigation, Farben, Knopfgrößen, Logo-Höhe und Aktionen (Kunden-Login, WhatsApp, Angebot anfragen).
   ===================================================================== */
.nav>li>a,.nav>li>button,.rwh .rwh-nav>li>a,.rwh .rwh-nav>li>button{color:#f7fbff;min-height:40px;padding:0 .75rem;border-radius:8px}
.nav>li>a:hover,.nav>li>button:hover,.nav>li>button[aria-expanded="true"]{color:#53c4f1;background:rgba(83,196,241,.08)}
.nav>li>a[aria-current="page"]{color:#53c4f1}
header.top .logo img{height:21px;width:auto}
header.top .bar{min-height:68px}
.rwh-primary,header.top .hact .b1{min-height:44px;padding:0 1.15rem;border-radius:10px;background:#53c4f1;color:#04171f;font:600 .9rem/1 var(--fd);letter-spacing:0;display:inline-flex;align-items:center;white-space:nowrap;box-shadow:none}
.rwh-primary:hover,header.top .hact .b1:hover{background:#7bd3f5}
.rwh-primary:active,header.top .hact .b1:active{transform:translateY(1px)}
.iconb.wa,.rwh-aktionen .iconb.wa{width:42px;height:42px;border-radius:50%;background:#25d366;color:#fff;display:inline-grid;place-items:center;border:0;padding:0}
.iconb.wa:hover{background:#1fb855}
.rwh-aktionen{display:flex;align-items:center;gap:10px}
.kopf-link,.rwh .kopf-link{font-family:var(--fd);font-weight:500;font-size:.88rem;color:#f7fbff}
/* Kunden-Login: Symbol + Text, wenn Platz ist – sonst nur Symbol (gleich auf allen Seiten) */
@media (max-width:1679px){.kopf-link,.rwh .kopf-link{width:44px;padding:0;justify-content:center}.kopf-link span,.rwh .kopf-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (min-width:1680px){.kopf-link,.rwh .kopf-link{width:auto;padding:0 .7rem}.kopf-link span,.rwh .kopf-link span{position:static;width:auto;height:auto;overflow:visible;clip:auto}}
/* Infozeile: identisch auf allen Seiten; auf dem Handy ausgeblendet (Inhalte stehen im Menü und im Fußbereich) */
.util{background:#04101b;border-bottom:1px solid rgba(150,205,239,.14)}
.util a,.util span{font-family:var(--fu)}
@media (max-width:760px){.util{display:none}}
/* Handy: Kopfzeile kompakt, Aktionen auf WhatsApp und Menü reduziert */
@media (max-width:760px){.rwh-aktionen .rwh-cta,.rwh-aktionen .kopf-link{display:none}.rwh-aktionen .iconb.wa{width:40px;height:40px}}
/* Navigation kompakter (Montserrat läuft breiter), gleich auf allen Seiten */
.nav>li>a,.nav>li>button,.rwh .rwh-nav>li>a,.rwh .rwh-nav>li>button{font-size:.875rem;padding:0 .6rem}
.nav,.rwh .rwh-nav{gap:2px}
/* Innenabstand immer = Rahmenabstand + Luft, damit Logo und Text nie am Rahmen kleben */
@media (min-width:761px){.rwh-head{gap:clamp(12px,1.4vw,24px)}}
@media (min-width:761px) and (max-width:900px){.rwh-page{padding-left:58px;padding-right:58px}}
@media (min-width:901px){.rwh-page{padding-top:calc(3.3vw + clamp(22px,1.8vw,40px));padding-left:calc(3.3vw + clamp(26px,2.6vw,52px));padding-right:calc(3.3vw + clamp(20px,4vw - 30px,44px))}}
/* Handy: Kopfzeile überall Logo + Menü; Anfragen und WhatsApp stehen in der unteren Leiste */
@media (max-width:760px){header.top .hact .b1,header.top .hact .js-wa,header.top .hact .kopf-link,.rwh-aktionen .js-wa{display:none}}
@media (max-width:1360px){header.top .nav,.rwh .rwh-nav{display:none!important}header.top .burger,.rwh .burger{display:inline-flex!important}}

/* =====================================================================
   RECHNER: schrittweise Auswahl – ohne Gerät nur Suche und Schnellwahl
   ===================================================================== */
.rwh-calc.c-ohne-geraet label[for="cRepSel"],.rwh-calc.c-ohne-geraet #cReps,.rwh-calc.c-ohne-geraet #cFinden{display:none}
@media (prefers-reduced-motion:no-preference){
  .rwh-calc:not(.c-ohne-geraet) label[for="cRepSel"],.rwh-calc:not(.c-ohne-geraet) #cReps,.rwh-calc:not(.c-ohne-geraet) #cFinden{animation:rwSchritt .32s cubic-bezier(.23,1,.32,1) both}
  .rwh-calc:not(.c-ohne-geraet) #cReps{animation-delay:.04s}.rwh-calc:not(.c-ohne-geraet) #cFinden{animation-delay:.08s}
}
@keyframes rwSchritt{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Bewertung im Startbereich: Desktop gestapelt, Handy eine kompakte Zeile */
.rwh-note{display:inline-flex;align-items:baseline;gap:.3rem;font:600 clamp(22px,1.1rem + .6vw,30px)/1 var(--fd);color:#f7fbff}
.rwh-stern{color:#f5b301;font-size:.8em}
@media (max-width:760px){
  .rwh-rating{flex-direction:row;align-items:center;gap:.5rem;margin-top:12px;padding:6px 12px 6px 10px;border-radius:999px;background:rgba(4,16,27,.55);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .rwh-note{font-size:15px}
  .rwh-rating small{font-size:13px;color:#d6e4ee}
  .rwh-rating .rwh-aus{display:none}
}

/* Untere Leiste (Handy): dritter Knopf war in der Nacht-Darstellung weiß auf weiß */
.mbar .b3{background:transparent;color:#f7fbff;border:1px solid rgba(247,251,255,.45)}
.mbar .b3 .ic{color:#53c4f1}
.mbar{background:rgba(4,16,27,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(150,205,239,.16)}
/* WhatsApp-Knopf in der Kopfzeile auf dem Handy aus (steht in der unteren Leiste) */
@media (max-width:760px){.rwh .rwh-aktionen .iconb.js-wa,header.top .hact .iconb.js-wa{display:none}}
/* Infozeile auf Tablets: nur Adresse, Telefon, Firmenkunden-Login */
@media (max-width:1100px){.util .l span,.util .util-insta{display:none}}
@media (max-width:760px){.rwh-calc{margin:20px 0 0}.rwh-body{margin-top:18px}.rwh-foot{margin-top:auto;padding-top:18px}}

/* =====================================================================
   GOOGLE-BEWERTUNGEN: Kopf + seitlicher Slider (10/2026)
   ===================================================================== */
.revsec .wrap{max-width:1200px}
.rv-laden,.rv-hinweis{color:var(--faint);text-align:left;margin:0}
.rv-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin:0 0 1.6rem}
.rv-schnitt{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .8rem}
.rv-schnitt>b{font:700 clamp(2.2rem,1.6rem + 2vw,3rem)/1 var(--fd);letter-spacing:-.03em;color:#f7fbff}
.rv-schnitt>span:last-child{color:#c1d5e2;font-size:.95rem;flex-basis:100%}
@media (min-width:600px){.rv-schnitt>span:last-child{flex-basis:auto}}
.rv-akt{display:flex;flex-wrap:wrap;gap:.6rem}
.rv-sterne{color:#f5b301;letter-spacing:.08em;font-size:1rem;line-height:1}
.rv-sterne.rv-gross{font-size:1.25rem}
.rv-leer{color:rgba(193,213,226,.35)}
.rv-buehne{position:relative}
.rv-spur{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,calc((100% - 2 * 16px) / 3));column-gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:4px 2px 14px;scrollbar-width:none;overscroll-behavior-x:contain}
.rv-spur::-webkit-scrollbar{display:none}
.rv-spur:focus-visible{outline:2px solid #53c4f1;outline-offset:4px;border-radius:18px}
@media (max-width:900px){.rv-spur{grid-auto-columns:minmax(260px,calc((100% - 16px) / 2))}}
@media (max-width:600px){.rv-spur{grid-auto-columns:86%;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}}
.rv-karte{position:relative;scroll-snap-align:start;display:flex;flex-direction:column;gap:.8rem;padding:1.3rem 1.3rem 1.1rem;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid rgba(150,205,239,.18);min-height:100%}
.rv-text{margin:0;color:#e8f1f7;font-size:.98rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rv-karte.rv-offen .rv-text{-webkit-line-clamp:unset;display:block}
.rv-mehr{align-self:flex-start;background:none;border:0;padding:0;color:#53c4f1;font:600 .85rem var(--fd);cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:32px}
.rv-wer{margin-top:auto;display:flex;align-items:center;gap:.7rem;padding-top:.4rem;border-top:1px solid rgba(150,205,239,.12)}
.rv-wer b{display:block;font:600 .92rem/1.2 var(--fd);color:#f7fbff}
.rv-wer b a{color:inherit;text-decoration:none}.rv-wer b a:hover{text-decoration:underline}
.rv-wer small{color:#a9bfce;font-size:.8rem}
.rv-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(83,196,241,.16);color:#9fdcf7;font:700 .95rem var(--fd)}
.rv-badge{position:absolute;top:14px;right:14px;font:600 .72rem var(--fd);color:#04171f;background:#53c4f1;border-radius:999px;padding:3px 9px}
.rv-nav{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.6rem}
.rv-pfeil{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:transparent;border:1px solid rgba(150,205,239,.35);color:#f7fbff;cursor:pointer}
.rv-pfeil:hover{border-color:#53c4f1;color:#53c4f1}
.rv-pfeil .ic{width:18px;height:18px;transform:rotate(-90deg)}
.rv-pfeil.rv-zurueck .ic{transform:rotate(90deg)}
@media (max-width:600px){.rv-nav{display:none}}
/* seitliches Einblenden beim ersten Sichtbarwerden, Karte für Karte */
@media (prefers-reduced-motion:no-preference){
  .rv-wartet .rv-karte{opacity:0;transform:translateX(48px)}
  .rv-rein .rv-karte{animation:rvRein .7s cubic-bezier(.23,1,.32,1) both}
  .rv-rein .rv-karte:nth-child(2){animation-delay:.09s}.rv-rein .rv-karte:nth-child(3){animation-delay:.18s}.rv-rein .rv-karte:nth-child(4){animation-delay:.27s}.rv-rein .rv-karte:nth-child(n+5){animation-delay:.34s}
  .rv-karte.rv-neu{animation:rvRein .7s cubic-bezier(.23,1,.32,1) both}
}
@keyframes rvRein{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
.gml-z{display:grid;gap:.4rem;padding:.7rem;border:1px solid var(--line);border-radius:10px;margin-bottom:.6rem}
.gml-r{display:grid;grid-template-columns:1fr 8rem 10rem auto;gap:.4rem}
@media (max-width:700px){.gml-r{grid-template-columns:1fr 1fr}}
.revsec h2,.revsec .big{text-align:left}

/* Feinschliff nach Design-Prüfung (10/2026) */
.fg h3{font:600 .85rem var(--fd);color:#fff;margin:0 0 .8rem;letter-spacing:0}
.kurz{border-left:0;border:1px solid var(--line2);border-radius:14px;padding:1rem 1.2rem;background:var(--card)}
.wa-fab,.wa-fab:hover{box-shadow:0 8px 24px rgba(2,10,18,.45)}
.rail i{width:34px;transform:scaleX(.65);transform-origin:left center;transition:background 220ms var(--e),transform 220ms var(--e)}
.rail i.now{width:34px;transform:none}

/* ======================================================================
   BUCHEN OHNE WARENKORB (10/2026): Übergabe- und Zahlwahl, Angebot im Kundenbereich
   ====================================================================== */
.k-wahl{display:grid;gap:.6rem}
.k-opt{display:flex;align-items:flex-start;gap:.75rem;min-height:44px;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r2);background:var(--card);cursor:pointer;transition:border-color 140ms var(--ease-out),background-color 140ms var(--ease-out)}
.k-opt input{width:22px;height:22px;flex:none;margin:.1rem 0 0;accent-color:var(--ac)}
.k-opt b{display:block;font-family:var(--fd);font-weight:600;font-size:.98rem}
.k-opt small{display:block;color:var(--soft);font-size:.86rem;margin-top:.15rem}
.k-opt:hover{border-color:var(--line2)}
.k-opt:has(input:checked){border-color:var(--ac);background:var(--tint)}
.k-opt:has(input:focus-visible){outline:3px solid var(--ac);outline-offset:2px}
.k-wer{margin:0;display:flex;flex-direction:column;gap:.15rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r2);background:var(--paper)}
.k-wer span{color:var(--soft);font-size:.9rem}
.k-sum .k-rabatt dt,.k-sum .k-rabatt dd{color:#9fe0b8}
.s-zahl{margin:.1rem 0 .2rem;font-size:.82rem;color:var(--dsoft);text-align:center}
/* Kundenbereich */
.kb-alt{margin-top:1.6rem;border-top:1px solid var(--line);padding-top:1rem}
.kb-alt summary{cursor:pointer;color:var(--ac);font-weight:600;min-height:44px;display:flex;align-items:center}
.kb-alt p{color:var(--soft)}
.kb-zugang form .two{margin-bottom:.4rem}
.kb-angebot{max-width:760px;margin:0 0 1.2rem}
.kb-angebot-k{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.kb-angebot-k h3{margin:0;font-size:1.25rem}
.kb-angebot-k .hint{margin:0}
.kb-posten{margin:1rem 0 .4rem;border-top:1px solid var(--line)}
.kb-posten>div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.kb-posten dt{min-width:0}
.kb-posten dd{margin:0;font-family:var(--fd);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.kb-posten .k-rabatt dd{color:var(--ok)}
.kb-posten .k-ges dt,.kb-posten .k-ges dd{font:700 1.2rem var(--fd)!important;color:var(--ink)!important}
.kb-angebot .k-steuer{color:var(--soft)}
.kb-hinweis{margin:.6rem 0;padding:.8rem 1rem;background:var(--paper);border-radius:var(--r2);white-space:pre-line}
.kb-angebot .s-plus{margin:.8rem 0 0;padding-left:1.1rem;color:var(--soft);font-size:.9rem}
.kb-entscheid{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 1rem}
#kbAbl{max-width:560px;margin-bottom:1rem}
#kbBuchen{margin-top:.6rem}
.kb-schritt-t{font-size:1.4rem;margin:0 0 1.2rem}
button.kb-link{background:none;border:0;padding:0 .4rem;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font:inherit}
@media(max-width:620px){.kb-entscheid .b{flex:1 1 100%}}
/* Verwaltung: Angebot zu einer Anfrage */
.adm-ang{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}
.adm-ang h4{margin:0 0 .6rem;font-size:1rem}
.ang-sum{margin:0 0 .4rem;max-width:620px}
.ang-sum>div{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.ang-sum dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ang-ges dt,.ang-ges dd{font-weight:700}
.ang-link{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.4rem 0 .8rem}
.ang-link code{flex:1 1 280px;min-width:0;overflow-wrap:anywhere;font-size:.8rem;background:var(--sunk);padding:.45rem .6rem;border-radius:var(--r1)}
.ang-form{margin-top:.8rem;display:grid;gap:.6rem;max-width:760px}
.ang-z{display:grid;grid-template-columns:minmax(0,1fr) 8.5rem auto;gap:.4rem;margin-bottom:.4rem}
.ang-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.ang-summe{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
@media(max-width:620px){.ang-z{grid-template-columns:1fr 7rem}.ang-z [data-pweg]{grid-column:1/-1;justify-self:start}.ang-g{grid-template-columns:1fr}}
/* Nacht: Auswahlkarten, Summen ohne Umbruch */
:where(html.nacht) .k-opt{background:var(--card)}
:where(html.nacht) .k-opt:has(input:checked){background:rgba(83,196,241,.1);border-color:var(--cy)}
.k-opt input{accent-color:var(--cy)}
.k-sum dd,.kb-posten dd{white-space:nowrap;padding-left:.8rem}
.k-sum dl>div{gap:.6rem}
.kasse-g #kWegTeil>h2:first-child{margin-top:2rem}
/* ======================================================================
   „WAS IST KAPUTT?“ – Handlungsaufforderung mit Lichtwechsel (10/2026)
   Beim Hereinscrollen „geht das Werkstattlicht an“: Ein Lichtkegel aus Markencyan
   öffnet sich von oben (an die Scrollposition gekoppelt, rückwärts wieder aus).
   Danach steigen die Kacheln gestaffelt ein, ein Glanz läuft einmal darüber.
   ====================================================================== */
.pick-cta{position:relative;isolation:isolate;overflow:hidden;--p:0;padding-block:clamp(4.5rem,10vw,8.5rem);transition:background-color .3s}
.pick-licht{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(130% 85% at 50% 0%,#a6e6ff 0%,#53c4f1 30%,#1f93d4 62%,#0a5c93 88%,#073f68 100%);
  /* weicher Lichtrand: die Maske wächst mit --p von der Oberkante nach unten */
  -webkit-mask:radial-gradient(ellipse 150% 130% at 50% 0%,#000 calc(var(--p) * 108% - 14%),transparent calc(var(--p) * 108%));
          mask:radial-gradient(ellipse 150% 130% at 50% 0%,#000 calc(var(--p) * 108% - 14%),transparent calc(var(--p) * 108%));
  opacity:calc(.45 + var(--p) * .55)}
.pick-licht::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 0%,rgba(255,255,255,.45),transparent 70%);opacity:var(--p)}
.pick-cta .big{color:#f7fbff;margin-bottom:1rem;max-width:none;font-size:clamp(2.6rem,1.6rem + 5vw,5.6rem);letter-spacing:-.04em;transition:color .5s cubic-bezier(.16,1,.3,1)}
.pick-lead{max-width:46ch;margin:0 auto clamp(2.2rem,4.5vw,3.4rem);text-align:center;font-size:clamp(1.02rem,.95rem + .4vw,1.25rem);line-height:1.5;color:#c1d5e2;transition:color .5s cubic-bezier(.16,1,.3,1)}
.pick-cta.pick-hell .big{color:#03161f}
.pick-cta.pick-hell .pick-lead{color:#06324a}
/* Kacheln: dunkle Werkbank-Karten auf dem hellen Licht */
.pick-cta .ptile{background:#071b2b;border:1px solid rgba(150,205,239,.16);color:#f7fbff;box-shadow:0 22px 44px -22px rgba(2,18,32,.75);
  transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .6s cubic-bezier(.16,1,.3,1),border-color .2s,box-shadow .2s;transition-delay:calc(var(--i,0) * 70ms),calc(var(--i,0) * 70ms),0s,0s}
.pick-cta .ptile b{color:#f7fbff}
.pick-cta .ptile small{color:#b9cfdd}
.pick-cta .ptile .ic{color:#53c4f1}
.pick-cta .ptile::after{content:'';width:20px;height:20px;top:1.3rem;font-size:0;background:#7fd3f5;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:hover) and (pointer:fine){
  .pick-cta .ptile:hover{transform:translateY(-5px);border-color:#53c4f1;box-shadow:0 28px 50px -22px rgba(2,18,32,.85);transition-delay:0s}
  .pick-cta .ptile:hover::after{transform:translateX(4px);background:#fff}
}
.pick-cta .ptile:focus-visible{outline:3px solid #03161f;outline-offset:3px}
/* Einstieg: erst beim Erreichen des Bereichs (nur mit JavaScript) */
.pick-js:not(.pick-da) .ptile{opacity:0;transform:translateY(34px) scale(.94)}
.pick-js:not(.pick-da) .pick-weiter{opacity:0;transform:translateY(16px)}
.pick-weiter{transition:opacity .6s cubic-bezier(.16,1,.3,1) .65s,transform .6s cubic-bezier(.16,1,.3,1) .65s}
/* einmaliger Glanz über die Kacheln – wie neues Displayglas */
.pick-cta .ptile::before{content:'';position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(166,230,255,.28) 48%,rgba(255,255,255,.12) 52%,transparent 70%);transform:translateX(-130%)}
.pick-da .ptile::before{animation:pickGlanz 1.2s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(550ms + var(--i,0) * 70ms)}
@keyframes pickGlanz{to{transform:translateX(130%)}}
/* Weiter-Leiste */
.pick-weiter{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.8rem 1rem;margin-top:clamp(2rem,4vw,3rem)}
.pick-weiter p{margin:0;color:#f7fbff;font:600 1rem var(--fd);flex-basis:100%;text-align:center}
.pick-weiter .b1{background:#03161f;color:#f7fbff;border-color:#03161f;min-height:48px;padding-inline:1.5rem}
.pick-weiter .b1:hover{background:#0a2a3d}
.pick-weiter .b2{background:rgba(3,22,31,.35);color:#f7fbff;border:1px solid rgba(247,251,255,.45);min-height:48px;padding-inline:1.5rem}
.pick-weiter .b2:hover{background:rgba(3,22,31,.55)}
@media(min-width:700px){.pick-weiter p{flex-basis:auto}}
@media(max-width:560px){.pick-cta .ptile::after{top:1rem;width:16px;height:16px}.pick-weiter .b{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){
  .pick-cta{--p:1}
  .pick-cta .big{color:#03161f}.pick-cta .pick-lead{color:#06324a}
  .pick-js:not(.pick-da) .ptile,.pick-js:not(.pick-da) .pick-weiter{opacity:1;transform:none}
  .pick-cta .ptile::before{display:none}
}
.pick-fertig .ptile{transition-delay:0s!important}
.pick-cta .ptile{min-height:178px;padding-top:4.6rem;justify-content:flex-start}
@media(max-width:560px){.pick-cta .ptile{min-height:0;padding-top:1.1rem}}