/* ============================================================
   SCHWIDER GBR — Basis (gemeinsam für Grammatik A + B)
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--boden);
  color: var(--hallenweiss);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.62;
  overflow-x: hidden;
}
img,
video {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
.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;
}

/* ---------- Typo-Grundformen ---------- */
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
p {
  margin: 0;
  max-width: 66ch;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: 58ch;
  color: var(--hallenweiss);
  opacity: 0.92;
}
em {
  font-style: italic;
  color: var(--bernstein);
}
.eyebrow {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--zinn);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* ⭐ Akzent-Device "Die Fuge": 1px Zinn-Hairline mit stumpfem Bernstein-Segment */
.fuge {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--zinn);
  opacity: 0.5;
}
.fuge::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 1px;
  background: var(--bernstein);
  transition: transform 160ms var(--ease-auslauf);
}
a:hover .fuge::after,
.eyebrow:hover .fuge::after {
  transform: translateX(14px);
}

/* ---------- Nav ---------- */
.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem var(--rand);
  pointer-events: none;
}
.kopf::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background: rgba(13, 17, 15, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kante);
  pointer-events: none;
  z-index: -1;
}
/* Der Logo-Link selbst ist ebenfalls ein Flex-Kind von .kopf (kein eigener
   Klassenname) — ohne flex-shrink:0 wird ER vom Umschalter+Burger-Paar
   zusammengedrückt, wodurch das Logo darin trotz width:auto verzerrt (die
   Höhe bleibt 60px fix, die Breite schrumpft mit dem Link mit). */
.kopf > a {
  flex-shrink: 0;
}
.kopf__logo {
  height: 60px;
  width: auto;
  flex-shrink: 0;
  pointer-events: auto;
}
@media (min-width: 900px) {
  .kopf__logo {
    height: 64px;
  }
}
/* iPhone-Fix 07.09.2026 (Hardy Punkt 1). Bei 390 px endete das Logo bei
   265 px und genau dort begann .kopf__aktionen — das „GbR" klebte am
   Sonne-Symbol. 44 px Hoehe ergeben ~177 px Breite und echten Abstand. */
