/* ==========================================================================
   CUBE Store Dingolfing — styles.css
   Dezent modernisierter statischer Nachbau (Tokens: Rot #ef322c, Schwarz,
   Weiß, Grau). Fonts self-hosted (DINPro Condensed / Roboto Condensed).
   ========================================================================== */

/* ---------- Fonts (self-hosted, keine externen Requests) ----------
   Die ?v=-Nummer muss mit ASSET_V in build/build.py uebereinstimmen, sonst
   laedt der Browser die per <link rel="preload"> geholten Schnitte doppelt.
   verify.py prueft das.
   robotocondensed_light (300) ist bewusst NICHT eingebunden: kein einziges
   Element im Projekt setzt font-weight:300. Die Datei bleibt im Ordner.

   Ausgeliefert werden die *_subset.woff2-Dateien: auf den Zeichenvorrat des
   Builds reduziert (Latin Basic + Latin-1 + Latin Extended-A, deutsche
   Umlaute/ß, typografische Anfuehrungszeichen, Gedankenstriche, € ° × · → ≥
   ™ ® ✓, Ziffern — plus Sicherheitspuffer). Die vollen Originaldateien liegen
   unveraendert daneben; neu subsetten mit fonttools/pyftsubset, wenn ein
   bisher unbenutztes Zeichen dazukommt. */
@font-face {
  font-family: 'DINPro Condensed';
  src: url('../fonts/dinpro_condensedbold_subset.woff2?v=74') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DINPro Condensed';
  src: url('../fonts/dinpro_condensedregular_subset.woff2?v=74') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../fonts/robotocondensed_regular_subset.woff2?v=74') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Medium deckt bewusst 500–600 ab: <strong> und Zwischenueberschriften stehen
   auf 600 und landen dadurch auf dem Medium-Schnitt statt auf Bold. */
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../fonts/robotocondensed_medium_subset.woff2?v=74') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../fonts/robotocondensed_bold_subset.woff2?v=74') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --rot: #ef322c;
  --rot-dunkel: #cf2721;
  /* Rot als *Textfarbe* (Links, kleine Labels, Kontur-Buttons): #ef322c
     erreicht auf Weiss nur 4.07:1, #cf2721 dagegen 5.30:1 -> WCAG AA.
     Unterstriche, Punkte, Rahmen und grosse Headline-Akzente bleiben
     auf --rot (dort gilt die 3:1-Schwelle, die #ef322c erfuellt). */
  --rot-text: #cf2721;
  --rot-text-hover: #a81f1a;
  /* Rote *Flaeche mit weisser Schrift* (Buttons, Badges, Nav-Pillen,
     Newsletter-Balken): Weiss auf #ef322c sind ebenfalls nur 4.07:1 — und
     Buttontext ist mit 16,8 px/700 kein „grosser Text" (dafuer braeuchte es
     >= 18.66 px), also gilt 4.5:1. #db2a24 kommt auf 4.81:1 und liegt optisch
     dicht am Markenrot. */
  --rot-flaeche: #db2a24;
  --rot-flaeche-hover: #b8221d;
  --schwarz: #000;
  --fast-schwarz: #111;
  /* Fliesstext bewusst weicher als das fruehere #222 (15.91:1):
     #3d4247 = 10.15:1 auf Weiss, 9.48:1 auf --grau-hell -> weit ueber AA. */
  --text: #3d4247;
  /* gedaempfte Nebentexte (Datum, Hinweise): 6.34:1 auf Weiss */
  --text-leise: #5a6069;
  --grau-hell: #f7f7f7;
  --grau-heller: #fcfcfc;
  --grau-linie: rgba(34, 49, 55, 0.18);
  /* Hover-Unterstrich in der Navigation — bewusst grau, damit Hover nie mit
     dem roten Aktiv-Zustand verwechselt werden kann. 3.19:1 auf Weiss und
     damit ueber der 3:1-Schwelle fuer nicht-textliche Bedienelemente. */
  --nav-hover-linie: #8a9198;
  --weiss: #fff;
  --font-display: 'DINPro Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
  /* Ein kleiner, einheitlicher Radius fuer Bilder, Karten und Felder
     (frueher 14px — wirkte weich und nach Baukasten). */
  --radius: 6px;
  /* Farbrhythmus: Weiss, warmes Off-White, Fast-Schwarz. Rot ist Akzent. */
  --offwhite: #f6f5f2;
  --linie: rgba(17, 17, 17, 0.12);
  --linie-stark: rgba(17, 17, 17, 0.3);
  --schatten: 0 8px 28px rgba(0, 0, 0, 0.09);
  --schatten-hover: 0 14px 38px rgba(0, 0, 0, 0.16);
  /* Inhaltsbreite: frueher 1580px. Bewusst wieder schmaler (1440px), damit
     Fliesstext ueber die volle Containerbreite laufen kann, ohne unlesbar
     lange Zeilen zu erzeugen. JEDE Sektion nutzt exakt diese Breite —
     es gibt keine zusaetzlich verengten, mittig gesetzten Inhaltsbloecke
     mehr (siehe .container--schmal / .leseblock weiter unten). */
  --max: 1440px;
  /* Seitenrand („Sicherheitsabstand"): 24px mobil, ab Tablet 40px,
     ab grossen Schirmen 56px. Bewusst als feste Stufen statt clamp(),
     damit der Abstand auf mittleren Fenstern nicht einbricht. */
  --pad: 24px;
  /* Lesebreite fuer Fliesstext in breiten Containern. Achtung: „ch" ist die
     Breite der Ziffer 0 und in Roboto Condensed deutlich breiter als der
     Buchstabendurchschnitt — 74ch ergaben gemessene 90 Zeichen je Zeile
     (672 px bei 18,4 px). 62ch landen bei rund 75 Zeichen und damit im
     lesbaren Korridor von 60–75. */
  --lesebreite: 62ch;
  --fs-0: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  --fs-1: clamp(1.2rem, 1.08rem + 0.6vw, 1.5rem);
  --fs-2: clamp(1.55rem, 1.25rem + 1.4vw, 2.35rem);
  --fs-3: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --fs-4: clamp(2.6rem, 1.7rem + 4.4vw, 5rem);
  --fokus: rgba(239, 50, 44, 0.85);
  --fokus-hell: rgba(255, 255, 255, 0.95);
  /* Header (Neuaufbau 09/2026): 64 px mobil, 88 px am Desktop (beim
     Scrollen 68 px). Unterkante sehr hell: #ececec auf Weiss. */
  --header-h: 64px;
  --kopf-linie: rgba(17, 17, 17, 0.08);
  /* Navigation am Desktop: Schriftgroesse 17/18 px, Abstand 22–36 px —
     so passt die Leiste schon ab 1121 px neben das Logo. */
  --nav-schrift: 17px;
  --nav-abstand: clamp(20px, calc(2.5vw - 8px), 26px);
  /* Footer inkl. Newsletter-Band: ein Block in Fast-Schwarz. Gemessen auf
     #0f0f0f: Koepfe #8f8f8f = 5,93:1, Text #bdbdbd = 10,2:1,
     Links #d4d4d4 = 12,9:1, Kleingedrucktes #a3a3a3 = 7,6:1. */
  --footer-grund: #0f0f0f;
  --footer-linie: rgba(255, 255, 255, 0.13);
  --footer-kopf: #8f8f8f;
  --footer-text: #bdbdbd;
  --footer-link: #d4d4d4;
  --footer-leise: #a3a3a3;
}
@media (min-width: 768px)  { :root { --pad: 40px; } }
@media (min-width: 1200px) { :root { --pad: 56px; } }
@media (min-width: 1121px) { :root { --header-h: 88px; } }
/* wie cube.eu: 20 px / 700 / 1 px Laufweite am grossen Desktop */
@media (min-width: 1280px) { :root { --nav-schrift: 19px; } }
@media (min-width: 1400px) { :root { --nav-schrift: 20px; } }

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Sprungmarken (#vormerken, #360, #anfrage …) duerfen nicht unter dem
     sticky Header landen: Headerhoehe + 20 px Luft. */
  scroll-padding-top: calc(var(--header-h) + 20px);
}
/* Sicherheitsnetz: die Seite darf sich nie seitlich ueber den Rand schieben
   lassen (Kundenfeedback 09/2026). clip statt hidden: erzeugt keinen
   Scroll-Container, der sticky Header bleibt intakt. */
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-0);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  background: var(--weiss);
}
/* Fliesstext ist grundsaetzlich normal gewichtet; Fettung ist die Ausnahme
   (Zwischenueberschriften, <strong>) und nicht der Normalfall. */
p, li, dd, td, figcaption, blockquote { font-weight: 400; }
strong, b { font-weight: 600; }
img, video { max-width: 100%; height: auto; display: block; }
/* <picture> ist nur eine Huelle um das <img> (WebP-srcset). display:contents
   nimmt sie aus dem Layout, damit alle bestehenden Bild-Regeln unveraendert
   auf das <img> wirken (Grid-/Flex-Kinder, aspect-ratio, object-fit). */
picture { display: contents; }
a { color: var(--rot-text); }
a:hover { color: var(--rot-text-hover); }
/* Uppercase bleibt bewusst auf H1/H2, Buttons und der Hauptnavigation.
   Alles, was gelesen wird (H3/H4, Unterzeilen, Labels, Chips, FAQ-Fragen),
   steht in normaler Gross-/Kleinschreibung. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--fast-schwarz);
  overflow-wrap: break-word;
}
h1, h2 { text-transform: uppercase; }
h3 { letter-spacing: 0.02em; }
h4, h5, h6 {
  font-family: var(--font-body); font-weight: 600; margin: 0 0 0.5em;
  line-height: 1.3; color: var(--fast-schwarz);
}
h1 { font-size: var(--fs-3); }
h2 { font-size: var(--fs-2); }
h3 { font-size: var(--fs-1); }
p, ul, ol { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
/* Lange Wortketten — vor allem ausgeschriebene URLs in Datenschutz und
   Impressum — duerfen umbrechen. Ohne das schieben sie auf schmalen
   Displays die ganze Seite in die Breite. */
p, li, dd, dt, td, th, figcaption, blockquote, address { overflow-wrap: break-word; }
/* Etwas Luft zwischen Aufzaehlungspunkten — bewusst nur in Lesetext-Bloecken,
   damit Navigation, Brotkrumen, Footer und Grid-Listen (.schritte) unberuehrt
   bleiben. */
.leseblock li + li, .rechtstext li + li, .container--schmal li + li,
.faq-antwort li + li, .spalten > div > ul > li + li,
.spalten > div > ol > li + li { margin-top: 0.3em; }
.akzent { color: var(--rot); }
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--rot-flaeche);
  color: #fff; padding: 0.6em 1em; z-index: 300;
}
.skip-link:focus { left: 0; }

/* ---------- Sichtbarer Tastatur-Fokus (global) ----------
   Gilt fuer jedes fokussierbare Element; nirgends steht outline:none ohne
   Ersatz. Auf dunklen/roten Flaechen wird der Ring weiss, damit er sichtbar
   bleibt. */
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--rot :focus-visible,
.section--dunkel :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible,
.newsletter-cta :focus-visible,
.consent-banner :focus-visible,
.lightbox :focus-visible,
.skip-link:focus-visible,
/* Startseite: Flaechen auf Foto oder Fast-Schwarz */
.start-hero :focus-visible,
.s-sektion--dunkel :focus-visible,
.s-2027-band :focus-visible,
.s-abschluss :focus-visible,
.bento-feld a:focus-visible,
body.startseite:not(.gescrollt):not(.nav-offen) .logo:focus-visible,
body.startseite:not(.gescrollt):not(.nav-offen) .nav-liste > li > a:focus-visible,
body.startseite:not(.gescrollt):not(.nav-offen) .nav-cta:focus-visible,
body.startseite:not(.gescrollt):not(.nav-offen) .nav-burger:focus-visible {
  outline-color: var(--fokus-hell);
}
/* Bento-Kacheln liegen auf hellem Grund: der weisse Ring bekommt dort einen
   dunklen Aussenring, damit er auf Off-White sichtbar bleibt. */
.bento-feld a:focus-visible { outline-offset: -4px; box-shadow: 0 0 0 3px var(--fast-schwarz); }
/* Consent-Dialog steht auf Weiss -> roter Ring bleibt richtig; nur der
   Abstand wird enger gesetzt, damit der Ring im Dialog nicht anstoesst. */
.consent-dialog :focus-visible { outline-offset: 2px; }
/* Karten-/Kachel-Links: Ring folgt der Kartenrundung */
.karte:focus-visible, .news-karte:focus-visible, .leistung-kachel:focus-visible,
.galerie a:focus-visible, .partner-karte:focus-visible {
  outline-offset: 4px;
  border-radius: var(--radius);
}

/* ---------- Layout ---------- */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* EIN Format fuer alle Sektionen -------------------------------------------
   Frueher wurden einzelne Bloecke in einen 880px-Container gesetzt und mittig
   ausgerichtet — dadurch sprang die linke Textkante von Sektion zu Sektion.
   Jetzt spannt JEDER Container die volle Breite (--max); nur reiner Lesetext
   (Beitraege, Rechtstexte) bekommt innen eine schmalere Spalte, die aber
   LINKS am Container ausgerichtet bleibt und damit mit allen anderen
   Sektionen fluchtet. */
.container--schmal { max-width: var(--max); }
.container--schmal > * { max-width: 920px; margin-left: 0; margin-right: auto; }
.container--medium { max-width: var(--max); }
.container--medium > * { max-width: 1120px; margin-left: 0; margin-right: auto; }

/* Lesebreite: Fliesstext direkt im Container und in Spaltenlayouts bekommt
   eine Obergrenze, damit aus der vollen Containerbreite keine
   110-Zeichen-Zeilen werden. Die linke Kante bleibt dabei am Container. */
.section .container > p,
.section .container > ul,
.section .container > ol,
.spalten > div > p,
.spalten > div > ul,
.spalten > div > ol { max-width: var(--lesebreite); }
.zentriert > p, .zentriert > ul, .zentriert > ol,
.zentriert > .lesetext { margin-left: auto; margin-right: auto; }
.lesetext { max-width: var(--lesebreite); }

/* Einleitungs-/Zwischentexte: volle Containerbreite, ab 1000px zweispaltig.
   So beginnt der Text an derselben linken Kante wie Karten, Grids und
   Bilder — und bleibt trotzdem gut lesbar. */
.intro-text { text-align: left; }
.intro-text > p, .intro-text > ul, .intro-text > ol { max-width: var(--lesebreite); }
@media (min-width: 1000px) {
  .intro-text { columns: 2; column-gap: clamp(34px, 4vw, 64px); orphans: 3; widows: 3; }
  .intro-text > p, .intro-text > ul, .intro-text > ol { max-width: none; margin-top: 0; }
  .intro-text > p:last-child, .intro-text > ul:last-child { margin-bottom: 0; }
  /* Ein Absatz wird nie zwischen zwei Spalten aufgetrennt - sonst endet
     Spalte 1 mitten im Satz und der Text liest sich zerrissen. Das gilt
     nur fuer Bloecke mit mehreren Kindern; bei genau einem Absatz waere
     Spalte 2 sonst leer (siehe .intro-text--einzeln). */
  .intro-text > p, .intro-text > ul, .intro-text > ol,
  .intro-text > h3, .intro-text > h4 {
    break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  }
  /* Genau ein Kind: der Absatz laeuft ausbalanciert ueber beide Spalten
     (Standard column-fill: balance) statt als schmale Saeule links zu
     kleben. Der Block fuellt damit wieder die volle Containerbreite. */
  .intro-text--einzeln > p, .intro-text--einzeln > ul, .intro-text--einzeln > ol,
  .intro-text--einzeln > h3, .intro-text--einzeln > h4 {
    break-inside: auto; -webkit-column-break-inside: auto; page-break-inside: auto;
  }
  /* Zu wenig Text fuer zwei Spalten: einspaltig in Lesebreite. */
  .intro-text--kurz { columns: auto; }
  .intro-text--kurz > p, .intro-text--kurz > ul, .intro-text--kurz > ol { max-width: var(--lesebreite); }
}
/* Der kurze Einzelabsatz gehoert optisch zur Ueberschrift: unter einem
   zentrierten Abschnittskopf steht er mittig, sonst linksbuendig. */
.intro-text--kurz { max-width: var(--lesebreite); }
.zentriert .intro-text--kurz, .zentriert > .intro-text--kurz { margin-left: auto; margin-right: auto; }

/* Vertikale Abstaende: einheitlich und grosszuegig. */
.section { padding: clamp(56px, 7vw, 96px) 0; }
.section--kompakt { padding: clamp(40px, 5vw, 64px) 0; }
.section--grau { background: var(--grau-hell); }
.section--rot { background: var(--rot-flaeche); color: #fff; }
.section--rot h1, .section--rot h2, .section--rot h3,
.section--rot h4, .section--rot h5, .section--rot h6 { color: #fff; }
.section--dunkel { background: var(--schwarz); color: #fff; }
.section--dunkel h1, .section--dunkel h2, .section--dunkel h3,
.section--dunkel h4, .section--dunkel h5, .section--dunkel h6 { color: #fff; }
.section--dunkel a { color: #ffb3b0; }
.zentriert { text-align: center; }

.abschnitt-kopf { margin-bottom: clamp(24px, 4vw, 44px); }
.abschnitt-kopf .unterzeile {
  font-family: var(--font-display);
  font-size: var(--fs-1); color: var(--text); font-weight: 400;
  letter-spacing: 0.01em; max-width: 62ch;
}
.zentriert .unterzeile { margin-left: auto; margin-right: auto; }
.trenner {
  width: 72px; height: 4px; background: var(--rot);
  border: 0; margin: 18px 0 0; border-radius: 2px;
}
.zentriert .trenner, .trenner--mitte { margin-left: auto; margin-right: auto; }
.section--rot .trenner, .section--dunkel .trenner { background: #fff; }

/* Spalten */
.spalten { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
.spalten--oben { align-items: start; }
@media (min-width: 800px) {
  .spalten--2 { grid-template-columns: 1fr 1fr; }
  .spalten--3 { grid-template-columns: repeat(3, 1fr); }
  .spalten--13-23 { grid-template-columns: 1fr 2fr; }
  .spalten--25-35 { grid-template-columns: 2fr 3fr; }
  .spalten--35-25 { grid-template-columns: 3fr 2fr; }
  .spalten--14-34 { grid-template-columns: 1fr 3fr; }
  .spalten--6 { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 560px) and (max-width: 799px) {
  .spalten--3, .spalten--6 { grid-template-columns: repeat(2, 1fr); }
}
.bild-rahmen img { border-radius: var(--radius); box-shadow: var(--schatten); }

/* Overflow-Schutz: verhindert, dass lange Titel/Texte Karten in Flex-/Grid-Layouts
   seitlich aufbrechen lassen (v. a. auf Mobile) */
.spalten > *, .karten > *, .kachel-grid > *, .preis-karten > *, .partner-grid > *,
.footer-oben > *, .footer-links > *, .job-akkordeons > *,
.blurbs > *, .galerie > *, .leistungen-grid > *, .schritte > *, .hero-chips > *,
.serien-grid > * {
  min-width: 0;
}

/* ---------- Buttons ---------- */
/* Ein Primaerstil: Akzentrot (--rot-flaeche, 4.81:1 mit Weiss) als Flaeche,
   kleiner Radius statt Pille, kein Anheben beim Hover — nur die Flaeche wird
   dunkler und der Pfeil (.btn--pfeil) wandert. Sekundaere Aktionen sind
   Textlinks mit Pfeil (.link-pfeil). */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1rem;
  line-height: 1.2;
  padding: 0.95em 1.6em;
  border-radius: 4px;
  border: 2px solid var(--rot-flaeche);
  background: var(--rot-flaeche);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  /* Dauer und Kurve kommen aus den Tokens — dieselben wie beim Pfeil in
     .btn--pfeil::after, damit Flaeche und Pfeil synchron laufen. */
  transition: background var(--dauer, 0.18s) var(--easing, ease),
              border-color var(--dauer, 0.18s) var(--easing, ease),
              color var(--dauer, 0.18s) var(--easing, ease);
}
.btn:hover {
  background: var(--rot-flaeche-hover); border-color: var(--rot-flaeche-hover);
  color: #fff;
}
.btn--hell { background: #fff; border-color: #fff; color: var(--rot-text); }
.btn--hell:hover { background: var(--grau-hell); border-color: var(--grau-hell); color: var(--rot-text-hover); }
.btn--kontur { background: transparent; color: var(--rot-text); border-color: var(--rot-flaeche); }
.btn--kontur:hover { background: var(--rot-flaeche); color: #fff; }
.btn--klein { font-size: 0.92rem; padding: 0.5em 1.2em; }

/* ---------- Header / Navigation ----------
   Neuaufbau 09/2026 nach Kundenfeedback („Der Header wirkt nicht
   professionell. Mache den anders, auch eine andere Schriftart. So wie
   cube.eu."): weisse Leiste mit feiner Unterkante, Navigation in Roboto
   Condensed 700 / Versalien / 1 px Sperrung, keine Zierpfeile, keine Pillen.
   Rechts genau EIN gefuellter Button („Termin anfragen"); der Onlineshop ist
   ein normaler Menuepunkt mit Extern-Hinweis. „Home" entfaellt — das Logo
   fuehrt zur Startseite.
   Masse: Desktop 88 px, beim Scrollen 68 px (body.gescrollt); mobil 64 px. */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--weiss);
  /* Unterkante als Innenschatten statt border: Der Header ist damit exakt
     --header-h hoch, und das Dropdown setzt ohne Luecke an der Kante an. */
  box-shadow: inset 0 -1px 0 var(--kopf-linie);
  transition: box-shadow var(--dauer) ease, background-color 0.3s var(--easing);
}
body.gescrollt .site-header {
  box-shadow: inset 0 -1px 0 var(--kopf-linie), 0 8px 24px rgba(0, 0, 0, 0.06);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--header-h);
  transition: height 0.25s var(--easing);
}
/* Logo: gesteuert ueber die Hoehe (Bild 1920 x 292 px). Die PNG-Datei hat
   links 82 px transparenten Rand (= 0,28 x Bildhoehe) — der negative Rand
   setzt die sichtbare Logokante exakt auf die Containerkante. Die
   Trefferflaeche des Links bleibt mindestens 44 px hoch. */
.logo {
  --logo-h: 30px;
  display: inline-flex; align-items: center; flex: 0 0 auto;
  min-height: 44px; margin-left: calc(var(--logo-h) * -0.28);
}
.logo img {
  height: var(--logo-h); width: auto; max-width: none;
  transition: height 0.25s var(--easing);
}
.nav-liste { list-style: none; margin: 0; padding: 0; }
.nav-liste > li > a {
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; line-height: 1.2;
  color: var(--fast-schwarz); text-decoration: none;
}
/* Extern-Hinweis (↗ als SVG) hinter „Onlineshop" */
.icon-extern { flex: 0 0 auto; width: 0.6em; height: 0.6em; margin-left: 0.42em; }
/* Der EINE gefuellte Button: Markenrot als Flaeche (Weiss auf --rot-flaeche
   = 4,81:1), 4 px Radius, mindestens 44 px hoch. Kein Anheben beim Hover —
   nur die Flaeche wird dunkler. */
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 20px; border-radius: 4px;
  background: var(--rot-flaeche); color: #fff; text-decoration: none; white-space: nowrap;
  font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 1.2;
  letter-spacing: 1px; text-transform: uppercase;
  transition: background-color var(--dauer) var(--easing);
}
.nav-cta:hover { background: var(--rot-flaeche-hover); color: #fff; }
/* 360°-Symbol im Button (Header-Button fuehrt zum Rundgang) */
.nav-cta { gap: 8px; }
.icon-360 { flex: 0 0 auto; width: 20px; height: 20px; margin: -2px 0 -2px -3px; }
.nav-gruppe-btn {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--fast-schwarz);
}
.nav-chevron { display: block; transition: transform var(--dauer) var(--easing); }
.nav-gruppe-btn[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.nav-drop { list-style: none; margin: 0; padding: 0; display: none; }
/* Untereintraege sind Lesetext: normale Schreibweise, Regular. */
.nav-drop a {
  font-family: var(--font-body); font-weight: 400; text-transform: none;
  letter-spacing: 0.01em; color: var(--fast-schwarz); text-decoration: none;
}
.hauptnav .nav-drop a[aria-current="page"] { color: var(--rot-text); }

/* Burger (nur mobil): drei 2-px-Linien, 44 x 44 px Trefferflaeche. Der
   negative Rand setzt die Linien buendig auf die rechte Containerkante. */
.nav-burger {
  display: none; position: relative; flex: 0 0 auto;
  width: 44px; height: 44px; margin-right: -11px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--fast-schwarz);
}
.nav-burger span {
  position: absolute; left: 11px; width: 22px; height: 2px; border-radius: 1px;
  background: currentColor;
  transition: transform var(--dauer) var(--easing), opacity var(--dauer) var(--easing);
}
.nav-burger span:nth-child(1) { top: 14px; }
.nav-burger span:nth-child(2) { top: 21px; }
.nav-burger span:nth-child(3) { top: 28px; }
body.nav-offen .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-offen .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-offen .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Desktop (ab 1121 px) ---------------------------------------------
   Zustandsmodell (unveraendert): HOVER/FOKUS = graue Linie, AKTIV = rote
   Linie — nie dieselbe Farbe. EIN Strich pro Menuepunkt, gezeichnet vom
   <li> an der Header-Unterkante; Links zeichnen keine eigene Linie.
   Die Dropdown-Pfeile entfallen: das Untermenue oeffnet per :hover und
   :focus-within (Tab von der Gruppenbeschriftung direkt in die Eintraege,
   Escape schliesst — script.js). Die Chevron-Buttons bleiben fuer das
   mobile Akkordeon im DOM, sind hier aber ausgeblendet. */
@media (min-width: 1121px) {
  .logo { --logo-h: clamp(40px, calc(0.625vw + 33px), 42px); }
  body.gescrollt .header-inner { height: 68px; }
  body.gescrollt .logo { --logo-h: 34px; }
  /* Der sticky Header wird 20 px flacher — der Rand haelt seinen Platz im
     Seitenfluss konstant (68 + 20 = 88 px). So rutscht der Inhalt beim
     Verdichten nicht nach oben, und die Scroll-Verankerung des Browsers
     kann an der Schwelle nicht zwischen beiden Zustaenden hin- und
     herspringen. Gleiche Dauer und Kurve wie die Hoehe. */
  .site-header {
    transition: box-shadow var(--dauer) ease, background-color 0.3s var(--easing),
                margin-bottom 0.25s var(--easing);
  }
  body.gescrollt .site-header { margin-bottom: 20px; }
  .hauptnav { align-self: stretch; display: flex; align-items: center; gap: var(--nav-abstand); }
  .nav-liste { display: flex; align-self: stretch; gap: var(--nav-abstand); }
  .nav-liste > li { position: relative; display: flex; align-items: center; }
  .nav-liste > li > a {
    display: inline-flex; align-items: center; min-height: 44px;
    font-size: var(--nav-schrift); white-space: nowrap;
  }
  .nav-gruppe-btn { display: none; }
  .nav-liste > li::after {
    content: ''; position: absolute; left: 0; right: 1px; bottom: 0; height: 2px;
    background: transparent; pointer-events: none;
    transition: background-color var(--dauer) var(--easing);
  }
  .nav-liste > li:hover::after,
  .nav-liste > li:focus-within::after { background: var(--nav-hover-linie); }
  /* Aktiv schlaegt Hover (steht danach, gleiche Spezifitaet). */
  .nav-liste > li.current::after { background: var(--rot); }
  /* Feiner senkrechter Trenner zwischen Seiten-Links und Onlineshop */
  .nav-extern::before {
    content: ''; position: absolute; top: 50%; left: calc(var(--nav-abstand) / -2);
    width: 1px; height: 20px; margin-top: -10px; background: var(--linie-stark);
  }
  /* Dropdown-Panel: weiss, ruhiger Schatten, beginnt ohne Luecke an der
     Header-Unterkante (das <li> fuellt die volle Headerhoehe). Links um das
     Innenpolster versetzt, damit die Eintraege mit der Beschriftung fluchten. */
  /* Dropdown-Panel (Neugestaltung 09/2026, Kundenfeedback „Dropdown gefaellt
     mir noch nicht"): schmal, Versalien wie die Hauptnavigation, grau ->
     schwarz beim Hover mit rotem Strich, der von links einlaeuft; aktuelle
     Seite rot. Das Panel blendet weich ein. */
  .nav-drop {
    position: absolute; top: 100%; left: -24px; z-index: 220;
    min-width: 260px; padding: 16px 0 18px;
    background: var(--weiss);
    border-top: 1px solid var(--kopf-linie);
    box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.25), 0 2px 0 rgba(0, 0, 0, 0.02);
  }
  .nav-liste > li[data-gruppe]:hover > .nav-drop,
  .nav-liste > li[data-gruppe]:focus-within > .nav-drop { display: block; animation: navDropEin 0.22s var(--easing) both; }
  .nav-liste > li[data-gruppe].nav-zu > .nav-drop { display: none; }
  @keyframes navDropEin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .nav-drop a {
    position: relative; display: block; padding: 9px 24px;
    font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 1.35;
    letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap;
    color: var(--fast-schwarz);
    transition: color var(--dauer) var(--easing), padding-left var(--dauer) var(--easing);
  }
  .nav-drop a::before {
    content: ''; position: absolute; left: 24px; top: 50%; width: 0; height: 2px; margin-top: -1px;
    background: var(--rot); transition: width var(--dauer) var(--easing);
  }
  .nav-drop a:hover, .nav-drop a:focus-visible { color: var(--rot-text); padding-left: 44px; background: none; }
  .nav-drop a:hover::before, .nav-drop a:focus-visible::before { width: 12px; }
  .nav-drop a[aria-current="page"] { color: var(--rot-text); }
  .nav-drop a:focus-visible { outline-offset: -3px; border-radius: 2px; }
  .nav-aktion { display: flex; align-items: center; }
  .nav-shop-mobil, .nav-kontakt { display: none; }
}

/* ---- Mobil (bis 1120 px) ----------------------------------------------
   64 px Leiste mit Logo und Burger. Das Menue klappt als vollbreite,
   bildschirmhohe Flaeche auf: Eintraege 20 px / 700 / Versalien mit klaren
   Trennlinien, Gruppen als Akkordeon (Chevron-Button, aria-expanded),
   unten „Termin anfragen" in voller Breite, der Onlineshop-Link und die
   Telefonnummer. Alle Ziele mindestens 44 px hoch. */
@media (max-width: 1120px) {
  .nav-burger { display: inline-block; }
  .hauptnav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column;
    height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
    overflow-y: auto; overscroll-behavior: contain;
    padding: 4px var(--pad) 28px;
    background: var(--weiss); box-shadow: inset 0 1px 0 var(--kopf-linie);
  }
  .hauptnav.offen { display: flex; }
  body.nav-offen { overflow: hidden; }
  .nav-liste > li {
    display: flex; flex-wrap: wrap; align-items: center;
    border-bottom: 1px solid var(--linie);
  }
  .nav-liste > li > a {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
    min-height: 60px; font-size: 20px;
  }
  .nav-liste > li.current > a { color: var(--rot-text); }
  .nav-gruppe-btn {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 48px; width: 48px; height: 48px; margin-right: -12px;
  }
  .nav-drop { flex: 1 0 100%; margin: -6px 0 0; padding: 0 0 14px; }
  .nav-gruppe-btn[aria-expanded="true"] + .nav-drop { display: block; }
  .nav-drop a {
    display: flex; align-items: center; min-height: 44px;
    padding: 2px 0 2px 16px; font-size: 17px; line-height: 1.35;
    color: var(--text);
  }
  /* Der Onlineshop steht mobil unten bei „Termin anfragen" (.nav-shop-mobil). */
  .nav-liste > .nav-extern { display: none; }
  .nav-aktion {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    margin-top: auto; padding-top: 32px;
  }
  .nav-cta { min-height: 52px; font-size: 16px; }
  .nav-shop-mobil {
    display: inline-flex; align-items: center; justify-content: center; align-self: center;
    min-height: 44px; padding: 0 8px;
    font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1.2;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--fast-schwarz); text-decoration: none;
  }
  .nav-kontakt {
    margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--linie);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 15px; color: var(--text-leise);
  }
  .nav-kontakt a {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--fast-schwarz); font-weight: 400; text-decoration: none;
  }
  .nav-kontakt a:hover, .nav-shop-mobil:hover { color: var(--rot-text); }
}
/* Tablet: Menue als linksbuendige Spalte statt ueber die volle Breite —
   ein 900 px breiter Button wirkt nicht mehr wie ein Bedienelement. */
