/* Mobile-Fixes (additiv) — behebt 4 verifizierte Mobile-Bugs der Startseite, ohne main-BTU3zzQI.css anzufassen:
   1) Hero-Headline überläuft horizontal auf schmalen Screens (clamp()-Untergrenze zu groß für lange Wörter)
   2) Mobiles Menü lässt sich nach dem Öffnen nicht mehr schließen (Hamburger-Button vom Panel verdeckt)
   3) Footer-/Kontakt-Links haben zu kleine Tap-Flächen (<44px)
   4) Chapter-Rail (01/02/03) überlappt die Hero-CTA-Buttons bei niedrigen Viewports (sichtbare Browser-Leiste) */

@media (max-width: 430px) {
  .cinematic-slide h1 {
    font-size: clamp(2.05rem, 9.5vw, 5rem) !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

.cinematic-hero-pin__inner,
.cinematic-slide,
.cinematic-slide h1 {
  min-width: 0;
}

/* .site-header hat backdrop-filter -> eigener Stacking-Context. Ein z-index nur auf #menu-btn
   wirkt daher nur INNERHALB des Headers (z-index:10) und bleibt hinter dem Menü-Panel
   (z-index:200) verdeckt. Der Header selbst muss bei offenem Menü über das Panel gehoben werden. */
body.nav-open .site-header {
  z-index: 201;
}

/* Hamburger-Icon verwandelt sich beim Öffnen in ein orangenes X (Schließen-Symbol) oben rechts —
   vorher blieben immer drei graue Striche stehen, ohne erkennbaren "Zurück"-Zustand. */
#menu-btn span {
  transition: transform 0.3s ease, opacity 0.2s ease, background-color 0.3s ease;
}
body.nav-open #menu-btn {
  background: rgba(255, 107, 44, 0.14);
  border-color: var(--accent);
}
body.nav-open #menu-btn span {
  background: var(--accent);
}
body.nav-open #menu-btn span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.nav-open #menu-btn span:nth-child(2) {
  opacity: 0;
}
body.nav-open #menu-btn span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-footer a,
a[href^="tel:"]:not(.hero-action):not(.sticky-cta__btn):not(.btn),
a[href^="mailto:"]:not(.hero-action):not(.sticky-cta__btn):not(.btn) {
  display: inline-block;
  padding-block: 8px;
  margin-block: -8px;
}
/* CTA-Chips: kein Tap-Target-Hack (sonst ungleich hohe Buttons) */
body.mode-ideewerk .hero-action,
body.mode-ideewerk .sticky-cta__btn {
  margin: 0 !important;
  padding-block: 0;
}

/* Chapter-Rail kollidiert geometrisch mit den Hero-CTA-Buttons, sobald die sichtbare Höhe
   durch die Browser-Adressleiste eingeschränkt ist (z. B. Safari/Chrome vor dem ersten Scroll).
   Rail ist reine Sekundär-Navigation (Sprung zwischen Kapiteln) — Ausblenden ist sicherer als
   ein Layout-Umbau, der bei jeder Viewport-Höhe neu kollidieren könnte. */
@media (max-width: 900px) and (max-height: 740px) {
  .chapter-rail {
    display: none;
  }
}

/* "Vertrauen in Zahlen"-Kacheln: längere Texte ("Persönliche Betreuung", "100% Regional")
   brechen zweizeilig um; CSS-Grid streckt dann ALLE vier Kacheln auf die Höhe der größten
   -> wirken deutlich größer als vorher (kurze einzeilige Werte wie "38+"/"24 h"). Kompakteres
   Padding + kleinere Zahl-Schrift + engere Zeilenhöhe hält die Kachelhöhe im Rahmen.
   Nur auf Desktop-Breite (>900px): die bestehende Mobile-Regel im Haupt-CSS skaliert die
   Schrift dort bereits responsiv per clamp() und bleibt unangetastet. */
@media (min-width: 901px) {
  .stat-row li {
    padding: 0.7rem 0.6rem;
  }
  .stat-row strong {
    font-size: 1.4rem !important;
    line-height: 1.15;
  }
  .stat-row span {
    line-height: 1.3;
  }
}

/* "Leistungen"-Sektion: 3 -> 4 Karten (Renovierung/Umzüge/Garten/Objektservice) auf Kundenwunsch.
   .cards-grid ist im Haupt-CSS fest auf repeat(3,1fr) gesetzt und wird sonst nirgends auf der
   Startseite mit mehr/weniger Karten verwendet -> hier gefahrlos auf 4 Spalten erweiterbar. */
@media (min-width: 901px) {
  .cards-grid--4up {
    grid-template-columns: repeat(4, 1fr);
    width: min(calc(100vw - 3rem), 88rem);
  }
}

/* Icon vor der Kartenüberschrift, im bestehenden Logo-Icon-Stil (stroke, currentColor). */
.service-card-mini h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.service-card-mini__icon {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--accent);
}

/* 4. Karte (Objektservice) ist ein Flur-/Empfangsfoto statt einer Arbeiter-Actionaufnahme wie
   Karte 1-3 -> eigene object-position, damit der relevante Bildausschnitt (Flur mit Person)
   sichtbar bleibt statt z. B. Decke/Boden anzuschneiden. */
.service-card-mini:nth-child(4) > img {
  object-position: center 42%;
}

/* Häkchen-Bullets statt einfacher Listenpunkte, im Stil der bestehenden .checklist-Komponente,
   aber kompakter für die schmaleren Karten. */
.checklist-mini {
  list-style: none;
  padding-left: 0 !important;
  display: grid;
  gap: 0.4rem;
}
.checklist-mini li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.checklist-mini li:before {
  content: "✓";
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ff6b2c26;
  color: var(--accent);
  font-size: 0.6rem;
  font-weight: 700;
  margin-top: 0.15rem;
}

/* Fußzeile unter dem Leistungen-Grid: Handshake-Icon + zusammenfassender Claim-Satz. */
.services-footer-claim {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--glass-border);
  width: min(calc(100vw - 3rem), 88rem);
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.services-footer-claim__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent);
  margin-top: 0.1rem;
}
.services-footer-claim strong {
  color: var(--text);
}

/* Original-Logo-Icon (Bogen-Sichel + Dach) ist breiter als hoch (Verhältnis ~2.1:1);
   die quadratische 28x28-Box des alten Icons würde es winzig darstellen. */
.site-logo__icon {
  width: 54px;
  height: 26px;
}

/* Checkliste in den Leistungen-Karten erbte ohne passende Schriftgrößen-Regel die normale
   Fließtext-Größe (17px) statt der kompakten Kartengröße -> wirkte neben den kleinen
   Karten-Überschriften/-Absätzen deutlich überdimensioniert. */
.service-card-mini .checklist-mini {
  font-size: 0.8125rem;
  line-height: 1.55;
}

/* Kundenfeedback: Überschrift & Zwischentext der Leistungen-Sektion wirken auf Desktop zu groß.
   Nur diese Sektion (#leistungen) und nur Desktop-Breite gedrosselt — Mobile-Skalierung per
   clamp() im Haupt-CSS bleibt unangetastet, andere Sektionen (z. B. "Modernisieren mit System")
   behalten ihre bisherige Größe. */
@media (min-width: 901px) {
  #leistungen > h2 {
    font-size: clamp(1.9rem, 2.6vw, 2.6rem) !important;
  }
  #leistungen > p[data-reveal] {
    font-size: 1rem;
  }
}

/* Zielgruppen-Text in der Objektbetreuung-Bildunterschrift ist deutlich länger als die
   ursprüngliche Kurzformel ("WEG · Gewerbe · Privat") -> Caption-Box braucht eine Breiten-
   begrenzung mit Zeilenumbruch, sonst läuft der Text über den Bildrand hinaus. */
#objekt .split-feature__caption {
  max-width: min(320px, calc(100% - 2rem));
}
#objekt .split-feature__caption span {
  display: block;
  line-height: 1.4;
}

/* Neue Abschluss-Zeile ("Immobilien verdienen mehr als Verwaltung...") zwischen Checkliste und
   CTA-Button — es gab dafür noch keine Komponente; kursiv/gedämpft abgesetzt wie ein Leitsatz,
   damit sie sich vom Fließtext (.split-muted) und den Checklist-Punkten unterscheidet. */
.split-tagline {
  margin: 1rem 0 1.5rem;
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}


/* === Kundenfix 2026-07-20 === */
.calc-extra[hidden],
.calc-extra.is-calc-hidden {
  display: none !important;
}

