/* ============================================================
   MUSTERMANN BEDACHUNGEN — Conversion-Landingpage
   Design: warmes Sandgrau, Terrakotta/Ziegel, Serif-Italic-Akzente
   ============================================================ */

:root {
  --bg:        #f3f7fb;
  --bg-soft:   #f8fbfe;
  --card:      #ffffff;
  --ink:       #16202b;
  --ink-soft:  #44515f;
  --ink-faint: #7d8a97;
  --line:      #d6e3f0;

  --green-950: #0d1520;
  --green-900: #16202b;
  --green-800: #1f2f42;
  --green-700: #0a4aa8;
  --green-600: #0f62d6;
  --green-500: #35c2ee;
  --accent:    #0f62d6;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;

  --shadow-card: 0 18px 50px -18px rgba(33, 26, 21, .28);
  --shadow-pill: 0 10px 34px -12px rgba(33, 26, 21, .35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; }
em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 480;
  color: var(--accent);
  letter-spacing: .01em;
}

.wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 600; font-size: 15px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn .arr { transition: transform .25s ease; }
.btn:hover .arr { transform: translateX(4px); }
.btn-dark  { background: var(--green-800); color: #fff; box-shadow: var(--shadow-pill); }
.btn-dark:hover  { background: var(--green-700); transform: translateY(-2px); }
.btn-green { background: var(--green-600); color: #fff; box-shadow: var(--shadow-pill); }
.btn-green:hover { background: var(--green-500); transform: translateY(-2px); }
.btn-ghost {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255,255,255,.22); }

/* ---------- Sticky Pill Header ---------- */
.site-head {
  position: fixed; top: 14px; left: 50%; translate: -50% 0;
  z-index: 100;
  width: min(1060px, calc(100% - 28px));
  display: flex; align-items: center; gap: 18px;
  padding: 9px 10px 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px -18px rgba(33,26,21,.45);
  transition: box-shadow .3s ease;
}
.head-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.head-logo {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--green-800); color: #fff;
  border-radius: 9px;
  font-family: var(--font-serif); font-style: italic; font-size: 17px;
}
/* Echtes Kundenlogo (brand.logoImg): kein farbiges Kaestchen, sondern das
   Logo frei auf hellem Grund, damit es nicht wie ein Badge aussieht. */
.head-logo.has-img {
  background: none; border-radius: 0;
  width: auto; height: 54px; max-width: 190px;
}
/* Beide Achsen muessen als max- gebunden werden, nie als height:100%.
   height:100% ist hier zirkulaer (Container ist width:auto), der Browser
   faellt auf die Naturgroesse zurueck und das Logo sprengt die Kopfleiste.
   Nur height zu setzen reicht ebenfalls nicht: kompakte Logos werden dann
   ueber max-width breit statt hoch begrenzt. max-width UND max-height
   lassen immer die knappere Achse binden. */
.head-logo.has-img img {
  width: auto; height: auto;
  max-width: 190px; max-height: 54px;
  object-fit: contain; display: block;
}
/* Der Footer ist fast schwarz. Das Logo bekommt eine weisse Platte statt
   einer Invertierung: invert() wuerde Logos zerstoeren, die Weiss als
   Positivfarbe nutzen (z. B. weisses Monogramm auf rotem Grund) — daraus
   wuerde ein einheitlich weisser Klumpen. Die Platte funktioniert
   unabhaengig davon, wie das Logo aufgebaut ist. */
.foot-brand .head-logo.has-img {
  background: #fff; border-radius: 6px;
  padding: 4px 7px; width: auto; height: auto;
}
.foot-brand .head-logo.has-img img { max-height: 26px; }
.head-name { font-weight: 700; font-size: 14px; line-height: 1.15; white-space: nowrap; }
.head-name small { display: block; font-weight: 500; font-size: 11px; color: var(--ink-faint); }
.head-mid {
  display: flex; align-items: center; gap: 16px;
  margin-inline: auto;
  font-size: 13px; color: var(--ink-soft);
}
/* Notdienst-Chip: das staerkste Argument der Seite. Signalgruen statt
   Beige, dazu ein pulsierender Punkt — er soll auffallen, nicht
   mitlaufen. Der Puls respektiert prefers-reduced-motion. */
.chip-open {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 17px; border-radius: 999px;
  background: linear-gradient(135deg, #0f8f4d, #16b563);
  color: #fff; font-weight: 700; font-size: 13.5px;
  white-space: nowrap; letter-spacing: .01em;
  box-shadow: 0 6px 20px -6px rgba(15,143,77,.55), inset 0 0 0 1px rgba(255,255,255,.18);
}
.chip-open::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.85);
  animation: chip-puls 2.1s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes chip-puls {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.8); }
  70%  { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) { .chip-open::before { animation: none; } }
