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

:root {
  --bg:        #f2efe9;
  --bg-soft:   #f7f4ef;
  --card:      #ffffff;
  --ink:       #211a15;
  --ink-soft:  #52463d;
  --ink-faint: #8d7f74;
  --line:      #e3dcd2;

  --green-950: #1a120d;
  --green-900: #241a13;
  --green-800: #35261c;
  --green-700: #4a3324;
  --green-600: #b0512c;
  --green-500: #c4653c;
  --accent:    #9c4526;

  --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: 34px; max-width: 132px;
}
/* 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: 132px; max-height: 34px;
  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; }
/* 17.08.: Sobald der Betrieb eine eigene helle Logofassung liefert
   (brand.logoImgLight - hier die Unterzeile in Weiss), ist die weisse Platte
   oben nicht nur ueberfluessig, sondern schaedlich: weisse Schrift auf
   weissem Grund verschwindet. Dann steht das Logo frei auf dem dunklen Fuss. */
.foot-brand .head-logo.has-img.is-light { background: none; padding: 0; }
.foot-brand .head-logo.has-img.is-light img { max-height: 30px; }
.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);
}
.chip-open {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  background: #f0e8e0; color: #7a3a20; font-weight: 600; font-size: 12.5px;
  white-space: nowrap;
}
.chip-open::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #34a862; box-shadow: 0 0 0 3px rgba(52,168,98,.2);
}
.head-stars { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.head-stars .stars { color: #e8a13c; 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: #ffc14d; 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: #e0a884; }
.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: #f4e9e1; 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: #e8a13c; 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);
}
/* Im Master ist dieser Punkt in den vier Google-Farben. Die Stimmen hier
   stammen nachweisbar nur von der eigenen Seite des Betriebs, ein
   Google-Ursprung ist wahrscheinlich, aber nirgends ausgewiesen. Ein
   Google-Punkt wuerde also eine Quelle behaupten, die nicht belegt ist.
   Deshalb neutral in der Hausfarbe. */
.review-src::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: var(--green-600);
}
.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: #e8a13c; 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: #ff5f4d; 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: #e0a884; font-weight: 700; margin-bottom: 8px;
}
.receipt-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #e0a884; }
.receipt-head h3 { font-size: 24px; letter-spacing: -.01em; }
.receipt-head h3 em { color: #ecd5c5; }
.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: #e0a884; 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: #ecd5c5; }
.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.3fr 1fr 1.1fr 1fr 1.1fr;
  gap: 30px; 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; }
}

/* Rechtszeile der Vorschau. .foot p hat Spezifitaet (0,1,1) und wuerde eine
   blosse .foot-note-Regel (0,1,0) schlagen, die Zeile wuerde dann auf 30ch
   gequetscht. Deshalb hier mit p davor. */