/* Preisplaner: ausgewogene Desktop-Proportionen */
@media (min-width: 901px) {
  body.mode-ideewerk #preisplaner.calc-section {
    min-height: auto;
    padding-top: clamp(2.25rem, 5vh, 3.25rem);
    padding-bottom: clamp(2.25rem, 5vh, 3.25rem);
    max-width: none;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-align: left;
  }
  body.mode-ideewerk #preisplaner.calc-section > h2 {
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    margin-bottom: .45rem;
  }
  body.mode-ideewerk #preisplaner.calc-section > p {
    margin-bottom: 1.25rem;
    font-size: .95rem;
    max-width: 38rem;
    opacity: .85;
  }
  body.mode-ideewerk #preisplaner .calc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
    gap: 1.25rem;
    align-items: stretch;
    width: min(calc(100vw - 3rem), 68rem);
    margin-top: 1rem;
  }
  body.mode-ideewerk #preisplaner .calc-panel,
  body.mode-ideewerk #preisplaner .calc-blueprint {
    height: 100%;
    margin: 0;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(10, 11, 14, .72);
    box-shadow: 0 1px rgba(255, 255, 255, .06) inset, 0 14px 36px rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  body.mode-ideewerk #preisplaner .calc-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
  }
  body.mode-ideewerk #preisplaner .calc-group {
    margin: 0;
  }
  body.mode-ideewerk #preisplaner .calc-group label {
    margin-bottom: .4rem;
    font-size: .62rem;
    letter-spacing: .12em;
    color: rgba(245, 245, 247, .55);
  }
  body.mode-ideewerk #preisplaner .calc-group select {
    padding: .65rem .85rem;
    border-radius: 10px;
    font-size: .95rem;
  }
  body.mode-ideewerk #preisplaner .calc-area-row {
    gap: .85rem;
  }
  body.mode-ideewerk #preisplaner .calc-area-val {
    min-width: 4.25rem;
    font-size: .95rem;
  }
  body.mode-ideewerk #preisplaner .calc-extras {
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
  }
  body.mode-ideewerk #preisplaner .calc-extra {
    align-items: center;
    gap: .65rem;
    padding: .7rem .8rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .03);
  }
  body.mode-ideewerk #preisplaner .calc-extra:hover {
    border-color: rgba(255, 107, 44, .35);
  }
  body.mode-ideewerk #preisplaner .calc-extra input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    border: 1.5px solid rgba(255, 255, 255, .35);
    background: rgba(0, 0, 0, .35);
    display: grid;
    place-items: center;
    accent-color: unset;
  }
  body.mode-ideewerk #preisplaner .calc-extra input[type="checkbox"]::after {
    content: "";
    width: .34rem;
    height: .18rem;
    border-left: 2px solid #0a0b0e;
    border-bottom: 2px solid #0a0b0e;
    transform: rotate(-45deg) translate(.5px, -1px) scale(0);
    opacity: 0;
  }
  body.mode-ideewerk #preisplaner .calc-extra input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #ff8f5a, #ff6b2c);
    border-color: transparent;
  }
  body.mode-ideewerk #preisplaner .calc-extra input[type="checkbox"]:checked::after {
    opacity: 1;
    transform: rotate(-45deg) translate(.5px, -1px) scale(1);
  }
  body.mode-ideewerk #preisplaner .calc-extra strong {
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.25;
  }
  body.mode-ideewerk #preisplaner .calc-extra small {
    font-size: .7rem;
    line-height: 1.3;
    opacity: .7;
  }
  body.mode-ideewerk #preisplaner .calc-cta {
    margin-top: auto;
    width: 100%;
    justify-content: center;
    padding: .8rem 1.25rem;
  }
  body.mode-ideewerk #preisplaner .calc-blueprint {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    gap: 0;
  }
  body.mode-ideewerk #preisplaner .calc-visual {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.1rem;
    min-height: 0;
    padding: 1.35rem 1.4rem 1.15rem;
    border: none;
    border-radius: 0;
    background: radial-gradient(circle at 12% 20%, rgba(255, 107, 44, .12), transparent 55%),
                linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
    text-align: left;
  }
  body.mode-ideewerk #preisplaner .calc-visual__frame {
    flex: 0 0 auto;
    align-items: flex-start;
    gap: .1rem;
    min-width: 5.5rem;
  }
  body.mode-ideewerk #preisplaner .calc-visual__value {
    font-size: clamp(2.4rem, 4vw, 3.1rem);
    line-height: .95;
    letter-spacing: -.03em;
    text-shadow: none;
    text-decoration: none;
  }
  body.mode-ideewerk #preisplaner .calc-visual__unit {
    font-size: .68rem;
    letter-spacing: .14em;
    opacity: .65;
  }
  body.mode-ideewerk #preisplaner .calc-visual__meta {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-width: 0;
  }
  body.mode-ideewerk #preisplaner .calc-visual__service {
    margin: 0;
    text-align: left;
    max-width: none;
    font-size: .95rem;
    color: rgba(245, 245, 247, .88);
  }
  body.mode-ideewerk #preisplaner .calc-visual__extras {
    justify-content: flex-start;
  }
  body.mode-ideewerk #preisplaner .calc-result {
    margin: 0;
    padding: 1.25rem 1.4rem 1.35rem;
    border: none;
    border-top: 1px solid rgba(255, 107, 44, .22);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(255, 107, 44, .08), rgba(255, 255, 255, .02));
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body.mode-ideewerk #preisplaner .calc-result-label {
    font-size: .62rem;
    letter-spacing: .12em;
    color: rgba(245, 245, 247, .5);
  }
  body.mode-ideewerk #preisplaner .calc-result-price {
    margin: .35rem 0 .45rem;
    font-size: clamp(1.55rem, 2.6vw, 2rem);
    color: var(--accent-glow);
    line-height: 1.1;
  }
  body.mode-ideewerk #preisplaner .calc-result-detail {
    margin: 0 0 .55rem;
    font-size: .85rem;
  }
  body.mode-ideewerk #preisplaner .calc-result .fine-print {
    margin: 0;
    font-size: .72rem;
    line-height: 1.45;
    opacity: .62;
    text-align: left;
  }
}
.wa-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  margin: .2rem 0 .65rem;
}
.wa-qr {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: #fff;
}
.wa-qr-hint {
  font-size: .7rem;
  opacity: .65;
}
.contact-form__row {
  display: grid;
  gap: inherit;
}
@media (max-width: 900px) {
  .wa-qr-wrap { align-items: center; }
}

/* DSGVO-Checkbox: klein, klar, premium */
body.mode-ideewerk #kontakt .dsgvo-check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: .15rem 0 .1rem;
  padding: .65rem .75rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  font-size: .78rem;
  line-height: 1.4;
  color: rgba(245, 245, 247, .78);
  transition: border-color .2s ease, background .2s ease;
}
body.mode-ideewerk #kontakt .dsgvo-check:hover {
  border-color: rgba(255, 107, 44, .35);
  background: rgba(255, 107, 44, .05);
}
body.mode-ideewerk #kontakt .dsgvo-check:has(input:focus-visible) {
  border-color: rgba(255, 107, 44, .55);
  box-shadow: 0 0 0 2px rgba(255, 107, 44, .18);
}
body.mode-ideewerk #kontakt .dsgvo-check:has(input:checked) {
  border-color: rgba(255, 107, 44, .45);
  background: rgba(255, 107, 44, .08);
}
body.mode-ideewerk #kontakt .dsgvo-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  min-width: 1.05rem;
  min-height: 1.05rem;
  margin: .12rem 0 0;
  padding: 0;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .35);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
body.mode-ideewerk #kontakt .dsgvo-check input[type="checkbox"]::after {
  content: "";
  width: .38rem;
  height: .22rem;
  border-left: 2px solid #0a0b0e;
  border-bottom: 2px solid #0a0b0e;
  transform: rotate(-45deg) translate(.5px, -1px) scale(0);
  opacity: 0;
  transition: transform .12s ease, opacity .12s ease;
}
body.mode-ideewerk #kontakt .dsgvo-check input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #ff8f5a, #ff6b2c);
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(255, 107, 44, .25);
}
body.mode-ideewerk #kontakt .dsgvo-check input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: rotate(-45deg) translate(.5px, -1px) scale(1);
}
body.mode-ideewerk #kontakt .dsgvo-check span {
  flex: 1;
  min-width: 0;
}
body.mode-ideewerk #kontakt .dsgvo-check a {
  color: var(--accent-glow);
  text-underline-offset: 2px;
}

