/* =====================================================================
   AUTOWELT BODENSEE — style.css (foundation)
   Design-Richtung „Klare Kante": strikt monochrom, Radius 0, typografisch
   getragen. Dunkel (#0B0B0C) ist die Grundfläche, #F4F4F2 die Kontrast-
   fläche, „Akzent" ist die Invertierungs-Mechanik (weiß↔schwarz).

   KOMPONENTEN-INVENTAR (Klassen = Wahrheit, Seiten bauen NUR hieraus)
   ---------------------------------------------------------------------
   Basis / Utilities
     .container            zentrierter Seitencontainer (max 76rem)
     .container--narrow    Lesespalte (max 65ch)
     .section              Sektions-Padding vertikal
     .section--light       helle Kontrastfläche #F4F4F2 (flippt Kontext-Tokens)
     .section--band        Band mit Hairline oben/unten (Stats), Kontext frei wählbar
     .section--flush       Sektion ohne vertikales Padding
     .grid / .grid--2 / .grid--3   simple Grids, kollabieren mobil
     .split / .split--flip / .split__half / .split__half--light
                           60/40-Split (An & Verkauf-Motiv), nie 50/50
     .label                Mono-Label-Ebene (Versalien, gesperrt, grau)
     .lead                 größerer Einleitungsabsatz
     .sr-only              nur für Screenreader
     .skip-link            Sprunglink zum Inhalt
     [data-reveal-hidden] / [data-reveal-shown]
                           Reveal-on-scroll je Sektion (gestaffelt, app.js)
   Header / Navigation
     .site-header / .site-header__inner / .site-header__brand
     .site-nav / .site-nav__panel / .site-nav__list / .site-nav__link
     .site-nav__cta        Header-CTA „Fahrzeug verkaufen"
     .nav-meta             Adresse/Kontakt/Social im mobilen Drawer
     .nav-meta__brand / __address / __hours / __label
     .nav-meta__contact / __icon / __social
     .nav-toggle / .nav-toggle__box   Mobile-Toggle (aria-expanded)
   Buttons
     .btn                  Grundform (Versalien, Radius 0)
     .btn--primary         invertiert: weiß-auf-dunkel / schwarz-auf-hell,
                           Hover = Invertierungs-Tausch
     .btn--secondary       Outline-Variante
     .btn--sm / .btn--block
   Wortmarken-Kopf (Signature)
     .section-head         Headline + wachsender Balken + graue Subline
     .section-head--display  Hero-XXL (Roboto Condensed, clamp bis 9rem)
     .section-head--page   Seiten-H1 (Condensed, kleinere Skala)
     .section-head--center zentrierte Variante
     .section-head__kicker / .section-head__title
     .section-head__sub
   Sektion mit Hintergrundbild (Parallax)
     .section--media       Bild-Sektion, kappt den ueberstehenden Hintergrund
     .section__bg          Bildebene (wird von app.js verschoben)
     .section__scrim       Abdunklung fuer Textkontrast
   Cards (Bestand)
     .card                 Radius 0, Hairline-Rand, Hover = Voll-Invertierung
     .card__media / .card__media-ph / .card__body / .card__title
     .card__meta / .card__price / .card__specs / .card__link
   Akkordeon / FAQ
     .accordion / .accordion__item (.is-open) / .accordion__heading
     .accordion__trigger / .accordion__icon / .accordion__panel
   Formulare
     .form / .form__row / .field / .field--check / .field__label
     .form__note / .form__error / .form-success
     .hp-field             Honeypot (visually hidden, NIE display:none)
     .form altcha-widget   ALTCHA unsichtbar (läuft auto onload)
   Stats-Band
     .stats / .stat / .stat__value [data-count] / .stat__label
   Linkliste (/links)
     .lt-wrap / .linktree / .lt-logo / .lt-name / .lt-tagline
     .lt-links / .lt-link (+--primary) / .lt-link__icon
     .lt-foot / .lt-foot__btn
   Footer
     .site-footer / .footer-grid / .footer-brand / .footer-col
     .footer-col__title / .footer-nap / .footer-hours / .footer-social / .footer-bottom
     .footer-legal / .footer-linkbtn (Cookie-Einstellungen)
   Consent (Prefix .cc-, CSS+JS komplett in consent.js)
     Banner/Toggles/Buttons bringt consent.js als eigenes <style> mit.
     Hier nur der Footer-Opener (.footer-linkbtn, data-cc-open) und die
     Groessenregeln fuer den Maps-Platzhalter .cc-embed-ph in
     styles/p-index.css + styles/p-kontakt.css.
   Inception-Badge
     .inception / .inception__logo / .inception__preview
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. @font-face — self-hosted, DSGVO-konform                          */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/roboto-condensed-v31-latin-900.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/roboto-v51-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/roboto-v51-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/roboto-v51-latin-900.woff2") format("woff2");
}

/* ------------------------------------------------------------------ */
/* 2. :root Tokens                                                     */
/* ------------------------------------------------------------------ */

