/* Manrope – selbst gehostet (SIL Open Font License).
   Wichtig: keine Einbindung über fonts.googleapis.com, damit beim Seitenaufruf
   keine IP-Adresse der Besucher an Google übertragen wird (DSGVO). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* =========================================================
   Kfz-Gutachter Alterna – unfallexperte-bayern.de
   Helle, ruhige Variante
   ========================================================= */

:root {
  /* Logofarben: Blau #0B4F93, Gold #C79A2E */
  --navy-950: #061F3A;
  --navy-900: #0A2A4A;
  --navy-800: #0E3A63;
  --navy-700: #12497C;

  --accent-600: #083C70;
  --accent-500: #0B4F93;
  --accent-400: #2A72B8;
  --accent-100: #E3EDF7;
  --accent-050: #F1F6FB;

  --gold: #C79A2E;
  --gold-dark: #AD851F;
  --gold-soft: #F6EDD6;

  --signal: #C79A2E;
  --signal-dark: #AD851F;

  --success: #1B8A5A;
  --star: #C79A2E;

  --ink: #101C29;
  --body: #4B5A69;
  --muted: #77869A;
  --line: #DCE5EE;
  --line-strong: #C3D3E2;
  --surface: #FFFFFF;
  --surface-2: #EAF2FA;
  --surface-3: #DCE9F6;

  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;

  --shadow-sm: 0 1px 3px rgba(20, 40, 60, .06);
  --shadow: 0 2px 10px rgba(20, 40, 60, .07);
  --shadow-lg: 0 8px 30px rgba(20, 40, 60, .10);

  --max: 1160px;
  --gutter: 24px;

  --ff: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Ohne diese Zeile setzt sich .btn { display:inline-flex } gegen das
   hidden-Attribut durch – ausgeblendete Schaltflächen blieben sichtbar. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  font-family: var(--ff);
  font-size: 17px;
  line-height: 1.72;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-500); text-decoration: none; }