/* Kontakt Desktop: kompakter, weniger Scroll */
@media (min-width: 901px) {
  body.mode-ideewerk #kontakt.contact-section {
    min-height: auto;
    padding-top: clamp(2rem, 4vh, 2.75rem);
    padding-bottom: clamp(2rem, 4vh, 2.75rem);
  }
  body.mode-ideewerk #kontakt.contact-section > h2 {
    font-size: clamp(1.65rem, 2.8vw, 2.15rem);
    margin-bottom: .45rem;
  }
  body.mode-ideewerk #kontakt.contact-section > p {
    margin-bottom: 1.1rem;
    font-size: .95rem;
    max-width: 40rem;
  }
  body.mode-ideewerk #kontakt .mono-label {
    margin-bottom: .4rem;
  }
  body.mode-ideewerk #kontakt .contact-grid {
    gap: 1.15rem;
    margin-top: .85rem;
    align-items: start;
  }
  body.mode-ideewerk #kontakt .contact-form {
    gap: .65rem;
    padding: 1.15rem 1.25rem;
  }
  body.mode-ideewerk #kontakt .contact-form__row {
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
  }
  body.mode-ideewerk #kontakt .contact-form label {
    gap: .28rem;
    font-size: .8rem;
  }
  body.mode-ideewerk #kontakt .contact-form input:not([type="checkbox"]),
  body.mode-ideewerk #kontakt .contact-form select,
  body.mode-ideewerk #kontakt .contact-form textarea {
    padding: .55rem .8rem;
    font-size: .92rem;
    border-radius: 9px;
    min-height: 2.45rem;
  }
  body.mode-ideewerk #kontakt .contact-form textarea {
    min-height: 4.75rem;
    resize: vertical;
  }
  body.mode-ideewerk #kontakt .contact-form .btn-primary {
    padding: .7rem 1.35rem;
    font-size: .92rem;
    justify-self: start;
  }
  body.mode-ideewerk #kontakt .contact-aside {
    gap: .45rem;
  }
  body.mode-ideewerk #kontakt .contact-aside > p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.45;
  }
  body.mode-ideewerk #kontakt .contact-aside h3 {
    margin: .55rem 0 .2rem;
    font-size: .62rem;
  }
  body.mode-ideewerk #kontakt .contact-team-heading {
    margin-top: .85rem !important;
  }
  body.mode-ideewerk #kontakt .team-grid {
    gap: .5rem;
    margin-top: .45rem;
  }
  body.mode-ideewerk #kontakt .team-card {
    padding: .7rem .8rem;
  }
  body.mode-ideewerk #kontakt .team-avatar {
    width: 1.85rem;
    height: 1.85rem;
    font-size: .65rem;
    margin-bottom: .4rem;
  }
  body.mode-ideewerk #kontakt .team-card h3 {
    margin: 0 0 .15rem;
    font-size: .82rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    font-family: var(--font-body);
  }
  body.mode-ideewerk #kontakt .team-card p {
    font-size: .72rem;
    line-height: 1.35;
    margin: 0;
  }
}

/* ============================================================
   Homepage Rhythm Pass — Desktop Proportionen & Größen
   Einheitlicherer vertikalen Rhythmus, weniger „Luft“,
   ausgewogenere Karten/Listen/Footer. Mobile unverändert.
   ============================================================ */
@media (min-width: 901px) {
  /* Globale Sektions-Luft etwas ruhiger */
  body.mode-ideewerk .section.zone-section {
    padding-top: clamp(2.5rem, 5.5vh, 3.75rem);
    padding-bottom: clamp(2.5rem, 5.5vh, 3.75rem);
  }
  body.mode-ideewerk .section.zone-section.zone-section--compact {
    padding-top: clamp(1.75rem, 3.5vh, 2.5rem);
    padding-bottom: clamp(1.75rem, 3.5vh, 2.5rem);
  }
  body.mode-ideewerk .section.zone-section.zone-section--split {
    padding-top: clamp(2rem, 4.5vh, 3rem);
    padding-bottom: clamp(2rem, 4.5vh, 3rem);
  }
  body.mode-ideewerk .zone-chapter-intro {
    min-height: 28vh;
    padding-bottom: 1.1rem;
    margin-bottom: .25rem;
  }
  body.mode-ideewerk .zone-chapter-intro .zone-chapter-title {
    font-size: clamp(1.55rem, 2.8vw, 2.1rem);
    margin-bottom: .45rem;
  }
  body.mode-ideewerk .zone-chapter-intro .zone-chapter-sub {
    font-size: .95rem;
  }
  body.mode-ideewerk .section > h2 {
    font-size: clamp(1.7rem, 2.8vw, 2.35rem);
    margin-bottom: .55rem;
  }
  body.mode-ideewerk .section > p:not(.fine-print):not(.gallery-caption) {
    margin-bottom: 1.25rem;
    font-size: .97rem;
    line-height: 1.65;
  }

  /* Hero: etwas dichter, weniger Scroll-Druck */
  body.mode-ideewerk .cinematic-slide--hero h1 {
    font-size: clamp(2.55rem, 5.8vw, 4.1rem);
    margin-bottom: .75rem;
  }
  body.mode-ideewerk .cinematic-slide .lead {
    font-size: 1.02rem;
    max-width: 34rem;
  }
  body.mode-ideewerk .cinematic-slide--statement h2 {
    font-size: clamp(1.85rem, 3.6vw, 2.65rem);
  }
  body.mode-ideewerk .stat-row {
    gap: .75rem;
    max-width: 36rem;
  }
  body.mode-ideewerk .stat-row li {
    padding: .85rem .65rem;
  }
  body.mode-ideewerk .stat-row strong {
    font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  }

  /* Warum-wir / Before-After */
  body.mode-ideewerk #warum-wir .before-after-block {
    max-width: min(100%, 52rem);
    margin-top: 1.15rem;
  }
  body.mode-ideewerk #warum-wir .checklist-block {
    margin-top: 1.1rem;
    gap: .55rem;
    max-width: 36rem;
  }
  body.mode-ideewerk #warum-wir .checklist li {
    font-size: .9rem;
  }
  body.mode-ideewerk #warum-wir .checklist li:before {
    width: 1.05rem;
    height: 1.05rem;
    font-size: .62rem;
  }

  /* Leistungen-Karten: kürzere Bilder, dichtere Listen */
  body.mode-ideewerk #leistungen .cards-grid--4up {
    gap: 1rem;
    margin-top: 1.25rem;
  }
  body.mode-ideewerk #leistungen .service-card-mini > img {
    aspect-ratio: 16 / 10;
    max-height: 168px;
    object-fit: cover;
  }
  body.mode-ideewerk #leistungen .service-card-mini h3 {
    margin-top: .9rem;
    margin-bottom: .3rem;
    font-size: .95rem;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
  body.mode-ideewerk #leistungen .service-card-mini p {
    font-size: .82rem;
    line-height: 1.45;
    margin-bottom: .55rem;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
  body.mode-ideewerk #leistungen .service-card-mini .checklist-mini {
    gap: .28rem;
    padding-left: 1.1rem !important;
    padding-right: 1.1rem;
    padding-bottom: 1.05rem;
    font-size: .74rem;
    line-height: 1.35;
  }
  body.mode-ideewerk #leistungen .checklist-mini li {
    gap: .4rem;
  }
  body.mode-ideewerk #leistungen .checklist-mini li:before {
    width: .85rem;
    height: .85rem;
    font-size: .52rem;
    margin-top: .12rem;
  }
  body.mode-ideewerk #leistungen .services-footer-claim {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    font-size: .88rem;
  }

  /* Objekt-Split: gleiche Höhe, weniger Leerraum */
  body.mode-ideewerk #objekt .split-feature {
    gap: 1.1rem;
    align-items: stretch;
    width: min(calc(100vw - 3rem), 68rem);
  }
  body.mode-ideewerk #objekt .split-feature__content {
    padding: 1.25rem 1.35rem;
    gap: .7rem;
  }
  body.mode-ideewerk #objekt .split-feature__title {
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
    margin-bottom: .15rem;
  }
  body.mode-ideewerk #objekt .split-muted {
    font-size: .9rem;
    max-width: none;
  }
  body.mode-ideewerk #objekt .checklist {
    gap: .5rem;
  }
  body.mode-ideewerk #objekt .checklist li {
    font-size: .88rem;
  }
  body.mode-ideewerk #objekt .split-tagline {
    margin: .35rem 0 .75rem;
    font-size: .88rem;
  }
  body.mode-ideewerk #objekt .split-feature__media {
    min-height: 100%;
  }
  body.mode-ideewerk #objekt .split-feature__media img {
    min-height: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Trust-Band */
  body.mode-ideewerk #trust .trust-band {
    padding: 1.15rem 1.25rem;
    max-width: min(calc(100vw - 3rem), 68rem);
  }
  body.mode-ideewerk #trust .quality-strip {
    gap: .6rem;
    margin-bottom: 1rem;
  }
  body.mode-ideewerk #trust .quality-strip li {
    padding: .7rem .85rem;
    font-size: .78rem;
    line-height: 1.4;
  }
  body.mode-ideewerk #trust .trust-band__grid {
    gap: 1rem;
  }
  body.mode-ideewerk #trust .trust-band__grid strong {
    font-size: .9rem;
  }
  body.mode-ideewerk #trust .trust-band__grid p {
    font-size: .82rem;
  }
  body.mode-ideewerk #trust .trust-band__note {
    margin-top: .9rem;
    padding-top: .85rem;
    font-size: .78rem;
  }

  /* Prozess-Schritte kompakter */
  body.mode-ideewerk #prozess .process-steps {
    margin-top: 1.15rem;
    gap: .65rem;
    max-width: min(100%, 40rem);
  }
  body.mode-ideewerk #prozess .process-steps li {
    padding: .85rem 1rem;
    gap: .75rem;
  }
  body.mode-ideewerk #prozess .process-steps li span {
    font-size: .75rem;
  }
  body.mode-ideewerk #prozess .process-steps h3 {
    font-size: .92rem;
    margin-bottom: .15rem;
  }
  body.mode-ideewerk #prozess .process-steps p {
    font-size: .84rem;
    line-height: 1.45;
  }

  /* Region-Pills */
  body.mode-ideewerk #region .region-pills {
    margin-top: .9rem;
    gap: .4rem;
  }
  body.mode-ideewerk #region .region-pill {
    min-height: 2.35rem;
    padding: .35rem .85rem;
    font-size: .78rem;
  }

  /* Kundenstimmen */
  body.mode-ideewerk #kundenstimmen .testimonial-marquee,
  body.mode-ideewerk #kundenstimmen .testimonial-grid {
    margin-top: 1.15rem;
    gap: .85rem;
  }
  body.mode-ideewerk #kundenstimmen .glass-card.testimonial {
    padding: 1.1rem 1.15rem 1rem;
  }
  body.mode-ideewerk #kundenstimmen .glass-card.testimonial p {
    font-size: .86rem;
    line-height: 1.55;
  }
  body.mode-ideewerk #kundenstimmen .glass-card.testimonial p:before {
    font-size: 1.55rem;
    margin-bottom: .2rem;
  }
  body.mode-ideewerk #kundenstimmen .glass-card.testimonial footer {
    margin-top: .7rem;
    padding-top: .6rem;
    font-size: .7rem;
  }

  /* FAQ */
  body.mode-ideewerk #faq .process-guarantees {
    padding: 1rem 1.15rem;
    margin: .75rem 0 1rem;
    max-width: min(100%, 44rem);
  }
  body.mode-ideewerk #faq .process-guarantees .checklist {
    gap: .45rem;
  }
  body.mode-ideewerk #faq .process-guarantees .checklist li {
    font-size: .86rem;
  }
  body.mode-ideewerk #faq .process-guarantees .checklist li:before {
    width: .95rem;
    height: .95rem;
    font-size: .58rem;
  }
  body.mode-ideewerk #faq .faq-heading {
    margin-top: 1.1rem;
    margin-bottom: .65rem;
    font-size: 1rem;
  }
  body.mode-ideewerk #faq details {
    margin: .45rem 0;
    padding: .85rem 1.1rem;
  }
  body.mode-ideewerk #faq summary {
    font-size: .92rem;
  }
  body.mode-ideewerk #faq details > p {
    font-size: .86rem;
    margin-top: .55rem;
  }

  /* Footer: 4 Spalten statt Wrap-Lücke */
  body.mode-ideewerk .site-footer .footer-inner {
    padding-top: 2.25rem;
    padding-bottom: 1.75rem;
  }
  body.mode-ideewerk .site-footer .footer-brand {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
  }
  body.mode-ideewerk .site-footer .footer-brand p {
    margin-top: .65rem;
    font-size: .88rem;
    max-width: 34rem;
  }
  body.mode-ideewerk .site-footer .footer-grid {
    grid-template-columns: 1.25fr 1fr 1.1fr .85fr;
    gap: 1.5rem 2rem;
    margin-bottom: 1.5rem;
  }
  body.mode-ideewerk .site-footer .footer-grid h3 {
    margin-bottom: .65rem;
    font-size: .66rem;
  }
  body.mode-ideewerk .site-footer .footer-grid li {
    margin: .28rem 0;
    font-size: .86rem;
  }
  body.mode-ideewerk .site-footer .footer-legal {
    padding-top: 1.15rem;
    font-size: .75rem;
  }

  /* Scroll-Ende weniger hoch */
  body.mode-ideewerk .scroll-end-cap {
    height: clamp(3rem, 7vh, 4.5rem);
  }
}

