/* ==========================================================================
   Robins Entrümpelung & Haushaltsauflösung – Stylesheet
   Mobile first · Farben: Weiß / Grau / Navy / Blau
   ========================================================================== */

@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-var.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #0e2a47;
  --navy-deep: #0a1f36;
  --navy-soft: #17385c;
  --blue: #1f5cc4;
  --blue-dark: #174ba3;
  --blue-light: #e9f0fb;
  --blue-line: #c9d9f2;
  --ink: #102338;
  --text: #2a3746;
  --muted: #5c6a7b;
  --line: #dce3eb;
  --line-strong: #c6d0dc;
  --mist: #f3f5f8;
  --mist-2: #e9edf2;
  --white: #fff;
  --wa: #1ea952;
  --wa-dark: #178a42;
  --error: #b42318;
  --success: #117a45;

  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 18px;
  --shadow-card: 0 1px 2px rgba(14, 42, 71, .06), 0 8px 24px -14px rgba(14, 42, 71, .22);
  --shadow-float: 0 24px 60px -24px rgba(10, 31, 54, .45), 0 2px 8px rgba(10, 31, 54, .08);
  --container: 1200px;
  --gutter: 20px;
  --header-h: 68px;
  --ease: cubic-bezier(.22, .7, .2, 1);
}

@media (min-width: 900px) { :root { --gutter: 32px; --header-h: 80px; } }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
  margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; color: var(--text);
  background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-dark); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 600; line-height: 1.16; letter-spacing: -.012em; margin: 0 0 .55em; text-wrap: balance; }
h1 { font-size: clamp(2.05rem, 5.2vw, 3.55rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.4rem); line-height: 1.25; }
h4 { font-family: var(--sans); font-size: 1.02rem; font-weight: 700; letter-spacing: 0; }
strong { color: var(--ink); font-weight: 650; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .band :focus-visible, .site-footer :focus-visible { outline-color: #9fc0ff; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.narrow { max-width: 780px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; }
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Icons ---------- */
.ic { width: 22px; height: 22px; flex: none; }
.ic-sm { width: 18px; height: 18px; }
.ic-lg { width: 28px; height: 28px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: .85em 1.5em;
  font: 700 .95rem/1.2 var(--sans); letter-spacing: .01em; text-decoration: none; border-radius: var(--r-sm);
  border: 2px solid transparent; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease);
  -webkit-tap-highlight-color: transparent; text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn-caps { text-transform: uppercase; letter-spacing: .045em; font-size: .9rem; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-soft); color: #fff; }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--blue-light); color: var(--navy); }
.btn-outline { border-color: var(--line-strong); color: var(--navy); background: #fff; }
.btn-outline:hover { border-color: var(--navy); color: var(--navy); }
.btn-outline-light { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.04); }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-dark); color: #fff; }
.btn-block { width: 100%; }
.btn-group { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-group .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .btn-group .btn { flex: 0 0 auto; } }

.text-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 650; text-decoration: none; color: var(--blue); }
.text-link .ic { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.text-link:hover .ic { transform: translateX(3px); }

/* ---------- Topbar & Header ---------- */
.topbar { display: none; background: var(--navy-deep); color: #c9d6e6; font-size: .86rem; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 24px; }
.topbar a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.topbar a:hover { color: #bcd3ff; }
.topbar .ic { width: 16px; height: 16px; opacity: .85; }
.topbar-links { display: flex; gap: 26px; }
.topbar-area { display: inline-flex; align-items: center; gap: 8px; }
@media (min-width: 900px) { .topbar { display: block; } }

.site-header { position: sticky; top: 0; z-index: 90; background: rgba(255,255,255,.97); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 20px -16px rgba(14,42,71,.35); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 20px; }

.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); flex: none; }
.logo img { width: 40px; height: 40px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-name { font-family: var(--serif); font-weight: 700; font-size: 1.32rem; letter-spacing: -.01em; color: var(--navy); }
.logo-sub { font-size: .66rem; font-weight: 650; color: var(--muted); letter-spacing: .02em; margin-top: 4px; }
@media (min-width: 380px) { .logo-sub { font-size: .7rem; } }

.main-nav { display: none; }
.nav-list { list-style: none; display: flex; align-items: center; gap: 2px; }
.nav-list > li { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 3px; padding: 10px 8px; color: var(--ink); font-weight: 600; font-size: .93rem; text-decoration: none; border-radius: var(--r-sm); white-space: nowrap; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--blue); }
.nav-link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--blue); border-radius: 0; }
.nav-link .ic { width: 15px; height: 15px; transition: transform .2s; }
.has-mega:hover > .nav-link .ic, .has-mega:focus-within > .nav-link .ic { transform: rotate(180deg); }
.nav-cta { margin-left: 8px; min-height: 46px; padding: .7em 1.2em; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-call { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--navy); border: 1px solid var(--line); }

.mega {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 8px); min-width: 620px; padding: 26px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-float); opacity: 0; visibility: hidden;
  transition: opacity .18s, transform .22s var(--ease), visibility 0s linear .22s; z-index: 5;
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.has-mega:hover > .mega, .has-mega:focus-within > .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.mega-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 18px; list-style: none; }
.mega-grid a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .94rem; }
.mega-grid a:hover { background: var(--mist); color: var(--blue); }
.mega-grid .ic { color: var(--blue); width: 20px; height: 20px; }
.mega-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); }
.mega--cities { min-width: 760px; }
.mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mega-cols h4 { font-size: .8rem; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.mega-cols ul { list-style: none; }
.mega-cols a { display: block; padding: 5px 0; color: var(--ink); text-decoration: none; font-size: .93rem; font-weight: 550; }
.mega-cols a:hover { color: var(--blue); }

.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--navy); cursor: pointer; }

@media (min-width: 1200px) {
  .main-nav { display: block; }
  .menu-toggle, .header-call { display: none; }
}


