/* ==========================================================================
   Karl Röfe GmbH & Co. KG — Baustein 1: Navigation, Hero, Kennzahlenleiste
   ========================================================================== */

:root {
  --color-hero-bg: #fdfdfd;
  --color-page-bg: #f7f7f7;
  --color-ink: #141414;
  --color-ink-soft: #535353;
  --color-ink-faint: #878787;
  --color-accent: #e30613;
  --color-accent-hover: #b8030d;
  --color-line: rgba(20, 20, 20, 0.12);
  --color-line-accent: rgba(227, 6, 19, 0.55);

  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-num: 'Barlow Condensed', 'Arial Narrow', var(--font-sans);

  --container-max: 1680px;
  --container-pad: clamp(24px, 4vw, 64px);

  --nav-height: clamp(72px, 6vw, 88px);

  --color-dark: #141414;
  --color-dark-soft: #1f1f1f;
  --color-on-dark: #f4f4f4;
  --color-on-dark-soft: rgba(244, 244, 244, 0.68);
  --color-on-dark-line: rgba(244, 244, 244, 0.18);

  --section-pad-y: clamp(64px, 9vw, 120px);

  /* Typografie-System (alle Seiten). Gleiche Ebene = gleiche Werte.
     Fließend skaliert, ohne Sprünge zwischen Breakpoints.
     Seitentitel (h1)          ~40 px Handy · ~72 px Tablet quer · ~92 px Desktop
     Abschnittsüberschrift     ~36 px Handy · ~50–60 px Tablet · ~77–80 px Desktop
     Kartentitel/Unterüberschr. ~24 px Handy · ~36 px Desktop
     Kleine Zeile (Eyebrow)    0.78rem, Versalien
     Beschreibungstext (Lead)  ~17–19 px
     Große Schlagwörter (Gussasphalt „Schnell.“), Schichtnamen und Zähler
     sind bewusst eigene Darstellungselemente und nutzen diese Werte nicht. */
  --fs-page-title: clamp(2.5rem, 1.3rem + 5vw, 5.75rem);
  --lh-page-title: 0.98;
  --fs-section-title: clamp(2.25rem, 1.2rem + 4vw, 5rem);
  --lh-section-title: 1.02;
  --ls-title: -0.025em;
  --fw-title: 800;
  --fs-card-title: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  --lh-card-title: 1.1;
  --fs-eyebrow: 0.78rem;
  --ls-eyebrow: 0.16em;
  --fs-lead: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  --lh-lead: 1.65;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------- */
/* Hero Stage — gemeinsamer Container für Nav, Hero-Bild und Kennzahlen  */
/* --------------------------------------------------------------------- */

.hero-stage {
  position: relative;
  width: 100%;
  background: var(--color-hero-bg);
}

/* Navigation ------------------------------------------------------------ */

/* Übergang breiter Header → schwebende Leiste: stufenlos am Scrollweg.
   js/main.js setzt --nav-p (0 = oben, 1 = schwebende Leiste) und --nav-q
   (Einblenden des Namens in der zweiten Hälfte). Alle Werte werden aus
   demselben Fortschritt berechnet – eine Bewegung, kein Umschalten.
   Die äußere Leiste behält immer ihre Höhe (--nav-height), damit der
   Seiteninhalt nicht rutscht; die Pille darf nach unten überstehen.
   Ohne JS bleibt --nav-p = 0 (breiter Header, fertig lesbar). */
.site-nav {
  --nav-p: 0;
  --nav-q: 0;
  --nav-pill-h: clamp(64px, 5.8vw, 84px);
  --nav-pill-w: min(100% - 2 * clamp(16px, 3vw, 40px), 1180px);
  --nav-gap-top: 14px;
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  height: var(--nav-height);
}

/* Fläche hinter dem breiten Header, blendet zur schwebenden Leiste aus */
.site-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-hero-bg);
  opacity: calc(1 - var(--nav-p));
  pointer-events: none;
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: calc(min(100%, var(--container-max)) * (1 - var(--nav-p)) + var(--nav-pill-w) * var(--nav-p));
  max-width: none;
  height: calc(var(--nav-height) * (1 - var(--nav-p)) + var(--nav-pill-h) * var(--nav-p));
  position: relative;
  top: calc(var(--nav-gap-top) * var(--nav-p));
  margin-inline: auto;
  padding-inline: calc(var(--container-pad) * (1 - var(--nav-p)) + clamp(14px, 2.4vw, 36px) * var(--nav-p));
  background: var(--color-hero-bg);
  border-radius: calc(var(--nav-pill-h) / 2 * var(--nav-p));
  box-shadow: 0 14px 34px rgba(20, 20, 20, calc(0.14 * var(--nav-p)));
}

.site-nav__logo {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.1vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink);
  transition: color 0.15s ease;
}

.site-nav__links a:hover {
  color: var(--color-accent);
}

/* Aktuelle Seite (auch „Startseite“ auf index.html) */
.site-nav__links a[aria-current] {
  color: var(--color-accent);
  box-shadow: inset 0 -1.5px 0 var(--color-accent);
  padding-bottom: 4px;
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}

/* Anrufen (seit 01.10. statt der Lupe): Symbol 20 px wie vorher, die
   Klickfläche ist 40 px groß, der negative Rand hält die Abstände gleich */
.site-nav__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -10px;
  border-radius: 50%;
  color: var(--color-ink);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.site-nav__phone svg {
  width: 20px;
  height: 20px;
}

.site-nav__phone:hover {
  color: var(--color-accent);
  background: rgba(227, 6, 19, 0.07);
}

.site-nav__phone:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Leistungen-Dropdown (ab 1101px; darunter übernimmt das mobile Panel).
   „Leistungen“ ist ein Schalter (Klick, Tastatur, js/main.js). Der Eintrag
   reicht über die volle Leistenhöhe, damit die Liste knapp unter der Leiste
   bzw. der schwebenden Pille beginnt. Sie liegt im Stacking-Kontext des
   Headers (z-index 50) und überlagert den Inhalt, ohne ihn zu verschieben.
   Ohne JS öffnet sie per :hover/:focus-within. */
.site-nav__links {
  align-self: stretch;
  align-items: stretch;
}

.site-nav__links > li {
  display: flex;
  align-items: center;
}

.site-nav__item--sub {
  position: relative;
}

.site-nav__sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.site-nav__sub-toggle:hover,
.site-nav__sub-toggle[aria-expanded="true"] {
  color: var(--color-accent);
}

.site-nav__sub-toggle:focus-visible,
.site-nav__links a:focus-visible,
.site-nav__sub a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 3px;
}

/* Aktiver Bereich (Leistungsseiten): wie der aktive Menüpunkt */
.site-nav__sub-toggle.is-current {
  color: var(--color-accent);
  box-shadow: inset 0 -1.5px 0 var(--color-accent);
  padding-bottom: 4px;
}

.site-nav__chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.site-nav__sub-toggle[aria-expanded="true"] .site-nav__chevron {
  transform: rotate(180deg);
}

.site-nav__sub {
  position: absolute;
  top: calc(100% + 10px);
  left: -18px;
  z-index: 2;
  min-width: 250px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--color-hero-bg);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(20, 20, 20, 0.22), 0 2px 6px rgba(20, 20, 20, 0.06);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

/* Brücke über die Lücke zur Leiste (Hover ohne JS klappt nicht zu) */
.site-nav__sub::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 12px;
}

.site-nav__item--sub.is-open .site-nav__sub,
.site-nav:not(.has-js) .site-nav__item--sub:hover .site-nav__sub,
.site-nav:not(.has-js) .site-nav__item--sub:focus-within .site-nav__sub {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

.site-nav__sub li:first-child {
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-line);
}

/* Leistungen (seit 11.10.2026 ohne „Alle Leistungen“, Notiz #20): keine Trennlinie,
   alle vier Leistungsseiten stehen gleichrangig */
#navLeistungen li:first-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.site-nav__links .site-nav__sub a {
  display: block;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--color-ink);
  border-radius: 8px;
  box-shadow: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.site-nav__links .site-nav__sub a:hover,
.site-nav__links .site-nav__sub a:focus-visible {
  color: var(--color-accent);
  background: rgba(227, 6, 19, 0.06);
}