/* ============================================================
   Mobile Rhythm + Performance Pass
   ============================================================ */
@media (max-width: 900px), ((hover: none) and (pointer: coarse)) {
  /* Schnelleres Scroll-Rendering — ohne ständiges Layer-Discard (Flicker) */
  body.mode-ideewerk {
    -webkit-overflow-scrolling: touch;
  }
  body.mode-ideewerk .scroll-video-wrap {
    /* will-change dauerhaft erzeugt auf iOS oft Text-Flashes beim Scrollen */
    will-change: auto;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  /* Reveal einmalig: kein Opacity-Pingpong mehr beim Hoch-/Runterscrollen */
  body.mode-ideewerk [data-reveal] img,
  body.mode-ideewerk .service-card-mini img,
  body.mode-ideewerk .split-media,
  body.mode-ideewerk .glass-card > img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  body.mode-ideewerk .section.zone-section,
  body.mode-ideewerk .section.zone-section.zone-section--compact,
  body.mode-ideewerk .section.zone-section.zone-section--split {
    min-height: auto;
    padding-top: 2.1rem;
    padding-bottom: 2.1rem;
    /* Kein contain-intrinsic-size: blähte kurze Sections auf ~720px auf */
    content-visibility: visible;
    contain-intrinsic-size: none;
  }
  body.mode-ideewerk .zone-chapter-intro {
    min-height: auto;
    padding: 1.5rem 0 1rem;
    border-bottom: none;
    content-visibility: visible;
  }
  body.mode-ideewerk .zone-chapter-intro .zone-chapter-title {
    font-size: clamp(1.4rem, 6.5vw, 1.85rem);
  }
  body.mode-ideewerk .zone-chapter-intro .zone-chapter-sub {
    font-size: .9rem;
  }
  body.mode-ideewerk .section > h2 {
    font-size: clamp(1.45rem, 6.2vw, 1.95rem);
    margin-bottom: .45rem;
  }
  body.mode-ideewerk .section > p:not(.fine-print) {
    font-size: .9rem;
    margin-bottom: 1rem;
    line-height: 1.55;
  }

  /* Hero kompakter */
  body.mode-ideewerk .cinematic-slide--hero h1,
  body.mode-ideewerk .cinematic-slide h1 {
    font-size: clamp(1.85rem, 8.2vw, 2.45rem) !important;
    margin-bottom: .65rem;
  }
  body.mode-ideewerk .cinematic-slide--statement h2 {
    font-size: clamp(1.45rem, 6.5vw, 1.95rem);
  }
  body.mode-ideewerk .cinematic-slide .lead {
    font-size: .9rem;
    line-height: 1.5;
  }
  body.mode-ideewerk .cinematic-slides {
    min-height: 0;
  }
  body.mode-ideewerk .hero-cta {
    margin-top: 1rem;
    gap: .55rem;
  }
  body.mode-ideewerk .hero-cta .btn {
    min-height: 2.65rem;
    padding: .7rem 1.1rem;
    font-size: .9rem;
  }
  body.mode-ideewerk .stat-row {
    gap: .5rem;
    width: min(100%, 22rem);
  }
  body.mode-ideewerk .stat-row li {
    padding: .65rem .4rem;
  }
  body.mode-ideewerk .stat-row strong {
    font-size: 1.2rem;
  }
  body.mode-ideewerk .stat-row span {
    font-size: .65rem;
  }

  /* Chapter-Rail vs Sticky-CTA: klarer Abstand */
  body.mode-ideewerk .chapter-rail {
    bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
    gap: .2rem;
    padding: .28rem .35rem;
  }
  body.mode-ideewerk .chapter-rail button {
    min-width: 2.5rem;
    min-height: 2.5rem;
    font-size: .62rem;
  }
  body.mode-ideewerk .sticky-cta {
    padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom, 0px));
  }
  body.mode-ideewerk .sticky-cta .btn {
    min-height: 2.65rem;
  }

  /* Leistungen */
  body.mode-ideewerk #leistungen .cards-grid {
    gap: .85rem;
    margin-top: 1rem;
  }
  body.mode-ideewerk #leistungen .service-card-mini > img,
  body.mode-ideewerk #leistungen .glass-card > img:first-child {
    height: clamp(150px, 42vw, 190px);
    aspect-ratio: auto;
  }
  body.mode-ideewerk #leistungen .service-card-mini h3 {
    font-size: .95rem;
    margin-top: .85rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  body.mode-ideewerk #leistungen .service-card-mini p {
    font-size: .82rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: .5rem;
  }
  body.mode-ideewerk #leistungen .service-card-mini .checklist-mini {
    font-size: .75rem;
    gap: .28rem;
    padding-left: 1rem !important;
    padding-right: 1rem;
    padding-bottom: 1rem;
    line-height: 1.35;
  }
  body.mode-ideewerk #leistungen .checklist-mini li:before {
    width: .85rem;
    height: .85rem;
    font-size: .52rem;
  }
  body.mode-ideewerk #leistungen .services-footer-claim {
    margin-top: 1rem;
    padding-top: .9rem;
    font-size: .84rem;
    width: 100%;
  }

  /* Warum-wir */
  body.mode-ideewerk #warum-wir .before-after-block {
    margin-top: .9rem;
    border-radius: 14px;
  }
  body.mode-ideewerk #warum-wir .checklist-block {
    margin-top: .9rem;
    gap: .45rem;
  }
  body.mode-ideewerk #warum-wir .checklist li {
    font-size: .86rem;
  }
  body.mode-ideewerk #warum-wir .checklist li:before {
    width: .95rem;
    height: .95rem;
    font-size: .55rem;
  }

  /* Objekt split */
  body.mode-ideewerk #objekt .split-feature {
    gap: .85rem;
  }
  body.mode-ideewerk #objekt .split-feature__content {
    padding: 1.05rem 1.1rem;
    gap: .6rem;
  }
  body.mode-ideewerk #objekt .split-feature__title {
    font-size: clamp(1.3rem, 5.8vw, 1.65rem);
  }
  body.mode-ideewerk #objekt .split-muted {
    font-size: .86rem;
  }
  body.mode-ideewerk #objekt .split-tagline {
    margin: .25rem 0 .65rem;
    font-size: .84rem;
  }
  body.mode-ideewerk #objekt .split-feature__media {
    min-height: 220px;
  }
  body.mode-ideewerk #objekt .split-cta {
    width: 100%;
    justify-content: center;
  }

  /* Trust / Prozess / Region */
  body.mode-ideewerk #trust .trust-band {
    padding: 1rem;
  }
  body.mode-ideewerk #trust .quality-strip {
    grid-template-columns: 1fr;
    gap: .5rem;
    margin-bottom: .85rem;
  }
  body.mode-ideewerk #trust .quality-strip li {
    padding: .7rem .8rem;
    font-size: .8rem;
  }
  body.mode-ideewerk #trust .trust-band__grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }
  body.mode-ideewerk #prozess .process-steps {
    margin-top: 1rem;
    gap: .55rem;
  }
  body.mode-ideewerk #prozess .process-steps li {
    padding: .8rem .9rem;
  }
  body.mode-ideewerk #prozess .process-steps h3 {
    font-size: .9rem;
  }
  body.mode-ideewerk #prozess .process-steps p {
    font-size: .8rem;
  }
  body.mode-ideewerk #region .region-pills {
    justify-content: center;
    gap: .4rem;
  }
  body.mode-ideewerk #region .region-pill {
    min-height: 2.4rem;
    font-size: .78rem;
  }

  /* Testimonials */
  body.mode-ideewerk #kundenstimmen .glass-card.testimonial {
    padding: 1rem;
  }
  body.mode-ideewerk #kundenstimmen .glass-card.testimonial p {
    font-size: .84rem;
    -webkit-line-clamp: 5;
  }

  /* Preisplaner Mobile (Basis — Detailregeln weiter unten) */
  body.mode-ideewerk #preisplaner.calc-section {
    padding-top: 1.35rem;
    padding-bottom: 1.35rem;
    max-width: none;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  body.mode-ideewerk #preisplaner .calc-layout {
    gap: .65rem;
    width: 100%;
  }
  body.mode-ideewerk #preisplaner .calc-panel {
    gap: .65rem;
    padding: .8rem .85rem;
  }
  body.mode-ideewerk #preisplaner .calc-extras {
    grid-template-columns: 1fr;
    gap: .35rem;
  }
  body.mode-ideewerk #preisplaner .calc-extra {
    padding: .5rem .6rem;
    align-items: center;
  }
  body.mode-ideewerk #preisplaner .calc-extra input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    margin: 0;
    border-radius: 4px;
    border: 1.5px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.35);
    display: grid;
    place-items: center;
  }
  body.mode-ideewerk #preisplaner .calc-extra input[type="checkbox"]::after {
    content: "";
    width: .34rem;
    height: .18rem;
    border-left: 2px solid #0a0b0e;
    border-bottom: 2px solid #0a0b0e;
    transform: rotate(-45deg) translate(.5px, -1px) scale(0);
    opacity: 0;
  }
  body.mode-ideewerk #preisplaner .calc-extra input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #ff8f5a, #ff6b2c);
    border-color: transparent;
  }
  body.mode-ideewerk #preisplaner .calc-extra input[type="checkbox"]:checked::after {
    opacity: 1;
    transform: rotate(-45deg) translate(.5px, -1px) scale(1);
  }
  body.mode-ideewerk #preisplaner .calc-result {
    padding: .7rem .85rem;
  }
  body.mode-ideewerk #preisplaner .calc-result-price {
    font-size: 1.25rem;
  }

  /* FAQ */
  body.mode-ideewerk #faq .process-guarantees {
    padding: .9rem 1rem;
  }
  body.mode-ideewerk #faq .process-guarantees .checklist li:before {
    width: .9rem;
    height: .9rem;
    font-size: .55rem;
  }
  body.mode-ideewerk #faq details {
    margin: .4rem 0;
    padding: .8rem .95rem;
  }
  body.mode-ideewerk #faq summary {
    font-size: .88rem;
    min-height: 2.5rem;
  }

  /* Kontakt Mobile */
  body.mode-ideewerk #kontakt.contact-section {
    padding-top: 2rem;
    padding-bottom: 2.25rem;
  }
  body.mode-ideewerk #kontakt .contact-form {
    gap: .65rem;
    padding: 1rem 1.05rem;
  }
  body.mode-ideewerk #kontakt .contact-form__row {
    grid-template-columns: 1fr;
    gap: .65rem;
  }
  body.mode-ideewerk #kontakt .contact-form input:not([type="checkbox"]),
  body.mode-ideewerk #kontakt .contact-form select,
  body.mode-ideewerk #kontakt .contact-form textarea {
    min-height: 2.6rem;
    padding: .65rem .8rem;
    font-size: 1rem;
  }
  body.mode-ideewerk #kontakt .contact-form textarea {
    min-height: 5rem;
  }
  body.mode-ideewerk #kontakt .dsgvo-check {
    padding: .6rem .7rem;
    font-size: .76rem;
  }
  body.mode-ideewerk #kontakt .dsgvo-check input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    min-height: 1.05rem;
  }
  body.mode-ideewerk #kontakt .wa-qr {
    width: 104px;
    height: 104px;
  }
  body.mode-ideewerk #kontakt .team-grid {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  body.mode-ideewerk #kontakt .team-card {
    padding: .8rem .9rem;
  }
  body.mode-ideewerk #kontakt .contact-form .btn-primary {
    width: 100%;
    justify-content: center;
  }

  /* Footer */
  body.mode-ideewerk .site-footer .footer-inner {
    padding-top: 1.75rem;
    padding-bottom: 1.5rem;
  }
  body.mode-ideewerk .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem 1rem;
    text-align: left;
  }
  body.mode-ideewerk .site-footer .footer-grid h3 {
    margin-bottom: .45rem;
  }
  body.mode-ideewerk .site-footer .footer-grid li {
    font-size: .82rem;
    margin: .25rem 0;
  }
  body.mode-ideewerk .site-footer .footer-brand {
    text-align: left;
    margin-bottom: 1.15rem;
    padding-bottom: 1rem;
  }
  body.mode-ideewerk .site-footer .footer-brand img {
    margin: 0;
  }
  body.mode-ideewerk .site-footer .footer-brand p {
    margin-left: 0;
    text-align: left;
  }
  body.mode-ideewerk .site-footer .footer-legal {
    text-align: left;
  }

  /* Weniger teure Blur-Schichten auf Mobile */
  body.mode-ideewerk .glass-card,
  body.mode-ideewerk .process-steps li,
  body.mode-ideewerk .faq details,
  body.mode-ideewerk .chapter-rail,
  body.mode-ideewerk .sticky-cta {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  body.mode-ideewerk .scroll-end-cap {
    height: 3rem;
  }

  /* Tap-Feedback ohne Layout-Shift */
  body.mode-ideewerk .btn:active,
  body.mode-ideewerk .calc-extra:active,
  body.mode-ideewerk .region-pill:active {
    transform: scale(.98);
  }
}

