/* Ayas Dienstleistung · Landingpage Entrümpelung & Haushaltsauflösung
   Tokens aus der Kunden-CI (Navy/Gold), Tiefe B, ohne Bibliotheken. */

/* ---------- Schriften ---------- */
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
/* Überschriften: Syne für Buchstaben, Ziffern aus Outfit 600 (Syne-Ziffern sind zu exzentrisch) */
@font-face { font-family: 'AyasHead'; src: url('../fonts/syne-variabel.woff2') format('woff2'); font-weight: 400 800; font-display: swap;
  unicode-range: U+0000-002F, U+003A-00DE, U+00E0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'AyasHead'; src: url('../fonts/outfit-latin-600-normal.woff2') format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0030-0039; }

/* ---------- Tokens ---------- */
:root {
  --navy: #192440; --navy-tief: #0F1729; --navy-hell: #22304F;
  --gold: #DFB477; --gold-text: #7D5A22;
  --ink: #1d1d1f; --ink-2: #636368; --ink-3: #86868b;
  --weiss: #fff; --grau: #f5f5f7; --grau-2: #fafafc; --linie: #e3e3e8;
  --wa-dunkel: #0F7F43;
  --r-feld: 10px; --r-knopf: 12px; --r-kachel: 20px; --r-karte: 24px; --r-insel: 32px;
  /* z-Skala (Handbuch 15.3): Inhalt 1–9 · Kopf 100 · Leiste/FAB 200 · Consent 900 · Pop-up 1000 */
  --z-kopf: 100; --z-leiste: 200; --z-consent: 900; --z-popup: 1000;
  --abstand: clamp(80px, 10vw, 152px);
  --pad: clamp(16px, 4vw, 40px);
  --max: 1200px;
  --ease: cubic-bezier(.4, 0, .6, 1);
  --kopf-h: 60px;
  /* Schatten-Token Design-Book § 4: Tinte, je Lage ≤ 6 %, nie farbig, nie auf Knöpfen */
  --schatten-1: 0 1px 2px rgba(15, 23, 41, .04), 0 2px 8px rgba(15, 23, 41, .03);
  --schatten-2: 0 2px 4px rgba(15, 23, 41, .04), 0 12px 32px rgba(15, 23, 41, .06);
  --schatten-3: 0 2px 4px rgba(15, 23, 41, .03), 0 40px 80px -30px rgba(15, 23, 41, .14);
  --kopf-schrift: 'AyasHead', 'Outfit', system-ui, sans-serif;
  --text-schrift: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
@media (min-width: 1024px) { :root { --kopf-h: 76px; } }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--weiss); color: var(--ink); font: 400 17px/1.6 var(--text-schrift); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p, li { text-wrap: pretty; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
section[id], [id^="anfrage"] { scroll-margin-top: calc(var(--kopf-h) + 12px); }
input, button, textarea, select { scroll-margin-top: calc(var(--kopf-h) + 16px); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: var(--z-popup); background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.sprung:focus { top: 10px; }
.rahmen { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.rahmen--schmal { max-width: calc(860px + 2 * var(--pad)); }

/* ---------- Typo ---------- */
.kicker { font: 600 13px/1.4 var(--text-schrift); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 14px; }
.kicker--hell { color: var(--gold); }
.h2 { font: 600 clamp(1.85rem, 1.05rem + 3.1vw, 3.35rem)/1.08 var(--kopf-schrift); letter-spacing: -.02em; color: var(--navy); }
.h2--hell { color: #fff; }
.zeile { display: block; }
.akzent { color: var(--gold-text); white-space: nowrap; }
.akzent__wort { position: relative; }
.h2--hell .akzent, .hero .akzent { color: var(--gold); }
.akzent .strich { position: absolute; left: -1%; right: -1%; bottom: -.12em; width: 102%; height: .22em; color: var(--gold); pointer-events: none; }
.einleitung { margin-top: 18px; font-size: clamp(17px, 1rem + .2vw, 19px); color: var(--ink-2); max-width: 62ch; }
.kopfzeile { margin-bottom: clamp(36px, 5vw, 64px); max-width: 820px; }
.kopfzeile--mitte { margin-inline: auto; text-align: center; }
.kopfzeile--mitte .einleitung { margin-inline: auto; }
.textlink { color: var(--gold-text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.textlink svg { width: 18px; height: 18px; }
.textknopf { background: none; border: 0; padding: 6px 0; color: var(--gold-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px 22px; border-radius: var(--r-knopf); border: 1.5px solid transparent; font: 600 16px/1.2 var(--text-schrift); text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); text-align: center; }
.knopf svg { width: 20px; height: 20px; flex: none; }
.knopf:active { transform: translateY(1px) scale(.99); }
.knopf--gold { background: var(--gold); color: var(--navy-tief); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset; }
.knopf--gold:hover { background: #e6c08a; }
.knopf--navy { background: var(--navy); color: #fff; }
.knopf--navy:hover { background: var(--navy-hell); }
.knopf--rahmen { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(223, 180, 119, .7); }
.knopf--rahmen:hover { background: rgba(223, 180, 119, .14); }
.knopf--leise { background: transparent; color: var(--navy); border-color: var(--linie); }
.knopf--leise:hover { border-color: var(--navy); }
.knopf--wa { background: var(--wa-dunkel); color: #fff; }
.knopf--wa:hover { background: #0f7a40; }
.knopf--gross { min-height: 56px; padding: 14px 26px; font-size: 17px; }
.knopf--voll { width: 100%; }
.cta-paar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(32px, 4vw, 48px); }
.cta-paar--mitte { justify-content: center; }
@media (max-width: 559px) { .cta-paar .knopf { width: 100%; } }

/* ---------- Header ---------- */
.kopf { position: sticky; top: 0; z-index: var(--z-kopf); background: rgba(25, 36, 64, .96); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid rgba(223, 180, 119, .18); }
.kopf__in { height: var(--kopf-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.kopf__logo { display: block; flex: none; padding: 6px 0; }
.kopf__logo img { width: 128px; height: auto; }
.kopf__rechts { display: flex; align-items: center; gap: 10px; }
.kopf__nummer, .kopf__cta { display: none; }
.rundknopf { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; transition: background-color .2s var(--ease); }
.rundknopf svg { width: 21px; height: 21px; }
.rundknopf--tel { background: var(--gold); color: var(--navy-tief); }
.rundknopf--wa { background: var(--wa-dunkel); color: #fff; }
@media (min-width: 1024px) {
  .kopf__logo img { width: 156px; }
  .rundknopf--tel { display: none; }
  .kopf__nummer { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 600; font-size: 17px; padding: 8px 6px; min-height: 44px; }
  .kopf__nummer svg { width: 19px; height: 19px; color: var(--gold); }
  .kopf__nummer:hover { color: var(--gold); }
  .kopf__cta { display: inline-flex; min-height: 48px; }
  .kopf__rechts { gap: 14px; }
}

/* ---------- Hero F1 ---------- */
.hero { position: relative; background: linear-gradient(165deg, var(--navy-hell) 0%, var(--navy) 46%, var(--navy-tief) 100%); color: #fff; overflow: hidden; padding-top: 18px; }
.hero__licht { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(60% 50% at 82% 38%, rgba(223, 180, 119, .17), transparent 70%),
  radial-gradient(40% 36% at 6% 0%, rgba(223, 180, 119, .10), transparent 70%); }
.hero__raster { position: relative; display: grid; gap: 0; }
.hero__h1 { font: 600 13px/1.4 var(--text-schrift); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); max-width: 40ch; }
.hero__h2 { margin-top: 10px; font: 600 clamp(1.9rem, 0.86rem + 4.3vw, 3.55rem)/1.04 var(--kopf-schrift); letter-spacing: -.025em; color: #fff; }
.hero__h2 .akzent .strich { bottom: -.13em; height: .22em; }
.hero__sub { margin-top: 14px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.84); max-width: 50ch; }
.hero__punkte { margin-top: 14px; display: grid; gap: 6px; }
.hero__punkte li { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; font-size: 16px; line-height: 1.4; }
.hero__punkte svg { width: 20px; height: 20px; flex: none; color: var(--gold); margin-top: 1px; }
.hero__reihe { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.google-zeile { display: inline-flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 8px; color: #fff; text-decoration: none; font-size: 15px; min-height: 44px; }
.google-zeile:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.google-zeile__g { width: 20px; height: 20px; background: #fff; border-radius: 50%; padding: 2px; }
.sterne { display: inline-flex; gap: 2px; color: #FBBC05; }
.sterne svg { width: 16px; height: 16px; }
.sterne--gold { color: #c9962f; }
.hero__tel { align-self: start; justify-self: start; }
.hero__visual { margin-top: 28px; position: relative; z-index: 0; }
/* R2 ohne 3D: echtes Fotopaar, Ränder und Gold-Rahmen sind im Bild, Marken als Text darüber */
.hero__fotos { position: relative; margin: 0; }
.hero__fotos img { width: 100%; height: auto; }
.hero__marken { position: absolute; left: 0; right: 0; top: 4.5%; display: grid; grid-template-columns: 1fr 1fr; gap: 1.7%; pointer-events: none; }
.hero__marke { justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(15, 23, 41, .82); color: #fff; font-weight: 600; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.hero__marke--gold { background: var(--gold); color: var(--navy-tief); }
.hero__marke svg { width: 14px; height: 14px; }

/* Bogen mit Gold-Linie */
.bogen { position: relative; z-index: 2; margin-top: -58px; height: 44px; pointer-events: none; }
.bogen svg { width: 100%; height: 100%; }

/* ---------- Formular-Block ---------- */
.anfrage-block { position: relative; z-index: 3; background: #fff; padding-bottom: clamp(40px, 6vw, 72px); margin-top: -1px; }
.anfrage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.anfrage__titel { font: 600 clamp(1.35rem, 1.1rem + 1vw, 1.75rem)/1.15 var(--kopf-schrift); color: var(--navy); letter-spacing: -.01em; }
.fortschritt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.fortschritt span { height: 5px; border-radius: 3px; background: var(--linie); transition: background-color .3s var(--ease); }
.fortschritt span.is-an { background: var(--gold); }
.anfrage__stand { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.anfrage__wa { display: none; }
.schritt { border: 0; margin: 0; padding: 0; min-width: 0; }
.schritt[hidden] { display: none; }
.schritt__frage { display: block; float: none; width: 100%; padding: 0; font: 600 19px/1.3 var(--text-schrift); color: var(--ink); margin-bottom: 14px; }
.schritt__frage--zwei { margin-top: 22px; }
.schritt__fehler, .feld__fehler { color: #b3261e; font-size: 15px; font-weight: 500; margin-top: 10px; }
.schritt__fehler[hidden], .feld__fehler[hidden] { display: none; }
.schritt__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 18px; }
.schritt__fuss .knopf--navy, .schritt__fuss .knopf--gold { margin-left: auto; }
.schritt__fuss .textlink { font-size: 15px; }
.mikro { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.mikro a { color: var(--gold-text); }

/* Raum-Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kachel { position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 8px 8px 12px; background: #fff; border: 1.5px solid var(--linie); border-radius: var(--r-kachel); cursor: pointer; box-shadow: var(--schatten-1); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); min-height: 44px; }
.kachel:hover { border-color: #c9cbd3; transform: translateY(-2px); box-shadow: var(--schatten-2); }
.kachel__bild { display: block; background: var(--grau); border-radius: 12px; overflow: hidden; aspect-ratio: 440 / 330; }
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
/* R3 M-23: echte Foto-Ausschnitte aus Aufträgen statt Icon-Boxen */
.kacheln .kachel__bild { aspect-ratio: 440 / 230; }
.kacheln .kachel__bild img { object-position: center 45%; transition: transform .35s var(--ease); }
.kachel:hover .kachel__bild img { transform: scale(1.04); }
@media (min-width: 1024px) and (max-height: 860px) { .kacheln--raum .kachel__bild { aspect-ratio: 440 / 190; } }
@media (prefers-reduced-motion: reduce) { .kachel:hover .kachel__bild img { transform: none; } }
.kachel__titel { margin-top: 10px; padding-inline: 4px; font-weight: 600; font-size: 15.5px; line-height: 1.25; color: var(--navy); hyphens: manual; }
.kachel__unter { margin-top: 4px; padding-inline: 4px; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
.kachel__haken { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--gold); display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.kachel__haken svg { width: 16px; height: 16px; }
.kachel[aria-pressed="true"] { border: 2px solid var(--navy); box-shadow: 0 0 0 3px rgba(223, 180, 119, .45), var(--schatten-2); }
.kachel[aria-pressed="true"] .kachel__haken { opacity: 1; transform: none; }
.kachel.is-empfohlen:not([aria-pressed="true"]) { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(223, 180, 119, .3), var(--schatten-1); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips[hidden] { display: none; }
.chip { min-height: 46px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--linie); background: #fff; font-weight: 500; font-size: 15.5px; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chips--klein .chip { min-height: 44px; padding: 8px 14px; font-size: 15px; }

/* Felder */
.feld { display: grid; gap: 6px; }
.feld[hidden] { display: none; }
.feld--datum { margin-top: 14px; max-width: 240px; }
.feld label, .feld__label { font-weight: 500; font-size: 15px; color: var(--ink); }
.feld input { width: 100%; min-height: 54px; padding: 12px 14px; border: 1.5px solid #d2d2d7; border-radius: var(--r-feld); background: #fff; font: 400 17px/1.3 var(--text-schrift); color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.feld input::placeholder { color: #8a8a8f; }
.feld input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(223, 180, 119, .45); }
.feld input[aria-invalid="true"] { border-color: #b3261e; }
.felder-2 { display: grid; gap: 14px; }
.ablage { display: none !important; }
.feld__hinweis { font-size: 14px; color: var(--ink-2); margin-top: 8px; }

/* Fotos */
.fotos-feld { margin-top: 20px; padding: 16px; border: 1.5px dashed #c9cbd3; border-radius: var(--r-kachel); background: var(--grau-2); }
.fotos-feld__titel { font-weight: 600; font-size: 16px; margin-bottom: 10px; }
.foto-knopf { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 18px; border-radius: var(--r-knopf); background: #fff; border: 1.5px solid var(--navy); color: var(--navy); font-weight: 600; cursor: pointer; }
.foto-knopf svg { width: 22px; height: 22px; }
.foto-knopf:focus-within { box-shadow: 0 0 0 3px rgba(223, 180, 119, .55); }
.foto-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.fotos-feld.ist-voll .foto-knopf { opacity: .55; cursor: default; }
.foto-liste { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.foto-liste:empty { display: none; }
.foto-item { position: relative; width: 74px; height: 74px; }
.foto-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.foto-weg { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; background: var(--navy); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.foto-weg::after { content: ''; position: absolute; inset: -7px; }
.foto-weg svg { width: 14px; height: 14px; }

.senden-fehler { margin-top: 16px; padding: 16px; border-radius: var(--r-knopf); background: #fdf0ef; color: #7a1c16; }
.senden-fehler[hidden] { display: none; }
.senden-fehler__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.knopf.is-laedt { opacity: .75; cursor: progress; }

/* Danke-Ansicht im Formular */
.danke-box { padding: 8px 0; }
.danke-box h3 { font: 600 clamp(1.35rem, 1.1rem + 1vw, 1.75rem)/1.2 var(--kopf-schrift); color: var(--navy); }
.danke-box p { margin-top: 12px; color: var(--ink-2); max-width: 60ch; }
.danke-box .cta-paar { margin-top: 20px; }

@media (min-width: 640px) {
  .felder-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .hero { padding-top: 36px; }
  .hero__raster { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); column-gap: clamp(24px, 3vw, 48px); align-items: end; }
  .hero__text { padding-bottom: 84px; display: flex; flex-direction: column; align-items: flex-start; }
  .hero__h1 { font-size: 14px; }
  .hero__h2 { margin-top: 12px; }
  .hero__sub { margin-top: 16px; font-size: 18px; max-width: 54ch; }
  .hero__punkte { margin-top: 16px; gap: 6px; }
  .hero__punkte li { font-size: 17px; }
  .hero__reihe { margin-top: 20px; }
  .hero__visual { margin: 0; align-self: end; }
  .hero__fotos { max-width: 560px; margin-left: auto; }
  .hero__marke { font-size: 14px; padding: 8px 14px; }
  .bogen { margin-top: -70px; height: 60px; }
  .anfrage-block { padding-top: 0; }
  .anfrage { grid-template-columns: 270px minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .anfrage__seite { position: sticky; top: calc(var(--kopf-h) + 20px); padding-top: 8px; }
  .anfrage__wa { display: inline-flex; align-items: flex-start; gap: 8px; margin-top: 22px; color: var(--gold-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; font-size: 15.5px; line-height: 1.35; }
  .anfrage__wa svg { width: 20px; height: 20px; flex: none; }
  .kacheln--raum { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .kachel__titel { font-size: 16px; }
}
@media (max-width: 1023px) {
  .anfrage__seite { display: grid; grid-template-columns: 1fr; }
}
@media (max-width: 359px) {
  .kachel__unter { font-size: 13px; }
  .kachel__titel { font-size: 14.5px; }
}

/* ---------- Trust-Band ---------- */
.vertrauen { background: var(--grau); padding: clamp(36px, 5vw, 56px) 0; }
.vertrauen__liste { display: grid; grid-template-columns: 1fr; gap: 16px; }
.vertrauen__liste li { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--navy); }
.vertrauen__liste svg { width: 36px; height: 36px; flex: none; color: var(--navy); }
.vertrauen__note { gap: 16px !important; }
.vertrauen__zahl { font: 600 clamp(2.9rem, 2.2rem + 2vw, 3.6rem)/1 var(--kopf-schrift); letter-spacing: -.03em; color: var(--navy); }
.vertrauen__note-text { display: grid; gap: 4px; }
.vertrauen__sterne { display: inline-flex; align-items: center; gap: 8px; }
.vertrauen__liste .vertrauen__g { width: 20px; height: 20px; }
.vertrauen__liste .sterne svg { width: 17px; height: 17px; color: #FBBC05; }
.vertrauen__adresse { margin-top: 18px; text-align: center; font-size: 15px; color: var(--ink-2); }
.vertrauen__hinweis { margin-top: 6px; text-align: center; font-size: 13px; color: var(--ink-2); }
@media (min-width: 900px) { .vertrauen__liste { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 24px; } .vertrauen__liste li { font-size: 17px; } }

/* ---------- Sektionen ---------- */
.sektion { padding-block: var(--abstand); }
.sektion--grau { background: var(--grau); }

/* Karten */
.karten-3 { display: grid; gap: 16px; margin-top: clamp(40px, 6vw, 72px); }
.karte { background: #fff; border-radius: var(--r-karte); padding: clamp(22px, 3vw, 32px); box-shadow: var(--schatten-1); border: 1px solid #eeeef2; }
.sektion--grau .karte { border-color: transparent; }
.karte__icon { width: 44px; height: 44px; color: var(--navy); margin-bottom: 16px; }
.karte h3 { font: 600 clamp(1.15rem, 1rem + .5vw, 1.35rem)/1.25 var(--kopf-schrift); color: var(--navy); letter-spacing: -.01em; }
.karte p { margin-top: 10px; color: var(--ink-2); font-size: 16.5px; }
.karte--foto { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.karte__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 60%; }
.karte__text { padding: clamp(22px, 3vw, 32px); }
@media (min-width: 900px) { .karten-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; } .karte--foto .karte__foto { aspect-ratio: 16 / 10; } }

.haken { display: grid; gap: 8px; margin-top: 18px; }
.haken li { position: relative; padding-left: 30px; font-weight: 500; line-height: 1.45; }
.haken li::before { content: ''; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23DFB477' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.haken--hell li { color: #fff; }
.haken--hell li::before { background-color: rgba(223, 180, 119, .18); }

/* ---------- S3 · Ablauf mit Fotos aus Aufträgen (R3, ohne 3D) ---------- */
.ablauf__liste { display: grid; gap: 0; margin-top: clamp(28px, 4vw, 48px); }
.ablauf__stufe { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--linie); }
.ablauf__stufe:last-child { border-bottom: 1px solid var(--linie); }
.ablauf__bild { position: relative; margin: 0; border-radius: var(--r-knopf); overflow: hidden; background: var(--grau); }
.ablauf__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ablauf__marke { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px; background: rgba(15, 23, 41, .86); color: #fff; font: 600 13px/1.1 var(--text-schrift); }
.ablauf__marke--gold { background: var(--gold); color: var(--navy-tief); }
.ablauf__nr { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--navy-tief); font: 700 12px/1 var(--text-schrift); }
.ablauf__marke--gold .ablauf__nr { background: var(--navy-tief); color: var(--gold); }
.ablauf__text { font-size: 16px; line-height: 1.45; color: var(--ink); }
.ablauf__schritt { display: block; margin-bottom: 4px; font-weight: 600; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
@media (min-width: 640px) {
  .ablauf__stufe { grid-template-columns: minmax(0, 30%) minmax(0, 1fr); gap: 24px; }
  .ablauf__text { font-size: 17px; }
}
@media (min-width: 1024px) {
  .ablauf__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; position: relative; }
  .ablauf__stufe { grid-template-columns: 1fr; align-items: start; align-content: start; gap: 18px; padding: 0; border: 0; }
  .ablauf__stufe:last-child { border: 0; }
  .ablauf__bild { border-radius: var(--r-kachel); box-shadow: var(--schatten-1); }
  .ablauf__marke { left: 14px; bottom: 14px; padding: 7px 14px 7px 7px; font-size: 15px; gap: 8px; }
  .ablauf__nr { width: 28px; height: 28px; font-size: 14px; }
  .ablauf__text { font-size: 17px; padding-top: 14px; border-top: 2px solid var(--linie); }
  .ablauf__stufe:last-child .ablauf__text { border-top-color: var(--gold); }
}
/* Belegzeile statt drei Icon-Karten */
.belege { display: grid; margin-top: clamp(36px, 5vw, 64px); }
.belege li { padding: 18px 0; border-top: 1px solid var(--linie); }
.belege li:first-child { border-top: 0; padding-top: 0; }
.belege h3 { position: relative; padding-left: 30px; font: 600 clamp(1.1rem, 1rem + .4vw, 1.3rem)/1.25 var(--kopf-schrift); color: var(--navy); letter-spacing: -.01em; }
.belege h3::before { content: ''; position: absolute; left: 0; top: .1em; width: 20px; height: 20px; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23DFB477' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.belege p { margin-top: 8px; color: var(--ink-2); font-size: 16px; }
@media (min-width: 900px) {
  .belege { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 28px; border-top: 1px solid var(--linie); }
  .belege li { padding: 0 28px; border-top: 0; border-left: 1px solid var(--linie); }
  .belege li:first-child { padding-left: 0; border-left: 0; }
  .belege li:last-child { padding-right: 0; }
}

/* ---------- S4 · Leistungen ---------- */
.reiter__leiste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 2px 0 4px; }
.reiter__leiste::-webkit-scrollbar { display: none; }
.reiter__knopf { flex: none; min-height: 46px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--linie); background: #fff; font-weight: 600; font-size: 15.5px; color: var(--navy); cursor: pointer; white-space: nowrap; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.reiter__knopf:hover { border-color: var(--navy); }
.reiter__knopf[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
html.js .reiter .leistung[hidden] { display: none; }
.leistung + .leistung { margin-top: 16px; }
html.js .reiter .leistung + .leistung { margin-top: 0; }
.leistung { display: grid; background: #fff; border-radius: var(--r-karte); overflow: hidden; box-shadow: var(--schatten-1); }
.leistung__bild { position: relative; margin: 0; overflow: hidden; background: var(--grau); }
.leistung__bild img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 35%; }
.leistung__bild figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; width: fit-content; padding: 6px 12px; border-radius: 999px; background: rgba(15, 23, 41, .82); color: #fff; font-size: 13.5px; line-height: 1.3; }
.leistung__bild--typo { display: grid; align-content: center; gap: 10px; padding: clamp(24px, 4vw, 44px); background: linear-gradient(160deg, #F4EFE6, #EAE3D6); color: var(--navy); }
.leistung__orte { font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.leistung__satz { font: 600 clamp(1.7rem, 1.2rem + 2vw, 2.6rem)/1.1 var(--kopf-schrift); letter-spacing: -.02em; }
.leistung__beleg { font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 32ch; }
.leistung__text { padding: clamp(22px, 3vw, 40px); }
.leistung__kicker { font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 8px; }
.leistung h3 { font: 600 clamp(1.3rem, 1.05rem + 1vw, 1.75rem)/1.2 var(--kopf-schrift); color: var(--navy); letter-spacing: -.015em; }
.leistung h4 { margin-top: 22px; font: 600 18px/1.3 var(--text-schrift); color: var(--navy); }
.leistung__text > p { margin-top: 10px; color: var(--ink-2); }
.leistung .knopf { margin-top: 22px; }
.zitat-klein { margin: 16px 0 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--gold); }
.zitat-klein p { font-style: italic; color: var(--ink); }
.zitat-klein footer { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
@media (min-width: 900px) {
  .reiter__leiste { margin: 0 0 20px; padding: 2px 0 4px; flex-wrap: wrap; }
  .leistung { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  .leistung__bild img { position: absolute; inset: 0; aspect-ratio: auto; }
  .leistung__bild { min-height: 420px; }
  .leistung__bild figcaption { left: 18px; bottom: 18px; }
  .leistung__text { align-self: center; }
}


/* ---------- Dunkle Inseln ---------- */
.insel-rahmen { padding: clamp(8px, 1.2vw, 16px); }
.insel { position: relative; max-width: 1400px; margin-inline: auto; border-radius: var(--r-insel); background: linear-gradient(160deg, var(--navy-hell), var(--navy) 50%, var(--navy-tief)); color: #fff; overflow: hidden; padding: clamp(56px, 8vw, 112px) var(--pad); }
.insel::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 50% at 20% 20%, rgba(223, 180, 119, .14), transparent 70%); }
.insel .einleitung { color: rgba(255,255,255,.82); }

/* S7 · WhatsApp-Chat */
.wa { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: var(--max); margin-inline: auto; align-items: center; }
.wa__text { order: -1; }
.wa__text .knopf { margin-top: 28px; }
.handy { width: min(100%, 300px); aspect-ratio: 300 / 651; margin-inline: auto; padding: 10px; border-radius: 44px; background: #0b111f; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.08); display: flex; }
.handy__in { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 34px; overflow: hidden; background: #efe7dd; color: var(--ink); }
.chat__kopf { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #075E54; color: #fff; font-size: 14px; line-height: 1.25; }
.chat__kopf b { display: block; font-weight: 600; }
.chat__kopf span span { font-size: 12.5px; opacity: .85; }
.chat__av { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
.chat__av img { width: 30px; height: 30px; }
.chat__body { flex: 1; min-height: 0; overflow: hidden; position: relative; padding: 0 10px; }
.chat__flow { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; transition: transform .5s var(--ease); will-change: transform; }
.msg { max-width: 86%; padding: 7px 9px 17px; border-radius: 10px; font-size: 13.5px; line-height: 1.38; position: relative; box-shadow: 0 1px 1px rgba(15, 23, 41, .06); }
.msg time { position: absolute; right: 8px; bottom: 3px; font-size: 11px; color: #667781; }
.msg--rein { align-self: flex-start; background: #fff; border-top-left-radius: 4px; }
.msg--raus { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 4px; }
.anhang { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.anhang__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; background: #e7f6ef; color: #075E54; display: grid; place-items: center; }
.anhang__icon svg { width: 22px; height: 22px; }
.anhang b { display: block; font-weight: 600; }
.anhang b + span { font-size: 12.5px; color: #667781; }
.chat__fuss { display: flex; gap: 8px; align-items: center; padding: 8px 10px 12px; background: #efe7dd; }
.chat__feld { flex: 1; height: 38px; border-radius: 20px; background: #fff; }
.chat__senden { width: 38px; height: 38px; border-radius: 50%; background: #128C7E; color: #fff; display: grid; place-items: center; }
.chat__senden svg { width: 18px; height: 18px; }
.wa__stage.is-schritt .msg { display: none; }
.wa__stage.is-schritt .msg.is-da { display: block; animation: blaseAuf .38s var(--ease) both; }
@keyframes blaseAuf { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wa__stage.is-schritt .msg { display: block; animation: none; } }
@media (min-width: 1024px) { .wa { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; } .wa__text { order: 2; } .handy { width: 320px; } }

/* S14 · Schluss */
.insel--schluss { text-align: center; }
.insel-rahmen--schluss { padding-bottom: 56px; }
.schluss { position: relative; max-width: 980px; margin-inline: auto; }
.schluss .einleitung { margin-inline: auto; }
.schluss__tel { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: #fff; font-weight: 600; font-size: 19px; text-decoration: none; min-height: 44px; }
.schluss__tel svg { width: 20px; height: 20px; color: var(--gold); }
.schluss__tel:hover { color: var(--gold); }

/* ---------- S8 · Vergleich ---------- */
.vergleich { display: grid; gap: 16px; }
.vergleich__karte { border-radius: var(--r-karte); padding: clamp(22px, 3vw, 36px); }
.vergleich__karte--wir { background: #fff; border: 2px solid var(--navy); box-shadow: var(--schatten-2); }
.vergleich__marke { font: 600 22px/1.2 var(--kopf-schrift); color: var(--navy); letter-spacing: -.01em; }
.vergleich__karte--die { background: var(--grau); }
.vergleich__kopf { min-height: 54px; display: flex; align-items: center; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); }
.vergleich__kopf img { width: 190px; }
.vergleich__kopf span { font: 600 20px/1.2 var(--kopf-schrift); color: var(--ink-2); }
.vergleich ul { display: grid; gap: 12px; }
.vergleich li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.4; font-size: 16.5px; }
.vergleich li svg { width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 50%; padding: 3px; }
.vergleich__karte--wir li { font-weight: 500; }
.vergleich__karte--wir li svg { background: var(--navy); color: var(--gold); }
.vergleich__karte--die li { color: var(--ink-2); }
.vergleich__karte--die li svg { background: #e2e2e7; color: #8a3a34; }
.zugestaendnis { margin: 28px auto 0; text-align: center; color: var(--ink-2); max-width: 680px; }
@media (min-width: 900px) { .vergleich { grid-template-columns: 1fr 1fr; gap: 20px; } }

/* ---------- S9 · Bewertungen ---------- */
/* R2 N-11: Google-Siegel als EINE zentrierte Gruppe (G, Note, Sterne, darunter Anzahl) */
.bew__siegel { margin: 22px auto 0; display: inline-grid; justify-items: center; gap: 6px; padding: 14px 22px; background: #fff; border-radius: 16px; box-shadow: var(--schatten-1); }
.bew__siegel-oben { display: inline-flex; align-items: center; gap: 10px; }
.bew__g { width: 26px; height: 26px; flex: none; }
.bew__note { font: 700 30px/1 var(--kopf-schrift); color: var(--navy); letter-spacing: -.02em; }
.bew__sterne svg { width: 20px; height: 20px; }
.bew__anzahl { font-size: 14.5px; color: var(--ink-2); text-align: center; }
.bewertungen { display: grid; gap: 16px; align-items: stretch; }
.bewertung { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-karte); padding: clamp(20px, 3vw, 30px); box-shadow: var(--schatten-1); }
.bewertung__ganz { margin-top: auto; padding-top: 10px; font-size: 15px; }
.bewertung { position: relative; border-top: 3px solid var(--gold); }
.bewertung header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; }
.bewertung__g { width: 20px; height: 20px; align-self: start; margin-top: 2px; }
.bewertung__text p { position: relative; }
.bewertung header > span:nth-child(2) { display: grid; line-height: 1.3; }
.bewertung header b { font-weight: 600; }
.bewertung header > span:nth-child(2) span { font-size: 13.5px; color: var(--ink-2); }
.bewertung__av { width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: var(--gold); display: grid; place-items: center; font-weight: 600; font-size: 18px; }
.bewertung .sterne { grid-column: 1 / -1; }
.bewertung__text { margin-top: 14px; font-size: 16px; line-height: 1.6; }
.bew__hinweis { margin: 24px auto 0; font-size: 14px; color: var(--ink-2); max-width: 760px; text-align: center; }
.bew__link { margin-top: 8px; text-align: center; }
@media (min-width: 900px) { .bewertungen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* ---------- S10 · Erben ---------- */
.erben { display: grid; gap: 16px; }
.erben__haupt { background: var(--grau); border-radius: var(--r-karte); padding: clamp(24px, 3.5vw, 40px); }
.erben__haupt h3 { font: 600 clamp(1.3rem, 1.05rem + 1vw, 1.75rem)/1.2 var(--kopf-schrift); color: var(--navy); }
.erben__haupt > p { margin-top: 12px; color: var(--ink-2); }
.ferne { margin-top: 22px; display: grid; gap: 14px; }
.ferne li { display: flex; align-items: center; gap: 14px; font-weight: 500; line-height: 1.4; }
.ferne__icon { flex: none; display: grid; place-items: center; }
.ferne__icon svg { width: 34px; height: 34px; color: var(--navy); }
.erben__seite { display: grid; align-content: start; }
.erben__punkt { padding: 20px 0; border-top: 1px solid var(--linie); }
.erben__punkt:last-child { border-bottom: 1px solid var(--linie); }
.erben__punkt h3 { font: 600 clamp(1.15rem, 1rem + .5vw, 1.35rem)/1.25 var(--kopf-schrift); color: var(--navy); letter-spacing: -.01em; }
.erben__punkt p { margin-top: 8px; color: var(--ink-2); font-size: 16.5px; }
@media (min-width: 900px) { .erben__seite { padding-top: 8px; } .erben__punkt:first-child { padding-top: 0; border-top: 0; } }
@media (min-width: 900px) { .erben { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; } }

/* ---------- S11 · Einsatzgebiet ---------- */
.gebiet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.gebiet__karte { margin: 0; }
.gebiet__karte svg { border-radius: var(--r-karte); }
.gebiet__karte svg { width: 100%; height: auto; }
.gebiet__orte { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.gebiet__cta { margin-top: 0; }
.karte-svg .ort-klein { display: none; }
@media (min-width: 640px) { .karte-svg .ort-klein { display: inline; } }
@media (min-width: 1024px) {
  .gebiet { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 56px; row-gap: 24px; align-items: center; }
  .gebiet .h2 { font-size: clamp(2rem, 2.9vw, 2.6rem); } /* R1 D-28: lange Zeile 2 bleibt einzeilig */
  .gebiet__karte { grid-row: 1 / span 3; grid-column: 2; }
  .gebiet__orte, .gebiet__cta { grid-column: 1; }
}

/* ---------- S12 · Zweites Formular ---------- */
.formular-2 { max-width: 980px; margin-inline: auto; background: #fff; border-radius: var(--r-karte); padding: clamp(20px, 3.5vw, 40px); box-shadow: var(--schatten-2); border: 1px solid #eeeef2; }
.formular-2 .anfrage { grid-template-columns: minmax(0, 1fr); }
.formular-2 .anfrage__seite { position: static; }
.formular-2 .anfrage__wa { display: none; }
@media (min-width: 1024px) { .formular-2 .kacheln--raum { grid-template-columns: repeat(4, 1fr); } }
.ohne-js { text-align: center; }

/* ---------- S13 · FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border-radius: var(--r-kachel); box-shadow: var(--schatten-1); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; min-height: 56px; font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq__plus { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--grau); display: grid; place-items: center; transition: transform .25s var(--ease), background-color .25s var(--ease); }
.faq__plus svg { width: 16px; height: 16px; color: var(--navy); }
.faq details[open] .faq__plus { transform: rotate(45deg); background: var(--gold); }
.faq details p { padding: 0 20px 20px; color: var(--ink-2); max-width: 68ch; }

/* ---------- Footer ---------- */
.fuss { background: var(--navy-tief); color: rgba(255,255,255,.8); padding: 56px 0 28px; font-size: 15.5px; }
.fuss__raster { display: grid; gap: 28px; }
.fuss__marke img { width: 170px; }
.fuss__marke p { margin-top: 14px; max-width: 42ch; }
.fuss__titel { font-weight: 600; color: #fff; margin-bottom: 6px; }
.fuss a { color: #fff; text-decoration-color: rgba(223, 180, 119, .6); text-underline-offset: 3px; }
.fuss a:hover { color: var(--gold); }
.fuss__kontakt p + p { margin-top: 4px; }
/* R2 Fuß: Goldkante, Titel, Kontaktwege mit Icons, Sprungmarken als Liste (N-07: keine Waise) */
.fuss { border-top: 3px solid var(--gold); }
.fuss__titel { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.fuss__wege { display: grid; gap: 2px; margin-top: 8px !important; }
.fuss__wege a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; text-decoration: none; }
.fuss__wege svg { width: 18px; height: 18px; flex: none; color: var(--gold); }
.fuss__nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, max-content); gap: 0 24px; }
.fuss__nav a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
@media (min-width: 900px) { .fuss__nav ul { grid-template-columns: 1fr; } }
.fuss__unten { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-size: 14.5px; }
.fuss__unten a { display: inline-block; padding: 10px 0; }
@media (min-width: 900px) { .fuss__raster { grid-template-columns: 1.3fr 1fr 1fr; } }

/* ---------- FAB (alle Breiten) ----------
   Dauerregel 28.10.2026 / nie-wieder #16: mobil KEINE Sticky-Button-Leiste.
   Kontakt mobil über Telefon/WhatsApp im Kopf und diesen FAB. Body ohne padding-bottom. */
.fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: var(--z-leiste); display: grid; gap: 10px; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.fab__knopf { pointer-events: auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff, 0 6px 18px rgba(15, 23, 41, .14); transition: transform .2s var(--ease); }
.fab__knopf:hover { transform: scale(1.06); }
.fab__knopf svg { width: 24px; height: 24px; }
.fab__knopf--wa { background: var(--wa-dunkel); color: #fff; }
.fab__knopf--tel { background: var(--gold); color: var(--navy-tief); }
.fab.is-weg { opacity: 0; transform: translateY(12px); }
.fab.is-weg .fab__knopf { pointer-events: none; visibility: hidden; }
@media (min-width: 1024px) {
  .fab { right: 22px; bottom: 22px; gap: 12px; }
  .fab__knopf { width: 56px; height: 56px; box-shadow: 0 0 0 3px #fff; }
  .fab__knopf svg { width: 26px; height: 26px; }
}

/* ---------- Pop-up (vorbereitet, deaktiviert) ---------- */
.popup { position: fixed; inset: 0; z-index: var(--z-popup); display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 41, .55); }
.popup[hidden] { display: none; }
.popup__karte { position: relative; width: min(100%, 720px); max-height: calc(100vh - 32px); overflow: auto; display: grid; background: #fff; border-radius: var(--r-karte); box-shadow: var(--schatten-3); }
.popup__zu { position: absolute; top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); display: grid; place-items: center; cursor: pointer; }
.popup__zu svg { width: 20px; height: 20px; }
.popup__bild { position: relative; }
.popup__bild img { width: 100%; height: 200px; object-fit: cover; }
.popup__badge { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--wa-dunkel); color: #fff; font-weight: 600; font-size: 14px; }
.popup__badge svg { width: 16px; height: 16px; }
.popup__text { padding: 22px; display: grid; gap: 10px; }
.popup__titel { font: 600 1.45rem/1.2 var(--kopf-schrift); color: var(--navy); }
.popup__text > p { color: var(--ink-2); }
.popup__text .haken { margin: 4px 0 8px; }
.popup__trust { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.popup__trust svg { width: 18px; height: 18px; }
@media (min-width: 700px) { .popup__karte { grid-template-columns: 1fr 1.2fr; } .popup__bild img { height: 100%; } }

/* ---------- Reveal ---------- */
html.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--verzug, 0ms); }
html.js .reveal.is-da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Rechtsseiten und Danke ---------- */
.rechtsseite main { padding: clamp(40px, 6vw, 80px) 0 var(--abstand); }
.rechts { max-width: calc(820px + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.rechts h1 { overflow-wrap: break-word; hyphens: manual; font: 600 clamp(1.75rem, 1.2rem + 2.4vw, 3rem)/1.1 var(--kopf-schrift); color: var(--navy); letter-spacing: -.02em; margin-bottom: 28px; }
.rechts h2 { font: 600 clamp(1.25rem, 1.1rem + .6vw, 1.5rem)/1.25 var(--kopf-schrift); color: var(--navy); margin: 40px 0 12px; }
.rechts h3 { font: 600 18px/1.35 var(--text-schrift); color: var(--navy); margin: 24px 0 8px; }
.rechts p, .rechts li { color: #3a3a3f; }
.rechts p + p { margin-top: 12px; }
.rechts ul { list-style: disc; padding-left: 22px; margin: 10px 0; display: grid; gap: 6px; }
.rechts a { color: var(--gold-text); }
.rechts .stand { margin-top: 40px; font-size: 14px; color: var(--ink-2); }
.kopf--einfach .kopf__rechts .kopf__cta { display: none; }
.danke { min-height: 70vh; display: grid; place-items: center; padding: clamp(48px, 8vw, 120px) var(--pad); text-align: center; }
.danke__karte { max-width: 640px; }
.danke__haken { width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%; background: var(--navy); color: var(--gold); display: grid; place-items: center; }
.danke__haken svg { width: 36px; height: 36px; }
.danke h1 { font: 600 clamp(1.9rem, 1.3rem + 2.4vw, 3rem)/1.1 var(--kopf-schrift); color: var(--navy); letter-spacing: -.02em; }
.danke p { margin-top: 16px; color: var(--ink-2); font-size: 18px; }
.danke ul { margin: 22px auto 0; display: grid; gap: 10px; text-align: left; max-width: 520px; }
.danke li { display: flex; gap: 10px; align-items: flex-start; }
.danke li svg { width: 22px; height: 22px; flex: none; color: var(--gold-text); margin-top: 2px; }

/* Lange Akzente dürfen unter 640px umbrechen (sonst horizontaler Überlauf), Unterstrich dann als Textlinie */
@media (max-width: 639px) {
  .h2 .akzent { white-space: normal; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: .09em; text-underline-offset: .16em; text-decoration-skip-ink: none; }
  .h2 .akzent .strich { display: none; }
  .hero__sub { font-size: 15.5px; line-height: 1.45; margin-top: 12px; }
  .hero__punkte { margin-top: 12px; gap: 4px; }
  .hero__reihe { margin-top: 12px; gap: 10px 16px; }
  .hero__visual { margin-top: 24px; }
  .bogen { margin-top: -40px; height: 36px; }
  .google-zeile { gap: 6px; font-size: 14.5px; }
  .sterne svg { width: 14px; height: 14px; }
}
@media (max-width: 359px) { .hero__h1 { font-size: 12px; letter-spacing: .03em; } }

/* Hero-H2 Desktop: Größe an der Textspalte ausrichten, damit es bei 1024–1460 px zwei Zeilen bleiben */
@media (min-width: 1024px) { .hero__h2 { font-size: clamp(2.6rem, 3.3vw, 3rem); } }
/* Tippflächen im Fuß */
.fuss a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 359px) { .h2 { font-size: 1.6rem; } }
@media (min-width: 1024px) {
  .wa__text .h2 { font-size: min(3.35rem, 3.9vw); }
  .anfrage__seite .anfrage__titel { font-size: 1.3rem; } /* R4: einzeilig in der 270-px-Spalte, kein Waisenwort */
}
.nw { white-space: nowrap; }

/* R1 D-28: Schluss-H2 mobil fließend statt 2×2 Zeilen */
@media (max-width: 599px) {
  .insel-rahmen--schluss .h2 .zeile { display: inline; }
  /* fließend würde der Goldteil mitten in der Zeile beginnen: mobil ohne Akzent (Desktop behält ihn) */
  .insel-rahmen--schluss .h2 .akzent, .insel-rahmen--schluss .h2 .akzent__wort { color: inherit; white-space: normal; text-decoration: none; }
  .insel-rahmen--schluss .h2 .strich { display: none; }
}
@media (max-width: 374px) { .insel-rahmen--schluss .h2 { font-size: 1.45rem; } }

/* R4: Waisenwörter vermeiden (Messlauf R4 waisenwoerter.log) */
p, li, figcaption, summary { text-wrap: pretty; }
.h2 .zeile { text-wrap: balance; }
.anfrage__titel { white-space: nowrap; }
@media (max-width: 359px) { .anfrage__titel { font-size: 1.2rem; } }

/* R2 N-01: kurze Handys (z. B. 360×740) — Hero-Bild flacher, damit der Formular-Kopf im ersten Bild steht */
@media (max-width: 639px) and (max-height: 780px) {
  .hero__visual { margin-top: 16px; }
  .hero__fotos img { aspect-ratio: 1280 / 760; object-fit: cover; object-position: 50% 55%; }
}
/* R2 N-05: Desktop mit 800 px Höhe — Formular-Titel und Kachelreihe im ersten Bild (1180×800, 1280×800) */
@media (min-width: 1024px) and (max-height: 860px) {
  .hero { padding-top: 18px; }
  .hero__text { padding-bottom: 56px; }
  .hero__h2 { margin-top: 6px; }
  .hero__sub { margin-top: 10px; }
  .hero__punkte { margin-top: 10px; }
  .hero__reihe { margin-top: 12px; }
  .kacheln--raum .kachel__bild { aspect-ratio: 440 / 190; }
}

/* R2 N-06: Ortsliste mobil kompakter */
@media (max-width: 639px) { .gebiet__orte { font-size: 14.5px; line-height: 1.6; } }

/* R4 (03.11.2026, C1 + Knopf-Prüfung): Knöpfe ab 320 px einzeilig.
   Gemessen zweizeilig vorher: Absende-Knopf Schritt 4 (320–383 px), „… anfragen“ in S4 (320–375 px),
   „Foto per WhatsApp schicken“ (320 px), „Zur Seite“ auf den Rechtsseiten (320 px). */
.knopf { white-space: nowrap; }
@media (max-width: 419px) {
  .knopf { padding-inline: 16px; gap: 8px; }
  .knopf--gross { padding-inline: 18px; font-size: 16px; }
}
@media (max-width: 359px) {
  .knopf { padding-inline: 12px; font-size: 15px; }
  .knopf svg { width: 18px; height: 18px; }
  .leistung__text { padding-inline: 18px; }
}

/* R4 (C2): Kunde schreibt jetzt grün rechts, auch das Foto-Paket. Grau #667781 hat auf #d9fdd3 nur 4,19:1,
   darum auf Grün das dunklere WhatsApp-Grau (≥ 4,5:1). */
.msg--raus time, .msg--raus .anhang b + span { color: #54656f; }
/* R4: Absende-Knopf füllt mobil seine Reihe (neben „Zurück“ oder, bei 320 px umgebrochen, allein in voller Breite) */
@media (max-width: 559px) { .schritt__fuss--senden [data-senden] { flex: 1 1 auto; } }