a:hover { color: var(--navy-800); }
h1, h2, h3, h4 { color: var(--ink); font-weight: 800; line-height: 1.22; letter-spacing: -.015em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.08rem, 1.7vw, 1.26rem); }
p { margin: 0 0 1.2em; }
ul { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: .5em; }
strong { color: var(--ink); font-weight: 700; }
:focus-visible { outline: 3px solid var(--accent-400); outline-offset: 2px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding: clamp(60px, 8vw, 104px) 0; }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.section--alt { background: var(--surface-2); }
.section--dark { background: var(--navy-900); color: #BCCCDB; }
.section--dark h2, .section--dark h3 { color: #fff; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.center { text-align: center; }
.stack-lead { max-width: 680px; margin-inline: auto; }
/* Linksbündige Variante. Wenn jede Überschrift der Seite mittig über einem
   gleich breiten Textblock steht, wirkt das wie aus einer Vorlage. Ein Teil
   der Abschnitte setzt deshalb links an – und der Strich darunter gibt dem
   Ganzen eine Kante statt der üblichen schwebenden Mitte. */
.lead-left { max-width: 620px; margin-inline: 0; text-align: left; }
.lead-left h2 { position: relative; padding-top: 18px; }
.lead-left h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 54px; height: 3px; background: var(--signal);
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent-600); background: var(--accent-100);
  padding: 7px 13px; border-radius: 100px; margin-bottom: 16px;
}
.eyebrow svg { width: 15px; height: 15px; flex: none; }
.section--dark .eyebrow { color: #CBE1F5; background: rgba(255,255,255,.1); }
.lead { font-size: 1.1rem; color: var(--body); }
.section--dark .lead { color: #A9BCCE; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: 1.02rem; font-weight: 700; line-height: 1;
  padding: 17px 28px; border-radius: var(--radius); border: 2px solid transparent;
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap; text-align: center;
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary { background: var(--gold); color: var(--navy-950); }
.btn--primary:hover { background: var(--gold-dark); color: var(--navy-950); }
.btn--primary svg { color: var(--navy-950); }

.btn--accent { background: var(--accent-500); color: #fff; }
.btn--accent:hover { background: var(--accent-600); color: #fff; }

.btn--outline { background: #fff; color: var(--navy-800); border-color: var(--line-strong); }
.btn--outline:hover { color: var(--accent-500); border-color: var(--accent-500); }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }

/* ---------- Topbar ---------- */
.topbar { background: var(--navy-900); color: #9FB3C6; font-size: .85rem; font-weight: 600; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar a { color: #D3E3F1; }
.topbar a:hover { color: #fff; }
.topbar__items { display: flex; gap: 22px; align-items: center; }
.topbar__item { display: inline-flex; align-items: center; gap: 7px; }
.topbar__item svg { width: 15px; height: 15px; color: #6FA8D8; flex: none; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #34B87C; flex: none; }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); }
.header.is-stuck { box-shadow: 0 2px 12px rgba(20,40,60,.08); }
.header .wrap { display: flex; align-items: center; gap: 14px; min-height: 86px; }

.logo { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; }
.logo__mark {
  width: 62px; height: 62px; flex: none;
  display: grid; place-items: center;
}
.logo__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo__mark svg { width: 24px; height: 24px; }
@media (max-width: 620px) { .logo__mark { width: 46px; height: 46px; } .header .wrap { min-height: 72px; } }
.logo__text { display: flex; flex-direction: column; line-height: 1.2; }
.logo__name { font-weight: 800; font-size: 1.14rem; color: var(--ink); white-space: nowrap; }
.logo__sub { font-size: .69rem; font-weight: 700; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 13px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: .95rem; color: var(--navy-800); white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { background: var(--surface-2); color: var(--accent-500); }
.nav__link.is-active { color: var(--accent-500); box-shadow: inset 0 -3px 0 var(--gold); }
.nav__link svg.chev { width: 14px; height: 14px; transition: transform .2s; }
.nav__link[aria-expanded="true"] svg.chev { transform: rotate(180deg); }

.has-drop { position: relative; }
.drop {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg); padding: 10px; min-width: 540px;
  opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.drop.is-open { opacity: 1; visibility: visible; }
.drop--wide { min-width: 620px; grid-template-columns: repeat(3, 1fr); }
.drop a { display: block; padding: 10px 13px; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 700; color: var(--navy-800); }
.drop a small { display: block; font-weight: 500; font-size: .77rem; color: var(--muted); margin-top: 2px; }
.drop a:hover { background: var(--surface-2); color: var(--accent-500); }
.drop__all { grid-column: 1/-1; margin-top: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.drop__all a { color: var(--accent-500); }

.burger { display: none; width: 46px; height: 46px; border: 1px solid var(--line-strong); background: #fff; border-radius: var(--radius); cursor: pointer; padding: 0; place-items: center; }
.burger span { display: block; width: 20px; height: 2px; background: var(--navy-800); position: relative; transition: .2s; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--navy-800); transition: .2s; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { top: 0; transform: rotate(45deg); }
.burger.is-open span::after { top: 0; transform: rotate(-45deg); }

.mobile-nav {
  display: none; position: fixed; inset: 0 0 0 auto; width: min(400px, 100%);
  background: #fff; z-index: 200; padding: 18px 18px 120px; overflow-y: auto;
  transform: translateX(100%); transition: transform .25s ease;
  box-shadow: -8px 0 30px rgba(20,40,60,.18);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mobile-nav details { border-bottom: 1px solid var(--line); }
.mobile-nav details > summary { list-style: none; cursor: pointer; padding: 15px 4px; font-weight: 700; font-size: 1.02rem; color: var(--navy-800); display: flex; align-items: center; justify-content: space-between; }
.mobile-nav details > summary::-webkit-details-marker { display: none; }
.mobile-nav details > summary::after { content: '+'; font-size: 1.4rem; font-weight: 400; color: var(--muted); }
.mobile-nav details[open] > summary::after { content: '−'; }
.mobile-nav details .sub { padding: 0 4px 12px; display: grid; gap: 1px; }
.mobile-nav details .sub a { padding: 9px 12px; border-radius: var(--radius-sm); font-weight: 600; color: var(--body); font-size: .94rem; }
.mobile-nav details .sub a:hover { background: var(--surface-2); }
.mobile-nav > a.mlink { display: block; padding: 15px 4px; font-weight: 700; font-size: 1.02rem; color: var(--navy-800); border-bottom: 1px solid var(--line); }
.mobile-nav__cta { margin-top: 22px; display: grid; gap: 10px; }
.overlay { display: none; position: fixed; inset: 0; background: rgba(16,41,63,.5); z-index: 150; }
.overlay.is-open { display: block; }

/* ---------- Hero (hell) ---------- */
.hero {
  position: relative;
  background: linear-gradient(168deg, #D8E7F6 0%, #EBF3FB 55%, #F6FAFD 100%);
  border-bottom: 1px solid var(--line);
  padding: clamp(48px, 6vw, 84px) 0 clamp(52px, 6vw, 88px);
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -220px; right: -180px; width: 620px; height: 620px;
  border-radius: 50%; background: radial-gradient(circle, rgba(30,113,184,.10), transparent 68%);
}
.hero__inner { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--accent-600); }
.hero__lead { font-size: clamp(1.04rem, 1.4vw, 1.16rem); color: var(--body); max-width: 54ch; margin-bottom: 28px; }

.hero__usps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 13px; }
.hero__usps li { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; margin: 0; }
.hero__usps svg { width: 22px; height: 22px; color: var(--success); flex: none; margin-top: 2px; }

/* Bewertungssiegel */
.rating { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.rating__stars { display: flex; gap: 2px; }
.rating__stars svg { width: 19px; height: 19px; color: var(--star); }
.rating b { color: var(--ink); font-size: .96rem; }
.rating span { color: var(--muted); font-size: .88rem; font-weight: 600; }

/* Kontaktkarte im Hero */
.hero-card {
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--gold);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-lg);
}
.hero-card h3 { font-size: 1.22rem; margin-bottom: 5px; }
.hero-card p.sm { color: var(--muted); font-size: .92rem; margin-bottom: 20px; }
.hero-card__phone {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 10px;
  transition: border-color .15s, background .15s;
}
.hero-card__phone:hover { background: var(--accent-050); border-color: var(--accent-400); }
.hero-card__phone .ic { width: 40px; height: 40px; border-radius: var(--radius); background: var(--navy-800); display: grid; place-items: center; flex: none; }
.hero-card__phone .ic svg { width: 19px; height: 19px; color: #fff; }
.hero-card__phone b { display: block; color: var(--ink); font-size: 1.1rem; }
.hero-card__phone span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.hero-card .btn { width: 100%; margin-top: 8px; }
.hero-card__foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: .84rem; font-weight: 600; }
.hero-card__foot svg { width: 17px; height: 17px; color: var(--success); flex: none; }

/* ---------- Trustbar ---------- */
.trustbar { background: #fff; border-bottom: 1px solid var(--line); }
.trustbar .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-block: 26px; }
.trust-item { display: flex; align-items: center; gap: 13px; justify-content: center; text-align: left; }
.trust-item svg { width: 26px; height: 26px; color: var(--accent-500); flex: none; }
.trust-item b { display: block; color: var(--ink); font-size: .95rem; font-weight: 700; line-height: 1.25; }
.trust-item span { font-size: .82rem; color: var(--muted); font-weight: 500; }

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; color: var(--body);
  transition: border-color .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column;
}
.card:hover { border-color: var(--accent-400); }
a.card:hover { color: var(--body); }
.card__icon {
  width: 34px; height: 34px; display: grid; place-items: start center;
  margin-bottom: 16px; color: var(--accent-500); flex: none;
}
.card__icon svg { width: 30px; height: 30px; stroke-width: 1.5; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .96rem; margin-bottom: 18px; }
.card__link { margin-top: auto; font-weight: 700; font-size: .92rem; color: var(--accent-500); display: inline-flex; align-items: center; gap: 7px; }
.card__link svg { width: 15px; height: 15px; }
.card--highlight { border-color: var(--signal); }
.card__badge {
  position: absolute; top: 0; right: 0; background: var(--signal); color: #fff;
  font-size: .69rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 0 var(--radius) 0 var(--radius);
}
.card--rel { position: relative; }

/* ---------- Prozess ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; position: relative; }
.step { position: relative; text-align: center; padding: 0 8px; }
.step__num {
  width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 50%;
  background: #fff; color: var(--accent-600); border: 2px solid var(--accent-400);
  display: grid; place-items: center; font-size: 1.35rem; font-weight: 800;
  position: relative; z-index: 2; box-shadow: 0 0 0 6px var(--surface-2);
}
.section:not(.section--alt) .step__num { box-shadow: 0 0 0 6px #fff; }
.step h3 { font-size: 1.12rem; margin-bottom: 8px; }
.step p { font-size: .95rem; margin: 0; }
.steps::before { content: ''; position: absolute; top: 30px; left: 14%; right: 14%; height: 1px; background: var(--line-strong); z-index: 1; }
@media (max-width: 900px) { .steps::before { display: none; } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 24px; }
.stat { text-align: center; padding: 30px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.stat b { display: block; font-size: clamp(1.9rem, 3.6vw, 2.5rem); font-weight: 800; color: var(--accent-600); line-height: 1; margin-bottom: 8px; }
.stat span { font-size: .9rem; color: var(--muted); font-weight: 600; }
.section--dark .stat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.section--dark .stat b { color: #fff; }
.section--dark .stat span { color: #A9BCCE; }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 60px); align-items: center; }
.split--rev .split__media { order: 2; }
.split__media {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  background: var(--accent-050); min-height: 300px;
  position: relative; display: grid; place-items: center; padding: 40px;
}
.section--alt .split__media { background: #fff; }
.split__media .mediabox { text-align: center; max-width: 32ch; }
.split__media .mediabox svg { width: 60px; height: 60px; margin: 0 auto 16px; color: var(--accent-500); }
.split__media .mediabox b { font-size: 1.2rem; font-weight: 800; display: block; color: var(--ink); margin-bottom: 5px; }
.split__media .mediabox span { color: var(--muted); font-size: .93rem; }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: .99rem; }
.checklist svg { width: 21px; height: 21px; color: var(--success); flex: none; margin-top: 3px; }
.section--dark .checklist li { color: #BCCCDB; }
.section--dark .checklist strong { color: #fff; }

/* ---------- Video ---------- */
.videobox {
  position: relative; max-width: 900px; margin-inline: auto;
  border-radius: var(--radius); overflow: hidden; background: #000;
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); line-height: 0;
}
.videobox__player { width: 100%; height: auto; display: block; }
.videobox__play {
  position: absolute; inset: 0; margin: auto; width: 92px; height: 92px;
  border: 0; border-radius: 50%; background: var(--gold); color: var(--navy-950);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  box-shadow: 0 8px 28px rgba(0,0,0,.35); transition: background .15s ease, transform .15s ease;
}
.videobox__play:hover { background: var(--gold-dark); transform: scale(1.05); }
.videobox__play svg { width: 42px; height: 42px; margin-left: 5px; }
.videobox.is-playing .videobox__play { display: none; }
@media (max-width: 620px) { .videobox__play { width: 66px; height: 66px; } .videobox__play svg { width: 30px; height: 30px; } }

/* ---------- Chips / Standorte ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 100px;
  background: #fff; border: 1px solid var(--line-strong); font-weight: 600; font-size: .9rem; color: var(--navy-800);
  transition: border-color .15s, color .15s;
}
.chip:hover { border-color: var(--accent-500); color: var(--accent-500); }
.chip svg { width: 14px; height: 14px; color: var(--accent-500); }

.city-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: border-color .15s, box-shadow .15s; display: block; color: var(--body); }
.city-card:hover { border-color: var(--accent-400); color: var(--body); }
.city-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.city-card__pin { width: 22px; height: 22px; display: grid; place-items: center; color: var(--accent-500); flex: none; }
.city-card__pin svg { width: 22px; height: 22px; }
.city-card h3 { margin: 0; font-size: 1.14rem; }
.city-card p { font-size: .89rem; color: var(--muted); margin: 0 0 12px; }
.city-card .card__link { font-size: .89rem; color: var(--accent-500); font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.city-card .card__link svg { width: 15px; height: 15px; }

/* ---------- FAQ ---------- */
.faq { max-width: 840px; margin-inline: auto; display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .15s; }
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; position: relative; font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 24px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--accent-500); border-bottom: 2px solid var(--accent-500);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq .faq__body { padding: 0 24px 22px; font-size: .98rem; }
.faq .faq__body p:last-child { margin-bottom: 0; }

/* ---------- Bewertungen ---------- */
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; }
.review__stars { display: flex; gap: 3px; margin-bottom: 14px; }
.review__stars svg { width: 18px; height: 18px; color: var(--star); }
.review p { font-size: .97rem; color: var(--ink); }
.review__who { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.review__av { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-100); color: var(--accent-600); display: grid; place-items: center; font-weight: 800; font-size: .93rem; flex: none; }
.review__who b { display: block; font-size: .92rem; color: var(--ink); }
.review__who span { font-size: .8rem; color: var(--muted); font-weight: 500; }
.review--placeholder { border-style: dashed; border-color: var(--line-strong); background: var(--surface-2); }
.review--placeholder p { color: var(--muted); font-style: italic; }
.placeholder-note {
  display: flex; gap: 12px; align-items: flex-start; max-width: 720px; margin: 0 auto 32px;
  background: var(--gold-soft); border: 1px solid #E6D3A4; border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 16px 20px; font-size: .93rem; color: #7A5327;
}
.placeholder-note svg { width: 20px; height: 20px; color: var(--signal); flex: none; margin-top: 2px; }
.placeholder-note b { color: #5E3F1D; }

/* ---------- CTA-Band ---------- */
.cta-band {
  border-radius: var(--radius); padding: clamp(36px, 5vw, 56px); position: relative;
  background: var(--navy-900); border-left: 5px solid var(--gold); color: #fff; text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #B0C3D6; max-width: 600px; margin-inline: auto; }

/* ---------- Formular ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 3.5vw, 40px); box-shadow: var(--shadow-sm); }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: .89rem; color: var(--ink); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 3px rgba(30,113,184,.13); }
.field input:invalid:not(:placeholder-shown), .field textarea:invalid:not(:placeholder-shown) { border-color: #D2604F; }
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.check { display: flex; gap: 11px; align-items: flex-start; font-size: .87rem; color: var(--muted); margin-bottom: 20px; }
.check input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--accent-500); }
.form-note { font-size: .82rem; color: var(--muted); margin-top: 14px; }
.form-status { margin-top: 20px; padding: 16px 18px; border-radius: var(--radius); font-size: .95rem; background: var(--accent-100); border-left: 4px solid var(--accent-500); color: var(--ink); }
.form-status.is-ok { background: #E9F7F0; border-left-color: var(--success); }
.form-status.is-error { background: #FCEDEA; border-left-color: #C9503C; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Kontakt-Kacheln ---------- */
.contact-tile { display: flex; gap: 15px; align-items: flex-start; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.contact-tile .ic { width: 44px; height: 44px; border-radius: var(--radius); background: var(--accent-100); color: var(--accent-600); display: grid; place-items: center; flex: none; }
.contact-tile .ic svg { width: 21px; height: 21px; }
.contact-tile b { display: block; color: var(--ink); font-size: .98rem; margin-bottom: 3px; }
.contact-tile a, .contact-tile span { font-size: .94rem; color: var(--body); display: block; }
.contact-tile a:hover { color: var(--accent-500); }

/* ---------- Breadcrumb ---------- */
.crumb { font-size: .83rem; color: var(--muted); font-weight: 500; padding: 18px 0; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--accent-500); }
.crumb span { margin: 0 7px; opacity: .5; }

/* ---------- Page-Hero (hell) ---------- */
.phero {
  background: linear-gradient(168deg, #D8E7F6 0%, #EBF3FB 70%, #F6FAFD 100%);
  border-bottom: 1px solid var(--line);
  padding: clamp(24px, 3vw, 36px) 0 clamp(44px, 5vw, 64px); position: relative; overflow: hidden;
}
.phero::before {
  content: ''; position: absolute; top: -240px; right: -160px; width: 560px; height: 560px;
  border-radius: 50%; background: radial-gradient(circle, rgba(30,113,184,.09), transparent 68%);
}
.phero .wrap { position: relative; }
.phero h1 { max-width: 22ch; }
.phero p { color: var(--body); max-width: 62ch; font-size: 1.06rem; }

/* ---------- Prose ---------- */
.prose { max-width: 740px; }
.prose h2 { margin-top: 2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6em; }
.prose ul { padding-left: 1.3em; }
.callout { background: var(--accent-050); border-left: 4px solid var(--accent-500); padding: 22px 24px; border-radius: 0 var(--radius) var(--radius) 0; margin: 28px 0; }
.callout p:last-child { margin-bottom: 0; }
.callout b { color: var(--navy-800); }

/* Sidebar */
.with-side { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 48px; align-items: start; }
.side-card { background: var(--navy-900); color: #fff; border-top: 4px solid var(--gold);
  border-radius: var(--radius); padding: 28px; margin-bottom: 24px; }
/* Hinweis: kein position:sticky – die Box würde sonst über die darunter
   liegenden Kästen der Seitenspalte laufen, sobald man weiterscrollt. */
.side-card h3 { color: #fff; font-size: 1.18rem; }
.side-card p { color: #A9BCCE; font-size: .93rem; }
.side-card .btn { width: 100%; margin-bottom: 9px; }
.side-list { list-style: none; padding: 0; margin: 0; }
.side-list li { margin: 0; border-bottom: 1px solid var(--line); }
.side-list li:last-child { border: 0; }
.side-list a { display: block; padding: 12px 4px; font-weight: 600; font-size: .94rem; color: var(--navy-800); }
.side-list a:hover { color: var(--accent-500); }
.side-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.side-box h3 { font-size: 1.02rem; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-950); color: #90A5B9; padding: clamp(48px, 6vw, 70px) 0 0; font-size: .94rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 38px; padding-bottom: 42px; }
.footer h4 { color: #fff; font-size: .8rem; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 16px; font-weight: 800; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 9px; }
.footer a { color: #90A5B9; }
.footer a:hover { color: #fff; }
.footer .logo__name { color: #fff; }
.footer .logo__sub { color: #6E8399; }
.footer .logo__mark { background: #fff; border-radius: 10px; padding: 5px; width: 56px; height: 56px; }
.footer__about { max-width: 34ch; margin-top: 16px; font-size: .91rem; line-height: 1.75; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0 28px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; font-size: .86rem; }
.footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- Mobile Call-Bar ---------- */
.callbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: #fff; border-top: 1px solid var(--line-strong);
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  gap: 9px; box-shadow: 0 -2px 12px rgba(20,40,60,.12);
}
.callbar .btn { flex: 1; padding: 14px 12px; font-size: .94rem; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .with-side { grid-template-columns: minmax(0, 1fr); }
  .side-card { position: static; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .nav { display: none; }
  .hide-mob { display: none !important; }
  .burger { display: grid; }
  /* Geschlossen bleibt das Menü ausgeblendet. Mit display:block und
     translateX(100%) läge es rechts neben dem Bildschirm und würde die
     Seite auf schmalen Geräten um gut 25 Pixel verschiebbar machen. */
  .mobile-nav.is-open { display: block; }
  .trustbar .wrap { grid-template-columns: 1fr 1fr; gap: 18px; }
  .split { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .topbar__items .hide-sm { display: none; }
}
@media (max-width: 620px) {
  body { font-size: 16px; padding-bottom: 76px; }
  :root { --gutter: 18px; }
  .callbar { display: flex; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .field-row { grid-template-columns: 1fr; }
  .trustbar .wrap { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .callbar .btn { width: auto; }
  .hero-card { padding: 22px; }
  .card { padding: 24px; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* ---------- Print ---------- */
@media print {
  .header, .topbar, .callbar, .footer, .side-card, .btn { display: none !important; }
  body { color: #000; }
}

/* ---------- Google-Bewertungssiegel ---------- */
.gbadge {
  display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 100px;
  padding: 9px 20px 9px 10px; box-shadow: var(--shadow-sm); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gbadge:hover { border-color: var(--accent-400); box-shadow: var(--shadow); color: var(--ink); transform: translateY(-1px); }
.gbadge__score {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: var(--accent-600); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
}
.gbadge__body { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.gbadge__stars { display: flex; gap: 2px; }
.gbadge__stars svg { width: 16px; height: 16px; color: var(--star); }
.gbadge__txt { font-size: .87rem; color: var(--muted); font-weight: 600; }
.gbadge__txt b { color: var(--ink); font-weight: 800; }
.gbadge__arrow svg { width: 16px; height: 16px; color: var(--muted); }
.gbadge:hover .gbadge__arrow svg { color: var(--accent-500); }

/* im Header, damit die Bewertung auf jeder Seite sichtbar ist */
.header .gbadge { margin-bottom: 0; padding: 6px 14px 6px 7px; }
.header .gbadge__score { width: 36px; height: 36px; font-size: .95rem; }
.header .gbadge__stars svg { width: 13px; height: 13px; }
.header .gbadge__txt { font-size: .78rem; white-space: nowrap; }
@media (max-width: 1400px) { .header .gbadge { display: none; } }

/* ---------- Hero-Illustration ---------- */
.hero__inner { align-items: center; grid-template-columns: 1fr 1.06fr; gap: 46px; }
.hero__media {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: #fff;
}
.hero__media img { width: 100%; height: auto; display: block; }

/* ---------- Siegel-Leiste ---------- */
.seals { background: #fff; border-bottom: 1px solid var(--line); }
.seals .wrap {
  /* Spaltenzahl kommt aus dem Seitenaufbau (--seal-cols), damit eine
     zusätzliche Kachel keine zweite Zeile mit einem einsamen Eintrag ergibt.
     Nur als Variable, nicht als Inline-Style: sonst würden die
     Media-Queries weiter unten überstimmt und die Leiste liefe mobil über. */
  display: grid; grid-template-columns: repeat(var(--seal-cols, 5), 1fr); gap: 10px;
  padding-block: 24px;
}
.seal { display: flex; align-items: center; gap: 12px; justify-content: center; text-align: left; }
.seal + .seal { border-left: 1px solid var(--line); padding-left: 10px; }
.seal svg { width: 25px; height: 25px; color: var(--accent-500); flex: none; }
.seal b { display: block; color: var(--ink); font-size: .95rem; font-weight: 800; line-height: 1.25; }
.seal span { font-size: .8rem; color: var(--muted); font-weight: 500; }
.seal:first-child svg { color: var(--star); }

/* ---------- Vorteils-Kacheln ---------- */
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.benefit {
  display: flex; flex-direction: column; gap: 12px;
  background: none; border: 0; border-top: 2px solid var(--navy-800);
  border-radius: 0; padding: 20px 0 0;
}


.benefit__icon {
  width: 48px; height: 48px; border-radius: var(--radius); flex: none;
  background: var(--accent-100); color: var(--accent-600); display: grid; place-items: center;
}
.benefit__icon svg { width: 24px; height: 24px; }
.benefit h3 { font-size: 1.03rem; margin-bottom: 5px; }
.benefit p { font-size: .92rem; margin: 0; line-height: 1.6; }

@media (max-width: 1080px) {
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .seals .wrap { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .seal + .seal { border-left: 0; padding-left: 0; }
}
@media (max-width: 620px) {
  .benefits { grid-template-columns: 1fr; gap: 22px; }
  .seals .wrap { grid-template-columns: 1fr 1fr; gap: 16px; }
  .seal { justify-content: flex-start; }
}

/* ---------- Bewertungsraster ---------- */
.reviews-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .reviews-grid { grid-template-columns: 1fr; } }


/* ---------- Dunkelblaue Abschnitte ---------- */
.section--dark .card,
.section--dark .city-card,
.section--dark .review,
.section--dark .benefit { background: #fff; border-color: rgba(255,255,255,.16); }
.section--dark .card:hover,
.section--dark .city-card:hover,
.section--dark .benefit:hover { box-shadow: 0 6px 22px rgba(0,0,0,.28); border-color: rgba(255,255,255,.35); }
.section--dark .videobox { border-color: rgba(255,255,255,.2); }
.section--dark .placeholder-note { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #D8E5F0; }
.section--dark .placeholder-note b { color: #fff; }
.section--dark p { color: #B7C9D9; }
.section--dark .split__media { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.section--dark .split__media .mediabox b { color: #fff; }
.section--dark .split__media .mediabox span { color: #A9BCCE; }
.section--dark .steps::before { background: rgba(255,255,255,.22); }
.section--dark .step__num { background: var(--navy-800); color: #fff; border-color: var(--accent-400); box-shadow: 0 0 0 6px var(--navy-900); }

/* Weiße Karten in dunklen Abschnitten: Textfarben zurücksetzen */
.section--dark .card h3,
.section--dark .city-card h3,
.section--dark .benefit h3,
.section--dark .review__who b { color: var(--ink); }
.section--dark .card p,
.section--dark .benefit p,
.section--dark .review p { color: var(--body); }
.section--dark .city-card p,
.section--dark .review__who span { color: var(--muted); }
.section--dark .card__link,
.section--dark .city-card .card__link { color: var(--accent-500); }


/* Gold als zweiter Akzent */
.card__badge { background: var(--gold); color: var(--navy-950); }
.card--highlight { border-color: var(--gold); }
.eyebrow { color: var(--accent-600); background: var(--accent-100); }
.section--dark .eyebrow { color: var(--gold); background: rgba(199,154,46,.14); }
.step__num { border-color: var(--gold); color: var(--accent-600); }
.section--dark .step__num { border-color: var(--gold); }
.gbadge__score { background: var(--accent-500); }
.seal:first-child svg { color: var(--gold); }
.callbar .btn--primary { color: var(--navy-950); }

/* ---------- Das Wichtigste vorab ---------- */
.quickfacts {
  background: var(--accent-050); border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 26px 28px; margin-bottom: 34px;
}
.quickfacts h2 { font-size: 1.15rem !important; margin: 0 0 16px !important; }
.quickfacts .checklist li { font-size: .96rem; }

/* ---------- Rechenbeispiel ---------- */
.example {
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 26px 28px; margin: 32px 0; box-shadow: var(--shadow-sm);
}
.example h3 { font-size: 1.1rem; margin: 0 0 16px; }
.example__table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.example__table td { padding: 11px 0; border-bottom: 1px solid var(--line); }
.example__table td:last-child {
  text-align: right; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 16px;
}
.example__table tr.muted td { color: var(--muted); }
.example__table tr.muted td:last-child { color: var(--muted); font-weight: 600; }
.example__table tr.sum td {
  border-bottom: 0; border-top: 2px solid var(--navy-800);
  font-weight: 800; color: var(--ink); font-size: 1.06rem; padding-top: 14px;
}
.example__table tr.sum td:last-child { color: var(--accent-600); font-size: 1.2rem; }
.example__note { font-size: .87rem; color: var(--muted); margin: 16px 0 0; line-height: 1.6; }
@media (max-width: 620px) {
  .example { padding: 20px; }
  .example__table { font-size: .9rem; }
}

/* ---------- Standortadresse ---------- */
.office {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--accent-050); border: 1px solid var(--line);
  border-left: 4px solid var(--accent-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px; margin: 24px 0 28px;
}
.office__ic {
  width: 46px; height: 46px; border-radius: var(--radius); flex: none;
  background: var(--navy-800); color: #fff; display: grid; place-items: center;
}
.office__ic svg { width: 22px; height: 22px; }
.office b { display: block; color: var(--ink); font-size: 1.04rem; margin-bottom: 6px; }
.office span { display: block; font-size: .96rem; line-height: 1.6; color: var(--body); }
.office span + span { margin-top: 8px; }

/* ---------- Einwilligungs-Banner ---------- */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 400;
  background: #fff; border: 1px solid var(--line-strong); border-top: 4px solid var(--gold);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(14px); transition: opacity .25s ease, transform .25s ease;
}
.consent.is-in { opacity: 1; transform: none; }
.consent__inner {
  max-width: var(--max); margin-inline: auto; padding: 20px 24px;
  display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.consent__text { flex: 1 1 420px; }
.consent__text b { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: 4px; }
.consent__text p { margin: 0; font-size: .92rem; line-height: 1.6; }
.consent__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.consent__btns .btn { padding: 13px 22px; font-size: .95rem; }
@media (max-width: 620px) {
  .consent { left: 8px; right: 8px; bottom: 8px; }
  .consent__inner { padding: 16px; gap: 14px; }
  .consent__btns { width: 100%; }
  .consent__btns .btn { flex: 1; }
}

/* ---------- Werbe-Landingpages ---------- */
.lp-head { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; }
.lp-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; }
.lp-head__cta { padding: 14px 22px; }
@media (max-width: 620px) {
  .lp-head .wrap { min-height: 64px; }
  .lp-head__cta span { display: none; }
  .lp-head__cta { padding: 13px 16px; }
  .lp-head__cta::after { content: "Anrufen"; font-weight: 700; }
}

.lp-hero { background: var(--surface-2); padding: clamp(38px, 6vw, 72px) 0; }
.lp-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.lp-hero h1 { font-size: clamp(1.9rem, 3.8vw, 2.85rem); margin-bottom: .45em; }
.lp-hero__note { display: flex; align-items: flex-start; gap: 8px; font-size: .92rem; color: var(--muted); margin: 20px 0 0; }
.lp-hero__note svg { width: 16px; height: 16px; flex: none; margin-top: 5px; }
.lp-hero__card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--gold);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.lp-hero__card .checklist { margin: 20px 0; }
.lp-hero__card .btn { width: 100%; }
.gbadge--lg { display: inline-flex; padding: 0 0 18px; border-bottom: 1px solid var(--line); width: 100%; }
@media (max-width: 900px) { .lp-hero__grid { grid-template-columns: 1fr; gap: 30px; } }

.btn--lg { padding: 19px 30px; font-size: 1.06rem; }

.lp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.lp-cols--form { gap: 48px; }
@media (max-width: 860px) { .lp-cols { grid-template-columns: 1fr; gap: 32px; } }

.lp-quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; }
.lp-quote p { font-size: .98rem; margin: 0 0 6px; }
.lp-quote cite { display: block; font-style: normal; font-weight: 700; font-size: .87rem; color: var(--muted); }
.lp-area { font-size: .92rem; color: var(--muted); margin-top: 24px; }

.lp-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.lp-form .btn { width: 100%; margin-top: 8px; }

.lp-final { background: var(--navy-900); color: #BCCCDB; padding: clamp(44px, 6vw, 76px) 0; }
.lp-final h2 { color: #fff; }
.lp-final p { max-width: 560px; margin-inline: auto; }
.lp-final .btn { margin: 6px; }

.lp-foot { background: var(--navy-950); color: #8FA3B6; padding: 26px 0; font-size: .88rem; }
.lp-foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lp-foot p { margin: 0; }
.lp-foot a { color: #C9DCEC; }

/* ---------- Schadensmeldung in fünf Schritten ---------- */
.wz {
  max-width: 720px; margin: 0 auto; background: #fff;
  border: 1px solid var(--line); border-top: 4px solid var(--gold);
  border-radius: var(--radius); padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow);
}
.wz__progress { margin-bottom: 30px; }
.wz__track { height: 5px; background: var(--surface-2); border-radius: 100px; overflow: hidden; }
.wz__fill { height: 100%; width: 20%; background: var(--gold); border-radius: 100px; transition: width .3s ease; }
.wz__dots { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; }
.wz__dot {
  font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); flex: 1; text-align: center;
}
.wz__dot.is-now { color: var(--accent-500); }
.wz__dot.is-done { color: var(--success); }
.wz__count { font-size: .82rem; color: var(--muted); margin: 8px 0 0; font-weight: 700; }
@media (max-width: 560px) { .wz__dots { display: none; } }

.wz__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.wz__step legend { padding: 0; width: 100%; }
.wz__step legend h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-bottom: .7em; }
.wz__hint { font-size: .94rem; color: var(--muted); margin-top: -.6em; }
.wz__label { font-weight: 700; color: var(--ink); margin: 24px 0 12px; }
.wz__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .wz__row { grid-template-columns: 1fr; } }

.wz__choices { display: grid; gap: 10px; }
.wz__choices--3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.wz__choice { display: block; cursor: pointer; }
.wz__choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.wz__choice__in {
  display: flex; gap: 14px; align-items: flex-start;
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; height: 100%;
  transition: border-color .15s ease, background .15s ease;
}
.wz__choice__in b { display: block; color: var(--ink); font-weight: 700; font-size: 1rem; line-height: 1.35; }
.wz__choice__in small { display: block; font-size: .88rem; color: var(--body); line-height: 1.5; margin-top: 3px; }
.wz__choice__ic {
  width: 38px; height: 38px; flex: none; border-radius: var(--radius-sm);
  background: var(--accent-100); color: var(--accent-500); display: grid; place-items: center;
}
.wz__choice__ic svg { width: 19px; height: 19px; }
.wz__choice:hover .wz__choice__in { border-color: var(--line-strong); background: var(--accent-050); }
.wz__choice input:checked + .wz__choice__in { border-color: var(--accent-500); background: var(--accent-050); }
.wz__choice input:focus-visible + .wz__choice__in { outline: 3px solid var(--accent-400); outline-offset: 2px; }

.wz__nav { display: flex; gap: 12px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.wz__nav .btn { flex: 1; }
.wz__nav [data-wz-back] { flex: 0 0 auto; }

.wz__aside {
  max-width: 720px; margin: 26px auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px;
}
.wz__aside .trust-item { display: flex; gap: 12px; align-items: flex-start; }

.phero--slim { padding-bottom: clamp(18px, 3vw, 30px); }

.wz__err { color: #B3261E; font-weight: 700; font-size: .92rem; margin: 12px 0 0; }
.wz__choices.is-invalid .wz__choice__in { border-color: #E5A9A4; }

/* ---------- Bayernkarte ---------- */
.mapbox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 44px; align-items: center; }
.mapbox__map { max-width: 470px; margin-inline: auto; width: 100%; }
.mapbox__map svg { width: 100%; height: auto; display: block; }
.mapbox__map .ort__name { font-family: var(--ff); }
.mapbox__side .btn { margin-top: 8px; }
@media (max-width: 860px) {
  .mapbox { grid-template-columns: 1fr; gap: 30px; }
  .mapbox__map { max-width: 380px; order: 2; }
  .mapbox__map .ort__name { font-size: 24px; }
  .mapbox__map .ort--gross .ort__name { font-size: 27px; }
}

.mapbox__quelle { font-size: .72rem; color: var(--muted); text-align: center; margin: 10px 0 0; }
.mapbox__quelle a { color: var(--muted); text-decoration: underline; }

/* ---------- Software- und Partnerband ---------- */
.pband__titel {
  text-align: left; font-size: .95rem; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: var(--muted); margin: 0 0 18px;
}
.pband {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}
.pband__item {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 24px; text-align: center; background: #fff; min-width: 190px;
}
.pband__item b {
  display: block; color: var(--ink); font-weight: 800; font-size: 1.02rem;
  letter-spacing: .01em;
}
.pband__item span { display: block; font-size: .84rem; color: var(--muted); margin-top: 3px; }
@media (max-width: 620px) { .pband__item { flex: 1 1 100%; } }

/* ---------- Nachträgliche Korrekturen ----------
   Die Hero-Illustration bekam weiter oben zwei Spalten zugewiesen; diese Regel
   stand nach dem Responsive-Block und hat ihn überstimmt. Auf schmalen Geräten
   wurde das Bild dadurch auf wenige Pixel zusammengedrückt. */
@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 430px) {
  h1 { font-size: 1.72rem; }
  .hero p.lead { font-size: 1rem; }
}

/* Kopfzeile: Logo, sechs Navigationspunkte, Bewertungssiegel und Anrufknopf
   passen erst ab sehr breiten Fenstern nebeneinander. Darunter weicht zuerst
   das Siegel – es steht direkt darunter im Kopfbereich ohnehin noch einmal. */
@media (max-width: 1520px) {
  .header .gbadge { display: none; }
}
@media (max-width: 1120px) {
  .nav__link { padding-inline: 7px; font-size: .87rem; }
  .header .btn--primary { padding: 14px 16px; }
  .header .logo__sub { display: none; }
}

/* Sprungmarke: für Tastatur und Screenreader das erste Element der Seite,
   sichtbar erst, wenn sie den Fokus bekommt. */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 500;
  background: var(--navy-900); color: #fff; font-weight: 700;
  padding: 12px 20px; border-radius: 0 0 var(--radius) var(--radius);
  transition: top .15s ease;
}
.skip:focus { top: 0; color: #fff; }

/* ---------- TÜV-Prüfzeichen ---------- */
.zert {
  display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 30px;
}
.zert__mark { flex: none; display: block; line-height: 0; }
.zert__mark img {
  width: 181px; height: auto; display: block;
  /* Das Zeichen ist ein geschütztes Bildzeichen – es wird unverändert
     wiedergegeben, kein Filter, kein Zuschnitt, keine Einfärbung. */
}
.zert__text h2 { margin: 0 0 8px; font-size: 1.35rem; }
.zert__text p { margin: 0 0 8px; }
.zert__meta { font-size: .92rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .zert { grid-template-columns: 1fr; gap: 20px; padding: 22px; justify-items: start; }
  /* Auf dem Handy steht das Zeichen allein in der Zeile und darf grösser sein –
     die winzigen Zeilen darauf sollen lesbar bleiben. */
  .zert__mark img { width: 232px; }
}
.ilink {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--accent-500); font-weight: 700; text-decoration: none;
}
.ilink:hover { text-decoration: underline; }
.ilink svg { width: 16px; height: 16px; }


/* ---------- Leistungsraster aufgebrochen ---------- */
/* Neun gleich große Karten im sauberen 3x3 sehen nach Vorlage aus. Die erste
   Leistung ist die wichtigste (Unfallgutachten, für den Kunden kostenlos) und
   bekommt deshalb die doppelte Breite. Das Raster wird dadurch unregelmäßig –
   und sieht aus, als hätte jemand eine Entscheidung getroffen. */
@media (min-width: 900px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .svc-grid > :first-child { grid-column: span 2; }
  .svc-grid > :first-child h3 { font-size: 1.45rem; }
  .svc-grid > :first-child p { font-size: 1.04rem; max-width: 46ch; }
}


/* ---------- Sehr schmale Geräte (ab iPhone SE abwärts) ---------- */
@media (max-width: 400px) {
  /* Die Kästen der Seitenspalte haben innen 28 Pixel Polster – auf 360 Pixel
     Breite bleibt davon zu wenig für den Text übrig. */
  .side-card, .side-box { padding: 20px; }
  /* Im Kopf der Anzeigenseiten standen Logo und Schaltfläche zusammen
     breiter als der Bildschirm. */
  .lp-head__cta { padding: 12px 13px; }
  .lp-head .wrap { gap: 10px; }
  .lp-head .logo__sub { display: none; }
  /* Die Leiste am unteren Rand: drei Schaltflächen plus Abstände waren
     zusammen breiter als 360 Pixel. Schmaler setzen und gleichmäßig
     aufteilen lassen. */
  .callbar { padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); gap: 6px;
             overflow: hidden; }  /* overflow: gegen das Rundungspixel bei Drittelung */
  .callbar .btn { flex: 1 1 0; min-width: 0; padding-inline: 8px; font-size: .88rem; }
}


/* ---------- Worttrennung ---------- */
/* Deutsche Komposita wie "Umsatzsteuer-Identifikationsnummer" oder
   "Wiederbeschaffungswert" sind breiter als ein 360-Pixel-Display. Ohne
   Trennung schieben sie die ganze Seite zur Seite. Die Silbentrennung
   greift über das lang="de" im HTML-Element. */
body { overflow-wrap: break-word; }
p, li, h1, h2, h3, h4, dd, dt, .prose { hyphens: auto; }
/* Überschriften nur dort trennen, wo es sein muss – sonst sieht es unruhig aus. */
h1, h2 { hyphens: manual; overflow-wrap: break-word; }


/* ---------- Bildkasten in den zweispaltigen Abschnitten ---------- */
/* Statt Symbol auf farbigem Grund ein echtes Foto, das den Kasten füllt.
   Die Bildunterschrift liegt als Verlaufsband darüber, damit die Aussage
   erhalten bleibt, die vorher unter dem Symbol stand. */
.split__media--foto { padding: 0; display: block; background: none; position: relative; }
.split__media--foto img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block; }
.split__media-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 22px 18px;
  background: linear-gradient(to top, rgba(10,30,50,.88), rgba(10,30,50,.55) 55%, transparent);
  color: #fff;
}
.split__media-cap b { display: block; font-size: 1.08rem; font-weight: 800; margin-bottom: 3px; }
.split__media-cap span { font-size: .9rem; color: #D6E3EF; }
@media (max-width: 620px) {
  .split__media-cap { padding: 38px 16px 14px; }
  .split__media-cap b { font-size: 1rem; }
}