/* ============================================================
   NABI — Maison Design System v2
   Cinematic chocolate/gold, El Messiri display, light rhythm
   ============================================================ */

:root {
  --bg: #190f08;
  --bg-deep: #120a04;
  --panel: #241509;
  --gold: #c9a25e;
  --gold-bright: #e5c78e;
  --gold-dim: #96733d;
  --ivory: #f4e9d6;
  --cream: #e3d2b4;
  --muted: #b09a79;
  --faint: #83704f;
  --paper: #f2e9d8;
  --paper-2: #ece0c8;
  --ink: #241708;
  --ink-soft: #5f4d33;
  --hairline: rgba(201, 162, 94, 0.28);
  --hairline-soft: rgba(201, 162, 94, 0.14);
  --hairline-ink: rgba(63, 45, 22, 0.16);
  --display: "El Messiri", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Segoe UI", sans-serif;
  --maxw: 1440px;
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --shadow-card: 0 2px 6px rgba(43, 27, 10, 0.06), 0 24px 60px rgba(43, 27, 10, 0.13);
  --shadow-card-hover: 0 4px 10px rgba(43, 27, 10, 0.08), 0 34px 80px rgba(43, 27, 10, 0.2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  position: relative;
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold-bright); text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.wrap.narrow { max-width: 800px; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--gold); color: var(--bg-deep); padding: 10px 18px; }
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 500; color: var(--ivory); }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.3rem); line-height: 1.08; letter-spacing: 0.002em; }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.14; margin-bottom: 1.1rem; }
h3 { font-size: 1.3rem; line-height: 1.3; }
h1 em, h2 em { font-style: normal; color: var(--gold-bright); }

.eyebrow {
  font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); font-weight: 400; margin-bottom: 1.3rem;
}
.lead { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--cream); max-width: 46ch; }
.section-lead { color: var(--muted); max-width: 56ch; }
.section-lead.center { margin-left: auto; margin-right: auto; }
.section-head { margin-bottom: clamp(2.4rem, 5svh, 3.6rem); }

section { position: relative; padding: clamp(88px, 12svh, 150px) 0; }

/* ---------- Light sections ---------- */
section.light {
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(201, 162, 94, 0.1), transparent 55%),
    var(--paper);
  color: var(--ink);
}
section.light h1, section.light h2, section.light h3 { color: var(--ink); }
section.light h2 em { color: var(--gold-dim); }
section.light .eyebrow { color: var(--gold-dim); }
section.light .lead, section.light .section-lead { color: var(--ink-soft); }
section.light p { color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 400;
  font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 16px 30px; border: 1px solid transparent;
  transition: all 0.35s var(--ease);
}
.btn-gold {
  background: linear-gradient(120deg, var(--gold-dim), var(--gold) 45%, var(--gold-bright));
  color: #1d1206; border-color: var(--gold);
}
.btn-gold:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-ghost { color: var(--ivory); border-color: var(--hairline); background: transparent; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); }
.btn-glass {
  color: var(--ivory);
  border-color: rgba(244, 233, 214, 0.34);
  background: rgba(20, 11, 4, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-glass:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.btn-small { padding: 11px 20px; font-size: 0.72rem; }

.text-link {
  display: inline-block;
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-dim);
  border-bottom: 1px solid var(--hairline-ink);
  padding-bottom: 4px;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.text-link:hover { border-color: var(--gold-dim); color: var(--ink); }

/* ---------- Reveal ---------- */
/* Snappier reveals (audit): content readable in ~0.6s instead of 1.3s */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.05s; }
.reveal.d2 { transition-delay: 0.1s; }
.reveal.d3 { transition-delay: 0.15s; }
.reveal.d4 { transition-delay: 0.2s; }

/* ---------- Ornament ---------- */
.ornament { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 2rem; }
.orn-line { flex: 1; height: 1px; background: var(--hairline); max-width: 110px; }
.orn-star { color: var(--gold); font-size: 0.75rem; }

/* ---------- Depth: floating gold orbs + khatam stars (parallax) ---------- */
.f-orb {
  position: absolute; pointer-events: none; z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 94, 0.16), rgba(201, 162, 94, 0.05) 45%, transparent 70%);
  filter: blur(52px);
  will-change: transform;
}
.f-star {
  position: absolute; pointer-events: none; z-index: 0;
  color: rgba(201, 162, 94, 0.4);
  will-change: transform;
}
.f-star svg { width: 100%; height: auto; display: block; animation: starBob 11s ease-in-out infinite alternate; }
.f-star.on-light { color: rgba(150, 115, 61, 0.4); }
@keyframes starBob {
  0% { transform: translateY(-10px) rotate(-3deg); }
  100% { transform: translateY(12px) rotate(4deg); }
}
section > .wrap { position: relative; z-index: 1; }

/* Scroll companion: one khatam diamond that travels with the reader through all sections */
.f-companion {
  position: absolute; top: 0; left: clamp(12px, 4vw, 60px);
  width: 40px; z-index: 4;
  color: rgba(201, 162, 94, 0.5);
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 0 10px rgba(201, 162, 94, 0.25));
}
.f-companion svg { width: 100%; height: auto; display: block; }
@media (max-width: 760px) {
  .f-companion { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .f-star svg { animation: none !important; }
  .f-companion { display: none !important; }
}

/* ---------- Depth: khatam diamonds + glows in dark sections ---------- */
.statement::before, .reviews::before, .contact::before, .results::after {
  content: ""; position: absolute; pointer-events: none;
  width: 480px; height: 480px;
  border: 1px solid rgba(201, 162, 94, 0.09);
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 34px rgba(25, 15, 8, 0), 0 0 0 0 transparent;
  outline: 1px solid rgba(201, 162, 94, 0.045);
  outline-offset: 36px;
}
.statement::before { left: -270px; top: 50%; margin-top: -240px; }
.reviews::before { right: -280px; top: -150px; }
.contact::before { right: -240px; bottom: -220px; }
.results::after { left: -300px; bottom: -200px; }
.statement { position: relative; overflow: hidden; }
.reviews, .contact, .results { overflow: hidden; }
.reviews {
  background:
    radial-gradient(70% 60% at 85% 0%, rgba(201, 162, 94, 0.07), transparent 60%),
    var(--bg);
}
.statement {
  background:
    radial-gradient(60% 80% at 12% 50%, rgba(201, 162, 94, 0.07), transparent 65%),
    linear-gradient(180deg, var(--bg-deep), var(--bg));
}
.process {
  background:
    radial-gradient(55% 55% at 90% 20%, rgba(201, 162, 94, 0.06), transparent 62%),
    var(--bg);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: linear-gradient(180deg, rgba(10, 5, 2, 0.62), transparent);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(16, 9, 3, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline-soft);
}
.header-inner { display: flex; align-items: center; gap: 28px; height: 84px; }

.brand { display: flex; align-items: center; gap: 13px; color: var(--gold); }
.brand-mark { width: 40px; height: 40px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-family: var(--display); font-size: 1.3rem; letter-spacing: 0.3em; color: var(--ivory); }
.brand-claim { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }

.main-nav { display: flex; gap: 26px; margin-left: auto; }
.main-nav a { font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream); transition: color 0.3s; }
.main-nav a:hover { color: var(--gold-bright); }

.header-actions { display: flex; align-items: center; gap: 18px; }
.header-phone { font-size: 0.92rem; color: var(--ivory); letter-spacing: 0.04em; }
.header-phone:hover { color: var(--gold-bright); }

.nav-toggle { display: none; background: none; border: 0; width: 40px; height: 40px; cursor: pointer; flex-direction: column; justify-content: center; gap: 7px; align-items: center; }
.nav-toggle span { display: block; width: 26px; height: 1.5px; background: var(--gold); transition: transform 0.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(14, 8, 3, 0.98);
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 3rem; text-align: center;
}
.mobile-menu.open { display: flex; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 1.4rem; }
.mobile-menu nav a { font-family: var(--display); font-size: 1.7rem; color: var(--ivory); }
.mobile-menu-contact { display: flex; flex-direction: column; gap: 12px; }

/* ---------- HERO: full-bleed cinematic ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px 0 90px;
  overflow: hidden;
}

/* Short laptop screens: compact type so hero copy never collides with header */
@media (max-height: 820px) {
  .hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
  .hero .lead { font-size: 1.02rem; margin-top: 1.1rem; }
  .hero-ctas { margin-top: 1.7rem; }
  .hero { padding-bottom: clamp(64px, 9svh, 110px); }
  .hero-scroll { bottom: clamp(64px, 9svh, 110px); height: 64px; }
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 62%;
  transform: scale(1.06);
  animation: heroZoom 18s var(--ease) forwards;
  filter: saturate(0.98) contrast(1.02);
}
@keyframes heroZoom { to { transform: scale(1); } }

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

.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(18, 10, 4, 0.5) 0%, rgba(18, 10, 4, 0.1) 30%, rgba(18, 10, 4, 0.28) 55%, rgba(18, 10, 4, 0.94) 100%),
    radial-gradient(72% 62% at 50% 74%, rgba(14, 8, 3, 0.66), transparent 72%);
}
.hero-content { position: relative; z-index: 2; width: 100%; text-align: center; }
.hero-content .eyebrow { text-shadow: 0 1px 6px rgba(10, 5, 2, 0.9); }
.hero-content h1 {
  max-width: 17ch; margin: 0 auto;
  text-shadow: 0 1px 3px rgba(10, 5, 2, 0.8), 0 3px 14px rgba(10, 5, 2, 0.65), 0 10px 44px rgba(10, 5, 2, 0.55);
}
.hero-content .lead {
  margin: 1.5rem auto 0; max-width: 54ch;
  color: var(--ivory);
  text-shadow: 0 1px 4px rgba(10, 5, 2, 0.85), 0 2px 24px rgba(10, 5, 2, 0.7);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.3rem; justify-content: center; }
.btn-wa svg { flex-shrink: 0; }

.hero-trust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px;
  margin-top: 2.4rem;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 4px rgba(10, 5, 2, 0.8);
}
.ht-stars { color: var(--gold-bright); letter-spacing: 0.18em; margin-right: 6px; }
.ht-sep { color: var(--gold-dim); font-size: 0.6rem; }

.hero-scroll {
  position: absolute; right: clamp(20px, 4vw, 46px); bottom: clamp(96px, 16svh, 190px); z-index: 2;
  width: 1px; height: 88px; background: rgba(244, 233, 214, 0.22);
  overflow: hidden;
}
.hero-scroll span {
  position: absolute; left: 0; top: -40%;
  width: 1px; height: 40%;
  background: var(--gold-bright);
  animation: scrollHint 2.4s var(--ease) infinite;
}
@keyframes scrollHint { 0% { top: -40%; } 100% { top: 110%; } }

/* ---------- Trust band ---------- */
.trust-band { background: var(--bg-deep); border-top: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft); }
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 34px; padding-bottom: 34px; }
.trust-item { display: flex; flex-direction: column; align-items: flex-start; position: relative; padding-left: 22px; }
.trust-item::before { content: "✦"; position: absolute; left: 0; top: 8px; color: var(--gold-dim); font-size: 0.65rem; }
.trust-num, .trust-word { font-family: var(--display); font-size: 1.55rem; color: var(--gold-bright); line-height: 1.15; }
.trust-num i { font-style: normal; font-size: 1.05rem; vertical-align: 28%; }
.trust-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding: 22px 0; border-bottom: 1px solid var(--hairline-soft); background: var(--bg); }
.marquee-track { display: flex; white-space: nowrap; width: max-content; animation: marquee 38s linear infinite; }
.marquee-track span {
  font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--faint); padding-right: 12px;
}
.marquee-track i { font-style: normal; color: var(--gold-dim); margin: 0 18px; font-size: 0.75rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Services (light): editorial rows ---------- */
.service-rows { display: flex; flex-direction: column; gap: clamp(56px, 9svh, 110px); }
.service-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5.5vw, 80px);
  align-items: center;
}
.service-row.is-reversed .sr-media { order: 2; }
.service-row.is-reversed .sr-body { order: 1; }
.sr-media { position: relative; margin: 0; }
.sr-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  box-shadow: var(--shadow-card);
}
.sr-media::before {
  content: ""; position: absolute; inset: 16px -16px -16px 16px;
  border: 1px solid rgba(150, 115, 61, 0.4);
  z-index: -1;
}
.service-row.is-reversed .sr-media::before { inset: 16px 16px -16px -16px; }
.sr-media .premium-tag {
  position: absolute; top: 14px; right: 14px;
  font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: #1d1206; background: linear-gradient(120deg, var(--gold), var(--gold-bright));
  padding: 6px 13px;
}
.sr-index {
  display: inline-block;
  font-family: var(--display); font-size: 1rem; letter-spacing: 0.22em;
  color: var(--gold-dim);
  border-bottom: 1px solid rgba(150, 115, 61, 0.45);
  padding-bottom: 5px; margin-bottom: 1.1rem;
}
.sr-body h3 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); margin-bottom: 0.8rem; }
.sr-body p { font-size: 1rem; max-width: 46ch; }
.sr-list { list-style: none; margin: 1.4rem 0 1.7rem; }
.sr-list li {
  font-size: 0.93rem; color: var(--ink);
  padding: 9px 0 9px 24px; position: relative;
  border-bottom: 1px solid var(--hairline-ink);
}
.sr-list li:last-child { border-bottom: 0; }
.sr-list li::before { content: "✦"; position: absolute; left: 0; color: var(--gold-dim); font-size: 0.6rem; top: 14px; }

/* ---------- Statement ---------- */
.statement { text-align: center; background: linear-gradient(180deg, var(--bg-deep), var(--bg)); }
.statement-text { font-family: var(--display); font-size: clamp(1.45rem, 3.2vw, 2.2rem); line-height: 1.45; color: var(--cream); }
.statement-text em { font-style: normal; color: var(--gold-bright); }

/* ---------- Process (dark, ghost numeral) ---------- */
.process { background: var(--bg); overflow: hidden; }
.process::before {
  content: attr(data-ghost);
  position: absolute; right: -2%; top: 4%;
  font-family: var(--display); font-size: clamp(16rem, 34vw, 30rem); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 162, 94, 0.12);
  pointer-events: none;
}
/* Vertical timeline, centered with alternating sides */
.process .section-head { text-align: center; }
.timeline { position: relative; max-width: 880px; margin: 0.6rem auto 0; }
.timeline-rail {
  position: absolute; left: 50%; top: 10px; bottom: 10px; width: 1px;
  transform: translateX(-0.5px);
  background: rgba(201, 162, 94, 0.18);
}
.timeline-progress {
  position: absolute; left: 0; top: 0; width: 1px; height: 0%;
  background: linear-gradient(180deg, var(--gold-dim), var(--gold-bright));
  box-shadow: 0 0 14px rgba(201, 162, 94, 0.5);
  transition: height 0.25s linear;
}
.tl-step {
  position: relative;
  display: grid; grid-template-columns: 1fr 110px 1fr;
  align-items: center;
  padding: 0 0 clamp(56px, 9svh, 92px) 0;
}
.tl-step:last-child { padding-bottom: 0; }
.tl-marker {
  grid-column: 2; justify-self: center;
  position: relative; z-index: 2;
  width: 55px; height: 55px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 1.15rem; color: var(--gold-bright);
  background: var(--bg-deep);
  border: 1px solid var(--hairline);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.tl-step.active .tl-marker {
  border-color: var(--gold);
  box-shadow: 0 0 0 5px rgba(201, 162, 94, 0.12), 0 0 24px rgba(201, 162, 94, 0.28);
}
.tl-step:nth-child(odd) .tl-content { grid-column: 1; grid-row: 1; justify-self: end; }
.tl-step:nth-child(even) .tl-content { grid-column: 3; grid-row: 1; justify-self: start; }
.tl-content {
  max-width: 380px; width: 100%;
  text-align: left;
  background: linear-gradient(172deg, var(--panel), var(--bg-deep));
  border: 1px solid var(--hairline-soft);
  padding: 24px 28px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 22px 54px rgba(0, 0, 0, 0.28);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.tl-step.active .tl-content { border-color: var(--hairline); }
.tl-content:hover { transform: translateY(-3px); }
.tl-content h3 { font-family: var(--sans); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 0.55rem; }
.tl-content p { font-size: 0.94rem; color: var(--muted); }

/* ---------- Before / After ---------- */
.results { background: linear-gradient(180deg, var(--bg), var(--bg-deep)); }
.ba-slider {
  position: relative; overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
  aspect-ratio: 16 / 9;
  cursor: ew-resize; user-select: none; -webkit-user-select: none;
  touch-action: none;
}
.ba-slider img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-after { position: absolute; inset: 0; }
.ba-before { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.ba-before img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; max-width: none; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; }
.ba-line { position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px; background: var(--gold); box-shadow: 0 0 18px rgba(201, 162, 94, 0.55); }
.ba-knob {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--bg-deep); border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-bright);
}
.ba-tag {
  position: absolute; bottom: 16px;
  font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase;
  padding: 7px 14px; background: rgba(16, 9, 3, 0.75); color: var(--cream);
  border: 1px solid var(--hairline-soft);
}
.ba-tag-before { left: 16px; }
.ba-tag-after { right: 16px; }
.results-note { margin-top: 1.2rem; font-size: 0.82rem; color: var(--faint); letter-spacing: 0.06em; text-align: center; }

.results-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 26px; }
.rs-item { margin: 0; border: 1px solid var(--hairline-soft); background: var(--bg-deep); }
.rs-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.rs-item figcaption {
  padding: 14px 18px; text-align: center;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); border-top: 1px solid var(--hairline-soft);
}

/* ---------- Promise (light, symmetric) ---------- */
.promise-head { text-align: center; max-width: 720px; margin: 0 auto clamp(2.6rem, 5svh, 3.8rem); }
.promise-intro { margin-top: 1rem; }
.promise-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pg-item {
  text-align: center;
  background: #fbf6ea;
  border: 1px solid rgba(63, 45, 22, 0.08);
  box-shadow: var(--shadow-card);
  padding: 34px 24px 30px;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.pg-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); border-color: rgba(150, 115, 61, 0.4); }
.pg-icon {
  width: 52px; height: 52px; margin: 0 auto 1.1rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-dim);
  border: 1px solid rgba(150, 115, 61, 0.35);
  transform: rotate(45deg);
  transition: color 0.45s var(--ease), transform 0.6s var(--ease), border-color 0.45s var(--ease);
}
.pg-icon svg { transform: rotate(-45deg); }
.pg-item:hover .pg-icon { color: var(--gold-dim); transform: rotate(225deg); border-color: var(--gold); }
.pg-item h3 { font-size: 1.15rem; margin-bottom: 0.55rem; }
.pg-item p { font-size: 0.88rem; line-height: 1.6; }
.cert-strip {
  margin-top: clamp(2.6rem, 5svh, 3.6rem);
  display: flex; justify-content: center; gap: 26px; flex-wrap: wrap;
}
.cert-item { text-align: center; width: 300px; }
.cert-item img {
  width: 100%; height: 170px; object-fit: contain; background: #fff;
  border: 1px solid rgba(63, 45, 22, 0.1);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
}
.cert-item p { margin-top: 12px; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.cert-seal-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: #fff;
  border: 1px solid rgba(63, 45, 22, 0.1);
  box-shadow: var(--shadow-card);
  padding: 12px; min-height: 176px;
}
.cert-seal-mono {
  font-family: var(--display); font-size: 3rem; line-height: 1;
  color: var(--gold-dim); letter-spacing: 0.1em;
}
.cert-seal-sub { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); text-align: center; max-width: 22ch; }

/* ---------- Reviews (dark) ---------- */
.reviews { background: var(--bg); }
.reviews-head { text-align: center; max-width: 640px; margin: 0 auto 3.2rem; }
.stars-row { margin-top: 1rem; }
.stars { color: var(--gold); letter-spacing: 0.3em; font-size: 1.25rem; }
.stars-label { display: block; margin-top: 6px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.review-card {
  border: 1px solid var(--hairline-soft);
  background: linear-gradient(175deg, var(--panel), var(--bg-deep));
  padding: 30px 28px;
  display: flex; flex-direction: column;
}
.review-stars { color: var(--gold); font-size: 0.85rem; letter-spacing: 0.24em; }
.review-card blockquote { margin: 1.1rem 0 1.4rem; font-family: var(--display); font-size: 1.08rem; line-height: 1.6; color: var(--cream); flex: 1; }
.review-card figcaption {
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);
  padding-top: 14px; border-top: 1px solid var(--hairline-soft); margin-top: auto;
}
.review-card figcaption small { text-transform: none; letter-spacing: 0.02em; }

/* ---------- Area (radius map) ---------- */
.area {
  background:
    radial-gradient(110% 130% at 50% -20%, rgba(201, 162, 94, 0.14), transparent 60%),
    var(--bg-deep);
  border-top: 1px solid var(--hairline-soft);
}
.area-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.area-facts { list-style: none; margin-top: 2rem; }
.area-facts li {
  padding: 12px 0; border-bottom: 1px solid var(--hairline-soft);
  color: var(--cream); font-size: 0.95rem;
  display: flex; gap: 14px; align-items: baseline;
}
.area-facts li span { color: var(--gold); font-size: 0.62rem; }
/* Der Text-Wrapper darf nicht wie das Ornament formatiert werden (klein + gold),
   und er nimmt den Rest der Zeile ein, damit der Text normal umbricht. */
.area-facts li .af-text { color: inherit; font-size: inherit; flex: 1 1 auto; min-width: 0; }

.area-map { margin: 0; }
.area-map svg {
  width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.area-map figcaption {
  margin-top: 14px; text-align: center;
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.legend-dot { display: inline-block; width: 10px; height: 10px; }
.legend-gold { background: rgba(201, 162, 94, 0.35); border: 1px solid var(--gold); }
.legend-ring { border: 1px dashed var(--gold-dim); border-radius: 50%; background: transparent; }

.map-neighbors {
  fill: rgba(244, 233, 214, 0.025);
  stroke: rgba(201, 162, 94, 0.16);
  stroke-width: 0.8;
}
.map-hessen {
  fill: url(#mapHessenFill);
  stroke: var(--gold);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 18px rgba(201, 162, 94, 0.22));
}
.map-radius {
  fill: none; stroke: var(--gold-dim); stroke-width: 1; stroke-dasharray: 4 7; opacity: 0.75;
}
.map-radius-label {
  fill: var(--gold-dim); font-family: var(--sans); font-size: 11.5px;
  letter-spacing: 0.2em; text-transform: uppercase; text-anchor: middle;
}
.map-lines line { stroke: rgba(201, 162, 94, 0.16); stroke-width: 0.8; }
.map-cities circle { fill: var(--cream); opacity: 0.9; }
.map-cities text { fill: var(--muted); font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em; }
.map-center .map-dot { fill: var(--gold-bright); }
.map-center-label {
  fill: var(--ivory); font-family: var(--display); font-size: 17px; letter-spacing: 0.05em;
  paint-order: stroke; stroke: rgba(18, 10, 4, 0.75); stroke-width: 4px;
}
.map-pulse { fill: none; stroke: var(--gold); stroke-width: 1.2; transform-origin: 0 0; animation: mapPulse 2.8s var(--ease) infinite; }
@keyframes mapPulse {
  0% { transform: scale(0.55); opacity: 0.95; }
  70% { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ---------- FAQ (light) ---------- */
.faq .eyebrow, .faq > .wrap > h2 { text-align: center; }
.faq-list { margin-top: 2.4rem; border-top: 1px solid var(--hairline-ink); }
.faq-item { border-bottom: 1px solid var(--hairline-ink); }
.faq-item summary {
  list-style: none; cursor: pointer;
  font-family: var(--display); font-size: 1.14rem; color: var(--ink);
  padding: 20px 44px 20px 0; position: relative;
  transition: color 0.3s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--gold-dim); font-family: var(--sans); font-weight: 300; font-size: 1.5rem;
  transition: transform 0.3s var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover { color: var(--gold-dim); }
.faq-item p { padding: 0 0 22px; font-size: 0.97rem; max-width: 62ch; }

/* ---------- Contact (dark) ---------- */
.contact { background: linear-gradient(180deg, var(--bg), var(--bg-deep) 70%); }
.contact-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.contact-copy p { color: var(--muted); max-width: 44ch; }
/* Stand noch auf flex-start aus dem alten zweispaltigen Kontakt-Layout mit
   linksbuendigem Text. Seit die Sektion zentriert ist, sassen die Buttons
   98px links neben Ueberschrift und Fliesstext. */
.contact .hero-ctas { justify-content: center; }
.contact-details dl { border-top: 1px solid var(--hairline-soft); }
.detail-row { display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--hairline-soft); }
.detail-row dt { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); padding-top: 4px; }
.detail-row dd { color: var(--cream); font-size: 0.98rem; }
.detail-row dd a { color: var(--cream); border-bottom: 1px solid var(--hairline-soft); }
.detail-row dd a:hover { color: var(--gold-bright); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--hairline-soft); padding: 70px 0 110px; background: var(--bg-deep); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
.footer-logo { width: 168px; height: auto; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.footer-nav a { font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.footer-nav a:hover { color: var(--gold-bright); }
.footer-line { font-size: 0.8rem; color: var(--faint); }
.footer-credit { font-size: 0.74rem; color: var(--faint); letter-spacing: 0.06em; }
.footer-credit a { color: var(--muted); border-bottom: 1px solid var(--hairline-soft); }
.footer-credit a:hover { color: var(--gold-bright); border-color: var(--gold); }

/* ---------- Subpages ---------- */
.page-hero {
  position: relative;
  min-height: 88svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 130px 0 80px;
  overflow: hidden;
}
.page-hero .hero-bg img { animation: none; transform: scale(1.02); }
.page-hero .hero-scrim {
  background:
    linear-gradient(180deg, rgba(18, 10, 4, 0.55) 0%, rgba(18, 10, 4, 0.28) 30%, rgba(18, 10, 4, 0.34) 60%, rgba(18, 10, 4, 0.92) 100%),
    radial-gradient(72% 58% at 50% 52%, rgba(14, 8, 3, 0.6), transparent 76%);
}
.page-hero h1 {
  font-size: clamp(2.1rem, 4.8vw, 3.5rem); max-width: 22ch; margin: 0 auto;
  text-shadow: 0 1px 3px rgba(10, 5, 2, 0.8), 0 3px 14px rgba(10, 5, 2, 0.65), 0 10px 44px rgba(10, 5, 2, 0.55);
}
.breadcrumb {
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.2rem;
  text-shadow: 0 1px 6px rgba(10, 5, 2, 0.9);
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--gold-bright); }
.breadcrumb span { color: var(--faint); margin: 0 8px; }

.chip-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.2rem; }
.chip {
  font-family: var(--display); font-size: 1.02rem;
  padding: 12px 22px;
  border: 1px solid var(--hairline-ink);
  background: #fbf6ea;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(43, 27, 10, 0.05);
}
.reasons { columns: 2; column-gap: 48px; margin-top: 2.2rem; max-width: 860px; }
.reasons li {
  list-style: none; break-inside: avoid;
  padding: 11px 0 11px 26px; position: relative;
  border-bottom: 1px solid var(--hairline-soft);
  color: var(--cream); font-size: 0.97rem;
}
.reasons li::before { content: "✦"; position: absolute; left: 0; top: 16px; color: var(--gold-dim); font-size: 0.6rem; }
section.light .reasons li { color: var(--ink); border-color: var(--hairline-ink); }

.cta-band {
  position: relative;
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
  background:
    radial-gradient(90% 160% at 50% -40%, rgba(201, 162, 94, 0.16), transparent 60%),
    var(--bg-deep);
  text-align: center;
  padding: clamp(70px, 10svh, 110px) 0;
}
.cta-band h2 { max-width: 24ch; margin: 0 auto 0.9rem; }
.cta-band p { color: var(--muted); max-width: 52ch; margin: 0 auto; }
.cta-band .hero-ctas { justify-content: center; }

.crosslink {
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
  border: 1px solid var(--hairline-soft);
  background: linear-gradient(175deg, var(--panel), var(--bg-deep));
  padding: 26px 30px; margin-top: 3rem;
}
.crosslink .cl-star { color: var(--gold); font-size: 1rem; }
.crosslink h3 { font-size: 1.2rem; margin-bottom: 0.2rem; }
.crosslink p { font-size: 0.9rem; color: var(--muted); }

@media (max-width: 760px) {
  .page-hero { min-height: 58svh !important; padding-top: 120px !important; }
  .reasons { columns: 1 !important; }
  .crosslink { grid-template-columns: 1fr !important; text-align: center !important; }
}

/* ---------- Sofort-Einschätzung (Assistent) ---------- */
.estimator { background: linear-gradient(180deg, var(--bg-deep), var(--bg)); overflow: hidden; }
.section-head.center { text-align: center; }
.section-head.center h2 { margin-left: auto; margin-right: auto; }
.est-card {
  position: relative;
  margin-top: 2.6rem;
  border: 1px solid var(--hairline);
  background: linear-gradient(172deg, var(--panel), var(--bg-deep));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
  padding: clamp(26px, 4vw, 46px);
  min-height: 360px;
}
.est-steps { list-style: none; display: flex; justify-content: center; gap: 10px; margin: 0 0 2.4rem; flex-wrap: wrap; }
.est-dot {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
  padding-right: 10px;
}
.est-dot span {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline-soft); font-family: var(--display); color: var(--muted);
  transition: all 0.4s var(--ease);
}
.est-dot.is-current span, .est-dot.is-done span { border-color: var(--gold); color: var(--gold-bright); }
.est-dot.is-current { color: var(--gold); }
.est-dot.is-done span { background: var(--gold); color: var(--bg-deep); }

.est-stage { display: none; animation: estIn 0.45s var(--ease); }
.est-stage.is-active { display: block; }
@keyframes estIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.est-back {
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.3rem; padding: 4px 0;
  transition: color 0.3s;
}
.est-back:hover { color: var(--gold-bright); }
.est-q { font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--ivory); text-align: center; margin-bottom: 1.5rem; }
.est-q-2 { margin-top: 2.4rem; }

.est-options { display: grid; gap: 14px; }
.est-cols-2 { grid-template-columns: 1fr 1fr; }
.est-cols-3 { grid-template-columns: repeat(3, 1fr); }

.est-opt {
  cursor: pointer; font-family: var(--sans);
  background: rgba(255, 252, 245, 0.02);
  border: 1px solid var(--hairline-soft);
  color: var(--cream);
  padding: 20px 18px; text-align: center;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.est-opt:hover { border-color: var(--gold); transform: translateY(-3px); }
.est-opt.is-selected { border-color: var(--gold); background: var(--accent-soft); }
.est-ic { color: var(--gold); margin-bottom: 4px; }
.est-opt-t { font-size: 1.02rem; color: var(--ivory); }
.est-opt-s { font-size: 0.78rem; color: var(--muted); }
.est-chip { padding: 15px 16px; font-size: 0.96rem; color: var(--ivory); }
.est-chip small { display: block; font-size: 0.74rem; color: var(--muted); margin-top: 3px; letter-spacing: 0.02em; }

.est-summary {
  text-align: center; font-family: var(--display); font-size: 1.15rem; color: var(--gold-bright);
  border: 1px solid var(--hairline-soft); padding: 16px 20px; margin: 0 auto 1.4rem; max-width: 44ch;
}
.est-hint { text-align: center; color: var(--muted); font-size: 0.95rem; max-width: 48ch; margin: 0 auto 2rem; }
.est-hint strong { color: var(--cream); font-weight: 400; }
.est-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* Feste Breite statt min-width: sonst richtet sich jeder Button nach seinem
   eigenen Text und die drei stehen unterschiedlich breit untereinander. */
.est-actions .btn { width: 100%; max-width: 360px; justify-content: center; }

@media (max-width: 620px) {
  .est-cols-3 { grid-template-columns: 1fr; }
  .est-cols-2 { grid-template-columns: 1fr; }
  .est-steps .est-dot { font-size: 0.62rem; padding-right: 4px; }
  .est-actions .btn { min-width: 0; width: 100%; }
}

/* ---------- Mobile CTA bar ---------- */
.mobile-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
  display: none; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hairline);
  background: rgba(16, 9, 3, 0.97);
}
.mobile-cta a { padding: 16px 0; text-align: center; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory); }
.mobile-cta a.is-wa { background: linear-gradient(120deg, var(--gold-dim), var(--gold)); color: #1d1206; }

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 1020px) {
  .main-nav { display: none !important; }
  .header-actions .header-phone { display: none !important; }
  .nav-toggle { display: flex !important; margin-left: auto !important; }
  .header-actions { margin-left: 0 !important; }
  .review-grid { grid-template-columns: 1fr !important; max-width: 620px !important; margin: 0 auto !important; }
  .trust-strip { grid-template-columns: 1fr 1fr !important; row-gap: 26px !important; }
  .area-grid { grid-template-columns: 1fr !important; }
  .area-map { max-width: 640px !important; margin: 0 auto !important; }
  .promise-grid-4 { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 760px) {
  body { font-size: 16px !important; }
  section { padding: 72px 0 !important; }
  .hero { min-height: 92svh !important; padding-bottom: 84px !important; }
  .hero-bg img { object-position: 58% 62% !important; }
  .hero-scroll { display: none !important; }
  .trust-strip { grid-template-columns: 1fr !important; }
  .service-row { grid-template-columns: 1fr !important; gap: 26px !important; }
  .service-row.is-reversed .sr-media { order: 0 !important; }
  .service-row.is-reversed .sr-body { order: 1 !important; }
  .sr-media::before, .service-row.is-reversed .sr-media::before { inset: 12px -10px -10px 12px !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .promise-grid-4 { grid-template-columns: 1fr !important; max-width: 420px !important; margin: 0 auto !important; }
  .results-pair { grid-template-columns: 1fr !important; }
  .timeline-rail { left: 22px !important; transform: none !important; }
  .tl-step { grid-template-columns: 68px 1fr !important; }
  .tl-marker { grid-column: 1 !important; width: 44px !important; height: 44px !important; font-size: 0.95rem !important; }
  .tl-step:nth-child(odd) .tl-content, .tl-step:nth-child(even) .tl-content { grid-column: 2 !important; grid-row: 1 !important; text-align: left !important; justify-self: start !important; }
  .hero-trust { font-size: 0.7rem !important; gap: 8px 12px !important; }
  .map-cities text { font-size: 16px !important; }
  .promise-cert { max-width: 420px !important; }
  .detail-row { grid-template-columns: 1fr !important; gap: 4px !important; padding: 14px 0 !important; }
  .mobile-cta { display: grid !important; }
  .site-footer { padding-bottom: 140px !important; }
  .ba-slider { aspect-ratio: 4 / 3 !important; }
  .marquee-track span { font-size: 0.9rem !important; }
}

@media (max-width: 480px) {
  .brand-claim { display: none !important; }
  .brand-name { font-size: 1.15rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg img { animation: none !important; transform: none !important; }
  .marquee-track { animation: none !important; }
  .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
  /* Chip-Laufband: zweite (duplizierte) Haelfte ausblenden, sonst erscheint jede Teppichart doppelt */
  .chip-band-track .chip:nth-child(n+16) { display: none !important; }
  .chip-band-track { flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   LIGHT VARIANT (hell) — hell-first Overrides
   Zuletzt geladen: gewinnt per Reihenfolge + body.hell-Spezifitaet.
   Dunkle Sektionen sind vorlaeufig gepinnt und werden top-down
   auf hell umgebaut.
   ============================================================ */
body.hell { background: var(--paper); color: var(--ink); }
body.hell a { color: var(--gold-dim); }
body.hell a:hover { color: var(--gold); }

/* Header hell */
body.hell .site-header { background: linear-gradient(180deg, rgba(242,233,216,0.9), transparent); }
body.hell .site-header.scrolled { background: rgba(245,238,224,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--hairline-ink); }
body.hell .brand { color: var(--gold-dim); }
body.hell .brand-name { color: var(--ink); }
body.hell .brand-claim { color: var(--gold-dim); }
body.hell .main-nav a { color: var(--ink-soft); }
body.hell .main-nav a:hover { color: var(--gold-dim); }
body.hell .header-phone { color: var(--ink); }
body.hell .header-phone:hover { color: var(--gold-dim); }
body.hell .nav-toggle span { background: var(--gold-dim); }
body.hell .mobile-menu { background: rgba(245,238,224,0.98); }
body.hell .mobile-menu nav a { color: var(--ink); }

/* Sekundaer-Button auf Hell */
.btn-line { color: var(--ink); border-color: var(--hairline-ink); background: rgba(255,255,255,0.35); }
.btn-line:hover { border-color: var(--gold-dim); color: var(--gold-dim); background: rgba(255,255,255,0.6); }

/* HERO hell — contained split */
.hero-hell { position: relative; overflow: hidden;
  padding: clamp(120px,17svh,180px) 0 clamp(64px,9svh,104px);
  background: radial-gradient(120% 85% at 88% 18%, rgba(201,162,94,0.14), transparent 58%), var(--paper); }
.hero-hell-grid { display: grid; grid-template-columns: 1fr 1.06fr; gap: clamp(30px,5vw,72px); align-items: center; }
.hero-hell-copy { max-width: 35rem; }
.hero-hell .eyebrow { color: var(--gold-dim); }
.hero-hell h1 { color: var(--ink); max-width: 15ch; }
.hero-hell h1 em { color: var(--gold-dim); }
.hero-hell .lead { color: var(--ink-soft); max-width: 42ch; margin-top: 1.4rem; }
.hero-hell .hero-ctas { justify-content: flex-start; margin-top: 2rem; }
.hero-hell-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 2rem;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.hero-hell-trust .ht-stars { color: var(--gold); letter-spacing: 0.15em; margin-right: 6px; }
.hero-hell-trust .ht-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-dim); opacity: 0.5; }
.hero-hell-media { position: relative; }
.hero-hell-frame { position: relative; margin: 0; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--hairline); box-shadow: var(--shadow-card); }
.hero-hell-frame img { width: 100%; height: clamp(360px,54svh,580px); object-fit: cover; object-position: center;
  transform: scale(1.05); animation: heroZoom 22s var(--ease) forwards; }
.hero-hell-badge { position: absolute; left: -16px; bottom: 26px;
  background: rgba(255,253,248,0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hairline); border-radius: 13px; padding: 12px 18px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 2px; }
.hhb-k { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dim); }
.hhb-v { font-family: var(--display); font-size: 1.05rem; color: var(--ink); }

/* Trust-Band hell */
body.hell .trust-band { background: var(--paper-2); border-top-color: var(--hairline-ink); border-bottom-color: var(--hairline-ink); }
body.hell .trust-num, body.hell .trust-word { color: var(--gold-dim); }
body.hell .trust-label { color: var(--ink-soft); }
body.hell .trust-item::before { color: var(--gold-dim); }

/* Marquee hell */
body.hell .marquee { background: var(--paper); border-bottom-color: var(--hairline-ink); }
body.hell .marquee-track span { color: var(--ink-soft); }
body.hell .marquee-track i { color: var(--gold-dim); }

/* ---------- Hell-Konzept: alle Sektionen hell, Atelier-Prinzip = Indigo-Buehne ---------- */
:root { --indigo: #31456e; --indigo-deep: #24334f; --indigo-panel: #2b3c60; --terra: #96733d /* frueher Terrakotta, jetzt Gold */; }

/* Estimator hell */
body.hell .estimator { background: linear-gradient(180deg, var(--paper-2), var(--paper)); color: var(--ink); }
body.hell .estimator h2 { color: var(--ink); }
body.hell .est-card { background: #fffdf8; border-color: var(--hairline-ink); box-shadow: var(--shadow-card); }
body.hell .est-q { color: var(--ink); }
body.hell .est-opt { background: rgba(255,253,248,0.7); border-color: var(--hairline-ink); color: var(--ink); }
body.hell .est-opt:hover { border-color: var(--gold-dim); }
body.hell .est-opt.is-selected { border-color: var(--gold-dim); background: rgba(169,123,46,0.08); }
body.hell .est-opt-t, body.hell .est-chip { color: var(--ink); }
body.hell .est-opt-s, body.hell .est-chip small, body.hell .est-hint, body.hell .est-back { color: var(--ink-soft); }
body.hell .est-ic { color: var(--gold-dim); }
body.hell .est-dot span { border-color: var(--hairline-ink); color: var(--ink-soft); }
body.hell .est-dot.is-current { color: var(--gold-dim); }
body.hell .est-dot.is-current span, body.hell .est-dot.is-done span { border-color: var(--gold-dim); color: var(--gold-dim); }
body.hell .est-dot.is-done span { background: var(--gold-dim); color: #fff; }
body.hell .est-summary { color: var(--ink); }

/* Statement hell: grosses Serif-Zitat auf Sand */
body.hell .statement { background: var(--paper-2); }
body.hell .statement-text { color: var(--ink); }
body.hell .statement-text em { color: var(--terra); font-style: italic; }

/* Atelier-Prinzip: die EINE dunkle Indigo-Buehne */
body.hell .process { background: radial-gradient(120% 90% at 50% 0%, rgba(143,165,214,0.12), transparent 55%), linear-gradient(180deg, var(--indigo-deep), var(--indigo)); color: var(--ivory); }
body.hell .process h2, body.hell .process h3 { color: #f0ead9; }
body.hell .process .eyebrow { color: var(--gold-bright); }
body.hell .process .section-lead, body.hell .process p { color: rgba(240,234,217,0.75); }
body.hell .process::before { -webkit-text-stroke-color: rgba(229,199,142,0.14); }
body.hell .tl-marker { background: var(--indigo-deep); }
body.hell .tl-content { background: linear-gradient(172deg, var(--indigo-panel), var(--indigo-deep)); border-color: rgba(229,199,142,0.2); }
body.hell .tl-content h3 { color: var(--gold-bright); }
body.hell .tl-content p { color: rgba(240,234,217,0.72); }

/* Ergebnisse hell */
body.hell .results { background: var(--paper); }
body.hell .results h2, body.hell .results h3 { color: var(--ink); }
body.hell .results .section-lead, body.hell .results p, body.hell .results figcaption { color: var(--ink-soft); }
body.hell .ba-slider { border-color: var(--hairline-ink); box-shadow: var(--shadow-card); }

/* Bewertungen hell */
body.hell .reviews { background: var(--paper-2); }
body.hell .reviews h2 { color: var(--ink); }
body.hell .reviews .section-lead { color: var(--ink-soft); }
body.hell .stars-label { color: var(--ink-soft); }
body.hell .review-card { background: #fffdf8; border-color: var(--hairline-ink); box-shadow: var(--shadow-card); }
body.hell .review-card blockquote { color: var(--ink); }
body.hell .review-card figcaption { color: var(--ink-soft); border-top-color: var(--hairline-ink); }

/* Einzugsgebiet hell */
body.hell .area { background: radial-gradient(110% 130% at 50% -20%, rgba(169,123,46,0.1), transparent 60%), var(--paper); border-top-color: var(--hairline-ink); }
body.hell .area h2 { color: var(--ink); }
body.hell .area .section-lead, body.hell .area p { color: var(--ink-soft); }
body.hell .area-facts li { color: var(--ink); border-bottom-color: var(--hairline-ink); }
body.hell .area-map figcaption { color: var(--ink-soft); }
body.hell .map-neighbors { fill: rgba(56,42,20,0.04); stroke: rgba(169,123,46,0.3); }
body.hell .map-hessen { stroke: var(--gold-dim); }
body.hell .map-city-label { fill: var(--ink-soft); }

/* Kontakt hell */
body.hell .contact { background: linear-gradient(180deg, var(--paper), var(--paper-2) 70%); }
body.hell .contact h2 { color: var(--ink); }
body.hell .contact-copy p { color: var(--ink-soft); }
body.hell .detail-row { border-bottom-color: var(--hairline-ink); }
body.hell .contact-details dl { border-top-color: var(--hairline-ink); }
body.hell .detail-row dt { color: var(--gold-dim); }
body.hell .detail-row dd, body.hell .detail-row dd a { color: var(--ink); border-bottom-color: var(--hairline-ink); }
body.hell .detail-row dd a:hover { color: var(--gold-dim); }

/* Dunkle Deko-Orbs in hellen Sektionen daempfen */
body.hell .statement::before, body.hell .reviews::before, body.hell .contact::before, body.hell .results::after { opacity: 0.35; }

/* Footer bleibt dunkel (Tinte) als Abschluss-Anker */
body.hell .site-footer { background: #221809; border-top-color: rgba(229,199,142,0.16); }

/* Responsive Hero hell */
@media (max-width: 860px) {
  .hero-hell-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
  .hero-hell-copy { max-width: none !important; }
  .hero-hell-frame img { height: clamp(280px,44svh,420px) !important; }
  .hero-hell-badge { left: 12px !important; }
}

/* ============================================================
   CINEMATIC FILM STAGE (Desktop). Mobil + reduced-motion:
   body.film-static zeigt statische Keyframes statt Canvas.
   ============================================================ */
.film-stage { position: relative; height: 700svh; background: var(--paper); }
.film-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
#filmCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 62%, rgba(26,16,6,0.32) 100%); }

/* Overlays: echtes DOM, per JS ein-/ausgeblendet */
.film-overlay { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center;
  opacity: 0; visibility: hidden; will-change: opacity, transform; }
.film-overlay .wrap { width: 100%; }
.film-card { max-width: 34rem; background: rgba(250,246,238,0.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hairline-ink); border-radius: 18px;
  padding: clamp(26px, 3.4vw, 44px); box-shadow: var(--shadow-card); }
.film-card .eyebrow { color: var(--gold-dim); }
.film-card h1, .film-card h2 { color: var(--ink); }
.film-card h1 em, .film-card h2 em { color: #96733d; font-style: italic; }
.film-card p { color: var(--ink-soft); }
.film-card .lead { color: var(--ink-soft); margin-top: 1rem; }
.film-card .hero-ctas { justify-content: flex-start; margin-top: 1.6rem; }
.film-card.right { margin-left: auto; }
.film-card.center { margin: 0 auto; text-align: center; }
.film-card.center .hero-ctas { justify-content: center; }
.film-trust-line { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 1.5rem;
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.film-trust-line .ht-stars { color: var(--gold); }

/* Beat-Fortschritt (rechte Seite) */
.film-progress { position: absolute; right: clamp(18px, 3vw, 40px); top: 50%; transform: translateY(-50%);
  z-index: 4; display: flex; flex-direction: column; gap: 14px; }
.film-progress span { width: 5px; height: 32px; border-radius: 4px; background: rgba(56,42,20,0.18); overflow: hidden; position: relative; }
.film-progress span i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--gold); }

/* Goldener Faden */
#filmThread { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
#filmThread path { fill: none; stroke: var(--gold); stroke-width: 1.6; opacity: 0.75;
  filter: drop-shadow(0 1px 6px rgba(169,123,46,0.5)); }

/* Scroll-Hinweis im ersten Beat */
.film-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 4;
  font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(42,31,18,0.75);
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
.film-hint::after { content: ""; width: 1px; height: 34px; background: linear-gradient(180deg, var(--gold), transparent);
  animation: hintDrop 2s var(--ease) infinite; }
@keyframes hintDrop { 0% { transform: scaleY(0); transform-origin: top; } 60% { transform: scaleY(1); } 100% { opacity: 0; } }

/* ---------- Fallback: film-static (Mobil / reduced motion) ---------- */
body.film-static .film-stage { height: auto; }
body.film-static .film-pin { position: relative; height: auto; overflow: visible; }
body.film-static #filmCanvas, body.film-static .film-vignette,
body.film-static #filmThread, body.film-static .film-progress, body.film-static .film-hint { display: none; }
body.film-static .film-overlay { position: relative; inset: auto; opacity: 1 !important; visibility: visible !important;
  transform: none !important; padding: 64px 0; background-size: cover; background-position: center; }
body.film-static .film-overlay[data-bg] { background-image: var(--film-bg); }

@media (max-width: 1023px) {
  .film-stage { height: auto !important; }
  .film-pin { position: relative !important; height: auto !important; }
}

/* Kontrast-Fix: goldene em-Woerter auf hellem Grund */
body.hell .estimator h2 em, body.hell .results h2 em, body.hell .reviews h2 em,
body.hell .area h2 em, body.hell .contact h2 em { color: var(--gold-dim); }

/* ---------- Hero-Facelift: breiter, groesser, mehr Praesenz ---------- */
.hero-hell-grid { grid-template-columns: 1.12fr 0.88fr; }
.hero-hell-copy { max-width: 40rem; position: relative; }
.hero-hell h1 { font-size: clamp(2.4rem, 4.5vw, 3.7rem); max-width: none; line-height: 1.06; }
.hero-hell .lead { max-width: 48ch; font-size: clamp(1.05rem, 1.6vw, 1.18rem); }
.hero-hell .hero-ctas .btn { padding: 19px 38px; font-size: 0.88rem; }
.hero-hell-copy::before {
  content: ""; position: absolute; left: -120px; top: -70px; width: 300px; height: 300px;
  border: 1px solid rgba(169, 123, 46, 0.18); transform: rotate(45deg); pointer-events: none;
}
.hero-hell-copy::after {
  content: ""; position: absolute; left: -96px; top: -46px; width: 252px; height: 252px;
  border: 1px solid rgba(169, 123, 46, 0.1); transform: rotate(45deg); pointer-events: none;
}
@media (max-width: 860px) {
  .hero-hell-copy::before, .hero-hell-copy::after { display: none !important; }
  .hero-hell h1 { font-size: clamp(2rem, 8.6vw, 2.6rem) !important; }
}

/* ---------- Timeline-Fotos (Indigo-Buehne entlasten) ---------- */
.tl-photo { margin: -24px -28px 16px; overflow: hidden; }
.tl-photo img { width: 100%; height: 150px; object-fit: cover; display: block;
  filter: saturate(1.05); transition: transform 0.5s var(--ease); }
.tl-content:hover .tl-photo img { transform: scale(1.04); }
@media (max-width: 860px) {
  .tl-photo { margin: -18px -20px 12px !important; }
  .tl-photo img { height: 120px !important; }
}

/* Hero-Feinjustage: 2-zeilige Headline-Haelften */
.hero-hell-grid { grid-template-columns: 1.22fr 0.78fr; }
.hero-hell-copy { max-width: 44rem; }
.hero-hell h1 { font-size: clamp(2.2rem, 3.55vw, 2.95rem); line-height: 1.12; letter-spacing: 0.001em; }
.hero-hell-frame img { height: clamp(380px, 58svh, 600px); }

/* ============================================================
   HERO v3: Full-Bleed-Blend (Flyer-Prinzip)
   Bild fuellt die ganze Sektion, links verschwimmt es in Paper,
   Text liegt als Overlay. Volle Viewport-Hoehe.
   ============================================================ */
.hero-blend { position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: clamp(110px, 13svh, 150px) 0 clamp(48px, 7svh, 80px); overflow: hidden; }
.hero-hell-bg { position: absolute; inset: 0; z-index: 0; }
.hero-hell-bg img { position: absolute; right: 0; top: 0; height: 100%; width: 78%;
  object-fit: cover; object-position: 60% center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  transform: scale(1.04); animation: heroZoom 20s var(--ease) forwards; }
.hero-hell-bg::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--paper) 22%, rgba(246,241,231,0.72) 40%, rgba(246,241,231,0.12) 58%, rgba(246,241,231,0) 72%),
    linear-gradient(180deg, rgba(246,241,231,0.5) 0%, rgba(246,241,231,0) 22%); }
.hero-blend-inner { position: relative; z-index: 2; width: 100%; }
.hero-blend .hero-hell-copy { max-width: 37rem; }
.hero-blend h1 { font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1.08; }
.hero-blend .hero-hell-trust { text-shadow: 0 1px 8px rgba(246,241,231,0.9); }
.hero-blend .hero-hell-badge { position: absolute; right: clamp(20px, 5vw, 70px); bottom: clamp(24px, 5svh, 56px); left: auto; z-index: 2; }
@media (max-width: 860px) {
  .hero-blend { min-height: 92svh !important; }
  .hero-hell-bg img { width: 100% !important; -webkit-mask-image: none !important; mask-image: none !important; opacity: 0.34 !important; }
  .hero-hell-bg::after { background: linear-gradient(180deg, rgba(246,241,231,0.85), rgba(246,241,231,0.55)) !important; }
  .hero-blend .hero-hell-badge { display: none !important; }
}

/* Film: dunklerer Rand-Overlay, Karten leuchten mehr */
.film-vignette { background:
  linear-gradient(rgba(20,12,4,0.14), rgba(20,12,4,0.14)),
  radial-gradient(115% 85% at 50% 50%, transparent 52%, rgba(22,13,5,0.52) 100%); }

/* Trust-Band: Indigo-Bruecke direkt nach dem Film (statt weissem Leerraum) */
body.hell .trust-band { background:
  radial-gradient(120% 100% at 50% 0%, rgba(143,165,214,0.12), transparent 60%),
  linear-gradient(180deg, var(--indigo-deep), var(--indigo));
  border-top: 0; border-bottom: 0; }
body.hell .trust-band .trust-num, body.hell .trust-band .trust-word { color: var(--gold-bright); }
body.hell .trust-band .trust-label { color: rgba(240,234,217,0.72); }
body.hell .trust-band .trust-item::before { color: var(--gold); }
body.hell .trust-band .trust-strip { padding-top: 44px; padding-bottom: 44px; }

/* ---------- Hero v3.1: Lesbarkeit + Farbe ---------- */
/* Staerkerer Verlauf links, Text bleibt auf jedem Monitor lesbar */
.hero-hell-bg::after { background:
  linear-gradient(90deg, var(--paper) 30%, rgba(246,241,231,0.88) 46%, rgba(246,241,231,0.4) 62%, rgba(246,241,231,0) 78%),
  linear-gradient(180deg, rgba(246,241,231,0.55) 0%, rgba(246,241,231,0) 24%) !important; }
.hero-blend .hero-hell-copy { max-width: 34rem; }
.hero-blend h1 { text-shadow: 0 1px 0 rgba(246,241,231,0.6); }
.hero-blend .lead { max-width: 44ch; text-shadow: 0 1px 6px rgba(246,241,231,0.85); }
/* Frankfurt-Zeile in Terrakotta: der Farb-Akzent */
.hero-blend h1 em { color: var(--terra); font-style: italic; }

/* Indigo-Button (Primaer-CTA, passend zur Atelier-Buehne) */
.btn-indigo {
  background: linear-gradient(120deg, var(--indigo-deep), var(--indigo) 55%, #3f5686);
  color: #f2ead8; border-color: var(--indigo);
  box-shadow: 0 10px 26px rgba(36, 51, 79, 0.28);
}
.btn-indigo:hover { filter: brightness(1.12); transform: translateY(-1px); color: #fff; }

/* ============================================================
   HERO v4: dunkler Grund (wie Footer), Bild blendet rechts ein.
   Maximale Lesbarkeit, Flyer-Drama, Teppich-Rot als Kontrast.
   ============================================================ */
.hero-blend { background: #1d1409; }
.hero-hell-bg::after { background:
  linear-gradient(90deg, #1d1409 24%, rgba(29,20,9,0.86) 42%, rgba(29,20,9,0.38) 60%, rgba(29,20,9,0.06) 76%),
  linear-gradient(180deg, rgba(20,14,6,0.55) 0%, rgba(20,14,6,0) 22%),
  linear-gradient(0deg, rgba(20,14,6,0.35) 0%, rgba(20,14,6,0) 18%) !important; }
.hero-blend .eyebrow { color: var(--gold-bright); }
.hero-blend h1 { color: var(--ivory); text-shadow: 0 2px 14px rgba(15,9,3,0.55); }
.hero-blend h1 em { color: #c9a25e; }
.hero-blend .lead { color: var(--cream); text-shadow: 0 1px 10px rgba(15,9,3,0.6); }
.hero-blend .hero-hell-trust { color: var(--cream); text-shadow: 0 1px 8px rgba(15,9,3,0.6); }
.hero-blend .hero-hell-trust .ht-stars { color: var(--gold-bright); }
.hero-blend .hero-hell-trust .ht-dot { background: var(--gold); }
.hero-blend .hero-hell-copy::before { border-color: rgba(229,199,142,0.22); }
.hero-blend .hero-hell-copy::after { border-color: rgba(229,199,142,0.12); }
/* Sekundaer-Button auf Dunkel */
.hero-blend .btn-line { color: var(--ivory); border-color: rgba(244,233,214,0.35); background: rgba(255,253,248,0.07); }
.hero-blend .btn-line:hover { border-color: var(--gold-bright); color: var(--gold-bright); background: rgba(255,253,248,0.12); }

/* Terrakotta-Button: Teppich-Rot als CTA */
.btn-terra {
  background: linear-gradient(120deg, #7c5e1d, #96733d 55%, #c9a25e);
  color: #fff6ea; border-color: #96733d;
  box-shadow: 0 10px 26px rgba(120, 52, 22, 0.35);
}
.btn-terra:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; }

/* Header ueber dunklem Hero: oben dunkel-transparent, gescrollt hell */
body.hell .site-header { background: linear-gradient(180deg, rgba(18,11,4,0.6), transparent); }
body.hell .site-header:not(.scrolled) .brand-name { color: var(--ivory); }
body.hell .site-header:not(.scrolled) .brand-claim { color: var(--gold-bright); }
body.hell .site-header:not(.scrolled) .brand { color: var(--gold-bright); }
body.hell .site-header:not(.scrolled) .main-nav a { color: var(--cream); }
body.hell .site-header:not(.scrolled) .main-nav a:hover { color: var(--gold-bright); }
body.hell .site-header:not(.scrolled) .header-phone { color: var(--ivory); }

/* Mobil: dunkler Grund statt hell */
@media (max-width: 860px) {
  .hero-hell-bg img { opacity: 0.5 !important; }
  .hero-hell-bg::after { background: linear-gradient(180deg, rgba(24,16,7,0.88), rgba(24,16,7,0.68)) !important; }
}

/* ---------- Hero v4.1: Gold-CTA, Trust-Liste, Leistungs-Leiste ---------- */
/* BUGFIX: body.hell a ueberschrieb die Button-Textfarbe (Gold auf Gold) */
body.hell a.btn-gold { color: #1d1206; }
body.hell a.btn-gold:hover { color: #120a04; }
body.hell .site-header .btn-gold { font-weight: 500; }

/* Trust-Punkte als saubere Liste */
.hero-trust-list { list-style: none; margin: 1.8rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream);
  text-shadow: 0 1px 8px rgba(15,9,3,0.6); }
.hero-trust-list li { position: relative; padding-left: 22px; }
.hero-trust-list li::before { content: "✦"; position: absolute; left: 0; top: 1px; color: var(--gold); font-size: 0.65rem; }
.hero-trust-list .ht-stars { color: var(--gold-bright); letter-spacing: 0.15em; margin-right: 4px; }

/* Leistungs-Leiste am Hero-Boden: dunkles Braun, goldener Text */
.hero-bottombar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: linear-gradient(180deg, rgba(26,17,7,0.55), rgba(22,14,6,0.92));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(229,199,142,0.22); }
.hero-bottombar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 16px; padding-top: 16px; padding-bottom: 16px;
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-bright); }
.hero-bottombar-inner i { font-style: normal; color: var(--gold-dim); font-size: 0.6rem; }
@media (max-width: 860px) {
  .hero-bottombar { position: relative !important; }
  .hero-bottombar-inner { gap: 8px 12px !important; font-size: 0.64rem !important; }
}

/* ---------- Leiste: immer einzeilig, volle Breite ---------- */
.hero-bottombar-inner { max-width: none; width: 100%;
  flex-wrap: nowrap; white-space: nowrap; overflow: hidden;
  gap: clamp(8px, 1.3vw, 18px);
  font-size: clamp(0.56rem, 0.82vw, 0.74rem);
  padding-left: clamp(12px, 2vw, 32px); padding-right: clamp(12px, 2vw, 32px); }

/* ============================================================
   EXPERIMENT "hero-center": Content mittig, Gradient vertikal.
   Umschalten: Klasse hero-center am section-Tag entfernen
   = sofort zurueck zur linksbuendigen Version.
   ============================================================ */
.hero-blend.hero-center .hero-hell-bg img { width: 100%;
  -webkit-mask-image: none; mask-image: none; object-position: center 40%; }
.hero-blend.hero-center .hero-hell-bg::after { background:
  linear-gradient(180deg, rgba(24,16,7,0.92) 0%, rgba(24,16,7,0.6) 30%, rgba(24,16,7,0.34) 55%, rgba(20,13,5,0.78) 88%, rgba(20,13,5,0.95) 100%) !important; }
.hero-blend.hero-center .hero-blend-inner { text-align: center; }
.hero-blend.hero-center .hero-hell-copy { max-width: 44rem; margin: 0 auto; }
.hero-blend.hero-center .hero-hell-copy::before,
.hero-blend.hero-center .hero-hell-copy::after { display: none; }
.hero-blend.hero-center .lead { margin-left: auto; margin-right: auto; }
.hero-blend.hero-center .hero-ctas { justify-content: center; }
.hero-blend.hero-center .hero-trust-list { align-items: center; }
.hero-blend.hero-center .hero-trust-list li { padding-left: 0; }
.hero-blend.hero-center .hero-trust-list li::before { position: static; margin-right: 8px; }

/* hero-center v2: brauner Verlauf aus der Navbar + dunkle Tasche hinterm Text */
.hero-blend.hero-center .hero-hell-bg::after { background:
  radial-gradient(60% 55% at 50% 47%, rgba(22,14,6,0.66), rgba(22,14,6,0.22) 72%, rgba(22,14,6,0) 100%),
  linear-gradient(180deg, rgba(30,20,9,0.97) 0%, rgba(28,18,8,0.78) 20%, rgba(24,16,7,0.45) 46%, rgba(20,13,5,0.8) 84%, rgba(20,13,5,0.97) 100%) !important; }
.hero-blend.hero-center h1 { text-shadow: 0 2px 18px rgba(12,7,2,0.75), 0 1px 4px rgba(12,7,2,0.6); }
.hero-blend.hero-center .lead { color: #efe4cd; text-shadow: 0 1px 12px rgba(12,7,2,0.8); }
.hero-blend.hero-center .hero-trust-list { color: #e8dcc2; text-shadow: 0 1px 10px rgba(12,7,2,0.8); }

/* hero-center v3: Navbar dunkler (Gold sticht), Overlay oben heftiger */
body.hell .site-header { background: linear-gradient(180deg, rgba(14,9,3,0.92) 0%, rgba(14,9,3,0.55) 60%, transparent 100%); }
.hero-blend.hero-center .hero-hell-bg::after { background:
  radial-gradient(60% 55% at 50% 47%, rgba(22,14,6,0.6), rgba(22,14,6,0.2) 72%, rgba(22,14,6,0) 100%),
  linear-gradient(180deg, rgba(26,17,7,1) 0%, rgba(26,17,7,0.92) 12%, rgba(25,16,7,0.6) 32%, rgba(24,16,7,0.34) 52%, rgba(20,13,5,0.8) 84%, rgba(20,13,5,0.97) 100%) !important; }

/* hero-center v4: Muehelos lesbar. Braun laeuft weiter unter die Navbar,
   zwei gezielte Schatten-Taschen (Headline-Zone + Trust-Zone ueber dem Teppich),
   Bildmitte bleibt sichtbar. */
.hero-blend.hero-center .hero-hell-bg::after { background:
  radial-gradient(58% 32% at 50% 80%, rgba(20,13,5,0.68), rgba(20,13,5,0) 100%),
  radial-gradient(62% 50% at 50% 40%, rgba(22,14,6,0.64), rgba(22,14,6,0) 100%),
  linear-gradient(180deg, rgba(26,17,7,1) 0%, rgba(26,17,7,0.94) 16%, rgba(25,16,7,0.68) 36%, rgba(24,16,7,0.38) 56%, rgba(20,13,5,0.84) 84%, rgba(20,13,5,0.98) 100%) !important; }
.hero-blend.hero-center .lead { color: #f4ebd6; }
.hero-blend.hero-center .hero-trust-list { color: #f2e8d2; font-weight: 400;
  text-shadow: 0 1px 3px rgba(10,6,2,0.9), 0 2px 14px rgba(10,6,2,0.85); }
.hero-blend.hero-center .hero-trust-list .ht-stars { text-shadow: 0 1px 3px rgba(10,6,2,0.9); }

/* ---------- Film-Politur (Yuriy 08.07. spät) ---------- */
/* 1) Keine helle Luecke mehr zwischen Hero und Film: alles dunkel grundiert */
.film-stage { background: #1d1409; }
.film-pin { background: #1d1409; }

/* 2) Karten immer an derselben Stelle: mittig, Blick bleibt ruhig */
.film-overlay { justify-content: center !important; }
.film-overlay .film-card { margin: 0 auto !important; text-align: center; max-width: 37rem; }
.film-overlay .film-card .hero-ctas { justify-content: center; }
.film-overlay .film-trust-line { justify-content: center; }

/* 3) Kartentext muehelos lesbar: dichteres Glas, klarere Schrift */
.film-card { background: rgba(252,248,240,0.95); border-color: rgba(56,42,20,0.2);
  box-shadow: 0 6px 16px rgba(15,9,3,0.25), 0 28px 70px rgba(15,9,3,0.35); }
.film-card p { color: #4a3c26; font-size: 0.98rem; }
.film-card .eyebrow { color: #8a6a26; }

/* ============================================================
   KONTRAST-PASS helle Sektionen (Yuriy: Text ohne Anstrengung)
   Dunklere Tinte, Terrakotta statt blassem Gold fuer em-Woerter,
   kraeftigere Eyebrows. Gilt fuer alle hellen Bereiche.
   ============================================================ */
body.hell { --ink-soft: #4e3f28; }
/* Akzent-Woerter in Ueberschriften: Terrakotta wie im Hero */
body.hell .estimator h2 em, body.hell .results h2 em, body.hell .reviews h2 em,
body.hell .area h2 em, body.hell .contact h2 em, body.hell section.light h2 em,
body.hell .statement-text em { color: var(--terra); font-style: italic; }
/* Eyebrows: kraeftiges dunkles Gold statt blass */
body.hell .estimator .eyebrow, body.hell .results .eyebrow, body.hell .reviews .eyebrow,
body.hell .area .eyebrow, body.hell .contact .eyebrow, body.hell section.light .eyebrow { color: #7c5e1d; }
/* Flusstext und Nebentexte dunkler */
body.hell .section-lead, body.hell section.light .section-lead { color: #4e3f28; }
body.hell .est-hint, body.hell .est-opt-s, body.hell .est-chip small, body.hell .est-back { color: #5a4930; }
body.hell .results figcaption, body.hell .review-card figcaption { color: #5a4930; }
body.hell .faq-item p, body.hell section.light p { color: #4e3f28; }

/* ============================================================
   EXPERIMENT "hero-indigo": Overlay in Indigo-Nacht statt Braun.
   Gold + Blau = Atelier-Buehne. Klasse hero-indigo entfernen
   = sofort zurueck zum braunen Overlay.
   ============================================================ */
.hero-blend.hero-indigo { background: #16203a; }
.hero-blend.hero-indigo .hero-hell-bg::after { background:
  radial-gradient(58% 32% at 50% 80%, rgba(13,19,35,0.7), rgba(13,19,35,0) 100%),
  radial-gradient(62% 50% at 50% 40%, rgba(15,22,40,0.66), rgba(15,22,40,0) 100%),
  linear-gradient(180deg, rgba(19,27,48,1) 0%, rgba(19,27,48,0.93) 16%, rgba(20,29,52,0.66) 36%, rgba(22,31,56,0.36) 56%, rgba(14,20,38,0.84) 84%, rgba(13,19,35,0.98) 100%) !important; }
/* Navbar im Indigo-Ton, Gold sticht */
body.hell:has(.hero-indigo) .site-header { background: linear-gradient(180deg, rgba(11,16,30,0.94) 0%, rgba(11,16,30,0.55) 60%, transparent 100%); }
/* Leistungs-Leiste unten: Indigo-Nacht mit Gold */
.hero-blend.hero-indigo .hero-bottombar { background: linear-gradient(180deg, rgba(20,28,50,0.55), rgba(15,22,40,0.94)); border-top-color: rgba(229,199,142,0.26); }
/* Kursives Frankfurt: auf Indigo etwas heller/waermer */
.hero-blend.hero-indigo h1 em { color: #e08a5a; }

/* ============================================================
   PALETTE-SHIFT (Yuriy): Beige -> warmes Weiss, Boxen in Indigo.
   Der Indigo-Hero setzt den Ton, die helle Welt wird weiss-klar,
   Schmuck-Boxen (Estimator, Versprechen) in Indigo-Nacht.
   ============================================================ */
body.hell { --paper: #faf8f3; --paper-2: #f1eee6; }
/* Warmer Gold-Hauch statt kuehlem Navy-Schleier (Audit: Palette bleibt auf der warmen Achse) */
body.hell section.light { background: radial-gradient(140% 90% at 50% 0%, rgba(201,162,94,0.07), transparent 55%), var(--paper); }

/* Weisse Karten-Welt nachziehen */
body.hell .review-card, body.hell .est-card.is-white { background: #ffffff; }
body.hell .review-card { background: #fffefb; }
body.hell .tl-photo img { filter: saturate(1.08) contrast(1.02); }

/* ---------- Film v2: Autoplay-Kino statt Scroll-Marathon ---------- */
.film-stage { height: auto; }
.film-pin { position: relative; height: 100svh; }
/* Dunkle Balken weg: Vignette + Scroll-Hinweis deaktiviert */
.film-vignette { display: none; }
.film-hint { display: none; }

/* Balken-Ursache: Standard-Section-Padding an der Film-Sektion entfernen */
.film-stage { padding: 0 !important; }

/* Skip-Knopf im Autoplay-Film */
.film-skip { position: absolute; right: clamp(18px, 3vw, 40px); bottom: clamp(18px, 3svh, 34px); z-index: 5;
  background: rgba(20,14,6,0.55); color: rgba(244,233,214,0.85);
  border: 1px solid rgba(229,199,142,0.35); border-radius: 100px;
  padding: 10px 20px; font-family: var(--sans); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s var(--ease); }
.film-skip:hover { color: var(--gold-bright); border-color: var(--gold-bright); }
.film-skip.is-done { opacity: 0; pointer-events: none; }
body.film-static .film-skip { display: none; }

/* Hero-Video (Atelier-Loop aus der ersten Website) fuellt den Hero wie das Bild */
.hero-hell-bg video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%; }
.hero-blend.hero-center .hero-hell-bg img { animation: none; transform: none; }

/* ============================================================
   STICKY-STORY (ersetzt die Scroll-Film-Sektion)
   Links pinnt das Kino-Fenster, rechts scrollen die Schritte.
   ============================================================ */
.story { background: #1d1409; color: var(--ivory); padding: clamp(88px, 12svh, 140px) 0; }
.story-head { margin-bottom: clamp(2rem, 5svh, 3.4rem); }
.story-head .eyebrow { color: var(--gold-bright); }
.story-head h2 { color: var(--ivory); }
.story-head h2 em { color: #c9a25e; font-style: italic; }

.story-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 72px); align-items: start; }

.story-media { position: sticky; top: calc(50svh - min(24vw, 32svh)); }
.story-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px;
  border: 1px solid rgba(229, 199, 142, 0.28);
  box-shadow: 0 10px 30px rgba(8, 4, 1, 0.5), 0 40px 90px rgba(8, 4, 1, 0.45); }
.story-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.9s var(--ease); }
.story-video.is-active { opacity: 1; }
.story-dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.story-dots span { width: 34px; height: 3px; border-radius: 2px; background: rgba(244, 233, 214, 0.18); transition: background 0.4s; }
.story-dots span.is-active { background: var(--gold); }

.story-steps { display: flex; flex-direction: column; }
.story-step { min-height: 62svh; display: flex; flex-direction: column; justify-content: center;
  /* 0.55 statt 0.3: inaktive Karten bleiben als Vorschau lesbar (Audit: 0.3 = ~2.4:1 Kontrast) */
  opacity: 0.55; transition: opacity 0.5s var(--ease); }
.story-step.is-active { opacity: 1; }
.story-step .eyebrow { color: var(--gold-bright); margin-bottom: 0.8rem; }
.story-step h3 { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--ivory); line-height: 1.2; margin-bottom: 0.9rem; }
.story-step p { color: rgba(240, 234, 217, 0.78); max-width: 42ch; }
.story-step .btn, .story-links { margin-top: 1.4rem; }
.story-links { display: flex; flex-wrap: wrap; gap: 12px; }
.story-links .btn { margin-top: 0; }
.story-step .btn-line { color: var(--ivory); border-color: rgba(244, 233, 214, 0.3); background: rgba(255, 253, 248, 0.06); }
.story-step .btn-line:hover { border-color: var(--gold-bright); color: var(--gold-bright); }

@media (max-width: 1023px) {
  .story-grid { grid-template-columns: 1fr !important; }
  .story-media { position: relative !important; top: 0 !important; }
  .story-step { min-height: 0 !important; padding: 34px 0 !important; opacity: 1 !important; }
}

/* ============================================================
   LEISTUNGEN v2: drei stehende Karten (statt Rows wie Story),
   Mitte = dunkle Premium-Karte. KONTAKT: dunkler End-Akzent.
   ============================================================ */
.service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); align-items: stretch; }
.sc-card { position: relative; display: flex; flex-direction: column; background: #fffdf8;
  border: 1px solid var(--hairline-ink); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-card); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.sc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.sc-media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.sc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.sc-card:hover .sc-media img { transform: scale(1.05); }
.sc-body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 26px; }
.sc-body h3 { color: var(--ink); margin-bottom: 0.6rem; }
.sc-body p { font-size: 0.95rem; color: var(--ink-soft); }
.sc-body .sr-list { margin: 14px 0 18px; }
.sc-body .text-link { margin-top: auto; }
.sc-card .premium-tag { position: absolute; top: 14px; right: 14px; z-index: 2; }

/* Premium-Karte: dunkler Espresso-Akzent in der hellen Sektion */
.sc-card.is-premium { background: linear-gradient(170deg, #2a1c0e, #1d1409); border-color: rgba(229,199,142,0.32); }
.sc-card.is-premium .sc-body h3 { color: var(--ivory); }
.sc-card.is-premium .sc-body p { color: rgba(240,234,217,0.75); }
.sc-card.is-premium .sr-list li { color: var(--cream); border-bottom-color: rgba(229,199,142,0.16); }
.sc-card.is-premium .sr-list li::before { color: var(--gold); }
.sc-card.is-premium .text-link { color: var(--gold-bright); }

@media (max-width: 1023px) {
  .service-cards { grid-template-columns: 1fr !important; }
}

/* Kontakt: dunkler Schluss-Akzent vor dem Footer */
body.hell .contact { background:
  radial-gradient(120% 90% at 80% 10%, rgba(201,162,94,0.1), transparent 55%),
  linear-gradient(180deg, #241809, #1d1409 70%); }
body.hell .contact h2 { color: var(--ivory); }
body.hell .contact h2 em { color: var(--gold-bright); }
body.hell .contact .eyebrow { color: var(--gold-bright); }
body.hell .contact-copy p { color: rgba(240,234,217,0.75); }
body.hell .contact .detail-row { border-bottom-color: rgba(229,199,142,0.16); }
body.hell .contact .contact-details dl { border-top-color: rgba(229,199,142,0.16); }
body.hell .contact .detail-row dt { color: var(--gold); }
body.hell .contact .detail-row dd, body.hell .contact .detail-row dd a { color: var(--cream); border-bottom-color: rgba(229,199,142,0.2); }
body.hell .contact .detail-row dd a:hover { color: var(--gold-bright); }
body.hell .contact .btn-ghost { color: var(--ivory); border-color: rgba(244,233,214,0.3); }
body.hell .contact .btn-ghost:hover { border-color: var(--gold-bright); color: var(--gold-bright); }

/* ============================================================
   DESIGN-VEREDELUNG (Yuriy: "zeigen, dass ein Designer dran war")
   Estimator: Gold-Gradient-Rahmen, Web-Band, Ghost-Khatam.
   Leistungen: Ghost-Ziffern, gestaffelte Karten, Gold-Flourish.
   ============================================================ */
/* --- Estimator --- */
body.hell .estimator { position: relative; overflow: hidden; }
body.hell .estimator::before { content: ""; position: absolute; right: -170px; top: 50%; width: 480px; height: 480px;
  border: 1px solid rgba(169,123,46,0.16); transform: translateY(-50%) rotate(45deg); pointer-events: none; }
body.hell .estimator::after { content: ""; position: absolute; right: -130px; top: 50%; width: 400px; height: 400px;
  border: 1px solid rgba(169,123,46,0.09); transform: translateY(-50%) rotate(45deg); pointer-events: none; }
body.hell .est-card { position: relative; border-radius: 18px; border: 1px solid transparent; background: #fffdf8; }
/* Gold-Gradient-Hairline via Mask-Composite */
body.hell .est-card::before { content: ""; position: absolute; inset: -1px; border-radius: 19px; padding: 1.5px;
  background: linear-gradient(140deg, rgba(201,162,94,0.85), rgba(201,162,94,0.18) 38%, rgba(201,162,94,0.28) 62%, rgba(201,162,94,0.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
/* Gewebtes Khatam-Band am Kartenkopf */
body.hell .est-card::after { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 5px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 7px, rgba(201,162,94,0.25) 7px 14px, var(--gold-bright) 14px 21px, rgba(201,162,94,0.25) 21px 28px);
  border-radius: 0 0 4px 4px; opacity: 0.85; pointer-events: none; }
/* Options-Kacheln: Icons in Gold-Ringen, feiner Lift */
body.hell .est-ic { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(169,123,46,0.4); border-radius: 50%; margin-bottom: 10px; }
body.hell .est-opt { border-radius: 12px; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
body.hell .est-opt:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(43,27,10,0.12); }

/* --- Leistungen --- */
.sc-card { border-radius: 18px; }
.sc-num { position: absolute; top: 8px; left: 14px; z-index: 2;
  font-family: var(--display); font-size: clamp(3.4rem, 5vw, 4.6rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,253,248,0.85);
  text-shadow: 0 2px 18px rgba(15,9,3,0.35); pointer-events: none; }
.sc-card.is-premium .sc-num { -webkit-text-stroke-color: rgba(229,199,142,0.9); }
.services .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.services .section-head h2::after { content: ""; display: block; width: 76px; height: 2px; margin-top: 16px;
  background: linear-gradient(90deg, var(--gold), transparent); }
@media (min-width: 1024px) {
  .services .service-cards { padding-top: 20px; }
  .sc-card.is-premium { transform: translateY(-24px); }
  .sc-card.is-premium:hover { transform: translateY(-30px); }
}

/* Korrektur: Sektionskopf Leistungen wieder gestapelt, Flourish bleibt */
.services .section-head { display: block; }

/* ============================================================
   TERRAKOTTA-AKZENTE (Audit #8) + CTA-Note (#6)
   ============================================================ */
/* Erreichbarkeits-Signal unter den Hero-Buttons */
.cta-note { margin-top: 0.9rem; font-size: 0.78rem; letter-spacing: 0.08em;
  color: rgba(240,234,217,0.66); text-transform: uppercase; }

/* Bewertungs-Karten: grosses Terrakotta-Anfuehrungszeichen */
body.hell .review-card { position: relative; padding-top: 44px; }
body.hell .review-card::before { content: "\201E"; position: absolute; top: -14px; left: 20px;
  font-family: var(--display); font-size: 5rem; line-height: 1; color: var(--terra); opacity: 0.85; }
body.hell .review-stars { color: var(--gold); }

/* Vorher/Nachher: Griff in Terrakotta */
body.hell .ba-line { background: var(--terra); box-shadow: 0 0 18px rgba(150,115,61,0.55); }
body.hell .ba-knob { border-color: var(--terra); color: var(--terra); }

/* FAQ + Text-Links: Terrakotta-Hover */
body.hell .faq-item summary:hover { color: var(--terra); }
body.hell .faq-item summary::after { color: var(--terra); }
body.hell .text-link:hover { color: var(--terra); }
body.hell .sc-card .text-link:hover { color: var(--terra); }

/* Karte: Frankfurt-Puls in Terrakotta */
body.hell .map-pulse { stroke: var(--terra); }
body.hell .map-frankfurt-dot, body.hell circle.map-dot-ffm { fill: var(--terra); }

/* ============================================================
   RADIUS-SYSTEM (ein Eckradius fuers ganze Design)
   --r-card: Karten & Bild-Container | --r-sm: kleine Kacheln
   ============================================================ */
:root { --r-card: 18px; --r-sm: 12px; }

/* Karten & Medien-Container -> 18px */
.sc-card, .story-frame, .est-card,
body.hell .review-card, body.hell .pg-item,
.ba-slider, .hero-hell-frame, .cert-item img, .cert-seal-box { border-radius: var(--r-card); overflow: hidden; }
body.hell .est-card::before { border-radius: calc(var(--r-card) + 1px); }
.ba-slider { overflow: hidden; }

/* Kleine Kacheln & Chips -> 12px */
body.hell .est-opt, .est-chip, .hero-hell-badge { border-radius: var(--r-sm); }

/* Ausnahmen bleiben bewusst: Pillen (100px), Kreise (50%), Balken (2-4px) */

/* ============================================================
   DESIGN-RUNDE (Yuriy 09.07. abends)
   1) Ergebnisse: Radius + Glas-Captions statt schwarzer Balken
   2) Ornament-Divider fuer die helle Mittelstrecke
   3) Nabi-Versprechen: Gold-Hairline + Ring-Icons
   4) Bewertungen: Rating-Karte + Google-Link-Optik
   ============================================================ */

/* --- 1) Ergebnisse --- */
body.hell .rs-item { border-radius: var(--r-card); overflow: hidden; position: relative;
  border: 1px solid var(--hairline-ink); background: #fffdf8; box-shadow: var(--shadow-card); }
body.hell .rs-item figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px;
  background: rgba(250,246,238,0.92); color: var(--ink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hairline-ink); border-radius: var(--r-sm);
  padding: 10px 16px; font-size: 0.82rem; letter-spacing: 0.06em; }
body.hell .rs-item figcaption::before { content: "✦ "; color: var(--gold-dim); }
body.hell .results-note { color: var(--ink-soft); }
body.hell .ba-tag { background: rgba(250,246,238,0.92); color: var(--ink);
  border: 1px solid var(--hairline-ink); backdrop-filter: blur(6px); border-radius: 100px; }

/* --- 2) Ornament-Divider: Khatam-Diamant + Hairlines zwischen hellen Sektionen --- */
body.hell .services::before, body.hell .results::before, body.hell .promise::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(560px, 72vw); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(169,123,46,0.45) 20%, rgba(169,123,46,0.45) 80%, transparent); }
body.hell .services::after, body.hell .results::after, body.hell .promise::after {
  content: ""; position: absolute; top: -7px; left: 50%;
  width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
  background: var(--paper); border: 1px solid var(--gold-dim); }

/* --- 3) Nabi-Versprechen: Designer-Hauch --- */
body.hell .pg-item { position: relative; border-radius: var(--r-card); border: 1px solid transparent;
  background: #fffdf8; padding: 30px 26px; box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
body.hell .pg-item::before { content: ""; position: absolute; inset: -1px; border-radius: calc(var(--r-card) + 1px);
  padding: 1.5px; background: linear-gradient(150deg, rgba(201,162,94,0.7), rgba(201,162,94,0.12) 45%, rgba(201,162,94,0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
body.hell .pg-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
body.hell .pg-icon { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(169,123,46,0.45); border-radius: 50%; color: var(--gold-dim);
  margin-bottom: 14px; transition: all 0.35s var(--ease); }
body.hell .pg-item:hover .pg-icon { color: var(--terra); border-color: var(--terra); transform: rotate(-6deg) scale(1.06); }
body.hell .pg-item h3 { color: var(--ink); }
body.hell .pg-item p { color: var(--ink-soft); }

/* --- 4) Bewertungen: mehr Buehne --- */
body.hell .review-card { border: 1px solid transparent; }
body.hell .review-card::after { content: ""; position: absolute; inset: -1px; border-radius: calc(var(--r-card) + 1px);
  padding: 1px; background: linear-gradient(160deg, rgba(201,162,94,0.55), rgba(201,162,94,0.1) 50%, rgba(201,162,94,0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
body.hell .reviews .stars-row { display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 34px; border: 1px solid rgba(229,199,142,0.3); border-radius: var(--r-card);
  background: rgba(255,253,248,0.04); }
body.hell .reviews .stars { font-size: 1.5rem; }
.reviews-google-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 1.6rem;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright);
  border-bottom: 1px solid rgba(229,199,142,0.4); padding-bottom: 3px; }
.reviews-google-link:hover { color: #fff; border-color: #fff; }

/* ---------- Echte Handarbeit: Foto-Strecke aus der Werkstatt ---------- */
.craft-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.craft-item { margin: 0; position: relative; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--hairline-ink); background: #fffdf8; box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.craft-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.craft-item img { width: 100%; height: 300px; object-fit: cover; display: block;
  transition: transform 0.6s var(--ease); }
.craft-item:hover img { transform: scale(1.05); }
.craft-item figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px;
  background: rgba(250,246,238,0.92); color: var(--ink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hairline-ink); border-radius: var(--r-sm);
  padding: 8px 12px; font-size: 0.78rem; letter-spacing: 0.05em; }
.craft-item figcaption::before { content: "✦ "; color: var(--gold-dim); }
@media (min-width: 1024px) {
  .craft-item:nth-child(even) { transform: translateY(16px); }
  .craft-item:nth-child(even):hover { transform: translateY(11px); }
}
@media (max-width: 1023px) {
  .craft-strip { grid-template-columns: 1fr 1fr !important; }
}
body.hell .craft::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(560px, 72vw); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(169,123,46,0.45) 20%, rgba(169,123,46,0.45) 80%, transparent); }
body.hell .craft::after { content: ""; position: absolute; top: -7px; left: 50%;
  width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
  background: var(--paper); border: 1px solid var(--gold-dim); }

/* ============================================================
   UNTERSEITEN v2 (Konzept "Beweis + Abschluss")
   ============================================================ */
/* Sub-Hero: kompakt, dunkel, echtes Foto rechts eingeblendet */
.sub-hero { position: relative; min-height: 74svh; display: flex; align-items: center;
  padding: clamp(130px, 16svh, 180px) 0 clamp(56px, 8svh, 90px); overflow: hidden; background: #1d1409; }
.sub-hero-bg { position: absolute; inset: 0; }
.sub-hero-bg img { position: absolute; right: 0; top: 0; height: 100%; width: 64%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
.sub-hero-bg::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, #1d1409 30%, rgba(29,20,9,0.82) 48%, rgba(29,20,9,0.3) 66%, rgba(29,20,9,0.05) 82%),
  linear-gradient(180deg, rgba(20,14,6,0.65) 0%, rgba(20,14,6,0) 26%),
  linear-gradient(0deg, rgba(20,14,6,0.4) 0%, rgba(20,14,6,0) 20%); }
.sub-hero-inner { position: relative; z-index: 2; max-width: none; }
.sub-hero .breadcrumb { display: flex; gap: 10px; align-items: center; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240,234,217,0.6); margin-bottom: 1.2rem; }
.sub-hero .breadcrumb a { color: var(--gold-bright); }
.sub-hero .breadcrumb span { color: var(--gold-dim); font-size: 0.55rem; }
.sub-hero h1 { color: var(--ivory); font-size: clamp(2rem, 3.6vw, 3rem); max-width: 22ch;
  text-shadow: 0 2px 14px rgba(15,9,3,0.55); }
.sub-hero h1 em { color: #c9a25e; font-style: italic; }
.sub-hero .lead { color: var(--cream); max-width: 52ch; margin-top: 1.2rem; text-shadow: 0 1px 10px rgba(15,9,3,0.6); }
.sub-hero .hero-ctas { justify-content: flex-start; margin-top: 1.8rem; }
.sub-hero .hero-trust-list { margin-top: 1.6rem; }
.sub-hero .btn-line { color: var(--ivory); border-color: rgba(244,233,214,0.35); background: rgba(255,253,248,0.07); }
.sub-hero .btn-line:hover { border-color: var(--gold-bright); color: var(--gold-bright); }

/* Was Sie bekommen */
.benefit-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.benefit-list { list-style: none; margin: 0; padding: clamp(22px, 3vw, 34px);
  background: #fffdf8; border: 1px solid var(--hairline-ink); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.benefit-list li { position: relative; padding: 9px 0 9px 26px; color: var(--ink); font-size: 0.95rem;
  border-bottom: 1px solid var(--hairline-ink); }
.benefit-list li:last-child { border-bottom: 0; }
.benefit-list li::before { content: "✦"; position: absolute; left: 0; top: 12px; color: var(--gold-dim); font-size: 0.65rem; }

/* Leistungs-Rows mit echten Fotos */
.svc-rows { display: flex; flex-direction: column; gap: clamp(28px, 4svh, 44px); }
.svc-row { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(22px, 3.5vw, 48px); align-items: center; }
.svc-row.is-reversed .svc-media { order: 2; }
.svc-media { margin: 0; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--hairline-ink); box-shadow: var(--shadow-card); }
.svc-media img { width: 100%; height: clamp(220px, 26vw, 320px); object-fit: cover; display: block;
  transition: transform 0.6s var(--ease); }
.svc-row:hover .svc-media img { transform: scale(1.04); }
.svc-body h3 { color: var(--ink); font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: 0.6rem; }
.svc-body p { color: var(--ink-soft); font-size: 0.97rem; max-width: 52ch; }

/* Preis-Klartext */
.price-clear { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pc-item { background: #fffdf8; border: 1px solid var(--hairline-ink); border-radius: var(--r-sm);
  padding: 20px 18px; text-align: center; box-shadow: var(--shadow-card); }
.pc-item strong { display: block; font-family: var(--display); font-weight: 500; font-size: 1.05rem;
  color: var(--ink); margin-bottom: 4px; }
.pc-item span { font-size: 0.82rem; color: var(--ink-soft); }

/* Crosslinks im dunklen Abschluss */
.sub-crosslinks { display: flex; justify-content: center; gap: clamp(18px, 4vw, 44px); flex-wrap: wrap;
  margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid rgba(229,199,142,0.18); }
.sub-crosslinks a { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); }
.sub-crosslinks a span { color: var(--gold); margin-right: 6px; }
.sub-crosslinks a:hover { color: var(--gold-bright); }

@media (max-width: 900px) {
  .benefit-grid, .svc-row { grid-template-columns: 1fr !important; }
  .svc-row.is-reversed .svc-media { order: 0 !important; }
  .price-clear { grid-template-columns: 1fr !important; }
  .sub-hero-bg img { width: 100% !important; opacity: 0.4 !important;
    -webkit-mask-image: none !important; mask-image: none !important; }
}

/* Sub-Hero mittig (wie Startseite) + Bild-Variante der Story */
.sub-hero-center { min-height: 88svh; }
.sub-hero-center .sub-hero-bg img { width: 100%;
  -webkit-mask-image: none; mask-image: none; object-position: center 42%; }
.sub-hero-center .sub-hero-bg::after { background:
  radial-gradient(60% 55% at 50% 48%, rgba(22,14,6,0.66), rgba(22,14,6,0.2) 72%, rgba(22,14,6,0) 100%),
  linear-gradient(180deg, rgba(26,17,7,0.96) 0%, rgba(26,17,7,0.75) 18%, rgba(24,16,7,0.4) 46%, rgba(20,13,5,0.82) 86%, rgba(20,13,5,0.96) 100%) !important; }
.sub-hero-center .sub-hero-inner { text-align: center; }
.sub-hero-center .breadcrumb { justify-content: center; }
.sub-hero-center h1 { margin: 0 auto; }
.sub-hero-center .lead { margin-left: auto; margin-right: auto; }
.sub-hero-center .hero-ctas { justify-content: center; }
.sub-hero-center .hero-trust-list { align-items: center; }
.sub-hero-center .hero-trust-list li { padding-left: 0; }
.sub-hero-center .hero-trust-list li::before { position: static; margin-right: 8px; }
img.story-video { object-fit: cover; }

/* Sub-Hero: Textspalte etwas schmaler, bleibt in der dunklen Zone */
.sub-hero:not(.sub-hero-center) h1 { max-width: 19ch; }
.sub-hero:not(.sub-hero-center) .lead { max-width: 44ch; }

/* Sub-Hero: Text oben verankert statt vertikal mittig schwebend */
.sub-hero:not(.sub-hero-center) { align-items: flex-start; min-height: 78svh;
  padding-top: clamp(150px, 19svh, 200px); }

/* Explizit: Sub-Hero ohne center-Klasse ist IMMER linksbuendig */
.sub-hero:not(.sub-hero-center) .sub-hero-inner { text-align: left; }
.sub-hero:not(.sub-hero-center) .breadcrumb { justify-content: flex-start; }
.sub-hero:not(.sub-hero-center) h1, .sub-hero:not(.sub-hero-center) .lead { margin-left: 0; }
.sub-hero:not(.sub-hero-center) .hero-ctas { justify-content: flex-start; }
.sub-hero:not(.sub-hero-center) .hero-trust-list { align-items: flex-start; }

/* BUGFIX: .wrap hat margin:auto -> zentrierte als Flex-Item den ganzen
   Textblock. Volle Breite erzwingen, damit der Text links im Raster sitzt. */
.sub-hero-inner { width: 100%; max-width: var(--maxw); }

/* Sub-Hero: Content bekommt mehr Raum (Yuriy: stand zu eng) */
/* 30ch statt 26ch: der feste <br> teilt die Headline schon in zwei Zeilen, aber
   die laengste Haelfte ("Restauration nach persischer Tradition.") braucht 27.8ch
   und brach deshalb ein zweites Mal um, also drei Zeilen statt zwei. */
.sub-hero:not(.sub-hero-center) h1 { max-width: 30ch; font-size: clamp(2.1rem, 3.9vw, 3.2rem); }
.sub-hero:not(.sub-hero-center) .lead { max-width: 56ch; }
/* Verlauf minimal breiter ziehen, damit der breitere Text dunkel unterlegt bleibt */
.sub-hero:not(.sub-hero-center) .sub-hero-bg::after { background:
  linear-gradient(90deg, #1d1409 34%, rgba(29,20,9,0.85) 54%, rgba(29,20,9,0.32) 70%, rgba(29,20,9,0.05) 84%),
  linear-gradient(180deg, rgba(20,14,6,0.65) 0%, rgba(20,14,6,0) 26%),
  linear-gradient(0deg, rgba(20,14,6,0.4) 0%, rgba(20,14,6,0) 20%) !important; }

/* Sub-Hero: mehr Hoehe (Yuriy: 80-90svh) */
.sub-hero:not(.sub-hero-center) { min-height: 88svh; }

/* Sub-Hero: volle Viewport-Hoehe, kein heller Rand unten */
.sub-hero:not(.sub-hero-center) { min-height: 100svh; }

/* Dunkler Seiten-Abschluss: Subheadline lesbar, Telefon-Button im Dark-Stil */
body.hell .sub-cta .section-lead { color: rgba(240,234,217,0.82); }
body.hell .sub-cta .btn-line { color: var(--ivory); border-color: rgba(244,233,214,0.35); background: rgba(255,253,248,0.07); }
body.hell .sub-cta .btn-line:hover { color: var(--gold-bright); border-color: var(--gold-bright); background: rgba(255,253,248,0.12); }

/* Startseiten-Hero: mehr Luft und Breite fuer den mittigen Content */
.hero-blend.hero-center .hero-hell-copy { max-width: 54rem; }
.hero-blend.hero-center h1 { font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1.1; }
.hero-blend.hero-center .lead { max-width: 58ch; font-size: clamp(1.08rem, 1.7vw, 1.28rem); margin-top: 1.8rem; }
.hero-blend.hero-center .hero-ctas { margin-top: 2.6rem; gap: 18px; }
.hero-blend.hero-center .cta-note { margin-top: 1.2rem; }
.hero-blend.hero-center .hero-trust-list { margin-top: 2.4rem; gap: 12px; }

/* Leistungs-Karten: komplette Karte klickbar (Stretched Link) + Link kraeftiger */
.sc-card { cursor: pointer; }
.sc-card .text-link { position: static; font-weight: 500; color: var(--gold-dim); }
.sc-card .text-link::before { content: ""; position: absolute; inset: 0; z-index: 3; }
.sc-card .text-link::after { content: " →"; transition: transform 0.3s var(--ease); display: inline-block; }
.sc-card:hover .text-link { color: var(--terra); }
.sc-card:hover .text-link::after { transform: translateX(4px); }
.sc-card.is-premium .text-link { color: var(--gold-bright); }
.sc-card.is-premium:hover .text-link { color: #fff; }

/* Ausgewogene Zeilenumbrueche in Hero-Leads (kein einsames "am selben Tag.") */
.hero-blend .lead, .sub-hero .lead, .section-lead { text-wrap: pretty; }
.hero-blend.hero-center .lead { text-wrap: balance; }

/* Echtes Nabi-Emblem in der Navbar */
.brand-mark { width: 44px; height: auto; }

/* ============================================================
   TIEFEN-PAKET (Yuriy 10.07.)
   1) Craft-Strip ragt in die dunkle Story (Vorne/Hinten-Ebenen)
   2) Ornament-Ebenen: nah = gross+unscharf+schnell, fern = klein+langsam
   3) Maus-Tilt + Licht-Reflex auf Karten (Vars via depth.js)
   ============================================================ */

/* --- 1) Ueberlappung: Werkstatt-Fotos schweben in die Story hinein --- */
body.hell .craft { padding-bottom: 0; z-index: 5; }
body.hell .craft .craft-strip { position: relative; z-index: 5; margin-bottom: -76px; }
body.hell .craft .craft-item { box-shadow: 0 6px 14px rgba(15,9,3,0.18), 0 34px 70px rgba(15,9,3,0.38); }
.story { padding-top: clamp(140px, 18svh, 210px); }

/* Premium-Karte: Zwei-Ebenen-Schatten fuer mehr Volumen */
.sc-card.is-premium { box-shadow: 0 8px 18px rgba(15,9,3,0.22), 0 42px 90px rgba(15,9,3,0.34); }

/* --- 2) Ornament-Tiefenebenen --- */
.f-star.is-near { filter: blur(2.5px); opacity: 0.55; z-index: 2; }
.f-star.is-far { opacity: 0.7; }
.f-star.is-near svg { animation-duration: 15s; }

/* --- 3) Tilt + Glare (Variablen setzt depth.js) --- */
@media (hover: hover) and (min-width: 1024px) {
  .service-cards, .promise-grid-4, .review-grid, .estimator .wrap.narrow { perspective: 1200px; }
  .sc-card, body.hell .pg-item, body.hell .est-card, body.hell .review-card {
    transform: translateY(calc(var(--stagger, 0px) + var(--lift, 0px)))
      rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.25s ease-out, box-shadow 0.4s var(--ease);
    will-change: transform;
  }
  .sc-card:hover { --lift: -6px; }
  body.hell .pg-item:hover { --lift: -5px; }
  .sc-card.is-premium { --stagger: -24px; }
  .sc-card.is-premium:hover { --lift: -6px; }
  /* Licht-Reflex folgt der Maus */
  .sc-card::after, body.hell .pg-item .pg-glare {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,252,240,0.1), transparent 60%);
    opacity: 0; transition: opacity 0.35s var(--ease); border-radius: inherit;
  }
  .sc-card:hover::after { opacity: 1; }
}

/* ============================================================
   TIEFEN-PAKET v2: Ueberlappung ZURUECKGEBAUT, dafuer grosse
   bewegte Hintergrund-Ebenen + Goldstaub (Canvas via depth.js)
   ============================================================ */
/* Rueckbau Ueberlappung */
body.hell .craft { padding-bottom: clamp(88px, 12svh, 150px); }
body.hell .craft .craft-strip { margin-bottom: 0; }
.story { padding-top: clamp(88px, 12svh, 140px); overflow: hidden; }

/* Grosse Khatam-Hintergrund-Ebenen (Rotation im ::before, damit JS das
   Transform des Spans frei fuer Parallax nutzen kann) */
.bg-ornament { position: absolute; aspect-ratio: 1; pointer-events: none; z-index: 0; }
.bg-ornament::before { content: ""; position: absolute; inset: 0;
  border: 1.5px solid rgba(229, 199, 142, 0.14); transform: rotate(45deg); }
.bg-ornament::after { content: ""; position: absolute; inset: 12%;
  border: 1px solid rgba(229, 199, 142, 0.08); transform: rotate(45deg); }
.bg-ornament.is-thin::before { border-color: rgba(229, 199, 142, 0.09); }
.bg-ornament.is-thin::after { display: none; }
.story > .wrap, .contact > .wrap { position: relative; z-index: 2; }
.hero-blend .bg-ornament { z-index: 1; }

/* Goldstaub-Canvas */
.dust-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* BUGFIX: overflow:hidden killt position:sticky im Story-Fenster.
   overflow:clip beschneidet die Hintergrund-Ebenen genauso, ohne Sticky zu brechen. */
.story { overflow: clip; }

/* Sub-Hero: Content vertikal mittig statt oben angeklebt (grosse Monitore),
   bleibt linksbuendig. Padding ausbalanciert, damit die optische Mitte stimmt. */
.sub-hero:not(.sub-hero-center) { align-items: center;
  padding-top: clamp(120px, 13svh, 160px); padding-bottom: clamp(80px, 11svh, 140px); }

/* ============================================================
   ANIMATIONS-PAKET Unterseiten (10.07.)
   ============================================================ */
/* 1) Sub-Hero: langsamer Ken-Burns-Drift auf dem Hintergrundbild */
@keyframes subheroDrift {
  from { transform: scale(1.03); }
  to   { transform: scale(1.1) translateX(-12px); }
}
.sub-hero-bg img { transform-origin: 68% 45%; animation: subheroDrift 24s ease-in-out infinite alternate; will-change: transform; }

/* 2) Story-Stills: aktives Bild zoomt langsam (nur IMG, Videos unberuehrt) */
@keyframes storyStillZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
img.story-video.is-active { animation: storyStillZoom 9s ease-out forwards; }

/* 3) Leistungs-Rows: sanfter Bild-Zoom beim Hover */
.svc-media { overflow: hidden; }
.svc-media img { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); display: block; }
.svc-row:hover .svc-media img { transform: scale(1.045); }

/* 4) Benefit-Liste: gestaffeltes Einblenden sobald sichtbar */
.benefit-list.reveal li { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.benefit-list.reveal.in li { opacity: 1; transform: none; }
.benefit-list.reveal.in li:nth-child(1) { transition-delay: 0.05s; }
.benefit-list.reveal.in li:nth-child(2) { transition-delay: 0.13s; }
.benefit-list.reveal.in li:nth-child(3) { transition-delay: 0.21s; }
.benefit-list.reveal.in li:nth-child(4) { transition-delay: 0.29s; }
.benefit-list.reveal.in li:nth-child(5) { transition-delay: 0.37s; }
.benefit-list.reveal.in li:nth-child(6) { transition-delay: 0.45s; }

/* 5) Chips: gestaffeltes Aufpoppen */
.chip-grid.reveal .chip { opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.45s ease, transform 0.45s ease; }
.chip-grid.reveal.in .chip { opacity: 1; transform: none; }
.chip-grid.reveal.in .chip:nth-child(1) { transition-delay: 0.04s; }
.chip-grid.reveal.in .chip:nth-child(2) { transition-delay: 0.1s; }
.chip-grid.reveal.in .chip:nth-child(3) { transition-delay: 0.16s; }
.chip-grid.reveal.in .chip:nth-child(4) { transition-delay: 0.22s; }
.chip-grid.reveal.in .chip:nth-child(5) { transition-delay: 0.28s; }
.chip-grid.reveal.in .chip:nth-child(6) { transition-delay: 0.34s; }
.chip-grid.reveal.in .chip:nth-child(7) { transition-delay: 0.4s; }
.chip-grid.reveal.in .chip:nth-child(8) { transition-delay: 0.46s; }
.chip-grid.reveal.in .chip:nth-child(9) { transition-delay: 0.52s; }

@media (prefers-reduced-motion: reduce) {
  .sub-hero-bg img, img.story-video.is-active { animation: none !important; }
  .svc-media img, .benefit-list.reveal li, .chip-grid.reveal .chip { transition: none !important; }
}

/* FIX: Anfuehrungszeichen lag auf den Sternen. Mehr Kopfraum in der Karte,
   Glyphe weiter hoch (die Tinte von U+201E sitzt unten in der Glyph-Box). */
body.hell .review-card { padding-top: 62px; }
body.hell .review-card::before { top: -34px; font-size: 4.6rem; }

/* Huebsche Umbrueche: keine einzelnen Woerter in der letzten Zeile von Flusstexten */
.benefit-text p, .svc-body p, .story-step p, .faq-item p, .pg-item p { text-wrap: pretty; }

/* ============================================================
   AUDIT-FIXES (11.07.)
   ============================================================ */
/* Klickbare Hero-Sterne */
.hero-trust-list .trust-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.25s ease, color 0.25s ease; }
.hero-trust-list .trust-link:hover { color: var(--gold-bright); border-bottom-color: var(--gold-dim); }

/* Beweis-Caption auf Leistungs-Bildern */
.svc-media { position: relative; }
.svc-media figcaption { position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 6px 12px; border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--ivory); background: rgba(24,16,8,0.62); border: 1px solid rgba(229,199,142,0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Desktop-FAB: Foto senden, erscheint nach dem Hero */
.fab-wa { position: fixed; right: 26px; bottom: 26px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px;
  border-radius: 999px; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: #2a1c0d; text-decoration: none;
  background: linear-gradient(135deg, #e5c78e, #c9a25e); box-shadow: 0 10px 30px rgba(24,14,4,0.35);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.25s ease; }
.fab-wa.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab-wa:hover { box-shadow: 0 14px 36px rgba(24,14,4,0.45); transform: translateY(-2px); }
.fab-wa svg { flex: none; }
@media (max-width: 899px) { .fab-wa { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .fab-wa { transition: opacity 0.2s ease; transform: none; } }

/* ============================================================
   LESBARKEITS-PASS (14.07., Nazira-Feedback: aeltere Kundschaft)
   Grundschrift von 16 auf 17.5px, kleine Flusstexte gezielt angehoben.
   ============================================================ */
html { font-size: 109.375%; }
.benefit-list li { font-size: 1rem; }
.faq-item summary { font-size: 1.05rem; }
.faq-item p { font-size: 1rem; }
.results-note, .cta-note { font-size: 0.92rem; }
.hero-trust-list li { font-size: 0.95rem; }
.sr-list li { font-size: 0.95rem; }
.footer-line, .footer-credit { font-size: 0.88rem; }
.review-card figcaption { font-size: 0.88rem; }

/* ============================================================
   TELEFONNUMMER PROMINENT (14.07., Nazira-Wunsch)
   ============================================================ */
.header-phone.is-prominent { display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(229,199,142,0.55);
  color: var(--gold-bright) !important; font-weight: 600; font-size: 0.98rem; letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums; background: rgba(229,199,142,0.08);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.header-phone.is-prominent:hover { background: rgba(229,199,142,0.16); border-color: var(--gold-bright);
  box-shadow: 0 0 22px rgba(229,199,142,0.25); }
.header-phone.is-prominent svg { flex: none; }
.btn-tel { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; white-space: nowrap; }
.btn-tel svg { flex: none; margin-right: 2px; vertical-align: -2px; }

/* ============================================================
   WHATSAPP ERKENNBAR (14.07., Nazira-Wunsch): echtes WA-Gruen
   + Icon auf allen WhatsApp-Buttons, bewusst ausserhalb der
   Gold-Palette, damit man den Kanal sofort erkennt.
   ============================================================ */
.btn-wa, .mobile-cta a.is-wa {
  /* Kalibriertes, dunkleres WA-Gruen (Audit): Kanal bleibt erkennbar,
     bricht die Espresso/Gold-Palette aber nicht mehr. Roh-Gruen nur am FAB. */
  background: #1da851 !important; border-color: #1da851 !important;
  color: #ffffff !important; text-shadow: none !important; }
.btn-wa:hover, .mobile-cta a.is-wa:hover {
  background: #128c7e !important; border-color: #128c7e !important; color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(18,140,126,0.35); }
/* Vorhandene Inline-Icons ausblenden, ein einheitliches Icon per Mask */
.btn-wa svg { display: none; }
.btn-wa::before, .mobile-cta a.is-wa::before {
  content: ""; display: inline-block; flex: none; width: 17px; height: 17px;
  margin-right: 9px; vertical-align: -3px; background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15s-.77.97-.94 1.17-.35.22-.64.07a8.1 8.1 0 0 1-2.39-1.47 8.96 8.96 0 0 1-1.65-2.06c-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.87 1.21 3.07c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.7.62.71.23 1.36.2 1.87.12.57-.08 1.76-.72 2-1.41.25-.7.25-1.29.18-1.42-.08-.12-.27-.2-.57-.34m-5.42 7.4h-.01a9.87 9.87 0 0 1-5.03-1.37l-.36-.22-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26A9.9 9.9 0 0 1 12.05 2a9.83 9.83 0 0 1 9.88 9.9 9.9 9.9 0 0 1-9.88 9.88M20.5 3.5A11.8 11.8 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.9c0 2.1.55 4.14 1.59 5.94L0 24l6.3-1.65a11.88 11.88 0 0 0 5.69 1.44h.01c6.55 0 11.89-5.33 11.89-11.89 0-3.18-1.24-6.16-3.39-8.4z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15s-.77.97-.94 1.17-.35.22-.64.07a8.1 8.1 0 0 1-2.39-1.47 8.96 8.96 0 0 1-1.65-2.06c-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.87 1.21 3.07c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.7.62.71.23 1.36.2 1.87.12.57-.08 1.76-.72 2-1.41.25-.7.25-1.29.18-1.42-.08-.12-.27-.2-.57-.34m-5.42 7.4h-.01a9.87 9.87 0 0 1-5.03-1.37l-.36-.22-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26A9.9 9.9 0 0 1 12.05 2a9.83 9.83 0 0 1 9.88 9.9 9.9 9.9 0 0 1-9.88 9.88M20.5 3.5A11.8 11.8 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.9c0 2.1.55 4.14 1.59 5.94L0 24l6.3-1.65a11.88 11.88 0 0 0 5.69 1.44h.01c6.55 0 11.89-5.33 11.89-11.89 0-3.18-1.24-6.16-3.39-8.4z"/></svg>') center / contain no-repeat; }
/* FAB ebenfalls WhatsApp-gruen (behaelt sein Inline-Icon) */
.fab-wa { background: #25d366 !important; color: #ffffff !important; }
.fab-wa:hover { background: #1da851 !important; box-shadow: 0 14px 36px rgba(29,168,81,0.4); }

/* Chips-Ueberschrift + Stagger-Delays fuer bis zu 15 Chips */
.chip-head { font-size: 0.95rem; color: var(--ink-soft); margin-top: 2.4rem; letter-spacing: 0.02em; }
.chip-grid.reveal.in .chip:nth-child(10) { transition-delay: 0.58s; }
.chip-grid.reveal.in .chip:nth-child(11) { transition-delay: 0.64s; }
.chip-grid.reveal.in .chip:nth-child(12) { transition-delay: 0.7s; }
.chip-grid.reveal.in .chip:nth-child(13) { transition-delay: 0.76s; }
.chip-grid.reveal.in .chip:nth-child(14) { transition-delay: 0.82s; }
.chip-grid.reveal.in .chip:nth-child(15) { transition-delay: 0.88s; }

/* ============================================================
   STARTSEITEN-FEINSCHLIFF (14.07., Yuriys Detail-Runde)
   ============================================================ */
/* Hero: Google-Badge im Hesslich-Stil (Glas-Pill, echtes G) */
.hero-google-badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 1.5rem;
  padding: 10px 20px; border-radius: 999px; text-decoration: none;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease; }
.hero-google-badge:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.12); transform: translateY(-1px); }
.hero-google-badge .hgb-stars { color: var(--gold-bright); letter-spacing: 0.14em; font-size: 0.95rem; }
.hero-google-badge .hgb-text { color: var(--ivory); font-size: 0.95rem; }
.hero-google-badge .hgb-text strong { font-weight: 600; }
.hero-google-badge svg { flex: none; }

/* Navbar: WhatsApp-Button als Pill wie die Telefonnummer */
.site-header .btn-small { border-radius: 999px !important; padding: 9px 18px !important; }

/* Estimator: Schrift deutlicher (aeltere Zielgruppe) */
.est-q { font-size: 1.3rem !important; }
.est-opt-t { font-size: 1.05rem !important; color: var(--ink) !important; }
.est-opt-s { font-size: 0.9rem !important; }
.est-dot { font-size: 0.88rem !important; }
.est-card label, .est-card input, .est-card select { font-size: 1rem !important; }

/* Leistungs-Karten: Texte klarer */
.sc-body p { font-size: 1.03rem; color: var(--ink); }
.sr-list li { font-size: 1rem; color: var(--ink); }
.sc-body .text-link { font-size: 0.98rem; }

/* Echte Handarbeit: Captions + Lead deutlicher */
.craft-item figcaption { font-size: 0.98rem; color: var(--ink); }
.craft .section-lead { font-size: 1.08rem; color: var(--ink); }

/* Nabi-Versprechen: lesbarer + Designer-Details */
.promise-intro { text-wrap: balance; }
.pg-item p { font-size: 1rem; color: var(--ink); }
.pg-item h3 { font-size: 1.15rem; }
.pg-item { position: relative; overflow: hidden; }
.pg-item::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  padding: 1px; background: linear-gradient(135deg, rgba(201,162,94,0.55), rgba(201,162,94,0.08) 40%, rgba(201,162,94,0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
@keyframes pgIconBreathe { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201,162,94,0.35); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(201,162,94,0); } }
.pg-icon { animation: pgIconBreathe 4.5s ease-in-out infinite; border-radius: 999px; }
.pg-item:nth-child(2) .pg-icon { animation-delay: 1.1s; }
.pg-item:nth-child(3) .pg-icon { animation-delay: 2.2s; }
.pg-item:nth-child(4) .pg-icon { animation-delay: 3.3s; }
.pg-item::before { content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%; z-index: 1;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg); transition: left 0.7s ease; pointer-events: none; }
.pg-item:hover::before { left: 130%; }

/* Bewertungs-Siegel in Nabi-Optik.
   Es war vorher eine weisse Pille in Googles UI-Farben (Gelb #FBBC05,
   Grau #5f6368) und sah damit aus wie ein offizielles Google-Element.
   Google erlaubt Logos und Markenfarben nur nach eigenen Brand-Richtlinien,
   deshalb steht hier jetzt die eigene Formensprache. Die Nennung der Quelle
   im Text bleibt, sie ist eine wahre Angabe (Yuriy 25.07.2026). */
.google-rating-badge { display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 22px; border-radius: 999px; background: var(--paper); text-decoration: none;
  border: 1px solid rgba(150, 115, 61, 0.3);
  box-shadow: 0 8px 28px rgba(10,6,2,0.16); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.google-rating-badge:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(10,6,2,0.24); }
.google-rating-badge .grb-score { color: var(--ink); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.google-rating-badge .grb-stars { color: var(--gold-dim); font-size: 1.05rem; letter-spacing: 0.1em; }
.google-rating-badge .grb-label,
.google-rating-badge .grb-count { color: var(--ink-soft); font-size: 0.95rem; }
.reviews-head .google-rating-badge { margin-top: 0.4rem; }
.review-stars { color: var(--gold-dim) !important; font-size: 1.1rem !important; letter-spacing: 0.18em !important; }
.rev-avatar { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; margin-right: 10px;
  color: #ffffff; font-weight: 600; font-size: 0.95rem; flex: none; vertical-align: middle; }
.review-card figcaption { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }

/* ============================================================
   FARB-RUNDE Startseite (14.07. spaet)
   ============================================================ */
/* Google-Wortmarke in Originalfarben */
.gword b { font-weight: inherit; font-style: normal; }
.eyebrow .gword b { text-transform: none; }

/* Estimator: dezente Farbakzente pro Leistung + Schritt-Punkte */
.est-opt[data-value="reinigung"] .est-ic { color: #3e6fb0; background: rgba(62,111,176,0.1); border-color: rgba(62,111,176,0.35); }
.est-opt[data-value="reparatur"] .est-ic { color: var(--terra); background: rgba(150,115,61,0.1); border-color: rgba(150,115,61,0.35); }
.est-opt[data-value="boden"] .est-ic { color: #4f8f5b; background: rgba(79,143,91,0.12); border-color: rgba(79,143,91,0.35); }
.est-opt:hover[data-value="reinigung"] { border-color: #3e6fb0; }
.est-opt:hover[data-value="reparatur"] { border-color: var(--terra); }
.est-opt:hover[data-value="boden"] { border-color: #4f8f5b; }
.est-ic { border-radius: 999px; padding: 10px; border: 1px solid transparent; transition: transform 0.3s ease; }
.est-opt:hover .est-ic { transform: scale(1.08); }
/* Schrittanzeige in Gold statt Terrakotta, damit sie zur goldenen Ueberschrift
   direkt darueber passt. Terrakotta bleibt fuer die Leistungs-Icons. */
.est-dot.is-current { color: var(--gold-dim) !important; }
.est-dot.is-current span { background: var(--gold-dim) !important; border-color: var(--gold-dim) !important; color: #fff !important; box-shadow: 0 0 0 5px rgba(150,115,61,0.16); }

/* Nabi-Versprechen: Sweep-Strich raus, stattdessen Eck-Ornament in Kartenfarbe */
.pg-item::before { content: "\2726"; position: absolute; top: 12px; right: 14px; left: auto; width: auto; height: auto;
  background: none; transform: none; transition: none; font-size: 0.9rem; opacity: 0.55; z-index: 1;
  animation: pgStarTwinkle 3.8s ease-in-out infinite; }
.pg-item:hover::before { left: auto; opacity: 0.9; }
@keyframes pgStarTwinkle { 0%, 100% { opacity: 0.3; transform: rotate(0deg) scale(1); } 50% { opacity: 0.8; transform: rotate(22deg) scale(1.15); } }
/* Farbwelt pro Karte: Icon-Ring + Eckstern freundlich getont */
.promise-grid-4 .pg-item:nth-child(1) { color: inherit; }
.promise-grid-4 .pg-item:nth-child(1) .pg-icon { color: var(--gold-bright); background: rgba(201,162,94,0.14); }
.promise-grid-4 .pg-item:nth-child(1)::before { color: var(--gold); }
.promise-grid-4 .pg-item:nth-child(2) .pg-icon { color: #4f8f5b; background: rgba(79,143,91,0.14); }
.promise-grid-4 .pg-item:nth-child(2)::before { color: #4f8f5b; }
.promise-grid-4 .pg-item:nth-child(3) .pg-icon { color: #5a6f9e; background: rgba(90,111,158,0.14); }
.promise-grid-4 .pg-item:nth-child(3)::before { color: #5a6f9e; }
.promise-grid-4 .pg-item:nth-child(4) .pg-icon { color: var(--terra); background: rgba(150,115,61,0.12); }
.promise-grid-4 .pg-item:nth-child(4)::before { color: var(--terra); }
.pg-icon { padding: 10px; }
@keyframes pgIconBreathe { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201,162,94,0.28); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(201,162,94,0); } }

/* Einzugsgebiet: leserlicher + waermer */
.area .section-lead { color: rgba(240,234,217,0.94); font-size: 1.08rem; }
.area-facts li { font-size: 1.03rem; color: rgba(240,234,217,0.92); }
.area-facts li span { color: var(--terra); }
.area-map figcaption { font-size: 0.95rem; color: rgba(240,234,217,0.85); }
.legend-national { color: var(--terra); font-weight: 600; }
.map-center-label { fill: var(--gold-bright); }
.map-pulse { fill: rgba(150,115,61,0.35); }
.map-dot { fill: var(--terra); }
.area-map .map-center .map-dot { fill: var(--terra); }
.area-map .map-center .map-pulse { fill: rgba(150,115,61,0.4); }

/* ============================================================
   UNTERSEITEN-RUNDE (14.07. nachts): Badge, Benefit-Box, Stapel
   ============================================================ */
/* Google-Badge im Sub-Hero, Trust-Liste (3 Punkte) darunter */
.sub-hero .hero-google-badge { margin-top: 1.5rem; }
.sub-hero .hero-trust-list { margin-top: 1.1rem; }
.hero-trust-list.d5 { transition-delay: 0.5s; }

/* Benefit als grosse Box: Headline > Text > Stichpunkte > Teppicharten */
.benefit-box { position: relative; background: #fffdf8; border-radius: var(--r-card);
  padding: clamp(28px, 4.5vw, 56px); box-shadow: var(--shadow-card); border: 1px solid transparent; }
.benefit-box::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  padding: 1px; background: linear-gradient(135deg, rgba(201,162,94,0.5), rgba(201,162,94,0.07) 45%, rgba(201,162,94,0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.benefit-box .benefit-grid { display: block; }
.benefit-box .benefit-text { max-width: 62ch; }
.benefit-box .benefit-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 4vw, 56px);
  margin-top: 1.9rem; background: none; border: none; box-shadow: none; padding: 0; border-radius: 0; }
.benefit-box .chip-head { margin-top: 2.2rem; padding-top: 1.7rem; border-top: 1px solid var(--hairline-ink); font-weight: 500; }
.benefit-box .chip-grid { margin-top: 1rem !important; }

/* Leistungs-Zeilen als Stapel-Karten: naechste Karte scrollt ueber die vorige */
@media (min-width: 900px) {
  .svc-row { position: sticky; top: clamp(88px, 11svh, 118px); margin-bottom: 30px;
    background: #fffdf8; border: 1px solid var(--hairline-ink); border-radius: var(--r-card);
    padding: clamp(22px, 3vw, 38px); box-shadow: 0 -14px 44px rgba(31,22,10,0.14), 0 18px 40px rgba(31,22,10,0.1); }
  .svc-rows { padding-bottom: 6svh; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-row { position: static; }
}

/* Navbar-Telefon: auf hellem Scroll-Header dunkel und lesbar */
body.hell .site-header.scrolled .header-phone.is-prominent {
  color: #6d4d1a !important; border-color: rgba(169,123,46,0.55);
  background: rgba(201,162,94,0.14); }
body.hell .site-header.scrolled .header-phone.is-prominent:hover {
  color: #4f3811 !important; border-color: rgba(169,123,46,0.9); background: rgba(201,162,94,0.24); }

/* ============================================================
   UNTERSEITEN-RUNDE 2 (14.07. nachts)
   ============================================================ */
/* Google-Badge: unten im Sub-Hero verankert (wie Hesslich) */
.sub-hero .hero-google-badge { position: absolute; z-index: 3; margin-top: 0;
  bottom: clamp(26px, 6svh, 54px);
  left: max(clamp(20px, 5vw, 48px), calc((100% - var(--maxw)) / 2 + 48px)); }

/* Benefit-Box v2: zentriert, symmetrische Kachel-Punkte, geordnete Chips */
.benefit-box::before { content: ""; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px;
  border: 1px solid rgba(169,123,46,0.16); border-radius: 22px; transform: rotate(45deg); pointer-events: none; }
.benefit-box > * { position: relative; z-index: 1; }
.benefit-box .benefit-text { text-align: center; max-width: 62ch; margin: 0 auto; }
.benefit-box .benefit-text .eyebrow { justify-content: center; }
.benefit-box .benefit-text h2 { text-wrap: balance; }
.benefit-box .benefit-text p { font-size: 1.1rem; color: var(--ink); text-wrap: balance; }
.benefit-box .benefit-text::after { content: "\2726"; display: block; margin: 1.4rem auto 0; color: var(--gold);
  font-size: 0.85rem; opacity: 0.8; }
.benefit-box .benefit-list { grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 1.8rem; }
.benefit-box .benefit-list li { border: 1px solid var(--hairline-ink); background: rgba(201,162,94,0.055);
  border-radius: var(--r-sm); padding: 15px 16px 15px 42px; font-size: 1.02rem; color: var(--ink); }
.benefit-box .benefit-list li::before { left: 16px; top: 50%; transform: translateY(-50%); color: var(--terra); }
.benefit-box .chip-head { text-align: center; font-size: 1rem; color: var(--ink); }
.benefit-box .chip-grid { justify-content: center; max-width: 1000px; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 1100px) { .benefit-box .benefit-list { grid-template-columns: repeat(2, 1fr); } }

/* Estimator: treibender Gold-Orb + funkelnde Ecksterne in der Box */
.est-card { overflow: hidden; }
.est-card > *:not(.est-orb):not(.est-star) { position: relative; z-index: 1; }
.est-orb { position: absolute; z-index: 0; width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(201,162,94,0.16), rgba(201,162,94,0) 65%);
  top: -140px; right: -120px; animation: estOrbDrift 20s ease-in-out infinite alternate; }
@keyframes estOrbDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-22%, 34%) scale(1.15); }
  100% { transform: translate(-55%, 8%) scale(0.95); } }
.est-star { position: absolute; z-index: 0; color: var(--gold); pointer-events: none;
  animation: pgStarTwinkle 4.2s ease-in-out infinite; }
.est-star.es-1 { top: 16px; left: 18px; font-size: 0.85rem; }
.est-star.es-2 { bottom: 14px; right: 18px; font-size: 1.05rem; animation-delay: 1.6s; }
@media (prefers-reduced-motion: reduce) { .est-orb, .est-star { animation: none; } }

/* Schriften auf den Unterseiten kraeftiger */
.svc-body p { font-size: 1.05rem; color: var(--ink); }
.svc-body h3 { font-size: 1.3rem; }
.story-step p { font-size: 1.03rem; color: rgba(240,234,217,0.95); }
.sub-hero .lead { color: #f4e9d6; }

/* ============================================================
   BENEFIT v3: Bild-Anker + 4 Icon-Punkte + Chip-Band (15.07.)
   ============================================================ */
/* Google-Badge im Sub-Hero: unten MITTIG + Kollisionsschutz */
.sub-hero .hero-google-badge { left: 50%; transform: translateX(-50%); bottom: clamp(22px, 4.5svh, 40px); }
.sub-hero .hero-google-badge:hover { transform: translateX(-50%) translateY(-1px); }
.sub-hero:not(.sub-hero-center) { padding-bottom: clamp(110px, 15svh, 170px); }

/* Box: Bild links, kompakter Inhalt rechts */
.benefit-box.bb-v3 { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(24px, 4vw, 56px);
  align-items: center; padding: clamp(22px, 3vw, 40px); }
.bb-media { margin: 0; height: 100%; min-height: 320px; }
.bb-media img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-card) - 8px); display: block; }
.bb-content { padding: clamp(4px, 1vw, 12px) 0; }
.bb-content .eyebrow { justify-content: flex-start; }
.bb-content h2 { text-wrap: balance; margin-top: 0.4rem; }
.bb-satz { font-size: 1.12rem; color: var(--ink); margin-top: 0.9rem; max-width: 46ch; }
.bb-points { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 12px; }
.bb-points li { display: flex; align-items: center; gap: 14px; font-size: 1.05rem; color: var(--ink); }
.bbp-ic { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; color: var(--gold-dark, #8a6420);
  background: rgba(201,162,94,0.13); border: 1px solid rgba(169,123,46,0.3); }
.bbp-ic svg { width: 22px; height: 22px; }
.bb-points li:nth-child(2) .bbp-ic { color: #4f8f5b; background: rgba(79,143,91,0.12); border-color: rgba(79,143,91,0.3); }
.bb-points li:nth-child(3) .bbp-ic { color: #5a6f9e; background: rgba(90,111,158,0.12); border-color: rgba(90,111,158,0.3); }
.bb-points li:nth-child(4) .bbp-ic { color: var(--terra); background: rgba(150,115,61,0.1); border-color: rgba(150,115,61,0.3); }
@media (max-width: 980px) { .benefit-box.bb-v3 { grid-template-columns: 1fr; } .bb-media { min-height: 240px; } }

/* Chip-Band: sanft laufende Teppicharten */
.chip-band-label { text-align: center; margin-top: 2.4rem; font-size: 1rem; color: var(--ink); font-weight: 500; }
.chip-band { overflow: hidden; margin-top: 1rem; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.chip-band-track { display: inline-flex; gap: 12px; white-space: nowrap; width: max-content;
  animation: chipBand 45s linear infinite; padding: 4px 0; }
.chip-band:hover .chip-band-track { animation-play-state: paused; }
@keyframes chipBand { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .chip-band-track { animation: none; flex-wrap: wrap; white-space: normal; width: auto; justify-content: center; }
}

/* ============================================================
   POLITUR-RUNDE (15.07.): Tilt raus, edle Box, Estimator ruhig
   ============================================================ */
/* Karten-Tilt komplett aus, nur noch ruhiges Anheben/Vergroessern */
.service-cards, .promise-grid-4, .review-grid, .estimator .wrap.narrow { perspective: none !important; }
.sc-card, body.hell .pg-item, body.hell .est-card, body.hell .review-card {
  transform: none !important; transition: transform 0.35s ease, box-shadow 0.35s ease !important; }
.sc-card:hover { transform: translateY(-5px) scale(1.02) !important; }
body.hell .pg-item:hover { transform: translateY(-4px) scale(1.015) !important; }
body.hell .review-card:hover { transform: translateY(-4px) scale(1.015) !important; }
body.hell .est-card:hover { transform: none !important; }

/* Startseiten-Hero: Badge fast ganz unten, ueber der Gold-Leiste */
.hero-blend .hero-google-badge { position: absolute; z-index: 3; left: 50%;
  transform: translateX(-50%); bottom: clamp(86px, 13svh, 124px); margin-top: 0; }
.hero-blend .hero-google-badge:hover { transform: translateX(-50%) translateY(-1px); }
/* nowrap: die Rufnummer enthaelt Leerzeichen und wurde sonst mitten
   auseinandergerissen ("069 430 96" / "919"). */
.area-tel { color: var(--gold-bright); text-decoration: none; border-bottom: 1px dotted var(--gold-dim); white-space: nowrap; }
.area-tel:hover { color: #fff; }

/* Benefit-Box: Bild randlos links, Inhalt edel zentriert */
.benefit-box.bb-v3 { padding: 0; gap: 0; align-items: stretch; overflow: hidden; }
.bb-media { min-height: 480px; }
.bb-media img { border-radius: 0; }
.bb-content { padding: clamp(32px, 4.5vw, 64px); display: flex; flex-direction: column; justify-content: center;
  text-align: center; }
.bb-content .eyebrow { justify-content: center; }
.bb-satz { margin-left: auto; margin-right: auto; }
.bb-points { margin: 2rem auto 0; gap: 16px; max-width: 430px; text-align: left; }
.bb-contact { margin-top: 2.1rem; padding-top: 1.7rem; border-top: 1px solid var(--hairline-ink);
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.bb-contact .btn { padding: 10px 18px; font-size: 0.82rem; }
@media (max-width: 980px) { .bb-media { min-height: 260px; } }

/* Estimator: Icons einfarbig gold, feine Innen-Keyline */
.est-opt .est-ic { color: #8a6420 !important; background: rgba(201,162,94,0.12) !important;
  border-color: rgba(169,123,46,0.35) !important; }
.est-opt:hover { border-color: var(--gold) !important; }
.est-keyline { position: absolute; inset: 10px; border: 1px solid rgba(169,123,46,0.22);
  border-radius: calc(var(--r-card) - 6px); pointer-events: none; z-index: 0; }

/* Estimator: eine Frage pro Schritt, sanftes Weiterblaettern */
@keyframes estStageIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.est-stage.is-active { animation: estStageIn 0.34s ease; }
@media (prefers-reduced-motion: reduce) { .est-stage.is-active { animation: none; } }

/* Consent-Banner (erscheint nur mit konfigurierten Analytics-IDs) */
.consent-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 150;
  width: min(620px, calc(100vw - 32px)); padding: 20px 22px; border-radius: var(--r-card);
  background: rgba(24,16,8,0.96); border: 1px solid rgba(229,199,142,0.4);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45); color: var(--cream); }
.consent-banner p { font-size: 0.95rem; line-height: 1.55; margin: 0 0 14px; }
.consent-banner a { color: var(--gold-bright); }
.consent-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-buttons .btn { padding: 10px 20px; font-size: 0.82rem; }

/* Rechtsseiten */
.legal-inhalt h2 { font-size: 1.6rem; margin-top: 2.6rem; color: var(--ink); }
.legal-inhalt h2:first-child { margin-top: 0; }
.legal-inhalt h3 { font-size: 1.15rem; margin-top: 1.8rem; color: var(--ink); }
.legal-inhalt p { margin-top: 0.9rem; font-size: 1.02rem; color: var(--ink); line-height: 1.7; text-wrap: pretty; }
.legal-inhalt a { color: var(--terra); }
.legal { padding-bottom: clamp(70px, 10svh, 120px); }

/* ============================================================
   BARRIEREFREIHEIT (15.07.): Fokus sichtbar, FAB nicht tabbbar
   solange unsichtbar
   ============================================================ */
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .fab-wa:focus-visible, .header-phone:focus-visible,
.hero-google-badge:focus-visible, .google-rating-badge:focus-visible {
  outline: 3px solid #f4e9d6; outline-offset: 3px; }
body.hell .light :focus-visible, body.hell .light .btn:focus-visible { outline-color: var(--terra); }
.fab-wa { visibility: hidden; }
.fab-wa.is-visible { visibility: visible; }


/* ============================================================
   RECHTSSEITEN v2: dunkler Kopf + edle Karte (15.07.)
   ============================================================ */
.legal-hero { position: relative; background: #1d1409; overflow: hidden;
  padding: clamp(150px, 20svh, 220px) 0 clamp(48px, 7svh, 80px); }
.legal-hero h1 { color: var(--ivory); font-size: clamp(2rem, 3.4vw, 2.9rem); }
.legal-hero .legal-sub { margin-top: 0.8rem; color: var(--gold-bright); font-size: 0.95rem;
  letter-spacing: 0.14em; text-transform: uppercase; }
.legal-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(229,199,142,0.5), transparent); }

.legal { padding-top: clamp(56px, 8svh, 90px); }
.legal-karte { position: relative; background: #fffdf8; border-radius: var(--r-card);
  padding: clamp(30px, 5vw, 64px); box-shadow: var(--shadow-card); border: 1px solid transparent; }
.legal-karte::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  padding: 1px; background: linear-gradient(160deg, rgba(201,162,94,0.55), rgba(201,162,94,0.08) 45%, rgba(201,162,94,0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.legal-eck { position: absolute; top: -46px; right: -46px; width: 170px; height: 170px;
  border: 1px solid rgba(169,123,46,0.2); border-radius: 20px; transform: rotate(45deg); pointer-events: none; }
.legal-inhalt { position: relative; z-index: 1; }
.legal-inhalt h2 { font-size: 1.7rem; color: var(--ink); margin: 0; }
.legal-inhalt h2 + p { margin-top: 1rem; }
.legal-inhalt h3 { position: relative; font-size: 1.12rem; color: var(--ink);
  margin-top: 2.4rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline-ink); }
.legal-inhalt h3::before { content: "\2726"; color: var(--gold); margin-right: 10px; font-size: 0.8rem; }
.legal-inhalt p { margin-top: 0.8rem; font-size: 1.02rem; color: var(--ink); line-height: 1.75; text-wrap: pretty; }
.legal-inhalt a { color: var(--terra); word-break: break-word; }

/* ============================================================
   STAPEL-KARTEN v2 (15.07.): Bild randlos volle Hoehe,
   Deko-Elemente im Textbereich jeder Karte
   ============================================================ */
@media (min-width: 900px) {
  .svc-row { padding: 0; overflow: hidden; align-items: stretch;
    gap: 0; grid-template-columns: 0.95fr 1.05fr; }
  .svc-media { height: 100%; min-height: 380px; margin: 0; }
  .svc-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }
  .svc-body { position: relative; padding: clamp(28px, 3.6vw, 52px); display: flex;
    flex-direction: column; justify-content: center; overflow: hidden; }
  /* Deko: Khatam-Kontur + weicher Gold-Schein hinter dem Text */
  .svc-body::before { content: ""; position: absolute; top: -70px; right: -70px; width: 230px; height: 230px;
    border: 1px solid rgba(169,123,46,0.18); border-radius: 26px; transform: rotate(45deg); pointer-events: none; }
  .svc-body::after { content: ""; position: absolute; bottom: -120px; right: -60px; width: 320px; height: 320px;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(201,162,94,0.12), rgba(201,162,94,0) 65%); }
  .svc-body > * { position: relative; z-index: 1; }
  .svc-body h3::after { content: ""; display: block; width: 54px; height: 2px; margin-top: 12px;
    background: linear-gradient(90deg, var(--terra), rgba(150,115,61,0)); border-radius: 2px; }
  .svc-row .svc-eck { position: absolute; top: 14px; right: 16px; color: var(--gold); font-size: 0.85rem;
    opacity: 0.5; animation: pgStarTwinkle 4.6s ease-in-out infinite; z-index: 1; }
  .svc-row:nth-child(2) .svc-eck { animation-delay: 1.2s; }
  .svc-row:nth-child(3) .svc-eck { animation-delay: 2.4s; }
  .svc-row:nth-child(4) .svc-eck { animation-delay: 3.6s; }
  /* Beweis-Caption sitzt jetzt auf dem randlosen Bild */
  .svc-media figcaption { left: 14px; bottom: 14px; }
}

/* Bewertungskarten: symmetrischer Fuss (Avatar | Name / Meta in festen Zeilen) */
.review-card figcaption { display: grid !important; grid-template-columns: 44px 1fr;
  column-gap: 12px; row-gap: 2px; align-items: center; }
.review-card .rev-avatar { grid-row: 1 / span 2; margin-right: 0; width: 40px; height: 40px; }
.review-card .rev-name { grid-column: 2; grid-row: 1; font-weight: 600; }
.review-card figcaption small { grid-column: 2; grid-row: 2; display: block; }

/* Legal-Hero: alles mittig */
.legal-hero .wrap { text-align: center; }
.legal-hero .breadcrumb { justify-content: center; }

/* Footer im selben Dunkel-Gold-Look wie der Legal-Kopf */
body.hell .site-footer { background: #1d1409; border-top: none; position: relative; }
body.hell .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(229,199,142,0.5), transparent); }
body.hell .site-footer .footer-nav a { color: rgba(240,234,217,0.8); }
body.hell .site-footer .footer-nav a:hover { color: var(--gold-bright); }
body.hell .site-footer .footer-line { color: rgba(240,234,217,0.6); }
body.hell .site-footer .footer-credit, body.hell .site-footer .footer-credit a { color: rgba(229,199,142,0.75); }

/* Stapel-Karten: einheitlichere Hoehen */
@media (min-width: 900px) {
  .svc-row { min-height: 460px; }
}

/* Stapel-Karten: Bild darf die Kartenhoehe nicht diktieren (is-reversed war hoeher) */
@media (min-width: 900px) {
  .svc-media { position: relative; min-height: 0; }
  .svc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* Startseiten-Hero: Luft fuer den Google-Badge (ueberlappte die Erreichbarkeits-Zeile) */
.hero-blend .hero-blend-inner { padding-bottom: clamp(150px, 20svh, 220px); }
.hero-blend .hero-google-badge { bottom: clamp(74px, 10svh, 100px); }

/* ============================================================
   MOBILE-PASS 19.07. (Feinschliff, immer !important)
   ============================================================ */
@media (max-width: 480px) {
  /* Header: alles muss in 375px passen, Burger nie abgeschnitten */
  .site-header .wrap { gap: 10px !important; }
  .brand-mark { width: 34px !important; height: auto !important; }
  .brand-name { font-size: 1.05rem !important; letter-spacing: 0.16em !important; }
  .brand-claim { display: none !important; }
  .header-actions { gap: 8px !important; }
  .header-actions .btn-wa,
  .header-actions a[class*="wa"] { padding: 8px 12px !important; font-size: 0.7rem !important; letter-spacing: 0.06em !important; }
  .nav-toggle { flex: none !important; width: 38px !important; margin-right: 0 !important; }

  /* Sub-Hero: Breadcrumb braucht Luft unter der Navbar */
  .sub-hero { padding-top: 118px !important; }
  .sub-hero .breadcrumb { margin-bottom: 18px !important; }

  /* Stapelkarten/Servicezeilen: Bilder als eigene Bloecke */
  .svc-row { min-height: 0 !important; }
  .svc-media { position: relative !important; height: 230px !important; }
  .svc-media img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }

  /* Story-Fenster: Bilder voll sichtbar, Schritte lesbar */
  .story-steps h3 { font-size: 1.35rem !important; }

  /* Benefit-Box: Portraitbild begrenzen */
  .bb-media img { max-height: 340px !important; object-fit: cover !important; }

  /* Estimator + Karten: Innenabstand kompakter */
  .est-card { padding: 26px 18px !important; }

  /* Fuss-CTA-Leiste: nie umbrechen */
  .mobile-cta { gap: 8px !important; }
  .mobile-cta a { font-size: 0.78rem !important; padding: 12px 10px !important; white-space: nowrap !important; }
}

@media (max-width: 760px) {
  /* Hero-SEO-Leiste: statt Abschneiden mehrzeilig zentriert */
  .hero-bottombar .wrap { flex-wrap: wrap !important; justify-content: center !important;
    row-gap: 6px !important; column-gap: 10px !important; padding: 12px 16px !important; }
  .hero-bottombar span { font-size: 0.6rem !important; letter-spacing: 0.1em !important; }
}

/* Deko-Ornamente (Legal-Hero u.a.) duerfen nie echten Horizontal-Scroll erzeugen */
html, body { overflow-x: clip; }

/* ============================================================
   MOBILE-PASS 22.07.2026
   1) Hero-Leiste lag als Flex-Item neben dem Text statt darunter
   2) Antippflaechen auf 44px (Apple/Google-Minimum)
   3) Lesbarkeit: Kundschaft ist aelter, nichts unter 12px
   ============================================================ */

/* 1) Hero wird zur Spalte. Vorher war .hero-blend ein Flex-Container in
      Zeilenrichtung; die auf 'relative' gestellte Leiste wurde dadurch zum
      Flex-Item neben der Textspalte und ragte rechts aus dem Viewport. */
@media (max-width: 860px) {
  .hero-blend { flex-direction: column !important; align-items: stretch !important;
    justify-content: center !important; }
  .hero-blend > .wrap,
  .hero-blend > .hero-blend-inner { width: 100% !important; }
  .hero-bottombar { position: relative !important; width: 100% !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    margin-top: auto !important; }
  .hero-bottombar-inner { width: 100% !important; max-width: 100% !important;
    box-sizing: border-box !important; flex-wrap: wrap !important;
    justify-content: center !important; }
}

/* 2) Antippflaechen. Telefon ist die wichtigste Aktion der Seite, die Links
      im Fuss waren nur 23-25px hoch. */
@media (max-width: 900px) {
  .nav-toggle { width: 44px !important; height: 44px !important;
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; }
  .btn { min-height: 44px !important; }
  .site-footer .footer-nav a,
  .site-footer .footer-line a,
  .site-footer .footer-credit a { display: inline-block !important;
    padding-block: 11px !important; }

  /* Telefon und E-Mail in der Kontaktliste waren display:inline und damit
     nur 25px hoch. Inline-Elemente nehmen keine Hoehe an, deshalb inline-flex. */
  .contact-details .detail-row a { display: inline-flex !important;
    align-items: center !important; min-height: 44px !important; }

  .brand { min-height: 44px !important; display: inline-flex !important;
    align-items: center !important; }

  /* Querverweise zwischen den Leistungsseiten und Breadcrumb: echte
     Navigation, war aber nur 22-25px hoch. */
  .sub-crosslinks a { display: inline-flex !important; align-items: center !important;
    min-height: 44px !important; }
  .breadcrumb a { display: inline-flex !important; align-items: center !important;
    min-height: 40px !important; }
  .text-link { display: inline-flex !important; align-items: center !important;
    min-height: 44px !important; }
  .reviews-google-link { display: inline-flex !important; align-items: center !important;
    min-height: 44px !important; }
}

/* 3) Lesbarkeit. Grenze bewusst auf 900px, damit sie mit den Layout- und
      Touch-Bloecken zusammenfaellt. Vorher endete sie bei 760px, waehrend die
      verkleinernde Regel bis 860px lief: auf Tablets fielen die Chips dadurch
      auf 11px zurueck. */
@media (max-width: 900px) {
  .hero-bottombar span { font-size: 0.74rem !important; letter-spacing: 0.06em !important; }
  .hero-bottombar-inner i { font-size: 0.5rem !important; }
  .ba-tag { font-size: 0.72rem !important; }
  .eyebrow { font-size: 0.78rem !important; }
  .brand-claim { font-size: 0.68rem !important; }
}

/* 4) Scroll-Performance auf kleinen Geraeten.
      depth.js pausiert dort schon selbst, die Last kam aus reinem CSS. */
@media (max-width: 900px) {
  /* Weiches Scrollen konkurriert mit dem nativen Momentum-Scrolling der
     Handy-Browser und laesst Ankersspruenge zaeh wirken. */
  html { scroll-behavior: auto !important; }

  /* 4 Orbs mit filter: blur(52px) sind der teuerste Posten im Renderpfad.
     Auf kleinen Screens sind sie ohnehin kaum wahrnehmbar. */
  .f-orb { display: none !important; }

  /* Sterne bleiben sichtbar, verlieren aber Dauer-Animation und eigene
     GPU-Ebene. 16 permanente Layer kosten auf aelteren Geraeten spuerbar. */
  .f-star { will-change: auto !important; }
  .f-star svg { animation: none !important; }

  /* Weitere Deko-Dauerlaeufer, die niemand vermisst, solange man scrollt. */
  .pg-icon { animation: none !important; }
  .sub-hero-bg img { animation: none !important; will-change: auto !important; }
}

/* ============================================================
   SUB-HERO MOBIL, Feedback Yuriy 22.07.2026
   ============================================================ */
@media (max-width: 900px) {

  /* 1) "Startseite" plus Trenner raus, auf ALLEN Unterseiten (Leistungsseiten
        ueber .sub-hero, Impressum/Datenschutz/404 ueber .legal-hero). Das
        BreadcrumbList-Schema im JSON-LD bleibt unberuehrt, Google liest die
        volle Kette weiterhin. */
  .breadcrumb a,
  .breadcrumb span { display: none !important; }
  .breadcrumb { justify-content: center !important; text-align: center !important; }

  /* 2) Texte mittig. Breadcrumb und Vorteilsliste sind Flex-Container,
        dort wirkt text-align nicht, das laeuft ueber justify/align. */
  .sub-hero .breadcrumb,
  .sub-hero h1,
  .sub-hero .lead { text-align: center !important;
    margin-left: auto !important; margin-right: auto !important; }
  .sub-hero .breadcrumb { justify-content: center !important; }
  .sub-hero .hero-trust-list { align-items: center !important;
    text-align: center !important; }
  /* Das ✦ war absolut auf left:0 gesetzt und sass bei zweizeiligen Eintraegen
     versetzt. Inline mitfliessend sitzt es sauber vor dem Text. */
  .sub-hero .hero-trust-list li { padding-left: 0 !important; }
  .sub-hero .hero-trust-list li::before { position: static !important;
    margin-right: 8px !important; }

  /* Der Sub-Hero ist selbst ein Flex-Container in Zeilenrichtung. Ohne das
     hier wird das Google-Badge zum Flex-Item und rutscht seitlich heraus,
     genau wie es der Hero-Leiste auf der Startseite passiert ist. */
  .sub-hero { flex-direction: column !important; align-items: stretch !important;
    justify-content: center !important; }

  /* 3 + 6) Buttons untereinander, zentriert, exakt gleich breit UND hoch.
     nowrap verhindert, dass "Schadenfoto senden" zweizeilig wird und der
     Button dadurch hoeher ausfaellt als der Telefon-Button. */
  .sub-hero .hero-ctas { flex-direction: column !important;
    align-items: center !important; justify-content: center !important; }
  .sub-hero .hero-ctas .btn { width: 100% !important; max-width: 320px !important;
    justify-content: center !important; white-space: nowrap !important;
    min-height: 58px !important; padding-left: 18px !important;
    padding-right: 18px !important; }

  /* 5) Google-Badge raus aus der absoluten Lage, damit es nichts mehr
        ueberdecken kann, dazu einzeilig und flacher (war 80px hoch). */
  .sub-hero .hero-google-badge { position: static !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important; margin: 20px auto 0 !important;
    width: max-content !important; max-width: 100% !important;
    padding: 6px 13px !important; gap: 7px !important;
    white-space: nowrap !important; }
  .sub-hero .hero-google-badge svg { width: 15px !important; height: 15px !important; }
  .sub-hero .hero-google-badge .hgb-stars { font-size: 0.76rem !important; }
  .sub-hero .hero-google-badge .hgb-text { font-size: 0.74rem !important; }

  /* 4) Nur noch ein WhatsApp-Einstieg auf den ersten Blick. Der Header-Button
        faellt weg, die Sticky-Leiste unten haelt WhatsApp dauerhaft bereit. */
  .site-header .header-actions .btn-wa { display: none !important; }
}

/* ============================================================
   HERO-HEADLINE + BURGER-MENUE, Yuriy 22.07.2026
   ============================================================ */

/* 1) Headline auf drei Zeilen. Der feste <br> erzwang zusammen mit dem
      natuerlichen Umbruch fuenf Zeilen. Ohne ihn fliesst der Text, bei 7.2vw
      (27px auf 375er-Screens) ergeben sich exakt drei. */
@media (max-width: 900px) {
  .sub-hero h1 br { display: none !important; }
  /* Der <br> war zugleich der einzige Wortabstand, ohne ihn klebte
     "Frankfurt:" an "Restauration". */
  .sub-hero h1 em::before { content: " "; }
  .sub-hero h1 { font-size: clamp(1.5rem, 7.2vw, 2.05rem) !important;
    line-height: 1.16 !important; max-width: 22ch !important; }
}

/* 4) Burger-Menue: sanft einblenden statt hart umschalten.
      display laesst sich nicht animieren, deshalb laeuft die Sichtbarkeit
      jetzt ueber opacity/visibility. Die Klasse .open setzt main.js bereits. */
.mobile-menu { display: flex !important; opacity: 0; visibility: hidden;
  pointer-events: none; transform: translateY(-8px);
  transition: opacity 0.34s var(--ease, ease), transform 0.34s var(--ease, ease),
              visibility 0.34s; }
.mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0); }

/* Menuepunkte laufen leicht versetzt nach, das wirkt ruhiger als ein Block. */
.mobile-menu nav a, .mobile-menu-contact > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.4s var(--ease, ease), transform 0.4s var(--ease, ease); }
.mobile-menu.open nav a, .mobile-menu.open .mobile-menu-contact > * {
  opacity: 1; transform: translateY(0); }
.mobile-menu.open nav a:nth-child(1) { transition-delay: 0.08s; }
.mobile-menu.open nav a:nth-child(2) { transition-delay: 0.13s; }
.mobile-menu.open nav a:nth-child(3) { transition-delay: 0.18s; }
.mobile-menu.open nav a:nth-child(4) { transition-delay: 0.23s; }
.mobile-menu.open .mobile-menu-contact > * { transition-delay: 0.28s; }

/* Dunkler Grund wie im Footer, Schrift im Gold des Logos. */
body.hell .mobile-menu { background: #1d1409 !important; }
body.hell .mobile-menu nav a { color: var(--gold) !important; }
body.hell .mobile-menu nav a:hover,
body.hell .mobile-menu nav a:focus-visible { color: var(--ivory) !important; }
/* Burger-Striche muessen auf dem dunklen Grund sichtbar bleiben. */
body.hell .nav-toggle[aria-expanded="true"] span { background: var(--gold) !important; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu nav a, .mobile-menu-contact > * {
    transition: none !important; transform: none !important; }
}

/* ============================================================
   KONTAKT-SEKTION + 404: btn-line war fuer helle Flaechen gedacht
   ============================================================ */
/* Ab Zeile ~1504 ist .contact dunkel gestaltet (heller Text, Gold). Fuer
   .btn-ghost gibt es dort eine Anpassung, fuer .btn-line fehlte sie: der
   weiss-transparente Grund der Hell-Variante wurde auf dunklem Untergrund
   zum grauen Kasten mit unsichtbarem Rand. Gleiche Behandlung wie in
   .sub-hero und .hero-blend. */
body.hell .contact .btn-line { color: var(--ivory) !important;
  border-color: rgba(244,233,214,0.35) !important;
  background: rgba(255,253,248,0.07) !important; }
body.hell .contact .btn-line:hover,
body.hell .contact .btn-line:focus-visible { border-color: var(--gold-bright) !important;
  color: var(--gold-bright) !important; background: rgba(255,253,248,0.12) !important; }

/* Buttons in der Kontakt-Sektion und auf der 404 genauso stapeln und
   gleich breit machen wie in den Sub-Heroes. */
@media (max-width: 900px) {
  .contact .hero-ctas { flex-direction: column !important;
    align-items: center !important; justify-content: center !important; }
  .contact .hero-ctas .btn { width: 100% !important; max-width: 320px !important;
    justify-content: center !important; white-space: nowrap !important;
    min-height: 58px !important; }
}

/* ============================================================
   STARTSEITEN-BADGE + MENUE-BUTTON, Yuriy 22.07.2026
   ============================================================ */
@media (max-width: 900px) {
  /* Das Badge klebte per bottom an der Hero-Unterkante und lag dadurch
     auf der Leistungsleiste, seit die im Fluss steht. Gleiche Loesung wie
     in den Sub-Heroes: in den Fluss holen, einzeilig, flacher.
     DOM-Reihenfolge ist Text -> Badge -> Leiste, passt also. */
  .hero-blend .hero-google-badge { position: static !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important; margin: 14px auto 4px !important;
    width: max-content !important; max-width: 100% !important;
    padding: 6px 13px !important; gap: 7px !important;
    white-space: nowrap !important; }
  .hero-blend .hero-google-badge svg { width: 15px !important; height: 15px !important; }
  .hero-blend .hero-google-badge .hgb-stars { font-size: 0.76rem !important; }
  .hero-blend .hero-google-badge .hgb-text { font-size: 0.74rem !important; }

  /* Etwas Luft sparen, damit Badge und Leiste naeher an den ersten Blick
     ruecken. Nur Abstaende, keine Schriftgroessen. */
  .hero-blend .hero-hell-copy .lead { margin-top: 0.9rem !important; }
  .hero-blend .cta-note { margin-top: 0.7rem !important; }
}

/* Telefonnummer im Burger-Menue stand linksbuendig, weil der Button dort
   justify-content: normal geerbt hat. */
.mobile-menu-contact .btn { justify-content: center !important; }

/* ============================================================
   HERO-LEISTE ALS ENDLOS-SLIDER (mobil), Yuriy 22.07.2026
   ============================================================ */
/* Desktop bleibt wie gehabt: der Wrapper loest sich auf, die Kopie entfaellt,
   der abschliessende Trenner der ersten Gruppe ebenfalls. */
.hbb-set { display: contents; }
.hbb-copy { display: none; }
.hbb-tail { display: none; }

@media (max-width: 900px) {
  /* Eine Zeile statt drei: die Leiste laeuft endlos durch. Die Verschiebung
     um 50% entspricht exakt einer Gruppe, dadurch ist der Umlauf nahtlos. */
  .hero-bottombar { overflow: hidden !important; }
  .hero-bottombar-inner { display: flex !important; flex-wrap: nowrap !important;
    width: max-content !important; max-width: none !important;
    justify-content: flex-start !important; padding-left: 0 !important;
    padding-right: 0 !important; gap: 0 !important;
    animation: hbbLauf 30s linear infinite; }
  .hbb-set { display: flex !important; align-items: center !important;
    flex: 0 0 auto !important; gap: 0 !important; }
  .hbb-copy { display: flex !important; }
  .hbb-tail { display: inline !important; }
  .hero-bottombar-inner span { white-space: nowrap !important; }
  .hero-bottombar-inner i { margin: 0 14px !important; }

  /* Zeile flach halten */
  .hero-bottombar .wrap { padding-top: 9px !important; padding-bottom: 9px !important; }

  /* Die Leiste schliesst den Hero ab, darunter blieben sonst 72px
     Hero-Innenabstand als dunkler Streifen stehen. */
  .hero-blend { padding-bottom: 0 !important; }
}

@keyframes hbbLauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .hero-bottombar-inner { animation: none !important; }
}

/* ============================================================
   STARTSEITEN-HERO, Feinschliff Yuriy 22.07.2026
   ============================================================ */
/* Umbruch im Eyebrow nur mobil: sonst stand dort "... SEIT 35 / JAHREN". */
.mob-br { display: none; }
.ey-dot { font-style: normal; }

@media (max-width: 900px) {
  .mob-br { display: inline !important; }
  /* Der Mittelpunkt trennt die beiden Angaben. Sobald umbrochen wird,
     stuende er am Zeilenende, deshalb mobil weg. */
  .ey-dot { display: none !important; }

  /* 1) Mehr Luft ueber dem Eyebrow */
  .hero-blend { padding-top: clamp(104px, 15svh, 150px) !important; }
  .hero-blend .hero-hell-copy .eyebrow { margin-bottom: 1rem !important; }

  /* 2) Headline auf drei Zeilen: bei 30px brach "Nabi" von
        "Bio-Teppichreinigung" ab, ab 29px passt es zusammen. */
  .hero-blend .hero-hell-copy h1 { font-size: clamp(1.5rem, 7.5vw, 2.3rem) !important; }

  /* 3) Beide Buttons exakt gleich gross (waren 229 und 323px) */
  .hero-blend .hero-ctas { flex-direction: column !important;
    align-items: center !important; justify-content: center !important; }
  .hero-blend .hero-ctas .btn { width: 100% !important; max-width: 320px !important;
    justify-content: center !important; white-space: nowrap !important;
    min-height: 58px !important; padding-left: 18px !important;
    padding-right: 18px !important; }

  /* 4) Vorteile als Stichpunkte, zentriert und symmetrisch zu den Buttons,
        genau wie in den Sub-Heroes. */
  .hero-blend .hero-trust-list { align-items: center !important;
    text-align: center !important; margin-top: 1.1rem !important; }
  .hero-blend .hero-trust-list li { padding-left: 0 !important; }
  .hero-blend .hero-trust-list li::before { position: static !important;
    margin-right: 8px !important; }

  /* Die Textspalte hatte 162px padding-bottom, um Platz fuer das frueher
     absolut positionierte Badge freizuhalten. Seit es im Fluss steht, war
     das nur noch Leerraum zwischen Stichpunkten und Badge. */
  .hero-blend .hero-blend-inner { padding-bottom: 0 !important; }

  /* 5) Badge groesser und mit Abstand zum Slider darunter (war 37px, 4px Luft) */
  .hero-blend .hero-google-badge { padding: 9px 17px !important;
    gap: 9px !important; margin: 20px auto 18px !important; }
  .hero-blend .hero-google-badge svg { width: 18px !important; height: 18px !important; }
  .hero-blend .hero-google-badge .hgb-stars { font-size: 0.9rem !important; }
  .hero-blend .hero-google-badge .hgb-text { font-size: 0.86rem !important; }
}

/* Vorteilspunkte bleiben mobil einzeilig. Die Texte sind dafuer gekuerzt,
   die reduzierte Laufweite gibt zusaetzlich Luft (war 1.15px). Die Schrift
   bleibt bewusst bei ~16px, Verkleinern waere der falsche Hebel. */
@media (max-width: 900px) {
  .hero-trust-list li { letter-spacing: 0.5px !important;
    /* Fluid statt fest: bei 375px bleiben es ~16px, auf 320er-Geraeten
       (nur 280px nutzbar) skaliert es auf ~14px herunter, sonst brechen
       die Punkte dort zweizeilig um. */
    font-size: clamp(13.8px, 4.35vw, 16.6px) !important; }
}

/* ============================================================
   MOBIL: Stapelkarten, Werkstatt-Slider, CTA-Leiste
   Yuriy 22.07.2026
   ============================================================ */

/* --- 1) Die vier Schritte als Stapelkarten -------------------
   Vorher pinnte oben ein Bildfenster, waehrend die Texte darunter
   wegscrollten: man sah praktisch nur das erste Motiv. story.js
   verschiebt die Bilder jetzt in ihren Schritt und setzt .is-stacked. */
@media (max-width: 900px) {
  .story-grid.is-stacked .story-media { display: none !important; }

  .story-grid.is-stacked .story-steps { display: block !important; }

  .story-grid.is-stacked .story-step {
    position: sticky !important;
    min-height: 0 !important;
    display: block !important;
    background: #2a1c0c;
    border: 1px solid rgba(229, 199, 142, 0.16);
    border-radius: 18px;
    padding: 14px 16px 20px !important;
    margin-bottom: 18px !important;
    box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.45);
  }
  /* Gestaffelte Haltepunkte: die Kante der darunterliegenden Karte
     bleibt sichtbar, so entsteht der Stapel. */
  .story-grid.is-stacked .story-step:nth-child(1) { top: 76px !important; }
  .story-grid.is-stacked .story-step:nth-child(2) { top: 90px !important; }
  .story-grid.is-stacked .story-step:nth-child(3) { top: 104px !important; }
  .story-grid.is-stacked .story-step:nth-child(4) { top: 118px !important; }
  .story-grid.is-stacked .story-step:last-child { margin-bottom: 0 !important; }

  /* Die Bilder lagen absolut uebereinander und waren bis auf eines
     ausgeblendet. In der Karte sind sie normale Blockbilder. */
  .story-grid.is-stacked .story-video {
    position: relative !important; opacity: 1 !important;
    display: block !important; width: 100% !important;
    height: 200px !important; object-fit: cover !important;
    border-radius: 12px !important; margin-bottom: 14px !important;
    transform: none !important; animation: none !important; }

  .story-grid.is-stacked .story-step .eyebrow { margin-bottom: 0.3rem !important; }
  .story-grid.is-stacked .story-step h3 { font-size: 1.28rem !important; }
  .story-grid.is-stacked .story-links { flex-wrap: wrap !important; gap: 8px !important; }
}

/* --- 2) Werkstatt-Bilder als Wisch-Slider --------------------
   Vier Bilder untereinander gaben jedem zu wenig Raum. */
@media (max-width: 900px) {
  .craft-strip {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto; gap: 14px !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    /* BEWUSST kein scroll-behavior: smooth. Sobald es gesetzt ist, laeuft
       auch eine direkte scrollLeft-Zuweisung als weiches Scrollen - und das
       bewegt in manchen Umgebungen gar nichts, der Pfeil waere dann tot.
       Mit scroll-snap rastet der Sprung ohnehin sauber auf der Karte ein. */
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .craft-strip::-webkit-scrollbar { display: none; }
  .craft-item { flex: 0 0 84% !important; margin: 0 !important;
    scroll-snap-align: center; }
  .craft-item img { width: 100% !important; height: 250px !important;
    object-fit: cover !important; }
}

/* --- 3) CTA-Leiste faehrt erst nach kurzem Scrollen ein ------ */
@media (max-width: 900px) {
  .mobile-cta { transform: translateY(105%);
    transition: transform 0.34s var(--ease, ease); will-change: transform; }
  .mobile-cta.is-visible { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta { transition: none !important; }
}

/* Bildunterschrift im Werkstatt-Slider: eine spaetere Regel hatte sie auf
   0.98rem gesetzt, dadurch wurde sie zweizeilig und verdeckte fast ein
   Drittel des Motivs. Mobil kompakter, damit das Bild wirken kann. */
@media (max-width: 900px) {
  .craft-item figcaption { font-size: 0.8rem !important;
    padding: 7px 11px !important; left: 8px !important; right: 8px !important;
    bottom: 8px !important; line-height: 1.3 !important; }
}

/* Fuss-Navigation: sechs Punkte brachen mobil 2-3-1 um, "Datenschutz"
   stand allein in der letzten Zeile. Zwei feste Spalten ergeben 2-2-2,
   Impressum und Datenschutz landen dadurch nebeneinander. */
@media (max-width: 900px) {
  .site-footer .footer-nav { display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2px 14px !important; justify-items: center !important;
    max-width: 340px !important; margin-left: auto !important;
    margin-right: auto !important; }
}

/* ============================================================
   SUB-HERO-BILD MOBIL: eigenes Bildband statt Hintergrund
   ============================================================
   Vorher lag das Motiv als Hintergrund mit Deckkraft 0,4 hinter dem Text,
   darueber ein HORIZONTALER Verlauf (links deckend, rechts frei) - der ist
   fuer das Desktop-Layout gedacht, wo der Text links steht. Auf 375px Breite
   deckte er praktisch alles ab, das Bild war nicht mehr zu erkennen. Die
   blosse Erhoehung der Deckkraft half nicht: die Motive sind Nahaufnahmen,
   im schmalen Ausschnitt fuellte dann ein einzelner Finger den halben Schirm.
   Jetzt bekommt das Bild unten ein eigenes Band mit voller Deckkraft, der
   Text steht darueber auf ruhigem Grund. */
@media (max-width: 900px) {
  .sub-hero { display: flex !important; flex-direction: column !important;
    min-height: 0 !important; padding-bottom: 0 !important;
    overflow: hidden !important; }
  .sub-hero > .wrap { order: 1 !important; }
  .sub-hero .hero-google-badge { order: 5 !important; }

  .sub-hero-bg { position: relative !important; inset: auto !important;
    order: 9 !important; width: 100% !important; height: 235px !important;
    margin-top: 20px !important; }
  .sub-hero-bg img { opacity: 1 !important; width: 100% !important;
    height: 235px !important; object-fit: cover !important;
    object-position: 50% 45% !important;
    animation: none !important; transform: none !important; }
  /* Nur oben eine weiche Kante, damit der Uebergang vom Text nicht hart bricht. */
  .sub-hero-bg::after { background: linear-gradient(180deg,
    rgba(29, 20, 9, 0.8) 0%, rgba(29, 20, 9, 0.1) 40%,
    rgba(29, 20, 9, 0) 100%) !important; }
}

/* Werkstatt-Slider: Schatten raus, groesseres Bild, Pfeile.
   Die Karten trugen einen doppelten Schatten (u.a. 0 34px 70px), der auf
   dem hellen Grund der Sektion wie ein Fleck unter dem Bild wirkte. */
@media (max-width: 900px) {
  .craft-item { box-shadow: none !important; }

  /* Groesser: mehr Hoehe, breitere Karte, das naechste Bild lugt weiter an. */
  .craft-item { flex-basis: 88% !important; }
  .craft-item img { height: 320px !important; }
  .craft-strip { padding-bottom: 0 !important; }

  /* Pfeile: der Wrapper wird von main.js um den Streifen gelegt. */
  .craft-slider { position: relative; }
  /* Bewusst ohne backdrop-filter: solider Grund rendert zuverlaessiger
     und der Pfeil muss sich ohnehin klar vom Bild abheben. */
  /* z-index MUSS ueber dem Streifen liegen: .craft-strip hat z-index 5,
     mit einem niedrigeren Wert blitzen die Pfeile nur in den Luecken
     zwischen den Bildern durch. */
  .craft-nav { position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 8; width: 42px; height: 42px; min-width: 42px; min-height: 42px;
    flex: 0 0 auto; box-sizing: border-box; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(229, 199, 142, 0.55);
    background: #1d1409; color: var(--gold);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer; padding: 0; line-height: 0;
    transition: opacity 0.25s ease, background 0.25s ease; }
  .craft-nav svg { display: block; width: 20px; height: 20px; }
  .craft-nav-prev { left: 12px; }
  .craft-nav-next { right: 12px; }
  .craft-nav:active { background: rgba(29, 20, 9, 0.9); }
  /* Am Anfang bzw. Ende nur abschwaechen statt ausblenden: beide Pfeile
     bleiben sichtbar, sonst erkennt man das Slider-Prinzip nicht. */
  .craft-nav.is-off { opacity: 0.45; pointer-events: none; }
}

/* ============================================================
   BLOCK 1, Yuriy 22.07.2026
   ============================================================ */

/* 1a) Headline-Akzente in Gold statt Terrakotta/Orange, passend zum Logo.
   Auf dunklem Grund das hellere Gold, auf hellem das gedeckte, damit der
   Kontrast in beide Richtungen stimmt. */
.hero-blend h1 em,
.sub-hero h1 em,
.story-head h2 em,
.hero-blend.hero-indigo h1 em { color: var(--gold-bright) !important; font-style: italic; }
body.hell .craft h2 em,
body.hell section.light h2 em { color: var(--gold-dim) !important; }

/* 1b) Breadcrumb im Sub-Hero in Gold, wie das Logo. */
.sub-hero .breadcrumb { color: var(--gold) !important; }

/* 1c) RUECKNAHME des Bildbands: das Motiv gehoert wieder in den Hintergrund,
   soll aber erkennbar bleiben. Statt des horizontalen Desktop-Verlaufs
   (links deckend) liegt mobil ein gleichmaessiger, deutlich leichterer
   Schleier darueber, dazu hoehere Deckkraft des Bildes. */
@media (max-width: 900px) {
  .sub-hero { display: block !important; min-height: 78svh !important;
    padding-bottom: clamp(56px, 8svh, 90px) !important; }
  .sub-hero > .wrap { order: 0 !important; }
  .sub-hero-bg { position: absolute !important; inset: 0 !important;
    order: 0 !important; width: auto !important; height: auto !important;
    margin-top: 0 !important; }
  .sub-hero-bg img { opacity: 0.6 !important; width: 100% !important;
    height: 100% !important; object-fit: cover !important;
    object-position: 58% 42% !important; }
  .sub-hero-bg::after { background: linear-gradient(180deg,
    rgba(29, 20, 9, 0.9) 0%, rgba(29, 20, 9, 0.78) 45%,
    rgba(29, 20, 9, 0.82) 100%) !important; }
  .sub-hero .hero-google-badge { position: static !important; order: 0 !important;
    display: flex !important; width: max-content !important;
    margin: 20px auto 0 !important; }
}

/* --- BLOCK 2: Vier Schritte ---------------------------------- */
@media (max-width: 900px) {
  /* Alles in der Karte mittig, symmetrisch zu den Buttons. */
  .story-grid.is-stacked .story-step,
  .story-grid.is-stacked .story-step .eyebrow,
  .story-grid.is-stacked .story-step h3,
  .story-grid.is-stacked .story-step p { text-align: center !important; }

  /* Buttons untereinander, gleiche Groesse, zentriert. */
  .story-grid.is-stacked .story-links { display: flex !important;
    flex-direction: column !important; align-items: center !important;
    gap: 10px !important; }
  .story-grid.is-stacked .story-step .btn { width: 100% !important;
    max-width: 300px !important; justify-content: center !important;
    white-space: nowrap !important; min-height: 54px !important;
    margin-left: auto !important; margin-right: auto !important; }
}

/* --- WhatsApp-Buttons hochwertiger ---------------------------
   Das knallige Signalgruen wirkte billig. Etwas gedeckter, klare weisse
   Schrift mit minimal mehr Gewicht und ruhigerer Laufweite. */
.btn-wa, .mobile-cta a.is-wa {
  background: #1faa54 !important; border-color: #1faa54 !important;
  color: #ffffff !important; font-weight: 500 !important;
  letter-spacing: 0.14em !important; }
.btn-wa:hover, .btn-wa:focus-visible,
.mobile-cta a.is-wa:hover { background: #1b9349 !important;
  border-color: #1b9349 !important; box-shadow: 0 8px 24px rgba(27, 147, 73, 0.3) !important; }

/* In den Schritt-Karten tritt WhatsApp bewusst zurueck: dort fuehrt der
   Telefon-Button, der gruene Block daneben wirkte sonst erschlagend. */
@media (max-width: 900px) {
  .story-grid.is-stacked .story-links .btn-wa {
    background: transparent !important;
    border: 1px solid rgba(31, 170, 84, 0.85) !important;
    color: #d8f3e2 !important; }
  .story-grid.is-stacked .story-links .btn-wa:hover {
    background: rgba(31, 170, 84, 0.14) !important; }
}

/* --- BLOCK 3: Mitglieder, Einzugsgebiet, Kontakt, Fuss -------- */
@media (max-width: 900px) {
  /* Mitgliedschaften: nur die Logos, 50/50 nebeneinander, ohne Kartenoptik. */
  .cert-strip { display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 16px 18px !important; align-items: center !important; }
  /* min-width: 0 ist noetig, sonst erzwingt der Inhalt die Spaltenbreite
     und die Items sprengen das Raster (waren 2x300px bei 335px Platz). */
  .cert-item { background: none !important; border: none !important;
    box-shadow: none !important; padding: 0 !important; text-align: center !important;
    min-width: 0 !important; width: auto !important; }
  .cert-item img { max-height: 54px !important; width: auto !important;
    max-width: 100% !important; object-fit: contain !important;
    margin: 0 auto 8px !important; display: block !important; }
  .cert-item p { font-size: 0.68rem !important; line-height: 1.35 !important;
    margin: 0 !important; }

  /* Einzugsgebiet: Karte zwischen Fliesstext und die drei Punkte.
     display:contents loest .area-copy auf, damit sich Karte und Punkte
     ueber order in eine gemeinsame Reihenfolge bringen lassen. */
  .area-grid { display: flex !important; flex-direction: column !important;
    gap: 0 !important; }
  .area-copy { display: contents !important; }
  .area-copy .eyebrow { order: 1 !important; }
  .area-copy h2 { order: 2 !important; }
  .area-copy .section-lead { order: 3 !important; }
  .area-map { order: 4 !important; margin: 22px 0 26px !important; }
  .area-facts { order: 5 !important; }

  /* Kontaktsektion mittig statt linksbuendig. */
  .contact .section-head, .contact-copy, .contact-copy p,
  .contact h2, .contact .eyebrow, .contact .section-lead {
    text-align: center !important; }
  .contact-copy p { margin-left: auto !important; margin-right: auto !important; }
  .contact-details dl { margin-left: auto !important; margin-right: auto !important; }
  .contact .detail-row { justify-content: center !important; text-align: center !important; }

  /* Fuss: der Leerraum unter dem Credit war zu gross und das Logo oben
     angeschnitten. */
  .site-footer { padding-bottom: 96px !important; }
  .site-footer .footer-logo { max-height: 200px !important; width: auto !important;
    object-fit: contain !important; margin-top: 0 !important; }
  .footer-credit { margin-bottom: 0 !important; }
}

/* --- Nachtrag Block 1+3 -------------------------------------- */
/* Die Logo-Dateien haben weisse Flaechen. multiply laesst sie mit dem
   hellen Untergrund verschmelzen, damit sie frei stehen statt in einem
   weissen Kasten zu sitzen. */
@media (max-width: 900px) {
  .cert-item img { mix-blend-mode: multiply !important;
    background: transparent !important; }
}

/* Alle Headline-Akzente auf Gold, auch die Sektionen, die eigene Regeln
   mitbringen (Bewertungen, Ergebnisse, Versprechen ...). Auf hellem Grund
   das gedeckte Gold, auf dunklem das helle. */
h1 em, h2 em { color: var(--gold-bright); }
body.hell section.light h2 em,
body.hell .reviews h2 em,
body.hell .results h2 em,
body.hell .promise h2 em,
body.hell .craft h2 em,
body.hell .area h2 em,
body.hell .estimator h2 em,
body.hell .faq h2 em { color: var(--gold-dim) !important; }
body.hell .contact h2 em,
body.hell .story-head h2 em { color: var(--gold-bright) !important; }

/* --- Benefit-Box: den Texten Luft geben ----------------------
   .bb-content hatte mobil 32px Innenabstand rundum, von 333px blieben
   damit nur 269px Textbreite. Headline und Fliesstext liefen dadurch auf
   3 bzw. 4 gequetschte Zeilen. */
@media (max-width: 900px) {
  .bb-content { padding: 22px 18px 26px !important; }
  .bb-content h2 { font-size: clamp(1.45rem, 6.6vw, 1.9rem) !important;
    line-height: 1.18 !important; }
  .bb-content .bb-satz { font-size: 1.02rem !important;
    line-height: 1.55 !important; }
  .bb-points li { font-size: 0.95rem !important; }
}

/* ============================================================
   ALLE SEKTIONEN MITTIG (Desktop + Mobil), Yuriy 22.07.2026
   Vorher waren 6 von 10 Kopfbereichen linksbuendig und 4 zentriert.
   ============================================================ */
.section-head,
.story-head,
.reviews-head,
.promise-head,
.area-copy,
.contact-copy,
.bb-content {
  text-align: center;
}
.section-head .eyebrow, .section-head h2, .section-head .section-lead,
.story-head .eyebrow, .story-head h2,
.area-copy .eyebrow, .area-copy h2, .area-copy .section-lead,
.contact-copy .eyebrow, .contact-copy h2, .contact-copy p,
.bb-content .eyebrow, .bb-content h2, .bb-content .bb-satz {
  text-align: center;
}
/* Fliesstexte bekommen eine Maximalbreite und werden zentriert, sonst
   laufen sie auf Desktop ueber die volle Spalte und der Mittelsatz
   wirkt zufaellig. */
.section-head .section-lead,
.area-copy .section-lead,
.story-head .section-lead,
.contact-copy p,
.bb-content .bb-satz {
  margin-left: auto; margin-right: auto;
}
.section-head h2, .story-head h2, .area-copy h2,
.contact-copy h2, .bb-content h2 { margin-left: auto; margin-right: auto; }

/* Aufzaehlungen unter den Ueberschriften ziehen mit, damit die Achse
   durchgehend stimmt. */
.area-facts, .bb-points, .hero-trust-list {
  align-items: center; text-align: center;
}
.area-facts li, .bb-points li { justify-content: center; }

/* Kontaktdaten mittig */
.contact-details dl { margin-left: auto; margin-right: auto; }
.contact .detail-row { justify-content: center; text-align: center; }

/* Aufzaehlungen: die LISTE wird zentriert, die Zeilen darin bleiben
   linksbuendig. Mit justify-content:center zentrierte sich vorher jede
   Zeile einzeln, dadurch stand jedes Icon woanders (715/730/691/705px). */
.bb-points, .area-facts {
  width: max-content; max-width: 100%;
  margin-left: auto; margin-right: auto;
  align-items: stretch; text-align: left;
}
.bb-points li, .area-facts li {
  justify-content: flex-start; text-align: left;
}

/* Mobil greift width:max-content nicht mehr: die Zeilen sind laenger als der
   Bildschirm, max-width:100% zieht die Liste auf die volle Breite und dadurch
   wirkt der Block linksbuendig statt mittig. Feste, etwas schmalere Breite,
   damit der Block sichtbar zentriert steht und die Zeilen links anliegen.
   Nur .area-facts: .bb-points hat weiter unten einen eigenen !important-Wert,
   steht dort ohnehin zentriert und laeuft nicht ueber. */
@media (max-width: 620px) {
  .area-facts { width: 290px !important; max-width: 100% !important; }
}

/* Cookie-Banner: Text und Schaltflaechen mittig. */
.consent-banner { text-align: center; }
.consent-banner p { margin-left: auto; margin-right: auto; }
.consent-buttons { display: flex; justify-content: center;
  flex-wrap: wrap; gap: 10px; }

/* Sub-Hero auch auf Desktop mittig. Der Verlauf deckte bisher nur die linke
   Haelfte ab (Text links, Bild rechts); zentrierter Text braucht einen
   gleichmaessigen Schleier, sonst kippt der Kontrast zur Bildseite hin. */
@media (min-width: 901px) {
  /* Die :not(.sub-hero-center)-Regeln setzen text-align: left und
     align-items: flex-start und schlagen einfache Selektoren. */
  .sub-hero,
  .sub-hero:not(.sub-hero-center) .sub-hero-inner { text-align: center !important; }
  .sub-hero:not(.sub-hero-center) { align-items: center !important; }
  .sub-hero .breadcrumb { justify-content: center !important; }
  .sub-hero h1, .sub-hero .lead { margin-left: auto !important; margin-right: auto !important; }
  .sub-hero .hero-ctas { justify-content: center !important; }
  .sub-hero:not(.sub-hero-center) .hero-trust-list { align-items: center !important; }
  .sub-hero .hero-trust-list li { justify-content: center; }
  .sub-hero-bg::after { background: linear-gradient(180deg,
    rgba(29, 20, 9, 0.88) 0%, rgba(29, 20, 9, 0.7) 45%,
    rgba(29, 20, 9, 0.8) 100%) !important; }
  .sub-hero-bg img { opacity: 0.55 !important; }
}

/* ============================================================
   E-MAIL ALS GLEICHWERTIGER KONTAKTWEG, Yuriy 22.07.2026
   Nazira: viele Kundinnen und Kunden schreiben lieber eine Mail.
   ============================================================ */
/* Mail im Kopf, nur ab Tablet: mobil ist dort kein Platz, dort fuehren die
   Sticky-Leiste unten und das Burger-Menue zum Kontakt.
   Yuriy 22.07.2026: WhatsApp ist aus der Kopfzeile raus, die Mail nimmt seinen
   Platz als deutlicher Knopf ein (vorher nur ein rundes Symbol ohne Text). */
.header-mail { display: none; }
@media (min-width: 901px) {
  /* gleiche Hoehe wie der Telefon-Knopf daneben (der ist 50px hoch),
     sonst stehen die beiden ungleich in der Kopfzeile. */
  .header-mail { display: inline-flex; align-items: center; min-height: 50px; }
}

/* Mail-Button: sichtbar als eigener Weg, aber ruhiger als WhatsApp. */
.btn-mail svg { flex: 0 0 auto; }
.btn-mail { gap: 9px; }

/* Im Rechner stehen jetzt drei Wege untereinander. */
@media (max-width: 900px) {
  .est-actions { display: flex !important; flex-direction: column !important;
    align-items: center !important; gap: 10px !important; }
  .est-actions .btn { width: 100% !important; max-width: 320px !important;
    justify-content: center !important; white-space: nowrap !important; }
}

/* Cookie-Banner mobil kompakter: nahm 38% der Bildschirmhoehe ein und
   verdeckte die Schaltflaechen darunter. */
@media (max-width: 900px) {
  .consent-banner { padding: 16px 16px 18px !important; }
  .consent-banner p { font-size: 0.86rem !important; line-height: 1.45 !important;
    margin-bottom: 12px !important; }
  .consent-buttons { gap: 8px !important; }
  .consent-buttons .btn, .consent-buttons button, .consent-buttons a {
    padding: 11px 16px !important; font-size: 0.76rem !important;
    letter-spacing: 0.12em !important; }
}

/* Kontaktdaten: der BLOCK wird zentriert, die Werte darin stehen auf einer
   Kante. Mit text-align:center zentrierte sich jede Zeile einzeln, die
   Textanfaenge lagen bei 976/980/955/885/883px. Gleiches Muster wie bei
   den Aufzaehlungen. */
.contact-details dl { width: max-content; max-width: 100%;
  margin-left: auto; margin-right: auto; }
/* Mobil ist der laengste Wert breiter als der Bildschirm, max-content
   liess den Block dann 390px bei 375px Viewport werden. */
@media (max-width: 900px) {
  .contact-details dl { width: 100% !important; }
}
.contact .detail-row { text-align: left !important;
  justify-content: flex-start !important; }
.contact .detail-row dt,
.contact .detail-row dd { text-align: left !important; }

/* .btn-line im dunklen Menue: die Hell-Variante (dunkles Gold auf
   weiss-transparent) war dort kaum lesbar. Gleiche Behandlung wie in
   .sub-hero / .hero-blend / .contact. */
.mobile-menu .btn-line { color: var(--ivory) !important;
  border-color: rgba(244, 233, 214, 0.38) !important;
  background: rgba(255, 253, 248, 0.07) !important; }
.mobile-menu .btn-line:hover { color: var(--gold-bright) !important;
  border-color: var(--gold-bright) !important; }

/* Kontaktsektion durchgehend mittig: das zweispaltige Raster stellte den
   Text nach links und die Daten nach rechts, dadurch wirkte der ganze
   Abschnitt aussermittig, obwohl der Text in seiner Spalte zentriert war. */
@media (min-width: 901px) {
  .contact-grid { grid-template-columns: 1fr !important;
    max-width: 760px !important; margin-left: auto !important;
    margin-right: auto !important; gap: 40px !important; }
  .contact-details { width: 100% !important; }
}

/* --- Werkstatt-Slider: sanft und mit sichtbarem Anschnitt ----- */
@media (max-width: 900px) {
  /* Der Streifen laeuft bis an den Bildschirmrand, die erste Karte bleibt
     aber am Textrand ausgerichtet. Dadurch ist rechts Platz, sodass die
     naechste Karte deutlich anlugt (vorher nur 26px). */
  .craft-strip { margin-left: -20px !important; margin-right: -20px !important;
    padding-left: 20px !important; padding-right: 20px !important;
    scroll-padding-left: 20px !important;
    /* Sanftes Gleiten fuer Wischen UND Pfeile. */
    scroll-behavior: smooth; }
  .craft-item { flex-basis: 84% !important; }
}
@media (prefers-reduced-motion: reduce) {
  .craft-strip { scroll-behavior: auto !important; }
}

/* --- Benefit-Box mobil: Overflow, Buttons, Mail statt WhatsApp --- */
/* Mail-Button erscheint nur mobil, auf Desktop bleibt WhatsApp. */
.bb-mail { display: none; }

@media (max-width: 900px) {
  /* width:max-content (fuer die Zentrierung gesetzt) machte die Liste
     368px breit und sprengte damit die Box auf 425px bei 375px Viewport.
     Mobil braucht sie volle Breite, die Zeilen bleiben linksbuendig. */
  .bb-points { width: 100% !important; }
  .bb-content { max-width: 100% !important; overflow-wrap: break-word; }

  /* Buttons untereinander, gleiche Groesse, zentriert. */
  .bb-contact { display: flex !important; flex-direction: column !important;
    align-items: center !important; gap: 10px !important; }
  .bb-contact .btn { width: 100% !important; max-width: 300px !important;
    justify-content: center !important; min-height: 54px !important;
    white-space: nowrap !important; }

  /* Mobil fuehrt E-Mail statt WhatsApp: WhatsApp ist ueber die Leiste
     unten, den Kopf und das Menue ohnehin dauerhaft praesent. */
  .bb-contact .bb-wa { display: none !important; }
  .bb-mail { display: inline-flex !important; }
}

/* Mobiles Menue: der Inhalt war vertikal zentriert, ohne Ruecksicht auf den
   Header. Auf flacheren Geraeten (640px Hoehe) lag der erste Punkt 31px
   HINTER der Kopfzeile. Kopfbereich wird jetzt freigehalten; reicht der
   Platz trotzdem nicht, laesst sich das Menue scrollen. */
.mobile-menu { padding: 114px 20px 32px; overflow-y: auto;
  -webkit-overflow-scrolling: touch; }
@media (min-height: 780px) {
  .mobile-menu { padding-top: 124px; }
}

/* ============================================================
   MOBILE KONTAKTLEISTE UNTEN, Yuriy 23.07.2026
   Die Rufnummer stand in dunklem Gold auf fast schwarzem Grund:
   Kontrast 4.53:1, also gerade eben am WCAG-Minimum und auf einem
   Handy im Hellen kaum zu lesen. Ausserdem war die linke Haelfte
   zwar klickbar, sah aber nicht nach Schaltflaeche aus, waehrend
   rechts ein kraeftiger gruener Knopf sass.
   Jetzt beide Haelften als echte Schaltflaeche, links golden mit
   dunkler Schrift (Kontrast ueber 10:1).
   ============================================================ */
.mobile-cta a:not(.is-wa) {
  background: linear-gradient(120deg, #b8933f, #e5c78e 55%, #d9b56c) !important;
  color: #1d1206 !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
}
.mobile-cta a:not(.is-wa) svg { flex: none; }
/* Trennfuge zwischen den beiden Schaltflaechen */
.mobile-cta a.is-wa { border-left: 1px solid rgba(0, 0, 0, 0.18) !important; }

/* Aufklapper im Cookie-Banner: die Dienste stehen nicht mehr im Haupttext,
   bleiben aber vor der Einwilligung einsehbar (Voraussetzung dafuer, dass
   die Einwilligung als informiert gilt). */
.consent-details { margin: 10px 0 4px; text-align: left; }
.consent-details summary {
  cursor: pointer; list-style: none;
  font-size: 0.86rem; color: var(--gold-bright);
  border-bottom: 1px dotted rgba(229, 199, 142, 0.5);
  display: inline-block; padding: 2px 0;
}
.consent-details summary::-webkit-details-marker { display: none; }
.consent-details summary::after { content: " \203A"; display: inline-block; transition: transform 0.2s ease; }
.consent-details[open] summary::after { transform: rotate(90deg); }
.consent-details summary:hover { color: #fff; }
.consent-details-inhalt { font-size: 0.84rem; line-height: 1.55; color: var(--muted); padding-top: 8px; }
.consent-details-inhalt ul { margin: 6px 0 8px; padding-left: 18px; }
.consent-details-inhalt li { margin-bottom: 5px; }
.consent-details-inhalt strong { color: var(--cream); font-weight: 500; }
@media (max-width: 620px) {
  .consent-details { text-align: center; }
  .consent-details-inhalt { text-align: left; }
}

/* ============================================================
   LESBARKEIT AUF HELLEM GRUND, Yuriy 23.07.2026
   Nazira: ihre Kundschaft sieht oft schlecht. Das Grunddesign kommt
   aus der dunklen Variante, deshalb sind an einigen Stellen helle
   Textfarben (cream, gold-bright) auf hellem Grund gelandet.
   Gemessen: "ein Foto Ihres Teppichs" hatte 1.46:1 und war damit
   praktisch unsichtbar. Hervorhebungen muessen auf hellem Grund
   DUNKLER werden, nicht heller.
   ============================================================ */
body.hell .est-hint strong {
  color: var(--ink) !important;
  font-weight: 600 !important;
}
/* Fliesstext auf hellen Flaechen etwas kraeftiger: --muted liegt auf
   hellem Grund bei 2.25:1 und ist als Textfarbe dort unbrauchbar. */
body.hell .estimator p:not(.eyebrow),
body.hell .est-card p,
body.hell .area-facts li,
body.hell section.light p {
  color: #4a3c26 !important;
}

/* Textlinks auf hellem Grund standen in --gold-dim (#96733d) und kamen damit
   nur auf 4.11:1, also unter der Schwelle. #7c5e1d liegt bei 5.69:1 und bleibt
   in derselben Farbwelt. Betrifft Verweise und die Rufnummer im Einzugsgebiet. */
body.hell .text-link,
body.hell .reviews-google-link,
body.hell .area-tel,
body.hell .est-dot.is-current {
  color: #7c5e1d !important;
}
body.hell .area-tel { border-bottom-color: #7c5e1d !important; }
/* Der gefuellte Schrittkreis bleibt golden, nur der Text daneben wird dunkler */
body.hell .est-dot.is-current span {
  background: #7c5e1d !important; border-color: #7c5e1d !important; color: #fff !important;
}

/* ============================================================
   EDLERE HERO-BUTTONS MOBIL, Yuriy 23.07.2026
   Vorher 320x67px, fast randlos, das WhatsApp-Gruen als flache
   Vollflaeche im grellen #25d366. Zusammen wirkten die beiden
   wie zwei massive Kloetze ("klumpig").
   Jetzt: schlanker (54px), etwas schmaler (mehr Luft an den
   Seiten), feinere Schrift, und Tiefe durch weichen Schatten
   plus dezenten Verlauf statt einer platten Fuellung.
   ============================================================ */
@media (max-width: 900px) {
  .hero-hell .hero-ctas .btn,
  .hero-blend .hero-ctas .btn {
    max-width: 300px !important;
    min-height: 54px !important;
    padding-top: 15px !important; padding-bottom: 15px !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.15em !important;
  }
  .hero-hell .hero-ctas, .hero-blend .hero-ctas { gap: 14px !important; }

  /* WhatsApp: gleiches Gruen, aber mit leichtem Verlauf fuer Tiefe
     und weichem Schatten, damit der Knopf schwebt statt zu klotzen. */
  .hero-ctas .btn-wa {
    background: linear-gradient(177deg, #29c765, #1da851) !important;
    border-color: #1da851 !important;
    box-shadow: 0 8px 22px rgba(20,120,58,0.30) !important;
  }
  /* Gold-Knopf denselben weichen Schatten geben, damit beide auf
     einer Ebene wirken und nicht der eine flach, der andere plastisch. */
  .hero-ctas .btn-gold, .hero-ctas .btn-tel {
    box-shadow: 0 8px 22px rgba(120,88,38,0.24) !important;
  }
}

/* ============================================================
   DUNKLE PREMIUM-KARTE IN HELLER SEKTION, Yuriy 23.07.2026
   Die Lesbarkeits-Regeln fuer helle Flaechen (section.light p dunkel,
   text-link abgedunkelt) trafen auch die dunkle Espresso-Karte, die IN
   einer hellen Sektion liegt: dunkelbraune Schrift auf dunkelbraunem
   Grund. Hier gilt die umgekehrte Richtung, Text muss HELL sein.
   ============================================================ */
body.hell section.light .sc-card.is-premium p {
  color: rgba(240, 234, 217, 0.92) !important;
}
body.hell section.light .sc-card.is-premium .text-link {
  color: var(--gold-bright) !important;
}
body.hell section.light .sc-card.is-premium:hover .text-link { color: #fff !important; }
/* Das Etikett "Spezialitaet" hatte auf dieser Karte nie einen eigenen Stil
   (der Gold-Badge-Look gilt nur fuer .sr-media) und erbte fast schwarze
   Schrift ohne Hintergrund: unsichtbar. Gleicher Look wie im Service-Bereich. */
.sc-card.is-premium .premium-tag {
  font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: #1d1206 !important;
  background: linear-gradient(120deg, var(--gold), var(--gold-bright));
  padding: 6px 13px;
}

/* ============================================================
   TEST STARTSEITEN-HERO, Yuriy 23.07.2026
   1) Reihenfolge: erst die drei Punkte, dann die Buttons
      (im Markup getauscht). Die Punkte starten auf gleicher
      Hoehe: Liste als Block zentriert, Zeilen linksbuendig
      am Stern ausgerichtet.
   2) Buttons moderner: Pill-Form statt scharfer Kanten,
      normale Gross-/Kleinschreibung statt VERSALIEN mit
      breiter Laufweite, etwas groessere Schrift.
   Gilt NUR fuer den Hero der Startseite (.hero-hell).
   ============================================================ */
.hero-hell .hero-ctas { margin-top: 1.9rem !important; }

/* Moderne Buttons */
.hero-hell .hero-ctas .btn {
  border-radius: 999px !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}
@media (min-width: 901px) {
  .hero-hell .hero-ctas .btn { padding: 17px 34px !important; }
  .hero-hell .hero-ctas .btn-wa {
    background: linear-gradient(177deg, #29c765, #1da851) !important;
    border-color: #1da851 !important;
    box-shadow: 0 8px 22px rgba(20,120,58,0.30) !important;
  }
  .hero-hell .hero-ctas .btn-gold, .hero-hell .hero-ctas .btn-tel {
    box-shadow: 0 8px 22px rgba(120,88,38,0.24) !important;
  }
}

/* Badge neben dem Anruf-Knopf (HIMZO-Muster), Yuriy 23.07.
   Die is-inline-Variante steht IM Button-Container und darf nicht mehr
   absolut ans Hero-Ende gepinnt werden. Ueberschreibt die Absolut-Regeln
   oben (position, left, bottom, transform) fuer alle Breiten. */
.hero-blend .hero-google-badge.is-inline {
  position: static !important; left: auto !important; bottom: auto !important;
  transform: none !important; margin-top: 0 !important;
}
.hero-blend .hero-google-badge.is-inline:hover { transform: translateY(-1px) !important; }
/* Auf gleicher Hoehe mit dem Pill-Knopf, gleiche Hoehe wie dieser */
.hero-hell .hero-ctas { align-items: center !important; }
.hero-hell .hero-ctas .hero-google-badge.is-inline { align-self: stretch; }

/* Headline-Umbau auf zwei Zeilen (Yuriy 23.07.): mobil brauchte die zweite
   Zeile "und Restauration in Frankfurt." 366px bei der alten 7.5vw-Groesse
   (28px) und brach unkontrolliert um. Gemessen: ab 24.5px passen beide
   Zeilen bei 375px Breite. 6.5vw = 24.4px dort, Untergrenze fuer sehr
   schmale Geraete angepasst. */
@media (max-width: 900px) {
  .hero-blend .hero-hell-copy h1 { font-size: clamp(1.35rem, 6.5vw, 2.2rem) !important; }
}

/* Sub-Heroes nach Startseiten-Muster, Yuriy 23.07. */
.sub-hero .hero-google-badge.is-inline {
  position: static !important; left: auto !important; bottom: auto !important;
  transform: none !important; margin-top: 0 !important;
}
.sub-hero .hero-google-badge.is-inline:hover { transform: translateY(-1px) !important; }
.sub-hero .hero-ctas { align-items: center !important; }

/* Moderne Pill-Buttons auch dort */
.sub-hero .hero-ctas .btn {
  border-radius: 999px !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}
@media (min-width: 901px) {
  .sub-hero .hero-ctas .btn { padding: 17px 34px !important; }
  .sub-hero .hero-ctas .btn-gold {
    box-shadow: 0 8px 22px rgba(120,88,38,0.24) !important;
  }
}
/* Punkte: Block zentriert, Zeilen starten am Stern auf gleicher Hoehe.
   Desktop steht der Sub-Hero linksbuendig, dort greift das Zentrieren
   nicht (width max-content + margin auto wirkt nur wo Text zentriert ist). */
@media (max-width: 900px) {
  .sub-hero .hero-trust-list {
    width: max-content !important; max-width: 100% !important;
    margin-left: auto !important; margin-right: auto !important;
    align-items: flex-start !important; text-align: left !important;
  }
  .sub-hero .hero-trust-list li { padding-left: 22px !important; text-align: left !important; }
  .sub-hero .hero-trust-list li::before { position: absolute !important; left: 0 !important; margin-right: 0 !important; }
  .sub-hero .hero-ctas { margin-top: 1.6rem !important; }
}

/* Knopf und Google-Badge in denselben Massen (Yuriy 23.07.):
   mobil war der Knopf 300x63 und das Badge 260x48, das wirkte unruhig.
   Beide teilen jetzt Breite und Hoehe; das Badge zentriert seinen Inhalt. */
@media (max-width: 900px) {
  .hero-hell .hero-ctas .hero-google-badge.is-inline,
  .sub-hero .hero-ctas .hero-google-badge.is-inline {
    box-sizing: border-box !important;
    width: 100% !important; max-width: 300px !important;
    min-height: 63px !important;
    justify-content: center !important;
  }
}
@media (min-width: 901px) {
  .hero-hell .hero-ctas .hero-google-badge.is-inline,
  .sub-hero .hero-ctas .hero-google-badge.is-inline {
    box-sizing: border-box !important;
    min-height: 59px !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
  }
}

/* ============================================================
   HERO-FEINSCHLIFF NACH GRAFIKER-LOGIK, Yuriy 23.07.2026
   1) Stuetzzeile: die Bruecke zwischen Display-Headline und
      den Buttons. Eine Zeile, ruhig, cremefarben.
   2) Desktop: die drei Punkte als EINE Zeile mit Stern-Trennern,
      dieselbe Formensprache wie Eyebrow und Laufband. Der
      linksbuendige Block fluchtete mit nichts und wirkte
      wie ein Fremdkoerper in der zentrierten Komposition.
      Mobil bleibt die gestapelte, buendige Liste.
   ============================================================ */
.hero-sub {
  color: rgba(240, 234, 217, 0.88);
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  letter-spacing: 0.015em;
  margin: 1.1rem auto 0;
  max-width: 66ch; /* die ganze Zeile in einer Zeile, kein Waisenwort */
  text-shadow: 0 1px 12px rgba(12, 7, 2, 0.7);
}
@media (max-width: 900px) {
  .hero-sub { font-size: 1.02rem; margin-top: 0.9rem; max-width: 30ch; }
}

/* Bewertung flach in der Punktezeile (HIMZO-Logik: kein Kasten).
   Ohne Stern-Marker davor, ohne Versalien, damit sie wie eine
   Auszeichnung liest und nicht wie ein weiterer Listenpunkt. */
.hero-trust-list .ht-rating::before { display: none !important; }
.hero-trust-list .ht-rating { padding-left: 0 !important; }
.hero-trust-list .ht-rating a {
  color: inherit; text-decoration: none;
  text-transform: none; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 7px;
  border-bottom: 1px dotted transparent;
  transition: border-color 0.25s ease;
}
.hero-trust-list .ht-rating a:hover { border-bottom-color: var(--gold-bright); }
.hero-trust-list .ht-rating .ht-stars { color: var(--gold-bright); letter-spacing: 0.12em; }
.hero-trust-list .ht-rating strong { font-weight: 600; }

/* ============================================================
   RUHE-PAKET HERO, Yuriy 23.07.2026
   Der Hintergrund war zu unruhig: Video jetzt mit 0.3 statt 0.5
   Tempo (main.js), dazu staerkere Mitte-Abdunklung hinter dem
   Text und ein Hauch weniger Kontrast im Video selbst.
   Textkontrast: kraeftigere, weichere Schatten auf allen
   Hero-Textstufen.
   ============================================================ */
.hero-blend.hero-center .hero-video {
  filter: brightness(0.82) contrast(0.92) saturate(0.9);
}
.hero-blend.hero-center .hero-hell-bg::after { background:
  radial-gradient(70% 58% at 50% 34%, rgba(20,13,5,0.78), rgba(20,13,5,0) 100%),
  radial-gradient(58% 32% at 50% 82%, rgba(20,13,5,0.72), rgba(20,13,5,0) 100%),
  linear-gradient(180deg, rgba(26,17,7,1) 0%, rgba(26,17,7,0.95) 16%, rgba(25,16,7,0.78) 36%, rgba(24,16,7,0.55) 56%, rgba(20,13,5,0.86) 84%, rgba(20,13,5,0.98) 100%) !important; }
.hero-blend.hero-center h1 {
  text-shadow: 0 2px 6px rgba(10,6,2,0.85), 0 8px 40px rgba(10,6,2,0.75);
}
.hero-blend.hero-center .hero-sub {
  color: rgba(244, 237, 222, 0.95);
  text-shadow: 0 1px 4px rgba(10,6,2,0.9), 0 4px 22px rgba(10,6,2,0.8);
}
.hero-blend.hero-center .eyebrow {
  text-shadow: 0 1px 4px rgba(10,6,2,0.9);
}


/* ============================================================
   TEST: SPLIT-HERO, Yuriy 23.07.2026
   Links der Text, rechts die "Worum geht es?"-Karte des Rechners.
   Aktiv nur solange index.php $heroFusion = true setzt; auf false
   rendert alles wie vorher und diese Regeln greifen ins Leere.
   ============================================================ */
#sofort-einschaetzung .est-card { margin: 0; }

@media (min-width: 981px) {
  .hero-fusion.is-an .hero-split-grid {
    display: grid; grid-template-columns: 1.04fr 0.96fr;
    gap: clamp(36px, 4.5vw, 76px); align-items: center;
  }
  /* Linke Spalte: aus der Mitte an die linke Kante */
  .hero-fusion.is-an .hero-hell-copy { text-align: left !important; max-width: 34rem; }
  /* In der halben Breite brach die grosse Schrift zu 'Nabi Bio-' um.
     Kleiner skaliert passt 'Nabi Bio-Teppichreinigung' in eine Zeile. */
  .hero-fusion.is-an .hero-hell-copy h1 { font-size: clamp(2.2rem, 3.05vw, 2.95rem) !important; }
  .hero-fusion.is-an .hero-hell-copy .eyebrow { justify-content: flex-start; text-align: left !important; }
  .hero-fusion.is-an .hero-hell-copy h1 { margin-left: 0 !important; margin-right: 0 !important; }
  .hero-fusion.is-an .hero-sub { margin-left: 0 !important; margin-right: 0 !important; }
  .hero-fusion.is-an .hero-ctas { justify-content: flex-start !important; }
  .hero-fusion.is-an .hero-trust-list { margin-left: 0 !important; margin-right: 0 !important; }
}
@media (max-width: 980px) {
  /* Untereinander: erst der Text, dann die Karte */
  .hero-fusion.is-an .hero-split-card { margin-top: clamp(26px, 5svh, 44px); }
}


/* Abschluss-Schritt in der Split-Karte verdichten: der Hinweistext ist
   in den Button-Beschriftungen bereits enthalten ("Foto per ... senden"),
   und schlankere Knoepfe halten die Karte kompakt. */
#sofort-einschaetzung .est-hint { display: none !important; }
#sofort-einschaetzung .est-actions { gap: 10px !important; }
#sofort-einschaetzung .est-actions .btn {
  min-height: 52px !important; padding-top: 12px !important; padding-bottom: 12px !important;
}
#sofort-einschaetzung .est-summary { margin-bottom: 1.1rem !important; }
/* Inhalt vertikal mittig, damit der kuerzere Schritt 1 in der fixen
   Hoehe nicht oben klebt */
#sofort-einschaetzung .est-card {
  display: flex !important; flex-direction: column !important;
  justify-content: center !important;
}

/* Feste Kartenhoehe je Breite (gemessen: Desktop 403/567, mobil 687/526).
   Die Karte springt beim Schrittwechsel nicht mehr, der kuerzere Schritt
   zentriert sich in der eingefrorenen Hoehe. */
@media (min-width: 981px) {
  #sofort-einschaetzung .est-card { min-height: 480px !important; }
}
@media (max-width: 980px) {
  #sofort-einschaetzung .est-card { min-height: 690px !important; }
}

/* Kurzhinweis im entschlackten Abschluss-Schritt */
#sofort-einschaetzung .est-mini {
  color: #4a3c26; text-align: center;
  font-size: 1.02rem; line-height: 1.5;
  margin: 0.3rem auto 1.4rem; max-width: 34ch;
}

/* Zierrahmen in der Rechner-Karte entfernt (Yuriy 23.07.): seine Oberkante
   lief als Linie quer durch die Schrittanzeige "Leistung / Foto senden". */
#sofort-einschaetzung .est-keyline { display: none !important; }

/* ============================================================
   TEST: HERO LINKS VERANKERT (HIMZO-Logik), Yuriy 23.07.2026
   Aktiv nur mit Klasse .is-links (Schalter $heroLinks in index.php).
   Nur Desktop: mobil bleibt die zentrierte Fassung, die funktioniert.
   Eine gemeinsame linke Kante fuer Eyebrow, Headline, Stuetzzeile,
   Buttons und Punkte; fester Abstands-Rhythmus; Vignette dunkelt
   die Raender ab und laesst dem Schaum rechts ein helles Fenster.
   ============================================================ */
@media (min-width: 901px) {
  .hero-blend.is-links .hero-hell-copy {
    text-align: left !important; max-width: 37rem !important;
    margin-left: 0 !important; margin-right: auto !important;
  }
  .hero-blend.is-links .eyebrow { text-align: left !important; }
  .hero-blend.is-links h1 {
    margin-left: 0 !important; margin-right: 0 !important;
    /* kleiner skaliert, damit die Zeilen in der halben Breite natuerlich
       fallen (drei linksbuendige Stufen wie bei HIMZO) */
    font-size: clamp(2.2rem, 3.2vw, 3.1rem) !important;
  }
  .hero-blend.is-links .hero-sub {
    margin-left: 0 !important; margin-right: 0 !important;
    margin-top: 18px !important;
  }
  .hero-blend.is-links .hero-ctas {
    justify-content: flex-start !important; margin-top: 28px !important;
  }
  .hero-blend.is-links .hero-trust-list {
    margin-left: 0 !important; margin-right: 0 !important;
    margin-top: 28px !important;
  }
  /* Vignette: links satter Grund fuer den Text, rundum dunkle Raender,
     Mitte-rechts bleibt als einziges helles Fenster (der Schaum) */
  .hero-blend.is-links .hero-hell-bg::after { background:
    radial-gradient(44% 58% at 67% 60%, rgba(20,13,5,0) 0%, rgba(20,13,5,0.30) 72%, rgba(20,13,5,0.72) 100%),
    linear-gradient(90deg, rgba(18,12,5,0.94) 0%, rgba(18,12,5,0.78) 30%, rgba(20,13,5,0.30) 52%, rgba(20,13,5,0.42) 100%),
    linear-gradient(180deg, rgba(26,17,7,0.96) 0%, rgba(24,16,7,0.30) 26%, rgba(20,13,5,0.50) 74%, rgba(20,13,5,0.97) 100%) !important; }
}

/* Vignette fuer den zentrierten Hero (Yuriy 23.07.): linke und rechte
   Kante deutlich abdunkeln, damit der Blick in der Mitte bleibt und das
   Video an den Raendern nicht zieht. Die Mitte behaelt ihre bisherige
   Abdunklung hinter dem Text. */
.hero-blend.hero-center .hero-hell-bg::after { background:
  linear-gradient(rgba(22,14,6,0.34), rgba(22,14,6,0.34)),
  linear-gradient(90deg, rgba(30,20,10,0.99) 0%, rgba(30,20,10,0.82) 13%, rgba(30,20,10,0) 32%, rgba(30,20,10,0) 68%, rgba(30,20,10,0.82) 87%, rgba(30,20,10,0.99) 100%),
  linear-gradient(180deg, rgba(32,22,11,1) 0%, rgba(32,22,11,0.80) 12%, rgba(28,19,9,0.34) 30%, rgba(28,19,9,0.38) 54%, rgba(28,19,9,0.90) 78%, rgba(26,17,8,1) 100%),
  /* Weicher Kern-Schatten hinter dem Content: mehrstufig auslaufend,
     damit nirgends eine sichtbare Kante entsteht. */
  radial-gradient(74% 64% at 50% 42%, rgba(18,12,5,0.82) 0%, rgba(18,12,5,0.56) 40%, rgba(18,12,5,0.26) 68%, rgba(18,12,5,0) 100%) !important; }

/* Ornamente im Sub-Hero: ueber dem Hintergrund, unter dem Text */
.sub-hero .bg-ornament { z-index: 1; }

/* ============================================================
   HERO NACH VORLAGE, Yuriy 23.07.2026
   Kurze Headline mit goldenem &, Diamant-Trenner, Icon-Leiste
   mit Trennstrichen (4 Punkte inkl. Google-Bewertung), zwei
   Buttons, Oeffnungszeiten klein darunter.
   ============================================================ */
.hero-divider { display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 20px auto 6px; color: var(--gold); }
.hero-divider span { font-size: 0.8rem; line-height: 1; }
.hero-divider::before, .hero-divider::after { content: "";
  width: 54px; height: 1px; background: rgba(229,199,142,0.45); }

.hero-features { list-style: none; margin: 22px auto 0; padding: 0;
  display: flex; justify-content: center; align-items: stretch; }
.hero-features li { display: flex; align-items: center; gap: 11px;
  padding: 2px 26px; }
.hero-features li + li { border-left: 1px solid rgba(229,199,142,0.28); }
.hero-features a { display: flex; align-items: center; gap: 11px;
  color: inherit; text-decoration: none; }
.hero-features .hf-ic { flex: none; width: 30px; height: 30px;
  color: var(--gold-bright); display: inline-flex; }
.hero-features .hf-ic svg { width: 100%; height: 100%; }
.hero-features .hf-t { text-align: left; font-size: 0.72rem;
  letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.5;
  color: #f2e8d2; text-shadow: 0 1px 6px rgba(10,6,2,0.8); }
.hero-features a:hover .hf-t { color: var(--gold-bright); }

/* Schlicht auf Yuriys Wunsch: keine Pille mehr, nur eine ruhige Zeile.
   Lesbarkeit kommt aus Farbe und weichem Schatten. */
.hero-hours { display: block; margin: 16px auto 0;
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(244,237,222,0.88); text-shadow: 0 1px 5px rgba(10,6,2,0.85); }

.btn-einschaetzung .be-pfeil { font-size: 1.25em; line-height: 0;
  transform: translateY(-1px); transition: transform 0.25s ease; }
.btn-einschaetzung:hover .be-pfeil { transform: translateY(-1px) translateX(3px); }

/* Mobil: Leiste als 2x2-Raster statt Trennstrich-Zeile, Buttons
   stapeln wie gehabt, Zeiten darunter */
@media (max-width: 900px) {
  .hero-features { display: grid !important; grid-template-columns: 1fr 1fr;
    gap: 16px 10px; width: 100%; max-width: 340px; margin: 20px auto 0; }
  .hero-features li { padding: 0 !important; border-left: none !important;
    justify-content: flex-start; }
  .hero-features .hf-ic { width: 26px; height: 26px; }
  .hero-features .hf-t { font-size: 0.66rem; letter-spacing: 0.1em; }
  .hero-divider { margin: 14px auto 2px; }
  .hero-hours { margin-top: 14px; }
}

/* Goldene Ornamente im Hero staerker betonen (Yuriy 23.07.): auf dem
   dunkleren Grund duerfen die Linien deutlicher leuchten. */
.hero-blend .bg-ornament::before { border-color: rgba(229,199,142,0.32) !important; }
.hero-blend .bg-ornament::after { border-color: rgba(229,199,142,0.16) !important; }
.hero-blend .bg-ornament.is-thin::before { border-color: rgba(229,199,142,0.22) !important; }

/* ============================================================
   BUTTONS VEREINHEITLICHT, Yuriy 23.07.2026
   Ueberall Pill-Form wie im Hero, keine Mischung aus rund und eckig.
   ============================================================ */
/* Ein minimaler, einheitlicher Radius fuer alle Knoepfe (Yuriy 23.07.):
   nicht rund, nicht scharfkantig, ueberall derselbe Wert. */
.btn,
.site-header .btn-small,
.header-phone.is-prominent,
.hero-hell .hero-ctas .btn,
.sub-hero .hero-ctas .btn { border-radius: 6px !important; }

/* Kontakt "Erzaehlen Sie uns von Ihrem Teppich": Block bleibt mittig,
   die Textzeilen darin stehen linksbuendig (gleiches Muster wie die Kontaktdaten). */
.contact .contact-copy h2 {
  width: max-content; max-width: 100%;
  margin-left: auto !important; margin-right: auto !important;
  text-align: left !important;
}
.contact .contact-copy p {
  margin-left: auto !important; margin-right: auto !important;
  text-align: left !important;
}

/* ============================================================
   SUB-HEROES: INHALT LINKS, Yuriy 23.07.2026
   Zentriert lag der Text ueber dem Bild rechts und war schlecht
   lesbar. Das Vorlage-Format bleibt, sitzt aber in der linken
   Haelfte: alles auf einer linken Kante, die Icon-Leiste als
   2x2-Raster statt langer Zeile. Mobil bleibt zentriert.
   ============================================================ */
@media (min-width: 901px) {
  .sub-hero .sub-hero-inner { text-align: left !important; }
  .sub-hero .breadcrumb { justify-content: flex-start !important; text-align: left !important; }
  .sub-hero h1 { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }
  .sub-hero .hero-divider { justify-content: flex-start !important; margin-left: 2px !important; }
  /* Eine Zeile statt 2x2 (Yuriy): kompakter skaliert, damit die vier
     Punkte nebeneinander in die linke Haelfte passen. */
  .sub-hero .hero-features {
    display: flex !important; justify-content: flex-start !important;
    width: max-content !important; max-width: 100% !important;
    margin-left: 0 !important;
  }
  .sub-hero .hero-features li { padding: 2px 18px !important;
    border-left: 1px solid rgba(229,199,142,0.28) !important; }
  .sub-hero .hero-features li:first-child { padding-left: 0 !important;
    border-left: none !important; }
  .sub-hero .hero-features .hf-ic { width: 25px !important; height: 25px !important; }
  .sub-hero .hero-features .hf-t { font-size: 0.67rem !important;
    letter-spacing: 0.1em !important; }
  .sub-hero .hero-ctas { justify-content: flex-start !important; }
  /* display table statt inline-block: shrink-wrapt und ignoriert ein
     etwaiges text-align center aus Altregeln */
  .sub-hero .hero-hours { display: table !important; margin: 16px 0 0 !important; }
}

/* Zeiten mittig unter der Button-Gruppe (Unterseiten): der Rahmen
   schrumpft auf Button-Breite, die Zeile zentriert sich darin. */
@media (min-width: 901px) {
  .sub-hero .hero-cta-block { width: max-content; }
  .sub-hero .hero-cta-block .hero-hours {
    display: block !important; margin: 14px 0 0 !important;
    text-align: left !important;
  }
}

/* ============================================================
   PUNKTE-ICONS EINFARBIG UND FEINER, Yuriy 23.07.2026
   Die vier Kreise waren bunt (braun/gruen/blau/terrakotta) und
   wirkten dadurch wie Clipart. Jetzt eine Farbe (Gold auf zartem
   Goldgrund) und duennere Striche, passend zur Hero-Leiste.
   ============================================================ */
.bb-points .bbp-ic {
  color: var(--gold-dim) !important;
  background: rgba(169, 123, 46, 0.08) !important;
  border-color: rgba(169, 123, 46, 0.30) !important;
}
.bb-points .bbp-ic svg { stroke-width: 1.4; }

/* ============================================================
   SUB-HERO NACH DESIGNREGELN, Yuriy 23.07.2026
   1) Feste Abstands-Skala 16/20/26/14 statt zufaelliger Luecken.
   2) Trenner fuer linksbuendigen Satz: Diamant auf der Kante,
      eine Linie laeuft nach rechts aus (das symmetrische
      Linie-Diamant-Linie ergibt nur zentriert Sinn).
   3) Leisten-Schrift zurueck auf lesbare Groesse (>=12px).
   ============================================================ */
@media (min-width: 901px) {
  .sub-hero h1 { margin-bottom: 16px !important; }
  .sub-hero .hero-divider { margin: 0 0 20px !important; }
  .sub-hero .hero-divider::before { display: none !important; }
  .sub-hero .hero-divider::after { width: 76px !important; }
  .sub-hero .hero-features { margin-top: 0 !important; }
  .sub-hero .hero-cta-block { margin-top: 26px !important; }
  .sub-hero .hero-cta-block .hero-hours { margin-top: 14px !important; }
  .sub-hero .hero-ctas { margin-top: 0 !important; }
  .sub-hero .hero-features .hf-t { font-size: 0.75rem !important;
    letter-spacing: 0.11em !important; }
}

/* Rechner-Abschluss: die zwei hellen Knoepfe (E-Mail, Anrufen) hatten
   goldene Schrift auf Weiss und waren schwer lesbar. Dunkle Schrift,
   goldener Rand bleibt. */
#sofort-einschaetzung .est-actions .btn-line,
#sofort-einschaetzung .est-actions .btn-ghost {
  color: #4a3c26 !important;
  border-color: rgba(150, 115, 61, 0.55) !important;
  font-weight: 500 !important;
}
#sofort-einschaetzung .est-actions .btn-line:hover,
#sofort-einschaetzung .est-actions .btn-ghost:hover {
  color: #241708 !important;
  border-color: var(--gold-dim) !important;
  background: rgba(169, 123, 46, 0.07) !important;
}


/* ============================================================
   SCHRITT-KARTEN, Yuriy 23.07.2026 (zweiter Anlauf)
   Der Rahmen umschliesst nur den Inhalt, nicht die volle
   Schritthoehe (die traegt weiter das Sticky-Timing). 2px stark,
   metallisches Logo-Gold als Verlauf, per Masken-Technik damit
   der Grund durchscheinen kann.
   ============================================================ */
.step-karte {
  position: relative;
  padding: 30px 34px;
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.03);
}
.step-karte::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 12px; padding: 2px;
  background: linear-gradient(135deg, #8a6a2c 0%, #eed9a3 38%, #c9a25e 62%, #6d5219 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
/* Mobil stapeln die Karten bereits mit eigenem Rahmen: dort keine
   doppelte Fassung. */
@media (max-width: 900px) {
  .step-karte { padding: 0; background: transparent; }
  .step-karte::before { display: none; }
}

/* Schritt 3: beide Verweis-Knoepfe in EINER Zeile halten */
.step-karte .story-links {
  display: flex; flex-wrap: nowrap; gap: 10px;
}
.step-karte .story-links .btn {
  white-space: nowrap;
  padding-left: 18px; padding-right: 18px;
}

/* ============================================================
   V2-BAUSTEINE (Audit-Umsetzung 24.07.2026)
   Aktive Seite in der Navigation, Header-WhatsApp-Button,
   Anker-Zeile, Meisterin-Block, Standort-Streifen, svc-Stichpunkte.
   ============================================================ */

/* Aktive Seite: goldene Linie + volle Farbe, Desktop-Nav + Footer + Mobile */
.main-nav a[aria-current="page"] { color: var(--gold-bright); position: relative; }
.main-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent); }
body.hell .site-header.scrolled .main-nav a[aria-current="page"] { color: var(--gold-dim); }
.footer-nav a[aria-current="page"], .mobile-menu nav a[aria-current="page"] { color: var(--gold-bright); }

/* Kleiner WhatsApp-Button im Header (v2): kalibriertes Gruen, gleiche Groesse wie header-mail */
.btn-wa-soft {
  background: #1da851; border: 1px solid #1da851; color: #fff;
  display: inline-flex; align-items: center; gap: 7px; }
.btn-wa-soft:hover { background: #128c7e; border-color: #128c7e; color: #fff; }
body.hell .btn-wa-soft { color: #fff; }
body.hell .btn-wa-soft:hover { color: #fff; }

/* Anker-Zeile direkt unter dem Sub-Hero: Orientierung auf der langen Seite */
.anchor-line { border-bottom: 1px solid var(--hairline-ink); background: var(--paper); }
.anchor-line .wrap { display: flex; gap: 2.2rem; justify-content: center; flex-wrap: wrap; padding: 14px 24px; }
.anchor-line a {
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; }
.anchor-line a:hover { color: var(--gold-dim); }
.anchor-line a span[aria-hidden] { color: var(--gold-dim); font-size: 0.7rem; }
@media (max-width: 899px) { .anchor-line { display: none !important; } }

/* Meisterin/Tradition: schlanker als die benefit-box, Bild rechts */
.meisterin-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.meisterin-grid figure { border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(24,14,4,0.18); }
.meisterin-grid figure img { display: block; width: 100%; height: auto; }
.meisterin-copy h2 { margin-bottom: 1.1rem; }
.meisterin-copy .section-lead { max-width: 56ch; }
.meisterin-fakten { display: flex; gap: 2.6rem; margin-top: 1.9rem; flex-wrap: wrap; }
.meisterin-fakten .mf { display: flex; flex-direction: column; gap: 2px; }
.meisterin-fakten .mf b { font-family: var(--display); font-size: 1.7rem; color: var(--gold-dim); font-weight: 500; }
.meisterin-fakten .mf span { font-size: 0.86rem; color: var(--ink-soft); }
@media (max-width: 899px) { .meisterin-grid { grid-template-columns: 1fr !important; } }

/* Standort-Streifen vor der End-CTA: NAP + Zeiten + Maps-Link */
.standort-strip { border-top: 1px solid var(--hairline-ink); }
.standort-strip .wrap { display: flex; gap: clamp(1.6rem, 4vw, 4rem); justify-content: center; flex-wrap: wrap; padding-top: 2.4rem; padding-bottom: 2.4rem; }
.standort-strip .st { min-width: 200px; }
.standort-strip .st h3 { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.55rem; }
.standort-strip .st p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }
.standort-strip .st a { white-space: nowrap; }

/* Leistungs-Karten: kompakte Stichpunkte fuellen die Leerzonen (Audit) */
.svc-points { margin-top: 1.1rem; display: flex; flex-direction: column; gap: 7px; }
.svc-points li { display: flex; gap: 10px; align-items: baseline; font-size: 0.93rem; color: var(--ink-soft); }
.svc-points li::before { content: "\2726"; color: var(--gold-dim); font-size: 0.7rem; flex: none; }

/* Hero: dezente Traditionszeile fuellt die Flaeche unter den CTAs (Audit 1920px) */
.hero-tradition { margin-top: 2rem; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240,234,217,0.5); }
.hero-tradition b { color: var(--gold-bright); font-weight: 500; }

/* v2: Hero-Lead, Story-Telefonzeile, Bewertungs-Link-Zeile */
.sub-hero .hero-lead { color: rgba(240,234,217,0.78); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 46ch; margin-top: 1.1rem; text-align: left; }
.step-tel { margin-top: 1rem; font-size: 0.9rem; color: rgba(240,234,217,0.6); }
.step-tel a { color: var(--gold-bright); white-space: nowrap; }
.reviews-link-line { text-align: center; margin-top: 2.4rem; }
section.meisterin { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); }

/* ============================================================
   MOBIL-FEINSCHLIFF (Yuriy-Feedback 24.07.2026)
   Voller Hero, zentrierte Hero-Texte, Lesbarkeit auf dem Bild,
   Header ohne WA-Knopf, Symmetrie bei Fakten/Standort/Bewertungen.
   ============================================================ */

/* Desktop-Detail: die Kontakt-Eyebrow zog links aus der Mittelachse.
   Die Eyebrow ist ein p und erbte sonst das left der Regel
   ".contact .contact-copy p" (Block mittig, Zeilen links), deshalb
   hier gezielt und spezifischer als p.eyebrow zentrieren. */
.contact .contact-copy p.eyebrow { text-align: center !important;
  width: auto !important; }

@media (max-width: 900px) {
  /* Startseiten-Hero fuellt den Bildschirm. lvh = groesste Viewport-Hoehe:
     so blitzt auch bei eingefahrener Browserleiste unten nichts Helles
     durch (svh davor als Fallback fuer aeltere Browser). */
  /* Ohne Header-Abzug: der Hero beginnt bei y=0 HINTER dem Header */
  .hero-hell { min-height: 100svh !important;
    min-height: 100lvh !important;
    display: flex !important; flex-direction: column !important;
    justify-content: center !important; }

  /* Unterseiten-Hero ebenfalls voll und mittig */
  .sub-hero { min-height: 100svh !important;
    min-height: 100lvh !important;
    align-items: center !important; }

  /* Goldene Rauten-Ornamente: auf kleinen Screens deutlich zuruecknehmen,
     sie lagen sonst markant hinter dem Text und zogen den Blick ab */
  .bg-ornament { opacity: 0.3 !important; }
  .hero-hell .bg-ornament, .sub-hero .bg-ornament { opacity: 0.16 !important; }

  /* Hero-Texte zentriert (Wunsch: wie H1/Eyebrow) */
  .sub-hero-inner { text-align: center !important; }
  .sub-hero .breadcrumb { justify-content: center !important; }
  .sub-hero h1 { margin-left: auto !important; margin-right: auto !important; }
  .sub-hero .hero-lead { margin-left: auto !important; margin-right: auto !important;
    text-align: center !important; }
  .sub-hero .hero-ctas { justify-content: center !important; }
  .hero-features li { justify-content: center !important; }

  /* Lesbarkeit: kraeftigeres, gleichmaessiges Overlay ueber dem Hero-Bild */
  .sub-hero-bg img { width: 100% !important;
    -webkit-mask-image: none !important; mask-image: none !important; }
  .sub-hero-bg::after { background:
    linear-gradient(180deg, rgba(24,15,5,0.88) 0%, rgba(24,15,5,0.74) 42%, rgba(24,15,5,0.9) 100%) !important; }

  /* Gruener WhatsApp-Knopf im Header nur auf Desktop; mobil gibt es
     die CTA-Leiste unten (verdeckte sonst Logo + Menue) */
  .header-wa { display: none !important; }

  /* Meisterin-Fakten: drei gleiche Spalten statt 2+1-Umbruch */
  .meisterin-fakten { display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important; justify-items: center !important;
    text-align: center !important; margin-left: auto !important;
    margin-right: auto !important; }
  .meisterin-fakten .mf { align-items: center !important; }
  .meisterin-copy { text-align: center !important; }
  .meisterin-copy .section-lead { margin-left: auto !important; margin-right: auto !important; }

  /* Standort-Streifen: einspaltig, alles auf einer Mittelachse */
  .standort-strip .wrap { flex-direction: column !important;
    align-items: center !important; gap: 1.9rem !important; }
  .standort-strip .st { text-align: center !important; min-width: 0 !important;
    width: 100% !important; }

  /* Bewertungen: Kopf, Badge und Karten sauber mittig */
  .reviews-head { text-align: center !important; }
  .google-rating-badge { margin-left: auto !important; margin-right: auto !important; }
  .review-grid { grid-template-columns: 1fr !important; max-width: 440px !important;
    margin-left: auto !important; margin-right: auto !important; }
}

/* ============================================================
   MOBIL: WENIGER BOXEN (Yuriy 24.07.2026)
   Karten-Container werden flach, nur die inneren Elemente
   (Options-Knoepfe, Bilder, Zitate) behalten Kontur. Keine
   Box-in-Box-Verschachtelung mehr auf kleinen Screens.
   ============================================================ */
@media (max-width: 900px) {
  /* Sofort-Einschaetzung: aeussere Karte aufloesen, nur die
     drei Options-Boxen bleiben */
  .est-card { background: none !important; border: none !important;
    box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
  .est-card::before, .est-card::after { display: none !important; }
  .est-keyline, .est-orb, .est-star { display: none !important; }

  /* Benefit-Box: Bild und Text frei auf dem Sektionsgrund */
  .benefit-box { background: none !important; border: none !important;
    box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
  .benefit-box .bb-media img { border-radius: 12px !important; }

  /* Leistungs-Karten (Yuriy Runde 5): Bild + Text als EINE Box,
     Bild oben randlos, Text zentriert darunter */
  .svc-row { display: block !important; background: #fffdf8 !important;
    border: 1px solid var(--hairline-ink) !important; border-radius: 14px !important;
    box-shadow: var(--shadow-card) !important; overflow: hidden !important;
    padding: 0 !important; }
  .svc-row .svc-media { margin: 0 !important; border: none !important;
    border-radius: 0 !important; box-shadow: none !important; }
  .svc-row .svc-media img { border-radius: 0 !important; }
  .svc-row .svc-body { padding: 20px 18px 24px !important; text-align: center !important; }
  .svc-row .svc-points { width: max-content !important; max-width: 100% !important;
    margin-left: auto !important; margin-right: auto !important; }
  .svc-row .svc-points li { text-align: left !important; }
  .svc-eck { display: none !important; }

  /* Nabi-Versprechen: Punkte als flache Liste mit Trennlinie statt 4 Karten */
  .pg-item { background: none !important; border: none !important;
    box-shadow: none !important; border-radius: 0 !important;
    padding: 18px 0 22px !important;
    border-bottom: 1px solid var(--hairline-ink) !important; }
  .pg-item::before, .pg-item::after { display: none !important; }
  .promise-grid-4 .pg-item:last-child { border-bottom: none !important; }
}

/* Mobil: Bewertungs-Badge weg; die Zitat-Karten behalten ihre Box
   (Yuriy 24.07., Rueckbau der boxenlosen Variante auf Wunsch) */
@media (max-width: 900px) {
  .google-rating-badge { display: none !important; }
}

/* Kontakt-Links ohne Unterstrich-Linien, alle Bildschirme (Yuriy 24.07.):
   die Farbe traegt die Erkennbarkeit, die Linien machten die Daten unruhig */
.detail-row dd a,
body.hell .detail-row dd a,
body.hell .contact .detail-row dd a,
.standort-strip .st a {
  border-bottom: none !important;
  text-decoration: none !important;
}

/* Kontakt-Intro mobil mittig: dieselbe spezifischere Links-Regel wie bei
   der Eyebrow haette sonst auch hier gewonnen */
@media (max-width: 900px) {
  .contact .contact-copy p { text-align: center !important; width: auto !important;
    margin-left: auto !important; margin-right: auto !important; }
}

/* Meisterin-Fakten: Stern dezenter als die Zahl (alle Ansichten) */
.meisterin-fakten .mf .mf-star { font-size: 0.6em; vertical-align: 3px; letter-spacing: 0; }

@media (max-width: 900px) {
  /* "Alle Bewertungen auf Google lesen" nur auf Desktop */
  .reviews-google-link { display: none !important; }
}

/* Trust-Zeile unter den Hero-Buttons: mobil zwei ganze Zeilen statt
   hartem Umbruch mitten im Satz (Yuriy 24.07.) */
.hh-part { white-space: nowrap; }
@media (max-width: 900px) {
  .hero-hours { font-size: 0.72rem !important; letter-spacing: 0.09em !important; }
  .hero-hours .hh-sep { display: none !important; }
  .hero-hours .hh-part { display: block !important; line-height: 1.9 !important; }
}

/* .nbr: Wortgruppen, die nie mitten im Ausdruck umbrechen sollen */
.nbr { white-space: nowrap; }



/* Mobil: schmalere Seitenraender (~3% statt ~5%) + Meisterin-H2 sicher dreizeilig */
@media (max-width: 900px) {
  .wrap { padding-left: clamp(12px, 3vw, 20px) !important;
    padding-right: clamp(12px, 3vw, 20px) !important; }
  .meisterin-copy h2 { font-size: clamp(1.4rem, 6.2vw, 1.75rem) !important; }
}

/* ============================================================
   MOBIL-HERO (Yuriy 24.07.2026, korrigiert): Vorteile bleiben wie
   gehabt UEBER den Buttons. Nur die Trust-Zeile unter den Buttons
   wird pro Punkt eine Zeile und bleibt in Button-Breite.
   ============================================================ */
@media (max-width: 900px) {
  .hero-hell-copy .hero-ctas, .sub-hero-inner .hero-ctas {
    flex-direction: column !important; align-items: center !important;
    gap: 12px !important; width: 100% !important; }
  .hero-hell-copy .hero-ctas .btn, .sub-hero-inner .hero-ctas .btn {
    width: 100% !important; max-width: 340px !important; justify-content: center !important; }
  .hero-hours { max-width: 340px !important; margin-left: auto !important;
    margin-right: auto !important; }
}


/* ============================================================
   MOBIL-PAKET (Yuriy 24.07.2026, Runde 5) - NUR max-width 900,
   Desktop bleibt unberuehrt: Karten-Texte zentriert, Slider-Fixes,
   Story-Bild randlos in der Karte, Bewertungen als Wisch-Slider,
   FAQ zentriert.
   ============================================================ */
@media (max-width: 900px) {
  /* Startseiten-Leistungskarten: alles auf die Mittelachse */
  .sc-card .sc-body { text-align: center !important; }
  .sc-card .sc-body li { justify-content: center !important; text-align: center !important; }
  .sc-card .sc-body a { justify-content: center !important; }

  /* Werkstatt-Slider: Bilder liessen sich vertikal verschieben */
  .craft-strip { overflow-y: hidden !important; }

  /* Vorher/Nachher-Slider: Ziehen am Griff scrollt nicht mehr die Seite,
     vertikales Wischen auf dem Bild bleibt normales Seiten-Scrollen */
  .ba-slider { touch-action: pan-y; }
  .ba-handle { touch-action: none; }

  /* Story-Karten: das Bild fuellt die Karte bis an die Kanten
     (links/rechts/oben randlos), der Text darunter behaelt sein Padding */
  .story-grid.is-stacked .story-step > .story-video {
    display: block !important; width: calc(100% + 32px) !important;
    max-width: none !important; height: auto !important;
    margin: -14px -16px 16px -16px !important;
    border-radius: 17px 17px 0 0 !important; }

  /* Bewertungen: seitlicher Wisch-Slider mit Einrast-Punkten */
  .review-grid { display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 14px !important; max-width: none !important;
    margin: 0 -12px !important; padding: 4px 12px 16px !important;
    scrollbar-width: none; }
  .review-grid::-webkit-scrollbar { display: none; }
  .review-grid .review-card { flex: 0 0 86% !important;
    scroll-snap-align: center !important; }

}

/* Meisterin-Sektion mobil: Bild randlos bis an beide Seiten und bis zum
   Sektionsende, Text darueber auf der Mittelachse (Yuriy 24.07.) */
@media (max-width: 900px) {
  section.meisterin { overflow: hidden !important; padding-bottom: 0 !important; }
  .meisterin-grid figure {
    width: calc(100% + 2 * clamp(12px, 3vw, 20px)) !important;
    margin: 30px calc(-1 * clamp(12px, 3vw, 20px)) 0 !important;
    border-radius: 0 !important; box-shadow: none !important; }
  .meisterin-grid figure img { border-radius: 0 !important; }
  .meisterin-fakten { margin-bottom: 4px !important; }
}

/* Siegel (Handwerkskammer/IHK): ohne Kasten, liegen direkt auf dem
   Hintergrund (Desktop + Mobil, Yuriy 24.07.) */
.cert-item, .cert-item img {
  background: transparent !important; border: none !important;
  box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; }
.cert-item img { mix-blend-mode: multiply !important; }

/* Ergebnisse-Sektion mobil: Bilder randlos ueber die volle Breite,
   nahtlos gestapelt, Beschreibung als Overlay AUF dem Bild statt
   Text dazwischen (Yuriy 24.07.) */
@media (max-width: 900px) {
  .results .results-main, .results .results-pair {
    margin-left: calc(-1 * clamp(12px, 3vw, 20px)) !important;
    margin-right: calc(-1 * clamp(12px, 3vw, 20px)) !important; }
  .results .results-main { position: relative !important; margin-bottom: 0 !important; }
  .results .ba-slider { border-radius: 0 !important; border: none !important; }
  .results .results-pair { gap: 0 !important; margin-top: 0 !important; }
  .results .rs-item { margin: 0 !important; border-radius: 0 !important;
    border: none !important; box-shadow: none !important; overflow: hidden !important; }
  .results .rs-item img { border-radius: 0 !important; display: block !important; }
  /* Die Slider-Beschreibung wird zur Overlay-Pill oben mittig auf dem Bild */
  .results .results-note { position: absolute !important; top: 12px !important;
    left: 50% !important; transform: translateX(-50%) !important;
    margin: 0 !important; z-index: 6 !important; width: max-content !important;
    max-width: 92% !important; background: rgba(24, 15, 5, 0.74) !important;
    color: #f4e9d6 !important; padding: 7px 14px !important;
    border-radius: 999px !important; font-size: 0.7rem !important;
    letter-spacing: 0.05em !important; line-height: 1.45 !important;
    text-align: center !important; }
}

/* Story-Schritte mobil: Karten randlos ueber die volle Breite,
   Bilder 100% ohne Eckenradius (Yuriy 24.07.) */
@media (max-width: 900px) {
  .story-grid.is-stacked .story-step {
    margin-left: calc(-1 * clamp(12px, 3vw, 20px)) !important;
    margin-right: calc(-1 * clamp(12px, 3vw, 20px)) !important;
    border-radius: 0 !important;
    border-left: none !important; border-right: none !important; }
  .story-grid.is-stacked .story-step > .story-video { border-radius: 0 !important; }
}

/* Bewertungs-Slider mobil: breitere Karten; Kontakt-Sektion komplett
   mittig (spezifischer als die Desktop-Links-Regeln) (Yuriy 24.07.) */
@media (max-width: 900px) {
  .review-grid .review-card { flex: 0 0 94% !important; }
  .craft-slider { position: relative; }
  .contact .contact-copy h2 { text-align: center !important; width: auto !important;
    margin-left: auto !important; margin-right: auto !important; }
  .contact .detail-row { justify-content: center !important; text-align: center !important;
    flex-direction: column !important; align-items: center !important; gap: 4px !important; }
  .contact .detail-row dt, .contact .detail-row dd { text-align: center !important; }
  .contact .contact-details dl { width: 100% !important; }
}

/* Ergebnis-Badges mobil: immer einzeilig (Yuriy 24.07.) */
@media (max-width: 900px) {
  .rs-item figcaption { white-space: nowrap !important;
    font-size: 0.64rem !important; letter-spacing: 0.07em !important;
    padding: 6px 12px !important; max-width: none !important; }
}

/* Story mobil: letzte Karte schliesst die Sektion ab, kein Rand
   zur naechsten Sektion (Yuriy 24.07.) */
@media (max-width: 900px) {
  section.story { padding-bottom: 0 !important; }
  .story-grid.is-stacked .story-step:last-child { margin-bottom: 0 !important; }
  .story-grid.is-stacked .story-steps { margin-bottom: 0 !important; padding-bottom: 0 !important; }
}

/* "Drei Handwerke"-Karten mobil: randlos ueber die volle Breite,
   Bilder ohne Eckenradius, Karten nahtlos untereinander (Yuriy 24.07.) */
@media (max-width: 900px) {
  .service-cards { gap: 0 !important; }
  .sc-card { margin-left: calc(-1 * clamp(12px, 3vw, 20px)) !important;
    margin-right: calc(-1 * clamp(12px, 3vw, 20px)) !important;
    border-radius: 0 !important; border-left: none !important;
    border-right: none !important; box-shadow: none !important; }
  .sc-card + .sc-card { border-top: none !important; }
  .sc-card .sc-media, .sc-card .sc-media img { border-radius: 0 !important; }
}

/* Bewertungs-Slider-Pfeile: mittig auf der Karte, helle Optik passend
   zur Creme-Sektion statt dunklem Werkstatt-Stil (Yuriy 24.07.) */
@media (max-width: 900px) {
  .craft-slider:has(.review-grid) .craft-nav {
    position: absolute !important; top: 50% !important;
    transform: translateY(-50%) !important;
    background: #fffdf8 !important; color: #7c5e1d !important;
    border: 1px solid rgba(124, 94, 29, 0.4) !important;
    box-shadow: 0 6px 18px rgba(24, 14, 4, 0.18) !important; }
  .craft-slider:has(.review-grid) .craft-nav:active { background: #f4e9d6 !important; }
  .craft-slider:has(.review-grid) .craft-nav-prev { left: 6px !important; }
  .craft-slider:has(.review-grid) .craft-nav-next { right: 6px !important; }
}

/* Hero-Vorteile mobil: alle Texte zweizeilig, Icons mittig und damit
   pro Reihe exakt auf einer Hoehe (Yuriy 24.07.) */
@media (max-width: 900px) {
  .hero-features li { align-items: center !important; }
  .hero-features .hf-ic { flex: none !important; }
}

/* Benefit-Sektion mobil (Yuriy 24.07.): Reihenfolge Text-Kopf > Bild >
   Punkte/Buttons. Das Bild laeuft randlos ueber die volle Breite ohne
   Eckenradius. bb-content wird per display:contents aufgeloest, damit
   das Bild zwischen Kopf und Punkte ruecken kann. */
@media (max-width: 900px) {
  .benefit-box { display: flex !important; flex-direction: column !important; }
  .benefit-box .bb-content { display: contents !important; }
  .benefit-box .bb-content .eyebrow { order: 1 !important; }
  .benefit-box .bb-content h2 { order: 2 !important; }
  .benefit-box .bb-satz { order: 3 !important; }
  .benefit-box .bb-media { order: 4 !important;
    width: calc(100% + 2 * clamp(12px, 3vw, 20px)) !important;
    margin: 22px calc(-1 * clamp(12px, 3vw, 20px)) !important;
    border-radius: 0 !important; box-shadow: none !important; }
  .benefit-box .bb-media img { border-radius: 0 !important; }
  .benefit-box .bb-points { order: 5 !important; margin-top: 2px !important; }
  .benefit-box .bb-contact { order: 6 !important; }

  /* 4. Vorteil (Google-Link): Icon exakt auf Reihenhoehe wie die anderen */
  .hero-features li a { align-items: center !important; display: flex !important; }
}

/* Bewertungs-Slider: weicher Lauf beim Pfeil-Klick (Yuriy 24.07.) */
@media (max-width: 900px) {
  .review-grid { scroll-behavior: smooth !important; }
}
@media (prefers-reduced-motion: reduce) {
  .review-grid { scroll-behavior: auto !important; }
}

/* ============================================================
   MOBIL: RUHIGE TEXTFORMEN (Yuriy 24.07.2026)
   text-wrap: pretty verhindert einzelne Woerter in der letzten
   Zeile und zackige Blockformen; balance gleicht mehrzeilige
   Ueberschriften aus. Gilt website-weit auf kleinen Screens.
   ============================================================ */
@media (max-width: 900px) {
  p, li, dd, dt, blockquote, figcaption, summary,
  .section-lead, .hero-lead, .bb-satz, .promise-intro,
  .hero-hours, .est-mini, .results-note {
    text-wrap: pretty;
  }
  h1, h2, h3, .eyebrow {
    text-wrap: balance;
  }
}

/* Leistungs-Karten mobil: lange Absaetze linksbuendig statt zentriert
   (zentrierter Langtext wirkt als unruhige Wand), Ueberschrift bleibt
   mittig, Punkte auf derselben linken Achse (Yuriy 24.07.) */
@media (max-width: 900px) {
  .svc-row .svc-body p { text-align: left !important; }
  .svc-row .svc-points { width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important; }
  .svc-row .svc-points li { text-align: left !important; }
}

/* Lange Absatz-Bloecke mobil linksbuendig: ab ~6 Zeilen wird zentrierter
   Text zur unruhigen Wand. Kurze Leads (Estimator, Kontakt, Story-Karten)
   bleiben mittig (Yuriy 24.07.) */
@media (max-width: 900px) {
  .meisterin-copy .section-lead,
  .promise-intro,
  .area-copy .section-lead {
    text-align: left !important;
  }
}

/* Leistungs-Karten mobil: randlos ueber die volle Breite, damit die
   Bilder ohne Seitenrand laufen, wie ueberall sonst (Yuriy 24.07.) */
@media (max-width: 900px) {
  .svc-row { margin-left: calc(-1 * clamp(12px, 3vw, 20px)) !important;
    margin-right: calc(-1 * clamp(12px, 3vw, 20px)) !important;
    border-radius: 0 !important; border-left: none !important;
    border-right: none !important; }
}

/* Leistungs-Karten mobil = Startseiten-Stil (Yuriy 24.07.):
   komplett randlos (keine Border, kein Schatten, kein Radius),
   nahtlos gestapelt, Bilder edge-to-edge. Dieses Muster ist der
   mobile Standard fuer die ganzen Seiten. */
@media (max-width: 900px) {
  .svc-rows { gap: 0 !important; }
  .svc-row { border: none !important; box-shadow: none !important;
    margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* ============================================================
   FULL-BLEED FINAL (Yuriy 24.07.2026): browserfeste Technik.
   width:100vw + margin calc(50% - 50vw) rendert in WebKit/Safari
   identisch zu Chrome; die vorherigen negativen clamp-Margins
   taten das nicht zuverlaessig. Ueberschreibt alle Full-Bleed-
   Bausteine als letzte Regel.
   ============================================================ */
@media (max-width: 900px) {
  .benefit-box .bb-media,
  .svc-row,
  .sc-card,
  .story-grid.is-stacked .story-step,
  .meisterin-grid figure,
  .results .results-main,
  .results .results-pair {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  /* Sicherheitsnetz gegen horizontales Wackeln durch 100vw.
     WICHTIG: clip statt hidden, denn overflow-x:hidden am body
     erzeugt einen Scroll-Container und bricht position:sticky
     (der Story-Stapeleffekt war dadurch tot). */
  body { overflow-x: clip !important; }
}

/* Story-Karten + Nabi-Versprechen mobil: zurueck auf linksbuendig
   (Yuriy 24.07.) */
@media (max-width: 900px) {
  .story-grid.is-stacked .step-karte,
  .story-grid.is-stacked .step-karte .eyebrow,
  .story-grid.is-stacked .step-karte h3,
  .story-grid.is-stacked .step-karte p,
  .story-grid.is-stacked .step-karte .step-tel {
    text-align: left !important;
  }
  .promise-head, .promise-head .eyebrow, .promise-head h2 {
    text-align: left !important;
  }
}

/* Nabi-Versprechen: die vier Punkte mobil linksbuendig,
   Icon an der linken Kante (Yuriy 24.07.) */
@media (max-width: 900px) {
  .pg-item, .pg-item h3, .pg-item p { text-align: left !important; }
  .pg-item .pg-icon { margin-left: 0 !important; margin-right: auto !important; }
  .promise-grid-4 { margin-left: 0 !important; }
}

/* Einzugsgebiet-Kopf + Leistungs-Karten-Ueberschriften mobil
   linksbuendig (Yuriy 24.07.) */
@media (max-width: 900px) {
  .area-copy, .area-copy .eyebrow, .area-copy h2 { text-align: left !important; }
  .area-facts { width: 100% !important; margin-left: 0 !important; }
  .area-facts li { justify-content: flex-start !important; text-align: left !important; }
  .svc-row .svc-body h3 { text-align: left !important; }
}

/* ============================================================
   MOBIL: ALLE SEKTIONS-KOEPFE LINKSBUENDIG (Yuriy 24.07.2026)
   Konsistente linke Leseachse fuer Eyebrows, Headlines und Leads
   aller Sektionen. Ausnahmen: Hero (bewusst mittig), Abschluss-CTA
   und Kontakt-Sektion (bewusst mittig bestellt).
   ============================================================ */
@media (max-width: 900px) {
  .section-head, .section-head .eyebrow, .section-head h2, .section-head .section-lead,
  .story-head, .story-head .eyebrow, .story-head h2,
  .reviews-head, .reviews-head .eyebrow, .reviews-head h2,
  .meisterin-copy, .meisterin-copy .eyebrow, .meisterin-copy h2,
  .faq .eyebrow, .faq h2, .chip-band-label {
    text-align: left !important;
  }
  .section-head h2, .meisterin-copy h2 { margin-left: 0 !important; }
  .section-head .section-lead { margin-left: 0 !important; }

  /* Ausnahmen bleiben mittig */
  .sub-cta .section-head, .sub-cta .section-head .eyebrow,
  .sub-cta .section-head h2, .sub-cta .section-head .section-lead,
  .contact .contact-copy, .contact .contact-copy .eyebrow,
  .contact .contact-copy h2 {
    text-align: center !important;
  }
}

/* Zurueck auf mittig mobil (Yuriy 24.07.): Versprechen-Punkte,
   Estimator-Kopf und Startseiten-Leistungs-Kopf */
@media (max-width: 900px) {
  .pg-item, .pg-item h3, .pg-item p { text-align: center !important; }
  .pg-item .pg-icon { margin-left: auto !important; margin-right: auto !important; }
  .estimator .section-head, .estimator .section-head .eyebrow,
  .estimator .section-head h2, .estimator .section-head .section-lead,
  .services .section-head, .services .section-head .eyebrow,
  .services .section-head h2, .services .section-head .section-lead {
    text-align: center !important;
  }
  .estimator .section-head h2, .estimator .section-head .section-lead,
  .services .section-head h2, .services .section-head .section-lead {
    margin-left: auto !important; margin-right: auto !important;
  }
}

/* Ergebnisse-Kopf mobil mittig; Story-Karten-Buttons linksbuendig
   (Yuriy 24.07.) */
@media (max-width: 900px) {
  .results .section-head, .results .section-head .eyebrow,
  .results .section-head h2, .results .section-head .section-lead {
    text-align: center !important;
  }
  .results .section-head h2, .results .section-head .section-lead {
    margin-left: auto !important; margin-right: auto !important;
  }
  .story-grid.is-stacked .step-karte .btn {
    margin-left: 0 !important; margin-right: auto !important; }
  .story-grid.is-stacked .step-karte .story-links {
    display: flex !important; justify-content: flex-start !important; }
}

/* Werkstatt-Kopf mobil mittig (Yuriy 24.07.) */
@media (max-width: 900px) {
  .craft .section-head, .craft .section-head .eyebrow,
  .craft .section-head h2, .craft .section-head .section-lead {
    text-align: center !important;
  }
  .craft .section-head h2, .craft .section-head .section-lead {
    margin-left: auto !important; margin-right: auto !important;
  }
}

/* Meisterin-Sektion mobil (Yuriy 24.07.): Reihenfolge Eyebrow > Headline >
   Bild (full-bleed) > Absatz > Fakten. Da der Text jetzt den Abschluss
   bildet, bekommt die Sektion ihren unteren Abstand zurueck. */
@media (max-width: 900px) {
  .meisterin-grid { display: flex !important; flex-direction: column !important; }
  .meisterin-grid .meisterin-copy { display: contents !important; }
  .meisterin-copy .eyebrow { order: 1 !important; }
  .meisterin-copy h2 { order: 2 !important; }
  .meisterin-grid figure { order: 3 !important;
    margin-top: 22px !important; margin-bottom: 26px !important; }
  .meisterin-copy .section-lead { order: 4 !important; }
  .meisterin-copy .meisterin-fakten { order: 5 !important; }
  section.meisterin { padding-bottom: clamp(3rem, 7vw, 5rem) !important; }
}

/* Einzugsgebiet mobil doch zentriert (Yuriy 24.07.): Kopf + Lead mittig,
   die Punkte als mittiger Block mit buendigen Zeilen */
@media (max-width: 900px) {
  .area-copy, .area-copy .eyebrow, .area-copy h2,
  .area-copy .section-lead { text-align: center !important; }
  .area-copy h2, .area-copy .section-lead {
    margin-left: auto !important; margin-right: auto !important; }
  .area-facts { width: max-content !important; max-width: 100% !important;
    margin-left: auto !important; margin-right: auto !important; }
  .area-facts li { justify-content: flex-start !important; text-align: left !important; }
}

/* FAQ-Kopf + Leistungs-Sektions-Koepfe mobil zentriert (Yuriy 24.07.) */
@media (max-width: 900px) {
  .faq .eyebrow, .faq h2 { text-align: center !important; }
  .light.svc .section-head, .light.svc .section-head .eyebrow,
  .light.svc .section-head h2, .light.svc .section-head .section-lead {
    text-align: center !important;
  }
  .light.svc .section-head h2, .light.svc .section-head .section-lead {
    margin-left: auto !important; margin-right: auto !important;
  }
}

/* Einzugsgebiet-Lead mobil: ausbalancierte, elegante Zeilen
   statt zackiger Form (Yuriy 24.07.) */
@media (max-width: 900px) {
  .area-copy .section-lead {
    text-wrap: balance !important;
    max-width: 34ch !important;
  }
}

/* Sektions-Trenner mobil (Yuriy 24.07.): feine Goldlinie mit
   Rauten-Kontur in der Mitte, an den hell-auf-hell-Uebergaengen */
@media (max-width: 900px) {
  .light.svc > .wrap::before,
  section.meisterin > .wrap::before,
  .estimator > .wrap::before,
  .promise.light > .wrap::before,
  .faq.light > .wrap::before,
  .craft.light > .wrap::before,
  .services.light > .wrap::before {
    content: "\25C7";
    display: block;
    max-width: 250px;
    margin: 0 auto 34px;
    text-align: center;
    font-size: 13px;
    line-height: 1;
    color: rgba(169, 123, 46, 0.85);
    background-image:
      linear-gradient(90deg, transparent, rgba(124, 94, 29, 0.35)),
      linear-gradient(90deg, rgba(124, 94, 29, 0.35), transparent);
    background-repeat: no-repeat;
    background-size: calc(50% - 17px) 1px;
    background-position: left center, right center;
  }
}

/* ============================================================================
   MOBIL-FUNDAMENT (Yuriy 25.07.2026)
   ============================================================================
   Ausgangslage laut Audit: die Seite war mobil über Monate sektionsweise
   nachgebessert worden. Ergebnis waren vier verschiedene Seitenränder
   (0/12/16/18px), sieben Fließtextgrößen (16 bis 18,9px), fünf Button-Breiten
   (291 bis 340px) in drei Höhen und Sektionsabstände zwischen 49 und 241px.
   Jede Sektion für sich war in Ordnung, zusammen wirkte es unruhig.

   Dieser Block setzt vier Dinge fest und ist bewusst die LETZTE Regel der
   Datei, damit er alle Altlasten gewinnt und jederzeit am Stück wieder
   entfernt werden kann:
     1. eine Kante        --m-gutter: 20px
     2. eine Textskala    17px Fließtext / 1,7 Zeilenhöhe
     3. ein Button-Format 100% Breite, 58px hoch, Kleinschreibung
     4. ein Rhythmus      72px Sektionspolster oben wie unten
   ============================================================================ */

@media (max-width: 900px) {

  /* Achtung: die Seite setzt html { font-size: 109.375% }, 1rem sind also
     17,5px. Die Mobil-Werte stehen deshalb bewusst in px, damit die Skala
     exakt bleibt und nicht mit der Grundgröße mitwandert. */
  :root {
    --m-gutter: 20px;
    --m-text: 17px;           /* eine Fließtextgröße für die ganze Seite */
    --m-lh: 1.7;
  }

  /* --- 1. EINE KANTE ------------------------------------------------------
     Alles, was Text trägt, startet bei exakt 20px. Vollflächige Motive
     (Bilder, Vorher/Nachher, Story-Karten) bleiben bewusst randlos, ihr
     Innenpolster wird unten auf denselben Wert gezogen. */

  .wrap {
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }

  /* Diese Elemente hatten eine eigene max-width und zentrierten sich damit
     auf eine abweichende Kante (Hero-Icons 18px, Kontaktknöpfe 38px). */
  .hero-features,
  .hero-hours,
  .hero-ctas .btn,
  .bb-contact .btn,
  .est-actions .btn,
  .area-facts,
  .meisterin-copy h2 {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Innenpolster der randlosen Blöcke auf dieselbe Kante */
  .svc-row .svc-body { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }
  .story-grid.is-stacked .story-step { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }
  .story-grid.is-stacked .story-step > .story-video {
    width: calc(100% + (2 * var(--m-gutter))) !important;
    margin-left: calc(-1 * var(--m-gutter)) !important;
    margin-right: calc(-1 * var(--m-gutter)) !important;
  }

  /* --- 2. EINE TEXTSKALA --------------------------------------------------
     Vorher lagen sieben Fließtextgrößen nebeneinander. Alles Fließtext ist
     jetzt 17px/1,7, Überschriften folgen einer festen Stufung. */

  .hero-lead,
  .bb-content .bb-satz,
  .bb-points li,
  .svc-body p,
  .section-lead,
  .promise-intro,
  .pg-item p,
  .faq-item p,
  .af-text,
  .standort-strip .st p,
  .story-grid.is-stacked .step-karte p {
    font-size: var(--m-text) !important;
    line-height: var(--m-lh) !important;
  }

  .sub-hero h1 { font-size: 28px !important; line-height: 1.18 !important; }
  .bb-content h2,
  .section-head h2,
  .reviews-head h2,
  .story-head h2,
  .meisterin-copy h2,
  .promise-head h2 { font-size: 26px !important; line-height: 1.2 !important; }
  .svc-body h3,
  .story-grid.is-stacked .step-karte h3 { font-size: 21px !important; line-height: 1.25 !important; }
  .pg-item h3,
  .faq-item summary { font-size: 19px !important; line-height: 1.35 !important; }

  /* Eyebrows: 0,34em Laufweite sprengte auf 375px jede zweite Zeile
     ("HÄUFIGE FRAGEN ZUR TEPPICHREPARATUR" ging über zwei Zeilen). */
  .eyebrow,
  .chip-band-label {
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
    line-height: 1.5 !important;
  }

  /* --- 3. EIN BUTTON-FORMAT -----------------------------------------------
     Vorher: 291/300/320/340px Breite, 54/59/65px Höhe, Versalien gegen
     Kleinschreibung und drei Laufweiten (btn-tel 0,86 / btn-wa 2,01 /
     btn-mail 2,58 px), weshalb zwei untereinanderstehende Knöpfe nie gleich
     aussahen. Übernommen wird die Hero-Variante: Kleinschreibung, ruhig,
     mobil deutlich besser lesbar als gesperrte Versalien. */

  /* Die Selektoren sind bewusst tief geschachtelt: die Altregeln setzen
     max-width mit !important auf .contact .hero-ctas .btn (320px) und
     .story-grid.is-stacked .step-karte .btn (300px) und würden sonst
     gewinnen. */
  .hero-ctas .btn,
  .sub-hero .hero-ctas .btn,
  .contact .hero-ctas .btn,
  .sub-cta .hero-ctas .btn,
  .hero-blend .hero-ctas .btn,
  .mobile-menu .mobile-menu-contact .btn,
  .benefit-box .bb-contact .btn,
  .story-grid.is-stacked .step-karte .btn,
  .story-grid.is-stacked .step-karte .story-links .btn,
  .estimator .est-actions .btn,
  #sofort-einschaetzung .est-actions .btn {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 58px !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
  }

  /* Knopfgruppen stapeln immer mit demselben Abstand */
  .hero-ctas,
  .contact .hero-ctas,
  .sub-cta .hero-ctas,
  .mobile-menu-contact,
  .bb-contact,
  .est-actions,
  #sofort-einschaetzung .est-actions,
  .story-grid.is-stacked .step-karte .story-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* --- 4. EIN RHYTHMUS ----------------------------------------------------
     Gemessene Lücken zwischen Sektionen lagen zwischen 49 und 241px. */

  main > section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
  /* Der Zierstrich sitzt IM oberen Polster, statt es zu verlängern. */
  .light.svc > .wrap::before,
  section.meisterin > .wrap::before,
  .estimator > .wrap::before,
  .promise.light > .wrap::before,
  .faq.light > .wrap::before,
  .craft.light > .wrap::before,
  .services.light > .wrap::before {
    margin-top: -18px !important;
    margin-bottom: 30px !important;
  }
}

/* ============================================================================
   MOBIL-KORREKTUREN (Yuriy 25.07.2026)
   Baut auf dem Fundament darüber auf: erst das Raster, dann die Einzelfälle,
   die im Audit als "unschöne Umbrüche" oder Überlappungen aufgefallen sind.
   ============================================================================ */

@media (max-width: 900px) {

  /* --- 5. EINE LESEACHSE --------------------------------------------------
     Vorher standen neun Sektionsköpfe mittig und vier linksbündig, beim
     Nabi-Versprechen sogar Kopf links und Punkte mittig. Alles liest jetzt
     an derselben linken Kante. Bewusste Ausnahmen: der Hero und der
     Abschluss-CTA, weil beide als eigenständige Bühne funktionieren. */

  .bb-content, .bb-content .eyebrow, .bb-content h2, .bb-content .bb-satz,
  .section-head, .section-head .eyebrow, .section-head h2, .section-head .section-lead,
  .light.svc .section-head, .light.svc .section-head .eyebrow,
  .light.svc .section-head h2, .light.svc .section-head .section-lead,
  .results .section-head, .results .section-head h2, .results .section-head .section-lead,
  .estimator .section-head, .estimator .section-head .eyebrow,
  .estimator .section-head h2, .estimator .section-head .section-lead,
  .promise-head, .promise-head .eyebrow, .promise-head h2, .promise-intro,
  .pg-item, .pg-item h3, .pg-item p,
  .faq .eyebrow, .faq h2,
  .area-copy, .area-copy .eyebrow, .area-copy h2, .area-copy .section-lead,
  .standort-strip .st, .standort-strip .st h3, .standort-strip .st p,
  .cert-item, .cert-item p {
    text-align: left !important;
  }
  .section-head h2, .section-head .section-lead,
  .area-copy h2, .area-copy .section-lead,
  .results .section-head h2, .results .section-head .section-lead {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .pg-item .pg-icon { margin-left: 0 !important; margin-right: auto !important; }
  .area-facts {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .meisterin-grid .meisterin-copy > * { align-self: stretch !important; }
  .meisterin-copy .eyebrow { text-align: left !important; }

  /* Ausnahmen: mittig */
  .sub-hero-inner, .sub-hero-inner .breadcrumb, .sub-hero h1, .sub-hero .hero-lead,
  .sub-cta .section-head, .sub-cta .section-head .eyebrow,
  .sub-cta .section-head h2, .sub-cta .section-head .section-lead {
    text-align: center !important;
  }

  /* --- 6. HERO-ICONS AUF ZWEI ACHSEN -------------------------------------
     Die Rasterzellen waren exakt gleich breit, der Inhalt darin aber
     zentriert. Dadurch standen die vier Icons bei x = 39 / 209 / 37 / 218,
     die rechte Spalte also 9px versetzt. */
  .hero-features li,
  .hero-features li > a {
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }
  .hero-features .hf-t { text-align: left !important; }

  /* --- 7. BEWERTUNGEN: PFEILE UNTER DEN SLIDER ---------------------------
     Sie lagen mit deckender Fläche mitten auf dem Zitattext ("angebracht",
     "Hol-"). Erst waren sie deshalb mobil ganz aus, aber dann war nicht mehr
     zu erkennen, dass es ein Slider ist (Yuriys Rückmeldung). Sie stehen
     jetzt als Paar mittig UNTER den Karten, im Fluss statt absolut. */

  /* Das Google-Siegel war mobil komplett ausgeblendet, ausgerechnet in der
     Bewertungs-Sektion. Kommt zurück, linksbündig unter der Überschrift. */
  .reviews-head .google-rating-badge {
    display: inline-flex !important;
    margin-left: 0 !important;
    margin-top: 16px !important;
  }

  /* --- 8. STORY: STAPEL BLEIBT, ANSCHNITT WEG ----------------------------
     Erster Versuch am 25.07. war, den Sticky-Stapel mobil aufzulösen, weil
     Karte 2 den grünen CTA von Karte 1 mittendurch schnitt. Yuriy will den
     Stapeleffekt behalten, also bleibt sticky und stattdessen bekommt jede
     Karte unten so viel Polster, dass beim Überschieben zuerst leerer Raum
     verdeckt wird und der Knopf sauber hinter der Kante der nächsten Karte
     verschwindet, statt quer durchgeschnitten zu werden. */
  .story-grid.is-stacked .story-step {
    padding-bottom: 92px !important;
  }

  /* --- 9. ERGEBNISSE: NOTIZ UNTER DEN SLIDER ------------------------------
     Sie lag als halbtransparente Pille über dem Teppichmotiv, zweizeilig,
     12px, auf sehr buntem Grund. */
  .results .results-note {
    position: static !important;
    width: auto !important;
    margin: 18px var(--m-gutter) 0 !important;
    padding: 0 !important;
    background: none !important;
    backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: left !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
  }

  /* --- 10. MEISTERIN-FAKTEN ----------------------------------------------
     Drei Spalten auf 375px erzwangen den Trennstrich-Umbruch
     "Jahre Teppich-/Handwerk" und ließen die Blöcke unterschiedlich hoch
     stehen. Jetzt drei ruhige Zeilen mit Haarlinie. */
  .meisterin-fakten {
    display: block !important;
    width: 100% !important;
    margin-top: 26px !important;
  }
  .meisterin-fakten .mf {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 18px !important;
    text-align: left !important;
    padding: 13px 0 !important;
    border-top: 1px solid rgba(150, 115, 61, 0.18) !important;
  }
  .meisterin-fakten .mf:last-child { border-bottom: 1px solid rgba(150, 115, 61, 0.18) !important; }
  .meisterin-fakten .mf b {
    font-size: 1.5rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
  .meisterin-fakten .mf span {
    font-size: 0.95rem !important;
    text-align: right !important;
  }

  /* --- 11. KEINE WAISENWÖRTER --------------------------------------------
     "Nabi." stand im Abschluss-CTA allein auf Zeile 4, Zeile 2 lief bis 8px
     an den Rand. balance verteilt die Zeilen gleichmäßig. */
  .sub-cta h2, .sub-cta .section-lead,
  .section-head h2, .bb-content h2, .story-head h2, .reviews-head h2,
  .promise-head h2, .meisterin-copy h2, .faq h2, .pg-item h3, .svc-body h3 {
    text-wrap: balance !important;
    hyphens: none !important;
  }

  /* --- 12. FOOTER --------------------------------------------------------
     Die Links waren je Spalte zentriert, dadurch franste die linke Kante
     dreifach aus (24/40/62px). Bei 320px lief "Teppichreparatur" 12px über
     den Rand. Jetzt zwei gleiche Spalten, saubere Kanten. */
  .site-footer .footer-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 18px !important;
    width: 100% !important;
    text-align: left !important;
  }
  .site-footer .footer-nav a {
    text-align: left !important;
    letter-spacing: 0.12em !important;
    font-size: 0.75rem !important;
    min-height: 24px !important;
  }
  /* Trennpunkt hing am Zeilenende, danach brach die Adresse um. */
  .site-footer .footer-line .fl-sep { display: none !important; }
  .site-footer .footer-line .fl-teil { display: block !important; }
  .site-footer .footer-line { line-height: 1.7 !important; }

  /* --- 13. EINZUGSGEBIET: KARTENFUSSZEILE --------------------------------
     "▪ ATELIER FRANKFURT AM MAIN ·" / "ABHOLSERVICE IM UMKREIS VON" /
     "150 KM": hängender Trennpunkt, danach zwei Wörter allein. */
  .area-map figcaption {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.14em !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }
  .area-map figcaption .fc-sep { display: none !important; }

  /* --- 14. VERSPRECHEN: EIN AKZENT ---------------------------------------
     Gold, Grün, Blaugrau und Terra nebeneinander lesen sich auf dem Desktop
     als Akzentsatz. Mobil untereinander wirkte es zufällig. */
  .promise-grid-4 .pg-item:nth-child(2) .pg-icon,
  .promise-grid-4 .pg-item:nth-child(3) .pg-icon,
  .promise-grid-4 .pg-item:nth-child(4) .pg-icon {
    color: var(--gold-dim) !important;
    background: rgba(201, 162, 94, 0.14) !important;
  }
  .promise-grid-4 .pg-item:nth-child(2)::before,
  .promise-grid-4 .pg-item:nth-child(3)::before,
  .promise-grid-4 .pg-item:nth-child(4)::before {
    color: var(--gold) !important;
  }

  /* --- 15. SIEGEL --------------------------------------------------------
     Zwei Logos in verschiedenen Höhen nebeneinander wirkten schief. */
  .cert-strip .cert-item img {
    height: 62px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
  .cert-strip .cert-item p {
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    line-height: 1.45 !important;
  }

  /* --- 16. BEDIENBARKEIT -------------------------------------------------
     Antippbare Ziele unter 44px: Google-Link im Hero (35), die drei
     Kontaktlinks im Standort-Streifen (24) und die Telefonnummer im
     Einzugsgebiet (27). */
  .standort-strip .st p a,
  .area-facts .area-tel,
  .hero-features li > a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }
  .standort-strip .st p a { min-height: 40px !important; }

  /* Die feste CTA-Leiste saß auf iPhones im Wischbereich. */
  .mobile-cta {
    padding-bottom: env(safe-area-inset-bottom) !important;
    box-sizing: content-box !important;
  }

  /* Aktive Seite im Menü war nicht erkennbar. */
  .mobile-menu nav a[aria-current="page"] {
    color: var(--gold-bright) !important;
    position: relative !important;
  }
  .mobile-menu nav a[aria-current="page"]::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -6px !important;
    width: 26px !important;
    height: 1px !important;
    transform: translateX(-50%) !important;
    background: var(--gold) !important;
  }
}

/* Sehr schmale Geräte (iPhone SE): die Öffnungszeiten liefen bei 320px
   in gesperrten Versalien bis an die Kante und wurden angeschnitten. */
@media (max-width: 360px) {
  .hero-hours {
    font-size: 0.7rem !important;
    letter-spacing: 0.06em !important;
    line-height: 1.6 !important;
  }
  .hero-hours .hh-sep { display: none !important; }
  .hero-hours .hh-part { display: block !important; }
}

/* ============================================================================
   ANKER-ZEILE MOBIL (Yuriy 25.07.2026)
   Die Sprungmarken waren unter 900px komplett ausgeblendet. Bei rund 16.500px
   Seitenhöhe war das die einzige Orientierung, die gefehlt hat. Sie kommt als
   wischbare Chip-Zeile zurück: nur eine Zeile hoch, klebt unter dem Header,
   die angeschnittene letzte Marke zeigt, dass es weitergeht.
   ============================================================================ */
@media (max-width: 899px) {
  .anchor-line {
    display: block !important;
    position: sticky !important;
    top: 62px !important;
    z-index: 40 !important;
    background: rgba(250, 246, 238, 0.94) !important;
    backdrop-filter: saturate(1.2) blur(10px) !important;
    -webkit-backdrop-filter: saturate(1.2) blur(10px) !important;
  }
  .anchor-line .wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px var(--m-gutter) !important;
  }
  .anchor-line .wrap::-webkit-scrollbar { display: none !important; }
  .anchor-line a {
    flex: 0 0 auto !important;
    gap: 6px !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(150, 115, 61, 0.24) !important;
    border-radius: 999px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap !important;
  }
  .anchor-line a span[aria-hidden] { font-size: 0.58rem !important; }
}

/* ============================================================================
   MOBIL-FEINSCHLIFF (Yuriy 25.07.2026)
   ============================================================================ */
@media (max-width: 899px) {
  /* Der Header ist mobil 85px hoch, die Ankerleiste klebte bei 62px und
     verschwand damit zu einem Viertel unter ihm. */
  .anchor-line { top: 84px !important; }

  /* Sprungziele: Header (85) + Ankerleiste (55) verdecken sonst die
     Überschrift der angesprungenen Sektion. */
  #bewertungen, #leistungen, #ergebnisse, #story,
  #sofort-einschaetzung, #fragen, #kontakt {
    scroll-margin-top: 148px !important;
  }
}

@media (max-width: 900px) {
  /* "TELEFONISCH MO BIS SA 8-20 UHR ERREICHBAR" lief bei 375px bis 15px an
     die Kante und wurde bei 320px angeschnitten. Ruhigere Laufweite, und
     die beiden Aussagen stehen als eigene Zeilen statt mit Trennpunkt. */
  .hero-hours {
    font-size: 12px !important;
    letter-spacing: 0.09em !important;
    line-height: 1.75 !important;
  }
  .hero-hours .hh-sep { display: none !important; }
  .hero-hours .hh-part { display: block !important; }
}

/* Google-Siegel mobil kompakt (Yuriy 25.07.2026): eingeblendet war es eine
   fast bildschirmbreite weiße Pille, in der "15 Bewertungen bei Google" auf
   zwei Zeilen brach. Jetzt so breit wie sein Inhalt und einzeilig. */
@media (max-width: 900px) {
  .reviews-head .google-rating-badge {
    width: max-content !important;
    max-width: 100% !important;
    padding: 8px 16px !important;
    gap: 8px !important;
  }
  .reviews-head .google-rating-badge .grb-score { font-size: 19px !important; }
  .reviews-head .google-rating-badge .grb-stars { font-size: 14px !important; letter-spacing: 0.06em !important; }
  .reviews-head .google-rating-badge .grb-count {
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }
}

/* ============================================================================
   MOBIL-NACHTRAG (Yuriy 25.07.2026)
   Sieben Stellen, an denen ältere Regeln mit höherer Spezifität die neue
   20px-Kante noch übersteuert haben. Gemessen, nicht geraten.
   ============================================================================ */
@media (max-width: 900px) {

  /* Vorher/Nachher-Marken saßen bei 16px statt auf der Kante */
  .ba-slider .ba-tag-before { left: var(--m-gutter) !important; }
  .ba-slider .ba-tag-after { right: var(--m-gutter) !important; }

  /* Die Notiz steht in einem 100vw-Block mit negativem Rand, deshalb wurde
     aus "margin: 18px 20px" ein Versatz nach links (gemessen: -147px). */
  .results .results-main .results-note {
    margin: 18px 0 0 !important;
    padding: 0 var(--m-gutter) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Meisterin-Fakten: Zeilen über die volle Breite */
  .meisterin-copy .meisterin-fakten .mf,
  .meisterin-fakten .mf {
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 1 1 100% !important;
  }

  /* Siegel: Bilder an der linken Kante statt in ihrer Spalte zentriert */
  .cert-strip .cert-item {
    text-align: left !important;
    justify-items: start !important;
  }
  .cert-strip .cert-item img {
    margin-left: 0 !important;
    margin-right: auto !important;
    display: block !important;
  }

  /* Kartenfußzeile: die 640px-Begrenzung der Karte zog sie 15px ein */
  .area .area-map figcaption {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Fuß-Navigation: max-width 340 + justify-items:center hielten die
     Spalten von der Kante fern und ließen die Kanten ausfransen. */
  .site-footer .footer-nav {
    justify-items: start !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .site-footer .footer-line,
  .site-footer .footer-credit {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
}

/* Nachtrag 2 (Yuriy 25.07.2026): drei Reste aus der Messung. */
@media (max-width: 900px) {
  /* Die Notiz war als Pille mit left:50% + translateX(-50%) zentriert.
     position:static allein hat den transform nicht aufgehoben, dadurch
     stand sie 172px links außerhalb. */
  .results .results-note {
    transform: none !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Die Karte hing an max-width 640 + margin auto und stand dadurch
     15px innerhalb der Kante. */
  .area .area-map {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Der Fuß war eine zentrierte Komposition, während die ganze Seite auf
     einer linken Kante liest. Logo, Navigation und Zeilen stehen jetzt
     gemeinsam links. */
  .site-footer .footer-inner {
    align-items: flex-start !important;
    text-align: left !important;
  }
  .site-footer .footer-logo { margin-left: 0 !important; margin-right: auto !important; }
  .site-footer .footer-line,
  .site-footer .footer-credit { align-self: stretch !important; }
}

/* Nachtrag 3 (Yuriy 25.07.2026) */
@media (max-width: 900px) {
  /* Die Fakten-Zeilen erbten flex-direction:column, dadurch stand das Label
     unter der Zahl statt daneben und die Zeile war doppelt so hoch. */
  .meisterin-copy .meisterin-fakten .mf,
  .meisterin-fakten .mf { flex-direction: row !important; gap: 18px !important; }

  /* Fuß-Navigation: Zeilen standen 59px auseinander. Enger, dafür bleibt
     jede Zeile ein sicheres Tap-Ziel. */
  .site-footer .footer-nav { gap: 4px 18px !important; }
  .site-footer .footer-nav a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 40px !important;
  }

  /* Das schwebende Rauten-Ornament lag im Einzugsgebiet direkt auf der
     ersten Trennlinie der Fakten-Liste. */
  .area .f-star { display: none !important; }

  /* Der Ortsname klebte auf dem Standortpunkt, sobald die Karte auf
     Handybreite herunterskaliert. */
  .area-map .map-center-label { transform: translateY(-14px) !important; }
}

/* Der mobile Hochformat-Ausschnitt der Reparatur-Seite braucht einen eigenen
   Bildmittelpunkt: 58%/42% stammte vom Querformat und schob Nadel und
   Teppichkante aus dem Bild (Yuriy 25.07.2026). */
@media (max-width: 900px) {
  .sub-hero-bg img[src*="reparatur-hero"],
  .sub-hero-bg picture img { object-position: 46% 46% !important; }
}

/* ============================================================================
   MOBIL: STARTSEITE ANGLEICHEN (Yuriy 25.07.2026)
   Die Startseite hat eigene Sektionen (Leistungen, Werkstatt, Kontakt), die
   von den Regeln der Unterseiten nicht erfasst waren. Gemessen standen dort
   noch drei Köpfe mittig, drei Überschriften auf 33,25px statt 26px und der
   Leistungs-Lead auf 24px Kante mit 18px Schrift.
   ============================================================================ */
@media (max-width: 900px) {

  /* Eine Leseachse, auch hier */
  .services .section-head, .services .section-head .eyebrow,
  .services .section-head h2, .services .section-head .section-lead,
  .craft .section-head, .craft .section-head .eyebrow,
  .craft .section-head h2, .craft .section-head .section-lead,
  .results .section-head .eyebrow,
  .area-copy .eyebrow, .faq .eyebrow {
    text-align: left !important;
  }
  .services .section-head h2, .services .section-head .section-lead,
  .craft .section-head h2, .craft .section-head .section-lead,
  .area-copy .eyebrow, .area-copy h2, .area-copy .section-lead {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Überschriften, die nicht in einem .section-head sitzen */
  .faq > .wrap > h2,
  .faq .wrap.narrow h2,
  .area-copy h2,
  .contact-copy h2 { font-size: 26px !important; line-height: 1.2 !important; text-wrap: balance !important; }

  /* Fließtext, der die Skala noch nicht hatte */
  .services .section-head .section-lead,
  .craft .section-head .section-lead,
  .contact-copy p,
  .contact .contact-details dd {
    font-size: var(--m-text) !important;
    line-height: var(--m-lh) !important;
  }

  /* Abschluss-Kontakt bleibt bewusst mittig, wie der Hero und wie der
     Abschluss-CTA der Unterseiten. */
  .contact .contact-copy, .contact .contact-copy .eyebrow,
  .contact .contact-copy h2, .contact .contact-copy p {
    text-align: center !important;
  }
}

/* Startseiten-Nachtrag (Yuriy 25.07.2026) */
@media (max-width: 900px) {
  /* .area-copy ist mobil display:contents, seine Kinder sind also direkte
     Rasterzellen von .area-grid und wurden dort zentriert (Eyebrow stand
     auf 130px statt auf der Kante). */
  .area .area-grid { justify-items: start !important; }
  .area .area-grid > * { justify-self: start !important; width: 100% !important; }

  /* Leistungskarten: Text stand zentriert und in 18px, während die
     übrigen Karten der Seite links und in 17px lesen. */
  .service-cards .sc-card,
  .service-cards .sc-card h3,
  .service-cards .sc-card p { text-align: left !important; }
  .service-cards .sc-card p {
    font-size: var(--m-text) !important;
    line-height: var(--m-lh) !important;
  }
}

/* Startseiten-Nachtrag 2 (Yuriy 25.07.2026) */
@media (max-width: 900px) {
  /* .area-grid ist mobil ein Flex-Column mit align-items:center. Da
     .area-copy display:contents hat, landen Eyebrow, Überschrift und Lead
     einzeln als Flex-Items darin und wurden auf Inhaltsbreite zentriert
     (der Eyebrow stand deshalb auf 130px). justify-items greift bei Flex
     nicht, align-items ist die richtige Achse. */
  .area .area-grid { align-items: flex-start !important; }
  .area .area-copy > * { width: 100% !important; align-self: stretch !important; }

  /* Die Fakten-Liste der Startseite hing noch auf 18px. */
  .area-facts li { font-size: var(--m-text) !important; line-height: var(--m-lh) !important; }

  /* Der Eyebrow im Kontaktblock ist ein <p> und wurde von der
     Fließtext-Regel mitgenommen. */
  .contact-copy .eyebrow { font-size: 12px !important; line-height: 1.5 !important; }
}

/* Doppelte Sektions-Trenner (Yuriy 25.07.2026)
   .services, .results und .promise tragen ihren Khatam-Diamanten schon seit
   Zeile ~1646 als eigenes ::before/::after an der Oberkante. Der mobile
   Trenner vom 24.07. setzte einen zweiten, kleineren Diamanten 54px darunter.
   Zwei Rauten übereinander, in zwei Größen. Hier gilt der ältere. */
@media (max-width: 900px) {
  body.hell .services.light > .wrap::before,
  body.hell .results > .wrap::before,
  body.hell .promise.light > .wrap::before { display: none !important; }
}

/* Leistungskarten: Innenpolster auf die Seitenkante, die Karten laufen
   mobil randlos über die volle Breite. */
@media (max-width: 900px) {
  .service-cards .sc-body {
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }
}

/* Hero-Balance mobil (Yuriy 25.07.2026)
   Gemessen auf der Startseite: 812px hoher Hero, Inhalt von 122 bis 592, also
   37px optischer Raum über der Eyebrow und 220px tote Fläche darunter. Der
   Inhalt sitzt jetzt mittig im Raum unter dem Header, oben wie unten gleich
   viel Luft. Gilt für Startseite und alle Sub-Heroes. */
@media (max-width: 900px) {
  .hero-hell.hero-blend,
  .sub-hero {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 104px !important;
    padding-bottom: 44px !important;
  }
  /* Der Bild-Hintergrund und die Ornamente sind absolut positioniert und
     dürfen nicht als Flex-Zeilen mitzählen. */
  .hero-hell.hero-blend > .hero-hell-bg,
  .hero-hell.hero-blend > .bg-ornament,
  .sub-hero > .sub-hero-bg,
  .sub-hero > .bg-ornament { position: absolute !important; }
}

/* Nachtrag zur Hero-Balance (Yuriy 25.07.2026)
   justify-content allein reichte nicht: die Laufband-Leiste am Hero-Fuß
   hängt per margin-top:auto unten, dadurch blieb der Textblock oben kleben
   (19px Luft über der Eyebrow, 213px darunter). Der Block bekommt jetzt
   selbst auto-Ränder und sitzt mittig im Raum über der Leiste. */
@media (max-width: 900px) {
  .hero-hell.hero-blend > .wrap,
  .sub-hero > .wrap {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .hero-hell.hero-blend { padding-top: 96px !important; }
}

/* (Hier stand bis 25.07. abends eine Regel, die die Slider-Pfeile mobil
   komplett ausblendete. Sie ist entfallen: die Pfeile stehen jetzt mittig
   unter den Karten, siehe Block "RUNDE 2". Ohne sie war nicht erkennbar,
   dass sich hier wischen lässt.) */

/* Die Punktelisten in den Leistungszeilen der Reinigungs-Seite lagen mit
   16,3px noch neben der Skala (Yuriy 25.07.2026). */
@media (max-width: 900px) {
  .svc-points li,
  .svc-row .svc-points li {
    font-size: var(--m-text) !important;
    line-height: var(--m-lh) !important;
  }
}

/* ============================================================================
   MOBIL: RECHTSSEITEN (Yuriy 25.07.2026)
   Impressum, Datenschutz und 404 liefen bisher außerhalb der Mobil-Regeln.
   Gemessen: die Eyebrow lag unter dem Header, der Kartentext startete durch
   32px Innenpolster plus 20px Kante erst bei 52px, und das Eck-Ornament
   schnitt quer durch die Überschrift.
   ============================================================================ */
@media (max-width: 900px) {
  .legal-hero { padding-top: 150px !important; padding-bottom: 52px !important; }

  /* Untertitel: 0,14em Laufweite ließ "&" am Zeilenende hängen. */
  .legal-hero .legal-sub {
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
    line-height: 1.6 !important;
    text-wrap: balance !important;
  }
  .legal-hero h1 { font-size: 28px !important; line-height: 1.18 !important; }

  /* Karte: ein Innenpolster wie überall sonst. */
  .legal-karte { padding: 26px var(--m-gutter) 30px !important; }
  .legal-eck { display: none !important; }

  /* Textskala wie auf den übrigen Seiten */
  .legal-inhalt p, .legal-inhalt li {
    font-size: var(--m-text) !important;
    line-height: var(--m-lh) !important;
  }
  .legal-inhalt h2 { font-size: 22px !important; line-height: 1.25 !important; }
  .legal-inhalt h3 { font-size: 18px !important; line-height: 1.3 !important; }
}

/* ============================================================================
   MOBIL: 404 (Yuriy 25.07.2026)
   Die Seite nutzt .contact mit inline min-height und align-items:center. Die
   Eyebrow "Fehler 404" lag dadurch unter dem Header, und die drei Crosslinks
   brachen 1+2 um, weil der erste Eintrag am breitesten ist.
   ============================================================================ */
@media (max-width: 900px) {
  body:has(.sub-crosslinks) section.contact { padding-top: 116px !important; }

  .sub-crosslinks {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .sub-crosslinks a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 40px !important;
  }
}

/* ============================================================================
   KORREKTUREN NACH YURIYS DURCHSICHT (25.07.2026)
   ============================================================================ */
@media (max-width: 900px) {

  /* 1) Ergebnis-Notiz war nicht zu erkennen.
     Ursache: sie lag früher als Pille auf dem dunklen Teppichfoto und trug
     deshalb die Schriftfarbe --ivory. Beim Verschieben unter den Slider ist
     der dunkle Pillen-Hintergrund weggefallen, die cremefarbene Schrift aber
     geblieben, also creme auf creme. Dazu blähte width:100% sie auf die
     Breite des 100vw-Elternblocks auf, wodurch die Zeile rechts aus dem
     Bild lief. */
  .results .results-note {
    color: var(--ink-soft) !important;
    width: auto !important;
    max-width: calc(100vw - (2 * var(--m-gutter))) !important;
    text-align: center !important;
    margin: 18px auto 0 !important;
    padding: 0 !important;
  }

  /* 2) Nabi-Versprechen: die vier Punkte mobil wieder mittig (Yuriys
     Entscheidung). Icon, Überschrift und Text stehen auf einer Mittelachse,
     die Trennlinien dazwischen bleiben. */
  .promise-grid-4 .pg-item,
  .promise-grid-4 .pg-item h3,
  .promise-grid-4 .pg-item p { text-align: center !important; }
  .promise-grid-4 .pg-item .pg-icon {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Die Zentrierung der Notiz verlor gegen den eigenen Nachtrag von vorhin
   (.results .results-main .results-note mit margin:18px 0 0), deshalb hier
   mit derselben Tiefe. */
@media (max-width: 900px) {
  .results .results-main .results-note {
    margin: 18px auto 0 !important;
    width: auto !important;
    max-width: calc(100vw - (2 * var(--m-gutter))) !important;
    text-align: center !important;
    color: var(--ink-soft) !important;
  }
}

/* ============================================================================
   RUNDE 2 NACH YURIYS DURCHSICHT (25.07.2026)
   ============================================================================ */
@media (max-width: 900px) {

  /* --- Bewertungen -------------------------------------------------------
     1) Kopf und Siegel mittig (statt auf der linken Leseachse).
     2) Die Karten wirkten kraftlos: sie hatten keinen Rahmen und dafür einen
        60px weichen Schatten, der auf dem hellen Grund nur als Wolke lag.
        Jetzt feine Goldkontur und ein kurzer, gerichteter Schatten.
     3) Die Pfeile stehen als Paar mittig unter den Karten, damit erkennbar
        ist, dass sich hier wischen lässt. */

  .reviews .reviews-head,
  .reviews .reviews-head .eyebrow,
  .reviews .reviews-head h2 { text-align: center !important; }
  .reviews .reviews-head h2 { margin-left: auto !important; margin-right: auto !important; }
  .reviews-head .google-rating-badge {
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: none !important;
  }

  .reviews .review-card {
    border: 1px solid rgba(150, 115, 61, 0.22) !important;
    box-shadow: 0 6px 18px rgba(43, 27, 10, 0.07) !important;
    padding-top: 46px !important;
  }

  /* Slider-Navigation in den Fluss holen und zentrieren */
  .craft-slider {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .craft-slider > .review-grid,
  .craft-slider > .craft-strip { flex: 0 0 100% !important; order: 1 !important; }
  .craft-slider > .craft-nav {
    display: inline-flex !important;
    position: static !important;
    order: 2 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 2px 0 0 !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* --- Fuß mittig --------------------------------------------------------
     Zurück auf eine Mittelachse (Yuriys Entscheidung): Logo, Navigation und
     beide Zeilen zentriert. Die Navigation behält ihre zwei gleich breiten
     Spalten mit bündigen Kanten, der Block als Ganzes sitzt mittig. */
  .site-footer .footer-inner {
    align-items: center !important;
    text-align: center !important;
  }
  .site-footer .footer-logo { margin-left: auto !important; margin-right: auto !important; }
  .site-footer .footer-nav {
    width: max-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-items: start !important;
  }
  .site-footer .footer-line,
  .site-footer .footer-credit {
    text-align: center !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Die Pfeile blieben absolut positioniert, weil .craft-slider:has(.review-grid)
   .craft-nav die Spezifität (0,3,0) hat und meine Regel darüber nur (0,2,0).
   Hier mit gleicher Tiefe, damit sie wirklich in den Fluss rutschen. */
@media (max-width: 900px) {
  .craft-slider:has(.review-grid) > .craft-nav,
  .craft-slider:has(.review-grid) .craft-nav,
  .craft-slider > .craft-nav {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    order: 2 !important;
    margin: 2px 0 0 !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 auto !important;
  }
}

/* Rezensenten-Name: 2,46px Laufweite auf Versalien zwang "Christiane Enders"
   auf zwei Zeilen, wodurch der Avatar daneben versetzt stand. */
@media (max-width: 900px) {
  .review-card .rev-name {
    font-size: 14px !important;
    letter-spacing: 0.1em !important;
    line-height: 1.4 !important;
  }
  .review-card figcaption small { font-size: 12.5px !important; }
}

/* Das Laufband am Hero-Fuß soll bündig auf der Unterkante sitzen
   (Yuriy 25.07.2026). Beim Ausbalancieren des Heroes hatte ich ihm
   44px padding-bottom gegeben, die als Lücke unter der Leiste stehen
   blieben. Heroes MIT Laufband schließen jetzt bündig ab, Heroes ohne
   behalten ihr Fußpolster. */
@media (max-width: 900px) {
  .hero-hell.hero-blend:has(.hero-bottombar),
  .sub-hero:has(.hero-bottombar) {
    padding-bottom: 0 !important;
  }
  .hero-bottombar { margin-bottom: 0 !important; }
}

/* ============================================================================
   ERGEBNISSE MOBIL: FESTER VERGLEICH STATT ZIEHREGLER (Yuriy 25.07.2026)
   Der Ziehregler kostet auf dem Handy eine Erklärung ("Ziehen Sie den Regler"),
   blockiert mit touch-action das Scrollen über dem Bild und zeigt immer nur
   eine Hälfte. Mobil steht die Fläche jetzt fest auf 50/50: links der Schaden,
   rechts das Ergebnis, beschriftet auf dem Bild, randlos und ohne Abstand
   nach unten, wie die Bildstrecken darunter. Desktop bleibt der Regler.
   ============================================================================ */
@media (max-width: 900px) {

  /* Interaktion aus: der Griff verschwindet, die Trennkante bleibt als
     ruhige Goldlinie in der Mitte stehen. */
  .ba-slider {
    pointer-events: none !important;
    cursor: default !important;
    touch-action: auto !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
  }
  .ba-slider .ba-handle { display: none !important; }
  .ba-slider .ba-before {
    width: 50% !important;
    border-right: 1px solid rgba(201, 162, 94, 0.55) !important;
  }

  /* Beschriftung oben, damit sie dem Textverlauf unten nicht in die Quere
     kommt. */
  .ba-slider .ba-tag {
    top: 14px !important;
    bottom: auto !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.18em !important;
    padding: 6px 11px !important;
  }
  .ba-slider .ba-tag-before { left: 14px !important; right: auto !important; }
  .ba-slider .ba-tag-after { right: 14px !important; left: auto !important; }

  /* Die Erklärzeile liegt wieder auf dem Bild, diesmal auf einem Verlauf,
     der sie sicher lesbar macht (das war beim alten Pillen-Overlay das
     Problem: cremefarbene Schrift auf hellem Teppichmuster). */
  .results .results-main { position: relative !important; }
  .results .results-main .results-note {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 52px var(--m-gutter) 15px !important;
    background: linear-gradient(180deg, rgba(16, 9, 3, 0) 0%, rgba(16, 9, 3, 0.55) 42%, rgba(16, 9, 3, 0.86) 100%) !important;
    color: var(--cream) !important;
    text-align: center !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em !important;
    text-wrap: balance !important;
  }

  /* Kein Leerraum mehr unter dem Bild: die nächste Sektion schließt direkt an. */
  main > section.results { padding-bottom: 0 !important; }

  /* Der Lead braucht den Regler-Hinweis nicht mehr, er beschreibt jetzt
     schlicht, was zu sehen ist. Siehe rep.lead.1 im CMS-Text. */
}

/* Textbausteine, die nur auf einer Seite der 900px-Grenze gelten.
   Beispiel: die Aufforderung "Ziehen Sie den Regler" beim Vorher/Nachher
   (mobil gibt es keinen Regler mehr). */
.gross-mobil { display: none; }
@media (max-width: 900px) {
  .nur-desktop { display: none !important; }
  .gross-mobil { display: inline !important; }
}

/* Die Notiz hatte aus ihrer Pillen-Zeit noch ein top gesetzt. Zusammen mit
   bottom:0 spannte das den Kasten über die volle Bildhöhe auf (269px statt
   Texthöhe), weshalb der Text oben im Bild klebte statt unten auf dem
   Verlauf zu sitzen (Yuriy 25.07.2026). */
@media (max-width: 900px) {
  .results .results-main .results-note {
    top: auto !important;
    height: auto !important;
  }
}

/* Der Verlauf unter der Bildbeschriftung war zu zurückhaltend: das
   Teppichmotiv ist an der Stelle sehr hell, die cremefarbene Schrift lag
   dadurch grenzwertig darauf. Kräftiger und mit Schatten abgesichert. */
@media (max-width: 900px) {
  .results .results-main .results-note {
    background: linear-gradient(180deg,
      rgba(16, 9, 3, 0) 0%,
      rgba(16, 9, 3, 0.62) 38%,
      rgba(16, 9, 3, 0.88) 72%,
      rgba(16, 9, 3, 0.94) 100%) !important;
    text-shadow: 0 1px 6px rgba(10, 6, 2, 0.75) !important;
    padding-top: 62px !important;
    padding-bottom: 17px !important;
  }
}

/* ============================================================================
   BEWERTUNGSKARTE KOMPAKTER (Yuriy 25.07.2026)
   Gemessen waren 456px Höhe, davon 242px allein das Zitat (8 Zeilen à 18,9px
   mit 1,6 Zeilenhöhe), 76px Polster, 44px Ränder ums Zitat, 58px Fußzeile.
   Angefasst wird bewusst nichts am Inhalt, nur Schriftgrad und Luft:
   das Zitat läuft jetzt in der Fließtextgröße der Seite, das dekorative
   Anführungszeichen wird kleiner und das Polster enger.
   ============================================================================ */
@media (max-width: 900px) {
  .reviews .review-card {
    padding: 30px 22px 24px !important;
  }
  .reviews .review-card::before {
    font-size: 54px !important;
    top: -22px !important;
  }
  .reviews .review-card .review-stars {
    font-size: 16px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.14em !important;
  }
  .reviews .review-card blockquote {
    font-size: 17px !important;
    line-height: 1.55 !important;
    margin-top: 14px !important;
    margin-bottom: 18px !important;
  }
  .reviews .review-card figcaption { padding-top: 14px !important; }
  .reviews .review-card .rev-avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
  }
  .reviews .review-card figcaption small { line-height: 1.5 !important; }
}

/* Durch das engere Polster rückten das dekorative Anführungszeichen und die
   Sternzeile zu dicht aneinander. */
@media (max-width: 900px) {
  .reviews .review-card .review-stars { display: block !important; margin-top: 8px !important; }
}

/* ============================================================================
   LEISTUNGS-STRECKE MOBIL: AUS VIER GLEICHEN BLÖCKEN EINE SERIE
   (Yuriy 25.07.2026)
   Bild, Text, Bild, Text, viermal in identischer Bauweise: es fehlte jedes
   Ordnungssignal, man wusste beim Scrollen nie, an welcher Stelle man ist.
   Zwei Zutaten, beide ohne Markup-Änderung:
   1) Eine Ziffer als Auftaktzeile über jeder Überschrift, per CSS-Counter,
      also automatisch richtig auf beiden Unterseiten. Gleiche Idee wie die
      Outline-Ziffern der Leistungskarten auf der Startseite, nur ruhiger.
   2) Ein weicher Verlauf am unteren Bildrand in den Textgrund, damit Foto
      und Text ineinander laufen statt hart aneinanderzustoßen.
   ============================================================================ */
@media (max-width: 900px) {

  .svc-rows { counter-reset: svc; }
  .svc-rows .svc-row { counter-increment: svc; }

  .svc-rows .svc-body h3::before {
    content: counter(svc, decimal-leading-zero);
    display: block;
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.24em;
    line-height: 1;
    color: var(--gold-dim);
    margin-bottom: 11px;
    /* kurze, auslaufende Goldlinie rechts neben der Ziffer */
    background-image: linear-gradient(90deg, rgba(150, 115, 61, 0.45), rgba(150, 115, 61, 0));
    background-repeat: no-repeat;
    background-size: 54px 1px;
    background-position: 38px 5px;
  }

  /* Der Übergang vom Foto in den Textgrund liegt jetzt als Alpha-Maske
     weiter unten im gemeinsamen Block "WEICHE BILDKANTEN", damit alle
     Bilder der Seite dieselbe Technik nutzen. */

  /* Etwas mehr Luft über der Ziffer, damit sie als Auftakt liest */
  .svc-rows .svc-row .svc-body { padding-top: 26px !important; }
}

/* ============================================================================
   WEICHE BILDKANTEN (Yuriy 25.07.2026)
   Der auslaufende Bildrand aus der Leistungs-Strecke gefällt und gilt jetzt
   für alle Bilder, die mobil hart auf einen Textblock oder die nächste
   Sektion stoßen.

   Technik: Alpha-Maske statt Farbverlauf-Overlay. Der Vorteil ist, dass sie
   den Untergrund nicht kennen muss: das Bild wird unten einfach durchsichtig,
   egal ob darunter Creme (#fffdf8), Papier (#faf8f3) oder das Kartenbraun
   (#2a1c0c) liegt. Ein Overlay müsste dafür je Stelle eine eigene Farbe
   führen und würde beim kleinsten Farbwechsel sichtbar danebenliegen.

   Feste 72px Auslauf statt Prozent, damit die Kante bei einem 200px hohen
   Story-Bild genauso wirkt wie bei einem 340px hohen Benefit-Bild.
   ============================================================================ */
@media (max-width: 900px) {
  .svc-media img,
  .bb-media img,
  .meisterin-grid figure img,
  .story-grid.is-stacked .story-step > .story-video,
  .sc-media img {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 72px), transparent 100%) !important;
    mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 72px), transparent 100%) !important;
  }
}

/* Beim Angleichen der Leistungskarten waren die Aufzählungen übersehen
   worden: Überschrift und Text lasen links, die Punkte darunter mittig. */
@media (max-width: 900px) {
  .service-cards .sc-card ul,
  .service-cards .sc-card li { text-align: left !important; }
}

/* ============================================================================
   BENEFIT-BILD RANDLOS (Yuriy 25.07.2026)
   Letzte Stelle mit weißem Rand: die Benefit-Box ist mobil 335px breit und
   hatte noch overflow:hidden aus dem Desktop-Layout, wo sie eine Karte mit
   Radius ist. Das Bild darin will 375px und wurde dadurch beschnitten.
   Mobil hat die Box weder Hintergrund noch Rahmen, Radius oder Schatten,
   der Beschnitt hatte also nichts mehr zu halten. Die Textkinder bleiben
   auf ihrer 20px-Achse, nur das Bild läuft durch.
   ============================================================================ */
@media (max-width: 900px) {
  .benefit .benefit-box { overflow: visible !important; }
}

/* Der Goldrahmen der Benefit-Box (::after, Zeile ~2231) und das Eck-Ornament
   (::before) gehören zur Kartenoptik des Desktops. Mobil hat die Box weder
   Hintergrund noch Radius, und seit das Bild randlos durchläuft, umfasste
   der Rahmen nur noch den Textteil und stand als feine Linie neben dem Bild.
   Beides mobil aus (Yuriy 25.07.2026). */
@media (max-width: 900px) {
  .benefit .benefit-box::after,
  .benefit .benefit-box::before { display: none !important; }
}

/* ============================================================================
   HERO MOBIL: MEHR LUFT UND EIN OPTISCH MITTIGES VORTEILS-RASTER
   (Yuriy 25.07.2026)

   1) Die Abstände zwischen Eyebrow, Headline, Trenner, Vorteilen, Knöpfen und
      Öffnungszeiten lagen bei 14 bis 33px. Bei 812px Hero-Höhe und 663px
      belegtem Inhalt ist Reserve da, der Block wirkte deshalb gestaucht.

   2) Das Vorteils-Raster war formal 335px breit, sein Inhalt endete aber bei
      318px: links 20px Rand, rechts 57px. Dadurch hing es sichtbar links,
      obwohl darüber alles zentriert ist. Das Raster ist jetzt nur so breit
      wie sein Inhalt und wird als Ganzes zentriert. Die Icons stehen
      weiterhin auf zwei sauberen Achsen.
   ============================================================================ */
@media (max-width: 900px) {

  /* --- Vorteils-Raster optisch mittig --- */
  .hero-hell-copy .hero-features,
  .sub-hero-inner .hero-features {
    width: max-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: repeat(2, max-content) !important;
    column-gap: 26px !important;
    row-gap: 18px !important;
  }

  /* --- Mehr Luft zwischen den Hero-Bausteinen --- */
  .hero-hell-copy h1,
  .sub-hero-inner h1 { margin-top: 22px !important; }

  .hero-hell-copy .hero-divider,
  .sub-hero-inner .hero-divider {
    margin-top: 26px !important;
    margin-bottom: 0 !important;
  }

  .hero-hell-copy .hero-features,
  .sub-hero-inner .hero-features { margin-top: 28px !important; }

  .hero-hell-copy .hero-ctas,
  .sub-hero-inner .hero-ctas,
  .sub-hero .hero-cta-block { margin-top: 38px !important; }

  .hero-hell-copy .hero-hours,
  .sub-hero-inner .hero-hours { margin-top: 20px !important; }

  /* Der Sub-Hero der Unterseiten hat zusätzlich eine Zwischenzeile */
  .sub-hero-inner .hero-lead { margin-top: 20px !important; }
}

/* ============================================================================
   MOBIL: SEKTIONSKÖPFE ZENTRIERT (Yuriy 25.07.2026)

   Kehrtwende gegenüber dem Block "5. EINE LESEACHSE" weiter oben, auf Yuriys
   Wunsch nach dem Vorbild der Portmann-Seite. Sie ist bewusst nur teilweise:

   ZENTRIERT werden Eyebrow, Überschrift und kurze Leads. Auf 375px wirkt ein
   zentrierter Kopf ruhiger und gestalteter, weil die Zeilen kurz sind und
   beide Kanten sauber stehen.

   LINKSBÜNDIG bleiben alle Fließtexte ab fünf Zeilen sowie Listen, Karten-
   inhalte und FAQ-Fragen. Zentrierter Text flattert an beiden Kanten; ab
   etwa vier Zeilen kostet das spürbar Lesbarkeit, und genau das war im Audit
   am Einzugsgebiet-Lead als Mangel aufgefallen.

   Gemessene Lead-Längen, die diese Grenze begründen:
     Ergebnisse 2 Zeilen, Werkstatt 3, Sofort-Einschätzung 4  -> zentriert
     Versprechen 6 Zeilen, Einzugsgebiet 6                     -> links
   ============================================================================ */
@media (max-width: 900px) {

  /* --- Köpfe: Eyebrow + Überschrift immer zentriert --- */
  .section-head, .section-head .eyebrow, .section-head h2,
  .light.svc .section-head, .light.svc .section-head .eyebrow, .light.svc .section-head h2,
  .services .section-head, .services .section-head .eyebrow, .services .section-head h2,
  .craft .section-head, .craft .section-head .eyebrow, .craft .section-head h2,
  .results .section-head, .results .section-head .eyebrow, .results .section-head h2,
  .estimator .section-head, .estimator .section-head .eyebrow, .estimator .section-head h2,
  .reviews .reviews-head, .reviews .reviews-head .eyebrow, .reviews .reviews-head h2,
  .story .story-head, .story .story-head .eyebrow, .story .story-head h2,
  .promise-head, .promise-head .eyebrow, .promise-head h2,
  .meisterin-copy .eyebrow, .meisterin-copy h2,
  .faq .eyebrow, .faq h2, .faq > .wrap > h2, .faq .wrap.narrow h2,
  .area-copy .eyebrow, .area-copy h2,
  .bb-content .eyebrow, .bb-content h2,
  .standort-strip .st h3 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* --- Kurze Leads mit --- */
  .results .section-head .section-lead,
  .craft .section-head .section-lead,
  .estimator .section-head .section-lead,
  .light.svc .section-head .section-lead,
  .services .section-head .section-lead,
  .bb-content .bb-satz {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* --- Lange Fließtexte bleiben linksbündig ---
     Ab fünf Zeilen flattert zentrierter Text zu stark. */
  .promise-intro,
  .area-copy .section-lead,
  .meisterin-copy .section-lead {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* --- Inhalte bleiben linksbündig ---
     Karten, Listen und Fragen liest man an einer Kante, nicht mittig. */
  .svc-rows .svc-body, .svc-rows .svc-body h3, .svc-rows .svc-body p,
  .svc-points, .svc-points li,
  .bb-points, .bb-points li,
  .story-grid.is-stacked .step-karte,
  .story-grid.is-stacked .step-karte h3,
  .story-grid.is-stacked .step-karte p,
  .story-grid.is-stacked .step-karte .eyebrow,
  .faq-item, .faq-item summary, .faq-item p,
  .area-facts, .area-facts li, .af-text,
  .service-cards .sc-card, .service-cards .sc-card h3,
  .service-cards .sc-card p, .service-cards .sc-card li,
  .review-card blockquote {
    text-align: left !important;
  }
}

/* ============================================================================
   FLUID: DIE MOBIL-SKALA WÄCHST MIT DEM GERÄT (Yuriy 25.07.2026)

   Bis hierher standen alle Mobil-Werte in festen Pixeln. Auf einem iPhone
   17 Pro Max (440px) sah der Hero deshalb genauso aus wie auf einem 375er:
   28px Headline, 20px Kante, dieselben Abstände, nur mit 65px mehr Leerraum
   drumherum. Der Inhalt wirkte dort verloren.

   Jede Größe ist jetzt eine lineare Funktion der Viewport-Breite, verankert
   an zwei realen Geräten: 375px (iPhone 12/13) und 440px (Pro Max). clamp()
   deckelt nach unten für das SE (320px) und nach oben zur 900px-Grenze.

   Rechenweg je Wert: Steigung = (Wert440 - Wert375) / 65, daraus vw-Anteil
   und Offset. Kontrolliert bei 320 / 375 / 393 / 430 / 440 / 900.

   Die Abstände folgen bewusst einer Gruppenlogik, wie von Yuriy gewünscht:
   was zusammengehört, rückt eng zusammen (Eyebrow zur Headline, Öffnungs-
   zeiten zu den Knöpfen), wo ein Gedanke endet, wird der Sprung groß
   (Vorteile zu den Knöpfen: 44px auf 375, 56px auf 440).
   ============================================================================ */
@media (max-width: 900px) {

  :root {
    /* 320:16  375:20  430:23,4  440:24 */
    --m-gutter: clamp(16px, 6.15vw - 3.08px, 26px);
    /* 320:16  375:17  430:18,3  440:18,5 */
    --m-text: clamp(16px, 2.31vw + 8.35px, 19px);
    --m-lh: 1.7;
  }

  /* --- Überschriften ------------------------------------------------------ */
  .sub-hero h1 {
    font-size: clamp(24px, 7.69vw - 0.85px, 34px) !important;
  }
  .bb-content h2,
  .section-head h2,
  .reviews-head h2,
  .story-head h2,
  .meisterin-copy h2,
  .promise-head h2,
  .faq > .wrap > h2,
  .faq .wrap.narrow h2,
  .area-copy h2,
  .contact-copy h2 {
    font-size: clamp(23px, 6.15vw + 2.92px, 31px) !important;
  }
  .svc-body h3,
  .story-grid.is-stacked .step-karte h3 {
    font-size: clamp(19px, 4.62vw + 3.69px, 25px) !important;
  }
  .pg-item h3,
  .faq-item summary,
  .service-cards .sc-card h3 {
    font-size: clamp(17.5px, 3.08vw + 7.46px, 22px) !important;
  }
  .eyebrow,
  .chip-band-label {
    font-size: clamp(11px, 1.54vw + 6.23px, 13.5px) !important;
  }

  /* --- Knöpfe ------------------------------------------------------------- */
  .hero-ctas .btn,
  .sub-hero .hero-ctas .btn,
  .contact .hero-ctas .btn,
  .sub-cta .hero-ctas .btn,
  .hero-blend .hero-ctas .btn,
  .mobile-menu .mobile-menu-contact .btn,
  .benefit-box .bb-contact .btn,
  .story-grid.is-stacked .step-karte .btn,
  .story-grid.is-stacked .step-karte .story-links .btn,
  .estimator .est-actions .btn,
  #sofort-einschaetzung .est-actions .btn {
    min-height: clamp(54px, 6.15vw + 34.92px, 64px) !important;
    font-size: clamp(15px, 1.54vw + 10.23px, 17.5px) !important;
  }

  /* --- Sektionsrhythmus --------------------------------------------------- */
  main > section {
    padding-top: clamp(60px, 24.62vw - 20.31px, 96px) !important;
    padding-bottom: clamp(60px, 24.62vw - 20.31px, 96px) !important;
  }
  main > section.results { padding-bottom: 0 !important; }
  section.story { padding-bottom: 0 !important; }

  /* --- Hero: Abstände nach Gruppenzugehörigkeit ---------------------------- */
  /* eng: Eyebrow und Headline sind eine Einheit */
  .hero-hell-copy h1,
  .sub-hero-inner h1 {
    margin-top: clamp(16px, 6.15vw - 3.08px, 26px) !important;
  }
  /* eng: die Stützzeile gehört zur Headline */
  .sub-hero-inner .hero-lead {
    margin-top: clamp(15px, 6.15vw - 5.08px, 24px) !important;
  }
  /* Gruppenwechsel */
  .hero-hell-copy .hero-divider,
  .sub-hero-inner .hero-divider {
    margin-top: clamp(24px, 12.31vw - 16.15px, 42px) !important;
    margin-bottom: 0 !important;
  }
  .hero-hell-copy .hero-features,
  .sub-hero-inner .hero-features {
    margin-top: clamp(24px, 12.31vw - 16.15px, 42px) !important;
  }
  /* grösster Sprung: vom Argument zur Handlung */
  .hero-hell-copy .hero-ctas,
  .sub-hero-inner .hero-ctas,
  .sub-hero .hero-cta-block {
    margin-top: clamp(36px, 18.46vw - 25.23px, 62px) !important;
  }
  /* eng: die Zeiten erläutern die Knöpfe */
  .hero-hell-copy .hero-hours,
  .sub-hero-inner .hero-hours {
    margin-top: clamp(14px, 4.62vw - 1.31px, 21px) !important;
  }

  /* Das Vorteils-Raster darf auf breiteren Geräten mehr Spalte zeigen */
  .hero-hell-copy .hero-features,
  .sub-hero-inner .hero-features {
    column-gap: clamp(20px, 9.23vw - 14.62px, 42px) !important;
    row-gap: clamp(14px, 6.15vw - 9.08px, 26px) !important;
  }
}

/* ============================================================================
   FLUID, TEIL 2: DIE RESTLICHEN FESTGRÖSSEN (Yuriy 25.07.2026)
   Nach dem ersten Fluid-Block habe ich gegengemessen, welche Schriftgrößen
   bei 320px und 440px noch identisch sind. Diese 17 waren übrig. Gleiche
   Rechnung wie oben: verankert an 375px und 440px, gedeckelt für 320px.
   ============================================================================ */
@media (max-width: 900px) {

  /* Hero-Umfeld */
  .breadcrumb { font-size: clamp(11.5px, 1.54vw + 6.83px, 14.2px) !important; }
  .hero-hours { font-size: clamp(11px, 1.54vw + 6.23px, 13.6px) !important; }

  /* Sofort-Einschätzung */
  .est-q { font-size: clamp(20.5px, 4.92vw + 4.34px, 27.5px) !important; }
  .est-card { font-size: clamp(15px, 2.31vw + 7.35px, 18.5px) !important; }
  .est-dot { font-size: clamp(14.2px, 1.69vw + 9.05px, 17.2px) !important; }

  /* Bewertungen */
  .review-card blockquote { font-size: clamp(16px, 2.31vw + 8.35px, 19.5px) !important; }
  .review-card .rev-name { font-size: clamp(13px, 1.54vw + 8.23px, 15.8px) !important; }
  .google-rating-badge .grb-count,
  .google-rating-badge .grb-label { font-size: clamp(11.5px, 1.54vw + 6.73px, 14.2px) !important; }

  /* Meisterin-Fakten */
  .meisterin-fakten .mf b { font-size: clamp(24px, 5.69vw + 4.95px, 32px) !important; }
  .meisterin-fakten .mf span { font-size: clamp(15.4px, 2.15vw + 8.52px, 19px) !important; }

  /* Ergebnisse */
  .results .results-main .results-note { font-size: clamp(12.5px, 1.54vw + 7.73px, 15.2px) !important; }
  .ba-slider .ba-tag { font-size: clamp(9.8px, 1.54vw + 4.73px, 12.1px) !important; }

  /* Einzugsgebiet und Siegel */
  .area-map figcaption { font-size: clamp(11.5px, 1.54vw + 6.83px, 14.2px) !important; }
  .cert-strip .cert-item p { font-size: clamp(11px, 1.38vw + 6.71px, 13.4px) !important; }

  /* Standort und Fuß */
  .standort-strip .st h3 { font-size: clamp(12.6px, 1.69vw + 7.35px, 15.5px) !important; }
  .site-footer .footer-nav a { font-size: clamp(12.2px, 1.38vw + 7.91px, 14.7px) !important; }
  .site-footer .footer-line,
  .site-footer .footer-credit { font-size: clamp(14.2px, 1.69vw + 9.05px, 17.2px) !important; }

  /* Rechtsseiten */
  .legal-hero h1 { font-size: clamp(24px, 7.69vw - 0.85px, 34px) !important; }
  .legal-inhalt h2 { font-size: clamp(19px, 4.62vw + 3.69px, 25px) !important; }
  .legal-inhalt h3 { font-size: clamp(16.5px, 3.08vw + 4.96px, 19.5px) !important; }
}

/* Zwei Nachzügler: hier gewinnen die spezifischeren Regeln aus dem
   Kompakt-Block der Bewertungskarte, deshalb mit derselben Tiefe. */
@media (max-width: 900px) {
  .reviews .review-card blockquote { font-size: clamp(16px, 2.31vw + 8.35px, 19.5px) !important; }
  .reviews-head .google-rating-badge .grb-count { font-size: clamp(11.5px, 1.54vw + 6.73px, 14.2px) !important; }
}

/* ============================================================================
   RANDLOS: EXAKT STATT GERECHNET (Yuriy 25.07.2026)

   Bisher liefen alle randlosen Blöcke über width:100vw plus
   margin-inline: calc(50% - 50vw). Das ist eine Rechnung über zwei
   verschiedene Bezugsgrößen (Elternbreite und Viewport) und trifft nie
   exakt: gemessen kam margin-left: -23,9766px heraus, wo -24px nötig wären.
   Auf einem 3x-Display kann daraus ein sichtbarer Streifen werden.

   Jetzt wird schlicht das Polster des Elternteils zurückgenommen, mit
   derselben Variablen, die es gesetzt hat. Damit ist es rechnerisch exakt
   und unabhängig davon, wie der Browser vw rundet.
   ============================================================================ */
@media (max-width: 900px) {
  .benefit-box .bb-media,
  .svc-row,
  .sc-card,
  .story-grid.is-stacked .story-step,
  .meisterin-grid figure,
  .results .results-main,
  .results .results-pair {
    width: auto !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--m-gutter)) !important;
    margin-right: calc(-1 * var(--m-gutter)) !important;
  }

  /* Sicherheitsnetz: falls eine dieser Flächen doch einmal in einem
     Container ohne Polster sitzt, verhindert das den Überstand. */
  main > section { overflow-x: clip; }
}