@media (max-width: 479px) {
  .kopf__logo {
    height: 44px;
  }
}
.kopf__nav {
  display: none;
  gap: 1.9rem;
  pointer-events: auto;
}
@media (min-width: 1080px) {
  .kopf__nav {
    display: flex;
  }
}
.kopf__nav a {
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--hallenweiss);
  opacity: 0.78;
  transition: opacity 160ms ease;
  letter-spacing: 0.01em;
}
.kopf__nav a:hover {
  opacity: 1;
}
.kopf__nav a[aria-current="page"] {
  opacity: 1;
  border-bottom: 1px solid var(--bernstein);
  padding-bottom: 2px;
}
.kopf__burger {
  pointer-events: auto;
  display: inline-flex;
  border: 1px solid var(--kante);
  background: rgba(21, 27, 24, 0.5);
  color: var(--hallenweiss);
  padding: 0.55rem 0.9rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
@media (min-width: 1080px) {
  .kopf__burger {
    display: none;
  }
}

/* ---------- Mobilmenue-Overlay (assets/js/menu.js) ----------
   .mobilnav ist ein eigenes, per JS an document.body gehaengtes Element
   (nicht die Desktop-".kopf__nav" selbst — die bleibt fuer >=1080px
   unangetastet im Header). Als Body-Kind hat das Overlay eine eigene,
   unabhaengige Stapelreihenfolge und liegt dadurch wirklich UEBER jedem
   Seiteninhalt (Hero-Eyebrow, Jahresspur-Ziffern etc.), nicht nur ueber
   dem Header. Der Header-Burger ist waehrend offen verdeckt; ein eigener
   Schliessen-Button lebt deshalb IM Overlay selbst. */
.mobilnav {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  padding: 6.5rem var(--rand) 4rem;
  background: rgba(13, 17, 15, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  /* visibility wird NICHT mitanimiert: sonst bleibt das Overlay 220 ms lang
     unsichtbar, und ein .focus() direkt nach dem Oeffnen schlaegt lautlos fehl
     (der Tastatur-Nutzer landet im Hintergrundinhalt). Beim Schliessen sorgt
     die verzoegerte visibility unten dafuer, dass das Ausblenden trotzdem sichtbar bleibt. */
  transition:
    opacity 220ms var(--ease-auslauf),
    transform 220ms var(--ease-auslauf),
    visibility 0s linear 220ms;
  pointer-events: none;
}
.mobilnav[data-offen="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  /* sofort sichtbar, damit der Fokus im selben Frame greifen kann */
  transition:
    opacity 220ms var(--ease-auslauf),
    transform 220ms var(--ease-auslauf),
    visibility 0s;
}
.mobilnav a {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 6.5vw, 2.3rem);
  color: var(--hallenweiss);
  text-decoration: none;
  opacity: 1;
}
.mobilnav a[aria-current="page"] {
  color: var(--bernstein);
}
.mobilnav-schliessen {
  position: absolute;
  top: 1.4rem;
  right: var(--rand);
  border: 1px solid var(--kante);
  background: rgba(21, 27, 24, 0.5);
  color: var(--hallenweiss);
  padding: 0.55rem 0.9rem;
  font-family: var(--f-body);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .mobilnav {
    transition:
      opacity 1ms linear,
      visibility 1ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kopf__nav {
    transition:
      opacity 1ms linear,
      visibility 1ms;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
}
.hero__band {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Der Scrim muss den Hero-Text über die GANZE Videolaufzeit tragen, nicht nur im
   ersten Frame: der Clip ist ein Dolly-in, ab ca. Sekunde 10 steht die helle
   Chromfront formatfüllend genau dort, wo die Display-Zeile liegt. Gemessen mit
   data/hero-lesbarkeit.mjs — ohne diesen kräftigeren Verlauf sinkt der Kontrast
   der weißen Zeile gegen den Hintergrund auf 1,6:1 (nötig sind 4,5:1). */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 14, 12, 0.96) 0%,
    rgba(11, 14, 12, 0.9) 22%,
    rgba(11, 14, 12, 0.66) 42%,
    rgba(11, 14, 12, 0.24) 62%,
    transparent 82%
  );
}
/* Standort-Zeile: seit 20.08.2026 im Fluss des Hero-Textblocks statt absolut
   oben rechts unter der fixen Leiste (siehe Kommentar in index.html). */
.hero__meta {
  display: block;
  margin-bottom: 0.55rem;
}
.hero__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 var(--rand) 0;
}
.hero__zeile {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-hero);
  line-height: 0.94;
  letter-spacing: -0.022em;
  margin: 0;
  /* der Anschnitt: die Zeile läuft in den Rand hinein — tiefer gesetzt
     (Härtetest R1 §9), damit sie auf der ruhigen Bodenfläche liegt statt
     auf Stoßstange/Kennzeichen des Wagens im Hero-Video. */
  color: var(--hallenweiss);
}
/* Der Anschnitt sitzt seit 20.08.2026 auf dem Auftakt-Block (Standort-Zeile +
   Schlagzeile), nicht mehr auf der Schlagzeile allein — sonst haengt die Zeile
   150 px darueber in der Luft. */
.hero__auftakt {
  transform: translateY(52%);
}
.hero__unten {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.1rem;
  padding-bottom: 2.4rem;
  margin-top: -1.2rem;
}
@media (min-width: 900px) {
  .hero__unten {
    padding-bottom: 3.2rem;
  }
}
.hero__beweis {
  max-width: 34ch;
  text-align: right;
  font-size: 0.98rem;
  color: var(--hallenweiss);
  opacity: 0.86;
}
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bernstein);
  color: var(--auf-akzent);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  padding: 0.95rem 1.7rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    transform 160ms var(--ease-auslauf),
    background 200ms ease;
}
.hero__cta:hover {
  background: var(--bernstein-hover);
}
.hero__cta:active {
  transform: scale(0.97);
}