.foot p.foot-note { max-width: 66ch; text-align: right; line-height: 1.65; }
.foot p.foot-note a { color: #cbd6e0; text-decoration: underline; text-underline-offset: 2px; }
.foot p.foot-note a:hover { color: #fff; }
@media (max-width: 620px) {
  .foot p.foot-note { text-align: left; max-width: none; }
}

/* 16.08.2026 - Honeypot des Projekt-Checks.
   Ein Feld, das kein Mensch sieht und deshalb kein Mensch ausfuellt; wird es
   trotzdem befuellt, war ein Automat am Werk und die Anfrage wird beim
   Livegang verworfen. Bewusst NICHT display:none - manche Automaten
   erkennen das und ueberspringen solche Felder. Stattdessen aus dem
   sichtbaren Bereich geschoben. */
.calc-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* ======================================================================
   Umbau vom 06.09.2026 nach der Mail von Ralf Schubert.
   NUR ERGAENZUNGEN. Nichts oberhalb wird geloescht, weil die sieben
   Leistungsseiten dieselbe styles.css laden und sonst brechen wuerden.
   ====================================================================== */

/* ---------- Hero ohne Rechner (sein Punkt 1) ---------- */
.hero-solo { min-height: 92svh; padding: 150px 0 70px; }
.hero-solo .hero-copy { max-width: 780px; }
.hero-solo .hero-sub {
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 500; color: #f3e9df;
  max-width: 34ch; margin-top: 20px;
}
.hero-solo h1 { font-size: clamp(38px, 5.6vw, 68px); }
.hero-solo .hero-ctas {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px;
}
.btn-hero-ghost {
  background: rgba(255,255,255,.13); color: #fff;
  border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(7px);
}
.btn-hero-ghost:hover { background: rgba(255,255,255,.24); transform: translateY(-2px); }
.hero-solo .hero-call {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-top: 20px; color: #e8dbcd; font-size: 14.5px; text-decoration: none;
}
.hero-solo .hero-call b { color: #fff; font-size: 16px; }

/* Die drei Welten schon im ersten Bildschirm (sein Punkt 3). */
.hero-welten {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin-top: 56px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-md); overflow: hidden;
}
.hero-welt {
  background: rgba(26,18,13,.42); backdrop-filter: blur(8px);
  padding: 20px 22px;
}
.hero-welt b {
  display: block; color: #fff; font-size: 15px;
  letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
}
.hero-welt span {
  display: block; margin-top: 6px; font-size: 13px;
  color: #e0d2c4; line-height: 1.45;
}

/* ---------- Vorher/Nachher als Schiene (sein Punkt 2) ---------- */
.sect-ref { padding-bottom: 70px; }
.ref-slider { position: relative; margin-top: 40px; }
.projects-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(520px, 78vw);
  gap: 26px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-left: max(24px, calc((100vw - 1160px) / 2));
  padding: 6px max(24px, calc((100vw - 1160px) / 2)) 20px;
  scrollbar-width: none;
}
.projects-track::-webkit-scrollbar { display: none; }
.projects-track .project-card { scroll-snap-align: start; }
.ref-nav {
  position: absolute; top: calc(50% - 46px); z-index: 3;
  width: 50px; height: 50px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.94);
  color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, opacity .2s ease;
}
.ref-nav:hover:not(:disabled) { transform: scale(1.07); }
.ref-nav:disabled { opacity: .28; cursor: default; }
.ref-nav.prev { left: max(6px, calc((100vw - 1160px) / 2 - 24px)); }
.ref-nav.next { right: max(6px, calc((100vw - 1160px) / 2 - 24px)); }
.ref-dots { display: flex; gap: 9px; justify-content: center; margin-top: 6px; }
.ref-dot {
  width: 8px; height: 8px; border-radius: 999px; padding: 0;
  border: 0; background: #cfc4b6; cursor: pointer; transition: all .25s ease;
}
.ref-dot.is-on { background: var(--accent); width: 26px; }

/* Ein Projekt steht nebeneinander statt mit Regler, wenn die Perspektiven
   nicht zusammenpassen. Siehe Kommentar in data.js. */