.site-nav__links .site-nav__sub a[aria-current] {
  color: var(--color-accent);
  font-weight: 600;
  background: rgba(227, 6, 19, 0.08);
  box-shadow: inset 2px 0 0 var(--color-accent);
  padding-bottom: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__sub,
  .site-nav__item--sub.is-open .site-nav__sub,
  .site-nav__chevron {
    transition: none;
    transform: none;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.btn--primary {
  background: var(--color-accent);
  color: #fff;
  padding: 12px 20px;
}

.btn--large {
  padding: 16px 28px;
  font-size: 1rem;
  gap: 10px;
}

.btn--large svg {
  width: 16px;
  height: 16px;
}

.btn--primary:hover {
  background: var(--color-accent-hover);
}

.btn--secondary {
  background: transparent;
  color: var(--color-accent);
  padding: 12px 20px;
  border: 1.5px solid var(--color-accent);
}

.btn--secondary:hover {
  background: var(--color-accent);
  color: #fff;
}

.btn--text {
  background: none;
  color: var(--color-accent);
  padding: 0;
  font-weight: 600;
  border-bottom: 1px solid var(--color-line-accent);
  padding-bottom: 2px;
  border-radius: 0;
}

.btn--text:hover {
  color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Hero Photo Frame -------------------------------------------------------- */

.hero-photo-frame {
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  /* roefe-hero-asphalt-transparent.png hat einen echten Alphakanal und läuft
     links/oben in Transparenz aus; darunter wird jetzt der echte
     CSS-Hintergrund sichtbar statt der ehemals eingebrannten hellen
     Bildfläche von hero-gussasphalt.png. */
  background-color: var(--color-hero-bg);
}

.hero-photo {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}

@media (min-width: 641px) {
  .hero-photo-frame {
    min-height: calc(100svh - var(--nav-height));
  }

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

.hero-photo-frame__inner {
  position: absolute;
  inset: 0;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  line-height: normal;
  pointer-events: none;
}

.hero-content {
  position: absolute;
  left: var(--container-pad);
  top: 12%;
  width: min(540px, 40%);
  pointer-events: auto;
}

.hero-eyebrow {
  margin: 0 0 18px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.hero-title {
  margin: 0 0 20px;
  font-family: var(--font-sans);
  font-weight: var(--fw-title);
  letter-spacing: var(--ls-title);
  line-height: var(--lh-page-title);
  font-size: var(--fs-page-title);
  color: var(--color-ink);
}

.hero-description {
  margin: 0 0 28px;
  max-width: 34ch;
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  line-height: 1.55;
  color: var(--color-ink-soft);
  font-weight: 400;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 32px);
  flex-wrap: wrap;
}

/* Tagline (auf dem Bild, oben rechts) ------------------------------------- */

.hero-tagline-block {
  position: absolute;
  top: 16%;
  right: var(--container-pad);
  display: flex;
  align-items: stretch;
  gap: 12px;
  pointer-events: none;
}

.hero-tagline-line {
  width: 1px;
  background: var(--color-ink);
  opacity: 0.4;
}

.hero-tagline {
  margin: 0;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.6;
  color: var(--color-ink);
  text-transform: uppercase;
  text-shadow:
    0 0 6px var(--color-hero-bg),
    0 0 12px var(--color-hero-bg),
    0 0 20px var(--color-hero-bg);
}

.hero-tagline-line {
  box-shadow: 0 0 8px 2px var(--color-hero-bg);
}

/* Decorative Year --------------------------------------------------------- */

.decorative-year {
  position: absolute;
  right: calc(var(--container-pad) + 57px - (clamp(5rem, 10vw, 12rem) / 2));
  bottom: 3%;
  margin: 0;
  font-size: clamp(5rem, 10vw, 12rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-ink);
  opacity: 0.14;
  letter-spacing: 0.01em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform: rotate(180deg);
  pointer-events: none;
  user-select: none;
}

/* Kennzahlenleiste (Trust-Band, Variante 3) ------------------------------- */
/* Weißes, offenes Band über die volle Breite, Inhalte im normalen Container.
   Ab 1101px drei gleiche Spalten mit feinen senkrechten Linien; je Spalte
   zentriert: oben Icon bzw. die große rote „24 Stunden“ (gleich hohe
   Bildzeile, damit die Aussagen auf einer Linie beginnen), darunter
   Aussage und Erklärung. Bis 1100px untereinander, ebenfalls zentriert,
   mit waagerechten Linien. Keine festen Höhen, Umbrüche dürfen wachsen. */

.hero-stats {
  position: relative;
  background: var(--color-hero-bg);
}

.hero-stats__row {
  --zahl: clamp(6.5rem, 1.6rem + 6.4vw, 9rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: clamp(36px, 3.4vw, 52px) 0;
  list-style: none;
  line-height: normal;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding-inline: clamp(20px, 2.4vw, 48px);
  text-align: center;
  border-left: 1px solid var(--color-line);
}

.hero-stats__row .hero-stat:first-child {
  border-left: none;
}

.hero-stat__visual {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: calc(var(--zahl) * 0.74);
  margin: 0 0 clamp(16px, 1.5vw, 22px);
}

.hero-stat__icon {
  flex: none;
  width: clamp(64px, 5.4vw, 84px);
  height: clamp(64px, 5.4vw, 84px);
  color: var(--color-ink);
}

.hero-stat__icon * {
  stroke-width: 1.75px;
  vector-effect: non-scaling-stroke;
}

.hero-stat__zahl {
  align-items: baseline;
  color: var(--color-accent);
  white-space: nowrap;
}

.hero-stat__num {
  font-size: var(--zahl);
  font-weight: 800;
  line-height: 0.74;
  letter-spacing: -0.05em;
}

.hero-stat__unit {
  margin-left: 0.18em;
  font-size: calc(var(--zahl) * 0.27);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.hero-stat__value {
  margin: 0 0 6px;
  font-size: clamp(1.625rem, 0.9rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--color-ink);
}

.hero-stat__label {
  max-width: 30ch;
  margin: 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.2vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.45;
  text-wrap: balance;
  color: var(--color-ink-soft);
}

@media (max-width: 1100px) {
  .hero-stats__row {
    --zahl: clamp(4.5rem, 3.6rem + 3vw, 5.5rem);
    grid-template-columns: 1fr;
    padding: 0;
  }

  .hero-stat {
    padding: 22px 0;
    border-left: none;
    border-top: 1px solid var(--color-line);
  }

  .hero-stats__row .hero-stat:first-child {
    border-top: none;
  }

  .hero-stat__visual {
    height: auto;
    margin: 0 0 10px;
  }

  .hero-stat__icon {
    width: 40px;
    height: 40px;
  }

  .hero-stat__unit {
    font-size: calc(var(--zahl) * 0.32);
  }

  .hero-stat__value {
    margin-bottom: 4px;
    font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);
    line-height: 1.2;
  }

  .hero-stat__label {
    font-size: 0.9375rem;
  }
}

/* --------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .hero-content {
    width: min(420px, 46%);
  }
}

/* ==========================================================================
   Baustein 2 — Startseite unterhalb des Heros
   ========================================================================== */

.eyebrow {
  margin: 0 0 18px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.eyebrow--on-dark {
  color: var(--color-on-dark-soft);
}

.section-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-title);
  letter-spacing: var(--ls-title);
  line-height: var(--lh-section-title);
  font-size: var(--fs-section-title);
  color: var(--color-ink);
}

.section-title--on-dark {
  color: var(--color-on-dark);
}

.editorial-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-size: clamp(2.1rem, 3.8vw, 3.6rem);
  color: var(--color-ink);
}

.editorial-title--on-dark {
  color: var(--color-on-dark);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-line-accent);
  padding-bottom: 3px;
  transition: color 0.15s ease, gap 0.15s ease, border-color 0.15s ease;
}

.link-arrow svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.link-arrow:hover {
  color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.link-arrow:hover svg {
  transform: translateX(3px);
}

.link-arrow--on-dark {
  color: var(--color-on-dark);
  border-color: var(--color-on-dark-line);
}

.link-arrow--on-dark:hover {
  color: var(--color-on-dark);
  border-color: var(--color-on-dark);
}

.link-arrow--upper {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

img[loading='lazy'] {
  background: var(--color-page-bg);
}

/* --------------------------------------------------------------------- */
/* 0. Vertrauens-Einstieg — Sicherheit vor Leistungen                    */
/* --------------------------------------------------------------------- */

.trust-intro {
  position: relative;
  width: 100%;
  background: var(--color-hero-bg);
}

.trust-intro__content {
  text-align: center;
  padding: clamp(56px, 6vw, 88px) var(--container-pad) 0;
}

.trust-intro__content .eyebrow {
  color: var(--color-accent);
}

.trust-intro__content .section-title {
  margin-inline: auto;
  max-width: 22ch;
}

.trust-intro__lead {
  margin: clamp(22px, 2.6vw, 32px) auto 0;
  max-width: min(90%, 780px);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-ink-soft);
}

.trust-intro__more {
  margin-top: clamp(20px, 2.4vw, 28px);
}

/* Vertrauenskarten (Zertifikate) ------------------------------------------ */

.trust-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  width: min(1080px, calc(100% - 64px));
  margin: clamp(42px, 5vw, 64px) auto 0;
  text-align: left;
}

.trust-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(22px, 2.5vw, 34px);
  min-height: 150px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--color-page-bg);
  border: 1px solid var(--color-line);
  border-radius: 18px;
}

.trust-card__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.trust-card__logos img {
  display: block;
  width: clamp(72px, 6vw, 92px);
  height: clamp(72px, 6vw, 92px);
  object-fit: contain;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.trust-card__logos--double img {
  width: clamp(58px, 5vw, 78px);
  height: clamp(58px, 5vw, 78px);
}

.trust-card h3 {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.2;
}

.trust-card p {
  margin: 8px 0 0;
  color: var(--color-ink-soft);
  font-size: 0.98rem;
  line-height: 1.5;
}

/* Asphaltfläche mit den vier Eigenschaften --------------------------------- */

.trust-intro__surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(48px, 6vw, 72px);
  background-color: var(--color-hero-bg);
}

/* Gussasphalt-Fläche (gemeinsame Komponente, seit 12.10.2026) ---------------
   Referenz ist das Band 01–04. Alle dekorativen Asphaltflächen der Website
   (Band 01–04, Referenzen-Welle, FAQ, Kopf des Anfrage-Fensters, Laufband und
   Wort-Kacheln der Unterseiten) tragen die Klasse .asphalt und sehen dadurch
   gleich aus: derselbe Grundton, dieselbe Körnung, dasselbe ruhige Licht.
   Die Körnung rechnet js/asphalt.js einmal als nahtlose Kachel (SVG-Filter,
   im Browser gespeichert) und setzt sie als --asphalt-korn; hier liegt sie
   gekachelt im Hintergrund, in CSS-Pixeln, nie gestreckt. Beim Scrollen wird
   nichts gerechnet. Hier außerdem: Grundton, Licht und Tiefe.
   Das Element muss positioniert sein (relative oder absolute); die Form
   (Welle, Maske) bestimmt jede Stelle selbst. Statisch, ohne Animation.
   Ohne JS bleibt der Grundton mit den Verläufen stehen. */
:root {
  --asphalt-grund: #151617;
  --asphalt-licht:
    radial-gradient(120% 90% at 22% 18%, rgba(255, 255, 255, 0.035), transparent 60%),
    radial-gradient(140% 120% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.32) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, var(--asphalt-tiefe));
  /* Tiefe am unteren Rand des Bands 01–04 (Endwert des letzten Verlaufs in
     --asphalt-licht). Hohe Flächen, die direkt ans Band anschließen (Szene
     ohne 3D), nutzen sie gleichmäßig statt der elementweiten Verläufe, damit
     an der Naht kein Helligkeitssprung entsteht (seit 12.10.2026). */
  --asphalt-tiefe: rgba(0, 0, 0, 0.22);
  /* Schrift auf Asphalt (wie 01–04): weiß, fett, ohne Schatten; große
     Zahlen und Zierwörter halbtransparent */
  --asphalt-text: var(--color-on-dark);
  --asphalt-text-leise: rgba(255, 255, 255, 0.28);
}

.asphalt {
  isolation: isolate;
  overflow: hidden;
  background-color: var(--asphalt-grund);
  background-image: var(--asphalt-korn, none);
  background-size: 640px 640px;   /* = KACHEL in js/asphalt.js, nie gestreckt */
  background-repeat: repeat;
  background-position: 0 0;
}

/* Licht und Tiefe: oben links etwas heller, zu den Rändern und nach unten
   dunkler */
.asphalt::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--asphalt-licht);
  pointer-events: none;
}

/* Band 01–04: Die Wellenkante folgt der bisherigen Maske (eigenschaften-maske.png,
   gemessen), jetzt als clip-path: Desktop wie „100% 220%, unten“, bis 900px
   unverzerrt oben mit vw-Höhen. Statisch, ohne Animation. */
.trust-intro__material {
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(0% 0.00%, 2.5% 0.00%, 5% 0.00%, 7.5% 0.00%, 10% 0.00%, 12.5% 0.00%, 15% 0.00%, 17.5% 0.00%, 20% 0.00%, 22.5% 0.00%, 25% 0.00%, 27.5% 0.00%, 30% 0.00%, 32.5% 0.00%, 35% 0.26%, 37.5% 1.79%, 40% 2.88%, 42.5% 4.19%, 45% 5.50%, 47.5% 6.81%, 50% 7.90%, 52.5% 8.77%, 55% 9.86%, 57.5% 10.52%, 60% 10.95%, 62.5% 11.61%, 65% 11.83%, 67.5% 11.83%, 70% 11.83%, 72.5% 11.83%, 75% 11.17%, 77.5% 10.73%, 80% 10.08%, 82.5% 9.21%, 85% 8.33%, 87.5% 7.24%, 90% 5.71%, 92.5% 4.40%, 95% 2.66%, 97.5% 1.13%, 100% 0.00%, 100% 100%, 0% 100%);
  pointer-events: none;
  will-change: transform;
}

@media (max-width: 900px) {
  .trust-intro__material {
    clip-path: polygon(0% 20.94vw, 2.5% 21.00vw, 5% 21.20vw, 7.5% 21.45vw, 10% 21.71vw, 12.5% 21.96vw, 15% 22.35vw, 17.5% 22.73vw, 20% 23.05vw, 22.5% 23.44vw, 25% 23.82vw, 27.5% 24.21vw, 30% 24.59vw, 32.5% 24.98vw, 35% 25.30vw, 37.5% 25.74vw, 40% 26.06vw, 42.5% 26.45vw, 45% 26.83vw, 47.5% 27.22vw, 50% 27.54vw, 52.5% 27.79vw, 55% 28.11vw, 57.5% 28.31vw, 60% 28.43vw, 62.5% 28.63vw, 65% 28.69vw, 67.5% 28.69vw, 70% 28.69vw, 72.5% 28.69vw, 75% 28.50vw, 77.5% 28.37vw, 80% 28.18vw, 82.5% 27.92vw, 85% 27.67vw, 87.5% 27.35vw, 90% 26.90vw, 92.5% 26.51vw, 95% 26.00vw, 97.5% 25.55vw, 100% 25.17vw, 100% 100%, 0% 100%);
  }
}

.trust-intro__qualities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: clamp(96px, calc(11vw + 6px), 156px) var(--container-pad) clamp(40px, 6vw, 64px);
}

.trust-quality {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: clamp(20px, 2.2vw, 32px);
  border-left: 1px solid var(--color-accent);
}

.trust-intro__qualities .trust-quality:first-child {
  border-left: none;
}

.trust-quality__number {
  display: block;
  margin-bottom: -0.12em;
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 0.78;
  font-size: clamp(5rem, 9vw, 10.5rem);
  color: var(--asphalt-text-leise);
}

.trust-quality__label {
  display: block;
  position: relative;
  margin-top: clamp(8px, 1vw, 14px);
  padding-bottom: clamp(12px, 1.4vw, 18px);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.8vw, 2.1rem);
  color: var(--color-on-dark);
  white-space: nowrap;
}

.trust-quality__label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 32px;
  height: 3px;
  transform: translateX(-50%);
  background: var(--color-accent);
}

/* --------------------------------------------------------------------- */
/* 2. Leistungsbereiche — Raster                                         */
/* --------------------------------------------------------------------- */

.leistungen-grid {
  background: transparent;
  padding-bottom: var(--section-pad-y);
}

.leistungen-grid__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.leistung-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--color-line);
  padding: 10px clamp(20px, 2.2vw, 36px) clamp(32px, 3vw, 44px);
}