/* Desktop: content-visibility für Offscreen-Sektionen */
@media (min-width: 901px) {
  body.mode-ideewerk #warum-wir,
  body.mode-ideewerk #leistungen,
  body.mode-ideewerk #objekt,
  body.mode-ideewerk #trust,
  body.mode-ideewerk #prozess,
  body.mode-ideewerk #region,
  body.mode-ideewerk #kundenstimmen,
  body.mode-ideewerk #faq {
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
  }
}

/* Preloader schneller weg wirken */
.site-preloader {
  transition: opacity .28s ease, visibility .28s ease;
}
body:not(.is-preloading) .site-preloader {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Scroll-Video: nie schwarzer Screen */
body.mode-ideewerk .scroll-video-wrap {
  background: #0a0b0e url(/poster.webp) center / cover no-repeat;
}
body.mode-ideewerk .scroll-video-wrap video.chapter-layer[data-chapter="0"] {
  opacity: 1;
}


/* Chapter-Rail ausblenden ohne Header zu überdecken */
@media (max-width: 900px) {
  body.mode-ideewerk .chapter-rail.is-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%) translateY(18px) !important;
  }
}

/* ============================================================
   Mobile Spacing + Scroll Pass
   ============================================================ */
@media (max-width: 900px), ((hover: none) and (pointer: coarse)) {
  /* Zone 0: Inhalt + angenehmer Übergang zur nächsten Section */
  body.mode-ideewerk .chapter-zone[data-chapter-zone="0"] {
    min-height: 0 !important;
    height: auto !important;
    position: relative;
    padding-bottom: clamp(3.25rem, 12vh, 5rem) !important;
  }
  body.mode-ideewerk .chapter-zone[data-chapter-zone="0"] .cinematic-hero-pin,
  body.mode-ideewerk .chapter-zone[data-chapter-zone="0"] .cinematic-hero-pin.cinematic-hero--static {
    min-height: 0 !important;
    height: auto !important;
  }
  body.mode-ideewerk .chapter-zone[data-chapter-zone="0"] .cinematic-hero-pin__sticky {
    position: relative !important;
    top: auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    align-items: stretch !important;
    box-sizing: border-box;
    padding-top: calc(4.1rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 1.1rem !important;
  }
  body.mode-ideewerk .chapter-zone[data-chapter-zone="0"] .cinematic-hero-pin__inner {
    width: 100%;
    position: relative !important;
    padding: 0 1.125rem !important;
  }
  body.mode-ideewerk .chapter-zone[data-chapter-zone="0"] .cinematic-slides {
    min-height: 0 !important;
  }
  /* Statement/Stats-Slides auf Mobile nicht im Flow (waren oft display:none, aber absichern) */
  body.mode-ideewerk .chapter-zone[data-chapter-zone="0"] .cinematic-slide--statement,
  body.mode-ideewerk .chapter-zone[data-chapter-zone="0"] .cinematic-slide--stats {
    display: none !important;
  }
  body.mode-ideewerk .chapter-zone[data-chapter-zone="0"] .cinematic-progress {
    display: none !important;
    margin: 0 !important;
    height: 0 !important;
  }
  body.mode-ideewerk .chapter-zone[data-chapter-zone="0"] .cinematic-slide--hero {
    padding: 0 !important;
    min-height: 0 !important;
  }
  body.mode-ideewerk .chapter-zone[data-chapter-zone="0"] .cinematic-slide--hero h1 {
    font-size: clamp(1.7rem, 7.4vw, 2.2rem) !important;
    line-height: 1.14 !important;
    margin: 0 0 .55rem !important;
  }
  body.mode-ideewerk .chapter-zone[data-chapter-zone="0"] .cinematic-slide .lead {
    font-size: .88rem !important;
    line-height: 1.45 !important;
    max-width: 36ch;
    margin: 0 0 .15rem !important;
  }
  body.mode-ideewerk .chapter-zone[data-chapter-zone="0"] .eyebrow {
    margin-bottom: .55rem !important;
  }
  body.mode-ideewerk .chapter-zone[data-chapter-zone="0"] .hero-cta {
    margin-top: 1.05rem !important;
    margin-bottom: 0 !important;
  }

  /* Sticky-CTA Sichtbarkeit (stärker als Base-CSS Transition) */
  body.mode-ideewerk .sticky-cta {
    transform: translateY(110%) !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
  body.mode-ideewerk .sticky-cta.is-visible {
    transform: translateY(0) !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  body.mode-ideewerk .sticky-cta.is-suppressed {
    transform: translateY(110%) !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* Sections nicht unter Fixed-Header schneiden */
  body.mode-ideewerk .section.zone-section,
  body.mode-ideewerk .zone-chapter-intro {
    scroll-margin-top: 4.75rem;
  }
  body.mode-ideewerk .zone-chapter-intro {
    min-height: 0 !important;
    padding: 1.35rem 1.125rem .85rem !important;
    margin-bottom: 0 !important;
  }

  /* Dichte, gleichmäßige Section-Abstände — Höhe folgt dem Inhalt */
  body.mode-ideewerk .section.zone-section,
  body.mode-ideewerk .section.zone-section.zone-section--compact,
  body.mode-ideewerk .section.zone-section.zone-section--split {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
  }
  body.mode-ideewerk #region.section.zone-section,
  body.mode-ideewerk #trust.section.zone-section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  body.mode-ideewerk .section.zone-section > h2 {
    margin-bottom: .4rem !important;
  }
  body.mode-ideewerk .section.zone-section > p:not(.fine-print) {
    margin-bottom: .85rem !important;
  }

  /* Before/After: Quadrat-Motive brauchen mehr Höhe */
  body.mode-ideewerk #warum-wir .before-after,
  body.mode-ideewerk #warum-wir .before-after-block {
    aspect-ratio: 4 / 3 !important;
    min-height: 260px !important;
    height: auto !important;
    width: 100% !important;
    margin-top: .85rem !important;
    margin-bottom: .35rem !important;
  }
  body.mode-ideewerk #warum-wir .checklist-block {
    padding-bottom: .25rem !important;
  }

  /* Chapter-Rail: auf Mobile nur im Hero sichtbar, sonst überdeckt sie Content */
  body.mode-ideewerk .chapter-rail.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate(-50%, 24px) !important;
  }

  /* Service-Karten kompakter */
  body.mode-ideewerk #leistungen .service-card-mini > img,
  body.mode-ideewerk #leistungen .glass-card > img:first-child {
    height: clamp(132px, 36vw, 168px) !important;
  }
  body.mode-ideewerk #leistungen .service-card-mini .checklist-mini {
    padding-bottom: .85rem !important;
  }
  body.mode-ideewerk #leistungen .cards-grid {
    gap: .7rem !important;
  }

  /* Checklist enger */
  body.mode-ideewerk #warum-wir .checklist-block,
  body.mode-ideewerk .checklist {
    gap: .35rem !important;
  }
  body.mode-ideewerk .checklist li {
    font-size: .84rem !important;
    line-height: 1.35 !important;
  }

  /* Landscape-Videos auf Portrait: Motiv zentriert halten */
  body.mode-ideewerk .scroll-video-wrap video.chapter-layer {
    object-fit: cover;
    object-position: 58% 42%;
    transform: translateZ(0);
  }
  body.mode-ideewerk .scroll-video-wrap {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  /* Lesbarkeit Text ohne Video totzudunkeln */
  body.mode-ideewerk .video-overlay[data-side="left"] {
    background: linear-gradient(
      90deg,
      rgba(10, 11, 14, .88) 0%,
      rgba(10, 11, 14, .55) 42%,
      rgba(10, 11, 14, .18) 68%,
      transparent 100%
    ) !important;
  }
  body.mode-ideewerk .video-vignette {
    opacity: .42 !important;
  }

  /* Preisplaner / Rechner — ~20% kompakter, Preis zuerst sichtbar */
  body.mode-ideewerk #preisplaner.calc-section {
    padding: 1.25rem 1rem 5.75rem !important;
    margin: 0 !important;
    width: 100%;
    max-width: none !important;
    text-align: left;
  }
  body.mode-ideewerk #preisplaner.calc-section > h2 {
    font-size: clamp(1.2rem, 5.2vw, 1.55rem);
    margin-bottom: .3rem;
    text-align: left;
  }
  body.mode-ideewerk #preisplaner.calc-section > p {
    font-size: .72rem;
    line-height: 1.4;
    margin-bottom: .7rem;
    max-width: none;
    text-align: left;
  }
  body.mode-ideewerk #preisplaner .calc-layout {
    display: flex !important;
    flex-direction: column;
    gap: .65rem !important;
    width: 100% !important;
    margin: 0;
  }
  /* Erst Einstellen, dann Ergebnis-Karte — Live-Preis klebt oben im Panel */
  body.mode-ideewerk #preisplaner .calc-blueprint {
    order: 2 !important;
    display: block !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background: rgba(10, 11, 14, .78) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .26) !important;
    overflow: hidden;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  body.mode-ideewerk #preisplaner .calc-panel {
    order: 1 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background: rgba(10, 11, 14, .78) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .26) !important;
    padding: .8rem .85rem .9rem !important;
    gap: .65rem !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    overflow: visible !important;
  }
  body.mode-ideewerk #preisplaner .calc-group {
    margin: 0 !important;
  }
  body.mode-ideewerk #preisplaner .calc-group label {
    margin-bottom: .28rem !important;
    font-size: .55rem !important;
    letter-spacing: .1em;
  }
  body.mode-ideewerk #preisplaner .calc-group select {
    padding: .55rem .7rem !important;
    border-radius: 9px !important;
    font-size: 16px !important; /* iOS Zoom-Prevention */
    min-height: 2.45rem;
  }
  body.mode-ideewerk #preisplaner .calc-area-row {
    gap: .55rem !important;
  }
  body.mode-ideewerk #preisplaner .calc-area-val {
    min-width: 3.5rem;
    font-size: .82rem !important;
  }
  body.mode-ideewerk #preisplaner .calc-group input[type="range"] {
    font-size: 16px;
  }
  body.mode-ideewerk #preisplaner .calc-visual {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: .65rem;
    padding: .7rem .85rem .55rem !important;
    min-height: 0 !important;
    background: radial-gradient(circle at 15% 20%, rgba(255, 107, 44, .14), transparent 55%);
  }
  body.mode-ideewerk #preisplaner .calc-visual__frame {
    min-width: 4.25rem;
  }
  body.mode-ideewerk #preisplaner .calc-visual__value {
    font-size: 1.75rem !important;
    line-height: .95;
  }
  body.mode-ideewerk #preisplaner .calc-visual__unit {
    font-size: .58rem !important;
  }
  body.mode-ideewerk #preisplaner .calc-visual__service {
    font-size: .74rem !important;
    text-align: left !important;
  }
  body.mode-ideewerk #preisplaner .calc-result {
    padding: .7rem .85rem .8rem !important;
    border-top: 1px solid rgba(255, 107, 44, .25);
  }
  body.mode-ideewerk #preisplaner .calc-result-label {
    font-size: .55rem !important;
  }
  body.mode-ideewerk #preisplaner .calc-result-price {
    font-size: 1.25rem !important;
    margin: .2rem 0 .28rem !important;
    line-height: 1.15;
  }
  body.mode-ideewerk #preisplaner .calc-result-detail {
    font-size: .72rem !important;
    margin: 0 0 .35rem !important;
  }
  body.mode-ideewerk #preisplaner .calc-result .fine-print {
    font-size: .62rem !important;
    line-height: 1.35 !important;
  }
  body.mode-ideewerk #preisplaner .calc-extras {
    grid-template-columns: 1fr !important;
    gap: .35rem !important;
  }
  body.mode-ideewerk #preisplaner .calc-extra {
    padding: .5rem .6rem !important;
    border-radius: 10px;
    min-height: 2.4rem;
    gap: .5rem !important;
  }
  body.mode-ideewerk #preisplaner .calc-extra strong {
    font-size: .74rem !important;
    line-height: 1.2 !important;
  }
  body.mode-ideewerk #preisplaner .calc-extra small {
    font-size: .62rem !important;
    line-height: 1.25 !important;
  }
  body.mode-ideewerk #preisplaner .calc-extra input[type="checkbox"] {
    width: .9rem !important;
    height: .9rem !important;
    min-width: .9rem !important;
    min-height: .9rem !important;
  }
  body.mode-ideewerk #preisplaner .calc-cta {
    width: 100%;
    justify-content: center;
    min-height: 2.45rem !important;
    padding: .65rem 1rem !important;
    margin-top: 0 !important;
    font-size: .88rem !important;
  }

  /*
    Live-Preis im Panel (position: sticky) — kein fixed Overlay mehr,
    das Checkboxen/Regler überdeckt.
  */
  body.mode-ideewerk #preisplaner .calc-mobile-sticky,
  body.mode-ideewerk .calc-mobile-sticky {
    display: block !important;
    position: sticky !important;
    top: calc(4.35rem + env(safe-area-inset-top, 0px)) !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    margin: -.15rem 0 .15rem !important;
    padding: .55rem .7rem !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 107, 44, .35) !important;
    background: rgba(10, 11, 14, .94) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28) !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none !important;
    z-index: 6 !important;
    text-align: left !important;
  }
  body.mode-ideewerk .calc-mobile-sticky.is-visible {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body.mode-ideewerk .calc-mobile-sticky span {
    display: block;
    font-size: .98rem !important;
    line-height: 1.15;
    font-weight: 650;
  }
  body.mode-ideewerk .calc-mobile-sticky small {
    display: block;
    margin-top: .15rem;
    font-size: .62rem !important;
    opacity: .7;
  }
}