.head-stars { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.head-stars .stars { color: #35c2ee; letter-spacing: 1.5px; font-size: 12px; }
.head-stars b { color: var(--ink); }
.head-right { display: flex; align-items: center; gap: 16px; }
.head-phone { text-align: right; font-weight: 700; font-size: 14px; white-space: nowrap; }
.head-phone small { display: block; font-weight: 500; font-size: 10.5px; color: var(--ink-faint); }
.head-cta { padding: 12px 20px; font-size: 13.5px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 130px 0 90px;
  isolation: isolate;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center 65%;
  /* Beschneidet das langsam heranfahrende Pseudoelement. .hero selbst hat
     KEIN overflow:hidden und darf auch keins bekommen - dort steht der
     Rechner drin, der auf schmalen Geraeten ueberstehen darf. */
  overflow: hidden;
}
/* Ruhige Heranfahrt auf dem Titelbild. Sie liegt auf ::before und nicht auf
   .hero-bg selbst, weil .hero-bg zugleich der Beschnitt-Rahmen ist - wer das
   Element skaliert, skaliert seinen eigenen Rahmen mit und es blutet ueber
   den Hero hinaus. Das Bild wird geerbt, deshalb muss app.js nichts wissen. */
.hero-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: inherit;
  background-size: cover; background-position: center 65%;
  transform-origin: 50% 60%;
  animation: heroZoom 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .hero-bg::before { animation: none; } }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(33,26,21,.62) 0%, rgba(33,26,21,.34) 42%, rgba(33,26,21,.05) 70%),
    linear-gradient(0deg, rgba(33,26,21,.35) 0%, transparent 30%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
}
.hero-copy { color: #fff; max-width: 560px; }
.hero-rating {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(33,26,21,.42); backdrop-filter: blur(6px);
  font-size: 13px; font-weight: 500;
  margin-bottom: 22px;
}
.hero-rating .stars { color: #5ec8f0; letter-spacing: 2px; font-size: 12px; }
.hero h1 {
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -.025em;
  font-weight: 700;
}
.hero h1 .accent {
  display: block;
  font-family: var(--font-serif); font-style: italic; font-weight: 420;
  color: #ead9cd;
  letter-spacing: 0;
  margin-top: 6px;
}
.hero-sub {
  margin-top: 22px;
  font-size: 16px; color: rgba(255,255,255,.88);
  max-width: 46ch;
}
.hero-stats {
  display: flex; gap: clamp(26px, 4vw, 56px);
  margin-top: 34px;
}
.hero-stats .stat b {
  font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.02em;
}
.hero-stats .stat b sup { font-size: .55em; color: #8fc9ee; }
.hero-stats .stat span {
  display: block; margin-top: 3px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.hero-ctas { display: flex; align-items: center; gap: 20px; margin-top: 38px; flex-wrap: wrap; }
.hero-call { font-size: 13.5px; color: rgba(255,255,255,.82); }
.hero-call b { color: #fff; font-size: 15px; margin-left: 8px; }

/* ---------- Rechner-Card ---------- */
.calc {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px 26px 22px;
  max-width: 420px; justify-self: end; width: 100%;
}
.calc-title { font-size: 17px; font-weight: 700; }
.calc-sub { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
.calc-progress { display: flex; gap: 6px; margin: 16px 0 18px; }
.calc-progress i {
  height: 3px; flex: 1; border-radius: 99px;
  background: #e9e2d8; transition: background .3s ease;
}
.calc-progress i.on { background: var(--green-600); }
.calc-q { font-size: 14px; font-weight: 700; margin-bottom: 13px; }
/* minmax(0,1fr) statt 1fr: sonst verhindert die Min-Content-Breite langer
   Chip-Beschriftungen das Schrumpfen und die Seite laeuft auf dem Handy
   horizontal ueber (gemessen: 63 px Ueberlauf bei 375 px). */
.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.calc-chip {
  display: flex; align-items: center; gap: 9px;
  min-width: 0; overflow-wrap: anywhere;
  padding: 13px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; color: var(--ink);
  text-align: left;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.calc-chip svg { width: 16px; height: 16px; flex: 0 0 auto; stroke: var(--accent); }
.calc-chip:hover { border-color: #cbb8a8; }
.calc-chip.sel {
  border-color: var(--green-600);
  background: #f8f1ea;
  box-shadow: 0 0 0 1px var(--green-600) inset;
}
.calc-field { margin-top: 14px; }
.calc-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.calc-field input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: 14px;
  background: #fff; color: var(--ink);
  outline: none; transition: border-color .2s;
}
.calc-field input:focus { border-color: var(--green-600); }
.calc-field .hint { font-size: 11px; color: var(--ink-faint); margin-top: 5px; }
.calc-nav { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.calc-back {
  background: none; color: var(--ink-faint);
  font-size: 13px; font-weight: 600;
  padding: 10px 4px; white-space: nowrap;
}
.calc-back:hover { color: var(--ink); }
.calc-next {
  flex: 1;
  padding: 14px 18px;
  background: var(--green-800); color: #fff;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700;
  transition: background .2s, transform .2s;
}
.calc-next:hover { background: var(--green-700); transform: translateY(-1px); }
.calc-trust { font-size: 11px; color: var(--ink-faint); text-align: center; margin-top: 11px; }
.calc-phone {
  margin-top: 15px; padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center; font-size: 12.5px; color: var(--ink-faint);
}
.calc-phone b { color: var(--ink); }
.calc-success { text-align: center; padding: 26px 6px 12px; }
.calc-success .ok {
  width: 52px; height: 52px; margin: 0 auto 16px;
  border-radius: 50%; display: grid; place-items: center;
  background: #eef4fa; color: var(--green-600); font-size: 24px;
}
.calc-success h4 { font-size: 17px; margin-bottom: 8px; }
.calc-success p { font-size: 13px; color: var(--ink-soft); }

/* ---------- Review-Marquee ---------- */
.reviews { padding: 26px 0 56px; overflow: hidden; }
.marquee { display: flex; gap: 16px; width: max-content; animation: marq 55s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.review-card {
  width: 300px; flex: 0 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.review-head { display: flex; align-items: center; gap: 10px; }
.review-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green-800); color: #fff;
  font-size: 13px; font-weight: 700;
}
.review-name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.review-name small { display: block; font-weight: 500; color: var(--ink-faint); font-size: 11px; }
.review-stars { color: #35c2ee; font-size: 11px; letter-spacing: 2px; margin: 9px 0 7px; }
.review-text { font-size: 12.5px; color: var(--ink-soft); }
.review-src {
  display: flex; align-items: center; gap: 6px;
  margin-top: 11px; font-size: 10.5px; color: var(--ink-faint);
}
.review-src::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: currentColor; opacity: .5;
  /* 06.08.2026: vorher Googles vier Markenfarben als conic-gradient.
     Das stand auch neben Bewertungen von golocal, 11880, ProvenExpert
     oder der eigenen Kundenseite und hat eine Google-Herkunft
     vorgetaeuscht, die es nicht gab. 66 Demos waren betroffen.
     Neutral ist ehrlich; wer die Google-Farben zurueckwill, muss sie
     datengesteuert setzen (nur wenn die Quelle wirklich Google ist). */
}
.reviews-total {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 30px; font-size: 14px; color: var(--ink-soft);
}
.reviews-total .stars { color: #35c2ee; letter-spacing: 3px; font-size: 13px; }
.reviews-total b { color: var(--ink); }

/* ---------- Sections allgemein ---------- */
section { position: relative; }
.sect { padding: 96px 0; }
.kicker {
  display: flex; align-items: center; gap: 14px;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
  margin-bottom: 20px;
}
.kicker .no { font-family: var(--font-serif); font-style: italic; letter-spacing: 0; text-transform: none; font-size: 14px; }
.kicker .rule { width: 44px; height: 1px; background: #cfc4b6; }
.kicker .right { margin-left: auto; }
h2.h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.06; letter-spacing: -.02em; font-weight: 700;
  max-width: 20ch;
}
.sect-sub { margin-top: 16px; font-size: 15px; color: var(--ink-soft); max-width: 52ch; white-space: pre-line; }

/* ---------- Referenzen (Vorher/Nachher) ---------- */
.projects-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin-top: 44px;
}
.project-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.ba {
  position: relative; aspect-ratio: 4 / 3;
  overflow: hidden; user-select: none; touch-action: none; cursor: ew-resize;
}
.ba img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.ba .after-wrap {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--pos, 50%));
}
.ba .divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 3px; background: var(--green-600); translate: -50% 0;
}
.ba .handle {
  position: absolute; top: 50%; left: var(--pos, 50%);
  translate: -50% -50%;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green-800); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; letter-spacing: 1px;
  box-shadow: 0 6px 18px rgba(26,18,13,.4);
}
.ba .tag {
  position: absolute; top: 12px;
  padding: 6px 11px; border-radius: 7px;
  background: rgba(26,18,13,.72); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  backdrop-filter: blur(4px);
}
.ba .tag.before { left: 12px; }
.ba .tag.after  { right: 12px; }
.project-meta { padding: 16px 18px 18px; }
.project-meta h3 { font-size: 16px; font-weight: 700; }
.project-meta .facts {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  margin-top: 7px; font-size: 12.5px; color: var(--ink-soft);
}
.project-meta .facts .pin { color: #cc4b3b; }
.projects-cta { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- Rundgang ---------- */
.rundgang-head {
  display: grid; grid-template-columns: 1fr minmax(280px, 360px);
  gap: 40px; align-items: end;
}
.rundgang-note { font-size: 13.5px; color: var(--ink-soft); }
.stage {
  position: relative;
  margin-top: 34px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 8.4;
  background: var(--green-900);
  box-shadow: var(--shadow-card);
}
.stage video, .stage .stage-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.stage .stage-img.kenburns { animation: kb 18s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1) translateX(0); } to { transform: scale(1.09) translateX(-1.5%); } }
.stage-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(26,18,13,.62); backdrop-filter: blur(6px);
  color: #fff; font-size: 12px; font-weight: 600;
}
.stage-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #ff6b5c; animation: pulse 1.6s ease infinite;
}
@keyframes pulse { 50% { opacity: .35; } }
.stage-captions {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: 14px;
}
.stage-cap {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 15px;
}
.stage-cap .num {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--green-800); color: #fff;
  font-family: var(--font-serif); font-style: italic; font-size: 12px;
}
.stage-cap .pos {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.stage-cap .txt { font-size: 12.5px; font-weight: 600; }

/* ---------- Leistung / Festpreis ---------- */
.leistung-grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(36px, 5vw, 80px);
  margin-top: 48px; align-items: start;
}
.check-list { list-style: none; display: grid; gap: 4px; }
.check-list li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid #e7dfd4;
  font-size: 14.5px;
}
.check-list li::before {
  content: "✓"; color: var(--green-600); font-weight: 800;
  flex: 0 0 auto; translate: 0 -1px;
}
.excluded { margin-top: 26px; }
.excluded h4 { font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.excluded p { font-size: 12.5px; color: var(--ink-soft); max-width: 52ch; }

.receipt {
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: sticky; top: 110px;
}
.receipt-head {
  background: var(--green-800); color: #fff;
  padding: 22px 26px 26px;
  position: relative;
}
.receipt-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 10px;
  background: radial-gradient(circle at 8px -2px, transparent 7px, var(--card) 7.5px);
  background-size: 18px 10px; background-position: 4px 0;
}
.receipt-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: #8fc9ee; font-weight: 700; margin-bottom: 8px;
}
.receipt-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8fc9ee; }
.receipt-head h3 { font-size: 24px; letter-spacing: -.01em; }
.receipt-head h3 em { color: #cfe4f5; }
.receipt-body { padding: 26px; }
.receipt-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 13px 0; border-bottom: 1px dashed var(--line);
  font-size: 13.5px; color: var(--ink-soft);
}
.receipt-row b { font-size: 15px; color: var(--ink); }
.receipt-cta {
  width: 100%; margin-top: 22px;
  padding: 15px;
  background: var(--green-600); color: #fff;
  border-radius: var(--radius-sm);
  font-size: 14.5px; font-weight: 700;
  display: inline-flex; justify-content: center; gap: 8px;
  transition: background .2s, transform .2s;
}
.receipt-cta:hover { background: var(--green-500); transform: translateY(-1px); }
.receipt-trust { text-align: center; font-size: 11px; color: var(--ink-faint); margin-top: 10px; }

