/* REMOCOM Badservice – Entwurf · Sebastian Körfer */
:root{
  --ink:#2E3135;          /* Anthrazit (Masterplan) */
  --ink-soft:#4e545c;
  --muted:#6d747d;
  --line:#e2e7ec;
  --bg:#ffffff;
  --bg-soft:#F4F6F8;      /* Hellgrau (Masterplan) */
  --blue:#0069b4;         /* REMOCOM Blau (Logo/Dachmarke) */
  --blue-ink:#005593;     /* dunkler für Text auf Weiss */
  --blue-soft:#e8f1f9;
  --care:#3f9c4a;         /* Care Gruen */
  --care-soft:#ecf6ed;
  --bad:#f0b400;          /* Badservice Gelb */
  --bad-soft:#fdf5e0;
  --orange:#0069b4;       /* Primaer-CTA in Markenblau */
  --orange-dark:#005593;
  --r:4px;
  --shadow:0 14px 44px rgba(22,28,35,.10);
  --shadow-soft:0 6px 22px rgba(22,28,35,.07);
  --wrap:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip;overscroll-behavior-x:none;max-width:100%}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;font-size:16.5px}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',sans-serif;line-height:1.14;font-weight:800;letter-spacing:-.02em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.acc{color:var(--blue)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:16px;padding:15px 28px;border-radius:6px;border:0;transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn-o{background:var(--orange);color:#fff;box-shadow:0 8px 24px rgba(0,105,180,.30)}
.btn-o:hover{background:var(--orange-dark)}
.btn-d{background:var(--ink);color:#fff}
.btn-d:hover{background:#31363e}
.btn-g{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.38);backdrop-filter:blur(8px)}
.btn-g:hover{background:rgba(255,255,255,.24)}
.hero .btn-g{background:rgba(46,49,53,.07);color:var(--ink);border:0;backdrop-filter:none}
.hero .btn-g:hover{background:rgba(46,49,53,.13)}
.btn-w{width:100%}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;padding:18px 0;transition:background .3s ease, box-shadow .3s ease}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo-img{height:46px;width:auto;object-fit:contain}
.nav .lw{display:none}
.nav .ld{display:block}
.nav.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding:12px 0}

