/* ============================================================================
   S&K SCHLÜSSELDIENST BERLIN — Design-System 2026
   Navy (#1A2B4D) Hauptfarbe · Rot (#E1231C) Akzent/CTA · Weiß Fläche
   Fonts: Montserrat (Display) + Mulish (Body)
   ========================================================================= */

/* ---- Fonts (self-hostable; hier via Google Fonts mit display=swap) ------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Mulish:wght@400;500;600;700;800&display=swap');

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --navy:       #1A2B4D;
  --navy-deep:  #122039;
  --navy-soft:  #2C3E63;
  --navy-2:     #21345C;

  --red:        #E1231C;
  --red-deep:   #B81A14;
  --red-tint:   #FDECEA;

  --white:      #FFFFFF;
  --paper:      #F5F8FB;
  --line:       #E4E8EF;

  --text:       #2B3344;
  --text-muted: #5B6577;
  --on-navy:    #F4F6FA;
  --on-navy-mut:#AEB9CE;

  --map-base:   #F3F6F4;
  --map-green:  #E8EFE0;
  --map-water:  #C5DCEA;

  --green:      #25D366; /* WhatsApp */

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  --shadow-sm: 0 1px 2px rgba(26,43,77,.05), 0 2px 6px rgba(26,43,77,.06);
  --shadow:    0 8px 24px rgba(26,43,77,.08);
  --shadow-lg: 0 24px 60px rgba(26,43,77,.12);
  --shadow-red:0 14px 34px rgba(225,35,28,.28);
  --ring-red:  0 0 0 4px rgba(225,35,28,.20);

  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Mulish', system-ui, sans-serif;

  --container: 1240px;
  --topbar-h: 44px;
  --header-h: 104px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset --------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: none; box-shadow: var(--ring-red); border-radius: 6px; }

h1,h2,h3,h4 { font-family: var(--font-display); color: var(--navy); line-height: 1.08; letter-spacing: -.01em; overflow-wrap: break-word; hyphens: auto; }