@media (min-width: 700px) and (max-width: 1120px) {
  .nav-liste, .nav-aktion { width: 100%; max-width: 560px; }
}

/* ---------- Brotkrumen ---------- */
.brotkrumen {
  background: var(--grau-heller);
  border-bottom: 1px solid var(--grau-linie);
  font-size: 0.92rem;
}
.brotkrumen ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px;
  list-style: none; margin: 0; padding: 9px 0;
}
.brotkrumen li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brotkrumen li + li::before {
  content: '›'; color: var(--text); opacity: 0.55; line-height: 1;
}
.brotkrumen a { color: var(--text); text-decoration: none; }
.brotkrumen a:hover { color: var(--rot-text); text-decoration: underline; }
.brotkrumen [aria-current="page"] {
  color: var(--text); opacity: 0.82;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) { .brotkrumen { font-size: 0.86rem; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: clamp(420px, 66vh, 720px);
  display: flex; align-items: center; justify-content: center;
  text-align: center; background: var(--schwarz);
}
.hero-medien, .hero-medien video, .hero-medien img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
/* Motiv unten im Bild (z. B. Fahrer vor der Oberen Stadt auf „Unsere Bikes") */
.hero--fokus-unten .hero-medien img { object-position: 50% 78%; }
/* Gemessen am Hero-Poster der Startseite: mit 0.38/0.48/0.66 kam der Kicker
   („CUBE STORE DINGOLFING · BY …", 15 px/700 und damit kein grosser Text) an
   den hellsten Stellen nur auf 3.9:1 und die H1 auf 3.6:1 — bei laufendem
   Video kann ein Einzelbild noch heller sein. Mit 0.48/0.56/0.70 liegen
   Kicker bei 5.1:1, H1 bei 4.9:1 und Lead bei 7.6:1. */
.hero-medien::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.56) 55%, rgba(0, 0, 0, 0.70) 100%);
}
.hero--overlay-leicht .hero-medien::after { background: rgba(0, 0, 0, 0.38); }
/* Staerkerer Kontrast fuer Hero-Bilder mit viel Himmel/Helligkeit (z. B. Drohnenfotos),
   damit der weisse Titeltext zuverlaessig lesbar bleibt */
.hero--kontrast .hero-medien::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.58) 45%, rgba(0, 0, 0, 0.8) 100%);
}
.hero-inhalt { position: relative; z-index: 2; padding: 60px 20px; max-width: 900px; }
.hero-inhalt h1, .hero-inhalt h2, .hero-inhalt p { color: #fff; }
.hero-inhalt .hero-titel { font-size: var(--fs-4); margin-bottom: 0.25em; }
.hero-inhalt .kicker {
  font-family: var(--font-display); font-weight: 400;
  letter-spacing: 0.04em; font-size: var(--fs-1); margin-bottom: 0.4em;
  max-width: 62ch; margin-left: auto; margin-right: auto;
}
.hero-inhalt p { font-size: var(--fs-1); }
/* Button-Zeilen uebernehmen die Ausrichtung ihrer Sektion:
   linksbuendige Sektion -> linksbuendige Buttons, zentrierte Sektion
   (.zentriert, Hero) -> zentrierte Buttons. */
.hero-buttons { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; margin-top: 22px; }
.hero .hero-buttons, .zentriert .hero-buttons, .hero-buttons.zentriert { justify-content: center; }
.btn-zeile { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; }
.zentriert .btn-zeile, .btn-zeile.zentriert { justify-content: center; }
/* Chipleiste im Hero („In der Zwischenzeit") */
.hero-chips {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px; margin-top: 20px;
}
.hero-chips-titel {
  font-family: var(--font-display);
  letter-spacing: 0.02em; font-size: 0.95rem; color: #fff; opacity: 0.9;
}
.hero-chips .chip {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.28);
  color: #fff; text-decoration: none; font-size: 0.94rem; line-height: 1.35;
}
.hero-chips .chip:hover { background: #fff; color: var(--rot); border-color: #fff; }

/* ---------- Karten ---------- */
/* align-items:stretch + height:100% -> alle Karten einer Reihe sind gleich
   hoch, auch wenn Titel unterschiedlich viele Zeilen brauchen. */
.karten { display: grid; gap: clamp(20px, 3vw, 34px); align-items: stretch; }
.karten > .karte { height: 100%; }
@media (min-width: 800px) { .karten--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 560px) and (max-width: 799px) { .karten--3 { grid-template-columns: repeat(2, 1fr); } }
/* Bei langen Listen (Modelljahr, Ratgeber, Neuigkeiten) waeren drei Spalten im
   jetzt 1580px breiten Container unnatuerlich breite Kacheln -> ab 1200px vier.
   Muss nach .karten--3 stehen, damit die Kombination "karten--3 karten--4"
   greift. */
@media (min-width: 1200px) { .karten--4 { grid-template-columns: repeat(4, 1fr); } }
.karte {
  /* cube.eu-Stil (09/2026): keine Box, kein Schatten — Foto, darunter Text */
  background: transparent; border-radius: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.karte img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.karte-inhalt { padding: 22px 0 0; display: flex; flex-direction: column; flex: 1; }
.karte-inhalt h2, .karte-inhalt h3 { color: var(--fast-schwarz); }
.karte-inhalt .trenner { margin: 0 0 16px; }
.karte-inhalt .btn { margin-top: auto; align-self: flex-start; }
.karte-inhalt p:last-of-type { margin-bottom: 1.2em; }

/* News-Karten */
.news-karte { text-decoration: none; color: inherit; }
.karte-bild { display: block; position: relative; overflow: hidden; }
.karte-bild img { transition: transform 0.3s ease; }
.news-karte:hover .karte-bild img { transform: scale(1.06); }
.karte-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--rot-flaeche); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.03em; font-size: 0.9rem; line-height: 1;
  padding: 6px 13px 5px; border-radius: 999px;
}
.news-karte .karte-inhalt h3, .video-karte .karte-inhalt h3 {
  color: var(--fast-schwarz); text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); line-height: 1.12;
}
.news-karte .datum {
  font-size: 0.9rem; color: var(--text-leise);
  letter-spacing: 0.02em; margin-bottom: 6px;
}
.news-karte .mehr {
  margin-top: auto; align-self: flex-start; padding-bottom: 3px; border-bottom: 3px solid currentColor;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9rem; color: var(--fast-schwarz);
}
.news-karte:hover .mehr { color: var(--rot-text); }
.section--rot .karte, .section--rot .news-karte .karte-inhalt h3 { color: var(--fast-schwarz); }
.section--rot .news-karte .karte-inhalt h3 { color: var(--rot); }

/* ---------- Galerie ---------- */
.galerie { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .galerie { grid-template-columns: repeat(4, 1fr); } }
.galerie a { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.galerie img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform 0.25s ease; }
.galerie a:hover img { transform: scale(1.05); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 400; display: none;
  background: rgba(0, 0, 0, 0.92); align-items: center; justify-content: center;
}
.lightbox.offen { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; box-shadow: 0 0 60px rgba(0,0,0,0.6); }
.lightbox button {
  position: absolute; background: none; border: 0; color: #fff;
  font-size: 2.4rem; cursor: pointer; padding: 14px; line-height: 1;
}
.lightbox .lb-schliessen { top: 10px; right: 16px; }
.lightbox .lb-zurueck { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-weiter { right: 8px; top: 50%; transform: translateY(-50%); }


/* ---------- Preis-/Service-Karten (Werkstatt) ---------- */
.preis-karten { display: grid; gap: clamp(20px, 3vw, 34px); align-items: start; }
@media (min-width: 860px) { .preis-karten { grid-template-columns: 1fr 1fr; } }
.preis-karte {
  background: #fff; border-radius: var(--radius); box-shadow: var(--schatten);
  padding: clamp(24px, 3vw, 38px); border-top: 6px solid var(--rot);
  display: flex; flex-direction: column;
}
.preis-karte h3 { font-size: var(--fs-2); }
.preis-zeile { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.preis-betrag { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.6rem + 2vw, 3rem); color: var(--rot); }
.preis-erst { font-size: 0.98rem; background: var(--grau-hell); padding: 4px 12px; border-radius: 999px; }
.preis-karte ul { margin: 0 0 22px; padding-left: 0; list-style: none; }
.preis-karte ul li { padding: 7px 0 7px 28px; border-bottom: 1px solid var(--grau-linie); position: relative; }
.preis-karte ul li::before { content: '✓'; position: absolute; left: 2px; color: var(--rot); font-weight: 700; }
.preis-karte .btn { align-self: flex-start; margin-top: auto; }
.info-box {
  background: none; border-top: 1px solid var(--linie-stark); padding: 20px 0 0; margin-top: 34px;
}
.info-box h4 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 1.15rem; color: var(--fast-schwarz);
}

/* Blurbs (3 Icons/Claims) */
.blurbs { display: grid; gap: 24px; text-align: center; }
@media (min-width: 720px) { .blurbs { grid-template-columns: repeat(3, 1fr); } }
.blurb h4 { color: var(--rot-text); letter-spacing: 0.01em; font-size: 1.15rem; }

/* ---------- Öffnungszeiten ---------- */
.zeiten { width: 100%; border-collapse: collapse; }
.zeiten th, .zeiten td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--grau-linie); }
.zeiten td:last-child { text-align: right; font-weight: 500; }
.zeiten tr.geschlossen td:last-child { color: var(--rot-text); font-weight: 600; }
.zeiten-box { background: var(--grau-hell); border-radius: var(--radius); padding: 26px; }

/* ---------- FAQ ---------- */
/* volle Containerbreite wie alle anderen Sektionen; nur der Antworttext
   bekommt eine Lesebreite (linksbuendig, gleiche linke Kante). */
.faq-liste { max-width: none; margin: 0; }
.faq-antwort > p, .faq-antwort > ul, .faq-antwort > ol { max-width: var(--lesebreite); }
/* FAQ als ruhige Linienliste (09/2026, wie .faq-zeile der Startseite) statt
   einzelner Kaesten. */
