/* Handy Sinsheim - öffentliche Website. Native CSS, keine Build-Schritte.
   Haltung: ruhig, präzise, seriös. Gelb nur für die primäre Handlung und feine Akzente.
   Radius-System: überall 6px (Container 8px). Keine Schatten-Effekte, keine Glows. */
@font-face{font-family:"Outfit";src:url("/assets/fonts/outfit-latin-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  color-scheme:light;
  --bg:#ffffff; --bg-2:#f3f5f9; --surface:#ffffff; --surface-2:#eaeff7;
  --text:#0a1427; --muted:#4a5a74; --line:rgba(10,20,39,.12); --line-strong:rgba(10,20,39,.3);
  --accent:#ffc72c; --accent-ink:#0a1427; --accent-hover:#ffd45a;
  --navy:#0a1b36; --navy-2:#13294f; --on-navy:#eef2f8; --on-navy-muted:#a9bad3; --on-navy-line:rgba(169,186,211,.25);
  --tint-yellow:#fff6d6; --tint-blue:#eaf0fa;
  --r-ui:6px; --r-box:8px; --nav-h:80px; --maxw:1200px;
  --font:"Outfit","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --slide-ms:6500ms;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-.025em;font-weight:600;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);height:100%;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;gap:1.75rem}
/* Wortmarke "Handy Sinsheim" (bis ein Logo als Datei vorliegt) */
.logo{display:flex;align-items:center;gap:.85rem;text-decoration:none;margin-right:auto;color:var(--text)}
.logo-mark{width:46px;height:46px;flex:none;filter:drop-shadow(0 4px 8px rgba(10,27,54,.25))}
.logo-text{font-weight:700;font-size:1.6rem;letter-spacing:-.03em;line-height:1;text-transform:none}
.logo-text small{display:block;font-weight:600;font-size:.7rem;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;margin-top:.3rem}
.nav-links{display:flex;gap:1.75rem}
.nav-links a{position:relative;text-decoration:none;color:var(--muted);font-size:1.02rem;font-weight:500;padding:.4rem 0;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--text)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;padding:.45rem .9rem;border:1px solid var(--line-strong);border-radius:var(--r-ui);font-weight:500;font-size:.95rem}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:200px;display:grid;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);padding:.4rem}
.menu-panel a{padding:.7rem 1rem;text-decoration:none;border-radius:var(--r-ui)}
.menu-panel a:hover{background:var(--surface-2)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;text-decoration:none;font:inherit;font-weight:600;font-size:.97rem;border:1px solid transparent;border-radius:var(--r-ui);padding:.8rem 1.4rem;cursor:pointer;transition:background .2s,border-color .2s,transform .2s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary,.btn-call{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover,.btn-call:hover{background:var(--accent-hover)}
.btn-line{border-color:var(--line-strong);color:var(--text);background:transparent}
.btn-line:hover{border-color:var(--text)}
.btn-call{padding:.5rem 1rem;font-size:.93rem}

/* ---------- Vollbild-Slider ---------- */
.slider{position:relative;display:grid;min-height:calc(100dvh - var(--nav-h));overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg)}
.slide{grid-area:1/1;position:relative;min-height:calc(100dvh - var(--nav-h));display:grid;align-items:center;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility 0s linear .9s}
.slide.is-active{opacity:1;visibility:visible;transition-delay:0s}
.slide:nth-child(2){background:var(--tint-yellow)}
.slide:nth-child(3){background:var(--tint-blue)}
.slide:nth-child(4){background:var(--bg)}

/* Flächen im Hintergrund: driften langsam, jede Folie anders */
.shape{position:absolute;border-radius:50%;pointer-events:none}
.shape.s-fill{background:var(--accent);width:min(46vw,620px);aspect-ratio:1;right:-12vw;bottom:-24vw;opacity:.95}
.shape.s-ring{border:2px solid var(--line-strong);width:min(38vw,520px);aspect-ratio:1;right:34vw;top:-14vw}
.slide:nth-child(2) .s-fill{left:auto;right:-8vw;top:-18vw;bottom:auto;background:var(--navy);opacity:1;width:min(40vw,560px)}
.slide:nth-child(2) .s-ring{right:auto;left:6vw;top:auto;bottom:-16vw}
.slide:nth-child(3) .s-fill{left:30vw;bottom:-26vw;background:var(--accent);width:min(50vw,700px)}
.slide:nth-child(3) .s-ring{right:-6vw;top:auto;bottom:-12vw}
.slide:nth-child(4) .s-fill{left:auto;right:30vw;top:-20vw;bottom:auto;background:var(--accent);width:min(36vw,500px)}
.slide:nth-child(4) .s-ring{right:auto;left:-8vw;top:auto;bottom:-14vw}
.slide.is-active .s-fill{animation:drift 14s ease-in-out infinite alternate}
.slide.is-active .s-ring{animation:drift 18s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3vw,2vw,0) scale(1.08)}}