/* Vorher/Nachher — Overflow-Slider (zuverlässig auf iOS/Mobile)
   Links = Vorher (Base), Rechts = Nachher (Fenster ab --ba-pos) */
body.mode-ideewerk .before-after {
  --ba-pos: 50%;
  position: relative;
  overflow: hidden;
  touch-action: none;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
body.mode-ideewerk .before-after .ba-img,
body.mode-ideewerk .before-after img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  display: block;
}
body.mode-ideewerk .before-after .ba-img--before {
  z-index: 0;
}
body.mode-ideewerk .before-after .ba-after,
body.mode-ideewerk .before-after [data-ba-after] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--ba-pos, 50%);
  width: auto;
  overflow: hidden;
  z-index: 1;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
body.mode-ideewerk .before-after .ba-img--after {
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--ba-pos, 50%));
  right: auto;
  width: var(--ba-width, 100%);
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}
body.mode-ideewerk .before-after .ba-handle {
  z-index: 4;
  pointer-events: none;
}
body.mode-ideewerk .before-after .ba-label {
  z-index: 3;
  pointer-events: none;
}

/* ============================================================
   Conversion CTAs — Hero Phone/WhatsApp + Sticky Bar
   Desktop + Mobile
   ============================================================ */
body.mode-ideewerk .hero-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
  width: 100%;
  max-width: 34rem;
  margin-top: 1.35rem;
}
body.mode-ideewerk .hero-cta__primary {
  width: auto;
  min-width: 12.5rem;
  justify-content: center;
  font-weight: 600;
  letter-spacing: .01em;
}
body.mode-ideewerk .hero-cta__direct {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  width: 100%;
}
body.mode-ideewerk .hero-cta__direct-label {
  margin: 0;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, .48);
}
body.mode-ideewerk .hero-cta__actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  width: 100%;
}
body.mode-ideewerk .hero-cta__divider {
  width: 1px;
  align-self: stretch;
  margin: .55rem 0;
  background: rgba(255, 255, 255, .14);
}
body.mode-ideewerk .hero-action {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  height: 2.55rem;
  min-height: 2.55rem;
  max-height: 2.55rem;
  padding: 0 .8rem 0 .45rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(10, 11, 14, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  line-height: 1.1;
}
body.mode-ideewerk .hero-action:hover {
  border-color: rgba(255, 107, 44, .45);
  background: rgba(10, 11, 14, .72);
}
body.mode-ideewerk .hero-action:active {
  transform: scale(.985);
}
body.mode-ideewerk .hero-action__icon {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 9px;
  flex-shrink: 0;
}
body.mode-ideewerk .hero-action__icon svg {
  width: .95rem;
  height: .95rem;
  display: block;
}
body.mode-ideewerk .hero-action__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .05rem;
  min-width: 0;
  line-height: 1.1;
}
body.mode-ideewerk .hero-action__label {
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, .58);
}
body.mode-ideewerk .hero-action__value {
  font-size: .82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: #f5f5f7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
body.mode-ideewerk .hero-action--call .hero-action__icon {
  background: rgba(255, 107, 44, .18);
  color: #ff8f5a;
}
body.mode-ideewerk .hero-action--call:hover {
  border-color: rgba(255, 107, 44, .55);
}
/* WhatsApp im Marken-Orange — Logo bleibt, Grün raus */
body.mode-ideewerk .hero-action--wa .hero-action__icon {
  background: rgba(255, 107, 44, .18);
  color: #ff8f5a;
}
body.mode-ideewerk .hero-action--wa:hover {
  border-color: rgba(255, 107, 44, .55);
}
body.mode-ideewerk .hero-action--wa .hero-action__value {
  color: #f5f5f7;
}

/* Sticky conversion bar */
body.mode-ideewerk .sticky-cta {
  display: none;
  gap: .55rem;
  padding: .65rem .85rem calc(.65rem + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 9, 12, .92);
  border-top: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 -10px 32px rgba(0, 0, 0, .35);
}
body.mode-ideewerk .sticky-cta__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 3rem;
  padding: .7rem .85rem;
  border-radius: 14px;
  font-size: .92rem;
  font-weight: 650;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, filter .15s ease;
}
body.mode-ideewerk .sticky-cta__btn svg {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}
body.mode-ideewerk .sticky-cta__btn:active {
  transform: scale(.97);
}
body.mode-ideewerk .sticky-cta__btn--call {
  color: #1a1208;
  background: linear-gradient(180deg, #ff8a4a 0%, #ff6b2c 100%);
  box-shadow: 0 6px 18px rgba(255, 107, 44, .32);
}
body.mode-ideewerk .sticky-cta__btn--wa {
  color: #1a1208;
  background: linear-gradient(180deg, #ff8a4a 0%, #ff6b2c 100%);
  box-shadow: 0 6px 18px rgba(255, 107, 44, .32);
}

@media (min-width: 901px) {
  /*
    Cinematic Progress-Strahl: bei absolut positionierten Slides
    lief die Spur mitten durch die Hero-CTAs. Aktiven Slide in den
    Flow legen + Strahl fest an den unteren Hero-Rand setzen.
  */
  body.mode-ideewerk .cinematic-hero-pin:not(.cinematic-hero--static) .cinematic-slide.is-active {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
  }
  body.mode-ideewerk .cinematic-hero-pin:not(.cinematic-hero--static) .cinematic-slides {
    min-height: 0 !important;
  }
  body.mode-ideewerk .cinematic-hero-pin:not(.cinematic-hero--static) .cinematic-hero-pin__inner {
    padding-bottom: 4.75rem !important;
  }
  body.mode-ideewerk .cinematic-hero-pin:not(.cinematic-hero--static) .cinematic-progress {
    position: absolute !important;
    left: clamp(1.5rem, 6vw, 5rem);
    right: auto;
    bottom: 1.85rem;
    margin: 0 !important;
    width: min(19.5rem, calc(100% - 2 * clamp(1.5rem, 6vw, 5rem)));
    z-index: 3;
  }
  body.mode-ideewerk .cinematic-hero-pin:not(.cinematic-hero--static) .hero-cta {
    position: relative;
    z-index: 2;
  }

  /*
    Desktop Hero CTAs — eine komponierte Säule:
    1) Primär-CTA (volle Cluster-Breite)
    2) darunter eine Kontakt-Kapsel (Telefon | WhatsApp)
  */
  body.mode-ideewerk .hero-cta {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: .9rem;
    width: 19.5rem;
    max-width: 19.5rem;
    margin-top: 1.55rem;
  }
  body.mode-ideewerk .hero-cta__primary {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    height: 3.05rem;
    min-height: 3.05rem;
    padding: .85rem 1.5rem;
    font-size: .96rem;
    border-radius: 980px;
    box-shadow: 0 12px 32px rgba(255, 107, 44, .3);
  }
  body.mode-ideewerk .hero-cta__direct {
    width: 100%;
    max-width: none;
    gap: .4rem;
  }
  body.mode-ideewerk .hero-cta__direct-label {
    font-size: .6rem;
    letter-spacing: .14em;
    color: rgba(245, 245, 247, .38);
    padding-left: .35rem;
  }
  /* Eine Kapsel — gleiche Breite wie Primär-CTA */
  body.mode-ideewerk .hero-cta__actions {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: none;
    padding: .22rem;
    gap: 0;
    border-radius: 980px;
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(8, 9, 12, .48);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .05),
      0 8px 24px rgba(0, 0, 0, .18);
  }
  body.mode-ideewerk .hero-cta__divider {
    width: 1px;
    height: 1.2rem;
    margin: 0;
    align-self: center;
    background: rgba(255, 255, 255, .18);
    flex: 0 0 1px;
  }
  body.mode-ideewerk .hero-action {
    flex: 1 1 0;
    width: auto;
    border: none;
    background: transparent;
    border-radius: 980px;
    height: 2.35rem !important;
    min-height: 2.35rem !important;
    max-height: 2.35rem !important;
    padding: 0 .7rem 0 .45rem;
    gap: .4rem;
    justify-content: center;
  }
  body.mode-ideewerk .hero-action:hover {
    background: rgba(255, 107, 44, .14);
    border-color: transparent;
  }
  body.mode-ideewerk .hero-action__icon {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    background: transparent !important;
  }
  body.mode-ideewerk .hero-action__icon svg {
    width: .85rem;
    height: .85rem;
  }
  body.mode-ideewerk .hero-action__label {
    display: none;
  }
  body.mode-ideewerk .hero-action__value {
    font-size: .8rem;
    font-weight: 550;
    letter-spacing: .005em;
  }
  body.mode-ideewerk .hero-action--call .hero-action__icon,
  body.mode-ideewerk .hero-action--wa .hero-action__icon {
    color: #ff8f5a;
  }
  body.mode-ideewerk .sticky-cta {
    display: none !important;
  }
}

@media (max-width: 900px), ((hover: none) and (pointer: coarse)) {
  body.mode-ideewerk .hero-cta {
    gap: .7rem;
    max-width: none;
    margin-top: 1.05rem !important;
  }
  body.mode-ideewerk .hero-cta__primary {
    width: 100%;
    max-width: none;
    min-height: 2.85rem;
    border-radius: 14px;
    font-size: .95rem;
    box-shadow: 0 8px 22px rgba(255, 107, 44, .28);
  }
  /* Mobile: Label + Divider dezent, zwei gleich breite Chips */
  body.mode-ideewerk .hero-cta__direct-label {
    display: none;
  }
  body.mode-ideewerk .hero-cta__divider {
    display: none;
  }
  body.mode-ideewerk .hero-cta__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    width: 100%;
  }
  body.mode-ideewerk .hero-action {
    width: 100%;
    height: 2.55rem !important;
    min-height: 2.55rem !important;
    max-height: 2.55rem !important;
    padding: 0 .55rem 0 .4rem;
    gap: .45rem;
    border-radius: 12px;
  }
  body.mode-ideewerk .hero-action__icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
  }
  body.mode-ideewerk .hero-action__icon svg {
    width: .88rem;
    height: .88rem;
  }
  body.mode-ideewerk .hero-action__label {
    font-size: .55rem;
  }
  body.mode-ideewerk .hero-action__value {
    font-size: .78rem;
  }
  body.mode-ideewerk .hero-action--wa .hero-action__value {
    font-size: .78rem;
  }

  /* Sticky immer als Flex-Bar (sichtbar via .is-visible) */
  body.mode-ideewerk .sticky-cta {
    display: flex !important;
    justify-content: stretch;
    align-items: stretch;
    z-index: 12;
  }
  body.mode-ideewerk .sticky-cta .btn {
    display: none !important;
  }
  /* Chapter-Rail auf Mobile aus — Sticky-Bar ist der Conversion-Fokus */
  body.mode-ideewerk .chapter-rail {
    display: none !important;
  }
  /* Mehr Platz am Seitenende für Sticky-Preis + Call-Bar */
  body.mode-ideewerk #preisplaner.calc-section {
    padding-bottom: 6.25rem !important;
  }
  body.mode-ideewerk #kontakt.section.zone-section,
  body.mode-ideewerk .site-footer {
    padding-bottom: calc(1.5rem + 4.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
   Vertrauen in Zahlen — Award-Level Count-Up + Glow
   ============================================================ */
body.mode-ideewerk .cinematic-slide--stats .stat-row {
  gap: .65rem;
  max-width: min(40rem, 100%);
  align-items: stretch;
}

body.mode-ideewerk .cinematic-slide--stats .stat-row li {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .65rem .45rem .55rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 143, 90, .22);
  background:
    linear-gradient(165deg, rgba(255, 107, 44, .1) 0%, rgba(255, 255, 255, .03) 42%, rgba(10, 11, 14, .35) 100%),
    rgba(12, 13, 16, .42);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 8px 22px rgba(0, 0, 0, .2);
  transition:
    border-color .45s ease,
    box-shadow .45s ease,
    transform .45s cubic-bezier(.22, 1, .36, 1);
}

body.mode-ideewerk .cinematic-slide--stats .stat-row li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 143, 90, .65) 50%, transparent 100%);
  opacity: .85;
  pointer-events: none;
  z-index: 1;
}