.nav-menu{display:flex;gap:30px;align-items:center}
.nav-menu a{font-weight:600;font-size:15.5px;color:var(--ink);opacity:.9;transition:opacity .15s}
.nav-menu a:hover{opacity:1}
.nav.solid .nav-menu a{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-tel{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;color:var(--ink)}
.nav.solid .nav-tel{color:var(--ink)}
.nav-burger{display:none;background:none;border:0;color:var(--ink);padding:6px}
.nav.solid .nav-burger{color:var(--ink)}

/* Unterseiten haben einen dunklen Hero (.phero). Dort muessen Logo und
   Nav-Links hell sein, solange die Nav noch transparent ueber dem Hero
   liegt. Sobald sie beim Scrollen weiss wird (.solid), gelten wieder
   die dunklen Farben oben. Die Startseite hat einen hellen Hero und
   bleibt davon unberuehrt. */
body:has(.phero) .nav:not(.solid) .nav-menu a,
body:has(.phero) .nav:not(.solid) .nav-tel,
body:has(.phero) .nav:not(.solid) .nav-burger,
body.dark-hero .nav:not(.solid) .nav-menu a,
body.dark-hero .nav:not(.solid) .nav-tel,
body.dark-hero .nav:not(.solid) .nav-burger{color:#fff}
body:has(.phero) .nav:not(.solid) .lw,
body.dark-hero .nav:not(.solid) .lw{display:block}
body:has(.phero) .nav:not(.solid) .ld,
body.dark-hero .nav:not(.solid) .ld{display:none}
.nav-burger .ic-x{display:none}
.nav.menu-open .nav-burger .ic-bars{display:none}
.nav.menu-open .nav-burger .ic-x{display:block}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:clip;background:#eef2f5;padding:130px 0 90px}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(248,250,252,.97) 0%,rgba(248,250,252,.93) 34%,rgba(248,250,252,.62) 58%,rgba(248,250,252,.20) 82%,rgba(248,250,252,.06) 100%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center}
.hero-tx{color:var(--ink);min-width:0}
.hf{min-width:0}
.hero-h1{font-size:clamp(2rem,2.85vw,2.6rem);color:var(--ink)}
.hero-h1 .hl{display:block;white-space:nowrap}
.hero-sub{margin:22px 0 26px;font-size:18px;color:var(--ink-soft);max-width:520px}
.hero-tr{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:30px}
.hero-tr span{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ink)}
.hero-tr svg{color:var(--blue)}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-note{margin-top:26px;font-size:14.5px;color:rgba(255,255,255,.62)}

/* ---------- Hero-Konfigurator ---------- */
.hf{background:#fff;border-radius:5px;box-shadow:0 30px 80px rgba(0,0,0,.38);overflow:hidden}
.hf-top{padding:26px 30px 0}
.hf-top h2{font-size:21px}
.hf-top p{color:var(--muted);font-size:14.5px;margin-top:3px}
.hf-bar{display:flex;gap:6px;margin-top:16px}
.hf-bar i{height:4px;flex:1;background:var(--line);border-radius:99px;transition:background .3s}
.hf-bar i.on{background:var(--blue)}
.hf-body{padding:20px 30px 28px}
.hf-step{display:none}
.hf-step.on{display:block;animation:hfIn .34s ease}
@keyframes hfIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.hf-q{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:17.5px;margin-bottom:14px}
.hf-tiles{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:9px}
.hf-tile{display:flex;flex-direction:row;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:4px;overflow:hidden;padding:9px 12px 9px 9px;text-align:left;transition:border-color .16s, box-shadow .16s, transform .16s}
.hf-tile:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.hf-tile.sel{border-color:var(--blue);box-shadow:0 0 0 2.5px var(--blue-soft)}
.hf-tile .tim{display:block;width:58px;height:58px;aspect-ratio:1;object-fit:cover;border-radius:3px;flex-shrink:0}
.hf-tile .tbd{display:block;flex:1;min-width:0}
.hf-tile .ttl{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:14.5px}
.hf-tile .tds{display:block;font-size:12.3px;color:var(--muted);line-height:1.4;margin-top:2px}
.hf-pills{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hf-pill{border:1.5px solid var(--line);background:#fff;border-radius:4px;padding:14px 16px;font-weight:600;font-size:15px;text-align:left;transition:border-color .16s, background .16s}
.hf-pill:hover{border-color:var(--blue)}
.hf-pill.sel{border-color:var(--blue);background:var(--blue-soft)}
.hf-f{margin-bottom:13px}
.hf-l{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.hf-in,.hf-ta,.hf-sel{width:100%;border:1.5px solid var(--line);border-radius:3px;padding:12px 14px;font-family:inherit;font-size:15.5px;background:#fbfcfd;transition:border-color .15s}
.hf-in:focus,.hf-ta:focus,.hf-sel:focus{outline:none;border-color:var(--blue);background:#fff}
.hf-ta{min-height:84px;resize:vertical}
.hf-err{display:none;color:#d5402b;font-size:13.5px;margin-top:5px}
.hf-in.bad,.hf-ta.bad{border-color:#d5402b}
.hf-nav{display:flex;gap:12px;margin-top:16px}
.hf-back{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:var(--muted);font-weight:600;font-size:14.5px;padding:0 6px}
.hf-back:hover{color:var(--ink)}
.hf-note{font-size:12.8px;color:var(--muted);margin-top:12px}
.hf-hp{position:absolute;left:-9999px;opacity:0}

/* ---------- Sections allgemein ---------- */
.sec{padding:104px 0}
.sec-soft{background:var(--bg-soft)}
.sec-dark{background:var(--ink);color:#fff}
.sh{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-bottom:56px}
.sh h2{font-size:clamp(1.9rem,2.9vw,2.7rem)}
.sh-r{padding-top:6px}
.sh-r p{color:var(--ink-soft);font-size:17px}
.sec-dark .sh-r p{color:rgba(255,255,255,.78)}
.sh-fact{display:flex;align-items:center;gap:10px;margin-top:18px;font-weight:700;font-size:15.5px;color:var(--blue-ink)}
.sec-dark .sh-fact{color:var(--blue)}
.sh-c{text-align:center;max-width:720px;margin:0 auto 56px}
.sh-c h2{font-size:clamp(1.9rem,2.9vw,2.7rem)}
.sh-c p{color:var(--ink-soft);font-size:17px;margin-top:14px}
.sec-dark .sh-c p{color:rgba(255,255,255,.78)}

/* ---------- Trust ---------- */
.trust{position:relative;z-index:5;margin-top:-58px}
.trust-g{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:4px;box-shadow:var(--shadow)}
.trust-i{padding:32px 16px;text-align:center;border-right:1px solid var(--line)}
.trust-i:last-child{border-right:0}
.trust-n{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(2rem,3.4vw,2.7rem);color:var(--ink);line-height:1}
.trust-n em{font-style:normal;color:var(--blue)}
.trust-l{font-size:14.5px;color:var(--muted);margin-top:8px}

/* ---------- Leistungen ---------- */
.svc{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.svc-c{position:relative;border-radius:var(--r);overflow:hidden;min-height:340px;display:flex;align-items:flex-end;grid-column:span 2}
.svc-c.big{grid-column:span 3;min-height:420px}
.svc-c.wide{grid-column:span 6;min-height:280px}
.svc-c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.svc-c:hover img{transform:scale(1.055)}
.svc-c::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,20,25,.82) 0%,rgba(16,20,25,.28) 46%,rgba(16,20,25,.05) 70%);transition:background .4s}
.svc-b{position:relative;z-index:2;padding:26px;color:#fff;transform:translateY(8px);transition:transform .4s ease}
.svc-c:hover .svc-b{transform:none}
.svc-b h3{font-size:22px;margin-bottom:6px}
.svc-b p{font-size:14.8px;color:rgba(255,255,255,.85);max-width:420px}
.svc-go{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-weight:700;font-size:14.5px;color:var(--blue);opacity:0;transform:translateY(6px);transition:opacity .35s ease, transform .35s ease}
.svc-c:hover .svc-go{opacity:1;transform:none}

/* ---------- Signature: Plan/Gebaut-Slider ---------- */
.cmp{display:grid;grid-template-columns:1.25fr .75fr;gap:52px;align-items:center}
.ba{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/10;user-select:none;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-top{clip-path:inset(0 calc(100% - var(--p,50%)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--p,50%);width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 14px rgba(0,0,0,.35)}
.ba-grip{position:absolute;top:50%;left:var(--p,50%);transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;gap:3px;color:var(--ink);cursor:grab;touch-action:none}
.ba-grip:active{cursor:grabbing}
.ba-cap{position:absolute;bottom:14px;font-size:13px;font-weight:700;padding:6px 12px;border-radius:3px;background:rgba(16,20,25,.72);color:#fff;backdrop-filter:blur(6px)}
.ba-cap.l{left:14px}
.ba-cap.r{right:14px}
.cmp-tx h2{font-size:clamp(1.9rem,2.8vw,2.5rem);margin-bottom:18px}
.cmp-tx p{color:var(--ink-soft);margin-bottom:14px}
.cmp-pts{margin:22px 0 28px;display:grid;gap:12px}
.cmp-pts div{display:flex;gap:11px;align-items:flex-start;font-size:15.5px}
.cmp-pts svg{color:var(--blue);flex-shrink:0;margin-top:3px}

/* ---------- Ablauf / Badplanung ---------- */
.pr{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.pr-stage{position:sticky;top:104px;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3.4;box-shadow:var(--shadow)}
.pr-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease}
.pr-stage img.on{opacity:1}
.pr-cap{position:absolute;left:16px;bottom:16px;z-index:2;background:rgba(255,255,255,.94);border-radius:4px;padding:10px 16px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:15px;box-shadow:var(--shadow-soft)}
.pr-steps{display:grid;gap:10px}
.pr-s{display:flex;gap:18px;text-align:left;background:none;border:1.5px solid transparent;border-radius:var(--r);padding:20px 22px;transition:background .2s, border-color .2s}
.pr-s:hover{background:#fff}
.pr-s.on{background:#fff;border-color:var(--line);box-shadow:var(--shadow-soft)}
.pr-n{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:15px;width:40px;height:40px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--blue-soft);color:var(--blue-ink);transition:background .2s,color .2s}
.pr-s.on .pr-n{background:var(--blue);color:#fff}
.pr-tx b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:17.5px;margin-bottom:4px}
.pr-tx span{font-size:15px;color:var(--ink-soft)}

/* ---------- Referenzen (dunkel) ---------- */
.ref{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ref-c{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/3.6}
.ref-c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.ref-c:hover img{transform:scale(1.06)}
.ref-c::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,13,17,.78),rgba(10,13,17,.03) 55%)}
.ref-b{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px;color:#fff}
.ref-b b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:18px}
.ref-b span{font-size:14px;color:rgba(255,255,255,.75)}

/* ---------- Vertrauen ---------- */
.vt{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}
.vt-med{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.vt-med img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/4.6}
.vt-quote{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(255,255,255,.95);border-radius:4px;padding:16px 20px;font-size:14.8px;box-shadow:var(--shadow-soft)}
.vt-quote b{font-family:'Plus Jakarta Sans',sans-serif}
.vt-g{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px;margin-top:30px}
.vt-i{display:flex;gap:13px;padding:13px 0;align-items:flex-start}
.vt-ic{flex-shrink:0;width:44px;height:44px;border-radius:4px;background:var(--blue-soft);color:var(--blue-ink);display:flex;align-items:center;justify-content:center}
.vt-tx b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:16px;margin-bottom:3px}
.vt-tx span{font-size:14.5px;color:var(--ink-soft)}

/* ---------- Über uns ---------- */
.ab{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.ab-tx h2{font-size:clamp(1.9rem,2.8vw,2.5rem);margin-bottom:20px}
.ab-tx p{color:var(--ink-soft);margin-bottom:15px}
.ab-quote{font-family:'Plus Jakarta Sans',sans-serif;font-size:19.5px;font-weight:700;line-height:1.5;color:var(--ink);margin:24px 0}
.ab-st{display:flex;gap:38px;margin-top:26px;flex-wrap:wrap}
.ab-st b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:26px;color:var(--blue-ink)}
.ab-st span{font-size:14px;color:var(--muted)}
.ab-med{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.ab-med img{width:100%;aspect-ratio:4/4.2;object-fit:cover}

/* ---------- Bewertungen ---------- */
.gb{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:44px;flex-wrap:wrap}
.gb b{white-space:nowrap}
.gb-st{color:#f5a623;font-size:22px;letter-spacing:2px}
.gb b{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px}
.gb span{color:var(--muted);font-size:15px}
.bw{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bw.bw-2{grid-template-columns:repeat(2,1fr);max-width:880px;margin:0 auto}
.bw-c{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column}
.bw-st{color:#f5a623;letter-spacing:2px;font-size:15px;margin-bottom:14px}
.bw-c p{font-size:15.3px;color:var(--ink-soft);flex:1}
.bw-w{display:flex;align-items:center;gap:11px;margin-top:18px}
.bw-av{width:40px;height:40px;border-radius:50%;background:var(--blue-soft);color:var(--blue-ink);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif}
.bw-w b{font-size:14.8px}
.bw-w span{display:block;font-size:12.8px;color:var(--muted)}

/* ---------- FAQ ---------- */
.fqw{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.fq-l h2{font-size:clamp(1.9rem,2.8vw,2.4rem);margin-bottom:16px}
.fq-l p{color:var(--ink-soft)}
.fq-call{display:inline-flex;align-items:center;gap:13px;margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:15px 20px;box-shadow:var(--shadow-soft)}
.fq-call .ic{width:42px;height:42px;border-radius:4px;background:var(--blue-soft);color:var(--blue-ink);display:flex;align-items:center;justify-content:center}
.fq-call b{display:block;font-size:16px}
.fq-call small{color:var(--muted);font-size:13px}
.fq-i{border-bottom:1px solid var(--line)}
.fq-q{width:100%;background:none;border:0;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:17.5px;padding:22px 4px;color:var(--ink)}
.fq-p{position:relative;flex-shrink:0;width:22px;height:22px}
.fq-p::before,.fq-p::after{content:"";position:absolute;background:var(--blue);border-radius:2px;transition:transform .3s}
.fq-p::before{left:2px;right:2px;top:10px;height:2.5px}
.fq-p::after{top:2px;bottom:2px;left:10px;width:2.5px}
.fq-i.open .fq-p::after{transform:scaleY(0)}
.fq-a{max-height:0;overflow:hidden;transition:max-height .38s ease}
.fq-a p{padding:0 40px 22px 4px;color:var(--ink-soft);font-size:15.5px}

/* ---------- CTA dark ---------- */
.cta{position:relative;padding:120px 0;overflow:hidden;background:var(--ink)}
.cta-bg{position:absolute;inset:0}
.cta-bg img{width:100%;height:100%;object-fit:cover;opacity:.38}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,20,25,.9),rgba(16,20,25,.55))}
.cta-in{position:relative;z-index:2;color:#fff;max-width:640px}
.cta-in h2{font-size:clamp(2rem,3vw,2.8rem);color:#fff}
.cta-in p{margin:18px 0 30px;color:rgba(255,255,255,.82);font-size:17.5px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Kontakt ---------- */
.kt{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.kt-info h2{font-size:clamp(1.9rem,2.8vw,2.4rem);margin-bottom:14px}
.kt-info>p{color:var(--ink-soft);margin-bottom:26px}
.kt-rows{display:grid;gap:10px;margin-bottom:28px}
.kt-r{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:15px 18px;transition:box-shadow .2s}
a.kt-r:hover{box-shadow:var(--shadow-soft)}
.kt-ic{flex-shrink:0;width:42px;height:42px;border-radius:4px;background:var(--blue-soft);color:var(--blue-ink);display:flex;align-items:center;justify-content:center}
.kt-r b{display:block;font-size:15.5px}
.kt-r span{font-size:14.5px;color:var(--ink-soft)}
.kt-map{position:relative;display:block;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-soft)}
.kt-map img{width:100%;aspect-ratio:16/9;object-fit:cover}
.kt-map-b{position:absolute;right:12px;bottom:12px;background:#fff;border-radius:3px;padding:7px 13px;font-size:13px;font-weight:700;box-shadow:var(--shadow-soft)}
.kt-map-c{position:absolute;left:8px;bottom:6px;font-size:10px;color:#555}
.kt-form{background:#fff;border:1px solid var(--line);border-radius:4px;padding:34px;box-shadow:var(--shadow)}
.kt-form h3{font-size:21px;margin-bottom:6px}
.kt-form>p{color:var(--muted);font-size:14.5px;margin-bottom:20px}
.kt-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

/* ---------- Footer ---------- */
.ft{background:var(--ink);color:rgba(255,255,255,.78);padding:70px 0 34px}
.ft-g{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:44px;margin-bottom:44px}
.ft-lg{height:52px;width:auto;object-fit:contain;margin-bottom:18px}
.ft-g p{font-size:14.8px}
.ft h4{color:#fff;font-size:15.5px;margin-bottom:16px}
.ft ul{list-style:none;display:grid;gap:9px;font-size:14.8px}
.ft a:hover{color:#fff}
.ft-seo{border-top:1px solid rgba(255,255,255,.12);padding:22px 0;font-size:13px;color:rgba(255,255,255,.45)}
.ft-seo a{color:inherit}
.ft-seo a:hover{color:#fff}
.ft-bot{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.8px;color:rgba(255,255,255,.55)}
.ft-bot .links{display:flex;gap:22px}
.ft-bot a:hover{color:#fff}

/* ---------- Sticky Call ---------- */
.sticky-call{position:fixed;right:22px;bottom:22px;z-index:80;display:inline-flex;align-items:center;gap:9px;background:var(--orange);color:#fff;font-weight:700;font-size:15px;padding:14px 22px;border-radius:99px;box-shadow:0 10px 30px rgba(0,105,180,.30)}

/* ---------- Reveal: Elemente fahren von links herein ---------- */
.rv{opacity:0;transform:translateX(-52px);transition:opacity .78s cubic-bezier(.16,.84,.3,1), transform .78s cubic-bezier(.16,.84,.3,1)}
.rv.in{opacity:1;transform:none}
.rv-r{transform:translateX(52px)}      /* Gegenstück: kommt von rechts herein */
.rv-u{transform:translateY(28px)}      /* nur dort, wo seitlich kein Platz ist */

/* Akzentlinie unter Überschriften wächst von links nach rechts */
.wipe{position:relative;padding-bottom:18px}
.wipe::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:74px;background:var(--blue);border-radius:2px;transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.16,.84,.3,1) .28s}
.wipe.in::after{transform:scaleX(1)}
.sh-c{position:relative}
.wipe-c{position:absolute;left:50%;bottom:-22px;margin-left:-37px;width:74px;height:3px;background:var(--blue);border-radius:2px;transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.16,.84,.3,1) .28s}
.rv.in .wipe-c{transform:scaleX(1)}

/* Hero-Einflug beim Laden, ebenfalls von links */
.hin{opacity:0;transform:translateX(-44px);animation:hinL .85s cubic-bezier(.16,.84,.3,1) forwards}
@keyframes hinL{to{opacity:1;transform:none}}
.hd1{animation-delay:.10s}.hd2{animation-delay:.22s}.hd3{animation-delay:.34s}.hd4{animation-delay:.46s}
.hf.hin{transform:translateX(44px);animation-name:hinR;animation-delay:.30s}
@keyframes hinR{to{opacity:1;transform:none}}


/* ---------- Einzugsgebiet ---------- */
.geo-sec{position:relative;overflow:hidden;background:#edf3f7}
.geo-sec::before{content:"";position:absolute;inset:0;background:url(/assets/karte-nuernberg.webp) center/cover no-repeat;opacity:.18;filter:grayscale(1) contrast(1.04)}
.geo-sec::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(237,243,247,.62) 0%,rgba(237,243,247,.93) 62%,rgba(237,243,247,.99) 100%)}
.geo-sec>.wrap{position:relative;z-index:2}
.geo{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.geo-c{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.geo-c:hover{transform:translateX(7px);border-color:var(--blue);box-shadow:var(--shadow)}
.geo-c.rv:hover{transform:translateX(7px)}
.geo-c b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:18px;margin-bottom:7px}
.geo-c span{font-size:14.8px;color:var(--ink-soft);flex:1}
.geo-c em{font-style:normal;display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-weight:700;font-size:14.5px;color:var(--blue-ink)}
.geo-note{margin-top:30px;font-size:15.2px;color:var(--ink-soft);max-width:960px}


/* ---------- Unterseiten: Kopfbereich ---------- */
.phero{position:relative;padding:184px 0 88px;background:var(--ink);overflow:hidden}
.phero-bg{position:absolute;inset:0}
.phero-bg img{width:100%;height:100%;object-fit:cover;opacity:.44}
.phero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(80deg,rgba(15,19,24,.9) 0%,rgba(15,19,24,.66) 52%,rgba(15,19,24,.34) 100%)}
.phero-in{position:relative;z-index:2;color:#fff;max-width:780px}
.phero h1{font-size:clamp(1.95rem,3.05vw,2.85rem);color:#fff}
.phero p{margin-top:20px;font-size:17.5px;color:rgba(255,255,255,.86);max-width:660px}
.crumb{font-size:13.5px;color:rgba(255,255,255,.6);margin-bottom:20px}
.crumb a:hover{color:#fff}
.crumb span{margin:0 7px;opacity:.5}
.phero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* ---------- Leistungs-Reihen ---------- */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;padding:60px 0;border-top:1px solid var(--line)}
.frow:first-of-type{border-top:0;padding-top:8px}
.frow-med{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.frow-med img{width:100%;aspect-ratio:4/3;object-fit:cover}
.frow h2{font-size:clamp(1.55rem,2.3vw,2.05rem);margin-bottom:14px}
.frow p{color:var(--ink-soft);margin-bottom:12px}
.frow ul{list-style:none;display:grid;gap:10px;margin:20px 0 24px}
.frow li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px}
.frow li svg{color:var(--blue);flex-shrink:0;margin-top:4px}
.frow.flip .frow-med{order:2}
.sec-soft .frow{border-top-color:#e0e5ea}

/* ---------- Galerie ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gal-c{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink);margin:0}
.gal-c img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.gal-c.wide{grid-column:span 2}
.gal-c.full{grid-column:span 3}
.gal-c.full img{aspect-ratio:16/6.4}
.gal-c.wide img{aspect-ratio:16/9.6}
.gal-c:hover img{transform:scale(1.05)}
.gal-c::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,13,17,.8),rgba(10,13,17,.02) 58%);pointer-events:none}
.gal-c figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px;color:#fff}
.gal-c figcaption b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:17px}
.gal-c figcaption span{font-size:13.8px;color:rgba(255,255,255,.76)}

/* ---------- Ortsseiten ---------- */
.loc-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.loc-chips a{background:#fff;border:1px solid var(--line);border-radius:99px;padding:9px 18px;font-size:14.5px;font-weight:600;transition:border-color .18s, transform .18s, color .18s}
.loc-chips a:hover{border-color:var(--blue);color:var(--blue-ink);transform:translateX(4px)}
.sec-soft .loc-chips a{background:#fff}
.loc-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.loc-f{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-soft)}
.loc-f b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:17px;margin-bottom:8px}
.loc-f span{font-size:15px;color:var(--ink-soft)}
.prose-wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.prose-med{position:sticky;top:112px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.prose-med img{width:100%;aspect-ratio:4/4.6;object-fit:cover}
.prose-note{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:14.6px;color:var(--muted)}
.prose{max-width:820px}
.prose h2{font-size:clamp(1.6rem,2.3vw,2.1rem);margin:44px 0 16px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-soft);margin-bottom:14px}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .hero-in{grid-template-columns:1fr;gap:44px}
  .hero-h1 .hl{white-space:normal}
  .hf{max-width:640px}
  .cmp,.pr,.vt,.ab,.fqw,.kt{grid-template-columns:1fr;gap:44px}
  .pr-stage{position:relative;top:0}
  .svc-c,.svc-c.big{grid-column:span 6;min-height:320px}
  .svc{grid-template-columns:repeat(6,1fr)}
  .ref{grid-template-columns:1fr 1fr}
  .bw{grid-template-columns:1fr 1fr}
  .ft-g{grid-template-columns:1fr 1fr}
  .geo{grid-template-columns:1fr 1fr}
  .frow{grid-template-columns:1fr;gap:32px}
  .frow.flip .frow-med{order:0}
  .gal{grid-template-columns:1fr 1fr}
  .gal-c.wide{grid-column:span 2}
.gal-c.full{grid-column:span 3}
.gal-c.full img{aspect-ratio:16/6.4}
  .loc-facts{grid-template-columns:1fr}
  .prose-wrap{grid-template-columns:1fr;gap:34px}
  .prose-med{position:relative;top:0}
  .prose-med img{aspect-ratio:16/9}
  .gal-c.full{grid-column:span 2}
  .gal-c.full img{aspect-ratio:16/8}
}
@media(max-width:760px){
  body{font-size:16px}
  .sec{padding:74px 0}
  .wrap{padding:0 20px}
  .nav{padding:14px 0}
  .nav-menu{position:fixed;inset:0;background:#fff;flex-direction:column;justify-content:center;gap:26px;display:none;z-index:95}
  .nav.menu-open .nav-menu{display:flex}
  .nav.menu-open{backdrop-filter:none;background:#fff}
  .nav-menu a{color:var(--ink) !important;font-size:21px}
  .nav-tel span{display:none}
  .nav-burger{display:block;position:relative;z-index:96}
  .hero{padding:122px 0 70px}
  /* Mobil laeuft der Text ueber die volle Breite: Overlay deckend halten */
  .hero-shade{background:linear-gradient(180deg,rgba(248,250,252,.96) 0%,rgba(248,250,252,.94) 62%,rgba(248,250,252,.86) 100%)}
  .hero-h1{font-size:1.72rem}
  .hero-sub{font-size:16.5px}
  .trust-n{font-size:1.75rem;white-space:nowrap}
  .hf-top,.hf-body{padding-left:20px;padding-right:20px}
  .hf-tiles{grid-template-columns:1fr}
  .hf-pills{grid-template-columns:1fr}
  .sh{grid-template-columns:1fr;gap:18px;margin-bottom:40px}
  .trust{margin-top:-40px}
  .trust-g{grid-template-columns:1fr 1fr}
  .trust-i{padding:24px 12px;border-right:0;border-bottom:1px solid var(--line)}
  .trust-i:nth-child(odd){border-right:1px solid var(--line)}
  .trust-i:nth-child(3),.trust-i:nth-child(4){border-bottom:0}
  .svc-c,.svc-c.big{min-height:280px}
  .ref{grid-template-columns:1fr}
  .ref-c{aspect-ratio:3/3}
  .bw{grid-template-columns:1fr}
  .vt-g{grid-template-columns:1fr}
  .kt-2{grid-template-columns:1fr}
  .kt-form{padding:26px 20px}
  .ft-g{grid-template-columns:1fr;gap:30px}
  .cta{padding:84px 0}
  .ba-grip{width:46px;height:46px}
  .sticky-call{right:16px;bottom:16px;padding:13px 18px}
  .geo{grid-template-columns:1fr}
  .phero{padding:140px 0 64px}
  .gal{grid-template-columns:1fr}
  .gal-c.wide{grid-column:span 1}
  .gal-c.full{grid-column:span 1}
  .gal-c.full img{aspect-ratio:4/3}
  .gal-c.wide img{aspect-ratio:4/3}
  .rv{transform:translateX(-26px)}
  .rv-r{transform:translateX(26px)}
  .rv-u{transform:translateY(22px)}
  .hin{transform:translateX(-24px)}
  .hf.hin{transform:translateX(24px)}
}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hin{opacity:1;transform:none;animation:none}
  .wipe::after,.wipe-c{transform:scaleX(1);transition:none}
  .geo-c:hover{transform:none}
  html{scroll-behavior:auto}
  .sticky-call{animation:none}
}

/* ==========================================================
   REMOCOM-eigene Komponenten
   ========================================================== */

/* ---------- Zwei Wege ---------- */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.way{background:#fff;border-radius:var(--r);padding:38px 36px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;border-top:4px solid var(--blue)}
.way-b{border-top-color:var(--ink);background:var(--bg-soft)}
.way-tag{display:inline-block;align-self:flex-start;background:var(--blue-soft);color:var(--blue-ink);font-weight:700;font-size:14px;padding:7px 14px;border-radius:3px;margin-bottom:16px}
.way-tag-b{background:rgba(46,49,53,.09);color:var(--ink)}
.way h3{font-size:25px;margin-bottom:12px}
.way p{color:var(--ink-soft);font-size:16px}
.way-l{list-style:none;margin:20px 0 26px;display:grid;gap:11px}
.way-l li{position:relative;padding-left:27px;font-size:15.5px}
.way-l li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:2px;background:var(--blue)}
.way-b .way-l li::before{background:var(--ink)}
.way .btn{align-self:flex-start;margin-top:auto}

/* ---------- Care ---------- */
.care-sec{background:var(--care-soft)}
.care-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.care-med{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.care-med img{width:100%;aspect-ratio:4/3.5;object-fit:cover}
.care-tx h2{font-size:clamp(1.9rem,2.8vw,2.5rem);margin-bottom:18px}
.care-tx p{color:var(--ink-soft);margin-bottom:14px}
.care-box{display:flex;align-items:center;gap:20px;background:#fff;border-radius:var(--r);padding:22px 26px;margin:24px 0;box-shadow:var(--shadow-soft);border-left:4px solid var(--care)}
.care-fig{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(1.5rem,2.4vw,2rem);color:var(--care);line-height:1;white-space:nowrap}
.care-fig-t{font-size:14.8px;color:var(--ink-soft)}
.care-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px}
.care-steps div{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600}
.care-steps b{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:#fff;color:var(--care);display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:var(--shadow-soft)}
.btn-care{background:var(--care);color:#fff;box-shadow:0 8px 24px rgba(63,156,74,.28)}
.btn-care:hover{background:#357f3e}

/* ---------- B2B-Hub ---------- */
.b2b{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.b2b-c{background:rgba(255,255,255,.055);border-radius:var(--r);padding:26px 28px;display:flex;flex-direction:column;transition:background .22s ease, transform .22s ease}
.b2b-c:hover{background:rgba(255,255,255,.1);transform:translateY(-4px)}
.b2b-c b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:18.5px;margin-bottom:8px;color:#fff}
.b2b-c span{font-size:14.8px;color:rgba(255,255,255,.72);flex:1}
.b2b-c em{font-style:normal;display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-weight:700;font-size:14.5px;color:var(--blue)}
.b2b-cta{background:var(--blue)}
.b2b-cta:hover{background:#0079cc}
.b2b-cta span{color:rgba(255,255,255,.88)}
.b2b-cta em{color:#fff}

/* ---------- Standortfinder ---------- */
.finder{background:#fff;border-radius:var(--r);padding:26px 32px;box-shadow:var(--shadow);margin-bottom:24px;border-top:4px solid var(--blue)}
.finder-l{display:block;font-weight:700;font-size:15px;margin-bottom:10px}
.finder-row{display:flex;gap:12px;flex-wrap:wrap}
.finder-in{flex:1;min-width:190px;border:1.5px solid var(--line);border-radius:3px;padding:14px 16px;font-family:inherit;font-size:16.5px;background:#fbfcfd;transition:border-color .15s}
.finder-in:focus{outline:none;border-color:var(--blue);background:#fff}
.finder-out{margin-top:20px;padding:20px 22px;border-radius:4px;display:grid;gap:7px}
.finder-out.ok{background:var(--blue-soft)}
.finder-out.off{background:var(--bad-soft)}
.finder-out b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:17px}
.finder-out span{font-size:15px;color:var(--ink-soft)}
.finder-row2{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.finder-go{display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-weight:700;font-size:15px;padding:11px 20px;border-radius:3px;margin-top:6px;transition:background .18s}
.finder-go:hover{background:var(--blue-ink)}
.finder-go.alt{background:rgba(0,105,180,.1);color:var(--blue-ink)}
.finder-go.alt:hover{background:rgba(0,105,180,.18)}

/* PLZ-Hinweis im Anfrage-Assistenten */
.plz-hit{margin-top:8px;font-size:14px;padding:10px 13px;border-radius:3px;line-height:1.5}
.plz-hit.ok{background:var(--blue-soft);color:var(--blue-ink);font-weight:600}
.plz-hit.off{background:var(--bad-soft);color:#7a5b00}

/* ---------- Standort-Karten ---------- */
.loc{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.loc-c{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.loc-c:hover{transform:translateY(-5px);border-color:var(--blue);box-shadow:var(--shadow)}
.loc-c b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:18px;margin-bottom:8px}
.loc-c span{font-size:14.6px;color:var(--ink-soft)}
.loc-c .loc-t{font-weight:700;color:var(--ink);margin-top:6px;flex:1}
.loc-c em{font-style:normal;display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-weight:700;font-size:14.5px;color:var(--blue-ink)}

/* ---------- Responsive fuer die REMOCOM-Teile ---------- */
@media(max-width:1080px){
  .ways{grid-template-columns:1fr}
  .care-in{grid-template-columns:1fr;gap:40px}
  .b2b{grid-template-columns:1fr 1fr}
  .loc{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .b2b{grid-template-columns:1fr}
  .loc{grid-template-columns:1fr}
  .way{padding:30px 24px}
  .care-steps{grid-template-columns:1fr}
  .care-box{flex-direction:column;align-items:flex-start;gap:10px}
  .finder{padding:24px 20px}
  .finder-row .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .loc-c:hover,.b2b-c:hover{transform:none}
}

/* ---------- Referenzlisten ---------- */
.reflist{background:#fff;border-radius:var(--r);padding:30px 34px;box-shadow:var(--shadow-soft);margin-bottom:20px}
.reflist h3{font-size:19px;margin-bottom:16px;color:var(--blue-ink)}
.reflist ul{list-style:none;columns:3;column-gap:34px}
.reflist li{font-size:15px;color:var(--ink-soft);padding:5px 0;break-inside:avoid}
@media(max-width:1080px){ .reflist ul{columns:2} }
@media(max-width:760px){ .reflist ul{columns:1} .reflist{padding:24px 20px} }

/* B2B-Karten auf hellem Grund (Care- und Standortseite) */
.b2b-light .b2b-c{background:#fff;box-shadow:var(--shadow-soft)}
.b2b-light .b2b-c:hover{background:#fff;box-shadow:var(--shadow)}
.b2b-light .b2b-c b{color:var(--ink)}
.b2b-light .b2b-c span{color:var(--ink-soft)}
.b2b-light .b2b-c em{color:var(--blue-ink)}

/* Kontaktkarten auf der Kontaktseite: E-Mail als Zeile */
.loc-c em{word-break:break-word}

/* Vier gleichwertige Karten: 2x2 statt 3+1 */
.b2b.b2b-4{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){ .b2b.b2b-4{grid-template-columns:1fr} }

/* ---------- Hintergrundbilder in Kacheln (Zwei Wege + B2B) ---------- */
/* Die Bilder sind Textur, kein Motiv: stark zurueckgenommen, damit die
   Schrift ihren Kontrast behaelt und die Karte ruhig bleibt. */
.way{position:relative;overflow:hidden;isolation:isolate}
.way-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.85;object-position:right bottom}
.way::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(118deg,rgba(255,255,255,.995) 0%,rgba(255,255,255,.99) 46%,rgba(255,255,255,.93) 66%,rgba(255,255,255,.60) 88%,rgba(255,255,255,.34) 100%)}
.way-b::before{background:linear-gradient(118deg,rgba(244,246,248,.995) 0%,rgba(244,246,248,.99) 46%,rgba(244,246,248,.93) 66%,rgba(244,246,248,.60) 88%,rgba(244,246,248,.34) 100%)}

.b2b-c{position:relative;overflow:hidden;isolation:isolate}
.b2b-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.85;object-position:right bottom}
.b2b-c::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(122deg,rgba(28,31,36,.985) 0%,rgba(28,31,36,.97) 44%,rgba(28,31,36,.90) 64%,rgba(28,31,36,.70) 86%,rgba(28,31,36,.52) 100%)}
.b2b-c:hover .b2b-bg{opacity:1}
.b2b-cta::before{background:linear-gradient(122deg,rgba(0,88,151,.985) 0%,rgba(0,95,163,.97) 44%,rgba(0,105,180,.90) 64%,rgba(0,105,180,.74) 86%,rgba(0,105,180,.58) 100%)}
/* Care-/Standort-Karten auf hellem Grund tragen keine Bilder */
.b2b-light .b2b-c::before{background:none}

/* ---------- Standortfinder mit Karte ---------- */
.locgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:stretch}
.map-holder{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-soft);box-shadow:var(--shadow-soft)}
.map-holder{display:flex;flex-direction:column}
.map-holder iframe{display:block;width:100%;flex:1;min-height:540px;border:0}
.map-consent{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;text-align:center;padding:30px;background:var(--bg-soft)}
/* hidden muss die display:flex-Regel schlagen, sonst bleibt das Overlay
   nach dem Klick auf "Karte laden" ueber der geladenen Karte liegen. */
.map-consent[hidden]{display:none}
.map-consent svg{color:var(--blue);opacity:.8}
.map-consent p{max-width:34em;font-size:15px;color:var(--ink-soft);line-height:1.55}
.map-consent a{font-size:14px;color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}

.loc-list{display:flex;flex-direction:column;gap:12px}
.loc-row{display:flex;gap:16px;align-items:flex-start;text-align:left;width:100%;background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--r);padding:20px 22px;cursor:pointer;transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease}
.loc-row:hover{box-shadow:var(--shadow);transform:translateX(4px)}
.loc-row.aktiv{border-color:var(--blue);box-shadow:var(--shadow)}
.loc-row.nearest{border-left-color:var(--care);background:var(--care-soft)}
.loc-row .lico{width:44px;height:44px;flex-shrink:0;border-radius:4px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center}
.loc-row .lico svg{width:21px;height:21px;color:var(--blue-ink)}
.loc-row.nearest .lico{background:#fff}
.loc-row.nearest .lico svg{color:var(--care)}
.loc-row .lbody{flex:1;min-width:0;display:block}
.loc-row .lhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:4px}
.loc-row .lhead b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:17.5px}
.loc-row .dist{font-weight:700;font-size:12.5px;color:var(--blue-ink);background:var(--blue-soft);padding:3px 9px;border-radius:3px}
.loc-row .nearest-tag{font-weight:700;font-size:12.5px;color:#fff;background:var(--care);padding:3px 9px;border-radius:3px}
.loc-row .ladr{display:block;font-size:14.8px;color:var(--ink-soft)}
.loc-row .lgeb{display:block;font-size:13.8px;color:var(--muted);margin-top:3px}
.loc-row .lrow{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:11px}
.loc-row .ltel{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:15px;color:var(--ink)}
.loc-row .ltel:hover{color:var(--blue-ink)}
.loc-row .route{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.8px;color:var(--blue-ink)}
.loc-row .route svg{width:14px;height:14px}
.loc-row .route:hover{color:var(--blue)}

@media(max-width:1080px){
  .locgrid{grid-template-columns:1fr}
  .map-holder iframe{height:380px}
}
@media(max-width:760px){
  .map-holder iframe{height:300px}
  .loc-row{padding:16px 18px;gap:13px}
  .loc-row:hover{transform:none}
  .finder-row .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){ .loc-row:hover{transform:none} }

/* ===== Ergaenzungen fuer die Bereichsarchitektur (Masterplan 3.0) ===== */

/* Breadcrumb-Trenner */
.crumb-s{color:var(--line);margin:0 9px;user-select:none}

/* Aktive Leistung in der Querverlinkung */
.svc-c.svc-cur{background:var(--blue-soft);box-shadow:inset 0 0 0 2px var(--blue-ink)}
.svc-c.svc-cur b{color:var(--blue-ink)}

/* Zusatzfragen im Anfrage-Assistenten */
.kt-extra{margin:2px 0 4px;padding:18px 18px 4px;background:rgba(0,105,180,.045);border-radius:var(--r)}
.kt-extra-h{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--blue-ink)}

/* Hinweis unter dem PLZ-Feld: zeigt den zustaendigen Standort */
.hf-hint{display:block;margin-top:6px;font-size:13.5px;color:var(--muted);min-height:18px}
.hf-hint.ok{color:var(--care);font-weight:600}

/* Hinweis unter der Ortsliste einer Standortseite */
.loc-note{margin:14px 0 0;font-size:14.5px;color:var(--muted);max-width:62ch}

/* Standortseite: Kontaktkarte neben der Ortsliste */
.std-g{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:26px;align-items:start;margin-top:34px}
.std-g .loc-f h3{font-size:18.5px;margin:0 0 16px}
.std-g .kt-rows{margin-bottom:18px}
.std-g .loc-list{display:block;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:26px;box-shadow:var(--shadow-soft)}
.std-g .loc-list h3{font-size:18.5px;margin:0 0 16px}
.std-g .loc-chips{display:flex;flex-wrap:wrap;gap:9px}
.std-g .loc-c{background:var(--bg-soft);border-radius:3px;padding:8px 14px;
  font-size:14.5px;font-weight:600;color:var(--ink-soft)}
@media(max-width:900px){.std-g{grid-template-columns:1fr}}

/* Vier gleichrangige Karten: 2x2 statt 3+1 */
.b2b.b2b-4{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.b2b.b2b-4{grid-template-columns:1fr}}

/* Freistehendes Zitat auf Zielgruppenseiten */
.zitat{max-width:820px;margin:0 auto;text-align:center;padding:8px 24px}
.zitat p{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(19px,2.1vw,25px);
  font-weight:700;line-height:1.46;color:var(--ink);margin:0 0 14px}
.zitat span{font-size:14.5px;color:var(--muted)}

/* ===== Dachmarke: Wortmarke in Nav und Footer ===== */
.nav-logo-img.dach{height:28px}
.ft-lg.dach{height:30px;width:auto}
@media(max-width:640px){.nav-logo-img.dach{height:22px}}

/* Bereichs-Kennung im Hero der beiden Bereichsseiten */
.phero-tag{display:inline-block;background:#fff;padding:10px 16px;border-radius:var(--r);margin-bottom:26px;line-height:0}
.phero-tag img{height:30px;width:auto;display:block}

/* ===== Ablauf-Schritte auf Unterseiten (ohne Bildbuehne) ===== */
.ablauf{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:8px}
.ablauf-s{padding:30px 28px 30px 0;border-top:1px solid var(--line)}
.ablauf-s+.ablauf-s{padding-left:28px;border-left:1px solid var(--line)}
.ablauf-n{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:42px;line-height:1;
  color:var(--blue);opacity:.28;margin-bottom:18px;letter-spacing:-.02em}
.ablauf-s b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:18px;margin-bottom:8px;color:var(--ink)}
.ablauf-s span{font-size:15.2px;line-height:1.6;color:var(--ink-soft)}
.ablauf.a5{grid-template-columns:repeat(5,1fr)}
.ablauf.a5 .ablauf-s{padding-right:20px}
@media(max-width:980px){
  .ablauf,.ablauf.a5{grid-template-columns:1fr 1fr}
  .ablauf-s+.ablauf-s{padding-left:0;border-left:0}
  .ablauf-s:nth-child(even){padding-left:28px;border-left:1px solid var(--line)}
}
@media(max-width:600px){
  .ablauf,.ablauf.a5{grid-template-columns:1fr}
  .ablauf-s:nth-child(even){padding-left:0;border-left:0}
  .ablauf-s{padding:22px 0}
  .ablauf-n{font-size:34px;margin-bottom:10px}
}

/* ===== Foerderung: zwei Spuren ===== */
.spuren{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.spur{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-soft);padding:34px 34px 30px;display:flex;flex-direction:column}
.spur.spur-b{background:var(--ink);color:#fff}
.spur-k{font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-ink);margin-bottom:12px}
.spur.spur-b .spur-k{color:rgba(255,255,255,.62)}
.spur h3{font-size:24px;line-height:1.22;margin:0 0 12px}
.spur p{font-size:15.5px;line-height:1.62;color:var(--ink-soft);margin:0 0 18px}
.spur.spur-b p{color:rgba(255,255,255,.8)}
.spur ul{list-style:none;padding:0;margin:0 0 24px;flex:1}
.spur li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.5}
.spur.spur-b li{border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.9)}
.spur li svg{flex-shrink:0;margin-top:3px;color:var(--care)}
.spur .btn{align-self:flex-start}
@media(max-width:860px){.spuren{grid-template-columns:1fr}}

/* Bestandssystem: Kennzahlen-Zeile */
.kenn{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:8px 0 0}
.kenn-i{padding:26px 24px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-soft)}
.kenn-n{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:38px;line-height:1;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
.kenn-n em{font-style:normal;color:var(--blue)}
.kenn-l{font-size:14.5px;color:var(--muted);line-height:1.45}
@media(max-width:860px){.kenn{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.kenn{grid-template-columns:1fr}}

/* Positionierung: drei Parteien, REMOCOM dazwischen */
.mitte{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:center;margin-top:8px}
.mitte-p{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-soft);padding:24px 22px}
.mitte-p b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:17px;margin-bottom:6px}
.mitte-p span{font-size:14.5px;color:var(--ink-soft);line-height:1.5}
.mitte-p.rc{background:var(--blue);color:#fff}
.mitte-p.rc b{color:#fff}
.mitte-p.rc span{color:rgba(255,255,255,.86)}
.mitte-a{color:var(--line)}
@media(max-width:860px){.mitte{grid-template-columns:1fr}.mitte-a{display:none}}

/* Geschaeftskunden-Segmente: Zeile mit Bild, abwechselnd */
.seg{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.seg:first-of-type{border-top:0;padding-top:8px}
.seg.flip .seg-med{order:2}
.seg-med{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/10}
.seg-med img{width:100%;height:100%;object-fit:cover;display:block}
.seg h3{font-size:26px;line-height:1.2;margin:0 0 12px}
.seg p{font-size:15.6px;line-height:1.62;color:var(--ink-soft);margin:0 0 14px}
.seg ul{list-style:none;padding:0;margin:0 0 20px}
.seg li{display:flex;gap:10px;align-items:flex-start;font-size:15px;padding:6px 0;line-height:1.5}
.seg li svg{flex-shrink:0;margin-top:3px;color:var(--blue)}
@media(max-width:860px){.seg,.seg.flip{grid-template-columns:1fr;gap:24px;padding:30px 0}.seg.flip .seg-med{order:0}}

/* =====================================================================
   Glas-Ebene (29.09.2026)
   Mattglas nur dort, wo ein Bild oder Inhalt dahinter liegt: Navigation,
   Trust-Leiste, Bildkacheln, Hero-Bedienelemente, Vergleichs-Labels.
   Kanten bleiben kantig, Kontur ueber eine innere Lichtkante statt Border.
   ===================================================================== */
:root{
  --glass-l:rgba(255,255,255,.66);
  --glass-d:rgba(18,22,27,.42);
  --glass-blur:saturate(180%) blur(22px);
  --glass-edge-l:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.35);
  --glass-edge-d:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.08);
  --ease-apple:cubic-bezier(.25,.1,.25,1);
}
h1,h2,.hero-h1{letter-spacing:-.022em}
h3{letter-spacing:-.012em}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* 1) Navigation beim Scrollen */
.nav.solid{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 8px 30px rgba(22,28,35,.05);
}

/* 2) Trust-Leiste schwebt als Glasplatte ueber dem Hero */
.trust-g{
  background:var(--glass-l)!important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge-l),0 24px 60px rgba(22,28,35,.12)!important;
  border-radius:6px;overflow:hidden;
}
.trust-i{border-right-color:rgba(46,49,53,.08)!important;border-bottom-color:rgba(46,49,53,.08)!important;background:transparent!important}

/* 3) Bildkacheln: Text auf einer Mattglas-Leiste statt auf dunklem Verlauf */
.svc-c{border-radius:6px;box-shadow:0 10px 34px rgba(22,28,35,.10);transition:transform .5s var(--ease-apple),box-shadow .5s var(--ease-apple)}
.svc-c:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(22,28,35,.16)}
.svc-c::after{background:linear-gradient(to top,rgba(16,20,25,.38) 0%,rgba(16,20,25,0) 55%)!important}
.svc-b{
  margin:14px;padding:18px 20px 16px;border-radius:5px;
  background:var(--glass-d);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge-d);
  transform:none!important;width:calc(100% - 28px);
}
.svc-b h3{font-size:20px;margin-bottom:4px}
.svc-b p{font-size:14.4px;line-height:1.5;color:rgba(255,255,255,.88)}
.svc-go{opacity:1!important;transform:none!important;margin-top:9px;color:#fff;font-size:14px}
.svc-go svg{transition:transform .35s var(--ease-apple)}
.svc-c:hover .svc-go svg{transform:translateX(3px)}
.svc-c.svc-cur{box-shadow:inset 0 0 0 2px var(--blue),0 10px 34px rgba(22,28,35,.10)}

/* 4) Dunkler Hero der Unterseiten: Brotkrumen, Bereichskennung, Zweitbutton */
.phero .crumb{
  display:inline-flex;align-items:center;gap:0;padding:7px 14px;border-radius:5px;margin-bottom:22px;
  background:rgba(255,255,255,.09);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge-d);color:rgba(255,255,255,.72)
}
.phero .crumb a{color:rgba(255,255,255,.72)}
.phero .crumb a:hover{color:#fff}
.phero .crumb b{color:#fff;font-weight:600}
.phero-tag{
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge-l),0 10px 30px rgba(0,0,0,.18);border-radius:6px
}
.btn-g{
  background:rgba(255,255,255,.12);border:0;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge-d)
}
.btn-g:hover{background:rgba(255,255,255,.2)}
.hero .btn-g{background:rgba(255,255,255,.6);color:var(--ink);box-shadow:var(--glass-edge-l),0 6px 20px rgba(22,28,35,.08)}
.hero .btn-g:hover{background:rgba(255,255,255,.8)}

/* 5) Vergleichsregler: Labels und Griff aus Glas */
.ba{border-radius:6px}
.ba-cap{
  background:rgba(16,20,25,.38);border-radius:5px;padding:6px 12px;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge-d)
}
.ba-grip{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge-l),0 8px 24px rgba(0,0,0,.28)
}

/* Anruf-Button: bleibt Markenblau, bekommt Tiefe statt Kante */
.sticky-call{animation:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 22px rgba(0,105,180,.26)}

/* Ruhigere Karten auf hellem Grund: weicher Schatten, Lichtkante, leichtes Anheben */
.b2b-light .b2b-c,.kenn-i,.mitte-p,.spur,.loc-f,.std-g .loc-list,.kt-form,.care-box{
  border-radius:6px;border-color:transparent!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(22,28,35,.04),0 12px 36px rgba(22,28,35,.07)!important
}
.b2b-light .b2b-c,.kenn-i,.mitte-p{transition:transform .45s var(--ease-apple),box-shadow .45s var(--ease-apple)}
.b2b-light .b2b-c:hover,.kenn-i:hover,.mitte-p:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #fff,0 18px 44px rgba(22,28,35,.11)!important}
.care-box{border-left:0!important}
.spur.spur-b{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 44px rgba(22,28,35,.18)!important}
.mitte-p.rc{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 44px rgba(0,105,180,.28)!important}
.btn{transition:transform .3s var(--ease-apple),box-shadow .3s var(--ease-apple),background .3s var(--ease-apple)}
.btn:active{transform:scale(.98)}

/* Ohne Mattglas-Unterstuetzung: deckende Flaechen, Lesbarkeit geht vor */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav.solid{background:rgba(255,255,255,.97)}
  .trust-g{background:#fff!important}
  .svc-b{background:rgba(18,22,27,.8)}
  .phero .crumb,.btn-g{background:rgba(255,255,255,.18)}
  .ba-cap{background:rgba(16,20,25,.75)}
}
/* Mobil: Mattglas auf der offenen Navigation abschalten (Overlay-Falle) */
@media(max-width:760px){
  .nav.menu-open{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
  .svc-b{margin:10px;width:calc(100% - 20px);padding:15px 16px 13px}
  .svc-b h3{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  .svc-c:hover,.b2b-light .b2b-c:hover,.kenn-i:hover,.mitte-p:hover{transform:none}
}

/* Glas-Ebene, Nachschaerfung: dunkleres Glas auf hellen Fotos (Kontrast),
   Anfrage-Assistent im Start-Hero als helle Glasplatte */
:root{--glass-d:rgba(18,22,27,.56)}
.hf{
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge-l),0 30px 80px rgba(15,19,24,.22);border-radius:6px
}
.hf-tile{
  background:rgba(255,255,255,.72);border-color:transparent;
  box-shadow:inset 0 1px 0 #fff,0 1px 3px rgba(22,28,35,.06);
  transition:background .3s var(--ease-apple),box-shadow .3s var(--ease-apple),transform .3s var(--ease-apple)
}
.hf-tile:hover{background:#fff;transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 8px 22px rgba(22,28,35,.10)}
.hf-tile.sel{background:#fff;border-color:var(--blue)}
.hf-tile .tds{font-size:13px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .hf{background:#fff} }

/* =====================================================================
   Mobil: Hero mit sichtbarem Foto, Menue mit Bild und Glas (01.10.2026)
   ===================================================================== */
@media(max-width:760px){
  /* Startseite: Foto oben sichtbar, zum Text hin weich abgedeckt */
  .hero-shade{background:
    linear-gradient(180deg,rgba(248,250,252,.18) 0%,rgba(248,250,252,.72) 20%,rgba(248,250,252,.90) 38%,rgba(248,250,252,.96) 100%)}
  .hero-media img{object-position:62% 0}

  /* Offenes Menue: Logo, Telefon und X liegen ueber der Flaeche und sind dunkel */
  .nav.menu-open .nav-logo,.nav.menu-open .nav-cta{position:relative;z-index:97}
  .nav.menu-open .lw{display:none!important}
  .nav.menu-open .ld{display:block!important}
  .nav.menu-open .nav-burger,.nav.menu-open .nav-tel{color:var(--ink)!important}

  /* Menueflaeche: sanftes Badfoto unter hellem Mattglas */
  .nav-menu{
    background:
      linear-gradient(180deg,rgba(248,250,252,.86) 0%,rgba(248,250,252,.66) 50%,rgba(248,250,252,.92) 100%),
      url('img/bad-modern.webp') center 30%/cover no-repeat;
    justify-content:flex-start;align-items:stretch;gap:0;
    padding:104px 28px calc(28px + env(safe-area-inset-bottom));
    overflow-y:auto;max-height:100dvh
  }
  .nav-menu > a{
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:27px!important;letter-spacing:-.02em;
    padding:13px 0;border-bottom:1px solid rgba(46,49,53,.08);
    display:flex;justify-content:space-between;align-items:center
  }
  .nav-menu > a::after{content:"";width:9px;height:9px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:rotate(45deg);margin-right:4px}
  .nav-menu > a[aria-current="page"]{color:var(--blue-ink)!important}

  /* Fuss im Menue: Anfrage, Telefon, Standorte */
  .mob-fuss{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:10px}
  .mob-fuss .btn{width:100%;font-size:16.5px;padding:15px 18px;border-bottom:0!important}
  .mob-fuss .btn-o{color:#fff!important}
  .mob-fuss .btn-l{background:rgba(255,255,255,.72);color:var(--ink)!important;
    -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge-l),0 4px 14px rgba(22,28,35,.06)}
  .mob-orte{margin-top:8px;font-size:14px;color:var(--muted);text-align:center}

  /* Links blenden nacheinander ein */
  .nav.menu-open .nav-menu > a,.nav.menu-open .mob-fuss{animation:mobIn .42s var(--ease-apple) both}
  .nav.menu-open .nav-menu > a:nth-child(2){animation-delay:.04s}
  .nav.menu-open .nav-menu > a:nth-child(3){animation-delay:.08s}
  .nav.menu-open .nav-menu > a:nth-child(4){animation-delay:.12s}
  .nav.menu-open .nav-menu > a:nth-child(5){animation-delay:.16s}
  .nav.menu-open .nav-menu > a:nth-child(6){animation-delay:.20s}
  .nav.menu-open .mob-fuss{animation-delay:.26s}
}
@keyframes mobIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .nav.menu-open .nav-menu > a,.nav.menu-open .mob-fuss{animation:none}
}

/* Mobil-Hero: dasselbe Bild wie im Menue, nur oben, nach unten weich ausgeblendet,
   damit das Anfrageformular darunter auf ruhigem Grund steht (01.10.2026) */
@media(max-width:760px){
  .hero{background:#f8fafc}
  .hero-media{bottom:auto;height:min(700px,88svh);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%)}
  .hero-media picture,.hero-media img{display:block;width:100%;height:100%}
  .hero-media img{object-fit:cover;object-position:50% 30%}
  .hero-shade{background:
    linear-gradient(180deg,rgba(248,250,252,.22) 0%,rgba(248,250,252,.70) 18%,rgba(248,250,252,.80) 45%,rgba(248,250,252,.60) 72%,rgba(248,250,252,0) 100%);
    bottom:auto;height:min(700px,88svh)}
}

/* =====================================================================
   Ruhe-Ebene (07.10.2026): Regelwerk "keine kleinen Striche, Chips und
   Schatten-Kaesten" (Severin-Ansage 05.10.2026). Glas bleibt, aber ohne
   Lichtkante; Trennung ueber Abstand und getoente Flaechen statt Linien;
   Schatten nur noch fuer Formular, Anfrage-Assistent und Trust-Leiste.
   ===================================================================== */
:root{
  --glass-edge-l:0 0 0 0 transparent;
  --glass-edge-d:0 0 0 0 transparent;
  --tint:rgba(0,105,180,.045);
}
/* keine Lichtkanten / Konturen per Schatten */
.nav.solid{box-shadow:0 10px 30px rgba(22,28,35,.06)}
.sticky-call{box-shadow:0 8px 22px rgba(0,105,180,.26)}
.btn-g,.ba-cap,.phero .crumb{box-shadow:none}
.phero-tag{box-shadow:0 10px 30px rgba(0,0,0,.18)}
.svc-b{box-shadow:none}
.svc-c.svc-cur{box-shadow:none;outline:3px solid var(--blue);outline-offset:-3px}
.ba-grip{box-shadow:0 8px 24px rgba(0,0,0,.28)}

/* Karten auf Flaeche statt Schatten-Kasten */
.b2b-light .b2b-c,.kenn-i,.mitte-p,.spur,.loc-f,.std-g .loc-list,.care-box{
  box-shadow:none!important;background:var(--tint)!important;border:0!important}
.sec-soft .b2b-light .b2b-c,.sec-soft .kenn-i,.sec-soft .mitte-p,.sec-soft .spur,.sec-soft .care-box{background:#fff!important}
.spur.spur-b{background:var(--ink)!important}
.mitte-p.rc{background:var(--blue)!important}
.b2b-light .b2b-c:hover,.kenn-i:hover,.mitte-p:hover{transform:none;box-shadow:none!important}

/* Bildkacheln, Vergleichsregler, Bewertungen stehen flach */
.svc-c,.svc-c:hover{box-shadow:none}
.svc-c:hover{transform:none}
.ba,.bw-c,.way,.care-med,.pr-stage,.map-holder,.finder,.fq-call,.pr-s,.pr-s.on,.seg-med{box-shadow:none!important}
.bw-c,.pr-s,.fq-call,.map-holder,.kt-r{border:0!important}
.bw-c{background:var(--tint)}
.sec-soft .bw-c{background:#fff}
.kt-r{background:var(--tint)}

/* Formular und Anfrage-Assistent: Schatten ja, Rahmen nein */
.kt-form{border:0!important;box-shadow:0 18px 50px rgba(22,28,35,.09)!important}
.hf-tile{border:0!important;box-shadow:none!important;background:rgba(255,255,255,.78)}
.hf-tile:hover{box-shadow:none!important;background:#fff}
.hf-tile.sel{outline:2px solid var(--blue);outline-offset:-2px;background:#fff}

/* keine Linien zwischen Listenpunkten, Spalten, Schritten */
.trust-i{border:0!important}
.ablauf-s,.ablauf-s+.ablauf-s,.ablauf-s:nth-child(even){border:0!important}
.ablauf{gap:34px}
.ablauf-s,.ablauf-s+.ablauf-s{padding:0}
.fq-i{border:0!important;background:var(--tint);border-radius:6px;margin-bottom:10px}
.sec-soft .fq-i{background:#fff}
.fq-q{padding-left:22px;padding-right:22px}
.fq-a .fq-p{padding-left:22px;padding-right:22px}
.ft-bot,.ft-seo{border:0!important}
.spur li,.seg li{border:0!important;padding:6px 0}
.seg{border:0!important}
@media(max-width:760px){
  .nav-menu > a{border:0!important;padding:11px 0}
  .ablauf{gap:26px}
}

/* Standortseite: Orte als ruhige Textzeile statt Chip-Reihe */
.orte-zeile{font-size:16px;line-height:1.75;color:var(--ink-soft);margin:0}
/* Ruhe-Ebene, Nachzuegler */
.spur.spur-b,.mitte-p.rc{box-shadow:none!important}
.bw-av{display:none!important}
a.loc-c{border:0!important;background:var(--tint)}

/* Ausbau Leistungsseiten (07.10.2026): ruhige Textspalten, flache Galerie, Projektpaare */
.sp-kopf{font-size:clamp(1.25rem,1.8vw,1.55rem);margin:64px 0 22px;letter-spacing:-.015em}
.sp-intro{color:var(--ink-soft);margin:-12px 0 24px;max-width:60ch}
.sp3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.sp-i h3{font-size:18.5px;margin:0 0 8px}
.sp-i p{font-size:15.6px;line-height:1.65;color:var(--ink-soft);margin:0}
.gl3{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.gl-i{margin:0}
.gl-i img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block}
.gl-i figcaption{font-size:15px;color:var(--ink-soft);margin-top:10px}
.pk{margin-top:44px}
.pk-b{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pk-b figure{margin:0;position:relative}
.pk-b img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;display:block}
.pk-b figcaption{font-size:14px;font-weight:700;color:var(--muted);margin-top:8px}
.pk h3{font-size:19px;margin:16px 0 6px}
.pk p{font-size:15.4px;color:var(--ink-soft);margin:0;max-width:60ch}
.pk-g{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px}
.pk-g .pk{margin-top:0}
.sec .pk .pk-b img{aspect-ratio:4/3}
@media(max-width:860px){.sp3{grid-template-columns:1fr;gap:26px}.gl3,.pk-g{grid-template-columns:1fr}.sp-kopf{margin-top:48px}}

/* Menue-Fuss gehoert nur ins mobile Overlay (Fehler seit 01.10.2026: stand am Desktop in der Nav) */
.mob-fuss{display:none}
@media(max-width:760px){.mob-fuss{display:flex}}

/* Regionale Referenzen: die lange Gruppe in Spalten statt einer Riesenspalte */
.sp-wide{margin-bottom:34px}
.sp-wide p{columns:3;column-gap:40px}
@media(max-width:860px){.sp-wide p{columns:1}}
/* Menuepunkte nie umbrechen; auf Laptop-Breiten enger setzen */
.nav-menu a{white-space:nowrap}
@media(min-width:761px) and (max-width:1280px){
  .nav-menu{gap:18px}
  .nav-menu a{font-size:14.5px}
  .nav-logo-img.dach{height:24px}
}
@media(min-width:761px) and (max-width:1100px){
  .nav-tel span{display:none}
  .nav-menu{gap:16px}
}

/* =====================================================================
   Menue mit Dropdowns (07.10.2026)
   Desktop: Mega-Dropdown "Leistungen" + einfache Dropdowns, Glasplatte.
   Handy: dieselben Gruppen als Aufklapper im Overlay.
   ===================================================================== */
.nm{position:relative;display:flex;align-items:center}
.nm-t{font:inherit;font-weight:600;font-size:15.5px;color:var(--ink);opacity:.9;background:none;border:0;padding:0;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
button.nm-t:hover,.nm:hover>.nm-t{opacity:1}
.nm-x{background:none;border:0;padding:4px;margin-left:2px;color:inherit;cursor:pointer;display:inline-flex;opacity:.75}
.nm-chev{transition:transform .25s var(--ease-apple)}
.nm.open .nm-chev{transform:rotate(180deg)}
/* Hover-Drehung nur mit echter Maus: auf Touch bleibt :hover nach dem Tippen haengen */
@media(hover:hover) and (min-width:761px){.nm:hover .nm-chev{transform:rotate(180deg)}}
.nav.solid .nm-t,.nav.solid .nm-x{color:var(--ink)}
body:has(.phero) .nav:not(.solid) .nm-t,body:has(.phero) .nav:not(.solid) .nm-x,
body.dark-hero .nav:not(.solid) .nm-t,body.dark-hero .nav:not(.solid) .nm-x{color:#fff}
.nm.ist-aktiv>.nm-t{opacity:1}

@media(min-width:761px){
  .nm-p{position:absolute;top:100%;left:50%;margin-top:14px;
    opacity:0;visibility:hidden;transform:translate(-50%,6px);
    transition:opacity .22s var(--ease-apple),transform .22s var(--ease-apple),visibility 0s .22s;
    background:rgba(255,255,255,.9);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
    border-radius:8px;box-shadow:0 24px 60px rgba(15,19,24,.16);padding:22px;z-index:99}
  .nm-p::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}   /* Hover-Bruecke */
  .nm:hover>.nm-p,.nm:focus-within>.nm-p,.nm.open>.nm-p{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
  .nm-mega>.nm-p{display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:8px 30px;width:min(760px,calc(100vw - 48px));left:0;transform:translate(-18%,6px)}
  .nm-mega:hover>.nm-p,.nm-mega:focus-within>.nm-p,.nm-mega.open>.nm-p{transform:translate(-18%,0)}
  .nm-p1{display:flex;flex-direction:column;min-width:240px;padding:12px}
  .nm-p a{color:var(--ink)!important;opacity:1;font-weight:500;font-size:15px;white-space:nowrap;
    padding:8px 10px;border-radius:5px;transition:background .15s}
  .nm-p a:hover,.nm-p a[aria-current="page"]{background:var(--tint)}
  .nm-c{display:flex;flex-direction:column}
  .nm-p a.nm-h{font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-ink)!important;margin-bottom:4px}
  .nm-p a.nm-f{display:flex;flex-direction:column;gap:6px;white-space:normal;background:var(--care-soft);padding:18px;border-radius:6px}
  .nm-p a.nm-f:hover{background:#e1f0e3}
  .nm-f b{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;color:var(--ink)}
  .nm-f span{font-size:14.5px;line-height:1.5;color:var(--ink-soft);font-weight:400}
  .nm-f em{font-style:normal;font-weight:700;font-size:14.5px;color:var(--care);display:inline-flex;align-items:center;gap:6px;margin-top:auto}
}
@media(min-width:761px) and (max-width:1100px){
  .nm-mega>.nm-p{transform:translate(-8%,6px)}
  .nm-mega:hover>.nm-p,.nm-mega:focus-within>.nm-p,.nm-mega.open>.nm-p{transform:translate(-8%,0)}
}
@media(min-width:761px) and (max-width:1280px){ .nm-t{font-size:14.5px} }

/* Handy: Gruppen als Aufklapper */
@media(max-width:760px){
  .nav-menu > .nm{display:flex;flex-wrap:wrap;align-items:center;width:100%}
  .nav-menu > .nm > .nm-t{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:27px;letter-spacing:-.02em;
    color:var(--ink)!important;padding:11px 0;flex:1;justify-content:space-between;opacity:1}
  .nav-menu > .nm > .nm-x{color:var(--blue)!important;padding:10px 4px 10px 16px;opacity:1}
  .nav-menu .nm-chev{width:16px;height:16px}
  button.nm-t .nm-chev{color:var(--blue)}
  .nm-p{display:none;width:100%;padding:4px 0 12px 2px}
  .nm.open>.nm-p{display:block}
  .nm-p a{display:block;font-size:17px!important;font-weight:600;color:var(--ink-soft)!important;padding:8px 0;border:0}
  .nm-p a::after{display:none}
  .nm-p a.nm-h{font-size:13px!important;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-ink)!important;margin-top:8px}
  .nm-p a.nm-f{margin-top:12px;padding:14px 16px;border-radius:6px;background:var(--care-soft)}
  .nm-f b{display:block;font-size:16px;color:var(--ink)}
  .nm-f span{display:block;font-size:14px;font-weight:400;line-height:1.45;margin-top:3px}
  .nm-f em{font-style:normal;font-weight:700;font-size:14px;color:var(--care);display:inline-flex;gap:6px;margin-top:8px}
  .nav.menu-open .nav-menu > .nm{animation:mobIn .42s var(--ease-apple) both}
  .nav.menu-open .nav-menu > .nm:nth-child(2){animation-delay:.04s}
  .nav.menu-open .nav-menu > .nm:nth-child(3){animation-delay:.08s}
  .nav.menu-open .nav-menu > a:nth-child(4){animation-delay:.12s}
  .nav.menu-open .nav-menu > a:nth-child(5){animation-delay:.16s}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){ .nav.menu-open .nav-menu > .nm{animation:none} }
/* Mega-Dropdown bis 1180 px mittig unter der Leiste, damit es nie ueber den Rand ragt */
@media(min-width:761px) and (max-width:1180px){
  .nm-mega{position:static}
  .nm-mega>.nm-p{left:50%;right:auto;top:100%;width:calc(100vw - 48px);max-width:760px;transform:translate(-50%,6px)}
  .nm-mega:hover>.nm-p,.nm-mega:focus-within>.nm-p,.nm-mega.open>.nm-p{transform:translate(-50%,0)}
  .nav-in{position:relative}
}
.nm-p a.nm-f,.nm-p a.nm-f span,.nm-p a.nm-f b{white-space:normal}
@media(min-width:761px){.nm-p{background:rgba(255,255,255,.96)}}

/* Handy: alle Pfeile auf einer senkrechten Achse */
@media(max-width:760px){
  .nav-menu > .nm > .nm-x{padding:10px 0 10px 16px}
}
@media(max-width:760px){
  .nav-menu .nm-chev{width:20px;height:20px;stroke-width:2.2}
  .nav-menu > a::after{width:10px;height:10px;margin-right:5px}
}

/* Standort x Leistung (09.10.2026): Standortwahl auf Leistungsseiten, Leistungslisten auf Standortseiten */
.ort-g{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ort-l{display:flex;flex-direction:column;gap:4px;padding:20px 22px;border-radius:6px;background:var(--tint);color:var(--ink);transition:background .2s}
.sec-soft .ort-l{background:#fff}
.ort-l:hover{background:var(--blue-soft)}
.ort-l b{font-family:'Plus Jakarta Sans',sans-serif;font-size:16.5px}
.ort-l span{font-size:14.5px;color:var(--ink-soft)}
.ort-l[aria-current="page"]{outline:2px solid var(--blue);outline-offset:-2px}
.sl-g{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px}
.sl-c h3{font-size:18.5px;margin:0 0 10px}
.sl-c a{display:block;padding:9px 0;font-size:16px;font-weight:600;color:var(--blue-ink)}
.sl-c a:hover{color:var(--blue)}
@media(max-width:860px){.ort-g{grid-template-columns:1fr 1fr}.sl-g{grid-template-columns:1fr}}
@media(max-width:480px){.ort-g{grid-template-columns:1fr}}
/* Sieben Hauptpunkte (Zielnavigation REMOCOM): Logo und Nummer nie quetschen */
.nav-logo{flex-shrink:0}
.nav-tel{white-space:nowrap;flex-shrink:0}
@media(min-width:1281px){ .nav-menu{gap:24px} .nav-menu > a,.nm-t{font-size:15px} }
@media(min-width:761px) and (max-width:1280px){
  .nav-tel span{display:none}
  .nav-menu{gap:14px}
  .nav-menu > a,.nm-t{font-size:14px}
  .nm-x{padding:4px 2px;margin-left:0}
}
@media(min-width:1281px) and (max-width:1500px){ .nav-tel span{display:none} }

/* REMO BAD (11.10.2026): Preisuebersicht und Leistungstabelle, flach auf getoenter Flaeche */
.pr3{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pr3-i{display:flex;flex-direction:column;padding:28px 26px;border-radius:6px;background:var(--tint);color:var(--ink)}
.sec-soft .pr3-i{background:#fff}
.pr3-i h3{font-size:19px;margin:0 0 14px}
.pr3-p{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:34px;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px}
.pr3-p small{display:block;font-family:Inter,sans-serif;font-weight:500;font-size:14px;letter-spacing:0;color:var(--muted);margin-top:6px}
.pr3-i p{font-size:15.4px;line-height:1.6;color:var(--ink-soft);margin:0 0 18px;flex:1}
.pr3-go{font-weight:700;font-size:14.5px;color:var(--blue-ink);display:inline-flex;align-items:center;gap:6px}
.pr3-i[aria-current="page"]{outline:2px solid var(--blue);outline-offset:-2px}
.pr3-h{font-size:14px;line-height:1.6;color:var(--muted);margin:22px 0 0;max-width:90ch}
.lt-w{overflow-x:auto;background:#fff;border-radius:6px}
.lt{width:100%;border-collapse:collapse;font-size:15.2px;min-width:620px}
.lt th,.lt td{text-align:left;vertical-align:top;padding:15px 20px}
.lt thead th{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-ink)}
.lt tbody tr:nth-child(odd){background:var(--tint)}
.lt tbody th{font-weight:600;width:44%}
.lt td{color:var(--ink-soft)}
.sl-g.sl3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.pr3,.sl-g.sl3{grid-template-columns:1fr}}
/* WhatsApp-Knopf ueber dem Anruf-Knopf */
.sticky-wa{position:fixed;right:22px;bottom:82px;z-index:80;display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--ink);
  font-weight:700;font-size:15px;padding:13px 20px;border-radius:99px;box-shadow:0 8px 22px rgba(22,28,35,.14)}
.sticky-wa svg{color:#1fa855}
@media(max-width:760px){.sticky-wa{right:16px;bottom:74px;padding:12px 16px}}
.kt-r a{color:inherit}
.hf-opt{font-weight:400;color:var(--muted)}
.care-direkt{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;margin-top:30px;font-size:16px}
.care-direkt a{font-weight:600;color:var(--blue-ink)}

/* ---------- Erklärvideo ---------- */
.vid{max-width:960px;margin:28px auto 0;border-radius:14px;overflow:hidden;background:#0d1b2a;aspect-ratio:16/9}
.vid video{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.vid{border-radius:10px;margin-top:20px}}

/* ---------- Cookie-Hinweis ---------- */
.rc-ck{position:fixed;left:16px;bottom:16px;z-index:200;max-width:420px;background:#fff;color:#1d2733;border-radius:14px;padding:18px 18px 16px;box-shadow:0 10px 40px rgba(13,27,42,.18)}
.rc-ck .btn{box-shadow:none}
.rc-ck[hidden]{display:none}
.rc-ck p{font-size:14.5px;line-height:1.55;margin:0 0 14px}
.rc-ck p a{color:#0069b4;text-decoration:underline}
.rc-ck-b{display:flex;gap:10px}
.rc-ck-b .btn{flex:1;justify-content:center;padding:11px 14px;font-size:14.5px}
@media(max-width:640px){.rc-ck{left:12px;right:12px;bottom:12px;max-width:none}}