.leistungen-grid__row .leistung-card:first-child {
  border-left: none;
}

.leistung-card__figure {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  margin-bottom: 28px;
  background: var(--color-hero-bg);
}

.leistung-card__figure--warm {
  background: var(--color-hero-bg);
}

.leistung-card__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.leistung-card:hover .leistung-card__figure img {
  transform: scale(1.045);
}

.leistung-card__meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.leistung-card__index {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

.leistung-card__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.leistung-card__title {
  margin: 0 0 20px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.6vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.leistung-card .link-arrow {
  margin-top: auto;
}

.leistung-card__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-accent);
  padding: 6px 12px;
  border-radius: 999px;
  pointer-events: none;
}

/* --------------------------------------------------------------------- */
/* Play-Button (allgemein) — genutzt vom "Seit 1895"-Video                */
/* --------------------------------------------------------------------- */

.play-button {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-on-dark);
  font-size: 0.95rem;
  font-weight: 600;
}

.play-button__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--color-on-dark-line);
  transition: background-color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.play-button__circle svg {
  width: 18px;
  height: 18px;
  margin-left: 3px;
}

.play-button:hover .play-button__circle,
.play-button:focus-visible .play-button__circle {
  background: var(--color-on-dark);
  color: var(--color-dark);
  transform: scale(1.06);
}

/* --------------------------------------------------------------------- */
/* Animations-Platzhalter (vollflächig, später Scroll-/Videoanimation)   */
/* --------------------------------------------------------------------- */

.animation-placeholder {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
}

.animation-placeholder__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.animation-placeholder__note {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.45);
  color: var(--color-on-dark);
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .animation-placeholder {
    min-height: 70svh;
  }

  .animation-placeholder__note {
    font-size: 0.75rem;
    padding: 10px 20px;
    white-space: normal;
    text-align: center;
    max-width: 80%;
  }
}

/* --------------------------------------------------------------------- */
/* Vertrauensband (kompakt)                                               */
/* --------------------------------------------------------------------- */

.trust-band {
  background: var(--color-page-bg);
  border-bottom: 1px solid var(--color-line);
}

.trust-band__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-block: clamp(22px, 2.6vw, 30px);
}

.trust-band__kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  white-space: nowrap;
}

.trust-band__divider {
  width: 1px;
  height: 16px;
  background: var(--color-line-accent);
  flex-shrink: 0;
}

.trust-band__text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

.trust-band__text strong {
  color: var(--color-ink);
  font-weight: 700;
}

/* --------------------------------------------------------------------- */
/* Auswahl-Section — Nächster Schritt                                     */
/* --------------------------------------------------------------------- */

.next-step {
  position: relative;
  overflow-x: clip;
  background: var(--color-hero-bg);
  border-top: 1px solid var(--color-line);
  padding-block: var(--section-pad-y);
}

.next-step__intro {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(48px, 6vw, 80px);
  text-align: center;
}

.next-step__intro .eyebrow {
  color: var(--color-accent);
}

.next-step__intro .section-title {
  margin-bottom: clamp(16px, 2vw, 22px);
}

.next-step__lead {
  margin: 0 auto;
  max-width: 56ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-ink-soft);
}

.next-step__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.next-step-card {
  position: relative;
  isolation: isolate;
  padding: 0 clamp(28px, 4vw, 64px);
  border-left: 1px solid var(--color-line);
}

.next-step__grid .next-step-card:first-child {
  border-left: none;
}

.next-step-card__number {
  position: absolute;
  top: 50%;
  z-index: 0;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 0.75;
  font-size: clamp(18rem, 28vw, 34rem);
  color: var(--color-ink);
  opacity: 0.065;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.next-step-card--primary .next-step-card__number {
  left: clamp(-56px, -3.5vw, -16px);
}

.next-step-card--secondary .next-step-card__number {
  right: clamp(-56px, -3.5vw, -16px);
}

.next-step-card__body {
  position: relative;
  z-index: 1;
}

.next-step-card__kicker {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.next-step-card--primary .next-step-card__kicker {
  color: var(--color-accent);
}

.next-step-card__title {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: var(--lh-card-title);
  font-size: var(--fs-card-title);
  color: var(--color-ink);
}

.next-step-card__text {
  margin: 0 0 clamp(28px, 3.2vw, 40px);
  max-width: 42ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.next-step-card__cta {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}

.next-step-card__line {
  flex: 1 1 auto;
  height: 1px;
  min-width: 24px;
  background: var(--color-line-accent);
  transition: flex-grow 0.25s ease;
}

.next-step-card--secondary .next-step-card__line {
  background: var(--color-line);
}

.next-step-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 14px 26px;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.next-step-card__btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.next-step-card__btn--primary {
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
}

.next-step-card__btn--secondary {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
}

.next-step-card__cta:hover .next-step-card__line {
  flex-grow: 1.6;
}

.next-step-card__cta:hover .next-step-card__btn--primary {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.next-step-card__cta:hover .next-step-card__btn--secondary {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.next-step-card__cta:hover .next-step-card__btn svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------- */
/* 4. Projekte — Ausgewählte Referenzen                                   */
/* --------------------------------------------------------------------- */

.showcase {
  position: relative;
  background: var(--color-hero-bg);
  /* Ziel des neuen "Referenzen ansehen"-Links im Abschluss-CTA: verhindert,
     dass die sticky Navigation die Oberkante der Section verdeckt. */
  scroll-margin-top: var(--nav-height);
}

.showcase__pin {
  position: relative;
}

.showcase.is-pinned .showcase__pin {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* Asphaltzone: echte Ebenentrennung. .showcase__asphalt selbst zeigt den
   normalen Website-Hintergrund (--color-hero-bg, identisch zu den
   angrenzenden Sections .next-step und .process-section). Die PNG-Grafik
   (roefe-referenzen-asphalt-bogen-transparent.png) liegt nur als
   dekorative, absolut positionierte Ebene darüber und läuft unterhalb der
   Wellenkante in echte Transparenz aus – darunter wird also der reale
   CSS-Hintergrund sichtbar, kein Bildinhalt. Höhe der Zone ergibt sich aus
   dem Inhalt (Eyebrow + Headline); siehe Breakpoint-Regeln weiter unten
   für den kontrollierten Zoom, der auf kleineren Breiten dafür sorgt, dass
   die Headline immer auf der opaken Asphaltfläche steht.
   Seit 12.10.2026 ist die Fläche dieselbe Gussasphalt-Komponente wie Band
   01–04 (.asphalt, js/asphalt.js); die PNG/WebP dient nur noch als Maske
   für die Wellenform (Alphakanal), ihr Bildinhalt ist nicht mehr zu sehen.
   Breite setzt js/start.js (Zoom, damit die Welle unter dem Text bleibt),
   die Höhe folgt dem Seitenverhältnis der Maske. */
.showcase__asphalt {
  --showcase-surface-image: url('../assets/images/teer/referenzen-bogen.webp');
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-hero-bg);
  flex: 0 0 auto;
}

.showcase__asphalt-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.showcase__asphalt-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1983 / 793;
  -webkit-mask: var(--showcase-surface-image) top left / 100% 100% no-repeat;
  mask: var(--showcase-surface-image) top left / 100% 100% no-repeat;
  pointer-events: none;
}

.showcase__asphalt-inner {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--nav-height) + clamp(20px, 3vw, 40px));
  padding-bottom: clamp(32px, 5vw, 56px);
}

.showcase__asphalt-inner .eyebrow {
  color: var(--color-on-dark-soft);
}

/* Satzzeichen am Ende einer Überschrift haben immer deren Farbe. */
.showcase__dot {
  color: inherit;
}

.showcase__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-hero-bg);
}

.showcase__track-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-top: clamp(28px, 4vw, 56px);
}

.showcase__track-viewport::-webkit-scrollbar {
  display: none;
}

.showcase.is-pinned .showcase__track-viewport {
  overflow: hidden;
  scroll-snap-type: none;
}

.showcase__track {
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 3.2vw, 44px);
  list-style: none;
  margin: 0;
  padding: 0;
  /* Bewusst kein padding-inline-end und kein margin auf der letzten Karte:
     Flexbox in Chromium/Firefox zählt nachlaufendes Padding UND Margin auf
     dem letzten Flex-Item nicht zuverlässig zur scrollbaren Breite dazu,
     wodurch die letzte Karte den Abschlussabstand nie erreicht hätte. Der
     Abschlussabstand kommt deshalb als eigenes, unsichtbares Flex-Element
     (.showcase__track-end-spacer) – ein echtes Flex-Kind wird garantiert
     mitgezählt. */
  padding-inline-start: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  will-change: transform;
}

.showcase.is-pinned .showcase__track {
  height: 100%;
}

.showcase__track-end-spacer {
  flex: 0 0 auto;
  width: 0.1px;
  margin-inline-start: max(0px, calc(var(--container-pad) - clamp(20px, 3.2vw, 44px)));
  list-style: none;
}

.showcase-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(560px, 85vw, 1180px);
  scroll-snap-align: start;
}

.showcase.is-pinned .showcase-card {
  height: 100%;
}

.showcase-card__inner {
  display: grid;
  grid-template-columns: 66% 34%;
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  overflow: hidden;
}

.showcase.is-pinned .showcase-card__inner {
  aspect-ratio: auto;
  height: 100%;
}

.showcase-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: repeating-linear-gradient(135deg, rgba(20, 20, 20, 0.05) 0 2px, transparent 2px 14px), var(--color-page-bg);
  border: 1px solid var(--color-line);
  border-right: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.showcase-card__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(28px, 3vw, 44px);
  background: var(--color-dark);
  color: var(--color-on-dark);
}

.showcase-card__number-row {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.showcase-card__number {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.showcase-card__number-dash {
  width: 20px;
  height: 2px;
  background: rgba(244, 244, 244, 0.5);
  flex-shrink: 0;
}

.showcase-card__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--lh-card-title);
  font-size: var(--fs-card-title);
  color: var(--color-on-dark);
}

.showcase-card__location {
  margin: 0;
  font-size: 1rem;
  /* Wärmeres, fast deckendes Weiß statt des gedämpften --color-on-dark-soft
     (nur 68% Deckkraft) — auf der Kartenfläche war das zu kontrastarm. Bewusst
     lokal auf die Showcase-Karte begrenzt, kein reines Weiß wie der Titel,
     damit die Hierarchie Titel/Ort erhalten bleibt. */
  color: rgba(244, 244, 244, 0.88);
}

.showcase-card__facts {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-on-dark);
}

.showcase-card__facts li {
  position: relative;
  padding-left: 14px;
}

.showcase-card__facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 1px;
  /* Etwas kräftiger als --color-on-dark-line (nur 18%), damit die
     Aufzählungspunkte auf der dunklen Kartenfläche nicht untergehen. */
  background: rgba(244, 244, 244, 0.45);
}

.showcase-card__link {
  margin-top: 8px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-on-dark);
  border-bottom: 1px solid var(--color-on-dark-line);
  padding-bottom: 3px;
  transition: gap 0.15s ease, border-color 0.15s ease;
}

.showcase-card__link svg {
  width: 14px;
  height: 14px;
}

.showcase-card__link:hover {
  gap: 12px;
  border-color: var(--color-on-dark);
}

.showcase__progress {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  max-width: var(--container-max);
  width: 100%;
  margin-inline: auto;
  padding: clamp(16px, 2.4vw, 28px) var(--container-pad) clamp(20px, 3vw, 32px);
}

.showcase__progress-count {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.showcase__progress-track {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  border-radius: 2px;
  background: var(--color-line);
}

.showcase__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 2px;
  background: var(--color-accent);
}

.showcase__progress-dot {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
  transform: translate(-50%, -50%);
}

/* „Weiter scrollen“: echter Knopf (seit 12.10.2026), Klick lässt die
   Strecke bis zur letzten Referenz laufen (js/main.js). Dezent wie zuvor,
   Text und Pfeil sind eine gemeinsame Klickfläche (mind. 44 px hoch). */
.showcase__progress-next {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: -5px -10px -5px 0;
  padding: 5px 10px 5px 5px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}

.showcase__progress-next:hover,
.showcase__progress-next.is-running {
  color: var(--color-ink);
}