:root {
  /* Palette — strikt monochrom (brand.md, bindend) */
  --color-ink: #0B0B0C;          /* dominante Fläche + Text auf hell */
  --color-paper: #FFFFFF;        /* Text/Logo auf dunkel, CTA-Fläche */
  --color-light: #F4F4F2;        /* helle Kontrastsektionen */
  --color-grey: #9CA0A4;         /* NUR Sekundärtext, Hairlines, Ränder */
  --color-body-dark: #E8E8E6;    /* Fließtext auf dunkel (Floor ≥ #C0C0C0) */
  --color-body-light: #444444;   /* Fließtext/Sekundär auf hell (Floor ≤ #444444) */

  /* Kontext-Tokens: Standard = dunkle Fläche. .section--light flippt sie. */
  --ctx-surface: var(--color-ink);
  --ctx-ink: var(--color-paper);
  --ctx-body: var(--color-body-dark);
  --ctx-muted: var(--color-grey);
  --ctx-hairline: rgba(156, 160, 164, 0.4);
  --ctx-invert-surface: var(--color-paper);
  --ctx-invert-ink: var(--color-ink);
  --ctx-invert-body: var(--color-body-light);
  --ctx-invert-muted: var(--color-body-light);
  --ctx-invert-hairline: rgba(11, 11, 12, 0.25);

  /* Typo-Skala */
  --font-display: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(3.25rem, 8.5vw, 9rem);
  --fs-h1: clamp(2.75rem, 6vw, 5.25rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 3rem);
  --fs-h3: clamp(1.2rem, 1.8vw, 1.45rem);
  --fs-stat: clamp(2.75rem, 5.5vw, 4.75rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;
  --lh-display: 1.08;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --track-label: 0.1em;

  /* Spacing-Scale — alle Abstände hieraus, kein Ad-hoc-Padding */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --section-pad: clamp(4.5rem, 9vw, 7.5rem);

  /* Layout */
  --container-max: 76rem;
  --container-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --nav-height: 4.5rem;
  --header-height: var(--nav-height);

  /* Radius: exakt 0 überall (Brand-Brief) */
  --radius: 0;

  color-scheme: dark;
}

/* Heller Kontext: flippt alle Kontext-Tokens */
.section--light,
.split__half--light {
  --ctx-surface: var(--color-light);
  --ctx-ink: var(--color-ink);
  --ctx-body: var(--color-body-light);
  --ctx-muted: var(--color-body-light);
  --ctx-hairline: rgba(11, 11, 12, 0.25);
  --ctx-invert-surface: var(--color-ink);
  --ctx-invert-ink: var(--color-paper);
  --ctx-invert-body: var(--color-body-dark);
  --ctx-invert-muted: var(--color-grey);
  --ctx-invert-hairline: rgba(156, 160, 164, 0.4);
  color-scheme: light;
}

/* ------------------------------------------------------------------ */
/* 3. Reset                                                            */
/* ------------------------------------------------------------------ */

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

* {
  margin: 0;
}

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--color-ink);
  color: var(--ctx-body);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

input,
button,
textarea,
select {
  font: inherit;
  border-radius: 0;
}

button {
  cursor: pointer;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

address {
  font-style: normal;
}

::selection {
  background: var(--color-paper);
  color: var(--color-ink);
}

.section--light ::selection,
.split__half--light ::selection {
  background: var(--color-ink);
  color: var(--color-paper);
}

/* Sichtbarer Fokus — überall, kontextsensitiv */
:focus-visible {
  outline: 2px solid var(--ctx-ink);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* 4. Typografie                                                       */
/* ------------------------------------------------------------------ */

h1,
h2,
h3,
h4 {
  font-family: var(--font-body);
  font-weight: 900;
  text-transform: uppercase;
  line-height: var(--lh-heading);
  color: var(--ctx-ink);
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-body);
}

p {
  max-width: 65ch;
}

p + p {
  margin-top: var(--space-sm);
}

a {
  color: var(--ctx-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

strong {
  font-weight: 500;
  color: var(--ctx-ink);
}

.label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ctx-muted);
}

.lead {
  font-size: clamp(1.125rem, 1.8vw, 1.3125rem);
  line-height: 1.55;
  max-width: 60ch;
}

/* ------------------------------------------------------------------ */
/* 5. Layout-Utilities                                                 */
/* ------------------------------------------------------------------ */

.container {
  width: min(100% - 2 * var(--container-gutter), var(--container-max));
  margin-inline: auto;
}

/* Mobil schmalerer Seitenrand: 12 px statt 20 px. Als Token gesetzt, damit
   Header, Consent-Banner und randlose Sektionen automatisch mitziehen. */
@media (max-width: 47.9375em) {
  :root {
    --container-gutter: 0.75rem;
  }
}

.container--narrow {
  max-width: 65ch;
}

.section {
  padding-block: var(--section-pad);
  background: var(--ctx-surface);
  color: var(--ctx-body);
}

.section--flush {
  padding-block: 0;
}

.section--band {
  border-top: 1px solid var(--ctx-hairline);
  border-bottom: 1px solid var(--ctx-hairline);
}

.grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 40em) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 56.25em) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* An & Verkauf-Split: 60/40, Kante hart, nie 50/50 */
.split {
  display: grid;
  grid-template-columns: 1fr;
}

.split__half {
  background: var(--ctx-surface);
  color: var(--ctx-body);
  padding: var(--section-pad) var(--container-gutter);
}

@media (min-width: 56.25em) {
  .split {
    grid-template-columns: 3fr 2fr;
  }

  .split--flip {
    grid-template-columns: 2fr 3fr;
  }

  .split__half {
    padding-inline: clamp(2rem, 5vw, 4.5rem);
  }
}

/* Manueller Umbruch, der erst ab Desktop greift — auf schmalen Viewports
   soll der Fließtext frei umbrechen */
.br-desktop {
  display: none;
}

@media (min-width: 56.25em) {
  .br-desktop {
    display: inline;
  }
}

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 2000;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-paper);
  color: var(--color-ink);
  font-weight: 500;
  text-decoration: none;
}

.skip-link:focus-visible {
  top: var(--space-sm);
  outline-color: var(--color-paper);
}

/* Reveal-on-scroll (Pattern nach osmo.supply/elements-reveal-on-scroll, hier
   vanilla statt GSAP/ScrollTrigger). app.js sammelt je Sektion die direkten
   Kinder als Gruppe und blendet sie beim Eintritt nacheinander ein.
   Wichtig: versteckt wird NUR, was beim Laden unterhalb der Falz liegt —
   sichtbarer Inhalt bleibt sichtbar (kein Aufblitzen, und bei einem
   JS-Fehler bleibt die Seite lesbar).
     [data-reveal-hidden]  Startzustand (von app.js gesetzt)
     [data-reveal-shown]   Zielzustand
     --reveal-distance     Versatz, Vorgabe 2em (data-distance ueberschreibt)
     data-stagger          Abstand der Kinder in ms, Vorgabe 100 */