.ba-static { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.ba-static .ba-half { position: relative; overflow: hidden; }
.ba-static .ba-half img { position: static; width: 100%; height: 100%; object-fit: cover; }
.ba-static .tag { bottom: 12px; }
.ba-static .tag.before { left: 12px; right: auto; }
.ba-static .tag.after  { left: calc(50% + 12px); right: auto; }

/* ---------- Drei Leistungswelten (sein Punkt 3) ---------- */
.sect-welten { background: var(--bg-soft); }
.welten-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 46px;
}
.welt {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
}
.welt-bild { aspect-ratio: 16 / 10; overflow: hidden; }
.welt-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.welt-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.welt-body h3 {
  font-size: 19px; letter-spacing: .1em; font-weight: 800;
  text-transform: uppercase; color: var(--ink);
}
.welt-claim {
  margin-top: 8px; font-family: var(--font-serif); font-style: italic;
  font-size: 16px; color: var(--accent);
}
.welt-text { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.welt-points { list-style: none; margin: 20px 0 0; padding: 0; }
.welt-points li {
  position: relative; padding-left: 24px; margin-bottom: 9px;
  font-size: 14px; color: var(--ink);
}
.welt-points li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 11px; height: 6px; border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.welt-links {
  margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 16px;
  border-top: 1px solid var(--line);
}
.welt-links a {
  font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.welt-links a:hover { text-decoration: underline; }

/* ---------- Komplettsanierung (sein Punkt 5) ---------- */
.verwandeln {
  background: var(--green-900); color: #f4ece3;
  padding: 100px 0;
}
.verw-grid {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.verwandeln .kicker { color: #bda893; }
.verwandeln .kicker .rule { background: #6b5443; }
.verwandeln h2 { color: #fff; max-width: 16ch; }
.verwandeln h2 em { font-family: var(--font-serif); font-style: italic; color: var(--green-500); font-weight: 420; }
.verw-lead {
  margin-top: 22px; font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45; color: #f0e2d5; max-width: 40ch;
}
.verw-body { margin-top: 18px; font-size: 15px; line-height: 1.7; color: #c9b7a6; max-width: 46ch; }
.verwandeln .btn-green { margin-top: 30px; }
.verw-media { margin: 0; }
.verw-media .ba {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.6);
}
.verw-media figcaption {
  margin-top: 14px; font-size: 13px; color: #a89583; text-align: center;
}

/* ---------- Warum SCOOPEX (sein Punkt 4) ---------- */
.sect-warum { background: var(--bg); }
.warum-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 46px;
}
.warum-karte {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 28px 26px 26px;
  position: relative;
}
.warum-no {
  font-family: var(--font-serif); font-style: italic;
  font-size: 15px; color: var(--accent);
}
.warum-karte h3 { margin-top: 10px; font-size: 17.5px; font-weight: 700; letter-spacing: -.01em; }
.warum-karte p { margin-top: 10px; font-size: 14px; line-height: 1.62; color: var(--ink-soft); }

.warum-stimmen { margin-top: 64px; }
.stimmen-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.stimmen-head h3 { font-size: 20px; font-weight: 700; }
.stimmen-quelle { font-size: 12.5px; color: var(--ink-faint); }
.stimmen-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px; margin-top: 26px;
}
.stimme {
  margin: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 24px 24px 20px;
}
.stimme-stars { color: #d8a24a; letter-spacing: 3px; font-size: 13px; }
.stimme blockquote {
  margin: 12px 0 0; font-size: 14.5px; line-height: 1.66; color: var(--ink);
}
.stimme figcaption {
  margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--ink);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
.stimme figcaption span { font-weight: 400; color: var(--ink-faint); font-size: 12px; }

/* ---------- Projekt-Check als eigener Bereich ---------- */
.sect-check { background: var(--bg-soft); border-top: 1px solid var(--line); }
.check-grid {
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(30px, 5vw, 66px); align-items: start;
}
.check-note {
  margin-top: 28px; padding: 20px 22px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.check-note h4 { font-size: 14px; font-weight: 700; }
.check-note p { margin-top: 8px; font-size: 13.5px; line-height: 1.62; color: var(--ink-soft); }
.sect-check .calc { position: static; }

/* ---------- Responsive fuer alles Neue ---------- */
@media (max-width: 1080px) {
  .welten-grid { grid-template-columns: 1fr; }
  .warum-grid { grid-template-columns: repeat(2, 1fr); }
  .verw-grid { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .ref-nav.prev { left: 8px; }
  .ref-nav.next { right: 8px; }
}
@media (max-width: 760px) {
  .hero-solo { padding-top: 128px; min-height: auto; }
  .hero-welten { grid-template-columns: 1fr; margin-top: 40px; }
  .hero-solo .hero-ctas .btn { width: 100%; justify-content: center; }
  .warum-grid { grid-template-columns: 1fr; }
  .stimmen-grid { grid-template-columns: 1fr; }
  .projects-track { grid-auto-columns: 84vw; scroll-padding-left: 24px; padding-inline: 24px; }
  .ref-nav { display: none; }
  .verwandeln { padding: 72px 0; }
}

/* Nachtrag 06.09.: Ankersprünge dürfen nicht unter der Kopfleiste landen,
   und lange Wörter wie "Flachdachsanierung" sollen im Auswahlfeld getrennt
   werden statt hart umzubrechen. */
section[id] { scroll-margin-top: 96px; }
.calc-chip { hyphens: auto; overflow-wrap: break-word; }

/* Nachtrag 06.09.: Auf dem Telefon läuft der Text über die volle Breite und
   sass damit teilweise auf der hellen Hausfassade. Der seitliche Verlauf des
   Titelbildes greift dort nicht. Also ein senkrechter Verlauf nur für
   schmale Geräte, bewusst zurückhaltend - das Bild soll hell bleiben. */
@media (max-width: 760px) {
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(33,26,21,.68) 0%, rgba(33,26,21,.46) 44%,
                              rgba(33,26,21,.30) 66%, rgba(33,26,21,.58) 100%);
  }
  .hero-solo h1, .hero-solo .hero-sub { text-shadow: 0 2px 18px rgba(26,18,13,.45); }
}
.calc-datenschutz { margin-top: 14px; font-size: 11.5px; line-height: 1.55; color: var(--ink-faint); }
.calc-datenschutz a { color: var(--accent); }

/* ======================================================================
   Zweite Runde am 06.09.2026 nach der Durchsicht durch den Chef.
   Auch hier nur Ergaenzungen - spaeter im Stapel gewinnt die letzte Regel.
   ====================================================================== */

/* ---------- Titelbild faehrt deutlicher heran ----------
   Vorher 7 % Zoom, kaum wahrnehmbar. Jetzt 13 %, und der Ursprung liegt
   etwas ueber der Mitte, damit der First beim Heranfahren im Bild bleibt.
   Die Bewegung startet auf 1.0 - der erste Eindruck zeigt also das ganze
   Haus, erst danach faehrt sie heran. */
.hero-bg::before {
  transform-origin: 50% 42%;
  animation: heroZoomStark 22s ease-in-out infinite alternate;
}
@keyframes heroZoomStark { from { transform: scale(1); } to { transform: scale(1.13); } }
@media (prefers-reduced-motion: reduce) { .hero-bg::before { animation: none; } }

/* Das Titelbild ist jetzt 16:9 und traegt das Haus vollstaendig.
   center statt "center 65%", sonst wandert der First aus dem Bild. */
.hero-bg, .hero-bg::before { background-position: center center; }

/* ---------- Das Band unter dem Titel ----------
   Vorher drei milchige Glasflaechen ueber dem Foto, unruhig und schlecht
   lesbar. Jetzt eine ruhige helle Leiste mit klarer Trennung, wie man sie
   von Architektur- und Bautraegerseiten kennt. */
.hero-welten {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(38px, 6vh, 70px);
  background: rgba(248, 245, 239, .96);
  backdrop-filter: blur(10px);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 26px 64px -22px rgba(20, 14, 10, .65);
  overflow: hidden;
}
.hero-welt {
  position: relative;
  display: block;
  padding: 26px 28px 24px;
  background: transparent;
  backdrop-filter: none;
  border-left: 1px solid var(--line);
  text-decoration: none;
  transition: background .25s ease;
}
.hero-welt:first-child { border-left: 0; }
a.hero-welt:hover { background: rgba(156, 69, 38, .06); }
.hero-welt b {
  display: block;
  color: var(--ink);
  font-size: 12.5px; letter-spacing: .15em; text-transform: uppercase; font-weight: 800;
}
.hero-welt b::after {
  content: ""; display: block; width: 26px; height: 2px;
  background: var(--accent); margin: 11px 0 12px;
}
.hero-welt span {
  display: block; margin: 0;
  color: var(--ink-soft); font-size: 13.5px; line-height: 1.5;
}
.hero-welt-pfeil {
  position: absolute; right: 22px; bottom: 22px;
  font-style: normal; color: var(--accent); opacity: 0;
  transform: translateX(-6px); transition: all .25s ease;
}
a.hero-welt:hover .hero-welt-pfeil { opacity: 1; transform: none; }

/* ---------- Projekte als Raster statt als Schiene ----------
   Alle sechs Bauvorhaben auf einen Blick, nichts zum Wegwischen. */
.projects-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 40px;
}
.projects-raster .project-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.projects-raster .project-meta { padding: 20px 22px 22px; }
.projects-raster .project-meta h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.projects-raster .facts { margin-top: 8px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.6; }

@media (max-width: 1080px) {
  .projects-raster { grid-template-columns: repeat(2, 1fr); }
  .hero-welten { grid-template-columns: 1fr; }
  .hero-welt { border-left: 0; border-top: 1px solid var(--line); }
  .hero-welt:first-child { border-top: 0; }
}
@media (max-width: 700px) {
  .projects-raster { grid-template-columns: 1fr; gap: 20px; }
}
/* Das Haus steht im Titelbild rechts. Der Bildausschnitt folgt ihm, damit es
   auch auf schmalen Geräten mittig im Blick bleibt statt am Rand zu kleben. */
.hero-bg, .hero-bg::before { background-position: center center; }

/* Das Und-Zeichen steht in der Grotesk statt in der Fraunces-Kursiven,
   deren kalligrafische et-Form wie ein abgeschnittenes Zeichen aussieht. */
.hero h1 .accent .amp {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 300;
  font-size: .82em;
  padding: 0 .05em;
}

/* ---------- Titelbereich auf dem Telefon ----------
   Auf dem schmalen Schirm kann ein Querformat-Foto nicht zugleich das ganze
   Haus zeigen und hinter der Schrift liegen. Deshalb ist der Titelbereich
   dort zweigeteilt: das Haus steht oben in voller Breite und vollstaendig,
   die Schrift darunter auf ruhigem Grund. Die Hoehe des Bildes ist 75vw,
   weil das Foto im Verhaeltnis 4:3 steht - damit rechnen Abstand und Verlauf
   auf jedem Geraet richtig, ohne feste Pixelwerte. */
@media (max-width: 760px) {
  .hero-bg {
    background-image: url("../assets/img/hero-abend-mobil.webp") !important;
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #1b1410;
  }
  .hero-bg::before { display: none; }
  .hero-bg::after {
    background: linear-gradient(180deg,
      rgba(27,20,16,.34) 0,
      rgba(27,20,16,.06) 46px,
      rgba(27,20,16,.06) calc(72.6vw - 90px),
      rgba(27,20,16,.86) calc(72.6vw - 8px),
      #1b1410 calc(72.6vw + 26px));
  }
  .hero-solo { padding-top: calc(72.6vw + 40px); padding-bottom: 44px; }
  .hero-solo h1, .hero-solo .hero-sub { text-shadow: none; }
  .hero-welten { margin-top: 34px; }
  .hero-welt { padding: 17px 20px; }
  .hero-welt b::after { margin: 8px 0 8px; }
  .hero-welt span { font-size: 13px; }
}

/* Bewertungszeile über den Kundenstimmen. Zahlen sind belegt (Google-Profil,
   am 06.09.2026 abgelesen), deshalb dürfen hier Sterne stehen. */
.stimmen-note {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-size: 13.5px; color: var(--ink-soft);
}
.stimmen-note .stars { color: #d8a24a; letter-spacing: 2px; font-size: 13px; }
.stimmen-note b { color: var(--ink); font-size: 15px; }
.stimmen-note a { color: var(--accent); font-weight: 600; text-decoration: none; }
.stimmen-note a:hover { text-decoration: underline; }
.stimmen-head { gap: 10px 16px; }
/* Der Knopf in der Kopfleiste darf nie umbrechen. */
.head-cta { white-space: nowrap; }
.head-stars .hs-anz { color: var(--ink-faint); }

/* Rückmeldung des Projekt-Checks: Warnung, wenn der Versand nicht scharf ist,
   und Fehlermeldung mit Telefonnummer als Ausweg statt einer Sackgasse. */
.calc-meldung {
  margin-top: 14px; padding: 13px 15px; border-radius: var(--radius-sm);
  font-size: 13.5px; line-height: 1.55;
}
.calc-meldung.warn   { background: #fdf3e3; border: 1px solid #e8cfa0; color: #6b4d18; }
.calc-meldung.fehler { background: #fbeceb; border: 1px solid #e5b6b1; color: #7a2f28; }
.calc-meldung a { color: inherit; }
.calc-dateihinweis { margin-top: 12px; font-size: 13px; color: var(--ink-soft); }