.showcase__progress-next:hover .showcase__progress-arrow,
.showcase__progress-next.is-running .showcase__progress-arrow {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.showcase__progress-next:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.showcase__progress-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.showcase__progress-arrow svg {
  width: 14px;
  height: 14px;
}

/* --------------------------------------------------------------------- */
/* Ablauf in fünf Schritten — Phase 1: statisches Grundgerüst            */
/* --------------------------------------------------------------------- */

.process-section {
  background: var(--color-hero-bg);
  padding-top: clamp(80px, 8vw, 120px);
  padding-bottom: clamp(24px, 2.4vw, 40px);
}

.process-section__eyebrow {
  margin: 0 0 18px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

.process-section__heading {
  margin: 0 0 22px;
  font-family: var(--font-sans);
  font-weight: var(--fw-title);
  letter-spacing: var(--ls-title);
  line-height: var(--lh-section-title);
  font-size: var(--fs-section-title);
  color: var(--color-ink);
  max-width: 20ch;
}

/* Satzzeichen am Ende einer Überschrift haben immer deren Farbe. */
.process-section__dot {
  color: inherit;
}

.process-section__lead {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-ink-soft);
  max-width: 48ch;
}

.process-section__intro-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin: 0 0 clamp(48px, 6vw, 88px);
}

.process-section__grid {
  display: grid;
  grid-template-columns: 1fr 1.65fr 1fr 1fr 1fr;
  gap: clamp(20px, 2.6vw, 36px);
  align-items: start;
  transition: grid-template-columns 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  /* Feste Bühnenhöhe, damit CTA/Historie beim Schrittwechsel nicht springen:
     Breite des offenen Rundbogens (--process-arch-w) * 4/3 (aspect-ratio 3/4)
     + dessen unterer Abstand (20px) + tatsächlich gemessener Platz für
     Nummer/Titel/Text (--process-copy-h, per Playwright an allen 5 Schritten
     gemessen: 101.6px, identisch bei 1920px und 1440px) + 50px Sicherheits-
     abstand nach unten. Nur auf Desktop aktiv, siehe Media Queries. */
  --process-arch-w: clamp(240px, 20vw, 390px);
  --process-copy-h: 102px;
  --process-bottom-air: 50px;
  min-block-size: calc(var(--process-arch-w) * 4 / 3 + 20px + var(--process-copy-h) + var(--process-bottom-air));
}

.process-section__grid--active-1 {
  grid-template-columns: 1.65fr 1fr 1fr 1fr 1fr;
}

.process-section__grid--active-3 {
  grid-template-columns: 1fr 1fr 1.65fr 1fr 1fr;
}

.process-section__grid--active-4 {
  grid-template-columns: 1fr 1fr 1fr 1.65fr 1fr;
}

.process-section__grid--active-5 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1.65fr;
}

.process-step {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
}

.process-step:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
  border-radius: 4px;
}

/* Ziffer und Rundbogen liegen in derselben Grid-Zelle übereinander (statt
   nacheinander im Fluss). Dadurch ist die Höhe der Bühne immer das MAXIMUM
   der beiden Elemente, nie ihre SUMME. Vorher stand beim Schließen eines
   Schritts die Ziffer sofort wieder da (display:none kann nicht animiert
   werden), während der Rundbogen noch 0,55s am Schrumpfen war — für diesen
   Moment waren beide gleichzeitig sichtbar und die Höhe schoss kurz nach
   oben, bevor sie sich wieder einpendelte. Das war das eigentliche Springen. */
.process-step__stage {
  display: grid;
  width: 100%;
  margin-bottom: 20px;
}

.process-step__stage > * {
  grid-area: 1 / 1;
}

.process-step__ghost {
  display: block;
  font-family: var(--font-sans);
  font-weight: 800;
  line-height: 0.85;
  font-size: clamp(7rem, 11vw, 13rem);
  color: rgba(20, 20, 20, 0.08);
  margin: 0;
  user-select: none;
  transition: opacity 0.3s ease;
}

.process-step.is-open .process-step__ghost {
  opacity: 0;
}

/* Öffnen/Schließen des Rundbogens über grid-template-rows (0fr -> 1fr) statt
   max-height: die Zeilenspur animiert weich zwischen "kein Inhalt" und
   "voller Inhalt", ohne dass CSS Grid pro Frame eine neue, unstete Zeilenhöhe
   berechnen muss. */
.process-step__arch-wrap {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  overflow-x: visible;
  overflow-y: hidden;
  align-self: start;
  transition: grid-template-rows 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-step.is-open .process-step__arch-wrap {
  grid-template-rows: 1fr;
}

.process-step__arch {
  /* Feste, rein viewport-abhängige Breite statt width:100% der Spalte:
     dadurch bleibt die Bogenbreite während der grid-template-columns-
     Animation konstant und der Text im Bogen bricht nicht mitten in der
     Bewegung neu um (das war das gemeldete "Backen" der Schrift). */
  position: relative;
  width: clamp(240px, 20vw, 390px);
  min-height: 0;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: var(--color-accent);
  margin: 0;
}

.process-step__arch-img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 72%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.03);
  transition: transform 0.55s ease;
}

.process-step.is-open .process-step__arch-img {
  transform: scale(1);
}

.process-step__arch-tag {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 72%;
  margin: 0 0 16px;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  line-height: 1.35;
  color: #fff;
  z-index: 1;
}

.process-step__index {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 10px;
}

.process-step__title {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--color-ink);
}

.process-step__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 32ch;
}

@media (prefers-reduced-motion: reduce) {
  .process-section__grid,
  .process-step__ghost,
  .process-step__arch-wrap,
  .process-step__arch-img {
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 1100px) {
  .process-section__intro-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Ab hier ist Hover kein verlässlicher Eingabeweg mehr: zwei Spalten,
     aktive Zustände bleiben über Klick/Fokus nutzbar (siehe js/main.js),
     die Spaltenbreiten-Verschiebung der Desktop-Zustände wird hier
     bewusst neutralisiert (gleiche Selektor-Spezifität, spätere Regel
     gewinnt), damit keine Spalte unkontrolliert schmal wird. Die feste
     Desktop-Bühnenhöhe entfällt hier bewusst: Tablet/Smartphone dürfen
     beim Öffnen eines Akkordeon-Schritts ganz normal in der Höhe wachsen. */
  .process-section__grid,
  .process-section__grid--active-1,
  .process-section__grid--active-3,
  .process-section__grid--active-4,
  .process-section__grid--active-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(32px, 5vw, 48px);
    min-block-size: auto;
  }

  .process-step__ghost {
    font-size: clamp(4.5rem, 14vw, 7rem);
  }

  .process-step__arch {
    width: 100%;
    max-width: min(320px, 100%);
  }
}

@media (max-width: 640px) {
  .process-section__grid,
  .process-section__grid--active-1,
  .process-section__grid--active-3,
  .process-section__grid--active-4,
  .process-section__grid--active-5 {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .process-step {
    padding-block: 20px;
    border-top: 1px solid var(--color-line);
  }

  .process-step:last-child {
    border-bottom: 1px solid var(--color-line);
  }

  .process-step__ghost {
    font-size: clamp(3.4rem, 18vw, 4.5rem);
    margin-bottom: 12px;
  }

  .process-step__arch {
    width: 100%;
    max-width: 100%;
  }

  .process-section__intro-row {
    gap: 20px;
  }
}

/* --------------------------------------------------------------------- */
/* 5. Über uns (Startseiten-Vorschau)                                     */
/* --------------------------------------------------------------------- */

/* Aufbau seit 30.09.: Ab 1200 px zwei Spalten (Text ca. 38 %, Film ca. 58 %,
   dazwischen 4 %), beide oben bündig. Der Film streckt sich auf die Höhe der
   Textspalte (mindestens 16:9), damit Film und Text unten auf derselben Linie
   enden; Bewertung und die zwei Buttons stehen als Gruppe unten in der
   Textspalte. Darunter das rote Historienband über die volle Inhaltsbreite.
   Darunter einspaltig: Text, Film, Band. */
.about-preview {
  background: var(--color-hero-bg);
  /* oben knapper: die Prozess-Section darüber endet bereits mit Luft */
  padding-block: clamp(40px, 4.5vw, 64px) clamp(56px, 6vw, 88px);
}

.about-preview__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "text"
    "figure"
    "band";
}

.about-preview__text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-preview__text .eyebrow {
  margin-bottom: clamp(14px, 1.4vw, 20px);
}

.about-preview__heading {
  margin: 0 0 clamp(16px, 1.6vw, 24px);
  font-family: var(--font-sans);
  font-weight: var(--fw-title);
  letter-spacing: var(--ls-title);
  line-height: var(--lh-section-title);
  /* etwas kleiner als andere Abschnittsüberschriften, damit der Film
     gleichwertig bleibt; höchstens zwei Zeilen */
  font-size: clamp(2.25rem, 1.3rem + 3vw, 4.25rem);
  color: var(--color-ink);
}

/* „die verbindet.“ bleibt zusammen: Umbruch nur nach „Erfahrung,“ */
.about-preview__nowrap {
  white-space: nowrap;
}

.about-preview__lead {
  margin: 0 0 28px;
  max-width: 34rem;
  /* höchstens 18 px, damit der Text neben dem Film bei 1366 bis 1920 px
     vier Zeilen hat */
  font-size: min(var(--fs-lead), 1.125rem);
  line-height: var(--lh-lead);
  color: var(--color-ink-soft);
}

.about-preview__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 24px;
}

/* Film: Teamfoto als Vorschaubild, Querformat, ohne Schatten */
.about-preview__figure {
  grid-area: figure;
  position: relative;
  margin-top: 32px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-dark);
}

.about-preview__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Hochformat-Foto: Gesichter im oberen Drittel, der Play-Button liegt
     darunter auf Kinn- und Brusthöhe statt auf einem Gesicht */
  object-position: 50% 34%;
}

/* Historienband: Abschluss der Section, niedrig und über die volle Breite */
.about-preview__band {
  grid-area: band;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.8vw, 40px);
  margin-top: clamp(32px, 4vw, 56px);
  padding: clamp(16px, 1.6vw, 22px);
  padding-right: clamp(24px, 3vw, 48px);
  border-radius: 20px;
  background: var(--color-dark);   /* seit 11.10.2026 schwarz statt Signalrot (Notiz #18) */
  color: var(--color-on-dark);
}

.about-preview__archive {
  flex: 0 0 auto;
  width: clamp(120px, 11vw, 168px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--color-on-dark-line);
}

.about-preview__archive img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

.about-preview__band-text {
  min-width: 0;
}

.about-preview__band-label {
  margin: 0 0 8px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-on-dark-soft);
}

.about-preview__band-claim {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 0.95rem + 1.1vw, 2rem);
  line-height: 1.2;
  color: var(--color-on-dark);
}

@media (min-width: 1200px) {
  .about-preview__inner {
    grid-template-columns: minmax(0, 38fr) minmax(0, 58fr);
    grid-template-areas:
      "text figure"
      "band band";
    column-gap: 4%;
  }

  /* feste Breite, damit aspect-ratio nur die Mindesthöhe vorgibt und die
     Breite nicht aus der gestreckten Höhe errechnet wird */
  .about-preview__figure {
    width: 100%;
    align-self: stretch;
    margin-top: 0;
  }

  /* Gruppe aus Bewertung und Buttons rückt an das untere Ende der
     Textspalte, auf die Unterkante des Films */
  .about-preview__text .about-rating {
    margin-top: auto;
  }
}

@media (max-width: 640px) {
  .about-preview__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .about-preview__actions .btn {
    justify-content: center;
    padding-block: 14px;
  }

  .about-preview__figure {
    margin-top: 28px;
    border-radius: 14px;
  }

  .about-preview__band {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 14px 14px 22px;
    border-radius: 14px;
  }

  .about-preview__archive {
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 8px;
  }

  .about-preview__band-text {
    padding-inline: 6px;
  }
}

/* "Seit 1895"-Video: Poster bleibt sichtbar, bis eine echte Quelle über
   data-video-src aktiviert wurde (main.js). Ohne Quelle bleibt es ein
   reines Standbild, der Play-Button bleibt [hidden]. */
.about-video {
  isolation: isolate;
}

.about-video__poster {
  position: relative;
  z-index: 0;
  transition: opacity 0.25s ease;
}

.about-video__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--color-dark);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.about-video.is-active .about-video__poster {
  opacity: 0;
}

.about-video.is-active .about-video__media {
  opacity: 1;
  pointer-events: auto;
}