/* ---- Layout helpers ------------------------------------------------------ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 22px; }
.section { padding: clamp(56px, 8vw, 112px) 0; }
.section--paper { background: var(--paper); }
.section--navy { background: var(--navy); color: var(--on-navy); }
.section--navy h2, .section--navy h3 { color: #fff; }
.eyebrow {
  font-family: var(--font-display); font-weight: 800; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content:""; width: 26px; height: 3px; background: var(--red); border-radius: 2px; }
/* bei zentrierten Überschriften keinen linken Strich -> sauber mittig */
.section-head.center .eyebrow::before { display: none; }
.section-head { max-width: 760px; margin-bottom: clamp(32px,5vw,56px); }
.section-head h2 { font-size: clamp(1.7rem, 4vw, 2.7rem); font-weight: 800; margin: 14px 0 0; }
.section-head p { color: var(--text-muted); font-size: 1.12rem; margin-top: 14px; }
.section--navy .section-head p { color: var(--on-navy-mut); }
.text-red { color: var(--red); }
.center { text-align: center; }
.center.section-head { margin-inline: auto; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  --pad-y: 16px; --pad-x: 26px;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  font-family: var(--font-display); font-weight: 800; font-size: .98rem;
  letter-spacing: .02em; text-transform: uppercase;
  padding: var(--pad-y) var(--pad-x); border: 2px solid transparent; border-radius: 12px;
  min-height: 52px; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s, border-color .18s;
  will-change: transform;
}
.btn svg { width: 20px; height: 20px; }
.btn--red { background: var(--red); color: #fff; box-shadow: var(--shadow-red); }
.btn--red:hover { background: var(--red-deep); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(225,35,28,.34); }
.btn--ghost { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost-light:hover { background: #fff; color: var(--navy); border-color:#fff; }
.btn--lg { --pad-y: 19px; --pad-x: 34px; font-size: 1.05rem; min-height: 60px; }
.btn--block { width: 100%; }

/* phone pulse ring */
.btn--red .ico-phone { animation: ring 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes ring { 0%,72%,100%{transform:rotate(0)} 76%{transform:rotate(-12deg)} 80%{transform:rotate(12deg)} 84%{transform:rotate(-9deg)} 88%{transform:rotate(9deg)} 92%{transform:rotate(0)} }

/* ============================ TOPBAR ====================================== */
.topbar {
  background: var(--navy-deep); color: var(--on-navy);
  font-size: .86rem; height: var(--topbar-h); display: flex; align-items: center;
  position: relative; z-index: 60;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.topbar__item { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.topbar__item svg { width: 17px; height: 17px; }
.topbar__247 { font-family: var(--font-display); font-weight: 800; letter-spacing: .06em; }
.topbar__badge { background: var(--red); color:#fff; font-family: var(--font-display); font-weight:800; font-size:.62rem; padding: 3px 7px; border-radius: 5px; letter-spacing:.05em; }
.topbar__call { color:#fff; font-weight: 700; }
.topbar__call b { color: #fff; font-family: var(--font-display); font-weight: 800; }
.topbar__call:hover b { color: #ffd5d3; }
.topbar__wa { color: var(--green); font-weight: 700; }
.topbar .sep { width:1px; height: 20px; background: rgba(255,255,255,.16); }
@media (max-width: 880px){ .topbar__mid, .topbar .sep { display: none; } .topbar { font-size:.8rem; } }
@media (max-width: 600px){ .hide-sm { display: none; } .topbar { font-size:.78rem; } .topbar .container { gap: 10px; } }

/* ============================ HEADER ====================================== */
.header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line); transition: box-shadow .3s, height .3s;
}
.header.is-scrolled { box-shadow: 0 6px 24px rgba(26,43,77,.09); }
.header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); flex-wrap: nowrap; }
.brand { display: flex; align-items: center; gap: 13px; flex: none; overflow: visible; }
/* großes Logo: Balken bleibt gleich hoch, Badge ragt unten leicht in den Hero (transparent) */
.brand img { height: 120px; width: auto; transform: translateY(8px); }
.brand__txt { display:flex; flex-direction: column; line-height: 1; white-space: nowrap; }
.brand__txt b { font-family: var(--font-display); font-weight: 900; color: var(--navy); font-size: 1.34rem; letter-spacing: -.01em; white-space: nowrap; }
.brand__txt span { font-family: var(--font-display); font-weight: 800; color: var(--red); font-size: .8rem; letter-spacing: .36em; margin-top: 4px; white-space: nowrap; }
@media (max-width: 600px){ .brand__txt { display:none; } }
@media (max-width: 1080px){ .brand img { height: 104px; transform: translateY(6px); } }
@media (max-width: 760px){ .header .container { height: 84px; } .brand img { height: 88px; transform: translateY(4px); } }
@media (max-width: 420px){ .brand img { height: 74px; transform: none; } }

.nav { display: flex; align-items: center; gap: 2px; flex: none; }
.nav a, .nav__drop > button {
  font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--navy);
  padding: 10px 13px; border-radius: 9px; position: relative; transition: color .15s, background .15s; white-space: nowrap;
}
.nav a::after { content:""; position:absolute; left:14px; right:14px; bottom:4px; height:3px; background: var(--red); border-radius:2px; transform: scaleX(0); transform-origin:left; transition: transform .22s var(--ease); }
.nav a:hover { color: var(--red); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--red); }

/* dropdown */
.nav__drop { position: relative; }
.nav__drop > button { display:flex; align-items:center; gap:6px; background:none; border:0; }
.nav__drop > button svg { width:15px; height:15px; transition: transform .2s; }
.nav__drop:hover > button svg, .nav__drop:focus-within > button svg { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  background:#fff; border:1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 8px; min-width: 268px; opacity:0; visibility:hidden; transition: opacity .2s, transform .2s; z-index: 40;
}
/* unsichtbare Brücke über die Lücke, damit der Hover beim Runterfahren nicht abreißt */
.nav__menu::before { content:""; position:absolute; left:0; right:0; top:-16px; height:18px; }
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu { opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.nav__menu a { display:flex; align-items:center; gap:11px; padding: 11px 13px; border-radius: 9px; font-size:.9rem; }
.nav__menu a::after { display:none; }
.nav__menu a:hover { background: var(--red-tint); color: var(--red); }
.nav__menu a svg { width:18px; height:18px; color: var(--red); flex: none; }

.header__cta { display: flex; align-items: center; gap: 10px; flex: none; }
.header__phone { display:flex; flex-direction:column; align-items:flex-end; line-height:1.05; white-space:nowrap; }
.header__phone small { font-size:.66rem; color: var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.header__phone b { font-family: var(--font-display); font-weight:900; color: var(--red); font-size:1.2rem; white-space:nowrap; }
@media (max-width: 1600px){ .header__phone { display:none; } }
@media (max-width: 1280px){ .brand__txt { display:none; } }
@media (max-width: 1080px){ .nav { display:none; } }

.burger { display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:11px; background:#fff; position:relative; }
.burger span { position:absolute; left:11px; right:11px; height:2.5px; background: var(--navy); border-radius:2px; transition: .25s var(--ease); }
.burger span:nth-child(1){ top:15px; } .burger span:nth-child(2){ top:22px; } .burger span:nth-child(3){ top:29px; }
body.menu-open .burger span:nth-child(1){ top:22px; transform: rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ top:22px; transform: rotate(-45deg); }
@media (max-width: 1080px){ .burger { display:block; } }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
.drawer__scrim { position:absolute; inset:0; background: rgba(18,32,57,.55); opacity:0; transition: opacity .3s; }
.drawer__panel { position:absolute; top:0; right:0; height:100%; width: min(86vw, 380px); background:#fff; transform: translateX(100%); transition: transform .35s var(--ease); padding: 22px; overflow-y:auto; display:flex; flex-direction:column; }
body.menu-open .drawer { visibility: visible; }
body.menu-open .drawer__scrim { opacity:1; }
body.menu-open .drawer__panel { transform: translateX(0); }
.drawer__close { align-self:flex-end; width:44px;height:44px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:1.4rem;color:var(--navy); }
.drawer__nav { margin-top: 12px; display:flex; flex-direction:column; }
.drawer__nav a { font-family:var(--font-display); font-weight:700; color:var(--navy); padding:15px 6px; border-bottom:1px solid var(--line); font-size:1.05rem; }
.drawer__nav a:active { color: var(--red); }
.drawer__sub { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); padding:16px 6px 4px; font-weight:800; font-family:var(--font-display); }
.drawer__cta { margin-top: auto; padding-top: 20px; display:flex; flex-direction:column; gap:10px; }

/* ============================ HERO ======================================== */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--navy-deep); }
.hero__media { position:absolute; inset:0; z-index:-2; }
.hero__media img { width:100%; height:100%; object-fit: cover; object-position: center 32%; }
/* dunkler Verlauf links (für weiße Schrift) + unten (für den Trust-Streifen) */
.hero__media::after { content:""; position:absolute; inset:0;
  background:
    linear-gradient(94deg, rgba(7,12,24,.96) 0%, rgba(7,12,24,.90) 27%, rgba(7,12,24,.64) 45%, rgba(7,12,24,.28) 64%, rgba(7,12,24,.08) 100%),
    linear-gradient(0deg, rgba(7,12,24,.98) 0%, rgba(7,12,24,.80) 18%, rgba(7,12,24,.36) 37%, transparent 58%); }
@media (max-width: 980px){ .hero__media::after { background: linear-gradient(0deg, rgba(7,12,24,.96) 0%, rgba(7,12,24,.8) 34%, rgba(7,12,24,.62) 64%, rgba(7,12,24,.5) 100%); } }
.hero__inner { display:grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items:center;
  padding: clamp(34px,4.5vw,52px) 0 clamp(54px,7vw,84px); }
@media (max-width: 980px){ .hero__inner { grid-template-columns: 1fr; gap: 26px; padding-bottom: clamp(48px,8vw,80px); } }

/* schwebende "Jetzt erreichbar"-Karte */
.hero__live { display:inline-flex; align-items:center; gap:12px; background:#fff; border-radius:14px;
  box-shadow: var(--shadow-lg); padding: 12px 18px; margin: clamp(14px,2.5vw,30px) 0 clamp(24px,5vw,52px); max-width: 360px; }
.hero__live-dot { width:12px;height:12px;border-radius:50%;background:var(--green); position:relative; flex:none; }
.hero__live-dot::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0%{transform:scale(.7);opacity:1} 100%{transform:scale(1.8);opacity:0} }
.hero__live b { font-family:var(--font-display); color: var(--navy); display:block; line-height:1.2; }
.hero__live span { color: var(--text-muted); font-size:.86rem; }
.hero__live span b { display:inline; color: var(--red); }

.hero__claim-eyebrow { color: #ff6b63; }
.hero h1 { font-size: clamp(2.5rem, 6.6vw, 4.6rem); font-weight: 900; text-transform: uppercase; margin: 14px 0 0; letter-spacing: -.02em; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero h1 .wh { color: #fff; display:block; }
.hero h1 .rd { color: var(--red); display:block; }
.hero__sub { font-size: clamp(1.05rem,2.2vw,1.3rem); color: rgba(255,255,255,.92); max-width: 32ch; margin-top: 20px; font-weight: 500; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.hero__usps { display:flex; flex-direction:column; gap: 14px; margin: 26px 0 30px; }
.hero__usp { display:flex; align-items:center; gap:13px; font-weight:700; color: #fff; font-size:1.02rem; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.hero__usp .ico { width:40px; height:40px; border-radius:50%; background: var(--red); color: #fff; display:grid; place-items:center; flex:none; box-shadow: 0 6px 16px rgba(225,35,28,.4); }
.hero__usp .ico svg { width:20px; height:20px; }
.hero__btns { display:flex; flex-wrap:wrap; gap: 14px; }
.btn--white { background:#fff; color: var(--navy); }
.btn--white:hover { background: var(--paper); transform: translateY(-2px); }
.btn--white svg { color: var(--green); }

/* Festpreis-Karte (Hero) */
.pricecard {
  background:#fff; border-radius: 22px; box-shadow: var(--shadow-lg);
  padding: 24px 24px 0; position: relative; max-width: 396px; margin-left:auto; overflow:hidden;
}
.pricecard__head { text-align:center; }
.pricecard__head span { display:block; font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size: clamp(1.32rem,2.7vw,1.7rem); line-height:1.05; letter-spacing:-.01em; }
.pricecard__head .pc-h1 { color: var(--navy); }
.pricecard__head .pc-h2 { color: var(--red); }
.pricecard__price { text-align:center; font-family:var(--font-display); font-weight:900; color:var(--red); line-height:.84; margin: 2px 0 6px; }
.pricecard__price .num { font-size: clamp(3.8rem,9.5vw,5.2rem); }
.pricecard__price .eur { font-size: clamp(2rem,5vw,2.8rem); }
.pc-divider { display:flex; align-items:center; gap:12px; margin: 6px 2px 10px; }
.pc-divider::before, .pc-divider::after { content:""; flex:1; height:1px; background: var(--line); }
.pc-divider span { display:grid; place-items:center; color:#9aa6b8; }
.pc-divider svg { width:21px; height:21px; }
.pc-list { display:grid; margin: 0 0 16px; }
.pc-list li { display:flex; align-items:center; gap:12px; padding: 8px 2px; font-family:var(--font-body); font-weight:700; color: var(--navy); font-size:.94rem; border-bottom:1px solid var(--line); }
.pc-list li:last-child { border-bottom:0; }
.pc-chk { width:24px; height:24px; border-radius:50%; background:#16a34a; color:#fff; display:grid; place-items:center; flex:none; }
.pc-chk svg { width:14px; height:14px; }
.pc-btn { display:flex; align-items:center; justify-content:center; gap:13px; width:100%; border-radius:13px; padding: 11px 16px; margin-bottom:11px; color:#fff; text-align:left; transition: transform .18s var(--ease), box-shadow .18s, filter .18s; }
.pc-btn svg { width:26px; height:26px; flex:none; }
.pc-btn b { font-family:var(--font-display); font-weight:800; display:block; line-height:1.12; }
.pc-btn small { display:block; font-size:.84rem; font-weight:600; opacity:.92; }
.pc-btn--call { background: var(--red); box-shadow: var(--shadow-red); }
.pc-btn--call b { font-size: clamp(1.18rem,2.8vw,1.48rem); letter-spacing:.01em; }
.pc-btn--call:hover { background: var(--red-deep); transform: translateY(-2px); }
.pc-btn--wa { background:#1FA84A; box-shadow: 0 12px 28px rgba(31,168,74,.32); }
.pc-btn--wa b { font-size: 1.02rem; }
.pc-btn--wa:hover { filter:brightness(1.05); transform: translateY(-2px); }
.pc-foot { margin: 18px -24px 0; padding: 15px 10px 17px; background: var(--paper); border-top:1px solid var(--line);
  display:grid; grid-template-columns: repeat(4,1fr); gap:5px; }
.pc-foot__item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; }
.pc-foot__item svg { width:23px; height:23px; color: var(--navy); }
.pc-foot__item span { font-size:.67rem; color: var(--text-muted); line-height:1.22; font-weight:600; }

/* hero entrance */
.reveal-hero > * { opacity: 0; transform: translateY(22px); animation: heroIn .8s var(--ease) forwards; }
.reveal-hero > *:nth-child(1){ animation-delay:.05s } .reveal-hero > *:nth-child(2){ animation-delay:.15s }
.reveal-hero > *:nth-child(3){ animation-delay:.25s } .reveal-hero > *:nth-child(4){ animation-delay:.35s }
.reveal-hero > *:nth-child(5){ animation-delay:.45s }
.hero__right.reveal-hero-card { opacity:0; transform: translateY(30px) scale(.98); animation: heroIn .9s .35s var(--ease) forwards; }
@keyframes heroIn { to { opacity:1; transform: none; } }

/* live response strip */
.livebar { display:flex; align-items:center; gap:14px; margin-top:26px; flex-wrap:wrap;
  background: rgba(255,255,255,.7); border:1px solid var(--line); border-radius: 14px; padding: 12px 18px; max-width: 520px; }
.livebar .dot { width:11px;height:11px;border-radius:50%;background: var(--green); position:relative; flex:none; }
.livebar .dot::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0%{transform:scale(.7);opacity:1} 100%{transform:scale(1.8);opacity:0} }
.livebar b { font-family:var(--font-display); color: var(--navy); }

/* ============================ HERO TRUST STRIP (dunkel) =================== */
/* Trust-Streifen sitzt auf der Naht: obere Hälfte über dem dunklen Hero, untere über Weiß */
.herostrip { position:relative; z-index:5; margin-top: calc(-1 * clamp(44px,5.5vw,58px)); margin-bottom: clamp(22px,3vw,34px); }
.herostrip__grid { display:flex; background: rgba(9,14,27,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.12); border-radius: 20px; box-shadow: 0 26px 60px rgba(0,0,0,.42); overflow:hidden; }
.herostrip__item { flex:1; display:flex; align-items:center; gap:13px; justify-content:flex-start; padding: 22px 14px; position:relative; min-width:0; }
.herostrip__item:not(:last-child)::after { content:""; position:absolute; right:0; top:22px; bottom:22px; width:1px; background:rgba(255,255,255,.15); }
.herostrip__ico { width:46px;height:46px;border-radius:12px; border:1.6px solid rgba(255,255,255,.28); color:#fff; display:grid;place-items:center; flex:none; }
.herostrip__ico svg { width:22px;height:22px; }
.herostrip__item b { color:#fff; font-family:var(--font-display); display:block; font-size:1.02rem; line-height:1.18; }
.herostrip__item span { color: rgba(255,255,255,.72); font-size:.88rem; }
@media (max-width: 860px){ .herostrip__grid { flex-wrap:wrap; } .herostrip__item { flex:1 1 50%; } .herostrip__item:nth-child(2)::after { display:none; } .herostrip__item:nth-child(1),.herostrip__item:nth-child(2){ border-bottom:1px solid rgba(255,255,255,.12); } }
@media (max-width: 460px){ .herostrip__item { flex:1 1 100%; padding: 16px 18px; } .herostrip__item::after { display:none !important; } .herostrip__item:not(:last-child){ border-bottom:1px solid rgba(255,255,255,.12); } }

/* ============================ GOOGLE-BEWERTUNGSLEISTE ==================== */
.gbar { background:transparent; padding: 0 0 clamp(30px,4vw,48px); position:relative; z-index:4; }
.gbar__inner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding: 22px 28px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 50px rgba(26,43,77,.18); }
.gbar__left { display:flex; align-items:center; gap:16px; }
.gbar__g { width:44px; height:44px; flex:none; display:grid; place-items:center; }
.gbar__g svg { width:100%; height:100%; }
.gbar .stars { display:inline-flex; color:#fbbc05; margin-bottom:3px; }
.gbar .stars svg { width:18px; height:18px; }
.gbar__score { font-family:var(--font-display); font-weight:800; color:var(--navy); display:block; font-size:1.06rem; }
.gbar__sub { color: var(--text-muted); font-size:.88rem; }
.gbar__trust { display:flex; align-items:center; gap:13px; }
.gbar__shield { width:46px;height:46px;border-radius:12px;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none; }
.gbar__shield svg { width:24px;height:24px; }
.gbar__trust b { font-family:var(--font-display); color:var(--navy); display:block; line-height:1.15; }
.gbar__trust span { color:var(--text-muted); font-size:.88rem; }
@media (max-width: 560px){ .gbar__inner { justify-content:center; text-align:left; } .gbar__trust { width:100%; justify-content:flex-start; border-top:1px solid var(--line); padding-top:16px; } }

/* ============================ TRUST BAR =================================== */
.trustbar { background:#fff; border-top:1px solid var(--line); }
.trustbar__grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
@media (max-width: 760px){ .trustbar__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .trustbar__grid { grid-template-columns: 1fr; gap: 4px; } .trustbar { padding: 8px 0; } }
.trustitem { display:flex; gap:16px; align-items:center; padding: 26px 22px; position:relative; }
.trustitem > div { min-width: 0; }
.trustitem:not(:last-child)::after { content:""; position:absolute; right:0; top:24px; bottom:24px; width:1px; background:var(--line); }
@media (max-width:760px){ .trustitem::after{ display:none !important; } }
@media (max-width:560px){ .trustitem { padding: 16px 6px; } }
.trustitem .ico { width:54px;height:54px;border-radius:14px;background:var(--red-tint);color:var(--red);display:grid;place-items:center;flex:none; }
.trustitem .ico svg { width:27px;height:27px; }
.trustitem h3 { font-size:1.05rem; font-weight:800; }
.trustitem .num { font-family:var(--font-display); font-weight:900; color:var(--red); font-size:1.7rem; line-height:1; }
.trustitem p { color: var(--text-muted); font-size:.92rem; margin-top:4px; }

/* ============================ SERVICES GRID =============================== */
.cards { display:flex; flex-wrap:wrap; justify-content:center; gap: 22px; }
.cards .scard { flex: 1 1 300px; max-width: 384px; }
.scard {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 28px;
  position: relative; overflow:hidden; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.scard::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--red); transform: scaleY(0); transform-origin: bottom; transition: transform .3s var(--ease); }
.scard:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); border-color: transparent; }
.scard:hover::before { transform: scaleY(1); }
.scard__ico { width:60px;height:60px;border-radius:16px;background:var(--navy);color:#fff;display:grid;place-items:center;margin-bottom:20px;transition: background .25s; }
.scard__ico svg { width:30px;height:30px; }
.scard:hover .scard__ico { background: var(--red); }
.scard h3 { font-size:1.28rem; font-weight:800; }
.scard p { color: var(--text-muted); margin-top:10px; font-size:.98rem; }
.scard__link { display:inline-flex; align-items:center; gap:7px; margin-top:18px; font-family:var(--font-display); font-weight:800; color:var(--red); font-size:.92rem; text-transform:uppercase; letter-spacing:.03em; }
.scard__link svg { width:17px;height:17px; transition: transform .2s; }
.scard:hover .scard__link svg { transform: translateX(4px); }

/* ============================ DISTRICT MAP (dark) ========================= */
.mapsec { background: var(--navy-deep); color: var(--on-navy); position: relative; overflow: hidden; }
.mapsec::before { /* faint street-grid texture */
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(ellipse 90% 70% at 50% 45%, #000 30%, transparent 80%);
}
.mapsec__glow { position:absolute; left:50%; top:54%; width:78%; height:70%; transform:translate(-50%,-50%);
  background: radial-gradient(ellipse at center, rgba(225,35,28,.22), transparent 62%); filter: blur(20px); pointer-events:none; }
.mapsec .container { position: relative; z-index: 1; }
.mapsec .section-head h2 { color:#fff; }
.mapsec .eyebrow { color:#ff6b63; }
.mapsec .eyebrow::before { background:#ff6b63; }

.bezirkskarte { position:relative; margin: 0 auto clamp(30px,5vw,52px); max-width: 940px; }
.bezirkskarte::before { content:""; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:86%; height:84%; background: radial-gradient(ellipse at center, rgba(225,35,28,.34), transparent 64%);
  filter: blur(28px); z-index:0; pointer-events:none; }
.bezirkskarte__map { position:relative; z-index:1; width:100%; height:auto; display:block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.5)); }
.bezirkskarte__logo { position:absolute; top:0; left:-6%; width:28%; height:auto; z-index:2; pointer-events:none;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.45)); }
@media (max-width: 1080px){ .bezirkskarte__logo { left:0; width:30%; } }
.dgrid { display:grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 8px; }
@media (max-width: 1000px){ .dgrid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 720px){ .dgrid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px){ .dgrid { grid-template-columns: 1fr; } }
.dtile {
  position: relative; display:flex; flex-direction:column; justify-content:flex-end; background: var(--navy-deep);
  border:1.5px solid rgba(255,255,255,.10); border-radius: 16px; padding: 18px 18px 16px;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; overflow:hidden; min-height: 172px;
}
.dtile__img { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transition: transform .6s var(--ease); }
.dtile::before { content:""; position:absolute; inset:0; z-index:1; transition: background .3s;
  background: linear-gradient(180deg, rgba(18,32,57,.30) 0%, rgba(18,32,57,.62) 48%, rgba(10,18,34,.93) 100%); }
.dtile > *:not(.dtile__img) { position:relative; z-index:2; }
.dtile::after { content:""; position:absolute; inset:0; z-index:3; border-radius:16px; border:1.5px solid transparent; transition: border-color .25s, box-shadow .25s; pointer-events:none; }
.dtile:hover { transform: translateY(-5px); }
.dtile:hover .dtile__img { transform: scale(1.08); }
.dtile:hover::before { background: linear-gradient(180deg, rgba(18,32,57,.18) 0%, rgba(18,32,57,.5) 45%, rgba(10,18,34,.9) 100%); }
.dtile:hover::after { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 14px 30px rgba(225,35,28,.30); }
.dtile__pin { position:absolute; top:14px; right:14px; width:24px;height:24px; color: var(--red); opacity:.95; transition: transform .25s, opacity .25s; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.dtile:hover .dtile__pin { transform: translateY(-3px) scale(1.12); opacity:1; }
.dtile h3 { color:#fff; font-size:1.06rem; font-weight:800; line-height:1.12; letter-spacing:0; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.dtile p { color: rgba(255,255,255,.78); font-size:.78rem; margin-top:6px; line-height:1.4; }
.dtile__go { display:inline-flex; align-items:center; gap:6px; margin-top:11px; color:#ff8a83; font-weight:800; font-family:var(--font-display); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; opacity:0; transform: translateY(4px); transition:.25s; }
.dtile:hover .dtile__go { opacity:1; transform:none; }
.dtile.is-hq { border-color: rgba(225,35,28,.55); }
.dtile.is-hq .badge-hq { position:absolute; top:13px; left:14px; z-index:4; background:var(--red); color:#fff; font-family:var(--font-display); font-weight:800; font-size:.62rem; padding:4px 9px; border-radius:6px; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 2px 8px rgba(0,0,0,.3); }

/* ============================ MAP EMBED (click to load) =================== */
.mapembed { position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 16/9; background: var(--paper); box-shadow: var(--shadow); border:1px solid var(--line); }
.mapembed--lg { aspect-ratio: 16/6; }
@media (max-width:900px){ .mapembed--lg { aspect-ratio: 4/3; } }
@media (max-width:700px){ .mapembed{ aspect-ratio: 1/1; } }
.mapembed iframe { width:100%; height:100%; border:0; display:block; }
.mapembed__ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; padding: 26px; background: linear-gradient(160deg, var(--navy), var(--navy-deep)); color: var(--on-navy); }
.mapembed__ph > svg { width:44px; height:44px; color: var(--red); margin-bottom:6px; }
.mapembed__ph h3 { color:#fff; font-size:1.18rem; }
.mapembed__ph p { color: var(--on-navy-mut); max-width: 44ch; font-size:.9rem; margin: 2px 0 14px; line-height:1.55; }

/* ============================ REVIEWS (marquee L→R) ======================= */
.reviews__rating { display:flex; align-items:center; gap:14px; margin-top:10px; }
.reviews__rating .big { font-family:var(--font-display); font-weight:900; font-size:2.6rem; color:var(--navy); line-height:1; }
.stars { display:inline-flex; gap:3px; color: var(--red); }
.stars svg { width:20px;height:20px; }
.marquee { overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display:flex; gap:20px; width:max-content; animation: scrollLR 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ---- Marken-Karussell (Logomaten unter dem Hero) ---- */
.brands { background: var(--white); padding: clamp(4px,1vw,12px) 0 clamp(20px,3vw,32px); }
.brands__label { text-align:center; font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--text-muted); margin: 0 0 clamp(14px,2.2vw,22px); }
.brands__track { gap: clamp(38px,6vw,76px); align-items:center; animation-duration: 40s; }
.brandlogo { flex:none; display:flex; align-items:center; justify-content:center; }
.brandlogo img { height: clamp(30px,4.2vw,46px); width:auto; display:block; }

/* ---- Einsatzgebiete: Geo-Cluster-Baum (Prompt 9) ---- */
.geo-title { font-family:var(--font-display); color:var(--navy); font-size:1.18rem; margin: 30px 0 14px; padding-bottom:8px; border-bottom:2px solid var(--line); }
.geo-title:first-child { margin-top:0; }
.geo-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(258px,1fr)); gap:16px; }
.geo-bezirk { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:15px 18px; box-shadow: var(--shadow-sm); }
.geo-bezirk__head { display:flex; align-items:center; justify-content:space-between; gap:8px; font-family:var(--font-display); color:var(--navy); font-weight:800; text-decoration:none; font-size:1.02rem; }
.geo-bezirk__head svg { width:18px; height:18px; color:var(--red); flex:none; }
.geo-bezirk__head:hover b { color:var(--red); }
.chips--sm { margin-top:10px; gap:6px; }
.chips--sm .chip { font-size:.8rem; padding:4px 10px; }
@keyframes scrollLR { from { transform: translateX(calc(-50% - 10px)); } to { transform: translateX(0); } }
.rcard { width: min(340px, 82vw); flex:none; background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.rcard__head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.rcard__avatar { width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;flex:none; }
.rcard__head b { font-family:var(--font-display); display:block; color:var(--navy); }
.rcard__head span { font-size:.82rem; color:var(--text-muted); }
.rcard p { color:var(--text); font-size:.96rem; }
.rcard .stars svg { width:16px;height:16px; }
.gbadge { display:inline-flex; align-items:center; gap:8px; font-size:.85rem; color:var(--text-muted); margin-top:14px; }
.gbadge b { color:var(--navy); font-family:var(--font-display); }

/* ============================ 100% PREISGARANTIE (Sektion) =============== */
.pgsec { position:relative; overflow:hidden; text-align:center; color:#fff; padding: clamp(56px,8vw,108px) 0; background: var(--navy-deep); }
.pgsec__bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.pgsec::after { content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(9,14,27,.82) 0%, rgba(9,14,27,.9) 60%, rgba(9,14,27,.95) 100%); }
.pgsec__inner { position:relative; z-index:2; max-width: 820px; margin-inline:auto; }
.pgsec .eyebrow { justify-content:center; color:#ff6b63; font-weight:900; letter-spacing:.1em; }
.pgsec .eyebrow::before { display:none; }
.pgsec__seal { position:relative; display:inline-block; margin-bottom: 20px; }
.pgsec__seal::before { content:""; position:absolute; inset:-16%; background: radial-gradient(circle, rgba(225,35,28,.55), rgba(225,35,28,.12) 55%, transparent 70%); filter: blur(28px); z-index:0; }
.pgsec__seal img { position:relative; z-index:1; width: clamp(160px, 22vw, 232px); height:auto; filter: drop-shadow(0 16px 34px rgba(0,0,0,.55)); }
.pgsec h2 { color:#fff; font-size: clamp(1.9rem,4.6vw,3rem); font-weight:900; margin: 10px 0 0; letter-spacing:-.01em; }
.pgsec p { color: rgba(255,255,255,.9); font-size: 1.14rem; line-height:1.65; margin: 18px auto 0; max-width: 62ch; }
.pgsec p b { color:#fff; }
.pgsec__cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top: 28px; }

/* ============================ FIRMENFAHRZEUG ============================= */
.fleet__grid { display:grid; grid-template-columns: 1.12fr .88fr; gap: clamp(28px,5vw,56px); align-items:center; }
@media (max-width: 920px){ .fleet__grid { grid-template-columns: 1fr; gap: 30px; } }
.fleet__media { position:relative; }
.fleet__media img { width:100%; height:auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display:block; }
.fleet__badge { position:absolute; left:18px; bottom:18px; display:flex; align-items:center; gap:13px;
  background:#fff; border-radius:16px; box-shadow: var(--shadow-lg); padding: 12px 18px 12px 12px; }
.fleet__badge-ico { width:46px; height:46px; border-radius:12px; background:var(--red); color:#fff; display:grid; place-items:center; flex:none; }
.fleet__badge-ico svg { width:24px; height:24px; }
.fleet__badge b { display:block; font-family:var(--font-display); font-weight:900; color:var(--navy); font-size:1.18rem; line-height:1; }
.fleet__badge span { font-size:.82rem; color: var(--text-muted); }
.fleet__text h2 { font-size: clamp(1.7rem,4vw,2.6rem); font-weight:800; margin: 14px 0 0; }
.fleet__lead { font-size: 1.14rem; color: var(--navy); font-weight:600; margin-top:16px; }
.fleet__text p { margin-top: 14px; color: var(--text); }
.fleet__list { margin: 22px 0 8px; }
.fleet__cta { display:flex; flex-wrap:wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 460px){ .fleet__badge { left:12px; bottom:12px; padding:10px 14px 10px 10px; } .fleet__badge b { font-size:1.05rem; } }

/* ============================ VORHER – NACHHER =========================== */
.ba-section .eyebrow { font-size: clamp(1.05rem,2.2vw,1.45rem); font-weight:900; letter-spacing:.16em; gap:16px; margin-bottom:4px; }
.ba-section .eyebrow::before { width:50px; height:5px; border-radius:3px; }
.ba-block { margin-top: clamp(26px,4vw,40px); }
.ba-block + .ba-block { margin-top: clamp(40px,5vw,60px); padding-top: clamp(40px,5vw,60px); border-top: 1px solid rgba(255,255,255,.12); }
/* interaktiver Vorher-Nachher-Slider */
.ba-slider { position:relative; aspect-ratio: 4/3; max-width: 760px; margin-inline:auto; border-radius:18px; overflow:hidden;
  box-shadow: var(--shadow-lg); background: var(--navy-soft); user-select:none; touch-action: pan-y; cursor: ew-resize; --pos: 50%; }
.ba-slider__img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; display:block; pointer-events:none; }
.ba-slider__before { position:absolute; inset:0; overflow:hidden; clip-path: inset(0 calc(100% - var(--pos)) 0 0); will-change: clip-path; }
.ba-slider__line { position:absolute; top:0; bottom:0; left: var(--pos); width:3px; background:#fff; transform: translateX(-50%); box-shadow:0 0 0 1px rgba(0,0,0,.25); z-index:4; pointer-events:none; }
.ba-slider__handle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:48px; height:48px; border-radius:50%;
  background:#fff; box-shadow:0 5px 16px rgba(0,0,0,.45); display:grid; place-items:center; color:var(--navy); }
.ba-slider__handle svg { width:26px; height:26px; }
.ba-slider__range { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; background:transparent;
  -webkit-appearance:none; appearance:none; opacity:0; cursor:ew-resize; z-index:6; touch-action: pan-y; }
.ba-slider__range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:30px; height:300px; cursor:ew-resize; }
.ba-slider__range::-moz-range-thumb { width:30px; height:300px; border:0; background:transparent; cursor:ew-resize; }
.ba-slider:focus-within .ba-slider__handle { box-shadow: var(--ring-red), 0 5px 16px rgba(0,0,0,.45); }
.ba-badge { position:absolute; top:14px; z-index:5; font-family:var(--font-display); font-weight:800; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.04em; padding:7px 15px; border-radius:10px; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.35); pointer-events:none; }
.ba-badge--v { background: var(--red); left:14px; }
.ba-badge--n { background: var(--navy-deep); border:1px solid rgba(255,255,255,.28); right:14px; }
.ba-caps { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,3vw,30px); margin-top: clamp(20px,3vw,28px); }
.ba-cap__label { font-family:var(--font-display); font-weight:900; font-size:.92rem; text-transform:uppercase; letter-spacing:.12em; display:inline-block; margin-bottom:10px; }
.ba-cap__label--v { color:#ff6b63; }
.ba-cap__label--n { color:#fff; }
.ba-cap__h { display:block; font-family:var(--font-display); font-weight:800; color:#fff; font-size:1.12rem; text-transform:uppercase; letter-spacing:.02em; margin-bottom:8px; }
.ba-cap p { color: #fff; font-size: clamp(1.08rem,1.6vw,1.26rem); font-weight:700; line-height:1.5; }
.ba-cap__h + p { color: rgba(255,255,255,.82); font-size: 1rem; font-weight:500; line-height:1.6; }
.ba-checks { display:grid; gap:9px; margin-top:16px; }
.ba-checks li { display:flex; align-items:center; gap:11px; color:#fff; font-weight:600; font-size:.95rem; }
.ba-c { width:22px; height:22px; border-radius:50%; background:#16a34a; color:#fff; display:grid; place-items:center; flex:none; }
.ba-c svg { width:13px; height:13px; }
@media (max-width: 680px){ .ba-caps { grid-template-columns: 1fr; gap: 18px; } .ba-slider { aspect-ratio: 1/1; } .ba-slider__handle { width:42px;height:42px; } }

/* ============================ PRICES ====================================== */
.ptable { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm); }
.prow { display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 17px 24px; border-bottom:1px solid var(--line); }
.prow__label { min-width: 0; }
@media (max-width: 520px){ .prow { padding: 14px 15px; gap: 10px; } .prow__price { font-size: 1rem; } .prow__label b { font-size: .96rem; } }
.prow:last-child { border-bottom:0; }
.prow:nth-child(odd){ background: var(--paper); }
.prow__label b { font-family:var(--font-body); font-weight:700; color:var(--navy); display:block; }
.prow__label span { font-size:.85rem; color:var(--text-muted); }
.prow__price { font-family:var(--font-display); font-weight:800; color:var(--red); font-size:1.1rem; white-space:nowrap; }
.pgrid { display:grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items:start; }
@media (max-width:840px){ .pgrid { grid-template-columns:1fr; } }
.guarantees { display:grid; gap:12px; }
.guarantees li { display:flex; gap:12px; align-items:flex-start; font-weight:600; }
.guarantees .chk { width:26px;height:26px;border-radius:50%;background:var(--red-tint);color:var(--red);display:grid;place-items:center;flex:none; }
.guarantees .chk svg { width:15px;height:15px; }
.pnote { background: var(--navy); color:var(--on-navy); border-radius: var(--radius); padding: 22px 24px; }
.pnote b { color:#fff; font-family:var(--font-display); }
.pnote p { color: var(--on-navy-mut); margin-top:6px; font-size:.94rem; }
.pnote--seal { display:flex; align-items:center; gap:20px; overflow:hidden; position:relative; }
.pnote__sealwrap { position:relative; flex:none; display:grid; place-items:center; }
.pnote__sealwrap::before { content:""; position:absolute; inset:-22%; border-radius:50%;
  background: radial-gradient(circle, rgba(225,35,28,.55), rgba(225,35,28,.12) 55%, transparent 72%); filter: blur(14px); z-index:0; }
.pnote__seal { position:relative; z-index:1; width:124px; height:auto; display:block; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
@media (max-width: 520px){ .pnote--seal { flex-direction:column; text-align:center; gap:14px; } .pnote__seal { width:110px; } }

/* ============================ FAQ ========================================= */
.faq { max-width: 860px; margin-inline:auto; display:grid; gap:12px; }
.facc { border:1px solid var(--line); border-radius: var(--radius); background:#fff; overflow:hidden; transition: box-shadow .2s, border-color .2s; }
.facc[open] { box-shadow: var(--shadow); border-color: transparent; }
.facc summary { list-style:none; cursor:pointer; padding: 20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--font-display); font-weight:700; color:var(--navy); font-size:1.06rem; }
.facc summary::-webkit-details-marker { display:none; }
.facc summary .plus { width:30px;height:30px;border-radius:50%;background:var(--red-tint);color:var(--red);display:grid;place-items:center;flex:none;transition: transform .3s, background .2s, color .2s; font-size:1.3rem; line-height:1; }
.facc[open] summary .plus { transform: rotate(45deg); background: var(--red); color:#fff; }
.facc__body { padding: 0 24px 22px; color: var(--text-muted); }
.facc__body p { max-width: 70ch; }

/* ============================ CTA BAND ==================================== */
.ctaband { background: linear-gradient(120deg, var(--navy), var(--navy-deep)); color:#fff; position:relative; overflow:hidden; }
.ctaband::before { content:""; position:absolute; right:-6%; top:-30%; width:50%; height:160%; background: radial-gradient(circle, rgba(225,35,28,.30), transparent 60%); filter: blur(10px); }
.ctaband .container { position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.ctaband h2 { color:#fff; font-size: clamp(1.6rem,3.6vw,2.5rem); font-weight:900; max-width: 18ch; }
.ctaband p { color: var(--on-navy-mut); margin-top:10px; }
.ctaband__phone { font-family:var(--font-display); font-weight:900; font-size: clamp(1.8rem,4vw,2.6rem); color:#fff; display:inline-flex; align-items:center; gap:14px; }
.ctaband__phone svg { width:36px;height:36px;color:var(--red); }
.ctaband__btns { display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }

/* ============================ FOOTER ====================================== */
.footer { background: var(--navy-deep); color: var(--on-navy-mut); padding: 64px 0 0; }
.footer__grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
@media (max-width: 900px){ .footer__grid { grid-template-columns: 1fr 1fr; gap:30px; } }
@media (max-width: 520px){ .footer__grid { grid-template-columns: 1fr; } }
.footer h4 { color:#fff; font-size:.92rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:18px; font-weight:800; }
.footer a { color: var(--on-navy-mut); display:inline-block; padding:5px 0; transition: color .15s; }
.footer a:hover { color:#fff; }
.footer__brand img { width:190px; height:auto; background:#fff; border-radius:14px; padding:12px 16px; display:block; }
.footer__brand p { margin-top:16px; font-size:.92rem; max-width: 34ch; }
.footer__nap { margin-top:18px; font-size:.92rem; display:grid; gap:8px; }
.footer__nap a { display:flex; gap:10px; align-items:flex-start; padding:0; }
.footer__nap svg { width:18px;height:18px;color:var(--red);flex:none;margin-top:3px; }
.footer__col ul { display:grid; gap:2px; }
.footer__bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding: 22px 0; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.84rem; }
.footer__bottom a { padding:0; }

/* ============================ STICKY MOBILE CALL BAR ====================== */
.callbar { position: fixed; bottom:0; left:0; right:0; z-index:65; display:none; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top:1px solid var(--line); box-shadow: 0 -6px 24px rgba(26,43,77,.12); }
.callbar .btn { flex:1; min-height:54px; }
.callbar .btn--wa { background: var(--green); color:#fff; box-shadow: 0 10px 24px rgba(37,211,102,.3); }
.callbar .btn--wa:hover { filter: brightness(.95); }
@media (max-width: 760px){ .callbar { display:flex; } body { padding-bottom: 78px; } }

/* ============================ COOKIE-HINWEIS ============================== */
.cookie { position: fixed; left:0; right:0; bottom:0; z-index: 80; }
.cookie[hidden] { display:none; }
.cookie__inner { max-width: 1180px; margin: 0 auto 16px; margin-inline: clamp(12px, 3vw, auto);
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 18px 22px; display:flex; align-items:center; gap: 22px; justify-content:space-between; flex-wrap:wrap;
  transform: translateY(160%); transition: transform .4s var(--ease); }
.cookie.is-in .cookie__inner { transform: none; }
.cookie__text b { font-family:var(--font-display); color: var(--navy); font-size:1.02rem; }
.cookie__text p { color: var(--text-muted); font-size:.9rem; margin-top:4px; max-width: 72ch; line-height:1.5; }
.cookie__text a { color: var(--red); text-decoration: underline; }
.cookie__btns { display:flex; gap:10px; flex-wrap:wrap; flex:none; }
.cookie__btns .btn { min-height:48px; padding: 12px 22px; }
@media (max-width: 760px){
  .cookie__inner { flex-direction:column; align-items:stretch; gap:14px; margin-bottom: 12px; }
  .cookie__btns .btn { flex:1; }
}

/* ============================ FLOATING ACTION BUTTONS ===================== */
.fabs { position: fixed; right: 20px; bottom: 26px; z-index: 64; display:flex; flex-direction:column; gap: 14px; }
.fab { width: 60px; height: 60px; border-radius: 50%; display:grid; place-items:center; color:#fff; position:relative;
  box-shadow: 0 10px 28px rgba(26,43,77,.28); transition: transform .2s var(--ease), box-shadow .2s, width .25s var(--ease), border-radius .25s; }
.fab svg { width: 27px; height: 27px; }
.fab--call { background: var(--red); }
.fab--wa { background: var(--green); }
.fab:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(26,43,77,.34); }
.fab__label { position:absolute; right: 70px; background: var(--navy); color:#fff; font-family:var(--font-display); font-weight:800; font-size:.82rem;
  padding: 8px 13px; border-radius: 9px; white-space:nowrap; opacity:0; transform: translateX(8px); transition: opacity .2s, transform .2s; pointer-events:none; box-shadow: var(--shadow); }
.fab__label::after { content:""; position:absolute; right:-5px; top:50%; transform:translateY(-50%) rotate(45deg); width:10px;height:10px; background:var(--navy); }
.fab:hover .fab__label { opacity:1; transform: translateX(0); }
.fab--call::before { content:""; position:absolute; inset:0; border-radius:50%; box-shadow: 0 0 0 0 rgba(225,35,28,.5); animation: fabpulse 2.4s infinite; }
@keyframes fabpulse { 0%{ box-shadow:0 0 0 0 rgba(225,35,28,.45) } 70%{ box-shadow:0 0 0 16px rgba(225,35,28,0) } 100%{ box-shadow:0 0 0 0 rgba(225,35,28,0) } }
@media (max-width: 760px){ .fabs { display:none; } } /* Mobil nutzt die untere Callbar */
@media (prefers-reduced-motion: reduce){ .fab--call::before { animation: none; } }

/* ============================ GENERIC PAGE BITS =========================== */
.pagehero { background: linear-gradient(160deg, var(--navy), var(--navy-deep)); color:#fff; position:relative; overflow:hidden; padding: clamp(48px,7vw,90px) 0 clamp(40px,6vw,64px); }
.pagehero::before { content:""; position:absolute; right:-4%; top:-40%; width:46%; height:180%; background: radial-gradient(circle, rgba(225,35,28,.24), transparent 60%); z-index:1; }
.pagehero .container { position:relative; z-index:2; }
.pagehero__bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.pagehero--img::after { content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(100deg, rgba(18,32,57,.93) 0%, rgba(18,32,57,.82) 42%, rgba(26,43,77,.62) 72%, rgba(26,43,77,.42) 100%); }
@media (max-width: 760px){ .pagehero--img::after { background: linear-gradient(180deg, rgba(18,32,57,.86) 0%, rgba(18,32,57,.8) 60%, rgba(18,32,57,.74) 100%); } }
.breadcrumb { display:flex; gap:8px; flex-wrap:wrap; font-size:.86rem; color: var(--on-navy-mut); margin-bottom:18px; }
.breadcrumb a:hover { color:#fff; } .breadcrumb .sep { opacity:.5; }
.pagehero h1 { color:#fff; font-size: clamp(1.7rem,5vw,3.2rem); font-weight:900; max-width: 20ch; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
.pagehero .lead { color: var(--on-navy-mut); font-size:1.15rem; max-width: 60ch; margin-top:16px; }
.pagehero__cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.5rem,3.2vw,2.1rem); margin: 36px 0 14px; font-weight:800; }
.prose h3 { font-size:1.25rem; margin: 26px 0 10px; }
.prose p { margin: 14px 0; color: var(--text); }
.chk { display:inline-grid; place-items:center; flex:none; }
.chk svg { width:15px; height:15px; }
.bullets { display:grid; gap:12px; margin: 18px 0; }
.bullets li { display:flex; gap:12px; align-items:flex-start; }
.bullets .chk { width:26px;height:26px;border-radius:50%;background:var(--red-tint);color:var(--red);display:grid;place-items:center;flex:none;margin-top:2px; }
.bullets .chk svg { width:15px;height:15px; }

.split { display:grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items:start; }
@media (max-width: 900px){ .split { grid-template-columns:1fr; } }
.sticky-aside { position: sticky; top: calc(var(--header-h) + 20px); }
.sidecard { background:#fff; border:2px solid var(--red); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow); }
.sidecard h3 { font-size:1.2rem; }
.sidecard .price { font-family:var(--font-display); font-weight:900; color:var(--red); font-size:2.4rem; line-height:1; margin:8px 0; }
.sidecard ul { display:grid; gap:9px; margin:16px 0; }
.sidecard li { display:flex; gap:10px; font-size:.92rem; font-weight:600; }
.sidecard li .chk { color:var(--red); flex:none; }
.sidecard .btn { margin-top:8px; }

.chips { display:flex; flex-wrap:wrap; gap:10px; margin: 8px 0; }
.chip { background:var(--paper); border:1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-weight:700; color:var(--navy); font-size:.9rem; }
.chip--link:hover { border-color: var(--red); color: var(--red); }

/* district overview cards (light) */
.dlist { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
@media (max-width:860px){ .dlist{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:520px){ .dlist{ grid-template-columns: 1fr;} }
.dlink { display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; transition: .2s var(--ease); }
.dlink:hover { border-color:var(--red); transform: translateY(-3px); box-shadow: var(--shadow); }
.dlink b { font-family:var(--font-display); color:var(--navy); font-size:1.05rem; }
.dlink span { font-size:.82rem; color:var(--text-muted); display:block; margin-top:2px; }
.dlink svg { width:20px;height:20px;color:var(--red);flex:none; }

/* contact */
.cgrid { display:grid; grid-template-columns: 1fr 1fr; gap: 30px; }
@media (max-width:820px){ .cgrid{ grid-template-columns:1fr; } }
.cinfo li { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.cinfo .ico { width:48px;height:48px;border-radius:12px;background:var(--red-tint);color:var(--red);display:grid;place-items:center;flex:none; }
.cinfo b { font-family:var(--font-display); color:var(--navy); display:block; }
.cinfo a, .cinfo span { color: var(--text); }
.form { display:grid; gap:14px; background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.form label { font-weight:700; color:var(--navy); font-size:.9rem; display:block; margin-bottom:6px; }
.form input, .form textarea { width:100%; padding: 13px 15px; border:1.5px solid var(--line); border-radius: 11px; font: inherit; background: var(--paper); transition: border-color .15s, box-shadow .15s; }
.form input:focus, .form textarea:focus { border-color: var(--red); box-shadow: var(--ring-red); outline:none; background:#fff; }
.form .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.form__consent { display:flex; gap:10px; align-items:flex-start; font-weight:400 !important; color:var(--text); font-size:.86rem; line-height:1.45; }
.form__consent input { width:auto !important; margin-top:3px; flex:none; accent-color: var(--red); }
.form__consent a { color:var(--red); }
.form__status { font-size:.9rem; margin:0; }
.form__status.is-ok { color:#1a7f37; font-weight:700; background:#eafbf0; border:1px solid #b7e9c6; border-radius:11px; padding:12px 14px; }
.form__status.is-err { color:var(--red-deep); font-weight:700; background:var(--red-tint); border:1px solid #f6c9c6; border-radius:11px; padding:12px 14px; }

/* scroll reveal — only hide when JS is active (no-JS users see everything) */
.js .r { opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .r.in { opacity:1; transform:none; }
.r.d1{ transition-delay:.08s } .r.d2{ transition-delay:.16s } .r.d3{ transition-delay:.24s } .r.d4{ transition-delay:.32s }

/* misc */
.tag-warn { background: var(--red-tint); border:1px solid #f6c9c6; color: var(--red-deep); border-radius: 10px; padding: 10px 14px; font-size:.86rem; font-weight:600; }
.muted { color: var(--text-muted); }
.mt-s{margin-top:10px}.mt{margin-top:22px}.mt-l{margin-top:40px}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal-hero > *, .hero__right.reveal-hero-card, .r { opacity:1 !important; transform:none !important; }
  .marquee__track { animation: none !important; }
}