.slide-in{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:0 auto;padding:2rem 1.5rem 5.5rem;display:grid;grid-template-columns:1.1fr .9fr;gap:4.5rem;align-items:center}
.slide h1,.slide h2{font-size:clamp(2.3rem,5vw,4.3rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;max-width:16ch}
.slide .sub{margin-top:1.4rem;max-width:42ch;font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--muted)}
.slide .cta{margin-top:2.1rem;display:flex;gap:.8rem;flex-wrap:wrap}

/* Eintritts-Animation: Text staffelt sich von unten ein, Panel öffnet sich von rechts */
.slide .anim{opacity:0}
.slide.is-active .anim{animation:rise .95s var(--ease) both;animation-delay:calc(var(--d,0) * 130ms + 250ms)}
.slide .panel{clip-path:inset(0 0 0 100%)}
.slide.is-active .panel{animation:wipe 1.1s var(--ease) .15s both}
@keyframes rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.slide.is-active .stagger>*{animation:slidein .8s var(--ease) both;animation-delay:calc(var(--i,0) * 140ms + 700ms)}
.slide .stagger>*{opacity:0}
@keyframes slidein{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}

/* Panel (Navy): Inhalt je Folie */
.panel{background:var(--navy);color:var(--on-navy);border-radius:var(--r-box);padding:2rem;box-shadow:0 30px 70px -30px rgba(10,27,54,.55)}
.panel h2,.panel h3{color:var(--on-navy)}
.panel .label{font-size:.82rem;font-weight:500;letter-spacing:.02em;color:var(--on-navy-muted)}
.panel .model{font-size:1.45rem;font-weight:600;letter-spacing:-.015em;margin:.3rem 0 1.1rem}
.panel ul{list-style:none;margin:0;padding:0}
.panel li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.85rem 0;border-top:1px solid var(--on-navy-line)}
.panel li span{color:var(--on-navy-muted)}
.panel li strong{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--on-navy)}
.panel .more{display:inline-block;margin-top:1.2rem;font-weight:500;text-decoration:none;color:var(--on-navy);border-bottom:1px solid var(--accent);padding-bottom:2px}
.panel .more:hover{color:var(--accent)}
.bignum{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.bignum strong{font-size:clamp(3.6rem,8vw,6.5rem);font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.bignum span{font-size:1.4rem;color:var(--on-navy-muted)}
.panel .caption{margin-top:1.1rem;color:var(--on-navy-muted);max-width:30ch}
.check li{align-items:flex-start;justify-content:flex-start;gap:1rem}
.check li::before{content:"";flex:none;margin-top:.5rem;width:10px;height:10px;border-radius:2px;background:var(--accent)}
.check strong{display:block}.check span{display:block;font-size:.95rem}
.devices li{font-size:1.2rem;padding:1rem 0}
.devices li strong{font-size:1.2rem}

/* Steuerung unten: Fortschritt, Pfeile, Pause */
.slider-ui{position:absolute;z-index:5;left:0;right:0;bottom:0;max-width:var(--maxw);margin:0 auto;padding:0 1.5rem 1.6rem;display:flex;align-items:center;gap:1.2rem}
.dots{display:flex;gap:.6rem;flex:1;max-width:520px}
.dot{flex:1;position:relative;height:28px;padding:0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;color:var(--muted);font-size:.82rem;font-weight:500}
.dot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--line-strong);border-radius:2px}
.dot::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--text);border-radius:2px}
.dot span{position:absolute;top:10px;left:0;white-space:nowrap}
.dot[aria-current="true"]{color:var(--text)}
.dot[aria-current="true"]::after{animation:fill var(--slide-ms) linear forwards}
.slider.paused .dot[aria-current="true"]::after{animation-play-state:paused}
@keyframes fill{to{width:100%}}
.arrows{margin-left:auto;display:flex;gap:.5rem}
.ctl{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:var(--r-ui);background:var(--bg);color:var(--text);cursor:pointer;font:inherit;font-size:1.1rem;transition:background .2s,border-color .2s,transform .2s var(--ease)}
.ctl:hover{border-color:var(--text);background:var(--surface-2)}
.ctl:active{transform:scale(.96)}
.ctl.pause{width:auto;padding:0 1rem;font-size:.9rem;font-weight:600}