@media (max-width: 899px) {
  .hero__band {
    height: 46vh;
    min-height: 300px;
  }
  .hero__scrim {
    background: linear-gradient(
      to top,
      rgba(11, 14, 12, 0.55) 0%,
      transparent 55%
    );
  }
  .hero__body {
    position: static;
    background: var(--boden);
    padding: 2rem var(--rand) 2.2rem;
  }
  .hero__zeile {
    font-size: clamp(2.2rem, 9.5vw, 3rem);
    line-height: 1.08;
  }
  .hero__auftakt {
    transform: none;
  }
  .hero__unten {
    align-items: flex-start;
    text-align: left;
    margin-top: 1.2rem;
    padding-bottom: 0;
  }
  .hero__beweis {
    text-align: left;
    max-width: none;
  }
  /* Der eigene Scrim von damals ist entfallen: die Zeile lag auf hellem,
     unverschattetem Video (Härtetest R1 §7) und brauchte einen Kasten. Seit
     20.08.2026 sitzt sie im dunklen Textblock — der Kasten wirkte dort wie ein
     grauer Balken. */
  .hero__meta {
    color: var(--hallenweiss);
  }
}

/* ---------- Reveal-Sicherheitsnetz (§0e-142) ----------
   Ohne JS (kein ".js" auf <html>, per Inline-Skript im <head> gesetzt)
   bleibt alles sofort sichtbar — .reveal ist nur unter ".js" animiert. */
.reveal {
  opacity: 1;
  transform: none;
}
.js .reveal {
  opacity: 0;
  transform: scale(1.055) translateY(2.2%);
  transition:
    opacity var(--dur-media) var(--ease-auslauf),
    transform var(--dur-media) var(--ease-auslauf);
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity;
}
.js .reveal.in {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.js .reveal--text {
  transform: translateY(0.42em);
  transition-duration: var(--dur-text);
}
.js .reveal--text.in {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    transform: none;
    transition: opacity 400ms ease;
  }
}

/* ---------- Sektionsrahmen ---------- */
section {
  position: relative;
}
.container {
  padding-left: var(--rand);
  padding-right: var(--rand);
}
.grund {
  background: var(--fuge);
}

/* ---------- Fakten-Leiste (S2, einzige medienlose Fläche) ---------- */
.fakten {
  min-height: 24vh;
  display: flex;
  align-items: center;
  padding: 3rem var(--rand);
}
.fakten__reihe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  width: 100%;
  border-top: 1px solid var(--kante);
  padding-top: 1.6rem;
}
.fakt {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fakt__wert {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--hallenweiss);
}
.fakt__label {
  font-size: 0.82rem;
  color: var(--zinn);
  max-width: 22ch;
}
@media (max-width: 899px) {
  .fakten__reihe {
    grid-template-columns: 1fr 1fr;
    row-gap: 2rem;
  }
}

/* ---------- Leistungen — Zeilen-Register (S4) ---------- */
.register {
  padding: 6rem 0 5rem;
}
.register__kopf {
  padding: 0 var(--rand) 3rem;
  max-width: 60ch;
}
/* Alternative Kopf-Grammatik (Härtetest R1 §4): keine Eyebrow, stattdessen
   eine an den linken Rand angeschnittene Riesenzeile ohne Kicker/Lead. */
.register__kopf--riesig {
  max-width: none;
  padding-right: 0;
}
.register__riesenzeile {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-displayL);
  line-height: 1.04;
  /* Hamada 17.08.2026: vorher -1*var(--rand) — die Zeile klebte auf x=0 und las
     sich als abgeschnitten. Jetzt ragt sie nur noch in den Rand hinein und bleibt
     vollständig lesbar. */
  margin: 0 0 0 calc(var(--rand) * -0.6);
  padding-left: 0.06em;
  max-width: 14ch;
}
.register__zeile {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: stretch;
  border-top: 1px solid var(--kante);
}
.register__zeile:last-child {
  border-bottom: 1px solid var(--kante);
}
.register__text {
  padding: 2.6rem var(--rand) 2.6rem 0;
  margin-left: var(--rand);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
}
.register__nr {
  font-family: var(--f-display);
  font-size: 0.9rem;
  color: var(--bernstein);
  letter-spacing: 0.04em;
}
.register__bild {
  position: relative;
  overflow: hidden;
  min-height: 20rem;
}
.register__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.register__bild--wort {
  background: linear-gradient(160deg, var(--fuge), var(--boden));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem clamp(1.5rem, 4vw, 3.5rem);
}
.register__bild--wort blockquote {
  margin: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.28;
  color: var(--hallenweiss);
  max-width: 22ch;
  position: relative;
}
.register__bild--wort blockquote::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 1px;
  background: var(--bernstein);
  margin-bottom: 1.4rem;
}
.register__bild--wort--worte {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  line-height: 1.3;
  color: var(--hallenweiss);
  text-align: left;
}
.register__bild--wort--worte span {
  display: block;
  color: var(--bernstein);
}
@media (max-width: 899px) {
  .register__zeile {
    grid-template-columns: 1fr;
  }
  .register__text {
    margin-left: 0;
    padding: 2.2rem var(--rand);
  }
  .register__bild {
    min-height: 16rem;
  }
}