[data-reveal-hidden] {
  opacity: 0;
  transform: translateY(var(--reveal-distance, 2em));
}

[data-reveal-shown] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  [data-reveal-shown] {
    /* 0.8s power4.inOut wie in der Vorlage */
    transition: opacity 0.8s cubic-bezier(0.76, 0, 0.24, 1),
                transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
  }
}

/* ------------------------------------------------------------------ */
/* 6. Header + Navigation                                              */
/* ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-ink);
  border-bottom: 1px solid rgba(156, 160, 164, 0.28);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--nav-height);
}

.site-header__brand {
  display: block;
  flex: none;
}

.site-header__brand img {
  height: 44px;
  width: auto;
}

.site-nav__panel {
  display: none;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.site-nav__link {
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-paper);
  text-decoration: none;
  padding-block: var(--space-3xs);
  border-bottom: 2px solid transparent;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  border-bottom-color: var(--color-paper);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid rgba(156, 160, 164, 0.4);
  color: var(--color-paper);
}

.nav-toggle__box {
  display: block;
  width: 18px;
}

.nav-toggle__box span {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle__box span + span {
  margin-top: 4px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile: Panel unter dem Header, gleiche Fläche, harte Kante */
.site-nav.is-open .site-nav__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--space-md) var(--container-gutter) var(--space-lg);
  background: var(--color-ink);
  border-bottom: 1px solid rgba(156, 160, 164, 0.28);
  /* Das Panel haengt am sticky Header. Ohne Begrenzung ragt es auf kurzen
     Displays unter die Falz und der untere Teil (Kontakt, Social) waere gar
     nicht erreichbar — deshalb hier scrollen statt ueberlaufen.
     dvh statt vh: beruecksichtigt die ein- und ausfahrende Browserleiste. */
  max-height: calc(100vh - var(--header-height));
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  /* Am Ende der Liste nicht in den Seiten-Scroll durchrutschen. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Mobiles Menue: Adresse, Zeiten, Kontaktwege und Social unter der Navigation
   (Vorbild paulmobile.de). Erscheint nur im aufgeklappten Drawer; ab 56.25em
   ist der Block ausgeblendet, dort tragen Header und Footer diese Angaben. */
.nav-meta {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-xs);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(156, 160, 164, 0.28);
  font-size: var(--fs-small);
  line-height: var(--lh-normal, 1.55);
  color: var(--color-grey);
}

.nav-meta p {
  margin: 0;
}

.nav-meta__brand {
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-paper);
}

/* Wie .nav-meta__label + Zeiten: Name und Adresse als ein Block, nicht zwei
   Raster-Zellen mit vollem Abstand. */
.nav-meta__brand + .nav-meta__address {
  margin-top: calc(-1 * var(--space-md));
}

.nav-meta__label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-paper);
}

.nav-meta__contact {
  display: grid;
  gap: var(--space-sm);
}

.nav-meta__contact a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-paper);
  text-decoration: none;
}

.nav-meta__contact a:hover,
.nav-meta__contact a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.nav-meta__icon {
  flex: none;
  width: 18px;
  height: 18px;
}

.nav-meta__social {
  display: flex;
  gap: var(--space-sm);
}

.nav-meta__social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(156, 160, 164, 0.4);
  color: var(--color-paper);
}

.nav-meta__social a:hover,
.nav-meta__social a:focus-visible {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
}

.nav-meta__social svg {
  width: 20px;
  height: 20px;
}

@media (min-width: 56.25em) {
  .nav-toggle {
    display: none;
  }

  .nav-meta {
    display: none;
  }

  .site-nav__panel,
  .site-nav.is-open .site-nav__panel {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
    padding: 0;
    border: 0;
    /* zuruecksetzen, falls das Menue mobil geoeffnet und dann gedreht wird */
    max-height: none;
    overflow: visible;
  }

  .site-nav__list {
    flex-direction: row;
    gap: var(--space-md);
  }
}

/* ------------------------------------------------------------------ */
/* 7. Buttons — Akzent = Invertierung                                  */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.95rem 1.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease;
}

.btn--primary {
  background: var(--ctx-invert-surface);
  color: var(--ctx-invert-ink);
  border-color: var(--ctx-invert-surface);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--ctx-surface);
  color: var(--ctx-ink);
  border-color: var(--ctx-ink);
}

.btn--secondary {
  background: transparent;
  color: var(--ctx-ink);
  border-color: var(--ctx-ink);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--ctx-ink);
  color: var(--ctx-surface);
}

.btn--sm,
.site-nav__cta {
  padding: 0.7rem 1.25rem;
}

.btn--block {
  width: 100%;
}

/* ------------------------------------------------------------------ */
/* 8. Wortmarken-Kopf (Signature)                                      */
/* ------------------------------------------------------------------ */

/* Eine Regel für alle Köpfe: Der Balken ist immer so breit wie die gerenderte
   Headline (bei mehrzeiligen Headlines wie die breiteste Zeile), nie so breit
   wie der Container. Umsetzung: Titel und Balken teilen sich eine
   max-content-Spur; Kicker und Subline spannen über beide Spuren und
   beeinflussen die Spurbreite nicht (Spanning über eine flexible Spur). */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  max-width: 100%;
}

.section-head > * {
  grid-column: 1 / -1;
}

.section-head > .section-head__title {
  grid-column: 1;
}

.section-head__kicker {
  display: block;
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ctx-muted);
  margin-bottom: var(--space-sm);
}

.section-head__title {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  text-transform: uppercase;
  color: var(--ctx-ink);
}

.section-head--display .section-head__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: 0;
}

.section-head--page .section-head__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: 0;
}

/* Balken unter Headlines: abgeschaltet (kein Unterstrich als Designelement) */
.section-head__bar {
  display: none;
}