.faq-liste { border-top: 1px solid var(--linie-stark); }
.faq-item { background: none; border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; margin: 0; }
.faq-item summary {
  cursor: pointer; padding: 22px 56px 22px 0; font-weight: 400; color: var(--fast-schwarz);
  list-style: none; position: relative; font-size: clamp(1.05rem, 1rem + 0.35vw, 1.28rem);
  line-height: 1.4; text-transform: none; transition: color var(--dauer) var(--easing);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  background:
    linear-gradient(currentColor, currentColor) center / 18px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 18px no-repeat;
  transition: transform var(--dauer) var(--easing);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover, .faq-item[open] summary { color: var(--rot-text); }
.faq-antwort { padding: 0 56px 24px 0; }
.section--grau .faq-item { background: #fff; }

/* ---------- Formulare ---------- */
.formular { max-width: 760px; }
.formular fieldset { border: 0; padding: 0; margin: 0 0 10px; }
.formular legend {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.25rem; color: var(--rot-text); padding: 0; margin: 18px 0 12px;
  border-bottom: 2px solid var(--grau-linie); width: 100%; padding-bottom: 6px;
}
.feld-reihe { display: grid; gap: 14px; margin-bottom: 14px; }
@media (min-width: 640px) { .feld-reihe--2 { grid-template-columns: 1fr 1fr; } .feld-reihe--3 { grid-template-columns: 2fr 1fr 1fr; } }
.feld label { display: block; font-weight: 500; margin-bottom: 5px; }
/* Das Sternchen ist Text (18 px/500) -> 4.5:1; --rot kam auf 3.8:1. */
.feld label .pflicht { color: var(--rot-text); }
.feld input, .feld select, .feld textarea {
  width: 100%; padding: 11px 14px; border: 1px solid #c9c9c9;
  border-radius: var(--radius); font: inherit; background: #fff; color: var(--text);
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: 2px solid var(--rot); outline-offset: 1px; border-color: var(--rot);
}
/* Checkboxen (Einwilligung, Newsletter): 20-px-Kaestchen in Markenrot, der
   Text als ruhiger Lesetext (400) statt fett — vorher stand der gesamte
   Einwilligungstext im 500er-Schnitt der Feldbeschriftungen. */
.feld--check { display: flex; gap: 12px; align-items: flex-start; }
.feld--check input[type="checkbox"] {
  width: 20px; height: 20px; flex: 0 0 20px; margin: 2px 0 0; padding: 0;
  accent-color: var(--rot-flaeche); cursor: pointer;
}
.feld--check label {
  margin: 0; font-weight: 400; font-size: 0.95rem; line-height: 1.55;
  color: var(--text); cursor: pointer;
}
.feld--check label a { color: var(--rot-text); }
/* Abstand zwischen Einwilligung und Absende-Button (Termin, Newsletter) */
.formular > .feld--check { margin: 4px 0 22px; }
.formular .hinweis { font-size: 0.95rem; color: var(--text-leise); }
.hp-feld { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.form-hinweis-box {
  background: var(--grau-hell); border-radius: var(--radius); padding: 14px 18px;
  margin: 14px 0; font-size: 0.98rem;
}
.form-aufklapp[hidden] { display: none; }

/* ---------- Embeds / Consent ---------- */
.embed-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.embed-platzhalter {
  background: var(--grau-hell); border: 1px dashed #bbb; border-radius: var(--radius);
  padding: clamp(28px, 5vw, 56px) 24px; text-align: center;
}
.section--dunkel .embed-platzhalter { background: #1c1c1c; border-color: #444; color: #ddd; }
.embed-platzhalter p { max-width: 620px; margin: 0 auto 16px; }
/* Die Checkbox war mit 13x13 px das kleinste Bedienelement der Seite.
   20 px Kaestchen plus 44 px hohes Label -> bequem treffbar, auch am Telefon. */
.embed-platzhalter .merken {
  display: inline-flex; gap: 10px; align-items: center; font-size: 0.95rem;
  margin-top: 12px; color: var(--text-leise); min-height: 44px; cursor: pointer;
}
.embed-platzhalter .merken input[type="checkbox"] {
  width: 20px; height: 20px; flex: 0 0 auto; margin: 0; accent-color: var(--rot-flaeche);
}
.section--dunkel .embed-platzhalter .merken { color: #aaa; }
.embed-wrap iframe { display: block; width: 100%; border: 0; }

/* Click-to-play Video */
.video-ctp {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--schatten); background: #000; cursor: pointer; aspect-ratio: 16/9;
}
.video-ctp--hoch { aspect-ratio: 9/16; max-width: 340px; margin: 0 auto; }
.video-ctp picture { display: block; width: 100%; height: 100%; }
/* Poster fuellt den Player; der 80vh-Deckel fuer Inhaltsbilder (.medienblock)
   gilt hier nicht — er haette das Poster kuerzer als den Player gemacht. */
.video-ctp img {
  display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.75;
  max-height: none; border-radius: 0; box-shadow: none;
}
.video-ctp--hoch { max-height: 80vh; }
.video-ctp .play {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; color: #fff;
  background: none; border: 0; cursor: pointer; font: inherit; width: 100%;
}
.video-ctp .play .play-kreis {
  width: 74px; height: 74px; border-radius: 50%; background: var(--rot-flaeche);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; color: #fff; box-shadow: var(--schatten);
  transition: transform var(--dauer, 0.18s) var(--easing, ease);
}
.video-ctp:hover .play .play-kreis { transform: scale(1.1); }
.video-ctp .play span.hinweis { font-size: 0.9rem; background: rgba(0,0,0,0.55); padding: 4px 12px; border-radius: 999px; }
.video-ctp video { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* Video als Karte (Zubehoer-Slider der CUBE-2027-Seite): fuellt die 4:5-
   Bildflaeche der Karte; das 9:16-Reel laeuft danach vollstaendig (contain). */
.ck-bild > .video-ctp--karte {
  position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: #111;
}
.video-ctp--karte img { opacity: 0.94; }
/* Play-Knopf unten links statt mittig — das Gesicht im Poster bleibt frei */
.video-ctp--karte .play {
  flex-direction: row; align-items: flex-end; justify-content: flex-start; gap: 12px; padding: 20px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 38%);
}
.video-ctp--karte .play .play-kreis { width: 60px; height: 60px; font-size: 1.35rem; }
.video-ctp--karte .play span.hinweis { margin-bottom: 16px; } /* mittig zum 60-px-Kreis */
.video-ctp--karte .play span.hinweis {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.78rem;
}

/* Video-Karten (Zwei-Klick-YouTube, Thumbnail + Titel bleibt sichtbar) */
.video-karte { padding: 0; cursor: default; }
.video-karte-thumb {
  aspect-ratio: 16 / 9; background-size: cover; background-position: center;
  background-color: #111; position: relative; padding: 0; border: 0; border-radius: 0;
  margin: 0; cursor: pointer;
}
.video-karte-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 100%);
}
.video-karte-play {
  position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; gap: 12px;
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; padding: 0; z-index: 1;
}
/* Vor der Zustimmung zu YouTube: neutrale Flaeche statt Vorschaubild (das
   liegt bei YouTube und wird erst nach Zustimmung per JS eingesetzt). */
.video-karte-thumb:not(.ist-frei) {
  background-image: radial-gradient(120% 95% at 50% 38%, #2b2b2b 0%, #141414 72%);
}
.video-karte-hinweis {
  max-width: 32ch; padding: 0 16px; text-align: center;
  font-family: var(--font-body); font-size: 0.8rem; line-height: 1.4; color: rgba(255, 255, 255, 0.8);
}
.video-karte-thumb.ist-frei .video-karte-hinweis { display: none; }
.video-karte-play .play-kreis {
  width: 62px; height: 62px; border-radius: 50%; background: var(--rot-flaeche);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff; box-shadow: var(--schatten);
  transition: transform var(--dauer, 0.18s) var(--easing, ease);
}
.video-karte-thumb:hover .play-kreis { transform: scale(1.1); }
.video-karte .embed-wrap { border-radius: 0; box-shadow: none; aspect-ratio: 16 / 9; }
.video-karte .embed-wrap iframe { height: 100%; aspect-ratio: 16 / 9; }
.video-karte .karte-inhalt { padding: 18px 22px 22px; }
.video-karte .karte-inhalt h3 {
  font-family: var(--font-body); letter-spacing: normal;
  font-size: 1.1rem; font-weight: 600; line-height: 1.4;
  color: var(--fast-schwarz); margin: 0;
}

/* Cookie-Banner + Privatsphaere-Dialog — Neuaufbau 09/2026 (Kundenwunsch:
   einmal zustimmen statt jedes Video einzeln). Karte unten links auf
   Fast-Schwarz mit roter Oberkante; „Alle akzeptieren" und „Nur notwendige"
   gleich gross nebeneinander, „Einstellungen" als Textknopf darunter. */
.consent-banner {
  position: fixed; z-index: 350;
  left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  max-width: 620px; max-height: calc(100vh - 24px); overflow-y: auto;
  background: var(--fast-schwarz); color: #cfcfcf;
  border-top: 3px solid var(--rot-flaeche); border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  padding: 22px 22px 14px;
  /* Einblenden per Keyframes (ohne fill-mode): laeuft die Animation nicht,
     steht der Banner trotzdem voll sichtbar da. */
  animation: consent-rein 0.35s var(--easing);
}
.consent-banner[hidden] { display: none; }
@keyframes consent-rein { from { opacity: 0; transform: translateY(16px); } }
@media (min-width: 700px) {
  .consent-banner { left: 24px; right: auto; bottom: 24px; width: calc(100% - 48px); padding: 26px 28px 16px; }
}
.consent-banner h2 {
  margin: 0 0 10px; color: #fff; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.1;
}
.consent-banner p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: #cfcfcf; }
.consent-banner a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.consent-banner a:hover { color: #ffb3ae; }
.consent-banner-aktionen {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; align-items: center;
}
.consent-banner-aktionen .btn { width: 100%; text-align: center; padding: 0.85em 1em; font-size: 0.95rem; }
.consent-mehr {
  grid-column: 1 / -1; justify-self: center; min-height: 44px; padding: 0 8px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.92rem; color: #fff; text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--dauer) var(--easing);
}
.consent-mehr:hover { color: #ffb3ae; }
/* Telefon: kompakter, damit der Banner nicht den halben Bildschirm fuellt —
   Buttons bleiben nebeneinander und >= 44 px hoch. */
@media (max-width: 699px) {
  .consent-banner { padding: 18px 18px 8px; }
  .consent-banner h2 { margin-bottom: 8px; font-size: 1.15rem; }
  .consent-banner p { font-size: 0.86rem; line-height: 1.5; }
  .consent-banner-aktionen { gap: 8px; margin-top: 14px; }
  .consent-banner-aktionen .btn { font-size: 0.86rem; padding: 0.9em 0.5em; }
}
@media (max-width: 339px) { .consent-banner-aktionen { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .consent-banner { animation: none; } }

.consent-dialog {
  border: 0; border-radius: 8px; padding: 28px 26px 24px;
  max-width: 560px; width: calc(100% - 32px); max-height: calc(100vh - 32px); overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); color: var(--text);
}
.consent-dialog::backdrop { background: rgba(10, 10, 10, 0.6); }
.consent-dialog h2 {
  margin: 0 48px 10px 0; color: var(--fast-schwarz);
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.1;
}
.consent-dialog > p { margin: 0 0 18px; font-size: 0.95rem; line-height: 1.6; color: var(--text-leise); }
.consent-optionen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.consent-optionen li { border-bottom: 1px solid var(--linie); }
.consent-option { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; cursor: pointer; }
.consent-option input {
  width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--rot-flaeche); cursor: pointer;
}
.consent-option input:disabled { cursor: default; }
.consent-option-titel { display: block; font-weight: 700; color: var(--fast-schwarz); }
.consent-option-text { display: block; margin-top: 2px; font-size: 0.9rem; line-height: 1.5; color: var(--text-leise); }
.consent-dialog .consent-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.consent-schliessen {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--fast-schwarz); font-size: 1.9rem; line-height: 1;
  transition: background var(--dauer) var(--easing);
}
.consent-schliessen:hover { background: var(--grau-hell); }

/* ---------- Newsletter-Band + Footer ----------
   Neuaufbau 09/2026 nach Kundenfeedback („Ich finde den Footer nicht
   aufgeraeumt"). Newsletter-Band und Footer bilden EINEN Block in
   Fast-Schwarz; feine Linien in Containerbreite trennen die Zonen. Vorher
   stand ein Off-White-Band zwischen Seiteninhalt und schwarzem Footer —
   nach dunklen oder grauen Schlusssektionen ergab das einen unruhigen
   Hell-Dunkel-Wechsel. Wortlaut von Angebot und Fussnote unveraendert.
   Typografie: Roboto Condensed — Koepfe 700 / 13 px / Versalien / 1,5 px
   Sperrung, Links 400 / 16 px. Kontraste siehe Tokens (--footer-*). */
.newsletter-cta {
  background: var(--footer-grund); color: var(--footer-text);
  /* Haarlinie oben trennt das Band von schwarzen Schlusssektionen (#000). */
  border-top: 1px solid var(--footer-linie);
}
.newsletter-inner {
  display: grid; gap: 24px; align-items: end;
  padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(48px, 5vw, 72px);
}
/* Gleiches 12-Spalten-Raster wie die obere Footer-Zone: Button und Fussnote
   fluchten mit der Zeiten- (900–1259 px) bzw. der ersten Linkspalte. */
@media (min-width: 900px) {
  .newsletter-inner { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .nl-text { grid-column: 1 / span 7; }
  .nl-aktion { grid-column: 9 / span 4; }
}
@media (min-width: 1260px) { .nl-aktion { grid-column: 8 / span 5; } }
.newsletter-cta .kapitel {
  margin: 0 0 18px; color: var(--footer-kopf);
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: 1.5px; line-height: 1.3;
}
.newsletter-cta h2 {
  font-size: clamp(1.75rem, 1.15rem + 2vw, 3rem); line-height: 1.02;
  margin: 0 0 14px; color: #fff; max-width: 24ch;
}
.newsletter-cta .nl-text p:not(.kapitel) { margin: 0; max-width: 52ch; color: var(--footer-text); }
.newsletter-cta .fussnote {
  font-size: 0.85rem; line-height: 1.55; color: var(--footer-leise);
  margin: 18px 0 0; max-width: 56ch;
}

.site-footer {
  background: var(--footer-grund); color: var(--footer-text);
  font-size: 1rem; line-height: 1.6;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a {
  color: var(--footer-link); text-decoration: none;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color var(--dauer) var(--easing);
}
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer a[aria-current="page"] { color: #fff; }
/* Spaltenkoepfe: kleine gesperrte Labels (h2 fuer eine saubere Gliederung;
   die globalen h2-Werte werden hier vollstaendig ueberschrieben). */
.footer-kopf {
  margin: 0 0 18px; color: var(--footer-kopf);
  font-family: var(--font-body); font-weight: 700; font-size: 13px; line-height: 1.3;
  letter-spacing: 1.5px; text-transform: uppercase;
}

/* Obere Zone. Mobil: Marke und Oeffnungszeiten volle Breite, Links
   zweispaltig (einspaltig unter 360 px). Ab 900 px Marke | Zeiten und die
   drei Linkspalten darunter; ab 1260 px alles in einer Reihe im
   12-Spalten-Raster: Marke 4 · Zeiten 3 · Links 5 (je Spalte >= 140 px,
   damit kein Eintrag umbricht). */
.footer-oben {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px 24px;
  padding: clamp(72px, 7vw, 96px) 0 clamp(56px, 6vw, 80px);
  border-top: 1px solid var(--footer-linie);
}
.footer-logo { margin: 0 0 26px; }
.footer-logo img {
  --logo-h: 38px;
  height: var(--logo-h); width: auto; max-width: none;
  /* transparenter Bildrand links (0,28 x Hoehe) -> Logokante auf Containerkante */
  margin-left: calc(var(--logo-h) * -0.28);
}
/* Mobil so gross wie das Header-Logo: gleiche Bilddatei, kein Extra-Download. */
@media (max-width: 699px) { .footer-logo img { --logo-h: 30px; } }
/* Spruch „Wir haben Dein perfektes Rad." — Markenzeile ueber dem Claim */
.footer-slogan {
  margin: 0 0 12px; color: #fff;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.75rem); line-height: 1.05;
}
.footer-claim { margin: 0 0 26px; max-width: 46ch; color: var(--footer-text); text-wrap: balance; }
.footer-kontakt {
  font-style: normal; display: flex; flex-direction: column; align-items: flex-start;
}
.footer-kontakt span { margin-bottom: 10px; }
.footer-kontakt a { padding: 2px 0; }
.footer-zeiten {
  display: grid; grid-template-columns: max-content max-content; gap: 10px 28px; margin: 0;
}
.footer-zeiten div { display: contents; }
.footer-zeiten dt { color: var(--footer-text); }
.footer-zeiten dd { margin: 0; color: var(--footer-link); font-variant-numeric: tabular-nums; }
/* Live-Status: erscheint nur mit JavaScript (data-offen gesetzt) — ohne JS
   stuende sonst dieselbe Zeitenliste ein zweites Mal darunter. */
.site-footer .oeffnungs-status--footer {
  display: flex; align-items: flex-start; margin: 24px 0 0;
  color: var(--footer-link); font-size: 0.94rem; line-height: 1.45;
}
/* Laengere Meldungen („… Dienstag wieder ab 09:00 Uhr") brechen in der
   schmalen Spalte um: Punkt auf Hoehe der ersten Zeile, Zeilen ausgeglichen. */
.site-footer .oeffnungs-status--footer .status-punkt { margin-top: 0.42em; }
.site-footer .oeffnungs-status--footer .status-text { text-wrap: balance; }
.site-footer .oeffnungs-status--footer:not([data-offen]) { display: none; }
.site-footer .oeffnungs-status--footer .status-punkt { background: #8f8f8f; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08); }
.site-footer .oeffnungs-status--footer[data-offen="ja"] .status-punkt { background: #3ecf6b; box-shadow: 0 0 0 4px rgba(62, 207, 107, 0.2); }
.site-footer .oeffnungs-status--footer[data-offen="nein"] .status-punkt { background: var(--rot); box-shadow: 0 0 0 4px rgba(239, 50, 44, 0.2); }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 24px; }
.footer-links a { display: inline-block; padding: 5px 0; line-height: 1.5; }
@media (max-width: 359px) { .footer-links { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 700px) { .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .footer-oben { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .footer-marke { grid-column: 1 / span 8; }
  .footer-zeiten-block { grid-column: 9 / span 4; }
  .footer-links { grid-column: 1 / -1; }
}
@media (min-width: 1260px) {
  .footer-marke { grid-column: 1 / span 4; }
  .footer-zeiten-block { grid-column: 5 / span 3; }
  .footer-links { grid-column: 8 / span 5; }
}

/* Mittlere Zeile: Verbund links, Social Media rechts — schlanke Textlinks */
.footer-mitte {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 16px 48px; padding: 26px 0; border-top: 1px solid var(--footer-linie);
}
.footer-reihe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; }
.footer-reihe .footer-kopf { margin: 0; }
.footer-reihe ul { display: flex; flex-wrap: wrap; gap: 0 28px; }
.footer-reihe a { display: inline-block; padding: 6px 0; }

/* Fusszeile: Copyright + Rechtliches links, Umsetzung rechts */
.footer-unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 10px 40px; padding: 22px 0 30px; border-top: 1px solid var(--footer-linie);
  font-size: 0.875rem; color: var(--footer-leise);
}
.footer-recht { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; }
.footer-recht p, .footer-umsetzung { margin: 0; }
.footer-recht ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
.footer-unten a { color: var(--footer-text); }
button.linkstil {
  background: none; border: 0; color: var(--footer-text); cursor: pointer;
  /* Eigenstaendiger Bedienknopf (Privatsphaere-Einstellungen) und kein Link
     im Fliesstext -> 44 px Trefferflaeche; der negative Rand haelt die
     Grundlinie in der Fusszeile an derselben Stelle wie die Links. */
  font: inherit; padding: 11px 0; margin: -11px 0; text-decoration: none;
  min-height: 44px; text-underline-offset: 3px;
  transition: color var(--dauer) var(--easing);
}
button.linkstil:hover { color: #fff; text-decoration: underline; }

@media (max-width: 699px) {
  .footer-reihe { flex-direction: column; align-items: flex-start; gap: 6px; }
  .footer-unten { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-recht { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* Touch: jedes Ziel im Footer mindestens 44 px hoch */
@media (max-width: 1120px), (pointer: coarse) {
  .footer-links a, .footer-kontakt a, .footer-reihe a, .footer-unten a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  }
  /* Ohne den negativen Rand: die 44-px-Flaeche des Knopfs darf die Links
     darueber nicht ueberlappen. */
  button.linkstil { display: inline-flex; align-items: center; padding: 0; margin: 0; }
}

/* ---------- Beitrag (News) ---------- */
/* Beitragskopf (Kundenfeedback 09/2026): links Zurueck-Link, Meta und Titel,
   rechts das Titelbild — nie beschnitten, natuerliches Seitenverhaeltnis
   (--r aus build.py), hoechstens 460 px hoch. Mobil: Titel, darunter Bild. */
.beitrag-kopfbereich { padding-bottom: 0; }
.beitrag-kopfraster { display: grid; gap: clamp(24px, 3.5vw, 56px); align-items: center; }
@media (min-width: 900px) { .beitrag-kopfraster { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.beitrag-kopftext .beitrag-kopf { max-width: none; }
.beitrag-titel { margin: 0; font-size: clamp(2rem, 1.35rem + 1.9vw, 3.15rem); line-height: 1.04; text-wrap: balance; }
.beitrag-titelbild { margin: 0; }
.beitrag-titelbild picture { display: block; }
.beitrag-titelbild img {
  display: block; margin: 0 auto; height: auto; border-radius: var(--radius);
  width: min(100%, calc(min(56vh, 460px) * var(--r, 1.5)));
}
/* Kontaktformular in Beitraegen (ehemals Gravity Forms, z. B. Gebaerdensprache) */
.beitrag-formular { margin-top: 4px; }
.beitrag-formular-hinweis { margin: 0 0 18px; color: var(--text-leise); }
.beitrag-formular .formular { max-width: none; }
/* Schmale Lesespalte fuer Beitraege: Text UND Bilder hoechstens 780 px breit,
   links buendig unter dem Titel (gleiche Kante wie Logo und Kopfbereich) —
   kein Bild wird mehr in die volle Breite gezogen. */
.beitrag-sektion--schmal .container > * { max-width: 780px; }
.beitrag-sektion--schmal .leseblock { max-width: 780px; }
.beitrag-sektion--schmal .medienblock img,
.beitrag-sektion--schmal .leseblock img,
.beitrag-sektion--schmal .breite-figur img {
  display: block; width: auto; max-width: 100%; height: auto; margin-left: auto; margin-right: auto;
}
.beitrag-meta { color: var(--text-leise); font-size: 0.95rem; letter-spacing: 0.01em; margin: 0; }
.beitrag-meta .beitrag-kategorie { color: var(--rot-text); font-weight: 600; }
.beitrag-inhalt h2 { margin-top: 1.4em; }
.beitrag-inhalt img { border-radius: var(--radius); box-shadow: var(--schatten); margin: 1.5em 0; }
.zurueck-link { display: inline-block; margin-bottom: 18px; font-weight: 600; text-decoration: none; }
.zurueck-link::before { content: '← '; }

/* Beitrags-Sektionen: full-bleed mit Leseblock (880px) und breiten Medien */
/* Lesespalte langer Beitraege: schmaler als der Container (Lesbarkeit),
   aber LINKS am Container ausgerichtet — die linke Kante fluchtet damit mit
   allen uebrigen Sektionen derselben Seite. */
.beitrag-kopf {
  max-width: 920px; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px 24px;
  align-items: baseline; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: clamp(22px, 3vw, 36px);
  border-bottom: 1px solid var(--grau-linie);
}
.beitrag-kopf .zurueck-link { margin-bottom: 0; }
.leseblock { max-width: 920px; margin: 0; }
.leseblock .textblock h2, .leseblock > h2 { margin-top: 1.4em; }
.leseblock .btn-zeile { justify-content: flex-start; margin-top: 1.6em; }
.leseblock figure { margin: 1.5em 0; }
.leseblock img { border-radius: var(--radius); box-shadow: var(--schatten); }
.medienblock { text-align: left; }
.medienblock figure { margin: 0; }
.medienblock img {
  border-radius: var(--radius); box-shadow: var(--schatten);
  margin: 0;
}
/* Bild-Deckel: verhindert, dass hochformatige Inhaltsbilder in Fliesstext-Bloecken
   den Viewport sprengen */
.leseblock img, .medienblock img { max-height: 80vh; }
.medienblock .breite-figur img { border-radius: var(--radius); }
.beitrag-sektion .container > * + * { margin-top: clamp(26px, 4vw, 44px); }
.beitrag-sektion .abschnitt-kopf { margin-bottom: clamp(18px, 3vw, 32px); }
.beitrag-sektion .spalten .bild-rahmen img { width: 100%; object-fit: cover; }

/* Kachel-Grid (Emoji-Blurbs, USPs) */
.kachel-grid { display: grid; gap: clamp(16px, 2.4vw, 26px); }
/* minmax 260px (frueher 220px): deckelt das Raster im breiteren Container bei
   fuenf Spalten, statt bei sechs sehr schmalen. */
@media (min-width: 900px) { .kachel-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
@media (min-width: 560px) and (max-width: 899px) { .kachel-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .kachel-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .kachel-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Serien-Raster (CUBE 2027): kompakte Bildkacheln mit Seriennamen */
.serien-grid { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .serien-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .serien-grid { grid-template-columns: repeat(5, 1fr); } }
.serien-grid > * { min-width: 0; }
.serie-karte {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--schatten);
}
.serie-karte img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.serie-karte h3 {
  font-size: 1rem; margin: 0; padding: 12px 10px 14px; text-align: center;
  color: var(--fast-schwarz); letter-spacing: 0.04em;
}
.kachel {
  background: none; border-radius: 0; box-shadow: none;
  border-top: 1px solid var(--linie-stark); padding: 22px 0 6px; text-align: left;
}
.kachel .emoji-gross { margin: 0 0 12px; }
.kachel h4 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  color: var(--fast-schwarz); letter-spacing: 0.02em; font-size: 1.15rem;
}
.kachel p:last-child { margin-bottom: 0; }
/* Kachel mit Foto: Bild oben, Text darunter — Polsterung wandert nach innen,
   der rote Akzent bleibt als Oberkante der Karte erhalten. */
.kachel--bild { padding: 0; overflow: hidden; display: flex; flex-direction: column; border-top: 0; }
.kachel--bild .kachel-foto { display: block; overflow: hidden; }
.kachel--bild .kachel-foto img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover;
}
.kachel--bild .kachel-text { padding: 20px 0 0; flex: 1; }
.kachel-fazit { margin-top: clamp(26px, 4vw, 42px); }
.kachel-fazit h3 { color: var(--rot-text); font-size: var(--fs-2); margin-bottom: 0.25em; }
.kachel-fazit p { max-width: 720px; margin: 0 auto; font-size: var(--fs-1); }

/* Karten in 2 Spalten */
@media (min-width: 700px) { .karten--2 { grid-template-columns: 1fr 1fr; } }

/* Stellen-Akkordeons und Job-Metadaten entfallen seit dem Neuaufbau der
   Jobseiten (09/2026, siehe Abschnitt JOBS unten). */

/* Leasingpartner-Grid (Karten) */
.partner-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: stretch;
}
.partner-karte {
  background: #fff; border: 1px solid var(--linie); border-radius: 0; box-shadow: none;
  padding: 24px 18px; min-height: 112px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dauer) var(--easing);
}
.partner-karte:hover { border-color: var(--fast-schwarz); }
.partner-karte img { max-height: 60px; width: auto; object-fit: contain; margin: 0 auto; }

/* Emojis (statt gehotlinkter Emoji-Bilder) */
.emoji-gross { font-size: 2.6rem; line-height: 1; display: block; margin-bottom: 8px; }

/* ---------- Bikes-Seite (Kategorie-Reihen) ---------- */
.bike-kat .kicker-rot {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.04em; color: var(--rot-text); font-size: 1.05rem; margin: 0 0 6px;
}
.bike-kat h2, .bike-kat h3 { font-size: var(--fs-1); }
.bike-kat .bild-rahmen img { background: #fff; }

/* ---------- Hero-Badge (z. B. "Vorschau" auf /cube-2027.html) ---------- */
.hero-inhalt .badge {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.05em; font-size: 1.05rem;
  background: var(--rot-flaeche); color: #fff; padding: 6px 18px 5px;
  border-radius: 999px; margin: 0 0 14px;
}

/* ---------- Ruhige Einordnung (ersetzt die frueheren roten Warn-Kaesten) ----------
   Sachliche Hinweise (Archiv, Aktualitaet) stehen jetzt als normaler Satz im
   Fliesstext; nur eine feine Linie setzt sie optisch ab. Keine Alarmfarbe,
   kein Rahmen, kein Ausrufezeichen. */
.einordnung {
  border-top: 1px solid var(--grau-linie);
  padding-top: clamp(14px, 2vw, 20px);
  color: var(--text-leise); font-size: 0.98rem;
  max-width: var(--lesebreite);
}
.einordnung p:last-child { margin-bottom: 0; }
.section--dunkel .einordnung { color: #bdbdbd; border-top-color: rgba(255,255,255,0.18); }

/* ---------- Nummerierte Ablauf-Schritte ---------- */
.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; display: grid; gap: 16px; }
@media (min-width: 560px) { .schritte { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .schritte { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) {
  .schritte--5 { grid-template-columns: repeat(5, 1fr); }
}
.schritte > li { min-width: 0; }
.schritte li {
  counter-increment: schritt; background: none; border-radius: 0; box-shadow: none;
  padding: 20px 0 8px; border-top: 1px solid var(--linie-stark);
}
.schritte li::before {
  content: counter(schritt, decimal-leading-zero); display: block;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.08em;
  color: var(--rot-text); margin-bottom: 10px;
}
.schritte li strong { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.15rem; letter-spacing: 0.02em; color: var(--fast-schwarz); margin-bottom: 8px; }
.schritte li p { margin: 0; font-size: 0.98rem; }

/* ---------- Leistungs-Kacheln mit Link (Startseite: Leistungen auf einen Blick) ---------- */
.leistungen-grid { display: grid; gap: clamp(14px, 2vw, 22px); }
@media (min-width: 620px) { .leistungen-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .leistungen-grid { grid-template-columns: repeat(4, 1fr); } }
.leistungen-grid > * { min-width: 0; }
/* Verwandte Beitraege am Ende eines Beitrags */
.verwandte { border-top: 1px solid var(--grau-linie); }
.leistung-kachel {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border-radius: var(--radius); box-shadow: var(--schatten);
  border-left: 5px solid var(--rot); padding: 20px 20px 22px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.leistung-kachel:hover { transform: translateY(-4px); box-shadow: var(--schatten-hover); color: inherit; }
.leistung-kachel h3 {
  font-size: 1.15rem; margin-bottom: 8px; color: var(--fast-schwarz);
}
.leistung-kachel:hover h3 { color: var(--rot-text); }
.leistung-kachel p { font-size: 0.98rem; margin: 0 0 12px; }
.leistung-kachel .mehr { margin-top: auto; font-weight: 600; color: var(--rot-text); font-size: 0.98rem; }
.section--grau .leistung-kachel { background: #fff; }

/* Kachel mit Foto: schmales Bild-Band ueber dem Text. Das Seitenverhaeltnis
   ist fix (16:10), damit alle Kacheln einer Reihe gleich hoch beginnen und der
   Text auf gleicher Linie startet. Bewusst niedriger als bei den News-Karten —
   bei bis zu neun Kacheln bliebe die Reihe sonst zu bildlastig.
   Der rote Akzent bleibt die linke Kante, die Polsterung wandert nach innen. */
.leistung-kachel--bild { padding: 0; overflow: hidden; }
.leistung-kachel--bild .kachel-foto { display: block; overflow: hidden; }
.leistung-kachel--bild .kachel-foto img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover;
  /* Gleiche Dauer und Kurve wie der Zoom in .sortiment-kachel, .duo-bild und
     .rundgang-bild — vorher lief diese Kachel als einzige mit 0.35s ease. */
  transition: transform 0.4s var(--easing, ease);
}
.leistung-kachel--bild:hover .kachel-foto img { transform: scale(1.04); }
.leistung-kachel--bild .kachel-text {
  display: flex; flex-direction: column; flex: 1;
  padding: 18px 20px 20px;
}
@media (min-width: 900px) {
  /* Vier Spalten: etwas flacheres Band, damit die Kachel kompakt bleibt. */
  .leistung-kachel--bild .kachel-foto img { aspect-ratio: 16 / 9; }
}

/* ---------- Fakten-Liste (Adresse/Zeiten/Telefon als sichtbarer Text) ---------- */
.fakten { display: grid; gap: 2px 22px; margin: 0; }
/* minmax(...,0) + break-word: verhindert, dass die dt-Spalte in schmalen
   Grid-Spalten (z. B. .spalten--2 bei 800–1000px) den Container sprengt */
@media (min-width: 620px) {
  .fakten { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
  .fakten dd { margin-bottom: 6px; }
}
.fakten dt, .fakten dd { min-width: 0; overflow-wrap: break-word; }
.fakten dt { font-weight: 600; color: var(--fast-schwarz); }
.fakten dd { margin: 0 0 10px; }

/* ---------- Grosser Embed-Platzhalter (360°-Rundgang) ---------- */
.embed-platzhalter--gross { min-height: 320px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
@media (min-width: 800px) { .embed-platzhalter--gross { min-height: 600px; } }

/* Hinweis unter dem Formular, aus welchem Anlass die Anmeldung erfolgt */
.quelle-hinweis {
  /* ruhiger Hinweis ohne roten Balken (Kundenwunsch: keine Warnkaesten) */
  margin: 0 0 16px; padding: 10px 0 12px; border-bottom: 1px solid var(--linie);
  font-size: 0.9rem; line-height: 1.5; color: var(--text-leise);
}

/* ---------- Scroll-Reveal (nur ohne prefers-reduced-motion, per JS aktiviert) ----------
   Text blendet sanft von unten ein; Fotos der Startseite oeffnen sich per
   clip-path von oben nach unten und zoomen dabei leicht zurueck. Die Klassen
   setzt ausschliesslich script.js — ohne JS ist alles sofort sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  .anim {
    opacity: 0; transform: translateY(22px);
    transition: opacity 0.7s var(--easing, ease), transform 0.7s var(--easing, ease);
    transition-delay: var(--anim-verzoegerung, 0ms);
  }
  .anim.sichtbar { opacity: 1; transform: none; }
  /* Bild-Reveal als „Vorhang": eine Flaeche in Sektionsfarbe liegt UEBER dem
     Foto und faehrt beim Einscrollen nach unten weg.
     Frueher wurde die Figur selbst per clip-path: inset(0 0 100% 0) versteckt.
     Das war ein Fehler: Chrome wertet ein komplett weggeschnittenes Element im
     IntersectionObserver als nicht sichtbar — der Reveal loeste nie aus, und
     das lazy geladene Bild darin wurde nie angefordert. Figur und Bild bleiben
     jetzt ungeschnitten; nur das ::after-Overlay bewegt sich (transform). */
  .bild-reveal::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: var(--vorhang, #fff);
    transform-origin: 50% 100%;
    transition: transform var(--dauer-bild, 0.9s) var(--easing, ease);
    transition-delay: var(--anim-verzoegerung, 0ms);
  }
  .bild-reveal.sichtbar::after { transform: scaleY(0); }
  .bild-reveal img { transform: scale(1.08); transition: transform 1.2s var(--easing, ease); }
  .bild-reveal.sichtbar img { transform: none; }
}

/* ---------- Sonstiges ---------- */
.breite-figur img { width: 100%; border-radius: 0; }
.hinweis-klein { font-size: 0.94rem; color: var(--text-leise); }
.rechtstext h2 { margin-top: 1.6em; }
.rechtstext h3 { margin-top: 1.2em; }
.tabelle-scroll { overflow-x: auto; }
.danke-box { max-width: 640px; margin: 0 auto; text-align: center; }
.danke-box .haken {
  width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--rot); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 2.4rem;
}
/* ==========================================================================
   GEMEINSAME BAUSTEINE — Abstaende, Bewegung, Links, Kapitelmarken
   ========================================================================== */
:root {
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  /* Sektionsrhythmus der Startseite: grosszuegig, in 8-px-Stufen gedacht. */
  --sektion: clamp(72px, 9vw, 144px);
  /* Eine Easing-Kurve fuer alles. Micro-Interactions 250 ms; Bild-Reveal
     und -Zoom 0,7 s (grosse Flaechen wirken bei 300 ms ruckartig). */
  --dauer: 0.25s;
  --dauer-bild: 0.7s;
  --easing: cubic-bezier(0.22, 0.7, 0.28, 1);
}

/* Buttons auf dunklen Flaechen behalten ihre Farben (sonst hellrosa auf Weiss). */
.section--dunkel a.btn { color: #fff; }
.section--dunkel a.btn--hell { color: var(--rot-text); }
.section--dunkel a.btn--hell:hover { color: var(--rot-text-hover); }
.section--dunkel a.btn--kontur { color: #fff; border-color: #fff; }
.section--dunkel a.btn--kontur:hover { background: #fff; color: var(--rot-text); }
/* Keine Waisenzeilen in Ueberschriften */
h1, h2, h3 { text-wrap: balance; }
.unterzeile, .faq-item summary { text-wrap: pretty; }
/* Zusammenhaengende Wortgruppen duerfen nicht umbrechen (z. B. „E-Bikes"). */
.nbr { white-space: nowrap; }
/* Raster sind kein Fliesstext: keine Lesebreiten-Deckelung */
.section .container > .schritte, .section .container > .leistungen-grid { max-width: none; }

/* ---------- Animierte Unterstreichung bei Textlinks ---------- */
.intro-text a, .faq-antwort a, .fakten a, .s-text a, .fakten-liste a {
  text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(207, 39, 33, 0.45);
  transition: box-shadow var(--dauer) ease, color var(--dauer) ease;
}
.intro-text a:hover, .faq-antwort a:hover, .fakten a:hover, .s-text a:hover, .fakten-liste a:hover,
.intro-text a:focus-visible, .faq-antwort a:focus-visible, .fakten a:focus-visible,
.s-text a:focus-visible, .fakten-liste a:focus-visible {
  box-shadow: inset 0 -2px 0 var(--rot-text); color: var(--rot-text-hover);
}

/* ---------- Buttons: Pfeil wandert beim Hover ---------- */
.btn--pfeil::after {
  content: '→'; display: inline-block; margin-left: 0.6em;
  transition: transform var(--dauer) var(--easing);
}
.btn--pfeil:hover::after, .btn--pfeil:focus-visible::after { transform: translateX(4px); }

/* ---------- Sekundaere Aktion: Textlink mit Pfeil (statt zweitem Button) ---------- */
.link-pfeil {
  display: inline-flex; align-items: center; gap: 0.6em; min-height: 44px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.95rem; line-height: 1.2;
  color: var(--fast-schwarz); text-decoration: none;
  transition: color var(--dauer) var(--easing);
}
.link-pfeil::after { content: '→'; transition: transform var(--dauer) var(--easing); }
.link-pfeil:hover, .link-pfeil:focus-visible { color: var(--rot-text); }
.link-pfeil:hover::after, .link-pfeil:focus-visible::after { transform: translateX(5px); }
.link-pfeil--hell, .link-pfeil--hell:hover, .link-pfeil--hell:focus-visible { color: #fff; }
/* Zwei Textlinks nebeneinander im Sektionskopf (z. B. Onlineshop + Beratung) */
.kopf-links { display: flex; flex-wrap: wrap; column-gap: 32px; }

/* ---------- Header verdichtet sich beim Scrollen ----------
   Steht seit dem Neuaufbau 09/2026 direkt im Header-Block oben
   (body.gescrollt: 88 -> 68 px, Logo 42 -> 34 px, leichter Schatten). */

/* ---------- Preis-Karte (werkstatt.html) ---------- */
.preis-karte .preis-zeile { margin-bottom: 20px; }
.preis-karte > p { margin-bottom: 12px; color: var(--text-leise); }

/* ---------- Kapitelmarke „01 — Sortiment" (Nummer 4.89:1 auf Off-White) ---------- */
.kapitel {
  display: flex; align-items: center; gap: 12px; margin: 0 0 20px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.8rem; line-height: 1.2; color: var(--text-leise);
}
.kapitel-nr { color: var(--rot-text); letter-spacing: 0.06em; }
.kapitel-linie { flex: 0 0 28px; width: 28px; height: 1px; background: currentColor; opacity: 0.55; }
.kapitel--hell, .s-sektion--dunkel .kapitel { color: rgba(255, 255, 255, 0.8); }
.kapitel--hell .kapitel-nr, .s-sektion--dunkel .kapitel-nr { color: #ff8a84; }

/* ---------- Live-Oeffnungsstatus ---------- */
/* Startseite laedt nur DIN Bold + Roboto Regular: hier bewusst 400 */
.oeffnungs-status {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.3;
  color: var(--fast-schwarz);
}
.status-punkt {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px;
  background: var(--text-leise); box-shadow: 0 0 0 4px rgba(90, 96, 105, 0.16);
}
.oeffnungs-status[data-offen="ja"] .status-punkt {
  background: #1f8a3b; box-shadow: 0 0 0 4px rgba(31, 138, 59, 0.18);
}
.oeffnungs-status[data-offen="nein"] .status-punkt {
  background: var(--rot); box-shadow: 0 0 0 4px rgba(239, 50, 44, 0.16);
}
/* Als Pille im Hero: halbtransparent ueber dem Foto */
.oeffnungs-status--pill {
  padding: 8px 16px 8px 13px; border-radius: 999px;
  background: rgba(17, 17, 17, 0.5); border: 1px solid rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: 0.92rem;
}
.oeffnungs-status--pill[data-offen="ja"] .status-punkt { background: #3ecf6b; box-shadow: 0 0 0 4px rgba(62, 207, 107, 0.22); }

/* ==========================================================================
   STARTSEITE — Neugestaltung 09/2026: bildgefuehrt, Weiss / Off-White /
   Fast-Schwarz, Rot als Akzent, 12-Spalten-Raster auf den Containerkanten.
   ========================================================================== */
.s-sektion { padding: var(--sektion) 0; --vorhang: #fff; }
.s-sektion--hell { background: var(--offwhite); --vorhang: var(--offwhite); }
.s-sektion--dunkel { background: var(--fast-schwarz); color: #c8c8c8; --vorhang: var(--fast-schwarz); }
.s-sektion--dunkel h2, .s-sektion--dunkel h3 { color: #fff; }
.s-h2 {
  font-size: clamp(2.1rem, 1.15rem + 3.1vw, 4.1rem);
  line-height: 1; letter-spacing: -0.005em; margin: 0;
}
.s-text {
  font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem); line-height: 1.7;
  max-width: 46ch; margin: 22px 0 0;
}
.s-sektion--dunkel .s-text { color: #c8c8c8; }
@media (min-width: 900px) {
  .s-intro-raster, .s-beratung-raster, .werkstatt-raster, .s-stimmen-raster,
  .s-besuch-raster, .s-faq-raster {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  }
}

/* Sektionskopf: links Kapitel + Ueberschrift, rechts ein Satz + Link */
.s-kopf { display: grid; gap: 22px 48px; margin-bottom: clamp(36px, 4.5vw, 64px); }
/* Geteilter Kopf (ab 900 px): Kapitelmarke oben links, darunter stehen
   Ueberschrift (links) und Text (rechts) auf GLEICHER Hoehe. Vorher war der
   Text unten buendig — bei laengeren Texten begann er weit ueber der
   Ueberschrift und wirkte verrutscht (Kundenfeedback 09/2026, Kontakt/
   Wegbeschreibung). display: contents macht Kapitel und H2 zu Rasterzellen. */
@media (min-width: 900px) {
  .s-kopf--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); row-gap: 0; align-items: start; }
  .s-kopf--split > div:first-child { display: contents; }
  .s-kopf--split > div:first-child > .kapitel { grid-column: 1; grid-row: 1; }
  .s-kopf--split > div:first-child > .s-h2 { grid-column: 1; grid-row: 2; }
  .s-kopf--split > .s-kopf-text { grid-column: 2; grid-row: 2; padding-top: 0.35em; }
}
.s-kopf-text p {
  margin: 0 0 6px; max-width: 44ch;
  font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
}

/* Foto im Rahmen: ein Radius, ruhiger Platzhalterton */
.s-bild { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); background: #e4e1da; }
.s-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s-sektion--dunkel .s-bild { background: #242424; }

/* ---------- Header: transparent ueber dem Hero (nur Startseite) ----------
   Gleiche Masse wie ueberall, nur die Farben sind invertiert: weisses Logo,
   weisse Schrift, helle Linien. Der Button bleibt rot. Beim Scrollen und bei
   geoeffnetem Mobilmenue wird der Header weiss. */
.startseite .site-header { position: fixed; top: 0; left: 0; right: 0; }
.logo-hell { display: none; }
body.startseite:not(.gescrollt):not(.nav-offen) .site-header {
  background: transparent; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}
body.startseite:not(.gescrollt):not(.nav-offen) .logo-dunkel { display: none; }
body.startseite:not(.gescrollt):not(.nav-offen) .logo-hell { display: block; }
body.startseite:not(.gescrollt):not(.nav-offen) .nav-liste > li > a,
body.startseite:not(.gescrollt):not(.nav-offen) .nav-burger { color: #fff; }
@media (min-width: 1121px) {
  /* Hover = helle Linie, Aktiv = rote Linie — die Zustaende bleiben getrennt. */
  body.startseite:not(.gescrollt):not(.nav-offen) .nav-liste > li:hover::after,
  body.startseite:not(.gescrollt):not(.nav-offen) .nav-liste > li:focus-within::after {
    background: rgba(255, 255, 255, 0.75);
  }
  body.startseite:not(.gescrollt):not(.nav-offen) .nav-liste > li.current::after { background: var(--rot); }
  body.startseite:not(.gescrollt):not(.nav-offen) .nav-extern::before { background: rgba(255, 255, 255, 0.45); }
}

/* ---------- Hero ---------- */
.start-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: max(580px, 88vh); min-height: max(580px, 88svh);
  background: #15181c; color: #fff;
}
.start-hero-bild { position: absolute; inset: 0; z-index: -1; }
.start-hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
/* Foto-Wechsel (Kundenwunsch 09/2026): drei Fotos blenden ineinander.
   Der Verlauf (::after) liegt ueber allen Fotos. */
.hero-folie { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hero-folie.ist-aktiv { opacity: 1; }
.hero-folie picture { display: block; width: 100%; height: 100%; }
.start-hero-bild .hero-folie--bruecke img { object-position: 50% 42%; }
/* Verkaufsraum: Ausschnitt oben halten, damit das CUBE-Logo an der Wand
   deutlich unter dem Header steht (mobil ganz oben, siehe unten) */
.start-hero-bild .hero-folie--verkaufsraum img { object-position: 50% 10%; }
@media (max-width: 699px) { .start-hero-bild .hero-folie--verkaufsraum img { object-position: 50% 0%; } }
/* Striche + Pause: rechts ueber der Vertrauenszeile, 44-px-Trefferflaechen */
.hero-wechsel-leiste { display: flex; justify-content: flex-end; }
.hero-wechsel { display: flex; justify-content: flex-end; align-items: center; margin: 0 -10px 4px 0; }
.hero-wechsel[hidden] { display: none; }
.hero-wechsel button {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer; color: #fff;
}
.hero-wechsel-punkt::before {
  content: ''; display: block; width: 28px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.38); transition: background var(--dauer) var(--easing);
}
.hero-wechsel-punkt:hover::before { background: rgba(255, 255, 255, 0.7); }
.hero-wechsel-punkt.an::before { background: #fff; }
.hero-wechsel-pause::before {
  content: ''; display: block; width: 10px; height: 12px;
  border-left: 3px solid #fff; border-right: 3px solid #fff;
}
.hero-wechsel-pause.ist-angehalten::before {
  width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}
/* Verlaeufe oben (Navigation), unten und links (Text); die Bildmitte mit dem
   Giebelschild bleibt frei. */
.start-hero-bild::after {
  content: ''; position: absolute; inset: 0 0 -1px;
  background:
    linear-gradient(180deg, rgba(10, 12, 14, 0.62) 0%, rgba(10, 12, 14, 0.2) 24%, rgba(10, 12, 14, 0) 40%),
    linear-gradient(0deg, rgba(10, 12, 14, 0.9) 0%, rgba(10, 12, 14, 0.66) 30%,
                    rgba(10, 12, 14, 0.22) 56%, rgba(10, 12, 14, 0) 70%),
    linear-gradient(90deg, rgba(10, 12, 14, 0.66) 0%, rgba(10, 12, 14, 0.3) 36%, rgba(10, 12, 14, 0) 60%);
}
/* Container als Flex-Kinder: volle Breite, sonst verlassen sie die Kante */
.start-hero > .container, .s-2027-band > .container, .s-abschluss > .container { width: 100%; }
.start-hero-inhalt { padding-top: calc(var(--header-h) + 56px); padding-bottom: clamp(32px, 4vw, 56px); }
/* Mittlere Breiten im Querformat: Bildausschnitt nach links schieben, damit
   das Giebelschild rechts neben der H1 steht. */
@media (min-width: 700px) and (max-width: 1279px) { .start-hero-bild img { object-position: 8% 38%; } }
/* Tablets im Hochformat: Querformat als Bildband oben, Text darunter. */
@media (min-width: 700px) and (max-aspect-ratio: 4/5) {
  .start-hero { min-height: 0; }
  .start-hero-bild { bottom: auto; height: 56.25vw; }
  .start-hero-bild img { object-position: 50% 50%; }
  .start-hero-bild::after {
    inset: 0 0 -1px;
    background: linear-gradient(180deg, rgba(10, 12, 14, 0.5) 0%, rgba(10, 12, 14, 0) 26%,
                rgba(10, 12, 14, 0) 52%, rgba(10, 12, 14, 0.8) 82%, #15181c 100%);
  }
  .start-hero-inhalt { padding-top: 46vw; }
  /* Foto-Wechsel am unteren Rand des Bildbands */
  .hero-wechsel-leiste { position: absolute; left: 0; right: 0; top: calc(56.25vw - 50px); }
}
/* Telefone: Bild oben (Hochformat, Giebel unter dem Header), der Text folgt
   darunter auf dem Verlauf ins Dunkle — das Giebelschild bleibt frei. */
@media (max-width: 699px) {
  .start-hero { min-height: 0; }
  .start-hero-bild { bottom: auto; height: 122vw; }
  .start-hero-bild img { object-position: 50% 20%; }
  .start-hero-bild::after {
    background: linear-gradient(180deg, rgba(10, 12, 14, 0.55) 0%, rgba(10, 12, 14, 0) 22%,
                rgba(10, 12, 14, 0) 48%, rgba(10, 12, 14, 0.78) 76%, #15181c 100%);
  }
  .start-hero-inhalt { padding-top: 86vw; }
  /* Foto-Wechsel rechts ueber dem Textbeginn, noch im Bild */
  .hero-wechsel-leiste { position: absolute; left: 0; right: 0; top: calc(86vw - 50px); }
  /* Kundenwunsch 10/2026: am Handy keine Striche fuer die Bilder. Die
     Pause-Taste bleibt (bewegte Inhalte muessen anhaltbar sein, WCAG 2.2.2). */
  .hero-wechsel-punkt { display: none; }
}
.start-hero-kicker {
  margin: 24px 0 16px; color: #fff;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: clamp(0.8rem, 0.74rem + 0.25vw, 0.92rem);
}
/* Drei kurze Zeilen links — so bleibt das Giebelschild in der Bildmitte frei. */
.start-hero-titel {
  color: #fff; margin: 0; max-width: 7.2em;
  font-size: clamp(2.6rem, 1.05rem + 4.6vw, 5.25rem); line-height: 0.95; letter-spacing: -0.012em;
}
.start-hero-lead {
  margin: 24px 0 0; max-width: 44ch; color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.08rem, 0.98rem + 0.45vw, 1.35rem); line-height: 1.5;
}
.start-hero-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; margin-top: 34px; }
.start-hero-fuss { padding-bottom: 26px; }
.vertrauenszeile {
  list-style: none; margin: 0; padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: flex; flex-wrap: wrap; gap: 10px 0;
  font-size: 0.92rem; line-height: 1.4; color: rgba(255, 255, 255, 0.92);
}
.vertrauenszeile li { display: flex; align-items: center; }
.vertrauenszeile li:not(:last-child)::after {
  content: ''; flex: 0 0 1px; width: 1px; height: 14px; margin: 0 20px;
  background: rgba(255, 255, 255, 0.38);
}
@media (max-width: 699px) {
  .vertrauenszeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: 0.88rem; }
  .vertrauenszeile li:not(:last-child)::after { content: none; }
  .vertrauenszeile li::before {
    content: ''; flex: 0 0 5px; width: 5px; height: 5px; margin-right: 9px;
    border-radius: 50%; background: var(--rot);
  }
}

/* ---------- 01 Der Store ---------- */
.s-intro-raster { display: grid; gap: 56px; }
@media (min-width: 900px) {
  .s-intro-raster { align-items: center; }
  .s-intro-text { grid-column: 1 / span 5; }
  .s-intro-bilder { grid-column: 7 / span 6; }
}
.statement {
  margin: 30px 0 22px; color: var(--fast-schwarz); text-wrap: pretty;
  font-size: clamp(1.3rem, 0.98rem + 0.95vw, 1.8rem); line-height: 1.38;
}
.s-intro-bilder { position: relative; padding-bottom: 22%; }
.s-intro-a { width: 92%; margin-left: auto; aspect-ratio: 3 / 2; }
.s-intro-b {
  position: absolute; left: 0; bottom: 0; width: 48%; aspect-ratio: 3 / 2;
  box-shadow: 0 0 0 10px #fff;
}
@media (max-width: 899px) {
  .s-intro-bilder { padding-bottom: 20%; }
  .s-intro-a { width: 100%; }
  .s-intro-b { left: auto; right: 0; width: 52%; box-shadow: 0 0 0 8px #fff; }
}
/* Belegte Zahlen als Display-Ziffern, getrennt durch Haarlinien */
.kennzahlen {
  list-style: none; margin: clamp(56px, 6vw, 96px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--linie);
}
.kennzahlen li { display: flex; flex-direction: column; gap: 10px; padding: 26px 16px 0 0; min-width: 0; }
.kennzahlen li:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--linie); }
.kennzahlen li:nth-child(n+3) { margin-top: 26px; border-top: 1px solid var(--linie); }
@media (min-width: 900px) {
  .kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kennzahlen li:nth-child(n) {
    margin-top: 0; border-top: 0; padding: 32px 24px 0 28px; border-left: 1px solid var(--linie);
  }
  .kennzahlen li:first-child { padding-left: 0; border-left: 0; }
}
.kennzahl {
  font-family: var(--font-display); font-weight: 700; color: var(--fast-schwarz);
  font-size: clamp(3rem, 1.9rem + 3.4vw, 5.4rem); line-height: 0.88; letter-spacing: -0.015em;
}
.kennzahl-text { font-size: 1rem; line-height: 1.4; color: var(--text-leise); }
/* Textleiste statt Zahlen (09/2026) */
.kennzahlen--text .kennzahl {
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); line-height: 1.15;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.kennzahlen--text .kennzahl-text { font-size: 0.98rem; line-height: 1.5; }
.kennzahl-text a { color: inherit; text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 3px; transition: color var(--dauer) ease; }
.kennzahl-text a:hover, .kennzahl-text a:focus-visible { color: var(--rot-text); text-decoration-color: currentColor; }

/* ---------- 02 Sortiment: Bento-Raster ---------- */
.bento {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bento-feld { position: relative; min-width: 0; aspect-ratio: 4 / 3; }
.bento-feld--haupt { grid-column: 1 / -1; }
@media (max-width: 699px) {
  .bento-feld:last-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento-feld--haupt { aspect-ratio: 2.2 / 1; }
}
@media (min-width: 1100px) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, clamp(170px, 15vw, 230px)) repeat(2, clamp(180px, 16vw, 250px));
  }
  .bento-feld { aspect-ratio: auto; }
  .bento-feld--haupt { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  .bento-feld--s { grid-column: span 3; }
  .bento-feld--m { grid-column: span 4; }
  .bento-feld--l { grid-column: span 6; }
}
.bento-feld a {
  position: absolute; inset: 0; display: block; overflow: hidden;
  border-radius: var(--radius); background: #1d1f22; color: #fff; text-decoration: none;
}
.bento-feld img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dauer-bild) var(--easing); }
/* Lesbarkeit: Der Verlauf haengt am Textblock (--rampe darueber), nicht an
   der Kachelhoehe — bricht die Zeile um oder ist die Kachel flach, waechst
   er mit. Gemessen (Titel/Zeile, schlechtestes Pixel) >= 4,0 / 5,5 : 1 von
   390 bis 1920 px. */
.bento-feld a::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.3) 100%);
}
.bento-text {
  --rampe: 40px;
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  padding: clamp(14px, 1.5vw, 22px);
  padding-top: calc(clamp(14px, 1.5vw, 22px) + var(--rampe));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.45) var(--rampe), rgba(0, 0, 0, 0.62) 100%);
}
.bento-titel {
  display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; font-size: clamp(1.02rem, 0.9rem + 0.45vw, 1.35rem); line-height: 1.1;
}
.bento-zeile { display: block; margin-top: 5px; font-size: 0.92rem; line-height: 1.35; color: rgba(255, 255, 255, 0.92); }
.bento-feld--haupt .bento-titel { font-size: clamp(1.5rem, 0.95rem + 1.9vw, 2.6rem); line-height: 1; }
.bento-feld--haupt .bento-zeile { font-size: 1rem; margin-top: 8px; }
.bento-pfeil, .verweis-pfeil {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1;
}
.bento-pfeil {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.6);
  transition: background var(--dauer) var(--easing), color var(--dauer) var(--easing),
              border-color var(--dauer) var(--easing), transform var(--dauer) var(--easing);
}
.bento-feld a:hover img { transform: scale(1.045); }
.bento-feld a:hover .bento-pfeil, .bento-feld a:focus-visible .bento-pfeil {
  background: #fff; border-color: #fff; color: var(--fast-schwarz); transform: translateX(3px);
}
@media (max-width: 699px) {
  .bento-text { --rampe: 24px; }
  .bento-feld:not(.bento-feld--haupt) .bento-zeile,
  .bento-feld:not(.bento-feld--haupt) .bento-pfeil { display: none; }
  .bento-feld:not(.bento-feld--haupt) .bento-text { padding: calc(10px + var(--rampe)) 12px 10px; }
  .bento-feld:not(.bento-feld--haupt) .bento-titel { font-size: 0.98rem; }
}

/* ---------- 03 Einblicke: horizontale Galerie ---------- */
.s-einblicke { overflow: hidden; }
.galerie-kopf {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px 48px; margin-bottom: clamp(32px, 4vw, 56px);
}
.galerie-kopf-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.galerie-schiene {
  display: flex; gap: clamp(12px, 1.4vw, 20px);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x mandatory;
  /* links auf der Containerkante, rechts bis zum Fensterrand */
  padding-left: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  scroll-padding-left: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  padding-right: var(--pad);
}
.galerie-schiene::-webkit-scrollbar { display: none; }
.galerie-schiene:focus-visible { outline-offset: -3px; }
.galerie-bild { flex: 0 0 auto; width: clamp(260px, 78vw, 600px); margin: 0; scroll-snap-align: start; }
.galerie-bild .s-bild { aspect-ratio: 3 / 2; }
.galerie-bild figcaption {
  display: flex; align-items: baseline; gap: 14px; margin-top: 14px;
  font-size: 0.98rem; color: var(--text);
}
.galerie-bild figcaption span {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em;
  font-size: 0.85rem; color: var(--text-leise);
}
@media (hover: hover) and (pointer: fine) {
  .galerie-schiene { cursor: grab; }
  .galerie-schiene.zieht { cursor: grabbing; }
}
.galerie-schiene.zieht { scroll-snap-type: none; }
.galerie-schiene.zieht img { pointer-events: none; }
.schiene-fortschritt {
  position: relative; height: 2px; margin-top: clamp(28px, 3.5vw, 44px);
  background: var(--linie); overflow: hidden;
}
.schiene-fortschritt span {
  position: absolute; inset: 0; background: var(--fast-schwarz);
  transform-origin: 0 50%; transform: scaleX(var(--fortschritt, 0.2));
  transition: transform 0.3s var(--easing);
}
.schiene-steuerung { display: flex; align-items: center; gap: 10px; }
.schiene-btn {
  width: 48px; height: 48px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--linie-stark); background: transparent; color: var(--fast-schwarz);
  transition: background var(--dauer) var(--easing), color var(--dauer) var(--easing),
              border-color var(--dauer) var(--easing);
}
.schiene-btn:hover:not([disabled]) { background: var(--fast-schwarz); border-color: var(--fast-schwarz); color: #fff; }
.schiene-btn[disabled] { opacity: 0.3; cursor: default; }
.schiene-zaehler {
  min-width: 72px; text-align: center; font-variant-numeric: tabular-nums;
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.1em; font-size: 0.9rem;
  color: var(--fast-schwarz);
}

/* ---------- 04 Beratung: Mosaik ---------- */
.s-beratung-raster { display: grid; gap: 48px; }
@media (min-width: 900px) {
  .s-beratung-raster { align-items: center; }
  .s-beratung-text { grid-column: 1 / span 4; }
  .mosaik { grid-column: 6 / span 7; }
}
.mosaik { display: grid; gap: 12px; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; }
.mosaik .m-a { grid-row: 1 / span 2; aspect-ratio: 1 / 1; }
/* Hoehe gibt das quadratische Hauptbild vor; die kleinen fuellen ihre Zelle */
.mosaik .s-bild { min-height: 0; }
.mosaik .s-bild img { position: absolute; inset: 0; }
@media (max-width: 899px) {
  .mosaik { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .mosaik .m-a { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .mosaik .m-b, .mosaik .m-c { aspect-ratio: 3 / 2; }
}
.fakten-liste {
  list-style: none; margin: 30px 0 16px; padding: 0; max-width: 46ch;
  border-top: 1px solid var(--linie);
}
.fakten-liste li { position: relative; padding: 15px 0 15px 20px; line-height: 1.5; border-bottom: 1px solid var(--linie); }
.fakten-liste li::before {
  content: ''; position: absolute; left: 0; top: calc(15px + 0.62em);
  width: 6px; height: 6px; border-radius: 50%; background: var(--rot);
}

/* ---------- 05 Werkstatt (dunkel) ---------- */
.s-werkstatt .s-kopf-text p { color: #c8c8c8; }
.werkstatt-raster { display: grid; gap: 56px; }
@media (min-width: 900px) {
  .werkstatt-raster { align-items: start; }
  .werkstatt-bilder { grid-column: 1 / span 6; }
  .werkstatt-preise { grid-column: 8 / span 5; }
}
.werkstatt-bilder { position: relative; padding-bottom: 18%; }
.w-a { aspect-ratio: 3 / 2; max-width: 640px; }
.w-b {
  position: absolute; right: 0; bottom: 0; width: 34%; max-width: 220px; aspect-ratio: 2 / 3;
  box-shadow: 0 0 0 10px var(--fast-schwarz);
}
.preis { padding: 0 0 26px; margin: 0 0 26px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.preis-name {
  margin: 0 0 12px; color: #a9a9a9;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.85rem;
}
.preis-gross {
  margin: 0; color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.6rem, 2rem + 4.4vw, 6.4rem); line-height: 0.86; letter-spacing: -0.02em;
}
.preis-klein { margin: 14px 0 0; color: #c8c8c8; }
/* Bedingung zum Erstservice-Preis: klein, aber gut lesbar (#b8b8b8 auf #111 = 9,7:1). */
.preis-hinweis { margin: 18px 0 0; max-width: 46ch; font-size: 0.86rem; line-height: 1.5; color: #b8b8b8; }
.werkstatt-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 34px; }
.werkstatt-fakten {
  display: grid; grid-template-columns: 1fr; margin: clamp(56px, 7vw, 96px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.werkstatt-fakten > div { padding: 22px 24px 22px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); min-width: 0; }
@media (min-width: 700px) and (max-width: 1099px) {
  .werkstatt-fakten { grid-template-columns: repeat(2, 1fr); }
  .werkstatt-fakten > div:nth-child(even) { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
}
@media (min-width: 1100px) {
  .werkstatt-fakten { grid-template-columns: repeat(4, 1fr); }
  .werkstatt-fakten > div { border-bottom: 0; padding-top: 28px; padding-bottom: 4px; }
  .werkstatt-fakten > div + div { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
}
.werkstatt-fakten dt {
  margin-bottom: 8px; color: #fff; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem;
}
.werkstatt-fakten dd { margin: 0; color: #c8c8c8; }
/* Leasing und Versicherung: schlanke Verweiszeilen statt Karten */
.verweise { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.verweis {
  display: grid; align-items: center; gap: 4px 32px; padding: 26px 0;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel pfeil" "text pfeil";
  border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: #fff; text-decoration: none;
}
@media (min-width: 700px) {
  .verweis { grid-template-columns: minmax(180px, 3fr) minmax(0, 7fr) auto; grid-template-areas: "titel text pfeil"; }
}
.verweis-titel {
  grid-area: titel; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; font-size: clamp(1.4rem, 1rem + 1.2vw, 2.1rem); line-height: 1.05;
}
.verweis-text { grid-area: text; color: #c8c8c8; }
.verweis-pfeil {
  grid-area: pfeil; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.4);
  transition: background var(--dauer) var(--easing), color var(--dauer) var(--easing),
              transform var(--dauer) var(--easing);
}
.verweis:hover .verweis-pfeil, .verweis:focus-visible .verweis-pfeil {
  background: #fff; color: var(--fast-schwarz); transform: translateX(4px);
}

/* ---------- 06 CUBE 2027: Bildband + Neuerungen ---------- */
.s-2027-band {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(320px, 35.7vw, 560px); background: #1b2016; color: #fff;
}
.s-2027-bild { position: absolute; inset: 0; z-index: -1; }
.s-2027-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.s-2027-bild::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 10, 6, 0.8) 0%, rgba(8, 10, 6, 0.52) 34%, rgba(8, 10, 6, 0) 62%),
    linear-gradient(0deg, rgba(8, 10, 6, 0.55) 0%, rgba(8, 10, 6, 0) 45%);
}
.s-2027-inhalt { padding-top: 88px; padding-bottom: clamp(32px, 4vw, 56px); }
.s-2027-band .s-h2 { color: #fff; font-size: clamp(2.8rem, 1.2rem + 4.8vw, 6.2rem); line-height: 0.92; }
.s-2027-lead { margin: 16px 0 0; font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem); color: rgba(255, 255, 255, 0.94); }
.s-2027-lead a {
  color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  transition: color var(--dauer) var(--easing);
}
.s-2027-lead a:hover { color: #ffb3ae; }
@media (max-width: 699px) {
  .s-2027-band { display: block; min-height: 0; background: var(--fast-schwarz); }
  .s-2027-bild { position: relative; z-index: auto; aspect-ratio: 16 / 10; }
  .s-2027-bild::after { background: linear-gradient(0deg, rgba(17, 17, 17, 0.55) 0%, rgba(17, 17, 17, 0) 40%); }
  .s-2027-inhalt { padding-top: 30px; padding-bottom: 40px; }
}
.s-2027-liste { padding-top: clamp(40px, 5vw, 72px); padding-bottom: var(--sektion); }
.neu-liste { list-style: none; margin: 0; padding: 0; counter-reset: neu; display: grid; column-gap: 48px; }
@media (min-width: 800px) {
  .neu-liste { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(4, auto); }
}
.neu-liste li {
  counter-increment: neu; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px;
  padding: 18px 0; border-top: 1px solid var(--linie); color: var(--fast-schwarz);
  font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem); line-height: 1.5;
}
.neu-liste li::before {
  content: counter(neu, decimal-leading-zero); color: var(--rot-text);
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em;
  font-size: 0.85rem; line-height: 1.95;
}
.s-2027-mehr { margin: 28px 0 0; }

/* ---------- 07 Stimmen: ein Zitat nach dem anderen ---------- */
.s-stimmen-raster { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .s-stimmen-raster { grid-template-rows: auto 1fr; row-gap: 0; }
  .s-stimmen-seite { grid-column: 1 / span 4; grid-row: 1; }
  .s-stimmen-fuss { grid-column: 1 / span 4; grid-row: 2; align-self: start; padding-top: 14px; }
  .zitate { grid-column: 6 / span 7; grid-row: 1 / span 2; }
}
.s-stimmen-seite .schiene-steuerung { margin-top: 30px; }
/* Mobil passt sich die Zitat-Spur der Hoehe des aktuellen Zitats an (script.js) */
.zitat-schiene { transition: height var(--dauer) var(--easing); }
@media (max-width: 899px) { .zitat-schiene { overflow-y: hidden; } }
.zitate { position: relative; min-width: 0; }
.zitat-zeichen { display: block; width: clamp(44px, 24px + 3vw, 68px); height: auto; margin: 0 0 26px; color: var(--rot); }
.zitat-schiene {
  display: flex; align-items: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.zitat-schiene::-webkit-scrollbar { display: none; }
.zitat { flex: 0 0 100%; min-width: 0; margin: 0; padding-right: 4px; scroll-snap-align: start; }
.zitat blockquote { margin: 0; }
.zitat blockquote p {
  margin: 0; max-width: 36ch; color: var(--fast-schwarz); text-wrap: pretty;
  font-size: clamp(1.25rem, 0.95rem + 1.05vw, 1.9rem); line-height: 1.42;
}
.zitat--lang blockquote p { max-width: 50ch; font-size: clamp(1.08rem, 0.95rem + 0.5vw, 1.4rem); line-height: 1.5; }
.zitat figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 28px; }
.zitat-name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.9rem; color: var(--fast-schwarz);
}
.zitat-quelle { font-size: 0.92rem; color: var(--text-leise); }
/* Community-Teaser: kleines Foto + eine Zeile */
.community {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center;
  margin-top: clamp(32px, 4vw, 52px); padding-top: 24px; border-top: 1px solid var(--linie);
  color: var(--fast-schwarz); text-decoration: none;
}
.community-bild { display: block; width: 112px; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: #e4e1da; }
.community-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dauer-bild) var(--easing); }
.community:hover .community-bild img { transform: scale(1.05); }
.community-text { line-height: 1.45; transition: color var(--dauer) var(--easing); }
.community:hover .community-text, .community:focus-visible .community-text { color: var(--rot-text); }

/* ---------- 08 Besuch ---------- */
.s-besuch-raster { display: grid; gap: 48px; }
@media (min-width: 900px) {
  .s-besuch-raster { align-items: start; }
  .s-besuch-daten { grid-column: 8 / span 5; grid-row: 1; }
  .s-besuch-bild { grid-column: 1 / span 6; grid-row: 1; }
}
.b-a { aspect-ratio: 4 / 3; max-width: 640px; }
.adresse {
  margin: 28px 0 24px; color: var(--fast-schwarz);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: clamp(1.3rem, 1rem + 0.9vw, 1.8rem); line-height: 1.15;
}
.zeiten--ruhig { margin: 18px 0 0; max-width: 440px; }
.zeiten--ruhig td { padding: 9px 0; line-height: 1.5; border-bottom: 1px solid var(--linie); }
.zeiten--ruhig tr:first-child td { border-top: 1px solid var(--linie); }
.zeiten--ruhig td:last-child { text-align: right; font-weight: 400; color: var(--fast-schwarz); font-variant-numeric: tabular-nums; }
.zeiten--ruhig tr.geschlossen td:last-child { color: var(--text-leise); font-weight: 400; }
.kontakt-zeilen { list-style: none; margin: 24px 0 10px; padding: 0; }
.kontakt-zeilen li { display: flex; align-items: baseline; gap: 16px; padding: 5px 0; }
.kontakt-zeilen span { min-width: 72px; font-size: 0.92rem; color: var(--text-leise); }
.kontakt-zeilen a {
  color: var(--fast-schwarz); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--linie-stark);
  transition: color var(--dauer) ease, box-shadow var(--dauer) ease;
}
.kontakt-zeilen a:hover, .kontakt-zeilen a:focus-visible { color: var(--rot-text); box-shadow: inset 0 -2px 0 var(--rot-text); }
/* Zwei-Klick-Karte: kompakter Platzhalter statt grauem Kasten */
.embed-platzhalter--kompakt {
  max-width: 640px; margin-top: 12px; padding: 20px 22px; text-align: left;
  background: var(--offwhite); border: 1px solid var(--linie); border-radius: var(--radius);
}
.embed-platzhalter--kompakt h3 {
  margin: 0 0 8px; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.embed-platzhalter--kompakt p { max-width: none; margin: 0 0 14px; font-size: 0.92rem; color: var(--text-leise); }
.embed-platzhalter--kompakt br { display: none; }
.embed-platzhalter--kompakt .btn { font-size: 0.88rem; padding: 0.75em 1.2em; }
.embed-platzhalter--kompakt .merken { display: flex; margin: 10px 0 0; }
.s-besuch-bild .embed-wrap { max-width: 640px; margin-top: 12px; box-shadow: none; }

/* ---------- 09 FAQ ---------- */
.s-faq-raster { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .s-faq-raster { align-items: start; }
  .s-faq-seite { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 32px); }
  .s-faq-liste { grid-column: 6 / span 7; }
}
.s-faq-seite > .link-pfeil { margin-top: 16px; }
.s-faq-liste { border-top: 1px solid var(--linie-stark); }
.faq-zeile { border-bottom: 1px solid var(--linie); }
.faq-zeile summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 24px 56px 24px 0; color: var(--fast-schwarz);
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.35rem); line-height: 1.4;
  transition: color var(--dauer) var(--easing);
}
.faq-zeile summary::-webkit-details-marker { display: none; }
.faq-zeile summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  background:
    linear-gradient(currentColor, currentColor) center / 18px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 18px no-repeat;
  transition: transform var(--dauer) var(--easing);
}
.faq-zeile[open] summary::after { transform: rotate(45deg); }
.faq-zeile summary:hover { color: var(--rot-text); }
.faq-zeile .faq-antwort { padding: 0 56px 26px 0; }
.faq-zeile .faq-antwort p { margin: 0; max-width: 62ch; }

/* ---------- Abschluss-Band ---------- */
.s-abschluss {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(540px, 82vh, 860px); background: #2a241d; color: #fff;
}
.s-abschluss-bild { position: absolute; inset: 0; z-index: -1; }
.s-abschluss-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.s-abschluss-bild::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(12, 10, 8, 0.9) 0%, rgba(12, 10, 8, 0.64) 30%,
                    rgba(12, 10, 8, 0.14) 60%, rgba(12, 10, 8, 0) 72%),
    /* links kraeftiger: der zweizeilige Spruch (rot/weiss) steht hier */
    linear-gradient(90deg, rgba(12, 10, 8, 0.64) 0%, rgba(12, 10, 8, 0.36) 32%, rgba(12, 10, 8, 0) 58%);
}
.s-abschluss-inhalt { padding-top: 120px; padding-bottom: clamp(48px, 6vw, 96px); }
/* Telefone: wie der Hero — Bild oben (Fassade frei), Text auf dem Verlauf */
@media (max-width: 699px) {
  .s-abschluss { min-height: 0; background: #17140f; }
  .s-abschluss-bild { bottom: auto; height: 118vw; }
  .s-abschluss-bild::after {
    inset: 0 0 -1px;
    background: linear-gradient(180deg, rgba(12, 10, 8, 0) 45%, rgba(12, 10, 8, 0.72) 76%, #17140f 100%);
  }
  .s-abschluss-inhalt { padding-top: 90vw; padding-bottom: 56px; }
}
.s-abschluss-titel {
  color: #fff; margin: 0;
  font-size: clamp(2.8rem, 1.2rem + 5.2vw, 6.4rem); line-height: 0.92; letter-spacing: -0.012em;
}
.s-abschluss-adresse { display: block; margin-top: 0.3em; font-size: 0.42em; line-height: 1.1; letter-spacing: 0.01em; }
.s-abschluss-zeiten { margin: 22px 0 0; color: rgba(255, 255, 255, 0.92); font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.2rem); }

/* ==========================================================================
   NEWSLETTER-SEITE — 09/2026 (Kundenwunsch: „informationsreicher", echte
   Ausgaben zeigen). Links Nutzen + Gutschein, rechts das Formular (sticky);
   darunter eine Beispiel-Ausgabe im Mail-Rahmen und das Archiv als Kartenreihe.
   ========================================================================== */
.nl-raster { display: grid; gap: clamp(32px, 5vw, 72px); }
@media (min-width: 1000px) {
  .nl-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .nl-formular { position: sticky; top: calc(var(--header-h) + 24px); }
}
.nl-zwischen {
  margin: 30px 0 12px; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fast-schwarz);
}
.nl-vorteile {
  list-style: none; margin: 0; padding: 0; display: grid; column-gap: 32px;
  border-top: 1px solid var(--linie);
}
@media (min-width: 700px) { .nl-vorteile { grid-template-columns: 1fr 1fr; } }
.nl-vorteile li { position: relative; padding: 14px 0 14px 30px; border-bottom: 1px solid var(--linie); }
/* Haken in Rot */
.nl-vorteile li::before {
  content: ''; position: absolute; left: 2px; top: 20px; width: 13px; height: 7px;
  border-left: 2px solid var(--rot-flaeche); border-bottom: 2px solid var(--rot-flaeche);
  transform: rotate(-45deg);
}
.nl-vorteil-titel { display: block; font-weight: 700; color: var(--fast-schwarz); }
.nl-vorteil-text { display: block; margin-top: 2px; font-size: 0.95rem; line-height: 1.55; color: var(--text-leise); }
.nl-gutschein {
  margin-top: 28px; padding: 22px 24px; border-radius: 8px;
  background: var(--fast-schwarz); color: #d6d6d6; border-left: 4px solid var(--rot-flaeche);
}
.nl-gutschein p { margin: 0 0 8px; }
.nl-gutschein-titel {
  color: #fff; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
}
.nl-gutschein a { color: #fff; text-underline-offset: 3px; }
.nl-gutschein .fussnote { margin: 10px 0 0; font-size: 0.8rem; line-height: 1.5; color: #b3b3b3; }
.nl-meta { margin: 18px 0 0; font-size: 0.9rem; color: var(--text-leise); }
/* Beispiel-Ausgabe im Mail-Rahmen */
.nl-beispiel-raster { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .nl-beispiel-raster { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); } }
.nl-mail {
  margin: 0; width: 100%; max-width: 480px; overflow: hidden; background: #fff;
  border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 24px 60px rgba(17, 17, 17, 0.16);
}
.nl-mail-kopf {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  background: #f1f1ef; border-bottom: 1px solid var(--linie);
}
.nl-mail-kopf span:not(.nl-mail-betreff) { width: 9px; height: 9px; border-radius: 50%; background: #d2d2ce; }
.nl-mail-betreff { margin-left: 10px; font-size: 0.82rem; font-weight: 600; color: var(--text-leise); }
.nl-mail-inhalt picture, .nl-mail-inhalt img { display: block; width: 100%; height: auto; }
.nl-hinweis { margin: 14px 0 22px; font-size: 0.88rem; color: var(--text-leise); }
/* Archiv-Karten: die Titelbilder sind Grafiken mit Schrift -> nie beschneiden */
.nl-ausgaben .ck-bild { aspect-ratio: 983 / 875; background: #fff; }
.nl-ausgaben .ck-bild img { object-fit: contain; }

/* ==========================================================================
   KONTAKTSEITE — Neuaufbau 09/2026 im Editorial-Stil der Startseite
   (Kundenfeedback: „Lass uns plaudern wirkt so mickrig", Ueberschriften der
   Wegbeschreibung „nicht synchron"). Raster wie die Startseite: 12 Spalten
   auf den Containerkanten, Weiss / Off-White im Wechsel.
   ========================================================================== */
/* Nur fuer Vorlesesoftware (visuell versteckt, bleibt im Accessibility-Tree) */
.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Live-Status als Pille unter der Hero-Ueberschrift */
.hero-inhalt .oeffnungs-status--pill { margin-top: 10px; font-size: 0.95rem; text-align: left; }
.hero-inhalt .oeffnungs-status--pill .status-text { text-wrap: balance; }
@media (max-width: 599px) { .hero-inhalt .oeffnungs-status--pill { font-size: 0.88rem; } }

/* ---------- Lass uns plaudern! ---------- */
.kontakt-start-raster { display: grid; gap: 48px; }
@media (min-width: 900px) {
  .kontakt-start-raster {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center;
  }
  .kontakt-start-text { grid-column: 1 / span 6; }
  .kontakt-start-bild { grid-column: 8 / span 5; }
}
.kontakt-foto { aspect-ratio: 4 / 3; }
.kontakt-foto img { object-position: 46% 50%; }
@media (max-width: 899px) { .kontakt-foto { aspect-ratio: 3 / 2; } }

/* Drei grosse Kontaktwege als ganze, klickbare Zeilen */
.kanaele {
  list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0;
  border-top: 1px solid var(--linie-stark);
}
.kanaele li { margin: 0; border-bottom: 1px solid var(--linie); }
.kanal {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: baseline; gap: 6px 20px; padding: 20px 0;
  color: var(--fast-schwarz); text-decoration: none;
}
.kanal-label {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.78rem; line-height: 1.2; color: var(--text-leise);
}
.kanal-wert {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.005em;
  font-size: clamp(1.35rem, 1.02rem + 1.05vw, 2.05rem); line-height: 1.15;
  overflow-wrap: anywhere; transition: color var(--dauer) var(--easing);
}
.kanal-aktion {
  display: inline-flex; align-items: center; gap: 0.55em; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.85rem; line-height: 1.2;
}
.kanal-aktion::after { content: '→'; transition: transform var(--dauer) var(--easing); }
.kanal:hover .kanal-wert, .kanal:focus-visible .kanal-wert { color: var(--rot-text); }
.kanal:hover .kanal-aktion::after, .kanal:focus-visible .kanal-aktion::after { transform: translateX(5px); }
@media (max-width: 599px) {
  .kanal { grid-template-columns: minmax(0, 1fr) auto; padding: 16px 0; }
  .kanal-label { grid-column: 1 / -1; }
  /* mobil nur der Pfeil — der Wert selbst ist die Beschriftung */
  .kanal-aktion { font-size: 0; gap: 0; }
  .kanal-aktion::after { font-size: 1.15rem; }
}
.dgs-hinweis { display: grid; justify-items: start; gap: 8px; margin-top: 28px; }
.dgs-hinweis p { margin: 0; max-width: 56ch; font-size: 0.98rem; line-height: 1.6; }
.dgs-hinweis strong { font-weight: 600; color: var(--fast-schwarz); }

/* ---------- Kontaktformular + Oeffnungszeiten ---------- */
.kontakt-formular-raster { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .kontakt-formular-raster {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start;
  }
  .kontakt-formular-seite { grid-column: 1 / span 5; }
  .kontakt-formular-karte { grid-column: 7 / span 6; }
}
.kontakt-zwischen {
  margin: clamp(32px, 4vw, 48px) 0 0; font-size: 0.8rem; line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-leise);
}
.kontakt-formular-seite .zeiten--ruhig { margin-top: 14px; }
.kontakt-verweis { margin: 30px 0 4px; max-width: 42ch; }
/* Formular als weisse Karte auf Off-White */
.formular--karte {
  max-width: none; background: #fff; border: 1px solid var(--linie);
  border-radius: var(--radius); padding: clamp(24px, 3.4vw, 48px);
}
.form-zustimmung {
  display: grid; gap: 16px; margin-top: 24px; padding-top: 24px;
  border-top: 1px solid var(--linie);
}
/* Freiwilliges Newsletter-Opt-in: eigener, klar abgesetzter Kasten */
.feld--optin {
  padding: 16px 18px; border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--offwhite); transition: border-color var(--dauer) ease, background-color var(--dauer) ease;
}
.feld--optin label { display: grid; gap: 3px; }
.optin-titel { font-weight: 600; font-size: 1rem; color: var(--fast-schwarz); }
.optin-frei { font-weight: 400; color: var(--text-leise); }
.feld--optin:has(input:checked) { border-color: var(--rot); background: #fff6f5; }
.form-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.form-fuss .hinweis { margin: 0; font-size: 0.9rem; }
.form-fuss .pflicht { color: var(--rot-text); }

/* ---------- Wegbeschreibung ---------- */
/* Drei Spalten, jede mit Ueberschrift auf exakt gleicher Hoehe; die
   Textlinks sitzen unten auf einer Linie. */
.anfahrt-fakten { display: grid; gap: 32px; margin-bottom: clamp(40px, 5vw, 64px); }
@media (min-width: 760px) {
  .anfahrt-fakten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
.anfahrt-fakt {
  display: flex; flex-direction: column; align-items: flex-start;
  padding-top: 22px; border-top: 1px solid var(--linie-stark);
}
.anfahrt-fakt h3 { margin: 0 0 12px; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); line-height: 1.2; }
.anfahrt-fakt p { margin: 0 0 16px; max-width: 42ch; }
.anfahrt-fakt .link-pfeil { margin-top: auto; }
.anfahrt-medien { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .anfahrt-medien { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.anfahrt-bild { aspect-ratio: 16 / 10; }
.anfahrt-karte { display: flex; min-height: 380px; }
.anfahrt-karte > .embed-platzhalter, .anfahrt-karte > .embed-wrap { flex: 1 1 auto; }
.anfahrt-karte > .embed-wrap { box-shadow: none; }
.anfahrt-karte > .embed-wrap iframe { height: 100%; min-height: 380px; }
.embed-platzhalter--karte {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  text-align: left; background: var(--offwhite); border: 1px solid var(--linie);
  padding: clamp(28px, 3.2vw, 48px);
}
.embed-platzhalter--karte h3 {
  margin: 0 0 12px; font-size: 0.82rem; line-height: 1.2; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--text-leise);
}
.embed-platzhalter--karte p { margin: 0 0 22px; max-width: 40ch; }
.embed-platzhalter--karte br { display: none; }
.embed-platzhalter--karte .merken { margin-top: 10px; }

/* ---------- Jobs ---------- */
.kontakt-jobs-raster { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
  .kontakt-jobs-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .kontakt-jobs-bild { grid-column: 1 / span 6; }
  .kontakt-jobs-text { grid-column: 8 / span 5; }
}
.jobs-foto { aspect-ratio: 3 / 2; }
.kontakt-jobs-lead {
  margin: 18px 0 0; color: var(--rot-text);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); line-height: 1.2;
}
.kontakt-jobs-text .s-text { max-width: 52ch; }
.kontakt-jobs-text .btn-zeile { margin-top: 30px; }

/* ---------- Weitere Filialen (unter der Wegbeschreibung) ---------- */
.kontakt-filialen { padding: clamp(48px, 5vw, 80px) 0; }
.kontakt-filialen-raster { display: grid; gap: 26px; }
@media (min-width: 900px) {
  .kontakt-filialen-raster {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center;
  }
  .kontakt-filialen-text { grid-column: 1 / span 5; }
  .kontakt-filialen-raster > .kanaele { grid-column: 7 / span 6; margin-top: 0; }
}
.kontakt-filialen .s-h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.7rem); line-height: 1.02; }
.kontakt-filialen .kapitel { margin-bottom: 14px; }
.kontakt-filialen .s-text { margin-top: 14px; font-size: 1.02rem; line-height: 1.6; max-width: 46ch; }
.kanaele--filialen .kanal { grid-template-columns: 104px minmax(0, 1fr) auto; }
@media (max-width: 599px) { .kanaele--filialen .kanal { grid-template-columns: minmax(0, 1fr) auto; } }


/* ---------- Kontaktseite kompakt (Feedback: „zu gross, unuebersichtlich") ---------- */
.kontakt-start, .kontakt-formular, .kontakt-anfahrt, .kontakt-jobs { padding: clamp(52px, 5.5vw, 88px) 0; }
.kontakt-start .s-h2, .kontakt-formular .s-h2, .kontakt-anfahrt .s-h2, .kontakt-jobs .s-h2 {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.7rem); line-height: 1.02;
}
.kontakt-start .kapitel, .kontakt-formular .kapitel, .kontakt-anfahrt .kapitel, .kontakt-jobs .kapitel { margin-bottom: 14px; }
.kontakt-start .s-text, .kontakt-formular .s-text, .kontakt-jobs .s-text { margin-top: 14px; font-size: 1.02rem; line-height: 1.6; }
.kontakt-start-raster { gap: 36px; }
.kanaele { margin-top: 26px; }
.kanal { grid-template-columns: 84px minmax(0, 1fr) auto; padding: 13px 0; gap: 4px 16px; }
.kanal-label { font-size: 0.72rem; }
.kanal-wert { font-size: clamp(1.12rem, 1rem + 0.45vw, 1.4rem); }
.kanal-aktion { font-size: 0.78rem; gap: 0.55em; }
.dgs-hinweis { margin-top: 20px; }
.dgs-hinweis p { font-size: 0.94rem; }
.kontakt-anfahrt .s-kopf { margin-bottom: 28px; }
.kontakt-anfahrt .s-kopf-text p { font-size: 1rem; }
.anfahrt-fakten { margin-bottom: 32px; }
.anfahrt-fakt { padding-top: 16px; }
.anfahrt-fakt h3 { font-size: 1.15rem; margin-bottom: 8px; }
.anfahrt-fakt p { margin-bottom: 10px; font-size: 0.98rem; }
.anfahrt-karte { min-height: 320px; }
.kontakt-zwischen { margin-top: 26px; }
.kontakt-formular-seite .zeiten--ruhig { margin-top: 8px; }
.kontakt-formular-seite .zeiten--ruhig td { padding: 6px 0; font-size: 0.98rem; }
.kontakt-verweis { margin-top: 20px; font-size: 0.98rem; }
.formular--karte { padding: clamp(20px, 2.4vw, 32px); }
.formular--karte .feld-reihe { gap: 12px; margin-bottom: 10px; }
.formular--karte .feld label { font-size: 0.95rem; margin-bottom: 4px; }
.formular--karte .feld input, .formular--karte .feld textarea { padding: 9px 12px; }
.formular--karte textarea { min-height: 120px; height: 120px; }
.formular--karte .form-zustimmung { margin-top: 14px; padding-top: 16px; gap: 12px; }
.formular--karte .feld--optin { padding: 12px 14px; }
.formular--karte .feld--check label { font-size: 0.9rem; line-height: 1.5; }
.formular--karte .form-fuss { margin-top: 18px; }
.jobs-foto { aspect-ratio: 16 / 10; }
.kontakt-jobs-lead { margin-top: 12px; font-size: 1.1rem; }
.kontakt-jobs-text .btn-zeile { margin-top: 20px; }

@media (min-width: 900px) {
  .kontakt-start-raster { align-items: stretch; }
  .kontakt-start-bild { display: flex; }
  .kontakt-start-bild .kontakt-foto { flex: 1 1 auto; aspect-ratio: auto; min-height: 340px; }
}

/* Brotkrumen-Leiste (Kundenwunsch 09/2026: „Menuefuehrung unsichtbar
   ueberall"): visuell ausgeblendet, bleibt fuer Vorlesesoftware und im
   BreadcrumbList-Schema erhalten. */
.brotkrumen {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   STORE-SEITE — Editorial-Stil 09/2026 („Store optisch schoener")
   ========================================================================== */
.store-intro, .store-blick { padding: clamp(56px, 6vw, 96px) 0; }
.store-intro .s-h2, .store-blick .s-h2 { font-size: clamp(1.9rem, 1.2rem + 2vw, 3.1rem); line-height: 1.02; }
.store-intro-raster { display: grid; gap: 36px; }
@media (min-width: 900px) {
  .store-intro-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .store-intro-text { grid-column: 1 / span 5; }
  .store-intro-bild { grid-column: 7 / span 6; }
}
.store-intro-text .s-text { max-width: 52ch; }
.store-intro-text .link-pfeil { margin-top: 22px; }
.store-foto { aspect-ratio: 3 / 2; }
.store-intro .kennzahlen { margin-top: clamp(40px, 5vw, 72px); }
.store-blick .s-kopf { margin-bottom: 32px; }
.store-fakten .anfahrt-fakt p a { color: var(--fast-schwarz); }
.store-fakten .anfahrt-fakt p a:hover { color: var(--rot-text); }
.store-fakten .zeiten--ruhig { margin: 10px 0 14px; max-width: none; }
.store-fakten .zeiten--ruhig td { padding: 6px 0; }
.store-fakten .oeffnungs-status { margin-bottom: 4px; font-size: 0.95rem; }
.store-anfahrt-bild { width: 100%; aspect-ratio: 16 / 10; margin: 4px 0 16px; }
.store-betreiber { color: var(--text-leise); font-size: 0.92rem; }
/* Verbund der Dein Perfektes Rad GmbH: Liste mit Linien statt Pillen
   (Kundenfeedback 10/2026: Pillen-Reihen „sehen nach KI / 0815 aus"). */
.store-verbund {
  display: grid; gap: 22px 48px; margin-top: 56px; padding-top: 34px;
  border-top: 1px solid var(--linie-stark);
}
@media (min-width: 900px) { .store-verbund { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.store-verbund-titel {
  margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.7rem); line-height: 1.05; color: var(--fast-schwarz);
}
.store-verbund-text { margin: 0; font-size: 0.98rem; line-height: 1.6; max-width: 40ch; }
.store-verbund-liste {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--linie);
}
@media (min-width: 600px) { .store-verbund-liste { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.store-verbund-liste li { margin: 0; border-bottom: 1px solid var(--linie); }
.sv-eintrag {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px;
  min-height: 76px; padding: 14px 4px; color: var(--fast-schwarz); text-decoration: none;
}
.sv-name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.1rem; letter-spacing: 0.02em; line-height: 1.1; transition: color var(--dauer, 0.18s) ease;
}
.sv-info { grid-column: 1; font-size: 0.9rem; color: var(--text-leise); }
.sv-pfeil {
  grid-column: 2; grid-row: 1 / span 2; font-size: 1.15rem;
  transition: transform var(--dauer, 0.18s) var(--easing, ease);
}
a.sv-eintrag:hover .sv-name, a.sv-eintrag:focus-visible .sv-name { color: var(--rot-text); }
a.sv-eintrag:hover .sv-pfeil { transform: translate(3px, -3px); }
a.sv-eintrag:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; }
.sv-eintrag--hier .sv-name::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 10px 2px 0;
  background: var(--rot); vertical-align: middle;
}

/* ---------- Ratgeber: Kategorie-Leiste (09/2026) ---------- */
.kat-leiste {
  position: sticky; top: var(--header-h); z-index: 90;
  background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
@media (min-width: 1121px) { body.gescrollt .kat-leiste { top: 68px; } }
.kat-leiste-inner { display: flex; align-items: center; gap: 12px 20px; padding-top: 12px; padding-bottom: 12px; }
.kat-leiste-titel {
  flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.78rem; color: var(--text-leise);
}
.kat-leiste ul {
  position: relative;
  list-style: none; margin: 0; padding: 0; display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.kat-leiste ul::-webkit-scrollbar { display: none; }
.kat-leiste li { margin: 0; flex: 0 0 auto; }
.kat-leiste a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--linie-stark); border-radius: 999px; white-space: nowrap;
  font-weight: 500; font-size: 0.95rem; color: var(--fast-schwarz); text-decoration: none;
  transition: border-color var(--dauer) ease, background-color var(--dauer) ease, color var(--dauer) ease;
}
.kat-leiste a:hover, .kat-leiste a:focus-visible { border-color: var(--fast-schwarz); background: var(--fast-schwarz); color: #fff; }
.kat-zahl { font-size: 0.8rem; color: var(--text-leise); }
.kat-leiste a:hover .kat-zahl, .kat-leiste a:focus-visible .kat-zahl { color: #ccc; }
@media (max-width: 599px) { .kat-leiste-titel { display: none; } }
.kat-sektion { scroll-margin-top: calc(var(--header-h) + 70px); }

/* ---------- CUBE 2027 prominent (09/2026) ---------- */
.hero-neu {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  padding: 6px 16px 6px 6px; border-radius: 999px;
  background: rgba(17, 17, 17, 0.55); border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
  transition: background-color var(--dauer) ease, border-color var(--dauer) ease;
}
.hero-neu-marke {
  padding: 4px 10px; border-radius: 999px; background: var(--rot-flaeche); color: #fff;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem;
}
.hero-neu-pfeil { transition: transform var(--dauer) var(--easing); }
.hero-neu:hover, .hero-neu:focus-visible { background: rgba(17, 17, 17, 0.75); border-color: #fff; color: #fff; }
.hero-neu:hover .hero-neu-pfeil { transform: translateX(4px); }
.start-hero-inhalt > .hero-neu { align-self: flex-start; }
.s-2027-aktionen { margin-top: 22px; }

/* ==========================================================================
   FAHRRADLEASING — Editorial-Stil 09/2026
   ========================================================================== */
.leasing-intro, .leasing-ablauf, .leasing-wir, .leasing-cube, .leasing-video { padding: clamp(56px, 6vw, 96px) 0; }
.leasing-intro .s-h2, .leasing-ablauf .s-h2, .leasing-wir .s-h2, .leasing-cube .s-h2, .leasing-video .s-h2 {
  font-size: clamp(1.9rem, 1.2rem + 2vw, 3.1rem); line-height: 1.02;
}
.leasing-split { display: grid; gap: 36px; }
@media (min-width: 900px) {
  .leasing-split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .leasing-split-text { grid-column: 1 / span 5; }
  .leasing-split-bild { grid-column: 7 / span 6; }
  .leasing-split--umgekehrt .leasing-split-bild { grid-column: 1 / span 6; grid-row: 1; }
  .leasing-split--umgekehrt .leasing-split-text { grid-column: 8 / span 5; grid-row: 1; }
}
.leasing-split-text .s-text { max-width: 54ch; }
.leasing-split-text .s-text p { margin: 0 0 1em; }
.leasing-split-text .link-pfeil { margin-top: 8px; }
.leasing-foto { aspect-ratio: 4 / 3; }
.leasing-intro .kennzahlen { margin-top: clamp(40px, 5vw, 72px); }
.leasing-ablauf .schritte { margin-bottom: clamp(36px, 4.5vw, 56px); }
@media (min-width: 760px) { .anfahrt-fakten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.anfahrt-fakten--2 .anfahrt-fakt ul { margin: 0; padding-left: 1.1em; }
.anfahrt-fakten--2 .anfahrt-fakt li { margin: 0 0 8px; max-width: 58ch; }
.anfahrt-fakten--2 .anfahrt-fakt p { max-width: 58ch; }
.leasing-cube .s-kopf-text p { max-width: 52ch; }
.leasing-fotos { display: grid; gap: 20px; }
@media (min-width: 700px) { .leasing-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.leasing-produkt { aspect-ratio: 4 / 5; }

/* ==========================================================================
   CUBE 2027 — Neuaufbau 09/2026 („Das Layout gefaellt mir nicht")
   Geteilter Hero: Text links auf Fast-Schwarz, Foto rechts bis zur
   Fensterkante; darunter die fixierte Sprungleiste (.kat-leiste).
   ========================================================================== */
.hero-split { position: relative; isolation: isolate; overflow: hidden; background: var(--fast-schwarz); color: #fff; }
.hero-split-bild { position: relative; aspect-ratio: 3 / 2; background: var(--fast-schwarz); }
.hero-split-bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero-split-inhalt { padding-top: 34px; padding-bottom: 44px; }
.hero-split .kapitel { margin-bottom: 18px; }
.hero-split-titel {
  margin: 0; color: #fff; max-width: 11em;
  font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.6rem); line-height: 0.96; letter-spacing: -0.01em;
}
.hero-split-lead {
  margin: 22px 0 0; max-width: 40ch; color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.55;
}
.hero-split-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 30px; }
@media (min-width: 1000px) {
  .hero-split { display: flex; align-items: center; min-height: clamp(540px, 72vh, 740px); }
  .hero-split-bild { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; aspect-ratio: auto; z-index: -1; }
  /* weicher Uebergang vom Foto in die schwarze Textflaeche */
  .hero-split-bild::after {
    content: ''; position: absolute; inset: 0 0 0 -2px;
    background: linear-gradient(90deg, var(--fast-schwarz) 0%, rgba(17, 17, 17, 0.55) 14%, rgba(17, 17, 17, 0) 38%);
  }
  .hero-split-inhalt { width: 100%; padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(56px, 6vw, 88px); }
  .hero-split-text { max-width: min(560px, 40vw); }
}
/* Teaser „CUBE 2027 jetzt bei uns" (Bikes, Ratgeber) — gleicher Aufbau */
.hero-split-hinweis { margin: 24px 0 0; max-width: 46ch; font-size: 0.95rem; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }
.hero-split-hinweis a { color: #fff; }
@media (min-width: 1000px) { .hero-split--teaser { min-height: clamp(500px, 64vh, 660px); } }
.c27-sektion { padding: clamp(56px, 6vw, 96px) 0; }
.c27-sektion .s-h2 { font-size: clamp(1.9rem, 1.2rem + 2vw, 3.1rem); line-height: 1.02; }
.c27-sektion .s-kopf-text .link-pfeil { margin-top: 10px; }
.c27-hinweis { margin: 28px 0 0; max-width: 72ch; font-size: 0.92rem; line-height: 1.6; color: var(--text-leise); }
/* Neuheiten: 4 x 2 Raster, nummeriert; Kachel 8 = Beratung */
.neu-raster {
  list-style: none; margin: 0; padding: 0; counter-reset: neu27;
  display: grid; gap: 0 24px; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .neu-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .neu-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.neu-raster > li {
  counter-increment: neu27; display: flex; flex-direction: column; gap: 8px;
  margin: 0; padding: 22px 0 28px; border-top: 1px solid var(--linie-stark);
}
.neu-raster > li::before {
  content: counter(neu27, decimal-leading-zero); color: var(--rot-text);
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; font-size: 0.85rem;
}
.neu-titel {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); line-height: 1.15; color: var(--fast-schwarz);
}
.neu-text { font-size: 0.98rem; line-height: 1.55; max-width: 34ch; }
.neu-raster > li.neu-cta {
  counter-increment: none; padding: 22px 22px 26px; background: var(--fast-schwarz); color: #c8c8c8;
  border-top-color: var(--fast-schwarz); border-radius: var(--radius);
}
.neu-raster > li.neu-cta::before { content: none; }
.neu-cta .neu-titel { color: #fff; }
.neu-cta .link-pfeil { margin-top: auto; padding-top: 10px; }
@media (min-width: 1100px) { .neu-raster > li.neu-cta { margin-top: 12px; } }
/* Stimmungsbild zwischen den Sektionen */
.c27-band { line-height: 0; }
.c27-band .s-bild { border-radius: 0; aspect-ratio: 21 / 8; }
@media (max-width: 699px) { .c27-band .s-bild { aspect-ratio: 16 / 9; } }
/* Einsatzbereiche */
.welt-raster { display: grid; gap: 40px 24px; }
@media (min-width: 700px) { .welt-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .welt-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.welt-karte { display: flex; flex-direction: column; align-items: flex-start; }
.welt-bild { width: 100%; aspect-ratio: 4 / 3; margin-bottom: 18px; }
.welt-karte h3 {
  margin: 0 0 8px; font-size: clamp(1.15rem, 1rem + 0.45vw, 1.4rem); text-transform: uppercase; letter-spacing: 0.02em;
}
.welt-karte p { margin: 0 0 14px; max-width: 46ch; font-size: 0.98rem; line-height: 1.6; }
.welt-karte .link-pfeil { margin-top: auto; }
/* Serien */
.serien-raster {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) { .serien-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .serien-raster { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.serie-kachel { margin: 0; min-width: 0; }
.serie-bild { aspect-ratio: 4 / 3; }
.serie-name {
  display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 1rem; color: var(--fast-schwarz);
}
.serien-weitere {
  display: grid; gap: 12px 32px; margin-top: clamp(36px, 4vw, 52px); padding-top: 24px;
  border-top: 1px solid var(--linie-stark);
}
@media (min-width: 900px) { .serien-weitere { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }
.serien-weitere-titel {
  margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.8rem; color: var(--text-leise); padding-top: 12px;
}
.serien-pillen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.serien-pillen li {
  margin: 0; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border: 1px solid var(--linie-stark); border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem;
}
.serien-weitere-text { margin: 0; max-width: 64ch; font-size: 0.95rem; color: var(--text-leise); }
@media (min-width: 900px) { .serien-weitere-text { grid-column: 2; } }
/* Newsletter */
.c27-nl-raster { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .c27-nl-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .c27-nl-text { grid-column: 1 / span 5; }
  .c27-nl-form { grid-column: 7 / span 6; }
}
.c27-nl-form .formular {
  max-width: none; background: var(--offwhite); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: clamp(22px, 2.8vw, 36px);
}
.c27-nl-form .formular h3 { margin-top: 0; }
.haken-liste { list-style: none; margin: 22px 0 0; padding: 0; }
.haken-liste li { position: relative; margin: 0; padding: 10px 0 10px 30px; border-top: 1px solid var(--linie); }
.haken-liste li:last-child { border-bottom: 1px solid var(--linie); }
.haken-liste li::before {
  content: ''; position: absolute; left: 2px; top: 17px; width: 12px; height: 7px;
  border-left: 2px solid var(--rot); border-bottom: 2px solid var(--rot); transform: rotate(-45deg);
}
/* Abschluss */
.c27-ende-raster { display: grid; gap: 24px 48px; }
@media (min-width: 900px) { .c27-ende-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: end; } }
.c27-ende-raster .s-text { margin-top: 0; max-width: 52ch; }
.s-faq { scroll-margin-top: calc(var(--header-h) + 70px); }

/* ==========================================================================
   KARTENREIHEN IM CUBE.EU-STIL (09/2026)
   Grosse Fotos ohne Rahmen, Titel in Versalien, kurzer Text, unterstrichener
   Link rechts. Reihen laufen seitlich: links auf der Containerkante, rechts
   bis zum Fensterrand; unten ein Strich je Karte + Pfeile.
   ========================================================================== */
.ck-sektion { padding: clamp(56px, 6vw, 96px) 0; overflow: hidden; }
.ck-sektion .s-h2 { font-size: clamp(1.9rem, 1.2rem + 2vw, 3.1rem); line-height: 1.02; }
.ck-sektion .s-kopf { margin-bottom: clamp(28px, 3.5vw, 48px); }
.ck-sektion .s-kopf-text p { max-width: 46ch; }
.ck-sektion .s-kopf-text .link-pfeil { margin-top: 8px; }
.ck-spur {
  --ck-gap: clamp(16px, 1.8vw, 26px);
  /* position: relative macht die Spur zum Bezugsrahmen fuer absolut
     positionierte Kinder (z. B. .nur-sr „(neues Fenster)") — sonst ragten die
     aus der Scroll-Spur heraus und die ganze Seite liess sich seitlich
     verschieben (Kundenfeedback 09/2026, bikes.html). */
  position: relative;
  list-style: none; margin: 0; display: flex; gap: var(--ck-gap);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory;
  padding-left: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  scroll-padding-left: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  padding-right: var(--pad); padding-bottom: 4px;
}
.ck-spur::-webkit-scrollbar { display: none; }
.ck-spur:focus-visible { outline-offset: -3px; }
.ck-spur > .ck { flex: 0 0 auto; width: min(82vw, 440px); scroll-snap-align: start; margin: 0; }
@media (min-width: 700px) {
  .ck-spur > .ck { width: calc((min(100vw, var(--max)) - 2 * var(--pad) - var(--ck-gap)) / 2.15); }
}
@media (min-width: 1000px) {
  /* drei Karten auf der Containerbreite, die vierte blitzt rechts an */
  .ck-spur > .ck { width: calc((min(100vw, var(--max)) - 2 * var(--pad) - 2 * var(--ck-gap)) / 3); }
}
@media (hover: hover) and (pointer: fine) {
  .ck-spur { cursor: grab; }
  .ck-spur.zieht { cursor: grabbing; }
}
.ck-spur.zieht { scroll-snap-type: none; }
.ck-spur.zieht img { pointer-events: none; }
/* Karte */
.ck { min-width: 0; }
.ck-link { display: flex; flex-direction: column; height: 100%; color: var(--fast-schwarz); text-decoration: none; }
.ck-bild { display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: #e4e1da; }
.ck-bild picture, .ck-bild img { display: block; width: 100%; height: 100%; }
.ck-bild img { object-fit: cover; transition: transform 0.7s var(--easing); }
a.ck-link:hover .ck-bild img, a.ck-link:focus-visible .ck-bild img { transform: scale(1.04); }
.ck-bild--leer { background: var(--offwhite); }
.ck-inhalt { display: flex; flex-direction: column; flex: 1; padding: 24px clamp(4px, 1.6vw, 26px) 0; }
.ck-meta {
  margin-bottom: 10px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.78rem; color: var(--text-leise);
}
.ck-titel {
  margin: 0 0 12px; color: var(--fast-schwarz); text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); line-height: 1.1;
}
.ck-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  margin: 0 0 22px; font-size: 1rem; line-height: 1.6; color: var(--text);
}
.ck-mehr {
  margin-top: auto; align-self: flex-end; padding-bottom: 4px; border-bottom: 3px solid currentColor;
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.92rem; line-height: 1.2; color: var(--fast-schwarz);
  transition: color var(--dauer) var(--easing);
}
a.ck-link:hover .ck-mehr, a.ck-link:focus-visible .ck-mehr { color: var(--rot-text); }
a.ck-link:hover .ck-titel { color: var(--fast-schwarz); }
/* Hochformat-Motive (Produktfotos) */
.ck-sektion--hoch .ck-bild { aspect-ratio: 4 / 5; background: #fff; }
/* Fuss: Striche mittig, Pfeile rechts (wie cube.eu) */
.ck-fuss { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: clamp(28px, 3.5vw, 48px); }
.ck-punkte { grid-column: 2; display: flex; gap: 6px; width: min(480px, 56vw); }
.ck-punkte span { flex: 1 1 0; height: 3px; background: var(--linie); transition: background-color 0.3s var(--easing); }
.ck-punkte span.an { background: var(--fast-schwarz); }
.ck-pfeile { grid-column: 3; justify-self: end; display: flex; gap: 4px; }
.ck-btn {
  width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--fast-schwarz);
  transition: color var(--dauer) var(--easing), opacity var(--dauer) var(--easing);
}
.ck-btn svg { width: 30px; height: 30px; }
.ck-btn:hover:not([disabled]) { color: var(--rot-text); }
.ck-btn[disabled] { opacity: 0.22; cursor: default; }
.schiene--passt .ck-fuss { display: none; }
.s-sektion--dunkel .ck-link, .s-sektion--dunkel .ck-titel, .s-sektion--dunkel .ck-mehr { color: #fff; }
.ck-unter { margin-top: clamp(24px, 3vw, 36px); }
/* Festes Raster (z. B. /news/, verwandte Beitraege) */
.ck-raster { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 4vw, 56px) clamp(16px, 1.8vw, 26px); }
@media (min-width: 700px) { .ck-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ck-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ck-raster > .ck { margin: 0; }
.verwandte { border-top: 0; }

/* ---------- Ratgeber: CUBE Bikekategorien 0–6 (09/2026 von /bikes.html hierher) ---------- */
.bk-sektion { padding: clamp(24px, 3vw, 40px) 0 clamp(56px, 6vw, 96px); }
.bk-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie-stark); }
.bk-reihe {
  display: grid; gap: 20px 48px; margin: 0; padding: clamp(28px, 3.5vw, 44px) 0;
  border-bottom: 1px solid var(--linie);
}
@media (min-width: 800px) { .bk-reihe { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); align-items: start; } }
.bk-bild { max-width: 300px; }
.bk-bild img { display: block; width: 100%; height: auto; }
.bk-nr {
  margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.85rem; color: var(--rot-text);
}
.bk-titel {
  margin: 0 0 16px; text-transform: none; letter-spacing: 0.01em;
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); line-height: 1.15;
}
.bk-inhalt { max-width: 64ch; }
.bk-inhalt ul { padding-left: 1.2em; }
.bk-fuss { display: grid; gap: 14px 40px; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 800px) { .bk-fuss { grid-template-columns: minmax(0, 7fr) auto; align-items: center; } }
.bk-fuss p { margin: 0; max-width: 60ch; }
.bk-fuss-links { display: flex; flex-wrap: wrap; gap: 12px 32px; }

/* ==========================================================================
   CUBE 2027 nach dem Vorbild cube.eu/de-de/2027 (09/2026)
   Dunkler Hero „The Next Chapter", Einleitung auf Schwarz, Serien-Bloecke
   mit Foto auf einer Seite und Text auf der anderen (abwechselnd).
   ========================================================================== */
.c27-hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(460px, 78vh, 820px); background: #050505; color: #fff; text-align: center;
}
.c27-hero-bild { position: absolute; inset: 0; z-index: -1; }
.c27-hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.c27-hero-bild::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(5, 5, 5, 0.45) 0%, rgba(5, 5, 5, 0.72) 70%),
              linear-gradient(0deg, #0e0e0e 0%, rgba(14, 14, 14, 0) 30%);
}
.c27-hero-inhalt { width: 100%; }
.c27-hero-titel {
  margin: 0; color: #fff; text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(2.8rem, 1rem + 6.6vw, 7.2rem); line-height: 0.95;
}
.c27-hero-jahr {
  display: block; margin-top: 22px; font-family: var(--font-body); font-weight: 400;
  text-transform: none; letter-spacing: 0.08em; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  color: rgba(255, 255, 255, 0.9);
}
/* Einleitung */
.c27-intro { background: #0e0e0e; color: #c8c8c8; padding: clamp(40px, 5vw, 80px) 0 clamp(64px, 7vw, 112px); }
.c27-intro-raster { display: grid; gap: 48px; }
@media (min-width: 1000px) {
  .c27-intro-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .c27-intro-text { grid-column: 1 / span 5; }
  .c27-intro-liste { grid-column: 7 / span 6; }
}
.c27-intro-lead {
  margin: 0 0 18px; color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.2;
}
.c27-intro-text p:not(.c27-intro-lead) { max-width: 52ch; line-height: 1.7; }
.c27-intro-titel {
  margin: 0 0 14px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6);
}
.neu-liste--dunkel { display: block; }
.neu-liste--dunkel li { color: #e6e6e6; border-top-color: rgba(255, 255, 255, 0.14); padding: 14px 0; }
.neu-liste--dunkel li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.neu-liste--dunkel li::before { color: #ff8a84; }
/* Serien-Block wie cube.eu: Studiofoto in voller Breite (Bike auf einer
   Seite), Text im dunklen Freiraum daneben. --fx = x-Position des Bikes. */
.c27-serie {
  position: relative; isolation: isolate; overflow: hidden; background: #0b0b0b; color: #cfcfcf;
  border-top: 1px solid #1a1a1a;
}
.c27-serie-bild { position: relative; aspect-ratio: 4 / 3; background: #0b0b0b; }
.c27-serie-bild picture, .c27-serie-bild img { display: block; width: 100%; height: 100%; }
.c27-serie-bild img { object-fit: cover; object-position: var(--fx, 50%) 50%; }
.c27-serie-inhalt { padding-top: 26px; padding-bottom: 52px; }
.c27-serie-fakt {
  margin: 0 0 12px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.82rem; color: #ff8a84;
}
.c27-serie-titel {
  margin: 0 0 18px; color: #fff; text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.2rem); line-height: 1;
}
.c27-serie-beschr { margin: 0 0 26px; max-width: 48ch; line-height: 1.7; font-size: 1.02rem; }
.c27-serie-link {
  display: inline-block; padding-bottom: 4px; border-bottom: 2px solid currentColor; color: #fff;
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.92rem; text-decoration: none; transition: color var(--dauer) var(--easing);
}
.c27-serie-link:hover, .c27-serie-link:focus-visible { color: #ff8a84; }
@media (min-width: 1000px) {
  /* Hoehe per min-height statt aspect-ratio: aspect-ratio + max-height hat die
     BREITE ueber das Seitenverhaeltnis auf 1529 px begrenzt — auf breiten
     Bildschirmen endete der Block rechts vor dem Rand (Kundenfeedback 09/2026).
     Bis 1529 px exakt 16:9, darueber waechst die Hoehe mit 45vw weiter
     (Bild wird oben/unten hoechstens je 10 % beschnitten, die Bikes stehen
     in allen Motiven innerhalb dieser Zone). */
  .c27-serie { display: flex; align-items: center; min-height: max(540px, min(56.25vw, max(860px, 45vw))); }
  .c27-serie-bild { position: absolute; inset: 0; aspect-ratio: auto; z-index: -1; }
  .c27-serie-bild img { object-position: 50% 50%; }
  .c27-serie-inhalt { width: 100%; display: flex; padding-top: 48px; padding-bottom: 48px; }
  .c27-serie--text-rechts .c27-serie-inhalt { justify-content: flex-end; }
  .c27-serie-text { width: min(470px, 38%); }
}
/* Weitere Highlights */
.c27-weitere { background: #0e0e0e; color: #cfcfcf; border-top: 1px solid #1c1c1c; padding: clamp(64px, 7vw, 112px) 0; }
.c27-weitere .s-h2 { color: #fff; font-size: clamp(1.9rem, 1.2rem + 2vw, 3.1rem); line-height: 1.02; }
.c27-weitere .kapitel { color: rgba(255, 255, 255, 0.8); }
.c27-weitere .s-kopf-text p { color: #c8c8c8; }
.c27-weitere-raster { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 28px; }
@media (min-width: 700px) { .c27-weitere-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .c27-weitere-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.c27-weitere-item {
  display: flex; flex-direction: column; align-items: flex-start; margin: 0;
  padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.c27-weitere-item h3 {
  margin: 0 0 12px; color: #fff; text-transform: uppercase; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.05;
}
.c27-weitere-item p:not(.c27-serie-fakt) { margin: 0 0 20px; max-width: 46ch; line-height: 1.65; }
.c27-weitere-item .c27-serie-link { margin-top: auto; }
/* Produktuebersicht */
.c27-video { padding: clamp(64px, 7vw, 112px) 0; }
.c27-video .s-h2 { font-size: clamp(1.9rem, 1.2rem + 2vw, 3.1rem); line-height: 1.02; }
.c27-video-raster { display: grid; gap: 36px; }
@media (min-width: 1000px) {
  .c27-video-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .c27-video-text { grid-column: 1 / span 4; }
  .c27-video-film { grid-column: 6 / span 7; }
}
.c27-video-text .link-pfeil { margin-top: 18px; }
.c27-video-film .embed-platzhalter { aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: center; }
.c27-video-film .embed-wrap iframe { aspect-ratio: 16 / 9; height: auto; }
.c27-zubehoer { padding: clamp(56px, 6vw, 96px) 0; }
.c27-zubehoer .s-h2 { font-size: clamp(1.9rem, 1.2rem + 2vw, 3.1rem); line-height: 1.02; }
.c27-pillen li { background: #fff; }
.c27-zubehoer .ck-bild { background: #111; }
.c27-kauf-bild { width: 100%; aspect-ratio: 3 / 2; margin-bottom: 20px; }

/* ---------- Einstiegs-Animation (nur ohne Bewegungsreduzierung) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .start-hero-inhalt > * { animation: heroEin 0.8s var(--easing) both; }
  .start-hero-inhalt > :nth-child(2) { animation-delay: 0.06s; }
  .start-hero-inhalt > :nth-child(3) { animation-delay: 0.12s; }
  .start-hero-inhalt > :nth-child(4) { animation-delay: 0.2s; }
  .start-hero-inhalt > :nth-child(5) { animation-delay: 0.28s; }
  .start-hero-fuss { animation: heroEin 0.8s var(--easing) 0.36s both; }
  .start-hero-bild img { animation: heroBild 1.8s var(--easing) both; }
  @keyframes heroEin { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes heroBild { from { transform: scale(1.06); } to { transform: none; } }
}

/* ---------- Bewegung komplett abschaltbar ----------
   Deckt jede Animation und jeden Uebergang ab — auch die neuen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

@media print { .site-header, .site-footer, .consent-banner, .newsletter-cta { display: none; } }

/* ==========================================================================
   JOBS: Uebersicht, Stellenseiten, Kurzbewerbung (Neuaufbau 09/2026)
   Kundenwunsch: schneller bewerben, einfacher Ablauf, schoenere Unterseiten.
   ========================================================================== */
.hero--jobs .hero-inhalt > p:not(.kicker) { max-width: 58ch; margin-left: auto; margin-right: auto; }

/* Offene Stellen als ruhige Zeilen */
.stellen-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie-stark); }
.stelle-zeile { display: grid; gap: 20px 48px; padding: 28px 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 900px) {
  .stelle-zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 34px 0; }
}
.stelle-zeile-titel { margin: 0; font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2.1rem); line-height: 1.1; }
.stelle-zeile-titel a { color: var(--fast-schwarz); text-decoration: none; transition: color var(--dauer) var(--easing); }
.stelle-zeile-titel a:hover, .stelle-zeile-titel a:focus-visible { color: var(--rot-text); }
.stelle-mwd { color: var(--rot-text); }
.stelle-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.stelle-chips li {
  margin: 0; padding: 5px 12px; border: 1px solid var(--linie-stark); border-radius: 999px;
  font-size: 0.86rem; line-height: 1.3; color: var(--text);
}
.stelle-zeile-kurz { margin: 14px 0 0; max-width: 68ch; line-height: 1.6; }
.stelle-zeile-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }

/* Vorteile: Versal-Titel mit Nummer auf Linien (wie die cube.eu-Kacheln) */
.vorteile-raster {
  list-style: none; margin: 0; padding: 0; display: grid; column-gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
@media (min-width: 1100px) { .vorteile-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vorteile-raster li {
  display: grid; gap: 10px; align-content: start; margin: 0;
  padding: 20px 0 30px; border-top: 1px solid var(--linie-stark);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: clamp(1.12rem, 1rem + 0.4vw, 1.35rem); line-height: 1.2;
  color: var(--fast-schwarz);
}
.vorteil-nr { font-size: 0.8rem; letter-spacing: 0.12em; color: var(--rot-text); }

/* Team */
.jobs-team-raster { display: grid; gap: 36px; }
@media (min-width: 900px) {
  .jobs-team-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .jobs-team-bild { grid-column: 1 / span 5; }
  .jobs-team-text { grid-column: 7 / span 6; }
}
.jobs-team-foto { aspect-ratio: 4 / 5; }
.jobs-team-foto img { object-position: 50% 35%; }
@media (max-width: 899px) { .jobs-team-foto { aspect-ratio: 4 / 3; } }

/* Aufgaben, Profil, Angebot, „Hast Du Lust auf": dieselbe Haken-Liste wie
   auf der CUBE-2027-Seite (Linien zwischen den Punkten, roter Haken). */
.stelle-block .haken-liste li, .jobs-team-text .haken-liste li { line-height: 1.55; max-width: 68ch; }
.jobs-team-text .haken-liste li { font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem); color: var(--fast-schwarz); }

/* Kurzbewerbung: links Ablauf in drei Schritten, rechts das Formular */
.bewerben-raster { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .bewerben-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .bewerben-text { grid-column: 1 / span 5; }
  .bewerben-karte { grid-column: 7 / span 6; }
}
.bewerben .s-h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.7rem); line-height: 1.02; }
.bewerben .kapitel { margin-bottom: 14px; }
.bewerben-schritte { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--linie-stark); }
.bewerben-schritte li {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; margin: 0;
  padding: 18px 0; border-bottom: 1px solid var(--linie);
}
.schritt-nr {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--fast-schwarz); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1;
}
.bewerben-schritte h3 { margin: 6px 0 4px; font-size: 1.15rem; line-height: 1.2; }
.bewerben-schritte p { margin: 0; font-size: 0.98rem; line-height: 1.6; max-width: 46ch; }
.bewerben-alternativ, .bewerben-teilen { margin: 22px 0 0; font-size: 0.98rem; line-height: 1.6; max-width: 46ch; }
.bewerben-alternativ a, .bewerben-teilen a { color: var(--rot-text); }
.bewerbung-stelle {
  margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid var(--rot-flaeche);
  background: var(--offwhite); font-size: 1rem; line-height: 1.45;
}
.bewerbung-stelle strong { color: var(--fast-schwarz); }
.feld--datei { margin-bottom: 14px; }
.feld--datei label { display: block; font-weight: 500; margin-bottom: 5px; }
.feld--datei input[type="file"] {
  width: 100%; padding: 12px; border: 1px dashed var(--linie-stark); border-radius: var(--radius);
  background: var(--offwhite); font: inherit; font-size: 0.95rem; color: var(--text); cursor: pointer;
}
.feld--datei input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 9px 16px; border: 0; border-radius: 4px;
  background: var(--fast-schwarz); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.feld-hinweis { margin: 6px 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-leise); }

/* Stellenseite: Kopf */
.stelle-kopf { padding: clamp(36px, 5vw, 84px) 0; }
.stelle-kopf-raster { display: grid; gap: 32px; }
@media (min-width: 900px) {
  .stelle-kopf-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .stelle-kopf-text { grid-column: 1 / span 7; }
  .stelle-kopf-bild { grid-column: 8 / span 5; }
}
.stelle-zurueck {
  display: inline-flex; align-items: center; gap: 0.6em; min-height: 44px; margin: -10px 0 12px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.85rem; color: var(--fast-schwarz); text-decoration: none;
}
.stelle-zurueck::before { content: '←'; transition: transform var(--dauer) var(--easing); }
.stelle-zurueck:hover, .stelle-zurueck:focus-visible { color: var(--rot-text); }
.stelle-zurueck:hover::before, .stelle-zurueck:focus-visible::before { transform: translateX(-4px); }
.stelle-kopf .kapitel { margin-bottom: 14px; }
.stelle-titel { margin: 0; font-size: clamp(2.2rem, 1.3rem + 3vw, 4rem); line-height: 1; }
.stelle-lead { margin: 22px 0 0; max-width: 52ch; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.6; }
.stelle-chips--gross { margin-top: 22px; }
.stelle-chips--gross li { background: #fff; font-size: 0.9rem; padding: 6px 14px; }
.stelle-kopf .btn-zeile { margin-top: 28px; align-items: center; gap: 12px 28px; }
.stelle-foto { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .stelle-foto { aspect-ratio: 5 / 4; } }

/* Stellenseite: Inhalt + „Auf einen Blick" (Desktop mitlaufend) */
.stelle-inhalt-raster { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .stelle-inhalt-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .stelle-inhalt-text { grid-column: 1 / span 7; }
  .stelle-seite { grid-column: 9 / span 4; position: sticky; top: calc(var(--header-h) + 28px); }
}
/* mobil stehen Eckdaten und Bewerben-Knopf direkt unter dem Kopf */
@media (max-width: 899px) { .stelle-seite { order: -1; } }
.stelle-intro p {
  margin: 0 0 14px; max-width: 62ch; line-height: 1.7;
  font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
}
.stelle-intro + .stelle-block, .stelle-block + .stelle-block { margin-top: clamp(40px, 4.5vw, 64px); }
.stelle-h2 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: 1.05; }
.stelle-blick {
  padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--offwhite);
}
.stelle-blick-titel { margin: 0 0 10px; font-size: 1.35rem; line-height: 1.1; }
.stelle-fakten { margin: 0; }
.stelle-fakten div { padding: 12px 0; border-top: 1px solid var(--linie); }
.stelle-fakten dt {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.76rem; line-height: 1.2; color: var(--text-leise);
}
.stelle-fakten dd { margin: 4px 0 0; font-weight: 500; line-height: 1.45; color: var(--fast-schwarz); }
.stelle-blick-btn { display: block; width: 100%; text-align: center; margin-top: 16px; }
.stelle-blick-hinweis { margin: 12px 0 0; font-size: 0.9rem; line-height: 1.5; text-align: center; color: var(--text-leise); }
.stellen--weitere .s-kopf { margin-bottom: clamp(24px, 3vw, 40px); }
.jobs-team-text .haken-liste li::before { top: 19px; }
/* Mobil zuerst das Formular, der Ablauf steht darunter (schneller bewerben) */
@media (max-width: 899px) {
  .bewerben-raster { gap: 0; }
  .bewerben-text { display: contents; }
  .bewerben-text > .kapitel { order: 1; }
  .bewerben-text > .s-h2 { order: 2; margin-bottom: 24px; }
  .bewerben-karte { order: 3; }
  .bewerben-schritte { order: 4; margin-top: 40px; }
  .bewerben-alternativ { order: 5; }
  .bewerben-teilen { order: 6; }
}

/* Startseite „01 Der Store": Kacheln direkt klickbar (Kundenwunsch 10/2026) */
.kennzahl-karte { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; min-height: 44px; }
.kennzahl-pfeil { display: inline-block; margin-left: 0.45em; color: var(--rot-text); transition: transform var(--dauer) var(--easing); }
.kennzahl-karte:hover .kennzahl, .kennzahl-karte:focus-visible .kennzahl,
.kennzahl-titel-link:hover, .kennzahl-titel-link:focus-visible { color: var(--rot-text); }
.kennzahl-karte:hover .kennzahl-pfeil, .kennzahl-karte:focus-visible .kennzahl-pfeil { transform: translateX(4px); }
.kennzahl-titel-link { text-decoration: none; transition: color var(--dauer) ease; }
.kennzahl-titel-link:hover .kennzahl-pfeil, .kennzahl-titel-link:focus-visible .kennzahl-pfeil { transform: translate(3px, -3px); }
.kennzahl-karte .kennzahl-text { transition: color var(--dauer) ease; }
.kennzahl-karte:hover .kennzahl-text { color: var(--text); }

/* Oeffnungszeiten: heutiger Tag markiert (Kundenwunsch 10/2026).
   Gruen, wenn heute geoeffnet ist, sonst grau. Weiss auf #1f7a3d = 5,4:1. */
.zeiten tr.ist-heute td { background: #eaf6ee; color: var(--fast-schwarz); font-weight: 600; }
.zeiten tr.ist-heute td:first-child { box-shadow: inset 3px 0 0 #1f7a3d; padding-left: 14px; }
.zeiten tr.ist-heute td:last-child { padding-right: 12px; }
.zeiten tr.ist-heute td:first-child::after {
  content: 'Heute'; display: inline-block; margin-left: 10px; padding: 2px 8px 1px;
  border-radius: 999px; background: #1f7a3d; color: #fff; vertical-align: 2px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; line-height: 1.4;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.zeiten tr.ist-heute[data-heute-offen="nein"] td { background: var(--offwhite); }
.zeiten tr.ist-heute[data-heute-offen="nein"] td:first-child { box-shadow: inset 3px 0 0 var(--text-leise); }
.zeiten tr.ist-heute[data-heute-offen="nein"] td:first-child::after { background: var(--text-leise); }

/* Ueberschrift + rote Linie + Text: gleichmaessige Abstaende (Kundenfeedback
   10/2026, Ratgeber: „wirkt wie ein Fehler der Abstand"). Vorher stand die
   Linie weit unter der Ueberschrift und der Text klebte direkt darunter. */
h1:has(+ .trenner), h2:has(+ .trenner) { margin-bottom: 0; }
h1 + .trenner, h2 + .trenner { margin-top: 18px; }
.trenner + p, .trenner + div, .trenner + ul { margin-top: 24px; }

/* ==========================================================================
   BEITRAGS-LAYOUTS (Vorschau 10/2026, drei Varianten zur Auswahl)
   ========================================================================== */
.bv-leiste { background: var(--fast-schwarz); color: #fff; font-size: 0.9rem; padding: 10px 0; }
.bv-leiste .container { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.bv-leiste-links { margin-left: auto; display: flex; gap: 14px; }
.bv-leiste a { color: #fff; }
.bv-leiste a[aria-current] { color: #ff8a84; font-weight: 700; text-decoration: none; }

/* gemeinsam */
.bv-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 18px; font-size: 0.88rem; color: var(--text-leise); }
.bv-kat { color: var(--rot-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-display); }
.bv-titel { margin: 0; font-size: clamp(2.2rem, 1.3rem + 3vw, 4rem); line-height: 1; }
.bv-lead p { margin: 24px 0 0; font-size: clamp(1.08rem, 1rem + 0.35vw, 1.28rem); line-height: 1.6; color: var(--fast-schwarz); max-width: 56ch; }
.bv-titelbild { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: var(--r); background: #e4e1da; }
.bv-titelbild img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bv-text { font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem); line-height: 1.75; }
.bv-text p { margin: 0 0 1em; }
.bv-text a:not(.btn) { color: var(--rot-text); }
.bv-text ul { list-style: none; margin: 0 0 1.2em; padding: 0; border-top: 1px solid var(--linie); }
.bv-text ul li { position: relative; margin: 0; padding: 12px 0 12px 32px; border-bottom: 1px solid var(--linie); line-height: 1.6; }
.bv-text ul li::before {
  content: ''; position: absolute; left: 3px; top: 21px; width: 12px; height: 7px;
  border-left: 2px solid var(--rot); border-bottom: 2px solid var(--rot); transform: rotate(-45deg);
}
.bv-text li strong { color: var(--fast-schwarz); }
.bv-bild { margin: 36px 0; }
.bv-bild picture, .bv-bild img { display: block; width: 100%; border-radius: var(--radius); }
.bv-bild figcaption { margin-top: 10px; font-size: 0.88rem; color: var(--text-leise); }
.bv-cta {
  margin-top: clamp(48px, 6vw, 80px); padding: clamp(28px, 4vw, 48px); border-radius: var(--radius);
  background: var(--fast-schwarz); color: #d6d6d6;
}
.bv-cta h2 { color: #fff; margin: 6px 0 12px; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem); }
.bv-cta p { margin: 0; }
.bv-cta a:not(.btn) { color: #fff; }
.bv-cta .btn:not(.btn--hell) { color: #fff; }
.bv-cta .btn-zeile { margin-top: 24px; }
.bv-cta-kicker { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: #ff8a84; }

/* Kopf (A und C) */
.bv-kopf { padding: clamp(36px, 5vw, 84px) 0; }
.bv-kopf-raster { display: grid; gap: 32px; }
@media (min-width: 900px) {
  .bv-kopf-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .bv-kopf-text { grid-column: 1 / span 6; }
  .bv-kopf .bv-titelbild { grid-column: 8 / span 5; }
}
.bv-kopf .kapitel { margin-bottom: 14px; }

/* A: Inhaltsverzeichnis links, Lesespalte rechts */
.bv-a-raster { display: grid; gap: 40px; }
@media (min-width: 1000px) {
  .bv-a-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .bv-toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 28px); }
  .bv-a .bv-text { grid-column: 5 / span 7; }
}
.bv-toc-titel { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: var(--text-leise); }
.bv-toc ol { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--linie-stark); }
.bv-toc li { margin: 0; border-bottom: 1px solid var(--linie); }
.bv-toc ol a { display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 10px 0; min-height: 44px; color: var(--fast-schwarz); text-decoration: none; font-size: 0.95rem; line-height: 1.35; }
.bv-toc ol a span { color: var(--rot-text); font-family: var(--font-display); font-weight: 700; }
.bv-toc ol a:hover, .bv-toc ol a:focus-visible { color: var(--rot-text); }
.bv-abschnitt { scroll-margin-top: calc(var(--header-h) + 24px); }
.bv-abschnitt + .bv-abschnitt { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--linie); }
.bv-nr { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; color: var(--rot-text); letter-spacing: 0.08em; }
.bv-abschnitt h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: 1.05; margin: 0 0 18px; }

/* B: alles in einer ruhigen, zentrierten Spalte */
.bv-b-spalte { max-width: 760px; margin: 0 auto; }
.bv-b-kopf { text-align: center; }
.bv-b-kopf .stelle-zurueck { margin-top: -10px; }
.bv-b-kopf .bv-meta { justify-content: center; }
.bv-b-kopf .bv-lead p { margin-left: auto; margin-right: auto; }
.bv-titelbild--mitte { margin: clamp(32px, 4vw, 48px) 0; }
.bv-b .bv-text h2 { position: relative; margin: clamp(44px, 5vw, 64px) 0 16px; padding-top: 22px; font-size: clamp(1.55rem, 1.2rem + 1vw, 2.1rem); line-height: 1.08; }
.bv-b .bv-text h2::before { content: ''; position: absolute; top: 0; left: 0; width: 48px; height: 4px; border-radius: 2px; background: var(--rot); }
.bv-karten { display: grid; gap: 14px; margin: 6px 0 1.4em; }
@media (min-width: 640px) { .bv-karten--2, .bv-karten--4 { grid-template-columns: 1fr 1fr; } }
.bv-karte { padding: 22px 22px 20px; border: 1px solid var(--linie); border-top: 3px solid var(--rot); border-radius: var(--radius); background: var(--offwhite); }
.bv-karte h3 { margin: 0 0 8px; font-size: 1.2rem; text-transform: uppercase; }
.bv-karte p { margin: 0; font-size: 0.98rem; line-height: 1.6; }

/* C: Kapitel, links Nummer + Titel, rechts Text */
.bv-kapitel { display: grid; gap: 14px 24px; padding: clamp(32px, 4vw, 52px) 0; border-top: 1px solid var(--linie-stark); }
@media (min-width: 900px) {
  .bv-kapitel { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bv-kapitel-kopf { grid-column: 1 / span 4; }
  .bv-kapitel-text { grid-column: 6 / span 7; }
  .bv-kapitel-kopf h2 { position: sticky; top: calc(var(--header-h) + 28px); }
}
.bv-kapitel-nr { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.8rem); line-height: 1; color: var(--rot-text); }
.bv-kapitel-kopf h2 { margin: 0; font-size: clamp(1.5rem, 1.15rem + 1vw, 2.1rem); line-height: 1.08; }
.bv-kapitel-text { font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem); line-height: 1.75; }
.bv-kapitel-text p { margin: 0 0 1em; }
.bv-kapitel-text a { color: var(--rot-text); }
.bv-kapitel-text ul { list-style: none; margin: 0 0 1.2em; padding: 0; border-top: 1px solid var(--linie); }
.bv-kapitel-text ul li { position: relative; margin: 0; padding: 12px 0 12px 32px; border-bottom: 1px solid var(--linie); line-height: 1.6; }
.bv-kapitel-text ul li::before {
  content: ''; position: absolute; left: 3px; top: 21px; width: 12px; height: 7px;
  border-left: 2px solid var(--rot); border-bottom: 2px solid var(--rot); transform: rotate(-45deg);
}
.bv-c .bv-cta { margin-top: 24px; }

/* Layout A fuer alle Beitraege: Sonderfaelle */
.bv-kopf--ohne-bild .bv-kopf-text { grid-column: 1 / -1; }
@media (min-width: 1000px) { .bv-a--ohne-toc .bv-text { grid-column: 3 / span 8; } }
.bv-vorspann { margin-bottom: clamp(32px, 4vw, 48px); }
.bv-text figure, .bv-text .bild-rahmen, .bv-text .breite-figur { margin: 32px 0; max-width: 100%; width: auto; }
.bv-text figure img, .bv-text .bild-rahmen img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.bv-text .spalten { gap: 24px; margin: 24px 0; }
.bv-text h3 { margin: 28px 0 10px; font-size: 1.3rem; }
.bv-text h4 { margin: 24px 0 8px; }
.bv-text .btn-zeile { margin: 20px 0; }
.bv-text .btn { color: #fff; }
.bv-text .btn--hell { color: var(--rot-text); }

/* ==========================================================================
   SCHNELLZUGRIFF (Einblender unten rechts, Kundenwunsch 10/2026: „wie man es
   von Trusted Shops gewohnt ist"). Runder Knopf, oeffnet eine Karte mit
   Werkstatttermin, Oeffnungszeiten, Anfahrt und Onlineshop. Kein Siegel.
   ========================================================================== */
.schnellzugriff {
  position: fixed; z-index: 300;
  right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  font-family: var(--font-body);
}
/* Solange der Cookie-Banner offen ist, bleibt der Einblender weg. */
body:has(.consent-banner:not([hidden])) .schnellzugriff { display: none; }
.sz-knopf {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; min-width: 56px; padding: 0 20px 0 16px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--fast-schwarz); color: #fff;
  font: 700 0.95rem/1 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), 0 0 0 3px rgba(255, 255, 255, 0.9);
  transition: transform 0.2s var(--easing, ease), background-color 0.2s;
}
.sz-knopf:hover { background: #000; transform: translateY(-2px); }
.sz-knopf:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }
.sz-knopf-icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--rot-flaeche); color: #fff; flex: 0 0 34px;
}
.sz-knopf-icon .sz-icon { width: 19px; height: 19px; }
/* Statuspunkt am Knopf: gruen = jetzt geoeffnet (aus dem Status in der Karte) */
.sz-knopf-punkt {
  position: absolute; top: 4px; left: 40px; width: 11px; height: 11px; border-radius: 50%;
  background: #8f8f8f; box-shadow: 0 0 0 2px var(--fast-schwarz);
}
.schnellzugriff:has(.oeffnungs-status--sz[data-offen="ja"]) .sz-knopf-punkt { background: #3ecf6b; }
.schnellzugriff:has(.oeffnungs-status--sz[data-offen="nein"]) .sz-knopf-punkt { background: var(--rot); }
.sz-knopf[aria-expanded="true"] .sz-knopf-icon { background: #fff; color: var(--fast-schwarz); }
@media (max-width: 599px) {
  .sz-knopf { padding: 0; width: 58px; height: 58px; justify-content: center; }
  .sz-knopf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sz-knopf-icon { width: 58px; height: 58px; flex-basis: 58px; }
  .sz-knopf-icon .sz-icon { width: 24px; height: 24px; }
  .sz-knopf-punkt { top: 3px; left: auto; right: 3px; box-shadow: 0 0 0 2px #fff; }
}

.sz-panel {
  width: min(360px, calc(100vw - 28px)); max-height: calc(100vh - 110px); overflow-y: auto;
  background: #fff; color: var(--text);
  border-top: 3px solid var(--rot-flaeche); border-radius: 8px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
  animation: sz-rein 0.25s var(--easing, ease);
}
.sz-panel[hidden] { display: none; }
@keyframes sz-rein { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .sz-panel { animation: none; } .sz-knopf { transition: none; } }
.sz-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 8px 10px 20px; border-bottom: 1px solid var(--linie);
}
.sz-titel {
  margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.25rem; line-height: 1; color: var(--fast-schwarz); letter-spacing: 0.01em;
}
.sz-zu {
  width: 44px; height: 44px; border: 0; background: none; cursor: pointer; border-radius: 50%;
  font-size: 1.7rem; line-height: 1; color: var(--fast-schwarz);
}
.sz-zu:hover { background: var(--offwhite); }
.sz-zu:focus-visible { outline: 3px solid var(--rot); outline-offset: -3px; }
.sz-liste { list-style: none; margin: 0; padding: 6px 0 8px; }
.sz-liste > li + li { border-top: 1px solid var(--linie); }
.sz-link {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 20px;
  color: var(--fast-schwarz); text-decoration: none; cursor: pointer; list-style: none;
}
.sz-link::-webkit-details-marker { display: none; }
.sz-link:hover { background: var(--offwhite); }
.sz-link:hover strong { color: var(--rot-text); }
.sz-link:focus-visible { outline: 3px solid var(--rot); outline-offset: -3px; }
.sz-link > .sz-icon {
  flex: 0 0 40px; width: 40px; height: 40px; padding: 9px; border-radius: 50%;
  background: var(--offwhite); color: var(--rot-text);
}
.sz-link-text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.sz-link-text strong {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.08rem; letter-spacing: 0.02em; line-height: 1.1; transition: color 0.15s;
}
.sz-link-text > span { font-size: 0.9rem; color: var(--text-leise); line-height: 1.3; }
.sz-pfeil { flex: 0 0 auto; font-size: 1.1rem; color: var(--fast-schwarz); transition: transform 0.2s; }
.sz-link:hover .sz-pfeil { transform: translateX(3px); }
.sz-details[open] .sz-pfeil--auf { transform: rotate(45deg); }
.sz-link-text .oeffnungs-status--sz { font-size: 0.9rem; gap: 8px; color: var(--text-leise); }
.sz-link-text .oeffnungs-status--sz .status-punkt { width: 8px; height: 8px; flex-basis: 8px; }
.sz-details .zeiten--sz { width: calc(100% - 94px); margin: 0 20px 14px 74px; font-size: 0.92rem; }
.sz-details .zeiten--sz td { padding: 7px 4px; }
@media (max-width: 599px) {
  .sz-details .zeiten--sz { width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; }
}

/* ==========================================================================
   KEINE PILLEN (Kundenfeedback 10/2026: Reihen aus runden Kaesten „sehen nach
   KI / 0815 aus"). Hero-Hinweise als ruhige Textzeile, Job-Eckdaten als
   Meta-Zeile mit Trennpunkten, Preis-Hinweis eckig.
   ========================================================================== */
.oeffnungs-status--pill {
  padding: 0; border: 0; border-radius: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.hero-neu {
  padding: 0; border: 0; border-radius: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; gap: 12px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.hero-neu:hover, .hero-neu:focus-visible { background: none; border: 0; color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.hero-neu-marke { border-radius: 2px; text-shadow: none; padding: 3px 8px; }
.stelle-chips { gap: 0; margin-top: 12px; }
.stelle-chips li {
  padding: 0; border: 0; border-radius: 0; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.86rem; color: var(--text-leise);
}
.stelle-chips li + li::before { content: "·"; margin: 0 10px; color: var(--rot); font-weight: 700; }
.stelle-chips--gross li { background: none; padding: 0; font-size: 0.92rem; }
.preis-erst { border-radius: 2px; }

/* ==========================================================================
   VIDEO-SEKTIONEN (10/2026): ein Video gross mit Text daneben, weitere als
   Reihe darunter. Gleiche Video-Karten (Zwei-Klick, Cookie-Einwilligung).
   ========================================================================== */
.video-feature {
  display: grid; gap: 22px 48px; align-items: center; margin-top: 34px;
}
@media (min-width: 900px) { .video-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.video-feature-player .video-karte { box-shadow: var(--schatten); }
.video-feature-player .video-karte .karte-inhalt { display: none; }
.video-feature-kicker {
  margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.82rem; color: var(--rot-text);
}
.video-feature-titel {
  margin: 0 0 14px; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.1; color: var(--fast-schwarz);
}
.video-feature-text p:last-child { margin: 0; line-height: 1.65; max-width: 46ch; }
.video-reihe {
  display: grid; gap: 24px; margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--linie);
}
@media (min-width: 600px) { .video-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .video-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.video-reihe .video-karte .karte-inhalt h3 { font-size: 1.05rem; line-height: 1.25; }
/* Video am Ende eines Ratgeber-Beitrags */
.bv-video { margin: 48px 0 0; padding-top: 30px; border-top: 1px solid var(--linie); }
.bv-video-kicker {
  margin: 0 0 14px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.82rem; color: var(--rot-text);
}
.bv-video .video-karte { box-shadow: var(--schatten); }
.bv-video-text { margin: 14px 0 0; font-size: 0.95rem; color: var(--text-leise); }
.start-hero-inhalt > .oeffnungs-status--pill { margin: 0 32px 18px 0; vertical-align: middle; }
.start-hero-inhalt > .hero-neu { vertical-align: middle; }
@media (min-width: 900px) { .video-reihe.karten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Leasingpartner mit ausgeschriebenem Namen (10/2026) */
.partner-karte { flex-direction: column; gap: 12px; margin: 0; }
.partner-karte figcaption {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.86rem; color: var(--fast-schwarz); text-align: center; line-height: 1.2;
}
.partner-liste { max-width: 760px; margin: 30px auto 0; text-align: center; line-height: 1.7; }
body.nav-offen .schnellzugriff { display: none; }

/* Responsive-Check 10/2026: Touch-Ziele mindestens 44 px hoch, kein Text unter 12 px */
.hero-neu { min-height: 44px; }
.c27-serie-link { display: inline-flex; align-items: flex-end; min-height: 44px; }
.kennzahl-titel-link { padding: 11px 0; margin: -11px 0; }
.kontakt-zeilen a { display: inline-flex; align-items: center; min-height: 44px; }
.zurueck-link { display: inline-flex; align-items: center; min-height: 44px; }
.kanal-label { font-size: 0.8rem; }
/* Lange deutsche Woerter in schmalen Spalten mit Trennstrich umbrechen statt
   mitten im Wort ohne Strich ("MEISTERWERKSTA / TT") */
/* Kundenwunsch 10/2026: Woerter NIE trennen (weder mit noch ohne Strich).
   Ueberschriften brechen nur an Leerzeichen um; schmale Spalten werden am
   Handy einspaltig, damit jedes Wort hineinpasst. */
h1, h2, h3, h4, h5, .kennzahl, .sv-name, .sz-link-text strong, .kanal-wert {
  -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; word-break: normal;
}
.nbr-wort { white-space: nowrap; }
@media (max-width: 599px) {
  .kennzahlen { grid-template-columns: minmax(0, 1fr); }
  .kennzahlen li, .kennzahlen li:nth-child(even) { padding: 22px 0 0; border-left: 0; }
  .kennzahlen li:nth-child(n+2) { margin-top: 22px; border-top: 1px solid var(--linie); }
}
@media (max-width: 699px) { .hero-wechsel .hero-wechsel-punkt { display: none; } }
/* Kontaktwege am Handy: Beschriftung oben, Wert ueber die volle Breite, rechts
   nur der Pfeil (die spaetere kompakte Regel hatte die Handy-Regel ueberschrieben,
   „Dingolf / ing" brach mitten im Wort um). */
@media (max-width: 599px) {
  .kanal, .kanaele--filialen .kanal { grid-template-columns: minmax(0, 1fr) auto; }
  .kanal-label { grid-column: 1 / -1; }
  .kanal-wert { overflow-wrap: break-word; }
  .kanal-aktion { font-size: 0; gap: 0; }
  .kanal-aktion::after { font-size: 1.15rem; }
}
.schnellzugriff { transition: transform 0.25s var(--easing, ease), opacity 0.25s; }
.schnellzugriff.sz-weg { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .schnellzugriff { transition: none; } }

/* Keine Emoji-faehigen Zeichen (10/2026): iOS zeigte „↗" und „▶" als bunte
   Emoji-Kaestchen. Play-Dreieck per CSS, Extern-Pfeil als SVG. */
.play-kreis::before {
  content: ""; display: block; width: 0; height: 0; margin-left: 4px;
  border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff;
}
.video-ctp .play .play-kreis::before { border-width: 11px 0 11px 18px; }
.sz-pfeil .icon-extern, .sv-pfeil .icon-extern { width: 14px; height: 14px; margin: 0; display: block; }
.kennzahl-pfeil .icon-extern { width: 0.62em; height: 0.62em; margin: 0; display: inline-block; vertical-align: 0.05em; }

/* Startseite am Handy: weniger Leerraum oben, Inhalte frueher sichtbar (10/2026) */
@media (max-width: 699px) {
  .start-hero-bild { height: 96vw; }
  .start-hero-inhalt { padding-top: 60vw; }
  .hero-wechsel-leiste { top: calc(60vw - 50px); }
  .start-hero-kicker { margin-top: 16px; margin-bottom: 10px; }
}
/* Sehr schmale Handys (bis 360 px): lange Stellentitel wie „Zweirad-Mechatroniker"
   passen ohne Umbruch in die Zeile */
@media (max-width: 360px) { .stelle-titel { font-size: 1.7rem; } .bv-titel { font-size: 1.85rem; } }

/* ---------- Startseite: Store-Video statt Foto-Wechsel (10/2026) ----------
   Standbild darunter, Video blendet erst ein, wenn es laeuft. */
.start-hero-bild picture { display: block; width: 100%; height: 100%; }
.start-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.8s ease;
}
.start-hero-video.ist-bereit { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .start-hero-video { transition: none; } }
@media (max-width: 699px) {
  .start-hero-bild { height: 64vw; }
  .start-hero-bild img { object-position: 50% 50%; }
  .start-hero-inhalt { padding-top: 50vw; }
  .hero-wechsel-leiste { top: calc(50vw - 50px); }
}

/* Leasingpartner ohne Logo: Name als Schriftzug (gleiche Kartenhoehe) */
.partner-karte--text .partner-name { font-size: 1.05rem; letter-spacing: 0.02em; }
/* Standbild und Video mit gleichem Ausschnitt (kein Sprung beim Einblenden) */
.start-hero-bild img, .start-hero-video { object-position: 50% 50%; }
@media (min-width: 700px) and (max-width: 1279px) { .start-hero-bild img, .start-hero-video { object-position: 50% 50%; } }