body.mode-ideewerk .cinematic-slide--stats .stat-row li::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -40%;
  width: 65%;
  height: 65%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 107, 44, .2) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: .65;
}

body.mode-ideewerk .cinematic-slide--stats .stat-row strong {
  position: relative;
  z-index: 1;
  font-size: clamp(1.35rem, 2.1vw, 1.6rem) !important;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1 !important;
  white-space: nowrap;
  color: #fff6ef;
  text-shadow:
    0 0 12px rgba(255, 107, 44, .4),
    0 0 28px rgba(255, 107, 44, .18),
    0 1px 2px rgba(0, 0, 0, .35);
  font-variant-numeric: tabular-nums;
}

body.mode-ideewerk .cinematic-slide--stats .stat-row strong.is-counting {
  color: #ffe8d8;
  text-shadow:
    0 0 16px rgba(255, 107, 44, .65),
    0 0 36px rgba(255, 107, 44, .3),
    0 1px 2px rgba(0, 0, 0, .35);
}

body.mode-ideewerk .cinematic-slide--stats .stat-row strong.is-counted {
  animation: stat-glow-settle 1.1s ease forwards;
}

body.mode-ideewerk .cinematic-slide--stats .stat-row .stat-row__kicker {
  position: relative;
  z-index: 1;
  margin-top: .12rem;
  margin-bottom: 0;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 143, 90, .92);
  line-height: 1.15;
}