.section-head__sub {
  margin-top: var(--space-sm);
  color: var(--ctx-muted);
  max-width: 65ch;
}

.section-head--center {
  text-align: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
}

.section-head--center > .section-head__title {
  grid-column: 2;
}

.section-head--center .section-head__sub {
  margin-inline: auto;
}

/* ------------------------------------------------------------------ */
/* 8b. Sektion mit Hintergrundbild + Parallax                          */
/* ------------------------------------------------------------------ */

/* Verwendung:
     <section class="section section--media" data-parallax>
       <div class="section__bg" style="background-image:url(/images/hof.webp)"></div>
       <div class="section__scrim"></div>
       <div class="container"> … Inhalt … </div>
     </section>
   app.js verschiebt .section__bg beim Scrollen (translate3d), sodass das Bild
   langsamer laeuft als die Seite. --parallax-speed = scheinbare Geschwindigkeit
   des Bildes (1 = laeuft mit, 0 = steht fest); 0.45 entspricht der Vorlage.
   Der Ueberstand, den das Bild dafuer braucht, wird von app.js als
   --parallax-overflow gesetzt; overflow: clip haelt ihn in der Sektion. */
.section--media {
  position: relative;
  isolation: isolate;
  overflow: clip;
  --parallax-speed: 0.45;
}

/* Parallax und Bildschaerfe haengen auf schmalen Viewports zusammen: der
   Ueberstand streckt die Bildbox in der HOEHE, der Browser waehlt die Datei
   aber nach BREITE (sizes). Ein Querformat-Foto in einer hohen schmalen Box
   wird deshalb schon ohne Parallax hochskaliert (gemessen 1.61x bei 375 px),
   mit Parallax entsprechend mehr (0.9 -> 2.00x, 0.8 -> 2.35x).
   Daher unter 64em standardmaessig aus (speed 1 = keine Bewegung, kein
   Ueberstand) — genau das Verhalten von vorher. */
/* Bewusst [data-parallax] und nicht .section--media: die Startseite nutzt
   .hero ohne .section--media, waere sonst nicht erfasst und liefe auf dem
   Handy mit dem JS-Default 0.45 — genau die Unschaerfe, die das hier
   verhindern soll. Selektor deckt sich mit dem, den app.js abfragt. */
@media (max-width: 63.99em) {
  [data-parallax] {
    --parallax-speed: 1;
  }
}

/* Opt-in fuer Sektionen, die eine Hochformat-Ableitung mitbringen: dort passt
   die Datei zur hohen Box, die Parallax kostet keine Schaerfe (gemessen 0.89x
   bei 375 px / DPR 3). Bewusst dezent — volle Desktop-Staerke (0.45) wurde
   getestet und wieder verworfen: sie braucht einen 1:4-Zuschnitt, und der sah
   als schmaler Streifen schlecht aus. Nur bis 47.99em — darueber wuerde der
   1:2-Zuschnitt seitlich zu stark beschnitten.
   .ankauf-hero kam zuletzt dazu: die Sektion ist auf dem Handy rund 1430 px
   hoch (sie traegt das ganze Formular), das Bild steht dort aber nur im oberen
   Band von 30rem — siehe p-ankauf.css. Damit ist die Bildbox 1:1.9 statt 1:4.5
   und der Zuschnitt passt wie bei den anderen. */
@media (max-width: 47.99em) {
  .hero,
  .home-brands,
  .ankauf-hero,
  .about-hero {
    --parallax-speed: 0.9;
  }
}

.section--media > .section__bg {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--parallax-overflow, 0px) * -0.5);
  bottom: calc(var(--parallax-overflow, 0px) * -0.5);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
  z-index: -2;
}

/* Variante fuer Sektionen, deren Bild ein echtes <img> ist (Hero: srcset,
   alt und fetchpriority sollen erhalten bleiben, deshalb kein CSS-Background).
   Das Element muss absolut positioniert und mit object-fit: cover gesetzt
   sein; hier kommt nur der Ueberstand plus die Verschiebung dazu. */
/* Zwei Klassen tief selektiert (nicht nur [data-parallax-layer]): die
   Seiten-CSS setzt fuer das Hero-Bild inset: 0 und height: 100%: bei
   gleicher Spezifitaet gewaenne sie, weil sie spaeter geladen wird — das
   Bild haette dann keinen Ueberstand und der Versatz risse eine Luecke. */
[data-parallax] [data-parallax-layer] {
  top: calc(var(--parallax-overflow, 0px) * -0.5);
  bottom: auto;
  /* Explizite Hoehe statt auto: bei einem <img> loest height: auto die
     INTRINSISCHE Hoehe auf (Seitenverhaeltnis), nicht den Abstand zwischen
     top und bottom — das Bild waere zu kurz und unten risse eine Luecke. */
  height: calc(100% + var(--parallax-overflow, 0px));
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-parallax] [data-parallax-layer] {
    top: 0;
    height: 100%;
    transform: none;
  }
}

/* Scrim: Bilder tragen Text nur mit Abdunklung sicher ueber die Kontrastgrenze. */
.section--media > .section__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-ink);
  opacity: 0.62;
  z-index: -1;
}

/* Auf Bild-Sektionen steht Text immer auf Dunkel. */
.section--media {
  --ctx-ink: var(--color-paper);
  --ctx-body: var(--color-paper);
  --ctx-muted: var(--color-grey);
  color: var(--ctx-body);
}

@media (prefers-reduced-motion: reduce) {
  .section--media > .section__bg {
    transform: none;
    inset-block: 0;
  }
}

/* ------------------------------------------------------------------ */
/* 9. Cards — Hover = Voll-Invertierung, keine box-shadow              */
/* ------------------------------------------------------------------ */