/* ---------- Abschnitte ---------- */
.sec{max-width:var(--maxw);margin:0 auto;padding:6.5rem 1.5rem}
.sec h2{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:20ch}
.sec .lead{margin-top:1rem;max-width:56ch;color:var(--muted)}

/* Leistungen: ruhige Raster-Liste, nur eine Linie je Eintrag */
.services{margin-top:3.5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:0 3rem}
.service{padding:1.6rem 0 2.4rem;border-top:1px solid var(--line-strong);transition:border-color .3s}
.service:hover{border-top-color:var(--accent)}
.service h3{font-size:1.25rem;margin-bottom:.6rem}
.service p{color:var(--muted);font-size:.99rem;max-width:36ch}

/* Marken: ruhige Textzeile, ohne Bewegung */
.marken{border-block:1px solid var(--line);background:var(--bg-2)}
.marken-in{max-width:var(--maxw);margin:0 auto;padding:1.8rem 1.5rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 2.4rem}
.marken-in strong{font-weight:500;color:var(--muted);font-size:.9rem;margin-right:.6rem}
.marken-in span{font-size:1.2rem;font-weight:500;letter-spacing:-.01em}

/* Ablauf: Überschrift bleibt stehen, Schritte laufen vorbei */
.ablauf{display:grid;grid-template-columns:.8fr 1.2fr;gap:5rem;align-items:start}
.ablauf-head{position:sticky;top:calc(var(--nav-h) + 3rem)}
.steps{list-style:none;margin:0;padding:0 0 0 2.2rem;position:relative;display:grid;gap:3rem}
.steps::before{content:"";position:absolute;left:0;top:.5rem;bottom:.5rem;width:1px;background:var(--line-strong)}
.steps::after{content:"";position:absolute;left:-1px;top:.5rem;bottom:.5rem;width:3px;background:var(--accent);transform-origin:top;transform:scaleY(0)}
@supports (animation-timeline:view()){.steps::after{animation:grow linear both;animation-timeline:view();animation-range:entry 20% cover 70%}}
@supports not (animation-timeline:view()){.steps::after{transform:scaleY(1)}}
@keyframes grow{to{transform:scaleY(1)}}
.steps h3{font-size:1.45rem;margin-bottom:.45rem}
.steps p{color:var(--muted);max-width:46ch}

/* Preissuche */
.preisband{background:var(--bg-2);border-block:1px solid var(--line)}
.preisband-in{max-width:var(--maxw);margin:0 auto;padding:4.5rem 1.5rem;display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center}
.preisband h2{font-size:clamp(1.7rem,3.2vw,2.5rem);max-width:18ch}
.preisband p{margin-top:.8rem;max-width:44ch;color:var(--muted)}
.finder{display:grid;gap:.6rem}
.finder label{font-weight:500;font-size:.92rem;color:var(--muted)}
.finder-row{display:flex;gap:.6rem}
.finder input{flex:1;min-width:0;font:inherit;padding:.8rem 1rem;border-radius:var(--r-ui);border:1px solid var(--line-strong);background:var(--surface);color:var(--text)}
.finder input::placeholder{color:var(--muted)}
.finder input:focus{border-color:var(--accent);outline:none}
.finder .btn{background:var(--accent);color:var(--accent-ink)}
.finder .btn:hover{background:var(--accent-hover)}