.about-video__play[hidden] {
  display: none;
}

.about-video__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: rgba(20, 20, 20, 0.1);
  border: none;
  cursor: pointer;
  color: var(--color-on-dark);
  transition: background-color 0.2s ease;
}

.about-video__play:hover,
.about-video__play:focus-visible {
  background: rgba(20, 20, 20, 0.22);
}

.about-video__play:focus-visible {
  outline: 3px solid var(--color-on-dark);
  outline-offset: -8px;
}

.about-video__play-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 5.5vw, 80px);
  height: clamp(64px, 5.5vw, 80px);
  border-radius: 50%;
  background: var(--color-on-dark);
  color: var(--color-accent);
  box-shadow: 0 4px 16px rgba(20, 20, 20, 0.22);
  transition: transform 0.2s ease;
}

.about-video__play-circle svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}

.about-video__play:hover .about-video__play-circle,
.about-video__play:focus-visible .about-video__play-circle {
  transform: scale(1.06);
}

.about-video__play-label {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-on-dark);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.about-video.is-active .about-video__play {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .about-video__poster,
  .about-video__media,
  .about-video__play,
  .about-video__play-circle {
    transition: none;
  }
}

/* --------------------------------------------------------------------- */
/* 6. FAQ auf Asphalt                                                     */
/* --------------------------------------------------------------------- */

.faq-section {
  /* Einzige Stelle, an der die FAQ-Asphaltgrafiken referenziert werden.
     Bis 11.10.2026 (Geschichte der Lösung, Maße gelten weiter):
     Das Asset (roefe-faq-asphalt-bogen-dunkel-transparent.png, 2172×724px,
     Seitenverhältnis ~3:1) enthält oben UND unten je eine gewellte
     Aussparung mit echter Transparenz und dazwischen eine deckende
     Asphaltfläche (per Alphakanal geprüft).

     Getestet wurden zwei Alternativen, die beide verworfen wurden:
     1) Ein einzelnes background-image, non-uniform auf die volle,
        variable Section-Höhe gestreckt (background-size: 100% 100%) —
        verzerrt die Wellen auf schmalen/hohen Layouts (Mobile, viele
        geöffnete Akkordeon-Panels) sichtbar zu einem spitzen Zickzack.
     2) Bild unverzerrt in Originalproportion, Section-Höhe an das Bild
        gekoppelt — auf Mobile wäre die dunkle Fläche dann viel zu flach,
        FAQ-Text/Karten würden auf reinem Weiß statt Asphalt sitzen.

     Lösung: Oben und unten je ein UNVERZERRTER Ausschnitt desselben Bilds
     (::before/::after, background-size: 100% auto behält das Original-
     Seitenverhältnis exakt bei). Dazwischen liegt – statt der früheren
     flachen Fläche in --color-dark („schwarzer Balken“, 09/2026 auf Wunsch
     ersetzt) – eine nahtlos kachelbare Textur aus demselben Bild
     (faq-asphalt-textur.jpg aus werkzeuge/faq_textur.py; beide am 12.10.2026 entfernt). Die
     Kanten laufen per mask-image weich in diese Textur aus, deshalb gibt es
     bei keiner Section-Höhe (auch bei geöffneten Akkordeons) eine Naht.

     Alle Höhen sind in vw angegeben, weil das Bild mit 100 % der Breite
     skaliert: 1vw entspricht immer 21,72 Bildzeilen. Wellental oben bei
     Zeile 233 (10,7vw), unten ab Zeile 606 (5,4vw vor dem Ende) – dort
     muss das helle Seiten-Weiß (--color-hero-bg) liegen, sonst schlägt
     Textur in die transparenten Wellen durch. Frühere clamp()-Höhen haben
     die Welle ab ca. 1730 px Breite abgeschnitten. */
  /* Seit 12.10.2026: dieselbe Gussasphalt-Fläche wie Band 01–04
     (.faq-section__material.asphalt, ruhig, ohne WebGL, Dampf oder Schimmer).
     Form gibt eine dreiteilige Maske: obere Welle (Bildzeilen 0–369),
     deckende Mitte, untere Welle (Zeilen 463–724) aus der bisherigen Grafik
     (werkzeuge/teer_texturen.py). Die Maße oben gelten weiter: 1vw
     entspricht 21,72 Bildzeilen. */
  --faq-mask-top: url('../assets/images/teer/faq-maske-oben.png');
  --faq-mask-bottom: url('../assets/images/teer/faq-maske-unten.png');
  --faq-cap-top: 17vw;      /* Bildzeilen 0–369 */
  --faq-cap-bottom: 12vw;   /* Bildzeilen 463–724 */
  position: relative;
  isolation: isolate;
  background: var(--color-hero-bg);
  color: var(--color-on-dark);
  padding-block: clamp(56px, 6vw, 80px);
}

/* Asphalt wie Band 01–04 (.asphalt), Form aus den Wellenmasken */
.faq-section__material {
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-mask-image: var(--faq-mask-top), linear-gradient(#000, #000), var(--faq-mask-bottom);
  mask-image: var(--faq-mask-top), linear-gradient(#000, #000), var(--faq-mask-bottom);
  -webkit-mask-size: 100% auto, 100% calc(100% - var(--faq-cap-top) - var(--faq-cap-bottom) + 16px), 100% auto;
  mask-size: 100% auto, 100% calc(100% - var(--faq-cap-top) - var(--faq-cap-bottom) + 16px), 100% auto;
  -webkit-mask-position: center top, 0 calc(var(--faq-cap-top) - 8px), center bottom;
  mask-position: center top, 0 calc(var(--faq-cap-top) - 8px), center bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

.faq-section__grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.32fr) minmax(0, 0.68fr);
  gap: clamp(48px, 6vw, 110px);
  align-items: center;
}

.faq-section__intro {
  position: relative;
}

/* „FAQ“-Schriftzug (alle Seiten): wie die Zahlen 01–04 weiß und fett, ohne
   plastische Kante und Schlagschatten (seit 12.10.2026). Beim Hereinscrollen
   blendet js/motion.js von halbtransparent zu weiß über (ohne JS /
   reduzierte Bewegung: Endzustand). */
.faq-section__ghost {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 0.8;
  font-size: clamp(3.4rem, 6.5vw, 6rem);
  color: var(--asphalt-text);
  letter-spacing: -0.02em;
}

.faq-section__lead {
  margin: 0 0 20px;
  max-width: 300px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.faq-section__more {
  position: relative;
  margin-top: 4px;
  padding-top: 18px;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

.faq-section__more::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--color-accent);
}

.faq-section__more:hover {
  border-color: #fff;
}

.faq-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.faq-item {
  background: rgba(246, 246, 246, 0.97);
  border-radius: 12px;
  overflow: hidden;
}

.faq-item__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.faq-item__trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;   /* minmax: lange Wörter dürfen die Liste nicht verbreitern (WHG, 320 px) */
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 74px;
  padding: 16px 28px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-ink);
}

.faq-item__number {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-accent);
}

.faq-item__question {
  overflow-wrap: break-word;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.98rem, 1.15vw, 1.05rem);
  line-height: 1.35;
  color: var(--color-ink);
}

.faq-item__icon {
  display: inline-flex;
  color: var(--color-ink-faint);
}

.faq-item__icon svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.faq-item__trigger[aria-expanded='true'] .faq-item__icon svg {
  transform: rotate(180deg);
}

.faq-item__trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-radius: 4px;
}

.faq-item__panel {
  overflow: hidden;
}

.faq-item__answer {
  max-width: 760px;
  padding: 0 28px 22px 74px;
}

.faq-item__answer p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.faq-list.js-enabled .faq-item__panel {
  max-height: 0;
  transition: max-height 0.3s ease;
}

.faq-list.js-enabled .faq-item.is-open .faq-item__panel {
  max-height: var(--faq-panel-h, 480px);
}

@media (prefers-reduced-motion: reduce) {
  .faq-list.js-enabled .faq-item__panel,
  .faq-item__icon svg {
    transition: none;
  }
}

/* --------------------------------------------------------------------- */
/* 7. Abschluss-CTA (hell)                                                */
/* --------------------------------------------------------------------- */

.final-cta {
  background: var(--color-hero-bg);
  padding-block: clamp(72px, 9vw, 120px);
}

.final-cta__intro {
  max-width: 980px;
  margin-inline: auto;
  margin-bottom: clamp(48px, 6vw, 76px);
  text-align: center;
}

.final-cta__intro .eyebrow {
  display: block;
  color: var(--color-accent);
}

.final-cta__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-title);
  line-height: var(--lh-section-title);
  letter-spacing: var(--ls-title);
  font-size: var(--fs-section-title);
  color: var(--color-ink);
}

.final-cta__lead {
  margin: clamp(14px, 1.6vw, 18px) auto 0;
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-ink-soft);
}

/* Anfrage-Panel: linke dunkle Kontaktspalte + rechte helle Formular-Karte,
   beide in einer gemeinsamen, abgerundeten Fläche — bewusst großzügiger
   Weißraum drumherum statt der vorherigen, sehr engen Bild+Text-Aufteilung. */
.final-cta__panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.36fr) minmax(0, 0.64fr);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 32px 64px rgba(20, 20, 20, 0.1);
}

.final-cta__info {
  background: var(--color-dark);
  color: var(--color-on-dark);
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3.4vw, 48px);
  display: flex;
  flex-direction: column;
}

.final-cta__info-eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-on-dark-soft);
}

.final-cta__info-phone {
  display: block;
  margin: 10px 0 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  letter-spacing: -0.02em;
  color: var(--color-on-dark);
}

.final-cta__info-phone:hover {
  color: var(--color-on-dark-soft);
}

.final-cta__info-hint {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: var(--color-on-dark-soft);
}

.final-cta__contact {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: clamp(28px, 3vw, 40px) 0;
  padding: clamp(24px, 2.6vw, 32px) 0;
  border-top: 1px solid var(--color-on-dark-line);
  border-bottom: 1px solid var(--color-on-dark-line);
}

.final-cta__contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--color-on-dark);
  border-radius: 10px;
}

.final-cta__contact-item--static {
  cursor: default;
}

.final-cta__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-dark-soft);
  color: var(--color-on-dark);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.final-cta__contact-icon svg {
  width: 18px;
  height: 18px;
}

.final-cta__contact-item:hover .final-cta__contact-icon,
.final-cta__contact-item:focus-visible .final-cta__contact-icon {
  background: var(--color-accent);
  color: #fff;
}

.final-cta__contact-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.final-cta__contact-text {
  display: flex;
  flex-direction: column;
}

.final-cta__contact-text strong {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-dark-soft);
}

.final-cta__contact-text span {
  margin-top: 2px;
  font-size: 0.98rem;
  color: var(--color-on-dark);
}

/* Fassade an der Adresse (seit 10.10.2026): kleines Foto am Zeilenende.
   Beim Darüberfahren, Antippen oder per Tastatur erscheint es groß darüber. */
.final-cta__haus {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  margin-left: auto;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  cursor: zoom-in;
  outline: none;
}

.final-cta__haus-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--color-on-dark-line);
  border-radius: inherit;
  background: var(--color-dark-soft);
  transition: border-color 0.2s ease, transform 0.25s ease;
}

.final-cta__haus:hover .final-cta__haus-thumb,
.final-cta__haus:focus .final-cta__haus-thumb {
  border-color: var(--color-accent);
  transform: scale(1.06);
}

.final-cta__haus:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.final-cta__haus-card {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  z-index: 5;
  width: min(300px, calc(100vw - 72px));
  padding: 8px;
  border: 1px solid var(--color-on-dark-line);
  border-radius: 14px;
  background: var(--color-dark-soft);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.96);
  transform-origin: 100% 100%;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.3s;
  pointer-events: none;
}

.final-cta__haus-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
}

.final-cta__haus-caption {
  display: block;
  padding: 10px 6px 4px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-on-dark-soft);
}

.final-cta__haus:hover .final-cta__haus-card,
.final-cta__haus:focus .final-cta__haus-card {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .final-cta__haus-thumb,
  .final-cta__haus-card {
    transition: none;
  }
}

.final-cta__info-more {
  margin-top: auto;
}

/* Google-Bewertungen (echte Werte, Stand siehe Google-Unternehmensprofil
   "Karl Röfe GmbH & Co. KG": 4,7 Sterne, 21 Rezensionen) ------------------ */