.card {
  --card-ink: var(--ctx-ink);
  --card-body: var(--ctx-body);
  --card-muted: var(--ctx-muted);
  --card-hairline: var(--ctx-hairline);
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  color: var(--card-body);
  border: 1px solid var(--ctx-hairline);
  transition: background-color 0.22s ease, border-color 0.22s ease,
    color 0.22s ease;
}

.card:hover,
.card:focus-within {
  --card-ink: var(--ctx-invert-ink);
  --card-body: var(--ctx-invert-body);
  --card-muted: var(--ctx-invert-muted);
  --card-hairline: var(--ctx-invert-hairline);
  background: var(--ctx-invert-surface);
  border-color: var(--ctx-invert-surface);
}

.card__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Typografischer Platzhalter, solange kein Foto existiert */
.card__media-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--ctx-surface);
  border-bottom: 1px solid var(--card-hairline);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3rem;
  color: var(--ctx-muted);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1;
  padding: var(--space-md);
}

.card__title {
  font-size: 1.125rem;
  color: var(--card-ink);
}

.card__body p {
  color: var(--card-body);
}

.card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--card-hairline);
}

.card__price {
  font-weight: 900;
  font-size: 1.125rem;
  color: var(--card-ink);
  white-space: nowrap;
}

.card__specs {
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--card-muted);
}

/* Karte als Ganzes verlinkt */
.card__link {
  color: var(--card-ink);
  text-decoration: none;
}

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ------------------------------------------------------------------ */
/* 10. Akkordeon / FAQ                                                 */
/* ------------------------------------------------------------------ */

.accordion {
  border-bottom: 1px solid var(--ctx-hairline);
}

.accordion__item {
  border-top: 1px solid var(--ctx-hairline);
  border-left: 3px solid transparent;
  padding-left: var(--space-sm);
  transition: border-color 0.2s ease;
}

.accordion__item.is-open {
  border-left-color: var(--ctx-ink);
}

/* h2/h3-Wrapper um den Trigger: neutralisiert Heading-Styles */
.accordion__heading {
  margin: 0;
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: 1.15rem 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ctx-ink);
}

.accordion__icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.2s ease;
}

.accordion__icon::before {
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
}

.accordion__icon::after {
  top: 0;
  bottom: 0;
  left: 6px;
  width: 2px;
}

.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: scaleY(0);
}

.accordion__panel {
  padding: 0 0 var(--space-md);
  color: var(--ctx-body);
}

.accordion__panel[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ */
/* 11. Formulare                                                       */
/* ------------------------------------------------------------------ */

.form {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 40em) {
  .form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.field__label {
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ctx-ink);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.8rem 1rem;
  background: transparent;
  border: 1px solid var(--ctx-muted);
  color: var(--ctx-ink);
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  border-color: var(--ctx-ink);
}

.field ::placeholder {
  color: var(--ctx-muted);
  opacity: 1;
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.field--check input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.25rem;
  accent-color: var(--ctx-ink);
  flex: none;
}

.field--check label {
  font-size: var(--fs-small);
  color: var(--ctx-body);
}

.form__note {
  font-size: var(--fs-small);
  color: var(--ctx-muted);
}

.form__error {
  font-weight: 500;
  color: var(--ctx-ink);
  border-left: 3px solid var(--ctx-ink);
  padding-left: var(--space-xs);
}

.form-success {
  padding: var(--space-lg);
  border: 1px solid var(--ctx-hairline);
  border-left: 3px solid var(--ctx-ink);
}

.form-success:focus-visible {
  outline-offset: 0;
}

/* Honeypot: visuell versteckt, NIE display:none (Template verbatim) */
.hp-field {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ALTCHA laeuft unsichtbar: der Proof-of-Work wird automatisch beim Laden
   geloest (auto="onload") und braucht keine Nutzer-Interaktion. Das Element
   bleibt im DOM (nur visuell versteckt, nicht display:none), damit der Worker
   weiterlaeuft und die Loesung liefert. */
.form altcha-widget {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* 12. Stats-Band „Zahlen statt Floskeln"                              */
/* ------------------------------------------------------------------ */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.stat {
  text-align: center;
}

/* Mobil 2×2: Kreuz in der Mitte, keine Hairline am linken Außenrand. */
@media (max-width: 56.24em) {
  .stats {
    gap: 0;
  }

  .stat {
    padding: var(--space-md) var(--space-sm);
  }

  .stat:nth-child(odd) {
    border-right: 1px solid var(--ctx-hairline);
  }

  .stat:nth-child(-n + 2) {
    border-bottom: 1px solid var(--ctx-hairline);
  }

  /* Untere Reihe: Bestand links, Kundenzahl rechts — Hairline folgt der
     visuellen Position, nicht der DOM-Reihenfolge. */
  .stat:nth-child(3) {
    order: 4;
    border-right: none;
  }

  .stat:nth-child(4) {
    order: 3;
    border-right: 1px solid var(--ctx-hairline);
  }
}

@media (min-width: 56.25em) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg) var(--space-md);
  }

  /* Desktop-Reihe: Hairline trennt, rahmt nicht. Erstes Feld ohne linke Kante,
     Innenpolster bleibt für gleiche Zentrierung. */
  .stat {
    padding-left: var(--space-sm);
    border-left: 1px solid var(--ctx-hairline);
  }

  .stat:first-child {
    border-left-color: transparent;
  }
}

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--ctx-ink);
}

.stat__label {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ctx-muted);
}

/* ------------------------------------------------------------------ */
/* 13. Linktree (/links)                                               */
/* ------------------------------------------------------------------ */
/* Eigenstaendige Seite ohne Header und Footer: sie wird aus Social-Bios
   heraus aufgerufen, wo Navigation nur ablenkt. Aufbau wie auf
   paulmobile.de/links (Logo, Name, Tagline, gestapelte Buttons), aber in
   der monochromen Sprache dieser Site: keine Emojis, sondern dieselben
   SVG-Icons wie in Header und Footer, und eckige Flaechen (--radius: 0). */