/* ---------- Suchauftrag / Formular (S6) ---------- */
.suchauftrag {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.suchauftrag__bahn {
  position: absolute;
  inset: 0;
}
.suchauftrag__bahn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.suchauftrag__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(11, 14, 12, 0.94) 0%,
    rgba(11, 14, 12, 0.82) 42%,
    rgba(11, 14, 12, 0.28) 78%,
    transparent 100%
  );
}
.suchauftrag__inhalt {
  position: relative;
  z-index: 2;
  padding: 4.5rem var(--rand);
  max-width: 42rem;
  color: var(--hallenweiss);
}
.formular {
  margin-top: 2.4rem;
  display: grid;
  gap: 1rem;
}
.formular__reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) {
  .formular__reihe {
    grid-template-columns: 1fr;
  }
}
.formular label {
  font-size: 0.78rem;
  color: var(--zinn);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  display: block;
  margin-bottom: 0.4rem;
}
.formular input,
.formular select,
.formular textarea {
  width: 100%;
  background: rgba(233, 234, 229, 0.04);
  border: 1px solid var(--kante);
  color: var(--hallenweiss);
  font-family: var(--f-body);
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  transition: border-color 160ms ease;
}
.formular input:focus,
.formular select:focus,
.formular textarea:focus {
  outline: none;
  border-color: var(--bernstein);
}
.formular input:focus-visible,
.formular select:focus-visible,
.formular textarea:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--bernstein);
  outline-offset: 2px;
}
.formular textarea {
  min-height: 7rem;
  resize: vertical;
}
.formular__einwilligung {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--zinn);
}
.formular__einwilligung input {
  width: auto;
  margin-top: 0.2rem;
}
.formular__zeile {
  position: absolute;
  left: -9999px;
}
.formular__status {
  font-size: 0.85rem;
  min-height: 1.2rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--bernstein);
  color: var(--auf-akzent);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.95rem 1.7rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    transform 160ms var(--ease-auslauf),
    background 200ms ease;
  width: fit-content;
}
.btn:hover {
  background: var(--bernstein-hover);
}
.btn:active {
  transform: scale(0.97);
}
.btn--ghost {
  background: transparent;
  color: var(--hallenweiss);
  border: 1px solid var(--kante);
}
.btn--ghost:hover {
  border-color: var(--zinn);
  background: rgba(233, 234, 229, 0.04);
}

/* ---------- Kontakt (S7) ---------- */
.kontakt {
  padding: 5.5rem 0 6rem;
}
.kontakt__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 0;
}
.kontakt__info {
  padding: 0 var(--rand) 0 var(--rand);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
}
.kontakt__zeile {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.95rem;
}
.kontakt__zeile a {
  text-decoration: none;
  color: var(--hallenweiss);
}
.kontakt__zeile a:hover {
  color: var(--bernstein);
}
/* Eingangsbereich direkt bei den Kontaktdaten (Hardy 04.09.2026, Punkt 5:
   „Bei Kontakdaten möchte er ein Bild vom Eingangsbereich mit eingesetzt
   haben."). Bewusst IM Info-Block und nicht in der grossen Bildspalte — wer
   die Adresse liest, soll im selben Blick sehen, wo er hineingeht. */
.kontakt__eingang {
  margin: 0;
  max-width: 26rem;
}
.kontakt__eingang img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.kontakt__eingang figcaption {
  margin-top: 0.55rem;
  font-family: var(--f-body);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.72;
}
.kontakt__bild {
  position: relative;
  min-height: 22rem;
  overflow: hidden;
}
.kontakt__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Marginalie an der Bildkante statt Eyebrow-Kicker über der H2
   (Härtetest R1 §4) — dieselbe Grammatik wie .jahresspur__marginalie. */