.final-cta__reviews {
  display: block;
  margin-bottom: clamp(20px, 2.2vw, 28px);
  padding: 18px 20px;
  background: var(--color-dark-soft);
  border: 1px solid var(--color-on-dark-line);
  border-radius: 16px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.final-cta__reviews:hover,
.final-cta__reviews:focus-visible {
  background: #262626;
  border-color: rgba(244, 244, 244, 0.32);
}

.final-cta__reviews-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.final-cta__reviews-glogo {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.final-cta__reviews-score {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-on-dark);
}

.final-cta__reviews-stars {
  --star-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.97 6.16 6.78.83-4.95 4.72 1.29 6.79L12 17.77l-6.09 3.23 1.29-6.79-4.95-4.72 6.78-.83z'/%3E%3C/svg%3E");
  position: relative;
  display: inline-block;
  width: 82px;
  height: 15px;
  margin-left: auto;
}

.final-cta__reviews-stars-track,
.final-cta__reviews-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  -webkit-mask-image: var(--star-icon);
  mask-image: var(--star-icon);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 16.4px 15px;
  mask-size: 16.4px 15px;
}

.final-cta__reviews-stars-track {
  width: 100%;
  background-color: rgba(244, 244, 244, 0.28);
}

.final-cta__reviews-stars-fill {
  width: calc(var(--rating) / 5 * 100%);
  background-color: #fbbc05;
}

.final-cta__reviews-count {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--color-on-dark-soft);
}

.final-cta__reviews-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-on-dark);
  border-bottom: 1px solid var(--color-on-dark-line);
  padding-bottom: 2px;
}

.final-cta__reviews-link svg {
  width: 13px;
  height: 13px;
  transition: transform 0.2s ease;
}

.final-cta__reviews:hover .final-cta__reviews-link svg {
  transform: translateX(3px);
}

/* Formularkarte -------------------------------------------------------- */

.final-cta__form {
  background: var(--color-hero-bg);
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3.6vw, 56px);
}

.final-cta__form-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  color: var(--color-ink);
}

.final-cta__form-hint {
  margin: 8px 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.final-cta__form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
  margin: clamp(24px, 2.6vw, 32px) 0;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 400;
  color: var(--color-ink);
  background: var(--color-page-bg);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 13px 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field textarea {
  resize: vertical;
  min-height: 96px;
  font-family: inherit;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.14);
}

.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

.final-cta__form-submit {
  width: 100%;
  justify-content: center;
}

.final-cta__form-note {
  margin: 16px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-ink-faint);
}

.final-cta__form-note a {
  color: var(--color-accent);
  font-weight: 600;
}

/* --------------------------------------------------------------------- */
/* 8. Footer                                                              */
/* --------------------------------------------------------------------- */

.site-footer {
  background: var(--color-dark);
  color: var(--color-on-dark-soft);
  padding-top: clamp(56px, 6vw, 88px);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 0.6fr));
  gap: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(48px, 5vw, 72px);
  border-bottom: 1px solid var(--color-on-dark-line);
}

.site-footer__logo {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-dark);
}

.site-footer__tagline {
  margin: 16px 0 0;
  max-width: 30ch;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-on-dark-soft);
}

.site-footer__heading {
  margin: 0 0 18px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-on-dark-soft);
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__list a {
  font-size: 0.92rem;
  color: var(--color-on-dark);
  transition: opacity 0.15s ease;
}

.site-footer__list a:hover {
  opacity: 0.7;
}

/* Instagram im Footer: Icon + Text, auf dem Handy mit großer Tippfläche */
.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  border-radius: 4px;
}

.site-footer__social svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.site-footer__list a:focus-visible {
  outline: 2px solid var(--color-on-dark);
  outline-offset: 4px;
  opacity: 1;
}

@media (max-width: 640px) {
  .site-footer__social {
    min-height: 44px;
  }
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 24px;
  font-size: 0.82rem;
  color: var(--color-on-dark-soft);
}

.site-footer__legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.site-footer__legal a {
  color: var(--color-on-dark-soft);
}

.site-footer__legal a:hover {
  color: var(--color-on-dark);
}

/* Signatur „Website made by AVIO“ als Knopf neben dem Nach-oben-Knopf
   (seit 04.10.2026, auf Wunsch größer und auffälliger) */
.site-footer__end {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px 8px 18px;
  border: 1px solid var(--color-on-dark-line);
  border-radius: 999px;
  font-size: 0.95rem;
  color: var(--color-on-dark);
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.site-footer__credit b {
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: color 0.2s ease;
}

.site-footer__credit svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.site-footer__credit:hover {
  background: var(--color-on-dark);
  border-color: var(--color-on-dark);
  color: var(--color-dark);
  transform: translateY(-2px);
}

.site-footer__credit:hover b {
  color: var(--color-accent);
}

.site-footer__credit:hover svg {
  transform: translate(2px, -2px);
}

.site-footer__credit:focus-visible {
  outline: 2px solid var(--color-on-dark);
  outline-offset: 3px;
}

/* Smartphone: oben Copyright und Pfeil, darunter die Rechtslinks, ganz unten die Signatur */
@media (max-width: 640px) {
  .site-footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "copy top"
      "legal top"
      "credit credit";
    column-gap: 16px;
    row-gap: 10px;
  }

  .site-footer__copy { grid-area: copy; }
  .site-footer__legal { grid-area: legal; }
  .site-footer__end { display: contents; }
  .site-footer__bottom .scroll-top { grid-area: top; }
  .site-footer__credit { grid-area: credit; justify-self: start; min-height: 44px; margin-top: 8px; }
}

.scroll-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-on-dark-line);
  color: var(--color-on-dark);
  background: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.scroll-top:hover {
  background: var(--color-on-dark);
  color: var(--color-dark);
  transform: translateY(-2px);
}

.scroll-top svg {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------------- */
/* Weiches Scrollen (Lenis, js/smooth-scroll.js, seit 01.10.2026)         */
/* Regeln unverändert aus lenis/dist/lenis.css, Version 1.3.26            */
/* --------------------------------------------------------------------- */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* --------------------------------------------------------------------- */
/* Reduced motion                                                         */
/* --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------- */
/* Responsive (unter 1280px, technisch funktionsfähig)                    */
/* --------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .next-step-card {
    padding-inline: clamp(20px, 3vw, 40px);
  }

  .next-step-card__number {
    font-size: clamp(10rem, 24vw, 18rem);
  }


  .trust-cards {
    grid-template-columns: 1fr;
    width: min(560px, calc(100% - 48px));
  }

  .trust-intro__qualities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(28px, 5vw, 40px);
    padding-block: clamp(116px, calc(20vw + 6px), 176px) clamp(40px, 8vw, 64px);
  }

  .trust-quality:nth-child(odd) {
    border-left: none;
  }

  .trust-quality:nth-child(even) {
    border-left: 1px solid var(--color-accent);
  }

  .trust-quality__number {
    font-size: clamp(4rem, 12vw, 6.5rem);
  }

  .trust-quality__label {
    white-space: normal;
  }

  .final-cta__panel {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .final-cta__info {
    order: 2;
  }

  .final-cta__form {
    order: 1;
  }

  /* Die PNG läuft unterhalb der Kurve transparent aus; bei geringerer
     Content-Höhe (kürzere Headline-Zeile durch schmaleren Viewport) reicht
     die reine 100%-Breite nicht mehr aus, um die Headline vollständig auf
     der opaken Fläche zu halten. Kontrollierter Zoom, links verankert
     (deckt sich mit der linksbündigen Headline), Überstand wird vom
     umgebenden overflow:hidden abgeschnitten. */
  .showcase__asphalt-img {
    width: 130%;
    max-width: none;
  }


  .showcase-card {
    width: 88vw;
  }

  .showcase-card__inner {
    grid-template-columns: 60% 40%;
    aspect-ratio: 5 / 4;
  }

  .leistungen-grid__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leistungen-grid__row .leistung-card {
    border-left: 1px solid var(--color-line);
    border-top: 1px solid var(--color-line);
  }

  .leistungen-grid__row .leistung-card:nth-child(odd) {
    border-left: none;
  }

  .leistungen-grid__row .leistung-card:nth-child(-n+2) {
    border-top: none;
  }

  .faq-section__grid {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 48px);
  }

  .faq-section__lead {
    max-width: 52ch;
  }

  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .final-cta__info,
  .final-cta__form {
    padding: 32px 22px;
  }

  .final-cta__form-grid {
    grid-template-columns: 1fr;
  }

  /* Auf Smartphone-Breiten stärkerer Zoom als bei Tablet: die nutzbare
     Headline-Höhe schrumpft nicht weiter (Nav-Höhe und Schriftgröße sind
     bereits auf ihren clamp()-Mindestwerten), während die Viewportbreite
     weiter sinkt – deshalb reicht der Tablet-Zoom hier nicht mehr aus. */
  .showcase__asphalt-img {
    width: 230%;
  }


  .showcase-card {
    width: 86vw;
  }

  .showcase-card__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    aspect-ratio: auto;
  }

  .showcase-card__media {
    aspect-ratio: 4 / 3;
    border-right: 1px solid var(--color-line);
    border-bottom: none;
    padding: 16px;
  }

  .showcase-card__info {
    padding: clamp(22px, 6vw, 30px);
    gap: 10px;
  }

  .showcase__progress {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .showcase__progress-next {
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }

  .next-step__grid {
    grid-template-columns: 1fr;
    row-gap: clamp(40px, 10vw, 56px);
  }

  .next-step-card,
  .next-step__grid .next-step-card:first-child {
    border-left: none;
    padding-inline: 4px;
  }

  .next-step-card--secondary {
    padding-top: clamp(32px, 9vw, 44px);
    border-top: 1px solid var(--color-line);
  }

  .next-step-card__number {
    top: 0;
    left: 0;
    right: auto;
    transform: none;
    font-size: clamp(10rem, 42vw, 16rem);
  }

  .next-step-card__text {
    max-width: none;
  }

  .next-step-card__cta {
    flex-wrap: wrap;
  }

  .next-step-card__line {
    display: none;
  }

  .next-step-card__btn {
    width: 100%;
    justify-content: center;
  }

  .trust-intro__qualities {
    grid-template-columns: 1fr;
    row-gap: clamp(24px, 7vw, 32px);
    padding-block: clamp(126px, calc(34vw + 6px), 206px) clamp(36px, 8vw, 56px);
  }

  .trust-quality,
  .trust-quality:nth-child(odd),
  .trust-quality:nth-child(even) {
    border-left: none;
    padding-inline: 0;
    padding-top: clamp(20px, 6vw, 28px);
    border-top: 1px solid var(--color-on-dark-line);
  }

  .trust-intro__qualities .trust-quality:first-child {
    padding-top: 0;
    border-top: none;
  }

  .trust-quality__number {
    font-size: clamp(3.6rem, 20vw, 5rem);
  }

  .trust-quality__label {
    white-space: normal;
  }

  .leistungen-grid__row {
    grid-template-columns: 1fr;
  }

  .leistungen-grid__row .leistung-card {
    border-left: none;
    border-top: 1px solid var(--color-line);
  }

  .leistungen-grid__row .leistung-card:first-child {
    border-top: none;
  }


  .trust-band__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .trust-band__divider {
    display: none;
  }

  .site-footer__top {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------- */
/* Mobile-Sicherheitsnetz für den Hero (rein technisch, keine Text-      */
/* oder Desktop-Änderung — verhindert horizontalen Overflow bei sehr     */
/* schmalen Bildschirmen; Hero-Inhalt/-Design bleibt sonst unangetastet) */
/* --------------------------------------------------------------------- */

@media (max-width: 560px) {
  .site-nav__links {
    display: none;
  }

  .site-nav__actions {
    gap: 12px;
  }

  .hero-content {
    width: calc(100% - (2 * var(--container-pad)));
  }

}

/* ==========================================================================
   Mobile Navigation (alle Seiten) — Menü-Button + Panel werden von
   js/main.js aus .site-nav__links erzeugt; der Header-HTML bleibt unverändert.
   Bis 1100px (seit 30.09.: sechs Menüpunkte) ersetzt das Panel die Linkleiste (vorher: Links ab 560px einfach
   ausgeblendet, dazwischen zu enge Leiste).
   ========================================================================== */

.site-nav__toggle {
  display: none;
}

.site-nav__panel {
  display: none;
}

@media (max-width: 1100px) {
  .site-nav__links {
    display: none;
  }

  .site-nav__actions {
    gap: 12px;
  }

  .site-nav__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    flex-shrink: 0;
    color: var(--color-ink);
    background: transparent;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .site-nav__toggle:hover,
  .site-nav__toggle:focus-visible {
    border-color: var(--color-accent);
  }

  .site-nav__toggle-bar {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    margin-left: -9px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .site-nav__toggle-bar:first-child { transform: translateY(-4px); }
  .site-nav__toggle-bar:last-child  { transform: translateY(4px); }

  .site-nav.is-menu-open .site-nav__toggle-bar:first-child { transform: rotate(45deg); }
  .site-nav.is-menu-open .site-nav__toggle-bar:last-child  { transform: rotate(-45deg); }

  /* Panel liegt im Stacking-Kontext des Headers (z-index 50) unter der
     Navigationsleiste – dadurch über allen Pins und Heros der Seiten. */
  .site-nav__panel {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: calc(var(--nav-height) + 40px) var(--container-pad) max(32px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-hero-bg);
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.55s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.55s;
  }

  .site-nav.is-menu-open .site-nav__panel {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s;
  }

  .site-nav__panel-links {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-nav__panel-links li {
    border-bottom: 1px solid var(--color-line);
  }

  .site-nav__panel-links a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 18px 0 16px;
    font-weight: 800;
    font-size: clamp(1.9rem, 7vw, 2.8rem);
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--color-ink);
  }

  .site-nav__panel-num {
    flex-shrink: 0;
    width: 2.2em;
    font-family: var(--font-num);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-accent);
  }

  .site-nav__panel-links a:hover .site-nav__panel-label,
  .site-nav__panel-links a[aria-current] .site-nav__panel-label {
    color: var(--color-accent);
  }

  /* „Leistungen“ klappt im Panel auf; Unterpunkte darunter, eingerückt
     auf die Textkante, mit Touchflächen von mindestens 48px */
  .site-nav__panel-toggle {
    display: flex;
    align-items: baseline;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 18px 0 16px;
    font: inherit;
    font-weight: 800;
    font-size: clamp(1.9rem, 7vw, 2.8rem);
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-align: left;
    color: var(--color-ink);
    background: none;
    border: 0;
    cursor: pointer;
  }

  .site-nav__panel-toggle .site-nav__chevron {
    align-self: center;
    width: 22px;
    height: 22px;
    margin-left: auto;
    color: var(--color-accent);
  }

  .site-nav__panel-toggle[aria-expanded="true"] .site-nav__chevron {
    transform: rotate(180deg);
  }

  .site-nav__panel-toggle:hover .site-nav__panel-label,
  .site-nav__panel-toggle.is-current .site-nav__panel-label,
  .site-nav__panel-toggle[aria-expanded="true"] .site-nav__panel-label {
    color: var(--color-accent);
  }

  .site-nav__panel-toggle:focus-visible,
  .site-nav__panel-links a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  /* „Leistungen“ (seit 11.10.2026): der Name führt zur Übersicht, der Pfeil
     daneben klappt die Leistungsseiten auf (Notiz #20) */
  .site-nav__panel-row {
    display: flex;
    align-items: center;
  }

  .site-nav__panel-row > a {
    flex: 1;
    min-width: 0;
  }

  .site-nav__panel-row .site-nav__panel-toggle {
    width: auto;
    padding: 18px 4px 16px 20px;
  }

  .site-nav__panel-sub {
    margin: -4px 0 0;
    padding: 0 0 14px calc(2.2em + 16px);
    list-style: none;
    font-size: 0.9rem;
  }

  .site-nav__panel-sub[hidden] {
    display: none;
  }

  .site-nav__panel-links .site-nav__panel-sub li {
    border-bottom: 0;
    opacity: 1;
    transform: none;
  }

  .site-nav__panel-links .site-nav__panel-sub a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 6px 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
    color: var(--color-ink-soft);
  }

  .site-nav__panel-links .site-nav__panel-sub a:hover,
  .site-nav__panel-links .site-nav__panel-sub a[aria-current] {
    color: var(--color-accent);
  }

  .site-nav__panel-links .site-nav__panel-sub a[aria-current] {
    position: relative;
  }

  .site-nav__panel-links .site-nav__panel-sub a[aria-current]::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 50%;
    width: 14px;
    height: 2px;
    background: currentColor;
  }

  .site-nav__panel-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
  }

  .site-nav__panel-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.95rem;
    color: var(--color-ink-soft);
  }

  .site-nav__panel-contact a:first-child {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-ink);
  }

  /* Links steigen beim Öffnen gestaffelt auf */
  .site-nav__panel-links li,
  .site-nav__panel-foot {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .site-nav.is-menu-open .site-nav__panel-links li,
  .site-nav.is-menu-open .site-nav__panel-foot {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(0.18s + var(--i, 0) * 0.06s);
  }

  html.is-menu-locked {
    overflow: hidden;
  }
}