/* ---------- Mobiles Menü ---------- */
.mobile-nav { position: fixed; inset: 0; z-index: 150; visibility: hidden; }
.mobile-nav.is-open { visibility: visible; }
.mobile-nav-backdrop { position: absolute; inset: 0; background: rgba(8, 22, 40, .55); opacity: 0; transition: opacity .3s; }
.mobile-nav.is-open .mobile-nav-backdrop { opacity: 1; }
.mobile-nav-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: #fff; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .35s var(--ease); box-shadow: var(--shadow-float);
}
.mobile-nav.is-open .mobile-nav-panel { transform: none; }
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 var(--gutter); border-bottom: 1px solid var(--line); flex: none; }
.mobile-nav-body { flex: 1; overflow-y: auto; padding: 8px var(--gutter) 20px; overscroll-behavior: contain; }
.m-list { list-style: none; }
.m-list > li { border-bottom: 1px solid var(--line); }
.m-link, .m-list summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 2px; color: var(--ink); text-decoration: none; font-weight: 650; font-size: 1.08rem; cursor: pointer; list-style: none; }
.m-list summary::-webkit-details-marker { display: none; }
.m-list summary .ic { transition: transform .25s; color: var(--muted); }
.m-list details[open] summary .ic { transform: rotate(180deg); }
.m-sub { list-style: none; padding: 0 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.m-sub a { display: block; padding: 8px 0; color: var(--text); text-decoration: none; font-size: .96rem; }
.m-sub a:hover { color: var(--blue); }
.m-sub .m-all { grid-column: 1 / -1; font-weight: 650; color: var(--blue); }
.mobile-nav-foot { padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 10px; flex: none; background: var(--mist); }
.mobile-nav-foot .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.nav-open { overflow: hidden; }

/* ---------- Sektionen ---------- */
.section { padding-block: clamp(64px, 9vw, 112px); }
.section-tight { padding-block: clamp(48px, 6vw, 72px); }
.bg-mist { background: var(--mist); }
.bg-navy { background: var(--navy); color: #d3deeb; }
.bg-navy h2, .bg-navy h3 { color: #fff; }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 52px); }
.section-head p { color: var(--muted); font-size: 1.1rem; margin: 0; }
.section-head--split { max-width: none; display: grid; gap: 16px; align-items: end; }
@media (min-width: 900px) { .section-head--split { grid-template-columns: 1.3fr 1fr; gap: 48px; } }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.24rem); line-height: 1.6; color: var(--muted); }

/* Maßlinie – wiederkehrendes Motiv (Grundriss / Platz schaffen) */
.dimline { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .85rem; font-weight: 600; margin-bottom: 18px; }
.dimline::before, .dimline::after { content: ""; height: 11px; flex: 1; max-width: 90px; border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; opacity: .55; }
.dimline--light { color: #b9cbe3; }

/* ---------- Hero Startseite ---------- */
.hero {
  position: relative; color: #fff; isolation: isolate; overflow: hidden;
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(100deg, rgba(8,24,44,.93) 0%, rgba(8,24,44,.78) 48%, rgba(8,24,44,.5) 100%),
    url("../img/hero.jpg"),
    url("../img/grundriss-hell.svg"),
    radial-gradient(120% 90% at 85% 10%, #1b3d66 0%, var(--navy-deep) 60%);
  background-size: cover, cover, min(900px, 110%) auto, cover;
  background-position: center, center, right -120px bottom -40px, center;
  background-repeat: no-repeat;
}
.hero-inner { display: grid; gap: 40px; padding-block: clamp(56px, 9vw, 110px) clamp(40px, 6vw, 72px); align-items: center; }
.hero h1 { color: #fff; font-size: clamp(2.15rem, 5.4vw, 3.8rem); max-width: 16ch; margin-bottom: .45em; }
.hero-sub { font-size: clamp(1.12rem, 1.8vw, 1.32rem); color: #dbe5f1; max-width: 34ch; margin-bottom: 30px; }
.hero .btn-group { margin-bottom: 34px; }
.hero-points { list-style: none; display: grid; gap: 10px 26px; color: #dbe5f1; font-size: .98rem; }
.hero-points li { display: flex; align-items: center; gap: 10px; }
.hero-points .ic { color: #8fb6f5; width: 20px; height: 20px; }
@media (min-width: 640px) { .hero-points { grid-template-columns: repeat(2, max-content); } }
@media (min-width: 1000px) {
  .hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 56px; min-height: min(78vh, 720px); }
}

/* Schnellstart-Karte (Hero & Seitenköpfe) */
.quick-card { background: #fff; color: var(--text); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-float); position: relative; }
.quick-card h2, .quick-card .qc-title { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: var(--ink); margin: 0 0 4px; line-height: 1.2; }
.quick-card p { color: var(--muted); font-size: .96rem; margin-bottom: 18px; }
.qc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; list-style: none; }
.qc-grid a { display: flex; align-items: center; gap: 10px; padding: 12px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-weight: 650; font-size: .95rem; transition: border-color .15s, background-color .15s; }
.qc-grid a:hover { border-color: var(--blue); background: var(--blue-light); color: var(--navy); }
.qc-grid .ic { color: var(--blue); width: 22px; height: 22px; }
.qc-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: .86rem; color: var(--muted); }
.qc-foot .ic { width: 16px; height: 16px; color: var(--success); }
.qc-steps { display: flex; gap: 6px; margin-bottom: 16px; }
.qc-steps span { height: 4px; flex: 1; border-radius: 2px; background: var(--mist-2); }
.qc-steps span:first-child { background: var(--blue); }

/* ---------- Vertrauensleiste ---------- */
.trust { border-bottom: 1px solid var(--line); background: #fff; }
.trust-grid { list-style: none; display: grid; gap: 0; }
.trust-grid li { display: flex; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.trust-grid li:last-child { border-bottom: 0; }
.trust-grid .ic { color: var(--blue); width: 28px; height: 28px; margin-top: 2px; }
.trust-grid h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 700; margin: 0 0 4px; letter-spacing: 0; }
.trust-grid p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
@media (min-width: 700px) { .trust-grid { grid-template-columns: 1fr 1fr; } .trust-grid li { border-bottom: 0; padding: 30px 24px 30px 0; } }
@media (min-width: 1100px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } .trust-grid li + li { border-left: 1px solid var(--line); padding-left: 24px; } }

/* ---------- Leistungen ---------- */
.feature-services { display: grid; gap: 20px; margin-bottom: 20px; }
@media (min-width: 900px) { .feature-services { grid-template-columns: 1fr 1fr; } }
.feature {
  position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3.5vw, 40px); border-radius: var(--r-lg); text-decoration: none; color: #d3deeb;
  background: var(--navy) url("../img/grundriss-hell.svg") right -160px bottom -130px / 560px auto no-repeat; overflow: hidden; min-height: 320px;
}
.feature + .feature { background-color: var(--navy-soft); }
.feature .ic-wrap { width: 54px; height: 54px; border-radius: 12px; background: rgba(255,255,255,.1); display: grid; place-items: center; color: #fff; margin-bottom: 22px; }
.feature h3 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.feature p { max-width: 44ch; }
.feature ul { list-style: none; display: grid; gap: 8px; margin: 4px 0 26px; }
.feature li { display: flex; gap: 10px; align-items: center; }
.feature li .ic { color: #8fb6f5; width: 18px; height: 18px; }
.feature .text-link { color: #fff; margin-top: auto; }
.feature:hover { color: #e6eef7; }

.service-list { list-style: none; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.service-list li { border-bottom: 1px solid var(--line); }
.service-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 16px; align-items: center; padding: 20px 4px; color: var(--ink); text-decoration: none; }
.service-list .sl-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--blue-light); color: var(--blue); display: grid; place-items: center; }
.service-list strong { display: block; font-size: 1.04rem; }
.service-list span.sl-text { display: block; color: var(--muted); font-size: .92rem; line-height: 1.45; margin-top: 2px; }
.service-list .ic-arrow { color: var(--line-strong); transition: color .2s, transform .2s var(--ease); width: 20px; height: 20px; }
.service-list a:hover strong { color: var(--blue); }
.service-list a:hover .ic-arrow { color: var(--blue); transform: translateX(3px); }
@media (min-width: 700px) { .service-list { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
@media (min-width: 1100px) { .service-list { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Ablauf ---------- */
.steps { list-style: none; display: grid; gap: 0; counter-reset: step; position: relative; }
.steps li { position: relative; padding: 0 0 30px 64px; }
.steps li::before {
  counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font: 600 1.15rem var(--serif); color: var(--navy); background: #fff; border: 1.5px solid var(--navy); z-index: 1;
}
.steps li::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; border-left: 1.5px dashed var(--line-strong); }
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps li:last-child::before { background: var(--navy); color: #fff; }
.steps h3 { font-family: var(--sans); font-size: 1.08rem; font-weight: 700; letter-spacing: 0; margin: 9px 0 6px; }
.steps p { margin: 0; color: var(--muted); font-size: .97rem; }
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(var(--n, 5), 1fr); gap: 28px; }
  .steps li { padding: 64px 0 0; }
  .steps li::after { left: 50px; right: -22px; top: 21px; bottom: auto; border-left: 0; border-top: 1.5px dashed var(--line-strong); }
  .steps li:last-child::after { display: none; }
}
.bg-mist .steps li::before { background: var(--mist); }
.bg-mist .steps li:last-child::before { background: var(--navy); }

/* ---------- Vorher / Nachher ---------- */
.ba-grid { display: grid; gap: 24px; }
@media (min-width: 760px) { .ba-grid { grid-template-columns: repeat(2, 1fr); } .ba-card:first-child { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .ba-grid { grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; } .ba-card:first-child { grid-column: 1; grid-row: 1 / span 2; } }
.ba-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.ba { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist-2); --pos: 50%; user-select: none; touch-action: pan-y; }
.ba-card:first-child .ba { flex: 1; min-height: 280px; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(14,42,71,.15); pointer-events: none; }
.ba-knob { position: absolute; top: 50%; left: var(--pos); width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; color: var(--navy); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(10,31,54,.3); pointer-events: none; }
.ba-tag { position: absolute; top: 14px; padding: 5px 11px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: rgba(10,31,54,.78); color: #fff; pointer-events: none; }
.ba-tag--before { left: 14px; }
.ba-tag--after { right: 14px; background: rgba(255,255,255,.92); color: var(--navy); }
.ba input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba input[type="range"]:focus-visible ~ .ba-knob { outline: 3px solid var(--blue); outline-offset: 3px; }
.ba-body { padding: 20px 22px 22px; }
.ba-body h3 { margin-bottom: 4px; font-size: 1.2rem; }
.ba-body p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---------- Über-uns-Teaser / Split ---------- */
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1.1fr; gap: 72px; } .split--rev .split-media { order: 2; } }
.split-media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--navy); max-height: 620px; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-note { position: absolute; left: 18px; right: 18px; bottom: 18px; background: rgba(255,255,255,.95); border-radius: var(--r); padding: 16px 18px; display: flex; gap: 14px; align-items: center; font-size: .95rem; color: var(--ink); }
.split-note .ic { color: var(--blue); width: 26px; height: 26px; }
.check-list { list-style: none; display: grid; gap: 12px; margin: 24px 0 30px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list .ic { color: var(--blue); margin-top: 3px; width: 20px; height: 20px; }

/* ---------- Standorte ---------- */
.regions { display: grid; gap: 28px; }
@media (min-width: 860px) { .regions { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.region { border-top: 2px solid var(--navy); padding-top: 18px; }
.region h3 { font-size: 1.18rem; margin-bottom: 14px; }
.city-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.city-list a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font-size: .93rem; font-weight: 600; transition: border-color .15s, color .15s; }
.city-list a:hover { border-color: var(--blue); color: var(--blue); }
.city-list .ic { width: 15px; height: 15px; color: var(--blue); }
.regions-note { margin-top: 36px; padding: 20px 22px; border-radius: var(--r); background: #fff; border: 1px dashed var(--line-strong); color: var(--muted); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.regions-note p { margin: 0; }

/* ---------- Anfrage-Band ---------- */
.band { position: relative; overflow: hidden; background: var(--navy) url("../img/grundriss-hell.svg") right -140px center / 760px auto no-repeat; color: #d3deeb; }
.band-inner { display: grid; gap: 28px; align-items: center; padding-block: clamp(56px, 7vw, 88px); }
.band h2 { color: #fff; margin-bottom: .35em; }
.band p { margin: 0; max-width: 52ch; font-size: 1.08rem; }
@media (min-width: 960px) { .band-inner { grid-template-columns: 1.3fr auto; gap: 48px; } }

/* WhatsApp-Hinweis */
.wa-box { display: grid; gap: 18px; align-items: center; padding: 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); }
.wa-box .wa-icon { width: 52px; height: 52px; border-radius: 50%; background: #e7f6ec; color: var(--wa); display: grid; place-items: center; }
.wa-box h3 { font-family: var(--sans); font-size: 1.1rem; font-weight: 700; letter-spacing: 0; margin: 0 0 4px; }
.wa-box p { margin: 0; color: var(--muted); font-size: .96rem; }
@media (min-width: 760px) { .wa-box { grid-template-columns: auto 1fr auto; padding: 24px 28px; } }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 2px; cursor: pointer; list-style: none; font-weight: 650; font-size: 1.07rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq-icon { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-strong); transition: background-color .2s, border-color .2s; }
.faq summary .faq-icon::before, .faq summary .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.8px; background: var(--navy); transform: translate(-50%, -50%); transition: transform .25s var(--ease); }
.faq summary .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary .faq-icon { background: var(--navy); border-color: var(--navy); }
.faq details[open] summary .faq-icon::before, .faq details[open] summary .faq-icon::after { background: #fff; }
.faq details[open] summary .faq-icon::after { transform: translate(-50%, -50%) rotate(0); }
.faq summary:hover { color: var(--blue); }
.faq .faq-a { padding: 0 48px 22px 2px; color: var(--text); }
.faq .faq-a p:last-child { margin: 0; }
.faq details[open] .faq-a { animation: faqIn .3s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }

/* ---------- Unterseiten-Kopf ---------- */
.page-hero {
  position: relative; background-color: var(--mist);
  background-image: url("../img/grundriss-dunkel.svg"), linear-gradient(rgba(14,42,71,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(14,42,71,.045) 1px, transparent 1px);
  background-size: 820px auto, 28px 28px, 28px 28px; background-position: right -260px top 40px, 0 0, 0 0; background-repeat: no-repeat, repeat, repeat;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 999px) { .page-hero { background-image: linear-gradient(rgba(14,42,71,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(14,42,71,.045) 1px, transparent 1px); background-size: 28px 28px, 28px 28px; background-position: 0 0, 0 0; background-repeat: repeat, repeat; } }
.page-hero-inner { display: grid; gap: 36px; padding-block: 28px clamp(48px, 7vw, 84px); align-items: start; }
@media (min-width: 1000px) { .page-hero-inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); gap: 60px; align-items: center; } }
.page-hero .lead { max-width: 58ch; margin-bottom: 28px; }
.page-hero .btn-group { margin-bottom: 8px; }
.page-hero .quick-card { box-shadow: var(--shadow-card); border: 1px solid var(--line); }
.page-hero--simple .page-hero-inner { grid-template-columns: minmax(0, 1fr); }

.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .88rem; color: var(--muted); margin-bottom: clamp(26px, 4vw, 42px); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--line-strong); border-top: 1.5px solid var(--line-strong); transform: rotate(45deg); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- Inhaltsblöcke Unterseiten ---------- */
.content-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .content-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr); gap: 72px; align-items: start; } }
.prose { max-width: 68ch; }
.prose p { font-size: 1.07rem; }
.prose h2 { margin-top: 0; }
.glance { background: var(--mist); border-radius: var(--r-lg); padding: 28px; border: 1px solid var(--line); }
@media (min-width: 1000px) { .glance { position: sticky; top: calc(var(--header-h) + 24px); } }
.glance h3 { font-size: 1.25rem; margin-bottom: 14px; }
.glance .check-list { margin: 0 0 22px; }
.glance .btn { width: 100%; }
.glance .glance-contact { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: .96rem; }
.glance .glance-contact a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 650; text-decoration: none; }
.glance .glance-contact a:hover { color: var(--blue); }
.glance .glance-contact .ic { color: var(--blue); width: 19px; height: 19px; }
.glance .glance-contact .ic-wa { color: var(--wa); }

.benefits { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.benefits > div { background: #fff; padding: 28px; }
.benefits .ic { color: var(--blue); width: 28px; height: 28px; margin-bottom: 16px; }
.benefits h3 { font-family: var(--sans); font-size: 1.06rem; font-weight: 700; letter-spacing: 0; margin-bottom: 6px; }
.benefits p { margin: 0; color: var(--muted); font-size: .96rem; }
@media (min-width: 700px) { .benefits { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .benefits { grid-template-columns: repeat(4, 1fr); } }

.cases { list-style: none; display: grid; gap: 12px; }
.cases li { display: flex; gap: 14px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); font-weight: 600; color: var(--ink); font-size: .98rem; }
.cases .ic { color: var(--blue); width: 20px; height: 20px; }
@media (min-width: 700px) { .cases { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cases { grid-template-columns: repeat(3, 1fr); } }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chips li { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .9rem; font-weight: 600; color: var(--ink); }
.area-box { background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
@media (min-width: 1000px) { .area-box { position: sticky; top: calc(var(--header-h) + 24px); } }
.area-box h3 { font-size: 1.2rem; }
.area-box p { color: var(--muted); font-size: .95rem; }
.area-box .btn { width: 100%; margin-top: 18px; }

.link-columns { display: grid; gap: 36px; }
@media (min-width: 860px) { .link-columns { grid-template-columns: 1fr 1fr; gap: 56px; } }
.link-columns h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.pill-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pill-links a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .93rem; }
.pill-links a:hover { border-color: var(--blue); color: var(--blue); }
.pill-links .ic { width: 16px; height: 16px; color: var(--blue); }

.svc-note { margin-top: 24px; color: var(--muted); font-size: .98rem; max-width: 70ch; }

/* ---------- Kontakt ---------- */
.contact-cards { list-style: none; display: grid; gap: 14px; }
.contact-cards a, .contact-cards div.cc { display: flex; gap: 16px; align-items: center; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; text-decoration: none; color: var(--ink); }
.contact-cards a:hover { border-color: var(--blue); }
.contact-cards .cc-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-light); color: var(--blue); flex: none; }
.contact-cards .cc-icon--wa { background: #e7f6ec; color: var(--wa); }
.contact-cards small { display: block; color: var(--muted); font-size: .86rem; font-weight: 500; }
.contact-cards strong { font-size: 1.1rem; }

/* ---------- Formulare (allgemein) ---------- */
.field { display: grid; gap: 6px; }
.field label, .field .label { font-weight: 650; color: var(--ink); font-size: .95rem; }
.field .opt { color: var(--muted); font-weight: 500; }
.input, .textarea, .select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 13px 14px; min-height: 52px; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
.textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.input:hover, .textarea:hover { border-color: #a9b6c6; }
.input:focus, .textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(31,92,196,.14); }
.input::placeholder, .textarea::placeholder { color: #8d99a8; }
.field.has-error .input, .field.has-error .textarea { border-color: var(--error); }
.field-error { display: none; color: var(--error); font-size: .88rem; font-weight: 600; }
.field.has-error .field-error { display: flex; gap: 6px; align-items: center; }
.form-grid { display: grid; gap: 18px; }
@media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } .form-grid.addr { grid-template-columns: 1fr 140px; } .form-grid.addr2 { grid-template-columns: 140px 1fr; } }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--text); cursor: pointer; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blue); flex: none; }
.consent.has-error { color: var(--error); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Preisanfrage-Assistent ---------- */
.wizard-layout { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1040px) { .wizard-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; } }
.wizard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.wz-progress { padding: 22px clamp(18px, 3vw, 36px) 20px; border-bottom: 1px solid var(--line); background: #fbfcfd; }
.wz-track { position: relative; height: 4px; border-radius: 2px; background: var(--mist-2); margin: 0 22px 14px; }
.wz-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--blue); border-radius: 2px; transition: width .5s var(--ease); }
.wz-labels { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: -32px; position: relative; }
.wz-labels li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .8rem; font-weight: 650; color: var(--muted); text-align: center; }
.wz-labels li:first-child { align-items: flex-start; text-align: left; }
.wz-labels li:last-child { align-items: flex-end; text-align: right; }
.wz-dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--line-strong); color: var(--muted); font: 600 1.05rem var(--serif); transition: background-color .3s, border-color .3s, color .3s, transform .3s var(--ease); }
.wz-dot .ic { width: 20px; height: 20px; display: none; }
.wz-labels li.is-active { color: var(--ink); }
.wz-labels li.is-active .wz-dot { border-color: var(--blue); color: var(--blue); transform: scale(1.06); box-shadow: 0 0 0 5px rgba(31,92,196,.12); }
.wz-labels li.is-done .wz-dot { background: var(--blue); border-color: var(--blue); color: #fff; }
.wz-labels li.is-done .wz-dot span { display: none; }
.wz-labels li.is-done .wz-dot .ic { display: block; }
@media (min-width: 560px) { .wz-labels li { font-size: .88rem; } }

.wz-body { position: relative; padding: clamp(24px, 4vw, 44px) clamp(18px, 4vw, 44px) clamp(22px, 3vw, 36px); }
.wz-step { border: 0; margin: 0; padding: 0; min-width: 0; display: none; }
.wz-step.is-active { display: block; animation: stepIn .45s var(--ease) both; }
.wz-step.is-back.is-active { animation-name: stepBack; }
@keyframes stepIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes stepBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.wz-kicker { font-size: .88rem; font-weight: 650; color: var(--blue); margin-bottom: 6px; display: block; }
.wz-title { font-family: var(--serif); font-size: clamp(1.45rem, 2.8vw, 2rem); font-weight: 600; color: var(--ink); line-height: 1.2; padding: 0; margin: 0 0 8px; }
.wz-hint { color: var(--muted); margin-bottom: 26px; }

.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .choices { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .choices--objects { grid-template-columns: repeat(4, 1fr); } }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-box {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; height: 100%; padding: 18px 16px; border: 1.5px solid var(--line); border-radius: var(--r);
  background: #fff; transition: border-color .15s, background-color .15s, box-shadow .2s, transform .2s var(--ease);
}
.choice-box .ic { width: 30px; height: 30px; color: var(--navy); transition: color .15s; }
.choice-box strong { font-size: 1rem; line-height: 1.25; }
.choice-box small { color: var(--muted); font-size: .84rem; margin-top: -10px; }
.choice:hover .choice-box { border-color: #9fb3cc; transform: translateY(-2px); }
.choice input:focus-visible + .choice-box { outline: 3px solid var(--blue); outline-offset: 2px; }
.choice input:checked + .choice-box { border-color: var(--blue); background: var(--blue-light); box-shadow: 0 0 0 1px var(--blue) inset; }
.choice input:checked + .choice-box .ic { color: var(--blue); }
.choice-check { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: #fff; display: grid; place-items: center; transition: all .2s; }
.choice-check .ic { width: 14px; height: 14px; color: #fff; opacity: 0; }
.choice input:checked ~ .choice-check { background: var(--blue); border-color: var(--blue); }
.choice input:checked ~ .choice-check .ic { opacity: 1; }

/* Größenauswahl mit Maßstab */
.size-choice .choice-box { gap: 10px; }
.size-bar { display: block; height: 8px; width: 100%; border-radius: 4px; background: var(--mist-2); position: relative; overflow: hidden; }
.size-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--navy); border-radius: 4px; width: var(--w, 20%); opacity: .75; }
.choice input:checked + .choice-box .size-bar i { background: var(--blue); opacity: 1; }

.wz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.wz-back { background: none; border: 0; font: 650 .98rem var(--sans); color: var(--muted); display: inline-flex; gap: 8px; align-items: center; cursor: pointer; padding: 10px 4px; }
.wz-back:hover { color: var(--ink); }
.wz-back[hidden] { display: none; }
.wz-nav .btn { min-width: 160px; }
.wz-error { display: none; margin-top: 16px; padding: 12px 14px; border-radius: var(--r-sm); background: #fdf1f0; color: var(--error); font-weight: 600; font-size: .94rem; gap: 8px; align-items: center; }
.wz-error.is-visible { display: flex; }

.dropzone { position: relative; display: grid; place-items: center; text-align: center; gap: 8px; padding: 30px 20px; border: 2px dashed var(--line-strong); border-radius: var(--r); background: var(--mist); cursor: pointer; transition: border-color .15s, background-color .15s; }
.dropzone:hover, .dropzone.is-drag { border-color: var(--blue); background: var(--blue-light); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone .dz-icon { width: 54px; height: 54px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--blue); box-shadow: var(--shadow-card); }
.dropzone strong { font-size: 1.02rem; }
.dropzone span { color: var(--muted); font-size: .9rem; }
.thumbs { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-top: 14px; }
.thumbs li { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--mist-2); animation: thumbIn .3s var(--ease); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button { position: absolute; top: 5px; right: 5px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(10,31,54,.8); color: #fff; display: grid; place-items: center; cursor: pointer; }
.thumbs button .ic { width: 14px; height: 14px; }
.thumbs .is-loading { display: grid; place-items: center; }
.thumbs .is-loading::after { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line-strong); border-top-color: var(--blue); animation: spin .8s linear infinite; }
@keyframes thumbIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
.photo-meta { font-size: .86rem; color: var(--muted); margin-top: 8px; }
.wz-sep { margin: 30px 0 22px; border: 0; border-top: 1px solid var(--line); }

.btn[disabled] { opacity: .7; cursor: progress; }
.btn .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .8s linear infinite; }

.wz-success { display: none; text-align: center; padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 44px); }
.wizard.is-sent .wz-success { display: block; animation: stepIn .5s var(--ease) both; }
.wizard.is-sent .wz-body, .wizard.is-sent .wz-progress { display: none; }
.success-mark { width: 84px; height: 84px; margin: 0 auto 24px; border-radius: 50%; background: #e7f6ec; color: var(--success); display: grid; place-items: center; }
.success-mark svg { width: 44px; height: 44px; }
.success-mark path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .6s .2s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.wz-success h2 { margin-bottom: 10px; }
.wz-success p { color: var(--muted); max-width: 48ch; margin-inline: auto; }
.wz-success .next { text-align: left; max-width: 460px; margin: 28px auto 0; }

.send-error { display: none; margin-top: 18px; padding: 16px 18px; border-radius: var(--r); background: #fdf1f0; border: 1px solid #f3c8c3; color: #7a1a12; font-size: .95rem; }
.send-error.is-visible { display: block; }
.send-error a { color: #7a1a12; font-weight: 700; }

.wz-aside { display: grid; gap: 18px; }
@media (min-width: 1040px) { .wz-aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.summary-card, .aside-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.summary-card h3, .aside-card h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: 0; margin-bottom: 14px; }
.summary-list { list-style: none; display: grid; gap: 0; }
.summary-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .94rem; }
.summary-list li:last-child { border-bottom: 0; }
.summary-list span { color: var(--muted); }
.summary-list b { color: var(--ink); text-align: right; font-weight: 650; }
.summary-list b.empty { color: #a3adba; font-weight: 500; }
.aside-card--navy { background: var(--navy); color: #d3deeb; border-color: var(--navy); }
.aside-card--navy h3 { color: #fff; }
.aside-card--navy a { color: #fff; }
.aside-contact { display: grid; gap: 10px; }
.aside-contact .btn { width: 100%; }

/* ---------- Rechtliches / Platzhalter ---------- */
.placeholder-box { border: 2px dashed #e0b44c; background: #fff9ea; border-radius: var(--r); padding: 18px 20px; color: #6b4e0a; margin-bottom: 32px; font-size: .96rem; }
.legal h2 { font-size: 1.4rem; margin-top: 2em; }
.legal .ph { background: #fff4d6; border-radius: 4px; padding: 1px 6px; color: #6b4e0a; font-family: var(--sans); font-size: .95em; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: #b8c7da; font-size: .96rem; }
.footer-top { display: grid; gap: 40px; padding-block: clamp(56px, 7vw, 84px) 40px; }
@media (min-width: 760px) { .footer-top { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1100px) { .footer-top { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; } }
.footer-brand .logo-name { color: #fff; }
.footer-brand .logo-sub { color: #93a6bf; }
.footer-brand p { margin: 18px 0 22px; max-width: 34ch; }
.footer-contact { list-style: none; display: grid; gap: 10px; }
.footer-contact a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.footer-contact a:hover { color: #bcd3ff; }
.footer-contact .ic { width: 18px; height: 18px; color: #8fb6f5; }
.site-footer h2 { font-family: var(--sans); font-size: .95rem; font-weight: 700; color: #fff; letter-spacing: 0; margin-bottom: 16px; }
.footer-links { list-style: none; display: grid; gap: 9px; }
.footer-links a { color: #b8c7da; text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 22px calc(22px + 64px); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: .88rem; color: #8ea2bb; }
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-bottom a { color: #b8c7da; text-decoration: none; }
.footer-bottom a:hover { color: #fff; }
@media (min-width: 900px) { .footer-bottom { padding-bottom: 22px; } }

/* ---------- WhatsApp-Button & mobile Aktionsleiste ---------- */
.wa-float {
  position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 80; display: inline-flex; align-items: center; gap: 10px;
  height: 58px; min-width: 58px; padding: 0 17px; border-radius: 999px; background: var(--wa); color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem;
  box-shadow: 0 10px 28px -8px rgba(20, 110, 55, .6), 0 2px 6px rgba(0,0,0,.12); transition: transform .25s var(--ease), background-color .2s;
}
.wa-float .ic { width: 26px; height: 26px; }
.wa-float span { display: none; }
.wa-float:hover { background: var(--wa-dark); color: #fff; transform: translateY(-2px); }
@media (min-width: 900px) { .wa-float { bottom: 24px; right: 24px; padding: 0 22px 0 18px; } .wa-float span { display: inline; } }

.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -18px rgba(14,42,71,.4); }
.action-bar .btn { min-height: 48px; font-size: .92rem; padding: .6em .8em; }
@media (min-width: 900px) { .action-bar { display: none; } }
.page-anfrage .action-bar { display: none; }
.page-anfrage .wa-float { bottom: calc(16px + env(safe-area-inset-bottom)); }
.page-anfrage .footer-bottom { padding-bottom: 22px; }

/* ---------- Reveal (dezent, nur Startseite Hero-Auftritt) ---------- */
.js .hero-anim > * { opacity: 0; transform: translateY(14px); animation: heroIn .8s var(--ease) forwards; }
.js .hero-anim > *:nth-child(2) { animation-delay: .08s; }
.js .hero-anim > *:nth-child(3) { animation-delay: .16s; }
.js .hero-anim > *:nth-child(4) { animation-delay: .24s; }
.js .hero .quick-card { opacity: 0; transform: translateY(20px); animation: heroIn .9s .3s var(--ease) forwards; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .topbar, .wa-float, .action-bar, .mobile-nav, .quick-card { display: none !important; }
  .hero, .band, .feature { background: none !important; color: #000 !important; }
}

/* =========================================================
   Responsive-Feinschliff (am Ende, damit es Vorrang hat)
   ========================================================= */
/* ---------- Header-Feinabstimmung (Breiten) ---------- */
html { overflow-x: clip; }
.logo { min-width: 0; }
@media (max-width: 479px) {
  .header-call { display: none; }
  .header-inner { gap: 12px; }
  .logo { gap: 10px; }
  .logo img { width: 36px; height: 36px; }
  .logo-name { font-size: 1.2rem; }
  .logo-sub { font-size: .62rem; letter-spacing: 0; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .header-inner .logo-sub { display: none; }
}
@media (min-width: 1440px) { :root { --container: 1320px; } }


/* ---------- Schmale Displays: nichts darf überstehen ---------- */
@media (max-width: 999px) { .hero-inner, .page-hero-inner, .content-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1039px) { .wizard-layout { grid-template-columns: minmax(0, 1fr); } }
h1, h2, .wz-title { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 479px) {
  .btn { white-space: normal; text-align: center; }
  .btn-caps { letter-spacing: .03em; font-size: .86rem; }
}


.service-list strong, .contact-cards strong, .footer-contact a { overflow-wrap: anywhere; hyphens: auto; }
.contact-cards a > span, .contact-cards div.cc > span { min-width: 0; }
@media (max-width: 359px) { .logo-sub { display: none; } }
@media (max-width: 519px) {
  .wz-nav { flex-wrap: wrap; }
  .wz-nav .btn { min-width: 0; flex: 1 1 auto; }
  .wz-nav [data-submit] { flex-basis: 100%; order: -1; }
  .wz-nav .wz-back { order: 0; }
}


.qc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qc-grid a { min-width: 0; }
@media (max-width: 479px) {
  .quick-card { padding: 22px 16px; }
  .qc-grid a { padding: 11px 10px; gap: 8px; font-size: .9rem; line-height: 1.25; }
  .qc-grid .ic { width: 20px; height: 20px; flex: none; }
  .qc-foot { display: block !important; }
  .qc-foot > * { display: inline; }
}

@media (min-width: 1200px) { .header-actions { display: none; } }
[hidden] { display: none !important; }

/* =========================================================
   Startseite im Foto-Stil (großes Hintergrundbild, Text mittig)
   ========================================================= */
.topbar { background: #1c4fb3; color: #e3ebfb; }
.topbar a:hover { color: #fff; opacity: .85; }

.hero.hero--photo {
  background-color: #123a72;
  background-image:
    linear-gradient(180deg, rgba(7, 24, 48, .58) 0%, rgba(7, 24, 48, .42) 45%, rgba(7, 24, 48, .72) 100%),
    url("../img/hero.jpg"),
    linear-gradient(135deg, #0c2546 0%, #17458c 55%, #2a66cc 100%);
  background-size: cover, cover, cover;
  background-position: center, center 35%, center;
  background-repeat: no-repeat;
}
.hero-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: min(64vh, 580px); padding-block: clamp(72px, 11vw, 140px) clamp(64px, 9vw, 120px); }
.hero-center h1 { max-width: 19ch; margin-inline: auto; text-shadow: 0 2px 22px rgba(0, 0, 0, .28); }
.hero-center .hero-sub { max-width: 42ch; margin-inline: auto; text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.hero-center .btn-group { justify-content: center; margin-bottom: 0; }
.hero--photo .btn-outline-light { background: rgba(8, 24, 48, .35); backdrop-filter: blur(4px); }

/* Anfrage-Start direkt unter dem Foto */
.start-panel { padding-block: clamp(48px, 7vw, 92px); background: #fff; border-bottom: 1px solid var(--line); }
.start-panel__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
@media (min-width: 1000px) { .start-panel__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 72px; align-items: center; } }
.start-panel .quick-card { border: 1px solid var(--line); box-shadow: 0 30px 70px -34px rgba(14, 42, 71, .4); padding: clamp(22px, 3vw, 38px); }
.start-panel .qc-title { text-align: center; font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 6px; }
.start-panel .quick-card > p { text-align: center; }
.start-panel .qc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.start-panel .qc-grid a { flex-direction: column; justify-content: center; text-align: center; gap: 10px; min-height: 116px; padding: 18px 8px; font-size: .95rem; }
.start-panel .qc-grid .ic { width: 36px; height: 36px; }
.start-panel .qc-grid a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.start-panel .qc-grid a:hover .ic { color: #fff; }
.start-panel .qc-foot { justify-content: center; text-align: center; }
@media (max-width: 519px) { .start-panel .qc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .start-panel .qc-grid a { min-height: 100px; } }
.start-panel__text h2::after { content: ""; display: block; width: 72px; height: 4px; margin-top: 18px; border-radius: 2px; background: var(--blue); }
.start-panel__text p { color: var(--text); }
.start-points { list-style: none; display: grid; gap: 12px; margin-top: 24px; }
@media (min-width: 640px) { .start-points { grid-template-columns: repeat(2, max-content); column-gap: 32px; } }
.start-points li { display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--ink); }
.start-points .ic { width: 20px; height: 20px; color: var(--blue); }

/* Keine Grundriss-Linien mehr */
.feature { background-image: none; }
.band { background-image: none; background: linear-gradient(135deg, #0c2546 0%, #17458c 100%); }
.page-hero { background-image: none; background: linear-gradient(180deg, #f6f8fb 0%, #edf1f6 100%); }

/* =========================================================
   Firmenlogo (Karton-Symbol + Schriftzug)
   ========================================================= */
.logo { gap: 11px; }
.logo img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.logo-text { line-height: 1; }
.logo-name { font-family: var(--sans); font-weight: 800; font-size: 1.34rem; letter-spacing: .035em; text-transform: uppercase; color: #111827; }
.logo-sub { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #8a6700; }
.logo-sub > span:first-child { font-size: 1.14em; }
@media (min-width: 1200px) and (max-width: 1439px) { .header-inner .logo-sub { display: flex; } }
@media (max-width: 479px) {
  .logo img { width: 40px; height: 40px; }
  .logo-name { font-size: 1.22rem; }
  .logo-sub { font-size: .54rem; letter-spacing: .05em; }
}
@media (max-width: 339px) { .logo-sub { display: none; } }
.logo--footer img { width: auto; height: 84px; border-radius: 0; }
@media (min-width: 640px) { .start-points { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }
@media (min-width: 1200px) and (max-width: 1365px) { .header-inner .logo-sub { display: none; } }
/* Logo-Schriftzug in den Farben der Website */
.logo-name { color: var(--navy); }
.logo-sub { color: var(--blue); }

/* =========================================================
   Echte Einsatzfotos (Vorher / Nachher)
   ========================================================= */
.work-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 640px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.work-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.work-card__img { position: relative; aspect-ratio: 3 / 4; background: var(--mist); }
.work-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-tag { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800; letter-spacing: .02em; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.work-tag--vorher { background: var(--navy); }
.work-tag--nachher { background: var(--blue); }
.work-card figcaption { padding: 18px 20px 22px; }
.work-card figcaption h3 { font-size: 1.15rem; margin-bottom: 6px; }
.work-card figcaption p { color: var(--muted); font-size: .95rem; margin: 0; }

/* =========================================================
   Motivbilder (Leistungskarten & Leistungsseiten)
   ========================================================= */
.feature { --pad: clamp(26px, 3.5vw, 40px); padding: var(--pad); }
.feature-media { display: block; position: relative; margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 0; aspect-ratio: 2 / 1; overflow: hidden; background: #0b2340; }
.feature-media picture, .feature-media img { display: block; width: 100%; height: 100%; }
.feature-media img { object-fit: cover; transition: transform .6s var(--ease); }
.feature-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 24, 44, 0) 55%, rgba(8, 24, 44, .38) 100%); pointer-events: none; }
.feature:hover .feature-media img { transform: scale(1.03); }
.feature-media + .ic-wrap { position: relative; z-index: 1; margin-top: -27px; background: var(--blue); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); }

.prose-figure { margin: 30px 0 0; }
.prose-figure picture { display: block; }
.prose-figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--mist); box-shadow: 0 18px 40px -26px rgba(14, 42, 71, .45); }
.prose-figure figcaption { margin-top: 10px; font-size: .9rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .feature-media img { transition: none; } .feature:hover .feature-media img { transform: none; } }

/* =========================================================
   Startbereich mit Hintergrundfoto
   ========================================================= */
.hero.hero--photo {
  background-color: #0c2546;
  background-image:
    linear-gradient(180deg, rgba(7, 22, 44, .78) 0%, rgba(7, 22, 44, .66) 45%, rgba(7, 22, 44, .82) 100%),
    url("../img/hero-mobil.jpg");
  background-image:
    linear-gradient(180deg, rgba(7, 22, 44, .78) 0%, rgba(7, 22, 44, .66) 45%, rgba(7, 22, 44, .82) 100%),
    image-set(url("../img/hero-mobil.avif") type("image/avif"), url("../img/hero-mobil.webp") type("image/webp"), url("../img/hero-mobil.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}
@media (min-width: 900px) {
  .hero.hero--photo {
    background-image:
      linear-gradient(180deg, rgba(7, 22, 44, .74) 0%, rgba(7, 22, 44, .6) 45%, rgba(7, 22, 44, .8) 100%),
      url("../img/hero.jpg");
    background-image:
      linear-gradient(180deg, rgba(7, 22, 44, .74) 0%, rgba(7, 22, 44, .6) 45%, rgba(7, 22, 44, .8) 100%),
      image-set(url("../img/hero.avif") type("image/avif"), url("../img/hero.webp") type("image/webp"), url("../img/hero.jpg") type("image/jpeg"));
    background-position: center 38%;
  }
}

/* Über-uns-Bild (Querformat) mit Hinweis darunter */
.split-media.split-media--bild { aspect-ratio: auto; max-height: none; overflow: visible; background: none; border-radius: 0; }
.split-media--bild picture { display: block; }
.split-media--bild img { display: block; width: 100%; height: auto; aspect-ratio: 1179 / 778; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: 0 24px 50px -30px rgba(14, 42, 71, .5); background: #fff; }
.split-media--bild .split-note { position: static; margin-top: 16px; box-shadow: 0 1px 2px rgba(14, 42, 71, .06); border: 1px solid var(--line); background: #fff; }

/* =========================================================
   Aktionsbanner (Rabatt) – dezent, im Stil der Website
   ========================================================= */
.promo { padding: clamp(30px, 4vw, 46px) 0; }
.promo-card {
  display: grid; gap: 24px; align-items: center;
  padding: clamp(24px, 3.4vw, 40px);
  border: 1px solid var(--line); border-left: 5px solid var(--blue);
  border-radius: var(--r-lg); background: #fff;
  box-shadow: 0 22px 48px -34px rgba(14, 42, 71, .45);
}
@media (min-width: 760px)  { .promo-card { grid-template-columns: auto minmax(0, 1fr); } }
@media (min-width: 1080px) { .promo-card { grid-template-columns: auto minmax(0, 1fr) auto; gap: 40px; } }

.promo-card__badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 124px; height: 124px; flex: none; border-radius: 50%;
  background: linear-gradient(140deg, var(--blue) 0%, var(--navy) 100%); color: #fff;
  box-shadow: 0 14px 30px -14px rgba(31, 92, 196, .7);
}
.promo-card__pct { font: 800 2.5rem/1 var(--sans); letter-spacing: -.02em; }
.promo-card__pct span { font-size: 1.35rem; margin-left: 2px; }
.promo-card__word { font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .92; }

.promo-card__kicker { font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.promo-card__body h2 { font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1.25; margin-bottom: 10px; }
.promo-card__text { color: var(--muted); margin-bottom: 14px; }
.promo-card__period { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: var(--mist); font-size: .95rem; }
.promo-card__period .ic { width: 20px; height: 20px; color: var(--blue); flex: none; }
.promo-card__period strong { color: var(--navy); }

.promo-card__action { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
@media (min-width: 1080px) { .promo-card__action { align-items: flex-end; min-width: 250px; } }
.promo-card__action .btn { width: 100%; }
@media (min-width: 1080px) { .promo-card__action .btn { width: auto; } }
.promo-card__tel { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: var(--navy); text-decoration: none; }
.promo-card__tel .ic { width: 18px; height: 18px; color: var(--blue); }
.promo-card__tel:hover { color: var(--blue); }

@media (max-width: 759px) {
  .promo-card { text-align: center; justify-items: center; }
  .promo-card__badge { width: 106px; height: 106px; }
  .promo-card__pct { font-size: 2.1rem; }
  .promo-card__action { width: 100%; }
}

/* Aktions-Hinweis oben rechts im Startbereich */
.hero.hero--photo { position: relative; }
.hero-promo {
  position: absolute; top: 22px; right: max(20px, calc((100vw - var(--container)) / 2)); z-index: 3;
  display: flex; align-items: center; gap: 14px; max-width: 330px;
  padding: 12px 18px 12px 14px; border-radius: 14px; text-decoration: none;
  background: rgba(255, 255, 255, .96); color: var(--navy);
  border: 1px solid rgba(255, 255, 255, .7); border-left: 4px solid var(--blue);
  box-shadow: 0 18px 40px -18px rgba(3, 14, 30, .55);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.hero-promo:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -18px rgba(3, 14, 30, .6); color: var(--navy); }
.hero-promo__pct { flex: none; font: 800 1.9rem/1 var(--sans); letter-spacing: -.02em; color: var(--blue); }
.hero-promo__pct span { font-size: 1rem; margin-left: 1px; }
.hero-promo__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hero-promo__txt strong { font-size: .95rem; letter-spacing: .01em; }
.hero-promo__txt > span { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.hero-promo__date { font-weight: 700; color: var(--blue) !important; }

@media (max-width: 1099px) {
  .hero-promo { position: static; margin: 0 auto; max-width: min(420px, calc(100% - 40px)); transform: translateY(18px); }
  .hero-promo:hover { transform: translateY(16px); }
  .hero-center { padding-top: clamp(30px, 6vw, 60px); }
}
@media (max-width: 380px) {
  .hero-promo { gap: 10px; padding: 10px 14px 10px 12px; }
  .hero-promo__pct { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .hero-promo, .hero-promo:hover { transition: none; transform: none; } }

/* =========================================================
   Startbereich: langsame Bildfahrt + optionales Hintergrundvideo
   ========================================================= */
.hero.hero--photo { background-image: none; overflow: hidden; isolation: isolate; }
.hero.hero--photo::before,
.hero.hero--photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero.hero--photo::before {
  background-color: #0c2546;
  background-image: url("../img/hero-mobil.jpg");
  background-image: image-set(url("../img/hero-mobil.avif") type("image/avif"), url("../img/hero-mobil.webp") type("image/webp"), url("../img/hero-mobil.jpg") type("image/jpeg"));
  background-size: cover; background-position: center 40%; background-repeat: no-repeat;
  z-index: -2; transform-origin: 55% 45%;
  animation: heroDrift 26s ease-in-out infinite alternate;
}
.hero.hero--photo::after {
  background: linear-gradient(180deg, rgba(7, 22, 44, .78) 0%, rgba(7, 22, 44, .66) 45%, rgba(7, 22, 44, .82) 100%);
  z-index: -1;
}
@media (min-width: 900px) {
  .hero.hero--photo::before {
    background-image: url("../img/hero.jpg");
    background-image: image-set(url("../img/hero.avif") type("image/avif"), url("../img/hero.webp") type("image/webp"), url("../img/hero.jpg") type("image/jpeg"));
    background-position: center 38%;
  }
  .hero.hero--photo::after { background: linear-gradient(180deg, rgba(7, 22, 44, .74) 0%, rgba(7, 22, 44, .6) 45%, rgba(7, 22, 44, .8) 100%); }
}
@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.08); } }

/* Videoebene – nur sichtbar, wenn assets/video/hero.mp4 vorhanden ist */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -2; opacity: 0; transition: opacity 1.1s ease;
}
.hero-video.is-ready { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero.hero--photo::before { animation: none; }
  .hero-video { display: none; }
}

/* Vertrauensleiste im Startbereich (Erfahrung, Einsatzgebiet, Besichtigung) */
.hero-trust {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 12px; margin-top: 30px;
}
.hero-trust li {
  display: flex; align-items: center; gap: 11px; text-align: left;
  padding: 11px 18px 11px 15px; border-radius: 12px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: .9rem; line-height: 1.25;
}
.hero-trust .ic { width: 26px; height: 26px; color: #9fc2fb; flex: none; }
.hero-trust__num { font: 800 1.85rem/1 var(--sans); letter-spacing: -.02em; color: #fff; }
.hero-trust__txt { font-weight: 650; }
@media (max-width: 599px) {
  .hero-trust { gap: 8px; margin-top: 24px; }
  .hero-trust li { flex: 1 1 100%; justify-content: flex-start; padding: 10px 14px; font-size: .86rem; }
  .hero-trust__num { font-size: 1.6rem; min-width: 30px; text-align: center; }
  .hero-trust .ic { width: 22px; height: 22px; }
}

/* =========================================================
   Google-Bewertungen
   ========================================================= */
.gbar { background: #fff; border-bottom: 1px solid var(--line); }
.gbar__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 16px 0; }
.gbar__logo svg { width: 24px; height: 24px; display: block; }
.gbar__note { font-size: .95rem; color: var(--muted); }
.gbar__score { font: 800 1.4rem/1 var(--sans); color: var(--navy); }
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 19px; height: 18px; fill: #fbbc05; }
.gbar__count { font-weight: 650; color: var(--ink); }
.gbar__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--blue); text-decoration: none; }
.gbar__link .ic { width: 16px; height: 16px; }
.gbar__link:hover { text-decoration: underline; }
@media (max-width: 599px) {
  .gbar__in { gap: 6px 10px; padding: 14px 0; }
  .gbar__note { flex: 1 1 100%; text-align: center; font-size: .85rem; }
  .gbar__link { flex: 1 1 100%; justify-content: center; margin-top: 2px; }
}

.hero-stars { color: #fbbc05; letter-spacing: 1px; font-size: .95rem; }
.hero-trust--google .hero-trust__num { font-size: 1.6rem; }

.review-grid { display: grid; gap: 20px; }
@media (min-width: 700px) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.review-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 18px 40px -32px rgba(14, 42, 71, .5); }
.review-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.review-card__top .stars svg { width: 17px; height: 16px; }
.review-card__g svg { width: 18px; height: 18px; display: block; opacity: .9; }
.review-card p { margin: 0; color: var(--text); }
.review-card footer { margin-top: auto; padding-top: 6px; font-size: .9rem; color: var(--muted); font-weight: 650; }
.reviews__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.review-grid:empty { display: none; }

/* Bewertungskarten: Zitat und Name */
.review-card blockquote { margin: 0; }
.review-card blockquote p { font-size: .97rem; line-height: 1.6; }
.review-card blockquote p::before { content: "„"; }
.review-card blockquote p::after { content: "“"; }
.review-card figcaption { margin-top: auto; padding-top: 10px; font-size: .9rem; font-weight: 700; color: var(--navy); border-top: 1px solid var(--line); }
.review-card figcaption span { font-weight: 500; color: var(--muted); }
@media (min-width: 1040px) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }

/* ==========================================================================
   NEU 2026-09: Startbereich mit Kurzformular, Google-Badge, Vorher/Nachher,
   Teamfotos, Anfrage-Block
   ========================================================================== */

/* ---------- Google-Badge ---------- */
.gbadge {
  display: inline-grid; gap: 6px; padding: 16px 22px 15px; border-radius: 18px;
  background: #fff; color: #111827; text-decoration: none; text-align: left;
  box-shadow: 0 1px 2px rgba(14,42,71,.08), 0 18px 40px -18px rgba(10,31,54,.45);
  border: 1px solid rgba(14,42,71,.06); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gbadge:hover { transform: translateY(-2px); color: #111827; box-shadow: 0 1px 2px rgba(14,42,71,.08), 0 26px 50px -20px rgba(10,31,54,.5); }
.gbadge__top { display: flex; align-items: baseline; gap: 8px; font: 800 1.08rem/1.1 var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.gword { font: 700 1.5rem/1 "Product Sans", "Google Sans", var(--sans); letter-spacing: -.035em; }
.gword i { font-style: normal; }
.gword i:nth-child(1), .gword i:nth-child(4) { color: #4285F4; }
.gword i:nth-child(2), .gword i:nth-child(6) { color: #EA4335; }
.gword i:nth-child(3) { color: #FBBC05; }
.gword i:nth-child(5) { color: #34A853; }
.gbadge__row { display: flex; align-items: center; gap: 10px; }
.gstars { display: flex; gap: 2px; }
.gstars svg { width: 21px; height: 21px; fill: #FBBC05; }
.gbadge__row strong { font: 800 1.2rem/1 var(--sans); color: #111827; letter-spacing: -.01em; }
.gbadge__sub { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 650; color: #6b7280; }
.gbadge__sub svg { width: 15px; height: 15px; color: #34A853; flex: none; }
.gbadge--inline { justify-self: start; }

/* ---------- Kurzformular ---------- */
.qform { position: relative; }
.qform .hp { position: absolute; left: -9999px; }
.qf-head { display: grid; gap: 2px; margin-bottom: 16px; }
.qf-head strong { font: 600 clamp(1.25rem, 2.2vw, 1.5rem)/1.2 var(--serif); color: var(--ink); }
.qf-head span { color: var(--muted); font-size: .95rem; }
.qf-row { display: grid; gap: 12px; }
.qf-field { position: relative; display: grid; gap: 5px; }
.qf-field label { font-size: .85rem; font-weight: 700; color: var(--ink); }
.qf-field input, .qf-field textarea {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink); background: #f6f8fb;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 15px 16px; min-height: 56px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.qf-field textarea { min-height: 0; resize: vertical; }
.qf-field input::placeholder, .qf-field textarea::placeholder { color: #8a97a8; }
.qf-field input:focus, .qf-field textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(31,92,196,.14); }
.qf-err { display: none; font-size: .82rem; font-weight: 700; color: var(--error); }
.qf-field.is-bad input { border-color: var(--error); background: #fff7f6; }
.qf-field.is-bad .qf-err { display: block; }
.qf-btn { min-height: 58px; font-size: 1.05rem; font-weight: 800; border-radius: 12px; gap: 10px; box-shadow: 0 12px 26px -12px rgba(31,92,196,.8); }
.qf-btn .ic { width: 20px; height: 20px; }
.qf-note { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.45; }
.qf-note .ic { width: 16px; height: 16px; color: var(--success); flex: none; margin-top: 1px; }
.qf-note a { color: inherit; }
.qf-chips { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.qf-chips legend { padding: 0; font-size: .85rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.qf-chips legend span { font-weight: 500; color: var(--muted); }
.qf-chips > div { display: flex; flex-wrap: wrap; gap: 8px; }
.qf-chips label { position: relative; cursor: pointer; }
.qf-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.qf-chips label span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: .92rem; font-weight: 650; color: var(--ink); transition: all .15s; }
.qf-chips label span .ic { width: 17px; height: 17px; color: var(--blue); }
.qf-chips label:hover span { border-color: var(--blue); }
.qf-chips input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.qf-chips input:checked + span .ic { color: #fff; }
.qf-chips input:focus-visible + span { outline: 3px solid rgba(31,92,196,.35); outline-offset: 2px; }
.qf-fail { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #fdf1f0; border: 1px solid #f3c8c3; color: #7a1a12; font-size: .9rem; }
.qf-fail a { color: #7a1a12; font-weight: 700; }
.qform.is-failed .qf-fail { display: block; }
.qf-ok { display: none; text-align: center; padding: 18px 6px 8px; outline: none; }
.qf-ok strong { display: block; font: 600 1.4rem/1.2 var(--serif); color: var(--ink); margin: 12px 0 6px; }
.qf-ok span { color: var(--muted); font-size: .95rem; }
.qf-ok__mark { display: inline-grid !important; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #e6f6ee; color: var(--success) !important; }
.qf-ok__mark svg { width: 30px; height: 30px; }
.qform.is-sent > :not(.qf-ok) { display: none !important; }
.qform.is-sent .qf-ok { display: block; animation: heroIn .5s var(--ease); }
@media (min-width: 720px) {
  .qform--hero .qf-row { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .qform--hero .qf-btn { padding-inline: 26px; }
}
.qform--hero .qf-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 560px) { .qform--stack .qf-row { grid-template-columns: 1fr 1fr; } .qform--stack .qf-field--full, .qform--stack .qf-btn { grid-column: 1 / -1; } }

/* ---------- Startbereich (neu) ---------- */
.hx {
  position: relative; overflow: hidden; color: #fff; isolation: isolate;
  background:
    radial-gradient(900px 500px at 85% 20%, rgba(59,130,246,.35), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(31,92,196,.35), transparent 60%),
    linear-gradient(160deg, #0a1f36 0%, #0e2a47 55%, #12345a 100%);
}
.hx::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: linear-gradient(180deg, #000 0%, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.hx__in { display: grid; gap: 44px; padding-block: clamp(34px, 6vw, 84px) clamp(40px, 6vw, 80px); align-items: center; }
@media (min-width: 1000px) { .hx__in { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 60px; } }
.hx__promo { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 14px 6px 6px; margin-bottom: 22px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #dbe7f7; text-decoration: none; font-size: .88rem; font-weight: 600; backdrop-filter: blur(6px); }
.hx__promo b { background: #fbbc05; color: #0a1f36; border-radius: 999px; padding: 4px 10px; font-weight: 900; white-space: nowrap; }
.hx__promo .ic { width: 16px; height: 16px; flex: none; transition: transform .2s; }
.hx__promo:hover { color: #fff; } .hx__promo:hover .ic { transform: translateX(3px); }
.hx h1 { color: #fff; font-size: clamp(2.2rem, 5.2vw, 4.1rem); line-height: 1.04; letter-spacing: -.025em; margin-bottom: .35em; max-width: 15ch; }
.hx h1 span { display: block; color: #8fb6f5; font-size: .62em; line-height: 1.2; margin-top: .25em; letter-spacing: -.01em; }
.hx__sub { color: #c8d6e8; font-size: clamp(1.02rem, 1.6vw, 1.2rem); font-weight: 600; margin-bottom: 26px; }
.qform--hero { background: #fff; color: var(--text); border-radius: 22px; padding: clamp(18px, 2.4vw, 26px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 6px rgba(255,255,255,.08); max-width: 640px; }
.hx__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; color: #c8d6e8; font-size: .93rem; font-weight: 600; }
.hx__facts li { display: flex; align-items: center; gap: 7px; }
.hx__facts b { color: #fff; font-size: 1.15rem; font-weight: 900; }
.hx__facts .ic { width: 19px; height: 19px; color: #8fb6f5; }
.hx__media { position: relative; padding: 0 0 46px; }
.hx__frame { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 50px 90px -40px rgba(0,0,0,.75); transform: rotate(1.2deg); border: 6px solid rgba(255,255,255,.1); }
.hx__frame img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; object-position: 60% 50%; }
.hx__247 { position: absolute; top: -18px; right: -10px; width: 118px; height: 118px; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 2px;
  background: #0a1f36; border: 4px solid #3b82f6; box-shadow: 0 16px 40px -10px rgba(0,0,0,.6); transform: rotate(8deg); animation: floaty 5s ease-in-out infinite; }
.hx__247 b { font: 900 2.1rem/1 var(--sans); letter-spacing: -.04em; color: #fff; }
.hx__247 span { font-size: .72rem; font-weight: 700; line-height: 1.15; color: #c8d6e8; }
.gbadge--float { position: absolute; left: -22px; bottom: 0; animation: floaty 6s ease-in-out infinite reverse; }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (max-width: 999px) { .hx__media { max-width: 620px; margin-inline: auto; width: 100%; } .gbadge--float { left: 10px; } .hx__247 { right: 4px; } }
@media (max-width: 520px) { .hx__247 { width: 92px; height: 92px; } .hx__247 b { font-size: 1.6rem; } .hx__247 span { font-size: .62rem; } .gbadge--float { left: 50%; transform: translateX(-50%); } .gbadge--float:hover { transform: translateX(-50%) translateY(-2px); } .gbadge { padding: 13px 16px; } }
.hx__ticker { border-top: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); overflow: hidden; }
.hx__ticker > div { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.hx__ticker span { padding: 14px 26px; font-size: .88rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9fb5d2; white-space: nowrap; display: flex; align-items: center; gap: 26px; }
.hx__ticker span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; margin-left: 26px; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hx__ticker > div, .hx__247, .gbadge--float { animation: none; } }

/* ---------- Vorher / Nachher ---------- */
.vn { padding-block: clamp(60px, 9vw, 120px); background: #f3f6fa; position: relative; }
.vn__head { text-align: center; max-width: 720px; margin: 0 auto clamp(34px, 5vw, 56px); }
.vn__kicker { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.vn__head h2 { font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.02; letter-spacing: -.03em; margin-bottom: .35em; }
.vn__head h2 em { font-style: italic; color: var(--blue); }
.vn__head p { color: var(--muted); font-size: 1.08rem; margin: 0; }
.vn__grid { display: grid; gap: clamp(18px, 2.4vw, 30px); }
@media (min-width: 820px) { .vn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vn-card { margin: 0; background: #fff; border-radius: 22px; padding: 10px; box-shadow: 0 1px 2px rgba(14,42,71,.06), 0 30px 60px -36px rgba(14,42,71,.45); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.vn-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(14,42,71,.06), 0 40px 70px -36px rgba(14,42,71,.55); }
.vn-card .ba { aspect-ratio: 16 / 10; border-radius: 15px; }
.vn-card .ba img { object-fit: cover; }
.vn-card .ba-knob { width: 52px; height: 52px; margin: -26px 0 0 -26px; background: var(--blue); color: #fff; border: 4px solid #fff; box-shadow: 0 8px 22px rgba(10,31,54,.45); }
.vn-card .ba-knob svg { width: 22px; height: 22px; }
.vn-card .ba-line { width: 4px; margin-left: -2px; box-shadow: 0 0 12px rgba(0,0,0,.35); }
.vn-card .ba-tag { top: 14px; padding: 6px 13px; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; border-radius: 8px; }
.vn-card .ba-tag--before { background: rgba(10,31,54,.85); }
.vn-card .ba-tag--after { background: var(--blue); color: #fff; }
.vn-card figcaption { display: flex; align-items: center; gap: 12px; padding: 16px 10px 8px; font: 600 1.12rem/1.3 var(--serif); color: var(--ink); }
.vn-num { flex: none; font: 900 .85rem/1 var(--sans); color: var(--blue); background: var(--blue-light); border-radius: 8px; padding: 7px 8px; }
.vn__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; margin-top: clamp(30px, 4vw, 48px); text-align: center; }
.vn__cta p { margin: 0; color: var(--text); }

/* ---------- Teamfoto im Einstieg ---------- */
.sp-media { position: relative; margin: 0; max-width: 520px; width: 100%; justify-self: center; }
.sp-media img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 50% 30%; border-radius: 26px; box-shadow: 0 40px 80px -40px rgba(14,42,71,.55); }
.sp-media::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border-radius: 26px; background: var(--blue-light); border: 2px solid var(--blue-line); z-index: -1; }
.start-panel { position: relative; isolation: isolate; }
.sp-badge { position: absolute; right: -14px; bottom: 34px; display: flex; align-items: center; gap: 10px; padding: 14px 20px 14px 16px; border-radius: 18px; background: var(--navy); color: #fff; box-shadow: 0 22px 44px -18px rgba(10,31,54,.7); }
.sp-badge b { font: 900 2.6rem/1 var(--sans); letter-spacing: -.04em; color: #8fb6f5; }
.sp-badge span { font-size: .92rem; font-weight: 700; line-height: 1.2; }
@media (max-width: 599px) { .sp-media::before { inset: 14px -8px -14px 14px; } .sp-badge { right: 8px; bottom: 16px; } }

/* ---------- Bewertungen-Kopf ---------- */
.reviews .section-head--split .gbadge { justify-self: end; }
@media (max-width: 899px) { .reviews .section-head--split .gbadge { justify-self: start; } }

/* ---------- Anfrage-Block unten ---------- */
.cx { padding-block: clamp(60px, 9vw, 120px); background:
  radial-gradient(700px 400px at 100% 0%, rgba(59,130,246,.25), transparent 60%),
  linear-gradient(160deg, #0a1f36, #0e2a47 60%, #12345a); color: #fff; overflow: hidden; }
.cx__in { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1000px) { .cx__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 72px; } }
.cx__media { position: relative; margin: 0; max-width: 480px; width: 100%; justify-self: center; }
.cx__media img { width: 100%; aspect-ratio: 5 / 5.6; object-fit: cover; object-position: 40% 30%; border-radius: 26px; transform: rotate(-1.5deg); border: 6px solid rgba(255,255,255,.1); box-shadow: 0 50px 90px -40px rgba(0,0,0,.8); }
.cx__media figcaption { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); white-space: nowrap; display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 800; font-size: .92rem; box-shadow: 0 18px 36px -14px rgba(0,0,0,.55); }
.cx__media figcaption .ic { width: 20px; height: 20px; color: var(--success); }
.cx .vn__kicker { color: #8fb6f5; }
.cx h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.05; letter-spacing: -.025em; }
.cx__lead { color: #c8d6e8; font-size: 1.08rem; max-width: 46ch; margin-bottom: 24px; }
.cx .qform { background: #fff; color: var(--text); border-radius: 22px; padding: clamp(18px, 2.6vw, 28px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.cx__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 20px; color: #c8d6e8; font-weight: 600; }
.cx__alt .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.cx__alt .btn-outline:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ---------- Preisanfrage-Seite ---------- */
.pa { display: grid; gap: 36px; align-items: start; }
@media (min-width: 1000px) { .pa { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; } }
.pa__card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 3.4vw, 40px); box-shadow: 0 40px 80px -46px rgba(14,42,71,.45); }
.pa__card .qf-head strong { font-size: clamp(1.5rem, 3vw, 2rem); }
/* Feinschliff */
@media (min-width: 720px) {
  .qform--hero .qf-row { grid-template-columns: 1fr 1fr; }
  .qform--hero .qf-btn { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .hx__promo { font-size: .78rem; line-height: 1.3; }
  .hx h1 { font-size: 2.15rem; }
  .gbadge--float { bottom: -6px; }
  .gbadge--float .gbadge__sub { font-size: .72rem; }
}

/* ---------- Update: Nachricht-Feld, Zusatzleistungen, Collage ---------- */
@media (min-width: 560px) { .qf-row .qf-field--full { grid-column: 1 / -1; } }
.qform--hero .qf-field--msg textarea { min-height: 0; padding-block: 12px; }
.qform--hero .qf-field--msg label { position: static; width: auto; height: auto; clip: auto; overflow: visible; font-size: .8rem; }
.hx__extra { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: -10px 0 22px; }
.hx__extra a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; border-radius: 999px; background: rgba(59,130,246,.18); border: 1px solid rgba(143,182,245,.45); color: #fff; font-size: .88rem; font-weight: 700; text-decoration: none; transition: background .15s; }
.hx__extra a:hover { background: rgba(59,130,246,.35); color: #fff; }
.hx__extra .ic { width: 17px; height: 17px; color: #8fb6f5; }
.lx-collage { margin: 0 0 clamp(28px, 4vw, 44px); border-radius: 24px; overflow: hidden; box-shadow: 0 40px 80px -44px rgba(14,42,71,.55); border: 1px solid var(--line); }
.lx-collage img { width: 100%; height: auto; }
.xs { border-radius: 24px; padding: clamp(22px, 3.4vw, 40px); margin-bottom: clamp(30px, 4vw, 48px); color: #fff;
  background: radial-gradient(600px 300px at 100% 0%, rgba(59,130,246,.35), transparent 60%), linear-gradient(150deg, #0a1f36, #12345a); }
.xs__head { max-width: 760px; margin-bottom: 26px; }
.xs__badge { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #fbbc05; color: #0a1f36; font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.xs__head h3 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.12; margin-bottom: 10px; }
.xs__head p { color: #c8d6e8; margin: 0; }
.xs__grid { display: grid; gap: 14px; }
@media (min-width: 820px) { .xs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.xs-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #dbe7f7; text-decoration: none; transition: transform .25s var(--ease), background .25s; }
.xs-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.12); color: #fff; }
.xs-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--blue); margin-bottom: 8px; box-shadow: 0 10px 24px -10px rgba(59,130,246,.9); }
.xs-ic .ic { width: 28px; height: 28px; color: #fff; }
.xs-card h3 { color: #fff; font-size: 1.3rem; margin: 0; }
.xs-card p { font-size: .95rem; margin: 0 0 6px; color: #c8d6e8; }
.xs-card .text-link { margin-top: auto; color: #8fb6f5; }
.service-list .sl-new a { background: var(--blue-light); border-color: var(--blue-line); }
.service-list .sl-new .sl-icon { background: var(--blue); color: #fff; }
.service-list .sl-new .sl-icon .ic { color: #fff; }
@media (min-width: 1200px) { .mega-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-links strong { color: inherit; font-weight: 800; }
.page-hero .pa__card { box-shadow: 0 30px 70px -40px rgba(14,42,71,.45); }
@media (min-width: 1200px) { .has-mega:first-child .mega { min-width: 780px; } .mega-grid a { white-space: nowrap; } }

/* ---------- Startbereich: Foto groß im Hintergrund ---------- */
.hx__copy { position: relative; z-index: 2; }
.hx__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
@media (min-width: 1000px) {
  .hx__in { grid-template-columns: minmax(0, 600px); min-height: 800px; }
  .hx__media { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; max-width: none; margin: 0; padding: 0; z-index: 0; }
  .hx__frame { position: absolute; inset: 0; border: 0; border-radius: 0; transform: none; box-shadow: none; }
  .hx__frame picture, .hx__frame img { width: 100%; height: 100%; }
  .hx__frame img { aspect-ratio: auto; object-fit: cover; object-position: 62% 38%; }
  .hx__frame::after { background:
      linear-gradient(90deg, #0b2240 0%, rgba(11,34,64,.85) 14%, rgba(11,34,64,.25) 38%, rgba(11,34,64,0) 60%),
      linear-gradient(0deg, rgba(10,31,54,.75) 0%, rgba(10,31,54,0) 22%); }
  .hx__247 { top: 44px; right: 44px; width: 132px; height: 132px; }
  .hx__247 b { font-size: 2.4rem; }
  .gbadge--float { left: auto; right: 48px; bottom: 86px; }
}
@media (min-width: 1600px) { .hx__media { width: 60%; } .hx__frame img { object-position: 60% 35%; } }
@media (max-width: 999px) {
  .hx__in { padding-top: 0; }
  .hx__media { order: -1; max-width: none; width: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 0 70px; }
  .hx__frame { border: 0; border-radius: 0; transform: none; box-shadow: none; }
  .hx__frame img { aspect-ratio: 4 / 3; object-position: 62% 40%; }
  .hx__frame::after { background: linear-gradient(0deg, #0d2744 0%, rgba(13,39,68,0) 35%); }
  .hx__247 { top: 16px; right: 16px; }
  .gbadge--float { left: 50%; right: auto; bottom: 20px; transform: translateX(-50%); animation: none; }
  .hx__in { gap: 20px; }
}
@media (min-width: 1000px) {
  .hx__media { bottom: auto; width: 66%; }
  .hx__frame { position: relative; inset: auto; }
  .hx__frame img { height: auto; aspect-ratio: 1179 / 780; object-position: center; }
  .hx__frame::after { background:
      linear-gradient(90deg, #0b2240 0%, rgba(11,34,64,.8) 12%, rgba(11,34,64,.2) 34%, rgba(11,34,64,0) 55%),
      linear-gradient(0deg, #0e2a47 0%, rgba(14,42,71,.6) 12%, rgba(14,42,71,0) 32%); }
  .gbadge--float { top: calc(100% - 40px); bottom: auto; right: 56px; }
}
@media (min-width: 1000px) and (max-width: 1299px) { .hx__media { width: 60%; } .hx__in { grid-template-columns: minmax(0, 540px); } }

/* ---------- Bilder auf den Leistungsseiten ---------- */
.svc-media { position: relative; margin: 0 0 clamp(26px, 3.5vw, 40px); }
.svc-media picture img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; box-shadow: 0 30px 60px -36px rgba(14,42,71,.5); }
.svc-media > figcaption { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--ink); font-size: .85rem; font-weight: 800; box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); }
.svc-media > figcaption .ic { width: 17px; height: 17px; color: var(--success); }
.svc-media--ba { padding: 10px; }
.svc-media--ba > figcaption { position: static; box-shadow: none; background: none; padding: 14px 6px 4px; font: 600 1.05rem/1.3 var(--serif); }
.svc-media--ba .vn-num { font-size: .72rem; letter-spacing: .04em; }
/* Zusatzleistungen: 4 Karten */
@media (min-width: 700px) and (max-width: 1099px) { .xs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .xs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qform--hero .qf-field--full label { position: static; width: auto; height: auto; clip: auto; overflow: visible; font-size: .8rem; }

/* ---------- Ganz oben: Laufband + Rabatt-Zeile ---------- */
.topticker { background: #07182b; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.08); }
.topticker > div { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.topticker span { padding: 9px 22px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #cfdcf0; white-space: nowrap; display: flex; align-items: center; }
.topticker span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3b82f6; margin-left: 22px; }
.promo-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; padding: 10px var(--gutter); background: #fbbc05; color: #0a1f36; text-decoration: none; font-size: .95rem; line-height: 1.35; text-align: center; }
.promo-line:hover { background: #ffc928; color: #0a1f36; }
.promo-line__pct { background: #0a1f36; color: #fbbc05; font-weight: 900; border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.promo-line__txt strong { color: #0a1f36; font-weight: 900; }
.promo-line__date { font-weight: 700; }
.promo-line__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.promo-line__cta .ic { width: 16px; height: 16px; }
@media (max-width: 599px) { .promo-line { font-size: .84rem; padding-block: 8px; } .promo-line__date { display: none; } .topticker span { padding: 8px 16px; font-size: .72rem; } }
@media (prefers-reduced-motion: reduce) { .topticker > div { animation: none; } }
@media print { .topticker, .promo-line { display: none !important; } }
@media (max-width: 599px) {
  .promo-line { flex-wrap: nowrap; justify-content: flex-start; text-align: left; gap: 10px; }
  .promo-line__txt strong, .promo-line__cta { display: none; }
  .promo-line::after { content: "›"; font-size: 1.5rem; font-weight: 900; line-height: 1; margin-left: auto; }
}

/* ---------- Echte Fotos ---------- */
.real { margin-top: clamp(44px, 6vw, 72px); }
.real__head { max-width: 640px; margin: 0 auto clamp(24px, 3vw, 36px); text-align: center; }
.real__head h3 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom: .3em; }
.real__head p:last-child { color: var(--muted); margin: 0; }
.real__grid { display: grid; gap: clamp(16px, 2vw, 26px); }
@media (min-width: 760px) { .real__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.real-card { margin: 0; background: #fff; border-radius: 22px; padding: 10px; box-shadow: 0 1px 2px rgba(14,42,71,.06), 0 30px 60px -36px rgba(14,42,71,.45); }
.real-card__img { position: relative; display: block; border-radius: 15px; overflow: hidden; }
.real-card__img img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; transition: transform .5s var(--ease); }
.real-card__img:hover img { transform: scale(1.04); }
.real-card figcaption { display: grid; gap: 4px; padding: 14px 8px 8px; }
.real-card figcaption strong { font: 600 1.12rem/1.25 var(--serif); color: var(--ink); }
.real-card figcaption span { color: var(--muted); font-size: .93rem; line-height: 1.5; }
.real-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; color: #0a1f36; font-size: .76rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 8px 20px -8px rgba(0,0,0,.45); }
.real-badge svg { width: 15px; height: 15px; color: var(--success); }
.svc-media--real { position: relative; }
.svc-media--real picture img { aspect-ratio: 4 / 3; }
.svc-real-cap { margin-top: 10px; color: var(--muted); font-size: .92rem; }
.svc-media--real > figcaption.svc-real-cap { position: static; display: block; background: none; box-shadow: none; padding: 0; border-radius: 0; font-weight: 500; }

/* ---------- Echter Auftrag: Video vorher, Fotos nachher ---------- */
.case { margin-top: clamp(44px, 6vw, 72px); background: #0e2a47; border-radius: 26px; padding: clamp(18px, 3vw, 36px); color: #fff;
  background: radial-gradient(600px 300px at 100% 0%, rgba(59,130,246,.3), transparent 60%), linear-gradient(150deg, #0a1f36, #12345a); }
.case__head { max-width: 640px; margin-bottom: clamp(18px, 2.6vw, 28px); }
.case__head .vn__kicker { color: #8fb6f5; }
.case__head h3 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom: .3em; }
.case__head p:last-child { color: #c8d6e8; margin: 0; }
.case__grid { display: grid; gap: 14px; }
@media (min-width: 760px) { .case__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px; align-items: stretch; } }
.case__video, .case__img { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: #07182b; }
.case__video video { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.case__after { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.case__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.case__note { grid-column: 1 / -1; margin: 4px 0 0; color: #c8d6e8; font-size: .95rem; }
.case__note strong { color: #fff; }
.case__tag { position: absolute; top: 12px; right: 12px; padding: 6px 12px; border-radius: 8px; font-size: .74rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.case__tag--before { background: rgba(10,31,54,.88); border: 1px solid rgba(255,255,255,.25); }
.case__tag--after { background: var(--blue); }
@media (max-width: 519px) { .case__img .real-badge { font-size: .62rem; padding: 5px 8px; } .case__tag { font-size: .62rem; padding: 5px 8px; } }
.case--compact { margin: 0 0 clamp(26px, 3.5vw, 40px); padding: 14px; }
.case--compact .case__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
@media (prefers-reduced-motion: reduce) { .case__video video { animation: none; } }
@media (min-width: 760px) { .case__grid, .case--compact .case__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; } }
@media (max-width: 759px) { .case__img .case__tag { top: auto; bottom: 10px; right: auto; left: 10px; } }
.case--compact .case__img .case__tag { top: auto; bottom: 10px; right: auto; left: 10px; }
.case--compact .case__video .case__tag { top: auto; bottom: 10px; right: auto; left: 10px; } @media (max-width: 759px) { .case__video .case__tag { top: auto; bottom: 12px; right: auto; left: 12px; } }

/* ---------- Startbereich: echtes Hochformat-Foto ---------- */
.hx__realbadge { top: auto; left: 16px; bottom: 16px; z-index: 2; }
@media (min-width: 1000px) {
  .hx__media { top: 0; bottom: 0; width: 46%; }
  .hx__frame { position: absolute; inset: 0; }
  .hx__frame picture, .hx__frame img { height: 100%; }
  .hx__frame img { aspect-ratio: auto; object-fit: cover; object-position: 50% 16%; }
  .hx__frame::after { background:
      linear-gradient(90deg, #0b2240 0%, rgba(11,34,64,.55) 14%, rgba(11,34,64,0) 34%),
      linear-gradient(0deg, rgba(10,31,54,.55) 0%, rgba(10,31,54,0) 25%); }
  .hx__in { grid-template-columns: minmax(0, 620px); }
  .gbadge--float { top: auto; bottom: 64px; right: 40px; }
  .hx__realbadge { left: auto; right: 40px; bottom: 24px; }
  .hx__247 { top: 36px; right: 36px; }
}
@media (min-width: 1000px) and (max-width: 1299px) { .hx__media { width: 42%; } .hx__in { grid-template-columns: minmax(0, 520px); } }
@media (max-width: 999px) { .hx__frame img { aspect-ratio: 4 / 3.6; object-position: 50% 18%; } .hx__realbadge { bottom: auto; top: 16px; left: 16px; } }
.sp-realbadge { top: 16px; left: 16px; z-index: 2; }
/* Zwei Videos nebeneinander */
.case--duo { margin-top: clamp(20px, 3vw, 28px); }
.case__grid--duo, .case--compact .case__grid--duo { grid-template-columns: 1fr 1fr !important; gap: 14px; }
@media (min-width: 900px) { .case--duo:not(.case--compact) .case__grid--duo { max-width: 820px; } }
.case--duo .case__video .case__tag { top: auto; bottom: 12px; right: auto; left: 12px; }
@media (max-width: 519px) { .case--duo .real-badge { font-size: .6rem; padding: 5px 8px; } }
@media (min-width: 900px) {
  .case--duo:not(.case--compact) { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; }
  .case--duo:not(.case--compact) .case__head { margin: 0; }
  .case--duo:not(.case--compact) .case__grid--duo { max-width: none; }
}
.svc-media--real picture img { max-height: 620px; }
.cx__media .cx__badge { top: 16px; left: 16px; z-index: 2; }