/* Kontakt */
.kontakt{display:grid;grid-template-columns:1fr 1fr;margin-top:3rem;border-top:1px solid var(--line-strong)}
.kbox{padding:2rem 2rem 2rem 0}
.kbox + .kbox{padding-left:2rem;border-left:1px solid var(--line)}
.kbox h3{font-size:1.1rem;margin-bottom:.9rem}
.kbox address{font-style:normal;color:var(--muted)}
.kbox .tel{display:inline-block;margin-top:1rem;font-size:1.6rem;font-weight:600;letter-spacing:-.02em;text-decoration:none}
.kbox .tel:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
.hours{list-style:none;margin:0;padding:0;color:var(--muted);display:grid;gap:.25rem}
.kbox-actions{margin-top:1.4rem;display:flex;gap:.7rem;flex-wrap:wrap}

/* ---------- Footer ---------- */
.foot{background:var(--bg-2);border-top:1px solid var(--line)}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:3.5rem 1.5rem 2rem;display:grid;grid-template-columns:1.4fr 1fr 1fr .9fr;gap:2.5rem}
.foot h2{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--muted);margin-bottom:.9rem}
.foot address{font-style:normal;color:var(--muted)}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
.foot p{color:var(--muted)}
.foot .links{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.foot-brand strong{display:block;font-size:1.2rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.7rem}
.foot-legal{max-width:var(--maxw);margin:0 auto;padding:1.2rem 1.5rem 2rem;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}

/* ---------- Preisseite ---------- */
.pagehead{max-width:var(--maxw);margin:0 auto;padding:4rem 1.5rem 1.5rem}
.pagehead h1{font-size:clamp(2rem,4.4vw,3.4rem);max-width:18ch}
.pagehead p{margin-top:1rem;color:var(--muted);max-width:58ch}
.crumbs{font-size:.93rem;color:var(--muted);margin-bottom:1.2rem}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.searchbar{display:flex;gap:.6rem;margin-top:1.6rem;max-width:560px}
.searchbar input{flex:1;min-width:0;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-ui);padding:.8rem 1rem}
.searchbar input::placeholder{color:var(--muted)}
.searchbar input:focus{border-color:var(--accent);outline:none}
.chips{max-width:var(--maxw);margin:0 auto;padding:1.5rem 1.5rem 4rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 2rem}
.chip{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;text-decoration:none;padding:1.1rem 0;border-top:1px solid var(--line-strong);transition:border-color .25s}
.chip:hover{border-top-color:var(--accent)}
.chip strong{font-size:1.15rem;font-weight:600}.chip span{color:var(--muted);font-size:.92rem}
.seriehead{max-width:var(--maxw);margin:0 auto;padding:2.2rem 1.5rem .8rem;font-size:1.2rem;font-weight:600}
.models{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem 1.5rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 2rem}
.model{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;text-decoration:none;padding:.85rem 0;border-top:1px solid var(--line)}
.model:hover{border-top-color:var(--accent)}
.model:hover span{text-decoration:underline;text-underline-offset:3px}
.model small{color:var(--muted);white-space:nowrap}
.pricebox{max-width:var(--maxw);margin:0 auto;padding:1.5rem 1.5rem 2.5rem}
.pricegroup{padding:1.4rem 0 .6rem;border-top:1px solid var(--line-strong);display:grid;grid-template-columns:.7fr 1.3fr;gap:2rem}
.pricegroup h2{font-size:1.2rem}
.prow{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0}
.prow + .prow{border-top:1px solid var(--line)}
.prow strong{font-variant-numeric:tabular-nums;font-weight:600}
.note{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem 4rem;color:var(--muted);font-size:.93rem}
.empty{max-width:var(--maxw);margin:0 auto;padding:1rem 1.5rem 4rem}
.empty .kbox{max-width:620px;padding:1.5rem 0;border-top:1px solid var(--line-strong)}
.legalpage{max-width:820px;margin:0 auto;padding:4rem 1.5rem 5rem}
.legalpage h1{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:1.5rem}
.legalpage h2{font-size:1.2rem;margin:2rem 0 .6rem}
.legalpage p,.legalpage li{color:var(--muted)}
.gebietpage{max-width:960px}
.gebietpage .lead{font-size:1.1rem;max-width:68ch}
.gebiet-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.8rem 0 2.6rem}
.orte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.3rem 1.5rem}
.orte li{padding:.6rem 0;border-top:1px solid var(--line)}
.orte strong{color:var(--text);font-weight:600}
.orte span{display:block;font-size:.85rem;color:var(--muted)}