body.mode-ideewerk .cinematic-slide--stats .stat-row span:not(.stat-row__kicker) {
  position: relative;
  z-index: 1;
  margin-top: .22rem;
  font-size: .68rem;
  letter-spacing: .03em;
  line-height: 1.25;
  text-transform: none;
  color: rgba(245, 245, 247, .68);
}

@media (min-width: 901px) {
  body.mode-ideewerk .cinematic-slide--stats .stat-row li:hover {
    border-color: rgba(255, 143, 90, .42);
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .1),
      0 12px 28px rgba(0, 0, 0, .26),
      0 0 24px rgba(255, 107, 44, .1);
  }
}

@keyframes stat-glow-settle {
  0% {
    text-shadow:
      0 0 22px rgba(255, 107, 44, .8),
      0 0 48px rgba(255, 107, 44, .4),
      0 1px 2px rgba(0, 0, 0, .35);
  }
  100% {
    text-shadow:
      0 0 14px rgba(255, 107, 44, .45),
      0 0 36px rgba(255, 107, 44, .22),
      0 1px 2px rgba(0, 0, 0, .35);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mode-ideewerk .cinematic-slide--stats .stat-row strong.is-counted {
    animation: none;
  }
  body.mode-ideewerk .cinematic-slide--stats .stat-row li {
    transition: none;
  }
}