.lt-wrap {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl) var(--container-gutter);
  background: var(--color-ink);
}

.linktree {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  text-align: center;
}

.lt-logo {
  display: block;
  width: 15rem;
  max-width: 70%;
  height: auto;
  margin: 0 auto var(--space-md);
}

.lt-name {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 6vw, 2rem);
  line-height: var(--lh-heading);
  color: var(--color-paper);
  margin: 0;
}

.lt-tagline {
  margin: var(--space-2xs) 0 0;
  color: var(--color-body-dark);
  font-size: var(--fs-small);
}

.lt-links {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.lt-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 1rem 1.25rem;
  border: 1px solid var(--ctx-hairline);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease;
}

/* Der erste Eintrag (Anrufen) traegt die Hauptaktion. Monochrom gibt es
   keine Akzentfarbe — die Hierarchie entsteht ueber gefuellt vs. umrandet. */
.lt-link--primary {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
}

.lt-link:hover,
.lt-link:focus-visible {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
}

.lt-link--primary:hover,
.lt-link--primary:focus-visible {
  background: transparent;
  color: var(--color-paper);
}

.lt-link__icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}

.lt-foot {
  margin-top: var(--space-lg);
  font-size: var(--fs-label);
  line-height: 2;
  color: var(--color-grey);
}

.lt-foot p {
  margin: 0;
}

.lt-foot a,
.lt-foot__btn {
  color: var(--color-grey);
  text-decoration: none;
}

.lt-foot a:hover,
.lt-foot a:focus-visible,
.lt-foot__btn:hover,
.lt-foot__btn:focus-visible {
  color: var(--color-paper);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Der Cookie-Opener ist ein <button>, muss aber wie die Links daneben
   aussehen — Browser-Defaults abraeumen. */
.lt-foot__btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* 14. Footer                                                          */
/* ------------------------------------------------------------------ */

.site-footer {
  background: var(--color-ink);
  color: var(--color-body-dark);
  border-top: 1px solid rgba(156, 160, 164, 0.28);
  padding: var(--space-2xl) 0 var(--space-lg);
}

.footer-grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 56.25em) {
  /* Brand + Social links; Kontakt, Menü, Rechtliches in einer Reihe. */
  .footer-grid {
    /* Vier Spuren mit System: Marke etwas breiter (traegt Logo + Satz), die
       drei Link-Spalten exakt gleich. minmax(0, …) haelt die Spuren
       schrumpffaehig, sonst schiebt der Inhalt das Raster zwischen 768 und
       1280 px ueber den Container (horizontaler Seitenueberlauf).
       Zeilen: die erste ist nur so hoch wie der Marken-Block, die zweite
       nimmt den Rest (1fr). Weil die Link-Spalten ueber beide Zeilen laufen,
       landet ihre Ueberhoehe in der flexiblen zweiten Zeile — dadurch sitzt
       Social direkt unter dem Marken-Text statt weit darunter zu stranden. */
    grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
    grid-template-rows: min-content 1fr;
    gap: var(--space-md) var(--space-xl);
    align-items: start;
  }

  .footer-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .footer-grid > .footer-social {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .footer-grid > .footer-col:nth-child(2) { grid-column: 2; grid-row: 1 / -1; }
  .footer-grid > .footer-col:nth-child(4) { grid-column: 3; grid-row: 1 / -1; }
  .footer-grid > .footer-col:nth-child(5) { grid-column: 4; grid-row: 1 / -1; }
}

.footer-brand img {
  height: 64px;
  width: auto;
}

.footer-brand p {
  margin-top: var(--space-md);
  font-size: var(--fs-small);
  color: var(--color-grey);
  max-width: 34ch;
}

@media (max-width: 56.24em) {
  .footer-brand {
    text-align: center;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(156, 160, 164, 0.28);
  }

  .footer-brand img {
    margin-inline: auto;
  }

  .footer-brand p {
    margin-inline: auto;
  }
}

.footer-col__title {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-grey);
}

/* NAP-Block: dieselben Gruppen wie .contact-aside (Adresse, Kanäle, Zeiten). */
.contact-aside > * + * {
  margin-top: var(--space-2xs);
}

.contact-aside > .contact-aside__title:not(:first-child) {
  margin-top: var(--space-md);
}

.contact-aside__title {
  display: block;
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ctx-muted);
}

.contact-aside__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.contact-aside__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.footer-col.contact-aside p {
  max-width: none;
}

.contact-aside__icon {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
}