/* ---------- Bewegung ---------- */
/* Bewusst nicht an prefers-reduced-motion gekoppelt (auf Wunsch). Der Slider hat eine sichtbare Pause-Taste. */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Mobil: einspaltig ---------- */
@media (max-width:900px){
  .nav-links{display:none}.menu{display:block}
  .nav-in{gap:.7rem;padding:0 1rem}
  .logo-text{font-size:1.05rem}.logo-text small{display:none}
  .btn-call{margin-left:auto}
  .slide-in{grid-template-columns:1fr;gap:2rem;padding:1.6rem 1.25rem 6.2rem}
  .slide h1,.slide h2{font-size:clamp(2rem,9vw,2.8rem)}
  .panel{padding:1.4rem}
  .dot span{display:none}.dot{height:12px}
  .slider-ui{padding:0 1.25rem 1.2rem;gap:.7rem}
  .ctl{width:40px;height:40px}
  .sec{padding:4rem 1.25rem}
  .services{grid-template-columns:1fr}
  .ablauf{grid-template-columns:1fr;gap:2.5rem}.ablauf-head{position:static}
  .preisband-in{grid-template-columns:1fr;gap:2rem;padding:3.5rem 1.25rem}
  .finder-row{flex-direction:column}
  .kontakt{grid-template-columns:1fr}
  .kbox{padding:1.6rem 0}.kbox + .kbox{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .foot-in{grid-template-columns:1fr 1fr;padding:3rem 1.25rem 1.5rem}
  .pricegroup{grid-template-columns:1fr;gap:.4rem}
  .pagehead,.chips,.models,.pricebox,.note,.empty,.seriehead{padding-left:1.25rem;padding-right:1.25rem}
}
@media (max-width:520px){.foot-in{grid-template-columns:1fr}.logo-text small{display:none}}

/* Mobil: Wortmarke in einer Zeile */
@media (max-width:900px){.logo-text{white-space:nowrap;font-size:1rem}.logo-bar{height:22px}.btn-call{font-size:.85rem;padding:.45rem .75rem}.nav-in{gap:.5rem}}

/* ---------- Preis-Finder: Fortschritt, Auswahl, Preis ---------- */
.stepper{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
.stepper li{border-top:3px solid var(--line-strong);padding-top:.6rem;min-width:0}
.stepper li.done{border-top-color:var(--text)}
.stepper li.now{border-top-color:var(--accent)}
.stepper a,.stepper div{display:block;text-decoration:none;min-width:0}
.stepper b{display:block;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stepper li.now b,.stepper li.done b{color:var(--text)}
.stepper span{display:block;font-size:.95rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.5em}
.stepper a:hover span{text-decoration:underline;text-underline-offset:3px}
.chip.muted strong{color:var(--muted)}
.pricerows{display:grid;gap:1rem;max-width:900px}
.pricerow{display:grid;gap:1.2rem;align-items:stretch}
.pricerow-staff{grid-template-columns:minmax(0,1fr) 230px}
.pricerow-actions{display:grid;gap:.5rem;align-content:start}
.pricerow-actions .btn{width:100%}
@media (max-width:760px){.pricerow-staff{grid-template-columns:1fr}}
.pricecard{background:var(--navy);color:var(--on-navy);border-radius:var(--r-box);padding:1.6rem 1.7rem;display:grid;gap:.9rem;align-content:center}
.pricecard-top{display:flex;justify-content:space-between;align-items:center;gap:1.2rem}
.pricecard-left{display:grid;gap:.3rem}
.pricecard-right{display:grid;gap:.2rem;text-align:right;flex-shrink:0}
.pricecard .q{color:var(--on-navy);font-weight:500;line-height:1.35}
.pricecard .amount{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:600;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.1}
.pricecard .incl{color:var(--on-navy-muted);font-size:.9rem}
.pricecard .time{color:var(--accent);font-size:.9rem;font-weight:600}
.pricecard .btn-primary{width:100%}
@media (max-width:520px){.pricecard-top{flex-direction:column;align-items:flex-start}.pricecard-right{text-align:left}}
.note-inline{margin-top:1.2rem;max-width:62ch;color:var(--muted);font-size:.95rem}
.btn-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}
.askbox{max-width:620px;padding:1.5rem 0;border-top:1px solid var(--line-strong)}
@media (max-width:900px){
  .stepper{grid-template-columns:repeat(5,1fr);gap:.3rem}
  .stepper b{font-size:.62rem;letter-spacing:.02em}.stepper span{display:none}
}
.pricenote{max-width:var(--maxw);margin:0 auto 1.5rem;padding:1rem 1.5rem;background:var(--tint-yellow);border-left:3px solid var(--accent);color:var(--text)}
.pricenote a{font-weight:600}

/* ---------- Vollbreite Karte (lädt erst nach Klick, DSGVO) ---------- */
.mapband{border-top:1px solid var(--line)}
.map-frame{position:relative;height:min(62vh,520px);min-height:340px;background:var(--bg-2)}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-placeholder{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.7rem;text-align:center;padding:1.5rem;
  background:repeating-linear-gradient(0deg,transparent 0 47px,var(--line) 47px 48px),repeating-linear-gradient(90deg,transparent 0 47px,var(--line) 47px 48px),var(--bg-2)}
.map-placeholder strong{font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.map-placeholder span{color:var(--muted)}
.map-actions{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:.6rem}
.map-note{font-size:.85rem;color:var(--muted);max-width:44ch}

/* ---------- Kontakt-Seite: Vollbild-Karte mit Infokarte in der Ecke ---------- */
.contact-map{position:relative;height:calc(100dvh - var(--nav-h));min-height:640px}
.contact-map .map-frame{position:absolute;inset:0;height:auto;min-height:0}
.contact-map .map-placeholder{padding-left:460px}
.contact-card{position:absolute;z-index:3;top:1.8rem;left:max(1.5rem,calc((100vw - var(--maxw)) / 2 + 1.5rem));width:min(400px,calc(100% - 3rem));max-height:calc(100% - 3.6rem);overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-box);padding:1.5rem 1.6rem;box-shadow:0 24px 60px -24px rgba(10,20,39,.45)}
.contact-card h1{font-size:1.9rem;margin-bottom:.9rem}
.cc-block{padding:.9rem 0;border-top:1px solid var(--line)}
.cc-block h2{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.5rem}
.contact-card address{font-style:normal}
.cc-tel{display:block;font-size:1.55rem;font-weight:600;letter-spacing:-.02em;text-decoration:none}
.cc-tel:hover,.cc-line:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.cc-line{display:block;margin-top:.35rem;color:var(--text);text-decoration:none}
.contact-card .hours{color:var(--text)}
.cc-actions{display:flex;gap:.6rem;flex-wrap:wrap;padding-top:1rem;border-top:1px solid var(--line)}
@media (max-width:900px){
  .contact-map{height:auto;min-height:0}
  .contact-map .map-frame{position:relative;height:55vh;min-height:320px}
  .contact-map .map-placeholder{padding-left:1.5rem}
  .contact-card{position:relative;top:auto;left:auto;width:auto;max-height:none;margin:-3rem 1rem 2rem;box-shadow:0 18px 40px -20px rgba(10,20,39,.4)}
}
.stepper.four{grid-template-columns:repeat(4,1fr)}
.stepper.four span{display:block!important}
@media (max-width:900px){.stepper.four b{font-size:.7rem;letter-spacing:.02em}.stepper.four span{font-size:.8rem}}

/* Hero-Animation: kaputtes Smartphone dreht sich, Zeit läuft von 1 bis 30 Minuten, am Ende repariert */
.fixer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.8rem;align-items:center}
.fixfig{margin:0;display:grid;justify-items:center;gap:.7rem;width:210px}
.phone3d{perspective:1000px;width:170px;height:340px}
.ph{position:relative;width:100%;height:100%;transform-style:preserve-3d;--crack:1;filter:drop-shadow(0 18px 18px rgba(10,27,54,.28))}
.ph svg{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ph .back{transform:rotateY(180deg)}
.ph .crack{opacity:var(--crack)}
.ph .okscr{opacity:calc(1 - var(--crack))}
.fixtime{display:flex;align-items:baseline;gap:.35rem;font-variant-numeric:tabular-nums;color:var(--text)}
.fixtime strong{font-size:3rem;font-weight:600;letter-spacing:-.03em;line-height:1;min-width:2ch;text-align:right}
.fixtime span{font-size:.95rem;color:var(--muted);font-weight:500}
.fixfig figcaption{font-size:.82rem;font-weight:500;color:var(--muted);text-align:center;letter-spacing:.02em;transition:color .3s}
.fixfig.done figcaption{color:var(--text);font-weight:600;box-shadow:0 2px 0 var(--accent)}
.fixfig.done .ph{animation:fixpop .45s var(--ease)}
@keyframes fixpop{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
@media (max-width:900px){.fixer{grid-template-columns:1fr;justify-items:start;gap:1.2rem}.fixfig{grid-auto-flow:column;grid-template-columns:auto auto;width:auto;gap:1rem;justify-items:start;align-items:center}.fixfig figcaption{grid-column:1/-1;text-align:left}.phone3d{width:90px;height:180px}.fixtime strong{font-size:2rem}}
.dot:first-child[aria-current="true"]::after{animation-duration:8s}
.fixer .panel{padding:1.4rem}.fixer .bignum{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .5rem}.fixer .bignum strong{font-size:clamp(2.2rem,3.4vw,3rem)}.fixer .bignum span{font-size:1.1rem}

/* ---------- Terminbuchung ---------- */
.terminbox{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem 5rem;display:grid;gap:1.6rem}
.terminbox h2{font-size:1.1rem;font-weight:600;margin:0 0 .9rem;letter-spacing:-.01em}
.termin-art{display:grid;gap:.15rem;padding:1rem 1.2rem;background:var(--navy);color:var(--on-navy);border-radius:var(--r-box);max-width:560px}
.termin-art span{font-size:.8rem;color:var(--on-navy-muted)}.termin-art strong{font-weight:600}.termin-art em{font-style:normal;color:var(--accent);font-weight:600}
.tgrid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:2.5rem;align-items:start}
.tcal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.tcal-head a{padding:.3rem .8rem;border:1px solid var(--line-strong);border-radius:var(--r-ui);text-decoration:none}
.tcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.tcal-grid .wd{font-size:.75rem;color:var(--muted);text-align:center;padding:.2rem 0}
.tcal-grid .day{display:grid;place-items:center;aspect-ratio:1;border-radius:var(--r-ui);font-variant-numeric:tabular-nums;text-decoration:none}
.tcal-grid .day.off{color:#b4bccb}
.tcal-grid .day.free{background:var(--tint-blue);font-weight:600;color:var(--text)}
.tcal-grid .day.free:hover{background:var(--accent)}
.tcal-grid .day.sel{background:var(--navy);color:#fff}
.tdate{font-weight:600;margin-bottom:.8rem}
.slotlist{display:flex;flex-wrap:wrap;gap:.5rem}
.slot{padding:.65rem 1.1rem;border:1px solid var(--line-strong);border-radius:var(--r-ui);text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums;min-width:5rem;text-align:center}
.slot:hover{border-color:var(--text)}.slot.sel{background:var(--accent);border-color:var(--accent)}
.tform{max-width:760px;padding:1.6rem;border:1px solid var(--line);border-radius:var(--r-box);background:var(--bg-2)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:1rem}
.fgrid label{display:grid;gap:.3rem;font-size:.9rem;font-weight:500}.fgrid .wide{grid-column:1/-1}
.fgrid input,.fgrid textarea{font:inherit;padding:.65rem .8rem;border:1px solid var(--line-strong);border-radius:var(--r-ui);background:#fff;width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tcheck{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;margin-bottom:.8rem}.tcheck input{margin-top:.3rem}
.terminbox .small{font-size:.85rem;margin-bottom:1rem}
.okbox .big{font-size:1.4rem;font-weight:600}
.errbox{border-color:#c0392b}
@media (max-width:820px){.tgrid{grid-template-columns:1fr;gap:1.6rem}.fgrid{grid-template-columns:1fr}}
.terminbox .kbox{padding:1.4rem;border:1px solid var(--line);border-radius:var(--r-box)}.terminbox .kbox + .kbox{padding-left:1.4rem;border-left:1px solid var(--line)}

.pricecard .btn-sm{margin-top:.9rem;padding:.55rem 1rem;font-size:.9rem}
.staffadd{margin-top:.9rem;padding-top:.8rem;border-top:1px dashed var(--line-strong);display:grid;gap:.5rem}
.staffadd span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.staffadd select{font:inherit;font-size:.85rem;padding:.45rem;border:1px solid var(--line-strong);border-radius:var(--r-ui);max-width:100%}
.staffadd .btn{white-space:normal}
.pricecard .btn-line,.pricecard .staffadd .btn{color:#fff;border-color:rgba(255,255,255,.4);background:transparent}.pricecard .btn-line:hover{border-color:#fff}
.pricecard .staffadd{border-top-color:rgba(255,255,255,.25)}.pricecard .staffadd span{color:var(--on-navy-muted)}.pricecard .staffadd select{background:#fff;color:var(--text)}

.staff-lager-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.95rem;padding:.6rem .8rem;border:1px dashed var(--line-strong);border-radius:var(--r-ui)}
.staff-lager-row.leer{border-color:#e8b4b0;color:#b3261e}
.staff-lager-row.niedrig{border-color:#e8d2a0;color:#9a6b00}

.btn-wa{background:#25d366;color:#06361b;border-color:#25d366}.btn-wa:hover{background:#3ee07c}
.btn-red{background:#fdecec;color:#b42323;border-color:#f3b8b8}.btn-red:hover{background:#fbdada;border-color:#e58f8f}

.btn-sm{padding:.4rem .9rem;font-size:.85rem}
.lageredit{display:flex;align-items:center}
.lageredit summary{list-style:none;cursor:pointer}
.lageredit summary::-webkit-details-marker{display:none}
.lageredit[open] summary{display:none}
.lageredit-form{display:flex;gap:.4rem;align-items:center}
.lageredit-form input[type=number]{width:4.5rem;padding:.4rem .5rem;border:1px solid var(--line-strong);border-radius:var(--r-ui);font:inherit}

@media (max-width:640px){:root{--nav-h:68px}.logo-mark{width:38px;height:38px}.logo-text{font-size:1.3rem}.logo-text small{font-size:.62rem;letter-spacing:.12em}}

.foot-logo{display:inline-block;margin-top:1.1rem}.foot-logo img{display:block;width:auto;height:42px}
.foot-by{font-size:.82rem;color:var(--muted);margin-top:.5rem}

.pricecard .amount.ask{font-size:clamp(1.6rem,3.4vw,2.2rem);letter-spacing:-.02em}