/* ---------- Prozess (dunkelgrün) ---------- */
.prozess {
  background:
    radial-gradient(120% 90% at 85% 10%, #4a2c1a 0%, transparent 55%),
    linear-gradient(160deg, var(--green-900), var(--green-950));
  color: #f4ede5;
  padding: 100px 0;
}
.prozess .kicker { color: #b39781; }
.prozess .kicker .rule { background: #6b4530; }
.prozess h2.h2 em { color: #e2a87f; }
.steps { margin-top: 56px; display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 26px;
  padding: 34px 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
.step .no {
  font-family: var(--font-serif); font-style: italic;
  font-size: 36px; color: #8a6f5c; line-height: 1;
}
.step .tag {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #8fc9ee; font-weight: 700; margin-bottom: 9px;
}
.step h3 { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.015em; margin-bottom: 10px; }
.step p { font-size: 14px; color: #cdbbaa; max-width: 62ch; }

/* ---------- Über uns ---------- */
.about-grid {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.owner-photo {
  aspect-ratio: 3.2 / 4;
  border: 2px dashed #cfc1b1;
  border-radius: var(--radius-md);
  display: grid; place-content: center; text-align: center;
  padding: 30px; gap: 9px;
  color: var(--ink-faint);
  background: var(--bg-soft);
  position: sticky; top: 110px;
}
.owner-photo b { font-size: 14px; color: var(--ink-soft); }
.owner-photo span { font-size: 12px; max-width: 24ch; margin-inline: auto; }
.about-copy .kicker { margin-bottom: 16px; }
.about-copy h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 22px; }
.about-copy p { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 16px; max-width: 58ch; }
.about-bullets {
  list-style: none;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 24px; margin: 26px 0;
  display: grid; gap: 10px;
}
.about-bullets li {
  display: flex; gap: 11px; font-size: 13.5px;
}
.about-bullets li::before { content: "•"; color: var(--green-600); font-weight: 800; }
.promise {
  background: var(--green-900); color: #e9dbcd;
  border-radius: var(--radius-md);
  padding: 20px 24px;
  font-size: 14px;
}
.promise strong { color: #fff; }

/* ---------- FAQ ---------- */
.faq-list { margin-top: 44px; max-width: 820px; }
.faq-item { border-bottom: 1px solid #e2d9cc; }
.faq-q {
  width: 100%; background: none;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 21px 4px;
  font-size: 15.5px; font-weight: 600; color: var(--ink);
  text-align: left;
}
.faq-q .chev { transition: transform .3s ease; color: var(--accent); flex: 0 0 auto; }
.faq-item.open .chev { transform: rotate(180deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease;
}
.faq-a p { padding: 0 4px 22px; font-size: 14px; color: var(--ink-soft); max-width: 68ch; }

/* ---------- Final CTA ---------- */
.final {
  position: relative; isolation: isolate;
  padding: 150px 0 130px;
  color: #fff; text-align: center;
}
.final-bg {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
}
.final-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,14,10,.72), rgba(20,14,10,.45) 45%, rgba(20,14,10,.82));
}
.final-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  font-size: 12.5px; margin-bottom: 26px;
}
.final h2 {
  font-size: clamp(34px, 4.6vw, 56px);
  letter-spacing: -.02em; line-height: 1.04;
}
.final h2 em { color: #cfe4f5; }
.final .sub {
  margin: 18px auto 0; max-width: 52ch;
  font-size: 15px; color: rgba(255,255,255,.85);
}
.final-ctas {
  display: flex; justify-content: center; gap: 14px;
  margin-top: 36px; flex-wrap: wrap;
}
.final-badges {
  display: flex; justify-content: center; gap: 26px; flex-wrap: wrap;
  margin-top: 44px;
  font-size: 12px; color: rgba(255,255,255,.72);
}
.final-badges span { display: inline-flex; align-items: center; gap: 7px; }
.final-badges svg { width: 13px; height: 13px; }

/* ---------- Footer ---------- */
.foot {
  background: #170f0a; color: #b5a698;
  padding: 64px 0 0;
  font-size: 13px;
}
.foot-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px; padding-bottom: 48px;
}
.foot h4 {
  color: #fff; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 16px;
}
.foot-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; margin-bottom: 14px; }
.foot-brand .head-logo { background: var(--green-700); }
.foot p { max-width: 30ch; }
.foot ul { list-style: none; display: grid; gap: 9px; }
.foot a:hover { color: #fff; }
.foot-contact { display: grid; gap: 6px; }
.foot-contact b { color: #fff; }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: #83725f;
}
.foot-bottom nav { display: flex; gap: 20px; }

/* ---------- Reveals ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.rv.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .head-mid { display: none; }
}
@media (max-width: 900px) {
  .hero { padding-top: 108px; }
  .hero-grid { grid-template-columns: 1fr; }
  /* Grid-Kinder duerfen unter ihre Min-Content-Breite schrumpfen,
     sonst sprengt die Rechner-Karte den Viewport (siehe .calc-grid). */
  .hero-grid > * { min-width: 0; }
  .calc { justify-self: stretch; max-width: none; min-width: 0; }
  .projects-grid { grid-template-columns: 1fr 1fr; }
  .leistung-grid, .about-grid, .rundgang-head { grid-template-columns: 1fr; }
  .receipt, .owner-photo { position: static; }
  .stage { aspect-ratio: 16 / 10; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  /* Auf schmalen Schirmen ist der Textblock neben einem echten Logo zu viel:
     er schiebt sich unter die CTA-Schaltflaeche (gemessen bis 130 px
     Ueberlappung bei 360 px). Die Bildmarke traegt die Marke dort allein. */
  .head-logo.has-img + .head-name { display: none; }
  .head-phone { display: none; }
  .head-cta { padding: 11px 16px; font-size: 12.5px; }
  .projects-grid, .stage-captions { grid-template-columns: 1fr; }
  .hero-stats { flex-wrap: wrap; gap: 20px 34px; }
  .step { grid-template-columns: 54px 1fr; gap: 16px; }
  .foot-grid { grid-template-columns: 1fr; }
  .sect { padding: 72px 0; }
}

.hero-bg .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 60%;
}

@media (max-width: 620px) {
  /* Auf dem Handy ist im Kopf nur Platz fuer Logo, Name und Knopf.
     Die Claim-Zeile ist mit white-space:nowrap gesetzt und lief sonst
     unter den Knopf „Angebot berechnen“. */
  .head-brand { overflow: hidden; }
  .head-name { overflow: hidden; text-overflow: ellipsis; }
  .head-name small { display: none; }
}

/* Honeypot: fuer Menschen unsichtbar, Bots fuellen ihn aus.
   Ohne diese Regel steht das Feld sichtbar im Formular. */
.honeypot, .hp-feld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* Einwilligungshinweis am Rechner (19.08.2026) */
.calc-datenschutz {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  opacity: .75;
}
.calc-datenschutz a { color: inherit; text-decoration: underline; }


/* ---- Mobil-Feinschliff (25.08.2026) ----
   Auf dem Handy war die Kopfzeile zu gedraengt: Logo klein, Chip
   abgeschnitten, Telefonnummer im Umbruch. Hier bekommt jedes Stueck
   wieder Platz, und die Tippziele erreichen 44 px. */
@media (max-width: 900px) {
  .head-mid { display: none; }              /* Chip wandert unter die Zeile */
  .head-logo.has-img,
  .head-logo.has-img img { height: 46px; max-height: 46px; max-width: 160px; }
}
@media (max-width: 640px) {
  .head-logo.has-img,
  .head-logo.has-img img { height: 42px; max-height: 42px; max-width: 140px; }
  .head-phone { font-size: 15px; }
  .head-phone small { font-size: 11px; }
  .head-cta { min-height: 44px; display: inline-flex; align-items: center; }
  .chip-open { font-size: 13px; padding: 9px 14px; }
}
/* Notdienst-Streifen direkt unter der Kopfzeile — auf dem Handy ist das
   der Platz, an dem er wirklich gesehen wird. */
.notdienst-band {
  display: none;
  align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, #0f8f4d, #16b563);
  color: #fff; font: 700 14px/1.3 var(--font-sans, system-ui), sans-serif;
  padding: 11px 14px; text-align: center;
}
.notdienst-band a { color: #fff; text-decoration: none; font-size: 16px; font-weight: 800; }
.notdienst-band .punkt {
  width: 9px; height: 9px; border-radius: 50%; background: #fff; flex: 0 0 auto;
  animation: chip-puls 2.1s cubic-bezier(.4,0,.6,1) infinite;
}
@media (max-width: 900px) { .notdienst-band { display: flex; } }

/* ---- Mindestgroessen fuer Mobil (25.08.2026) ----
   Gemessen bei 375 px: kleinste Schrift lag bei 10 px, fuenf Tippziele
   unter 44 px. Beides ist auf dem Handy nicht bedienbar. */
@media (max-width: 900px) {
  small, .ba__tag, .tag, .head-phone small, .calc__fineprint, .foot-legal,
  figcaption small, .review-name small { font-size: 12px !important; }
  span.tag, .tag.before, .tag.after { font-size: 12px !important; }
  .hero-call a, .head-phone a, .foot-legal a,
  a[href^="tel:"], a[href^="mailto:"] {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .head-brand { min-height: 44px; }
  .btn, .head-cta, .calc__nav button, button[type="submit"] {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
}

/* Letzte Runde Mobil: Spiralen-Schalter, Fusszeilen-Links und alle
   Restschriften unter 12 px. Gemessen bei 375 px, 25.08.2026. */
@media (max-width: 900px) {
  .sp-toggle button { min-height: 44px !important; padding-inline: 16px !important; font-size: 13px !important; }
  .foot-legal a, .foot-links a, footer a, .de-rechtszeile a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .de-rechtszeile { font-size: 12px !important; }
  small, .sp-label, .sp-hint, .sp-zaehler, figcaption, .calc__opt,
  .foot-legal, .foot-note, .hero-stats small { font-size: 12px !important; }
  [style*="font-size:10"], [style*="font-size: 10"] { font-size: 12px !important; }
}

/* Die letzten drei Stellen unter 12 px, per Messung gefunden:
   Hero-Kennzahlen, Ablauf-Beschriftung, Zaehler in der Spirale. */
@media (max-width: 900px) {
  .stat span, .stat small { font-size: 12px !important; line-height: 1.35 !important; }
  .pos { font-size: 12px !important; }
  .kicker .right, .sp-zaehler { font-size: 12px !important; }
  .calc__hinweis a, .form-hinweis a { display: inline-block; padding: 6px 0; }
}

/* ============================================================
   Mobiler Kopf — abschliessende Festlegung (25.08.2026)
   ============================================================
   Weiter oben setzen drei Bloecke die Logohoehe unterschiedlich
   (46 px, 42 px, plus die Basisregel). Gemessen kamen 28x34 px
   heraus. Statt die alten Regeln zu entwirren, legt dieser Block
   am Dateiende den Mobilkopf eindeutig fest.

   Aufbau auf dem Handy, zwei Zeilen:
     Zeile 1  Bildmarke gross + Firmenname   |  Anrufen
     Zeile 2  gruenes Band: Notdienst + Nummer
   Der Rechner-Knopf faellt hier weg, den traegt der Hero direkt
   darunter bereits als Vollbreitenknopf.
   ============================================================ */
@media (max-width: 640px) {
  .site-head { padding: 8px 14px; gap: 10px; }

  .head-brand { min-width: 0; gap: 9px; overflow: visible; }
  .head-logo.has-img,
  .head-logo.has-img img {
    height: 46px !important;
    max-height: 46px !important;
    max-width: 74px !important;
    width: auto !important;
  }

  /* Der Name bleibt stehen — er ist der Grund fuer das Logo. */
  .head-logo.has-img + .head-name,
  .head-name {
    display: block !important;
    font-size: 15px;
    line-height: 1.15;
    white-space: normal;
    overflow: visible;
  }
  .head-name small {
    display: block !important;
    font-size: 11px;
    letter-spacing: .01em;
    color: var(--ink-faint);
  }

  /* Rechts nur noch Anrufen — kurz, immer erreichbar. */
  .head-right { gap: 8px; margin-left: auto; }
  .head-cta { display: none !important; }
  .head-phone {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--green-700, #0f8f4d);
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
  }
  .head-phone small { display: none !important; }
  .head-phone::before { content: "\260E"; font-size: 15px; line-height: 1; }
}

/* Sehr schmale Geraete: Name weicht, Bildmarke bleibt gross. */
@media (max-width: 360px) {
  .head-name small { display: none !important; }
  .head-name { font-size: 14px; }
  .head-phone { padding: 0 12px; font-size: 0; }
  .head-phone::before { font-size: 18px; }
}

/* ============================================================
   Notdienstband ueber die Kopfpille legen
   ============================================================
   .site-head schwebt fixiert bei top:14px. Das Band stand im
   normalen Fluss ganz oben und verschwand deshalb komplett
   hinter der Pille — sichtbar blieb nur ein gruener Rand.
   Beides fixieren, das Band zuoberst, die Pille darunter.
   ============================================================ */
@media (max-width: 900px) {
  .notdienst-band {
    position: fixed; top: 0; left: 0; right: 0; z-index: 101;
    padding: 9px 12px;
    font-size: 13px;
    min-height: 40px;
    box-shadow: 0 6px 18px -10px rgba(0,0,0,.5);
  }
  .notdienst-band a { font-size: 15px; }

  /* Die Kopfpille rueckt unter das Band. Die Hoehe wird gemessen und
     nicht geraten: der Telefonlink im Band traegt min-height:44px aus der
     Tippziel-Regel, dadurch ist das Band 62 statt der gerechneten 40 px
     hoch — die Pille schnitt dem Logo den Kopf ab. */
  .site-head { top: calc(var(--bandhoehe, 62px) + 8px); }

  /* Der Sprungabstand fuer Ankerlinks muss beides beruecksichtigen. */
  :root { scroll-padding-top: 136px; }
}

/* ---- Feinschliff Mobilkopf, letzte Runde ----
   Drei Befunde aus der Aufnahme bei 390 px:
   1. Der Hero-Kicker lag hinter der Kopfpille (Band 40 + Pille 78).
   2. "RM Bautenschutz" brach in zwei Zeilen um.
   3. Die Rufnummer stand doppelt — im Band und im Kopfknopf.
   Der Knopf wird deshalb zum reinen Hoerersymbol; die Nummer
   steht gut lesbar im Band direkt darueber. */
@media (max-width: 640px) {
  .hero { padding-top: 148px !important; }
  .hero .kicker, .hero-kicker { margin-top: 6px; }

  .head-name { white-space: nowrap; font-size: 15.5px; }
  .head-name small { white-space: nowrap; font-size: 11.5px; }

  .head-phone {
    font-size: 0;
    padding: 0;
    width: 44px; min-width: 44px;
    justify-content: center;
  }
  .head-phone::before { font-size: 19px; }
}

/* Die letzten drei Messbefunde bei 360/390/414 px:
   Ladeanzeige der Spirale bei 9,9 px, der Datenschutzlink im
   Rechner nur 15 px hoch, der Ablauf-Link 40 px breit. */
@media (max-width: 900px) {
  .sp-stage, .sp-stage * { font-size: 12px; }
  .sp-stage .sp-titel { font-size: inherit; }
  .calc__fineprint, .calc__hinweis { line-height: 1.7; }
  .calc__fineprint a, .calc__hinweis a {
    display: inline-block; min-height: 44px; line-height: 44px;
  }
  .nav-links a, .head-nav a { min-width: 44px; text-align: center; }
}

/* Mit den echten Klassennamen aus der Messung — die vorherige Runde
   zielte auf geratene Namen (calc__fineprint statt calc-datenschutz)
   und lief deshalb ins Leere. */
@media (max-width: 900px) {
  .receipt-tag { font-size: 12px !important; }
  .receipt-trust { font-size: 12px !important; }
  .sp-unterzeile { font-size: 12px !important; }
  .calc-datenschutz { line-height: 1.8; }
  .calc-datenschutz a { display: inline-block; padding: 14px 0; }
  nav li > a, .nav li > a { min-width: 44px; text-align: center; }
}

/* ============================================================
   Abdunklung fuer den Video-Hero
   ============================================================
   Der neue Clip zeigt einen sonnendurchfluteten Raum. Gemessen in der
   Textzone (linke Haelfte, 25–80 % Hoehe): Durchschnitt 143 von 255,
   38 % der Flaeche heller als 170 — weisse Schrift kam nur auf 3,2:1
   und lag damit hart an der Grenze.

   Verstaerkt wird deshalb nur die LINKE Seite, wo Ueberschrift und
   Fliesstext stehen. Rechts bleibt der Raum hell, sonst ist das Motiv
   umsonst abgefilmt. Greift ausschliesslich, wenn wirklich ein Video
   im Hero liegt.
   ============================================================ */
.hero-bg:has(.hero-video)::after {
  /* Deutlich heller als zuvor (war .78/.60/.42). Der Keller soll zu sehen
     sein, nicht nur zu ahnen. Die weisse Schrift traegt hier trotzdem:
     links liegt der dunkelste Teil des Motivs, und die Ueberschrift hat
     ihren eigenen Schatten. */
  background:
    linear-gradient(100deg,
      rgba(20, 26, 33, .56) 0%,
      rgba(20, 26, 33, .38) 34%,
      rgba(20, 26, 33, .12) 62%,
      rgba(20, 26, 33, .02) 100%),
    linear-gradient(0deg, rgba(20, 26, 33, .26) 0%, transparent 30%);
}
/* Damit die Schrift trotz hellerem Grund sicher steht. */
.hero-bg:has(.hero-video) ~ .hero-grid h1,
.hero-bg:has(.hero-video) ~ .hero-grid .hero-sub,
.hero:has(.hero-video) #hero-h1,
.hero:has(.hero-video) #hero-sub {
  text-shadow: 0 2px 18px rgba(10, 16, 24, .55);
}

/* Auf dem Handy steht der Text ueber der ganzen Breite, dort muss die
   Abdunklung flaechig sein statt seitlich. */
@media (max-width: 900px) {
  .hero-bg:has(.hero-video)::after {
    background:
      linear-gradient(180deg,
        rgba(20, 26, 33, .58) 0%,
        rgba(20, 26, 33, .66) 45%,
        rgba(20, 26, 33, .78) 100%);
  }
}

/* ============================================================
   Wappen gross im Hero (Variante B, 25.08.2026)
   ============================================================
   Die Kopfleiste bleibt wie sie war (54 px am Bildschirm, 46 px auf
   dem Handy). Das Wappen steht zusaetzlich einmal gross ueber der
   Ueberschrift — dort, wo der Blick ohnehin zuerst hinfaellt.

   Der Schlagschatten ist noetig, weil das Logo auf dem hellen Keller-
   video sonst ausbleicht. Auf dem Handy faellt es kleiner aus, sonst
   schiebt es Ueberschrift und Kennzahlen aus dem ersten Bildschirm.
   ============================================================ */
.hero-brand {
  margin: 0 0 clamp(14px, 2vw, 22px);
  line-height: 0;
}
.hero-brand img {
  height: clamp(72px, 7.2vw, 104px);
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .45));
}
@media (max-width: 900px) {
  .hero-brand img { height: 76px; }
  .hero-brand { margin-bottom: 12px; }
}
@media (max-width: 400px) {
  .hero-brand img { height: 64px; }
}
/* Bei sehr flachen Fenstern lieber weglassen als den Text verdraengen. */
@media (max-height: 620px) and (max-width: 900px) {
  .hero-brand { display: none; }
}

/* "seit 2008" brach in zwei Zeilen und liess die Kennzahlenreihe
   unruhig wirken. Die Werte sind kurz genug, um zusammenzubleiben. */
.stat b, .stat strong, .stat > :first-child { white-space: nowrap; }

/* ============================================================
   Handy-Hero: die Marke statt eines Fotoausschnitts
   ============================================================
   Die Hero-Flaeche ist auf dem Handy rund 390x1780 px. Von einem
   Querformat-Motiv bleibt darin nur ein schmaler Streifen Wand — erst
   war es ein Video, dann ein hochkant zugeschnittenes Bild, beides
   blieb unklar. Deshalb hier gar kein Foto, sondern ein ruhiger
   Farbgrund mit dem Wappen gross darauf. Das Motiv des Betriebs zeigt
   der Rundgang direkt darunter.
   ============================================================ */
/* HART auf schmale Fenster begrenzt. Die Klasse allein reicht nicht:
   wird sie bei schmalem Fenster gesetzt und der Nutzer zieht das
   Fenster auf, bliebe der Wappengrund am Bildschirm stehen — dort
   gehoert das Video hin. */
@media (max-width: 900px) {
  body.hero-marke .hero-bg {
    background:
      radial-gradient(120% 70% at 50% 22%, #1d3550 0%, transparent 60%),
      linear-gradient(168deg, #17293c 0%, #101d2b 46%, #0c1620 100%);
  }
  body.hero-marke .hero-bg::before {
    content: "";
    position: absolute; inset: 0; z-index: 0;
    background: url("../assets/img/wappen-gross.webp") no-repeat center 20%;
    background-size: min(78vw, 350px) auto;
    opacity: .38;
    filter: drop-shadow(0 10px 40px rgba(0,0,0,.5));
    animation: none;
  }
  body.hero-marke .hero-bg::after {
    background: linear-gradient(180deg,
      rgba(12,22,32,.30) 0%, rgba(12,22,32,.55) 42%, rgba(12,22,32,.80) 100%);
  }
  /* Das kleine Wappen ueber der Ueberschrift entfaellt hier — sonst steht
     dieselbe Marke zweimal im selben Bild. */
  body.hero-marke .hero-brand { display: none; }
}

/* Abschluss-Bereich ("Schimmel gefunden?") auf dem Handy entschlacken.
   Gemessen: 150 px Innenabstand oben und 130 px unten bei nur 485 px
   Inhalt — das ergibt ueber dem Chip und unter den Knoepfen je eine
   Leerflaeche, die wie ein Fehler aussieht. */
@media (max-width: 900px) {
  section.final { padding: 56px 0 48px !important; }
  section.final .wrap > *:first-child { margin-top: 0; }
}

/* Rueckmeldung nach dem Absenden. Vorher sprang der Besucher wortlos in
   sein Mailprogramm — jetzt sieht er, dass die Anfrage angekommen ist. */
.calc-danke { text-align: center; padding: 26px 18px 22px; }
.calc-danke__zeichen {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px; font-weight: 700;
  background: linear-gradient(135deg, #0f8f4d, #16b563); color: #fff;
}
.calc-danke--fehler .calc-danke__zeichen { background: linear-gradient(135deg, #b4552f, #d4703f); }
.calc-danke p { margin: 0 0 10px; line-height: 1.55; color: var(--ink, #16202b); }
.calc-danke__tel { font-size: .95rem; color: var(--ink-soft, #4a5b6e); }