/* Handy: Leiste ist voll; die Nummer steht im aufklappbaren Menü */
@media (max-width: 480px) {
  .site-nav__phone {
    display: none;
  }
}

@media (max-width: 360px) {
  .site-nav__actions .btn--primary {
    padding-inline: 16px;
  }
}

@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .site-nav__panel,
  .site-nav.is-menu-open .site-nav__panel,
  .site-nav__panel-links li,
  .site-nav__panel-foot,
  .site-nav__toggle-bar {
    transition: none !important;
  }
}

/* ==========================================================================
   Logo (alle Seiten) – Plakette „Asphaltbau Röfe · Gegründet 1895“
   Nur per CSS: Das HTML bleibt unverändert (<div|a class="site-nav__logo">
   bzw. <div class="site-footer__logo"> mit dem Text „RÖFE“). Der Text bleibt
   für Screenreader erhalten und wird nur optisch ausgeblendet; die Plakette
   ist das Hintergrundbild. Datei: assets/images/logo/roefe-logo.png (360 px).
   ========================================================================== */

/* Header: Der Logo-Platz ist fest so breit wie „Plakette + Name“ in der
   schwebenden Leiste, damit die Menüpunkte nie springen. Die Plakette ist
   ::before in Ausgangsgröße (--logo-top) und wird per transform: scale()
   von oben links auf --logo-docked verkleinert – stufenlos mit --nav-p;
   --logo-r (= docked / top) misst js/main.js. Gilt auf allen Seiten
   gleich (Startseite und Unterseiten). Daneben blendet in der zweiten
   Hälfte „Karl Röfe“ ein (::after, für Screenreader stumm: der echte Text
   „RÖFE“ bleibt im DOM und benennt den Link). */
.site-nav__logo {
  --logo-docked: clamp(40px, 3.8vw, 54px);
  /* Oben groß; so gewählt, dass die Plakette nicht in die erste Zeile unter
     der Leiste ragt (Hero-Eyebrow bzw. Breadcrumb) */
  --logo-top: clamp(80px, 7.4vw, 108px);
  --logo-gap: 12px;
  --logo-name: 5.3rem;
  position: relative;
  display: block;
  flex-shrink: 0;
  width: calc(var(--logo-docked) + var(--logo-gap) + var(--logo-name));
  height: var(--logo-docked);
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  color: transparent;
  border-radius: 4px;
}

.site-nav__logo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: var(--logo-top);
  height: var(--logo-top);
  background: url('../assets/images/logo/roefe-logo.webp') center / contain no-repeat;
  border-radius: 2px;
  box-shadow:
    0 1px 3px rgba(20, 20, 20, 0.14),
    0 12px 26px -10px rgba(20, 20, 20, calc(0.35 * (1 - var(--nav-p))));
  transform-origin: 0 0;
  transform: scale(calc(1 - var(--nav-p) * (1 - var(--logo-r, 1))));
}

.site-nav__logo::after {
  content: 'Karl Röfe';
  content: 'Karl Röfe' / '';
  position: absolute;
  left: calc(var(--logo-docked) + var(--logo-gap));
  top: 50%;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-ink);
  white-space: nowrap;
  opacity: var(--nav-q);
  transform: translate(calc(-5px * (1 - var(--nav-q))), -50%);
  pointer-events: none;
}

a.site-nav__logo:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
}

.site-footer__logo {
  width: clamp(96px, 8vw, 120px);
  aspect-ratio: 1;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  color: transparent;
  background: url('../assets/images/logo/roefe-logo.webp') center / contain no-repeat;
  border-radius: 3px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

/* Handy: Plakette, „Karl Röfe“, Button und Menü-Knopf passen nur mit
   kompakterem Button (ohne Pfeil) und engeren Abständen nebeneinander */
@media (max-width: 480px) {
  .site-nav__actions {
    gap: 8px;
  }

  .site-nav__actions .btn--primary {
    padding-inline: 14px;
  }

  .site-nav__actions .btn--primary svg {
    display: none;
  }
}

@media (max-width: 640px) {
  .site-nav__logo {
    --logo-top: 56px;
  }
}

@media (max-width: 480px) {
  .site-nav__logo {
    --logo-gap: 8px;
    --logo-name: 4.6rem;
  }

  .site-nav__logo::after {
    font-size: 0.95rem;
  }
}

/* Sehr schmale Handys: nur die Plakette, kein Name */
@media (max-width: 380px) {
  .site-nav__logo {
    width: var(--logo-docked);
  }

  .site-nav__logo::after {
    display: none;
  }
}


/* ==========================================================================
   Anfrage-Fenster (alle Seiten, seit 30.09.) – <dialog id="anfrage">
   Kopf in dunklem Asphalt (Textur wie der FAQ-Bereich) mit weicher Welle,
   Formular auf Warmweiß, Bordeaux für Pflicht-Stern, Auswahl, Fokus und
   Button. Liegt als natives Dialogfeld über allem (auch über der Leiste).
   Öffnen/Schließen, Prüfung und Versand: js/main.js „Anfrage-Fenster“.
   ========================================================================== */

html.is-inquiry-open {
  overflow: hidden;
}

.inquiry {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(12px, 4vh, 48px) clamp(12px, 3vw, 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  background: transparent;
  color: var(--color-ink);
}

.inquiry[open] {
  display: flex;
}

.inquiry::backdrop {
  background: rgba(20, 20, 20, 0.58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.inquiry__panel {
  width: min(100%, 880px);
  margin: auto;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-hero-bg);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.6);
}

/* Auftritt: kurz und ruhig (Schließen per .is-closing, js/main.js) */
@media (prefers-reduced-motion: no-preference) {
  .inquiry[open] .inquiry__panel {
    animation: inquiry-in 0.38s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .inquiry[open]::backdrop {
    animation: inquiry-fade 0.3s ease;
  }

  .inquiry.is-closing .inquiry__panel {
    animation: inquiry-out 0.22s ease forwards;
  }

  .inquiry.is-closing::backdrop {
    animation: inquiry-fade 0.22s ease reverse forwards;
  }
}

@keyframes inquiry-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes inquiry-out {
  to { opacity: 0; transform: translateY(10px); }
}

@keyframes inquiry-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.inquiry__head {
  position: relative;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 5vw, 52px) clamp(56px, 6vw, 72px);
  /* Asphalt wie Band 01–04 über .asphalt (index.html) */
  color: var(--color-on-dark);
}

.inquiry__eyebrow {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-on-dark-soft);
}

.inquiry__title {
  max-width: 22ch;
  margin: 12px 0 12px;
  padding-right: 48px;
  font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.45rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-on-dark);
}

.inquiry__title:focus {
  outline: none;
}

.inquiry__lead {
  max-width: 52ch;
  margin: 0;
  line-height: 1.6;
  color: var(--color-on-dark-soft);
}

.inquiry__close {
  position: absolute;
  top: clamp(16px, 2.4vw, 24px);
  right: clamp(16px, 2.4vw, 24px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.inquiry__close svg {
  width: 20px;
  height: 20px;
}

.inquiry__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.inquiry__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Weiche Welle statt harter Kante – dieselbe Formensprache wie FAQ und Referenzen */
.inquiry__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(28px, 4vw, 48px);
  fill: var(--color-hero-bg);
}

.inquiry__form,
.inquiry__done {
  padding: clamp(8px, 1.5vw, 16px) clamp(24px, 5vw, 52px) clamp(28px, 4vw, 44px);
}

.inquiry__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}

.inquiry__field label,
.inquiry__services legend {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-ink);
}

.inquiry__req {
  color: var(--color-accent);
}