.footer-col ul {
  display: grid;
  gap: var(--space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col a {
  color: var(--color-paper);
  text-decoration: none;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer-nap span {
  display: block;
}

.footer-hours li {
  white-space: nowrap;
}

/* Adresse, Zeiten und Kanäle sind drei Blöcke; ohne Abstand kleben sie aneinander. */
.footer-nap + .footer-hours,
.footer-nap + .footer-contact,
.footer-hours + .footer-contact {
  margin-top: var(--space-sm);
}

/* Kontaktspalte: Kanal-Icon vor dem Label. Nur diese Liste bekommt Icons, die
   übrigen Footer-Spalten bleiben reine Textlisten. */
.footer-col ul.footer-contact {
  gap: var(--space-xs);
}

.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.footer-contact svg {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
}

.footer-social {
  display: flex;
  gap: var(--space-sm);
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(156, 160, 164, 0.4);
  color: var(--color-paper);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  background: var(--color-paper);
  color: var(--color-ink);
}

.footer-social svg {
  width: 20px;
  height: 20px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(156, 160, 164, 0.28);
  font-size: var(--fs-small);
  color: var(--color-grey);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

.footer-legal a {
  color: var(--color-grey);
  text-decoration: none;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: var(--color-paper);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Cookie-Einstellungen ist ein Link in „Rechtliches" — gleiches Weiß wie
   die übrigen Links dieser Spalte, Grau bleibt Sekundärtext vorbehalten. */
.footer-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-paper);
  text-decoration: none;
}

.footer-linkbtn:hover,
.footer-linkbtn:focus-visible {
  color: var(--color-paper);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------------ */
/* 15. Consent — CSS liegt in consent.js                               */
/* ------------------------------------------------------------------ */
/* Seit dem Umstieg auf die FULL-Variante (consent/consent-full.js)     */
/* bringt das Consent-Script sein eigenes <style> mit (Praefix .cc-).   */
/* Die frueheren .dkz-* Regeln aus consent-lite.css sind damit tot und  */
/* wurden entfernt. Der Opener im Footer ist .footer-linkbtn            */
/* (Abschnitt 14) mit data-cc-open.                                    */

/* Das Template-CSS ist token-getrieben und faellt ohne diese Variablen
   auf sein Default-Theme zurueck (blau #0B2A4A / orange #FF6B00 / Pill-
   Buttons) — das passt nicht zur monochromen Marke. Die Tokens hier nur
   auf die Consent-Bausteine scopen, statt sie global zu setzen: sonst
   erbt spaeter unbeabsichtigt anderer Code ein --color-accent.
   --radius ist global bereits 0, --radius-pill kennt die Site nicht. */
.cc-banner,
.cc-embed-ph {
  --color-primary: var(--color-ink);
  --color-accent: var(--color-ink);
  --radius-pill: 0;
  /* Banner und Platzhalter sind helle Flaechen, haengen als fixed/inline
     Element aber im dunklen Default-Kontext des :root — ohne diese Zeile
     erbt das <h2> aus Abschnitt 4 (color: var(--ctx-ink)) Weiss und wird
     unsichtbar auf dem weissen Banner. */
  --ctx-ink: var(--color-ink);
}

/* Die Kategorie-Schalter sind im Template hart auf border-radius:999px
   (Spur) bzw. 50% (Knopf) gesetzt — nicht ueber ein Token. Deshalb hier
   explizit eckig machen, passend zu --radius: 0. Die hoehere Spezifitaet
   (.cc-banner davor) ist noetig, weil consent.js sein <style> erst zur
   Laufzeit und damit HINTER style.css in den <head> haengt. */
.cc-banner .cc-track,
.cc-banner .cc-track::after {
  border-radius: 0;
}

/* ------------------------------------------------------------------ */
/* 16. Inception-Badge (Struktur aus Template, Restyle monochrom)      */
/* ------------------------------------------------------------------ */

.inception {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.7rem;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  line-height: 1;
  color: var(--color-grey);
  text-decoration: none;
  border: 1px solid rgba(156, 160, 164, 0.4);
  border-radius: 0;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.inception:hover,
.inception:focus-visible {
  color: var(--color-paper);
  border-color: var(--color-paper);
}

.inception__logo {
  height: 18px;
  width: auto;
  flex: none;
  display: block;
}

.inception__preview {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.7rem);
  z-index: 20;
  width: min(340px, 80vw);
  padding: 6px;
  background: var(--color-ink);
  border: 1px solid var(--color-grey);
  border-radius: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.inception__preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.inception:hover .inception__preview,
.inception:focus-visible .inception__preview {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .inception__preview {
    transition: opacity 0.2s ease;
    transform: translateX(-50%);
  }
}

/* ------------------------------------------------------------------ */
/* 17. Responsive Feinschliff                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 40em) {
  :root {
    --nav-height: 4rem;
  }

  .site-header__brand img {
    height: 36px;
  }

  .btn {
    width: 100%;
  }

  .btn--sm {
    width: auto;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Die Hover-Vorschau des Badges ist zentriert ueber dem Logo positioniert und
   ragt am rechten Footer-Rand aus dem Viewport — auch unsichtbar zaehlt sie zur
   Scroll-Breite (horizontaler Seitenueberlauf zwischen 768 und 1280 px).
   Deshalb hier rechtsbuendig am Badge verankern statt zentriert. */
.inception__preview {
  left: auto;
  right: 0;
  max-width: min(340px, calc(100vw - 2 * var(--space-lg)));
  transform: translateY(10px);
}

.inception:hover .inception__preview,
.inception:focus-visible .inception__preview {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .inception__preview {
    transform: none;
  }
}

/* ------------------------------------------------------------------ */
/* 14. Bewertungs-Slider (Startseite + /ankauf)                         */
/* ------------------------------------------------------------------ */

/* Overlapping-Slider (Osmo, wie neudeck-odenwaelder.de #werkstatt). Die Bahn
   ist so breit wie der .container. Drei Karten fuellen die Reihe; die links
   hinauslaufende bleibt, schrumpft auf 0.45, dreht sich um -8° um 75% center
   und legt sich unter die naechste (app.js). Radius 0, .card traegt den Hover.
   Lag bis zur Uebernahme auf /ankauf in p-index.css — steht hier, weil ihn
   jetzt zwei Seiten laden. app.js greift generisch ueber [data-oslider]. */
.oslider {
  position: relative;
  width: 100%;
  margin-top: var(--space-lg);
  container-type: inline-size;
}

.oslider__viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Platz fuer Scale/Rotation, sonst kappt overflow die Faecherkante.
     Seitliche Luft wie bei neudeck, per negativem Margin wieder auf die
     Containerkante gezogen, damit die Sektion buendig bleibt. */
  padding: 0.75rem 12px 2rem;
  margin-inline: -12px;
  scroll-padding-inline-start: 12px;
  cursor: grab;
}

.oslider__viewport::-webkit-scrollbar {
  display: none;
}

.oslider__viewport:focus-visible {
  outline: 2px solid var(--ctx-ink);
  outline-offset: 4px;
}

.oslider__viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.oslider__viewport.is-dragging a,
.oslider__viewport.is-dragging .card {
  pointer-events: none;
}

.oslider__track {
  display: flex;
  gap: var(--space-md);
  align-items: stretch;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oslider__item {
  position: relative;
  display: flex;
  flex: 0 0 100cqi;
  scroll-snap-align: start;
  /* Linke obere Ecke: die Karte schiebt sich sauber unter die naechste.
     Um die Kartenmitte gedreht wuerde sie stattdessen schwingen. */
  transform-origin: left top;
  will-change: transform;
}

@media (min-width: 40em) {
  .oslider__item {
    flex-basis: calc((100cqi - var(--space-md)) / 2);
  }
}

@media (min-width: 56.25em) {
  .oslider__item {
    flex-basis: calc((100cqi - 2 * var(--space-md)) / 3);
  }
}

/* Deckend: sonst scheint die darunter geschobene Karte durch die naechste.
   Hover muss dieselbe Spezifitaet haben, sonst bleibt die Fläche hell und
   die invertierten Textfarben verschwinden auf dem Untergrund. */
.oslider__item > .card {
  width: 100%;
  height: 100%;
  background: var(--ctx-surface);
}

.oslider__item > .card:hover,
.oslider__item > .card:focus-within {
  background: var(--ctx-invert-surface);
  border-color: var(--ctx-invert-surface);
}

@media (prefers-reduced-motion: reduce) {
  .oslider__item {
    transform: none !important;
  }
}

.oslider__controls {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.oslider__btn {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--ctx-ink);
  background: transparent;
  color: var(--ctx-ink);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.oslider__btn:hover,
.oslider__btn:focus-visible {
  background: var(--ctx-ink);
  color: var(--ctx-surface);
}

.oslider__btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

.oslider__btn[disabled]:hover {
  background: transparent;
  color: var(--ctx-ink);
}

.review .card__body {
  gap: var(--space-2xs);
}

/* Name links, Datum rechts oben in derselben Zeile */
.review__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.review__name {
  font-weight: 500;
  color: var(--card-ink);
}

.review__date {
  flex: none;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  color: var(--card-muted);
}

/* Sterne: zwei gestapelte Reihen, die obere wird auf --rating beschnitten.
   So bleiben Teilwertungen wie 4,6 korrekt sichtbar. Der exakte Wert steht
   als sr-only-Text daneben. */
.review__rating {
  display: flex;
  align-items: center;
}

.review__stars {
  position: relative;
  display: inline-block;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--card-hairline);
}

.review__stars::before,
.review__stars-fill::before {
  content: "★★★★★";
}

.review__stars-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--rating, 100%);
  overflow: hidden;
  white-space: nowrap;
  color: var(--card-ink);
}

/* Sichtbare Kürzung langer Zitate: der volle Text bleibt im DOM */
.review__text {
  margin-top: var(--space-2xs);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  color: var(--card-body);
}

/* Eine Karte fuellt die Bahn: kein seitliches Peek, hartes Snap.
   100cqi bezieht sich auf die Viewport-Breite, nicht auf das aeussere
   Slider-Mass, damit die Karte die sichtbare Bahn exakt fuellt. */
@media (max-width: 39.99em) {
  .oslider__viewport {
    padding-inline: 0;
    margin-inline: 0;
    scroll-padding-inline-start: 0;
    scroll-snap-type: x mandatory;
    container-type: inline-size;
  }

  .oslider__item {
    flex-basis: 100cqi;
  }
}

/* Ab zwei sichtbaren Karten weicher rasten: mandatory arbeitet auf
   mittleren Breiten gegen den Schwung. */
@media (min-width: 40em) and (max-width: 47.9375em) {
  .oslider__viewport {
    scroll-snap-type: x proximity;
  }
}

/* Harte Abschaltung zusaetzlich zum JS-Guard: ein bereits gesetzter Transform
   bliebe sonst stehen, wenn die Systemeinstellung waehrend der Sitzung wechselt. */
@media (prefers-reduced-motion: reduce) {
  .oslider__item {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ------------------------------------------------------------------ */
/* 15. Zeilenumbruch in Ueberschriften (Handy)                          */
/* ------------------------------------------------------------------ */

/* Auf schmalen Viewports brechen zweizeilige Ueberschriften haeufig so um,
   dass in der zweiten Zeile ein einzelnes Wort steht (gemessen: 6 von 12
   Ueberschriften allein auf der Startseite). text-wrap: balance verteilt die
   Woerter gleichmaessig auf die Zeilen und loest das, ohne dass pro
   Ueberschrift ein manueller Umbruch gepflegt werden muss.
   Nur bis 47.99em: auf breiteren Viewports stehen die Ueberschriften ohnehin
   meist einzeilig, und die gesetzten Umbrueche (<br>, .hero__title-line)
   sollen dort unangetastet bleiben.
   Browser ohne Unterstuetzung ignorieren die Zeile und brechen wie bisher. */
@media (max-width: 47.99em) {
  h1,
  h2,
  h3 {
    text-wrap: balance;
  }
}

/* ------------------------------------------------------------------ */
/* 16. Fehlerseite (/404)                                              */
/* ------------------------------------------------------------------ */
/* Die 404 hat keinen eigenen Inhalt, den man scrollen wuerde — deshalb
   vertikal zentriert statt oben angeschlagen. min-height zieht den
   verfuegbaren Raum zwischen Header und Footer auf; svh statt vh, damit
   die Einblendleisten mobiler Browser nicht zu Ueberlauf fuehren. */
.error-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--header-height) - 12rem);
  padding-block: var(--space-2xl);
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Auf dem Handy soll moeglichst alles ohne Scrollen sichtbar sein — das ist
   der Zweck der Seite (Aufruf aus der Social-Bio). Deshalb die vertikalen
   Abstaende dort zusammenziehen; auf dem Desktop bleibt es luftig. */
@media (max-width: 47.99em) {
  .lt-wrap {
    padding-block: var(--space-lg);
  }

  .lt-logo {
    margin-bottom: var(--space-sm);
  }

  .lt-links {
    margin-top: var(--space-md);
  }

  .lt-foot {
    margin-top: var(--space-md);
  }
}