.kontakt__marginalie {
  position: absolute;
  left: 1.4rem;
  bottom: 1.4rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--hallenweiss);
  padding: 0.5rem 0.9rem;
  background: linear-gradient(to top, rgba(11, 14, 12, 0.86), transparent 90%);
}
@media (max-width: 899px) {
  .kontakt__grid {
    grid-template-columns: 1fr;
  }
  .kontakt__info {
    padding: 0 var(--rand) 2.4rem;
  }
  .kontakt__bild {
    min-height: 16rem;
  }
}

/* ---------- Schwebender Anruf-Button (§0e-80/83) ----------
   Bleibt bis 1 Bildschirmhoehe unsichtbar (Skript setzt die Sichtbar-Klasse
   ab scrollY > 100vh) — sonst ueberlappt sie im Hero den Haupt-CTA
   "Fahrzeug anfragen" (Haertetest R1 Paragraf 3). */
.anruf-fab {
  position: fixed;
  right: var(--rand);
  bottom: 1.4rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--bernstein);
  color: var(--auf-akzent);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.86rem;
  padding: 0.85rem 1.3rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 200ms var(--ease-auslauf),
    transform 200ms var(--ease-auslauf),
    background 200ms ease;
}
.anruf-fab.ist-sichtbar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.anruf-fab:hover {
  background: var(--bernstein-hover);
}
.anruf-fab:active {
  transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
  .anruf-fab {
    transition: opacity 160ms ease;
    transform: none;
  }
}
.anruf-fab__icon {
  font-size: 1rem;
  line-height: 1;
}
/* 07.09.2026 — iPhone-Fix, gleicher Befund wie in der Basic-Fassung:
   Diese Regel stammt aus der Zeit, als der Knopf auf Mobil eine runde Pille
   war. Seit er unter 900 px eine Leiste ueber die volle Breite ist, ergab sie
   auf dem iPhone einen 390 px breiten bernsteinfarbenen Balken mit einem
   einzelnen Hoerer-Zeichen und ohne Wort. Ersatzlos raus. */
.anruf-fab span.anruf-fab__text {
  white-space: nowrap;
}

/* ---------- Fuß ---------- */
.fuss {
  border-top: 1px solid var(--kante);
  padding: 3rem var(--rand) 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 3rem;
  justify-content: space-between;
  align-items: flex-end;
}
.fuss__logo {
  height: 34px;
  opacity: 0.85;
}
.fuss__spalte {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: var(--zinn);
}
.fuss__spalte a {
  text-decoration: none;
  color: var(--zinn);
}
.fuss__spalte a:hover {
  color: var(--hallenweiss);
}
.fuss__rechte {
  font-size: 0.76rem;
  color: var(--zinn);
  width: 100%;
  padding-top: 1.6rem;
  border-top: 1px solid var(--kante);
  margin-top: 1rem;
}

/* ---------- Anruf-Button: auf Mobil eine Leiste, keine schwebende Pille ----------
   Befund Fremd-Blick Runde 6 + data/fixed-kollision.mjs: eine in der Ecke klebende
   Pille verdeckt auf 390 px zwangsläufig Fließtext — dort läuft der Text bis an den
   Rand, es gibt keine freie Ecke. Auf der Kontaktseite lag sie sogar über der
   Telefonnummer, die sie selbst anbietet.
   Lösung: unter 900 px wird aus der Pille eine Leiste am unteren Rand über die volle
   Breite, und der Body bekommt exakt deren Höhe als Innenabstand. Damit kann sie
   nichts mehr überdecken — sie nimmt sich ihren eigenen Platz.
   Auf Desktop bleibt die Pille (dort endet der Textkörper vor der Ecke), zusätzlich
   weicht sie über assets/js/anruf-fab.js Formularen, Kontaktdaten und Fußzeile aus. */
@media (max-width: 899px) {
  :root {
    --fab-leiste: 3.5rem;
  }
  body {
    padding-bottom: var(--fab-leiste);
  }
  .anruf-fab {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--fab-leiste);
    justify-content: center;
    border-radius: 0;
    padding: 0 1rem;
    font-size: 0.95rem;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.28);
    transform: translateY(100%);
  }
  .anruf-fab.ist-sichtbar {
    transform: none;
  }
}