.inquiry__opt {
  font-weight: 400;
  color: var(--color-ink-soft);
}

.inquiry__field input,
.inquiry__field textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 13px 16px;
  border: 1px solid rgba(20, 20, 20, 0.2);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 1rem;
  color: var(--color-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.inquiry__field textarea {
  min-height: 112px;
  resize: vertical;
  line-height: 1.5;
}

.inquiry__field input::placeholder,
.inquiry__field textarea::placeholder {
  color: #959595;
}

.inquiry__field input:focus,
.inquiry__field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.14);
}

.inquiry__field input[aria-invalid="true"] {
  border-color: #b3261e;
}

.inquiry__error {
  margin: 6px 0 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: #a1261f;
}

.inquiry__field--full {
  margin-top: 18px;
}

/* Bereich bzw. Stelle wählen (Anfrage-Fenster und Bewerbung): seit 11.10.2026
   als Liste mit Häkchen (Notiz 24, Variante B; Vergleich
   vergleich/formular-auswahl.html): alle Möglichkeiten untereinander in einem
   Kasten, rechts ein Kreis, gewählt mit rotem Häkchen, große Tippflächen. */
.inquiry__services {
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}

.inquiry__services legend {
  margin-bottom: 10px;
  padding: 0;
}

.inquiry__chips {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.14);
  border-radius: 12px;
  background: #fff;
}

.inquiry__chip {
  position: relative;
  cursor: pointer;
}

.inquiry__chip + .inquiry__chip {
  border-top: 1px solid rgba(20, 20, 20, 0.08);
}

.inquiry__chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.inquiry__chip span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 0 16px 0 18px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-ink);
  transition: background-color 0.2s ease;
}

.inquiry__chip span::after {
  content: '';
  flex: 0 0 22px;
  height: 22px;
  border: 1.5px solid rgba(20, 20, 20, 0.25);
  border-radius: 50%;
  background: #fff center / 12px no-repeat;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.inquiry__chip:hover span {
  background: rgba(20, 20, 20, 0.03);
}

.inquiry__chip input:checked + span {
  background: rgba(227, 6, 19, 0.05);
}

.inquiry__chip input:checked + span::after {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
}

.inquiry__chip input:focus-visible + span {
  outline: 2px solid var(--color-accent);
  outline-offset: -3px;
}

.inquiry__hint {
  min-height: 3.1em;
  margin: 14px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--color-accent);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}

/* Datenschutz-Hinweis am Formular (15.–31.10.2026 statt Pflicht-Haken; seit 01.11.2026 wieder .inquiry__consent, Wunsch Domenic) */
.inquiry__privacy {
  margin: 22px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-page-bg);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}

/* Datenschutz: Pflicht-Haken */
.inquiry__consent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: start;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-page-bg);
}

.inquiry__consent input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.inquiry__consent input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.inquiry__consent label {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
  cursor: pointer;
}

.inquiry__consent label a,
.inquiry__privacy a,
.inquiry__note a,
.inquiry__done a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.inquiry__consent .inquiry__error {
  grid-column: 2;
  margin-top: 2px;
}

.inquiry__consent.is-invalid {
  border-color: #b3261e;
}

/* Im Anfrage-Formular unten (final-cta) steht der Haken direkt über dem Button */
.final-cta__form .inquiry__consent {
  margin: 0 0 20px;
}

.inquiry__submit {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 24px;
}

.inquiry__submit svg {
  width: 20px;
  height: 20px;
}

.inquiry__note {
  margin: 12px 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  text-align: center;
  color: var(--color-ink-soft);
}

.inquiry__done {
  padding-top: clamp(16px, 3vw, 28px);
}

.inquiry__done-title {
  margin: 0 0 10px;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 800;
  color: var(--color-ink);
}

.inquiry__done-title:focus {
  outline: none;
}

.inquiry__done p {
  max-width: 56ch;
  margin: 0 0 10px;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.inquiry__done .btn {
  margin-top: 14px;
}

@media (max-width: 640px) {
  .inquiry {
    padding: 8px;
  }

  .inquiry__panel {
    border-radius: 14px;
  }

  .inquiry__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .inquiry__chip span {
    padding: 0 14px 0 16px;
    font-size: 0.92rem;
  }
}

/* ===================================================================== */
/* Anfrage-Abschnitt: Karte und Google-Bewertung in einer Karte (seit     */
/* 04.10.2026, Variante 2 aus dem Vergleich; Entwürfe im Archiv           */
/* „Zwischenstand vor Übernahme Karten-Variante 2“). Zwei-Klick-Lösung:   */
/* zuerst nur das lokale Kartenbild (werkzeuge/karte_bild.py, © OSM),     */
/* Google Maps lädt erst nach „Karte laden“ (js/main.js).                 */
/* ===================================================================== */

.final-cta__gcard {
  max-width: 480px;
  margin-bottom: clamp(20px, 2.2vw, 28px);
  overflow: hidden;
  border: 1px solid var(--color-on-dark-line);
  border-radius: 16px;
  background: var(--color-dark-soft);
}

.final-cta__gcard .final-cta__reviews {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.final-cta__map-frame {
  position: relative;
  isolation: isolate;
  aspect-ratio: 2.6 / 1;
  overflow: hidden;
  border-bottom: 1px solid var(--color-on-dark-line);
  background: #2a2a2a;
}

.final-cta__map.is-loaded .final-cta__map-frame {
  aspect-ratio: 16 / 10;
}

.final-cta__map-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) {
  .final-cta__map-frame:hover .final-cta__map-img {
    transform: scale(1.06);
  }
}

/* Roter Pin, Spitze genau auf dem Gebäude (Bildmitte), mit ruhigem Puls */
.final-cta__map-mark {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 35px;
  transform: translate(-50%, -100%);
}

.final-cta__map-pin {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}

.final-cta__map-pin path {
  fill: var(--color-accent);
}

.final-cta__map-pin circle {
  fill: #fff;
}

.final-cta__map-pulse {
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: rgba(227, 6, 19, 0.5);
  animation: final-cta-map-pulse 2.6s ease-out infinite;
}

@keyframes final-cta-map-pulse {
  0% { opacity: 0.85; transform: scale(0.4); }
  80%, 100% { opacity: 0; transform: scale(3.4); }
}

.final-cta__map-chip {
  position: absolute;
  z-index: 2;
  top: calc(50% - 32px);
  left: calc(50% + 18px);
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  font-size: 0.72rem;
  white-space: nowrap;
  color: var(--color-ink-soft);
}

.final-cta__map-chip b {
  margin-right: 4px;
  font-weight: 800;
  color: var(--color-ink);
}

.final-cta__map-load {
  position: absolute;
  z-index: 3;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.86);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.final-cta__map-load:hover {
  background: var(--color-accent);
}

.final-cta__map-load:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.final-cta__map-credit {
  position: absolute;
  z-index: 3;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.6rem;
  color: #333;
}

.final-cta__map-iframe {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.final-cta__map.is-loaded .final-cta__map-mark,
.final-cta__map.is-loaded .final-cta__map-chip,
.final-cta__map.is-loaded .final-cta__map-load,
.final-cta__map.is-loaded .final-cta__map-credit {
  display: none;
}

/* Einwilligungshinweis an der Karte (seit 15.10.2026): muss gelesen werden können, daher heller und etwas größer */
.final-cta__map-note {
  margin: 0;
  padding: 12px 20px 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--color-on-dark-soft);
}

.final-cta__map-note[hidden] {
  display: none;
}

.final-cta__map-hide {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--color-on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.final-cta__map-hide:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.final-cta__map-note a {
  color: var(--color-on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 480px) {
  .final-cta__map-chip span {
    display: none;
  }

  .final-cta__map-chip b {
    margin-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .final-cta__map-img {
    transition: none;
  }

  .final-cta__map-frame:hover .final-cta__map-img {
    transform: none;
  }

  .final-cta__map-pulse {
    animation: none;
    opacity: 0;
  }
}

/* ==========================================================================
   Einwilligung für Google Maps (seit 19.10.2026, js/main.js „Einwilligung“).
   Nicht blockierend, unten fest. „Ablehnen“ und „Google Maps erlauben“ sind
   bewusst gleich gestaltet (gleichwertige Wahl). Drei Gestaltungen zum
   Vergleich (vergleich/einwilligung.html): A Leiste unten (Standard),
   B kompakte Karte unten links, C dunkle Asphalt-Karte unten mittig
   (<html data-consent-stil="b|c">). Bei reduzierter Bewegung ohne Einblenden.
   ========================================================================== */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: #fff;
  border-top: 1px solid var(--color-line);
  box-shadow: 0 -10px 30px rgba(20, 20, 20, 0.08);
  color: var(--color-ink);
  animation: consent-rein 0.35s ease-out both;
}

.consent[hidden] {
  display: none;
}

@keyframes consent-rein {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .consent { animation: none; }
}

.consent__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 40px;
  width: min(100% - 32px, 1240px);
  margin: 0 auto;
  padding: 18px 0;
}

.consent__titel {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 800;
  outline: none;
}

.consent__body {
  margin: 0;
  max-width: 78ch;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}

.consent__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent__status {
  margin: 6px 0 0;
  font-size: 0.8rem;
  font-weight: 700;
}

.consent__status[hidden] {
  display: none;
}

.consent__buttons {
  display: flex;
  gap: 10px;
}

.consent__btn {
  min-width: 11.5rem;
  padding: 12px 20px;
  border: 1.5px solid var(--color-ink);
  border-radius: 999px;
  background: var(--color-ink);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.consent__btn:hover {
  background: #fff;
  color: var(--color-ink);
}

.consent__btn:focus-visible,
.consent__body a:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* B: kompakte Karte unten links */
[data-consent-stil="b"] .consent {
  left: 24px;
  right: auto;
  bottom: 24px;
  width: min(440px, calc(100% - 48px));
  border: 1px solid var(--color-line);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(20, 20, 20, 0.16);
}

[data-consent-stil="b"] .consent__inner {
  grid-template-columns: minmax(0, 1fr);
  width: auto;
  padding: 22px 22px 20px;
}

[data-consent-stil="b"] .consent__buttons .consent__btn {
  flex: 1;
  min-width: 0;
}

/* C: dunkle Asphalt-Karte unten mittig (Körnung wie alle Asphaltflächen) */
[data-consent-stil="c"] .consent {
  left: 50%;
  right: auto;
  bottom: 24px;
  width: min(980px, calc(100% - 48px));
  transform: translateX(-50%);
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background-color: var(--asphalt-grund);
  background-image: var(--asphalt-korn, none);
  background-size: 640px 640px;
  color: #fff;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
  animation-name: consent-rein-c;
}

@keyframes consent-rein-c {
  from { transform: translate(-50%, 16px); opacity: 0; }
  to { transform: translateX(-50%); opacity: 1; }
}

[data-consent-stil="c"] .consent__inner {
  width: auto;
  padding: 22px 26px;
}

[data-consent-stil="c"] .consent__body {
  color: #fff;
  font-weight: 600;
}

[data-consent-stil="c"] .consent__btn {
  border-color: #fff;
  background: #fff;
  color: var(--color-ink);
}

[data-consent-stil="c"] .consent__btn:hover {
  background: transparent;
  color: #fff;
}

/* Footer: „Cookie-Einstellungen“ sieht aus wie die Links daneben */
.site-footer__legal .site-footer__consent {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-on-dark-soft);
  cursor: pointer;
}

.site-footer__legal .site-footer__consent:hover {
  color: var(--color-on-dark);
}

/* Datenschutzerklärung: Knopf „Einstellungen ändern“ */
.consent-open {
  padding: 10px 18px;
  border: 1.5px solid var(--color-ink);
  border-radius: 999px;
  background: none;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.consent-open:hover {
  background: var(--color-ink);
  color: #fff;
}

@media (max-width: 760px) {
  .consent__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 16px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .consent__body {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .consent__buttons .consent__btn {
    flex: 1;
    min-width: 0;
    padding: 11px 12px;
    white-space: normal;
    line-height: 1.25;
  }

  [data-consent-stil="b"] .consent,
  [data-consent-stil="c"] .consent {
    left: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
  }

  [data-consent-stil="c"] .consent {
    left: 50%;
  }

  [data-consent-stil="b"] .consent__inner,
  [data-consent-stil="c"] .consent__inner {
    padding: 16px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 380px) {
  .consent__buttons {
    flex-direction: column;
  }
}