/* main.css — Oberland Automobile. Alles auf den Tokens aus tokens.css. */

/* Fonts ---------------------------------------------------------------- */
@font-face{font-family:Poppins;src:url(/assets/fonts/Poppins-Light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/Poppins-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/Poppins-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/Poppins-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/Poppins-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* Archivo traegt die Ueberschriften. Nur 600/700 - mehr Schnitte braucht der
   Displaysatz nicht, und jede Datei kostet Ladezeit. */
@font-face{font-family:Archivo;src:url(/assets/fonts/Archivo-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/assets/fonts/Archivo-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Sprungziele nicht unter die schwebende Kopfleiste schieben (die ist rund 115 px hoch) */
:target,section[id]{scroll-margin-top:128px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--color-text);background:var(--color-surface);-webkit-font-smoothing:antialiased}
/* Die geschlossene Mobil-Navigation steht per translateX(100%) rechts ausserhalb des
   Viewports und wuerde die Seite sonst horizontal scrollbar machen. clip statt hidden,
   weil hidden einen Scroll-Container erzeugt und damit position:sticky im Header bricht. */
html,body{overflow-x:clip}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{color:var(--color-heading);font-family:var(--font-display);font-weight:var(--fw-semibold);
  line-height:var(--lh-heading);letter-spacing:var(--ls-display);margin:0 0 .5em}
h1{font-size:var(--fs-h1);line-height:var(--lh-display);font-weight:var(--fw-bold)}
h2{font-size:var(--fs-h2);line-height:var(--lh-display)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
p{margin:0 0 1em}
a{color:var(--color-accent-on-dark);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--color-accent-hover)}
ul{margin:0 0 1em;padding-left:1.2em}
:focus-visible{outline:3px solid var(--color-accent-on-dark);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--color-accent);color:#fff;padding:12px 20px;border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0}

/* Scroll-Reveal ---------------------------------------------------------- */
/* Osmo "Elements Reveal on Scroll" (osmo.supply), portiert aus degomotors.com und von
   main.js gesteuert (Erklaerung dort). Es wird nichts versteckt, solange <html> nicht
   .reveal-on traegt - das setzt head.html und nimmt es zurueck, wenn das Skript nicht
   anspringt. Eine blockierte Datei laesst die Seite also nie leer.
   [data-reveal] = schon vor dem ersten Frame unsichtbar (fuer den Hero, der beim Laden
   hereinkommt). Die Engine schiebt jeden Block durch out -> in -> done.
   power4.inOut aus dem Original = cubic-bezier(.77, 0, .175, 1). */
.reveal-on {
  /* Osmos 2em, gedeckelt - sonst wandert eine 60px-Hero-Zeile 120px weit */
  --reveal-distance: min(2em, 2.5rem);
  --reveal-ease: cubic-bezier(.77, 0, .175, 1);
}
.reveal-on [data-reveal]:not([data-reveal-item]),
.reveal-on [data-reveal-item="out"] { opacity: 0; transform: translateY(var(--reveal-distance)) }
.reveal-on [data-reveal-item="in"] { transition: opacity .8s var(--reveal-ease), transform .8s var(--reveal-ease) }
@media (prefers-reduced-motion: reduce) {
  .reveal-on [data-reveal], .reveal-on [data-reveal-item] { opacity: 1 !important; transform: none !important; transition: none !important }
}

/* Ueberschriften steigen von unten herein -------------------------------- */
/* main.js legt den Inhalt jeder h1/h2 in .rise__i und setzt data-rise. Die
   Maske braucht unten Luft, sonst schneidet sie Unterlaengen ab - die
   Anzeigenschrift laeuft mit Zeilenhoehe 1,08. Das Polster wird vom
   Aussenabstand abgezogen, damit sich das Layout nicht verschiebt.
   Ausgeloest wird ueber den Zustand des umgebenden Blocks, den die
   Reveal-Engine ohnehin setzt - kein zweiter Beobachter. */
.reveal-on [data-rise]{overflow:hidden;padding-bottom:.16em;
  margin-bottom:calc(.5em - .16em)}
.reveal-on [data-rise] > .rise__i{display:block;transform:translateY(125%);
  transition:transform .85s var(--reveal-ease)}
.reveal-on [data-reveal-item="in"] [data-rise] > .rise__i,
.reveal-on [data-reveal-item="done"] [data-rise] > .rise__i,
.reveal-on [data-rise][data-reveal-item="in"] > .rise__i,
.reveal-on [data-rise][data-reveal-item="done"] > .rise__i{transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal-on [data-rise]{overflow:visible;padding-bottom:0;margin-bottom:.5em}
  .reveal-on [data-rise] > .rise__i{transform:none!important;transition:none}
}

/* Layout --------------------------------------------------------------- */
.container{width:min(100% - (var(--gutter) * 2),var(--container));margin-inline:auto}
.section{padding-block:var(--section-y)}
.section--lg{padding-block:var(--section-y-lg)}
/* Erste Sektion unter der massiven Kopfleiste (Seiten mit solid_header). Die
   140px stammten von den Seiten, auf denen die Kopfleiste ueber dem Inhalt
   schwebt - hier steht sie im Fluss, der Platz wurde also doppelt gezaehlt. */
.section--top{padding-top:72px}
.section--tint{background:var(--color-band)}
.section--dark{background:var(--color-ink);color:var(--color-text)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--color-heading)}
.prose{max-width:var(--container-prose)}
.prose h2{font-size:var(--fs-h3);margin-top:2em}
.prose h3{font-size:var(--fs-h4);margin-top:1.6em}
.prose ul{padding-left:1.3em}
.prose li{margin-bottom:.4em}
.eyebrow{display:block;font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);letter-spacing:var(--ls-kicker);
  text-transform:uppercase;color:var(--color-accent-on-dark);margin-bottom:14px}
.section-head{max-width:760px;margin-bottom:56px}
.section-head--center{margin-inline:auto;text-align:center}
/* Folgt auf den Textblock direkt ein Autegro-Widget, reicht ein knapper Abstand.
   Die 56px des normalen Sektionskopfs liessen den Bestand vom Text abreissen.
   :has() koennen alle aktuellen Browser; faellt es aus, bleibt der alte Abstand -
   nur Optik, nichts bricht. */
.section-head:has(+ .autegro-listing),
.section-head:has(+ .autegro-types),
.section-head:has(+ .autegro-slider){margin-bottom:28px}
.section-head + .autegro-slider{margin-top:0}
/* Kopf, Widget und "Alle Fahrzeuge" in einem Raster. Am Desktop sitzt der Knopf
   oben rechts neben der Ueberschrift, ab 900 px rutscht er unter das Widget -
   dort stand er sonst vor dem Bestand, den er oeffnen soll. */
.section-action-grid{display:grid;grid-template-columns:1fr auto;column-gap:24px;
  align-items:start;grid-template-areas:"head cta" "body body"}
.section-action-grid > .section-head{grid-area:head}
.section-action-grid > .section-action{grid-area:cta;margin:0;
  margin-top:calc(var(--fs-eyebrow) * 1.2 + 17px)}
.section-action-grid > :not(.section-head):not(.section-action){grid-area:body}
.section-head__text{max-width:760px}
.section-head__text > :last-child{margin-bottom:0}
@media (max-width:900px){
  .section-action-grid{grid-template-columns:1fr;grid-template-areas:"head" "body" "cta"}
  .section-action-grid > .section-action{margin-top:12px}
  /* Der Slider misst auf dem Telefon rund 394px; die 460px von oben liessen
     darunter ein totes Feld stehen, bevor der Knopf kam. Die reservierte Hoehe
     bleibt knapp darueber, damit beim Nachladen nichts springt. */
  .autegro-slider{min-height:400px}
  .section-action-grid > .section-action .btn{width:100%;justify-content:center}
}

/* Buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:var(--btn-padding);border-radius:var(--radius);font-size:var(--btn-fs);font-weight:var(--btn-fw);text-transform:var(--btn-transform);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .18s ease,color .18s ease,transform .18s ease;line-height:1}
.btn:hover{transform:translateY(-1px)}
.btn-accent,
.btn-accent:link,
.btn-accent:visited,
.btn-accent:hover,
.btn-accent:focus,
.btn-accent:active{color:var(--color-on-accent)}
.btn-accent{background:var(--color-accent)}
.btn-accent:hover{background:var(--color-accent-hover)}
/* Umrandeter Knopf: leer mit Haarlinie, unter dem Zeiger kippt er auf hell.
   Dieses Umkehren statt eines Farbwechsels stammt von autowelt-bodensee.de und
   ist auf dunklem Grund die deutlichere Reaktion. */
.btn-ghost{background:transparent;color:var(--color-heading);border-color:var(--color-border-strong)}
.btn-ghost:hover{background:var(--color-heading);color:var(--color-surface);border-color:var(--color-heading)}
/* Voll weiss: dieselbe Flaeche, die .btn-ghost beim Hovern annimmt. Als
   Hauptknopf dort, wo der Akzent neben einem Geisterknopf zu laut war. */
.btn-weiss{background:var(--color-heading);color:var(--color-surface);border-color:var(--color-heading)}
.btn-weiss:link,.btn-weiss:visited,.btn-weiss:hover,.btn-weiss:focus,.btn-weiss:active{color:var(--color-surface)}
.btn-weiss:hover{background:#fff;border-color:#fff}
.btn-quiet{background:var(--color-band);color:var(--color-accent-on-dark);border-color:var(--color-border)}
.btn-quiet:hover{background:var(--color-band-hover);color:var(--color-accent-hover);border-color:var(--color-border-strong)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px}
/* Ein einzelner Knopf mittig unter einer Kartenreihe - der Abstand nach oben
   haelt ihn von den Karten getrennt, damit er nicht als vierte Spalte liest. */
.btn-row--center{justify-content:center;margin-top:clamp(32px,4vw,48px)}
/* Abschnittskopf mit Aktion rechts daneben: Text links, Knopf oben rechts.
   Unter 860px rutscht der Knopf unter den Text. */
.kopf-mit-aktion{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:20px clamp(24px,4vw,64px);margin-bottom:clamp(32px,4vw,48px)}
.kopf-mit-aktion .section-head{margin-bottom:0;flex:1 1 420px}
.kopf-mit-aktion > .btn{flex:none;margin-top:6px}

/* Zeichenweiser Versatz auf den Beschriftungen ---------------------------- */
/* Idee: Osmo "Button with CSS Character Stagger". Die Ressource liegt hinter
   deren Mitgliedschaft, der Effekt ist hier nachgebaut statt uebernommen.
   Jedes Zeichen sitzt in einem eigenen Fensterchen, darin steht es zweimal
   untereinander. Beim Hovern faehrt der Stapel um genau eine Zeilenhoehe hoch,
   jedes Zeichen ein paar Millisekunden spaeter - main.js setzt --i je Zeichen.
   Ohne JS bleibt die Beschriftung schlicht stehen, es fehlt nur die Bewegung. */
.btn-chars{display:inline-flex;flex-wrap:wrap;align-items:baseline;
  justify-content:inherit;row-gap:.15em}
.btn-word{display:inline-flex;white-space:nowrap}
/* Die Hoehe traegt der Umlaut mit: bei 1em schnitte das Fensterchen die Punkte
   auf dem "Ü" von "FAHRZEUG VERKAUFEN" ab. */
.btn-char{display:inline-block;overflow:hidden;height:1.25em;line-height:1.25em}
.btn-char > span{display:block;position:relative;height:1.25em;line-height:1.25em;
  transition:transform .34s cubic-bezier(.77,0,.175,1);
  transition-delay:calc(var(--i,0) * 15ms)}
/* Die zweite Kopie ist ein Pseudoelement, kein Textknoten - sonst laese
   btn.textContent jeden Buchstaben doppelt. */
.btn-char > span::after{content:attr(data-z);position:absolute;left:0;top:100%;
  width:100%;height:100%;line-height:inherit}
.btn:hover .btn-char > span,
.btn:focus-visible .btn-char > span{transform:translateY(-100%)}
.btn-space{display:inline-block;width:.3em;overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .btn-char > span{transition:none}
  .btn:hover .btn-char > span,.btn:focus-visible .btn-char > span{transform:none}
}

/* Header ----------------------------------------------------------------- */
/* Schwebende Leiste nach dem Muster aus tcnrw.de / geigercars.de. Die Leiste behaelt
   ihre Hoehe; sichtbar ist ::before, und das wandelt sich mit --float (0 ganz oben,
   1 nach 80 px Scrollen; main.js schreibt den Wert): oben komplett transparent, unten
   eine eingerueckte, abgerundete Pille ueber einem Blur. Alle Werte sind calc auf
   --float, die Leiste folgt also dem Scrollen statt umzuspringen. Ohne JS bleibt
   --float 0 - dann ist es die schlichte Leiste, nichts ist kaputt. */
.site-header{--float:0;
  --edge:max(var(--gutter),(100% - var(--container)) / 2);
  --shrink:calc(var(--float) * 14px);
  position:sticky;top:0;z-index:100;isolation:isolate;padding-block:14px}
.site-header::before{content:"";position:absolute;z-index:-1;
  inset-block:calc(var(--shrink) / 2);
  inset-inline:calc(var(--float) * max(8px, var(--edge) - 20px));
  border-radius:calc(var(--float) * var(--radius-card));
  border:1px solid rgba(255,255,255,calc(var(--float) * .10));
  background:rgba(20,20,23,calc(var(--float) * .88));  /* --color-band, durchscheinend */
  -webkit-backdrop-filter:blur(calc(var(--float) * 12px));
  backdrop-filter:blur(calc(var(--float) * 12px));
  transition:inset .12s linear,border-radius .12s linear,background-color .12s linear}
/* Seiten mit dunklem Vollbild-Hero: die Leiste liegt darueber statt Platz zu belegen */
.site-header:not(.site-header--solid){position:fixed;left:0;right:0}

.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:padding .12s linear}
.logo img{width:78px;height:auto}
.site-nav{display:flex;align-items:center;gap:36px}
.site-nav>ul{display:flex;gap:40px;list-style:none;margin:0;padding:0}
/* Nur die oberste Ebene: unscoped (".site-nav ul", ".site-nav a") schlugen diese
   Regeln wegen hoeherer Spezifitaet die Regeln des Megamenues - dessen Listen
   wurden zu Flexzeilen und die Beschriftungen zu Grossbuchstaben, sodass sich
   Links und Markenlogos ueberlappten. */
.site-nav>ul>li>a:not(.btn){color:var(--color-heading);text-decoration:none;font-size:var(--fs-small);
  font-weight:var(--fw-medium);text-transform:uppercase;letter-spacing:.4px}
.site-nav>ul>li>a:not(.btn):hover{color:var(--color-accent-on-dark)}
.site-nav>ul>li>a:not(.btn)[aria-current=page]{text-decoration:underline;text-underline-offset:6px}
/* Solange die Pille ueber dem dunklen Hero noch nicht gezeichnet ist, steht die
   Navigation weiss - sonst waere sie auf dem Bild nicht zu lesen.
   Nur ab 1025px: darunter liegt die Navigation in der Schublade auf eigenem
   dunklen Grund. Unbegrenzt war diese Regel die spezifischste im ganzen
   Kopfbereich (fuenf Klassen) und zwang jede Regel des Untermenues, sie
   doppelt zu ueberschreiben. */
@media (min-width:1025px){
  .has-sub{margin-right:-16px}
  /* Beim letzten Punkt nicht - sonst klebt sein Pfeil am Rand der Leiste. */
  .site-nav>ul>li:last-child{margin-right:0;padding-right:20px}
  .site-header:not(.site-header--solid):not(.is-scrolled) .site-nav>ul>li>a:not(.btn),
  .site-header:not(.site-header--solid):not(.is-scrolled) .site-nav>ul>li>.sub-toggle{color:#fff}
  .site-header:not(.site-header--solid):not(.is-scrolled) .site-nav>ul>li>a:not(.btn):hover{color:#fff}
}
/* Burger aus drei Balken (Muster autohaus-galstyan.de). Vorher lagen hier zwei
   Symbole uebereinander, von denen eins per display ausgeblendet war - das
   sprang hart um. Die Balken fahren jetzt ineinander und drehen sich ins Kreuz.
   Rasterabstand 8px (2px Balken + 6px Luecke), deshalb translateY(8px). */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:6px;
  width:44px;height:44px;padding:9px;box-sizing:border-box;
  background:none;border:0;cursor:pointer;color:var(--color-heading)}
.nav-toggle__bar{display:block;width:100%;height:2px;background:currentColor;
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.nav-toggle[aria-expanded=true] .nav-toggle__bar:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded=true] .nav-toggle__bar:nth-child(2){opacity:0;transform:scaleX(.2)}
.nav-toggle[aria-expanded=true] .nav-toggle__bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* Beim Antippen zeichnet Safari sonst einen Rahmen um den Knopf */
.nav-toggle:focus:not(:focus-visible){outline:none}
/* Ueber einem dunklen Hero steht die noch unsichtbare Pille - dort weiss zeichnen */
.site-header:not(.site-header--solid):not(.is-scrolled) .nav-toggle{color:#fff}
.nav-meta{display:none}

/* Megamenue unter "Fahrzeuge" ------------------------------------------- */
/* Muster von automot-heidenau.de. Der Menuepunkt bleibt ein Link, aufgeklappt
   wird ueber den Knopf daneben - so ist die Uebersichtsseite mit einem Klick
   erreichbar und das Untermenue per Tastatur bedienbar. main.js oeffnet auch
   beim Hovern (Desktop) und haelt aria-expanded nach. */
.has-sub{position:relative;display:flex;align-items:center;gap:2px}
.sub-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:26px;padding:0;border:0;background:none;cursor:pointer;
  color:inherit}
.sub-chevron{width:12px;height:12px;transition:transform .2s ease}
.has-sub[data-open] .sub-chevron{transform:rotate(180deg)}
.sub-toggle:focus:not(:focus-visible){outline:none}
.sub-menu{position:absolute;top:calc(100% + 18px);left:50%;translate:-50% 0;z-index:120;
  display:none;grid-template-columns:minmax(220px,1fr) auto;gap:clamp(24px,3vw,48px);
  min-width:min(700px,92vw);padding:26px 28px;
  background:var(--color-band);border:1px solid var(--color-border)}
.has-sub[data-open] .sub-menu{display:grid}
/* Bruecke ueber die 18px Luecke zur Menuezeile: ohne sie verlaesst der Zeiger
   auf dem Weg nach unten das <li>, mouseleave feuert und das Fenster klappt zu,
   bevor man es erreicht. Das Pseudoelement gehoert zum Fenster und liegt damit
   weiter innerhalb des <li>. */
.sub-menu::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
/* Zweite Fassung ohne Markenspalte: eine Spalte, schmaler. Die breite Fassung
   oben ist auf Linkspalte plus Kachelfeld ausgelegt und waere hier leer. */
.sub-menu--schmal{grid-template-columns:1fr;min-width:min(340px,92vw);padding:18px 16px}
.sub-menu__links{list-style:none;margin:0;padding:0;display:grid;gap:4px;align-content:start}
.sub-menu__links a{display:grid;gap:3px;padding:10px 12px;text-decoration:none;
  text-transform:none;letter-spacing:0;transition:background-color .15s ease}
.sub-menu__links a:hover{background:var(--color-band-hover)}
/* Nur in der Schublade: dort steht der Eintrag als volle Zeile und bekommt wie
   die uebrigen Zeilen rechts ein Richtungszeichen. Im schwebenden Fenster waere
   es ueberfluessig, der Block ist dort als Ganzes klickbar. */
.sub-menu__pfeil{display:none}
.sub-menu__links strong{color:var(--color-heading);font-size:15px;font-weight:var(--fw-semibold)}
.sub-menu__links span{color:var(--color-muted);font-size:13px;font-weight:var(--fw-regular);line-height:1.45}
.sub-menu__label{display:block;font-size:11px;letter-spacing:var(--ls-kicker);
  text-transform:uppercase;color:var(--color-muted);margin-bottom:14px}
.sub-menu__brands{background:rgba(255,255,255,.07);
  margin:-26px -28px -26px 0;padding:26px 28px}
/* Kacheln nach dem Muster von automot-heidenau.de: Logo ueber der Beschriftung,
   beides zentriert, jede Marke auf eigener, noch etwas hellerer Flaeche. */
.mega-brands{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mega-brands a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:16px 12px;text-align:center;background:rgba(255,255,255,.07);
  text-decoration:none;text-transform:none;letter-spacing:0;
  transition:background-color .15s ease}
.mega-brands a:hover{background:rgba(255,255,255,.14)}
/* Einfarbig weiss statt in Hausfarben: brightness(0) faerbt alles Sichtbare
   schwarz und laesst die Transparenz stehen, invert(1) dreht es auf Weiss. */
.mega-brands img{height:24px;width:auto;flex:none;filter:brightness(0) invert(1)}
.mega-brands span{color:var(--color-text);font-size:14px;font-weight:var(--fw-medium);line-height:1.2}
.mega-brands a:hover span{color:var(--color-heading)}
/* Sammellink unter den Kacheln. Der Pfeil rueckt beim Hovern nach - dasselbe
   Signal wie bei den uebrigen Textlinks der Seite. */
.sub-menu__alle{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  color:var(--color-accent-on-dark);font-size:14px;font-weight:var(--fw-medium);
  text-decoration:none;text-transform:none;letter-spacing:0}
.sub-menu__alle svg{width:15px;height:15px;transition:transform .2s ease}
.sub-menu__alle:hover svg,.sub-menu__alle:focus-visible svg{transform:translateX(3px)}
.sub-menu__alle:hover,.sub-menu__alle:focus-visible{text-decoration:underline;text-underline-offset:4px}

/* Mobiles Menue: Vollflaechen-Schublade unter der Kopfleiste, uebernommen von
   degomotors.com. Vorher lag hier ein 70%-Panel von rechts - daneben blieb die
   Seite sichtbar, und die vier nackten Links standen im Nichts.
   --header-bottom schreibt main.js beim Oeffnen, damit die Schublade genau
   unter der Leiste beginnt, egal ob die Leiste schwebt oder mitscrollt. */
@media (max-width:1024px){
  .nav-toggle{display:flex}
  .site-nav{position:fixed;inset:var(--header-bottom,72px) 0 0 0;z-index:150;display:none;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:8px var(--gutter) 28px;background:var(--color-ink);
    overflow-y:auto;overscroll-behavior:contain}
  .site-nav[data-open]{display:flex}
  .site-nav>ul{flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0}
  .site-nav>ul>li{border-bottom:1px solid rgba(255,255,255,.14)}
  /* Der letzte Punkt nicht: darunter folgt der Kontaktblock mit eigener
     Oberkante - beide zusammen ergaeben zwei Linien dicht untereinander. */
  .site-nav>ul>li:last-child{border-bottom:0}
  /* Nur die Punkte der obersten Ebene. Vorher stand hier ".site-nav ul a", was
     auch alles im Untermenue traf; die Kontaktzeilen und Social-Buttons liegen
     ohnehin ausserhalb der Liste. */
  .site-nav>ul>li>a:not(.btn){
    display:flex;align-items:center;width:100%;padding:13px 2px;
    font-size:17px;font-weight:var(--fw-semibold);color:#fff;text-transform:none;letter-spacing:0}
  .site-nav>ul>li>a:not(.btn)[aria-current=page]{color:var(--color-accent-on-dark);text-decoration:none}
  .nav-cta{margin-top:18px;width:100%;justify-content:center;padding:14px}

  /* In der Schublade klappt das Untermenue im Fluss auf - ein schwebendes
     Fenster haette dort keinen Platz. Der Knopf rutscht an den rechten Rand,
     damit Beschriftung und Aufklapper nicht um dieselbe Flaeche streiten. */
  .site-nav>ul>li.has-sub{display:grid;grid-template-columns:1fr auto;align-items:center}
  .has-sub > .sub-toggle{width:44px;height:44px;color:#fff}
  .has-sub .sub-chevron{width:16px;height:16px}
  .sub-menu{position:static;translate:none;min-width:0;display:none;
    grid-column:1 / -1;grid-template-columns:1fr;gap:18px;
    padding:4px 0 18px;background:none;border:0}
  .has-sub[data-open] .sub-menu{display:grid}
  /* Farbe ausdruecklich setzen: ohne die alte Sammelregel faellt der Link sonst
     auf die globale Linkfarbe (Akzentblau) zurueck. Sichtbar waere das heute
     nicht - Beschriftung und Beschreibung tragen eigene Farben -, aber der
     naechste Textknoten darin haette unbemerkt die falsche. */
  .sub-menu__links a,.mega-brands a{color:#fff}
  .sub-menu__links a{display:grid;grid-template-columns:1fr auto;align-items:center;
    column-gap:14px;row-gap:3px;padding:10px 2px}
  .sub-menu__links strong,.sub-menu__links span{grid-column:1}
  .sub-menu__pfeil{display:block;grid-column:2;grid-row:1 / span 2;
    width:18px;height:18px;color:var(--color-accent-on-dark)}
  .sub-menu__brands{background:none;margin:0;padding:16px 0 0;
    border-top:1px solid rgba(255,255,255,.14)}
  .mega-brands a{padding:14px 10px}
  .mega-brands span{color:#fff}
  /* Gleiche Groesse und Staerke wie "Alle Fahrzeuge" darueber, weiss statt
     Akzentblau - in der Schublade steht der Link in einer Reihe mit den
     Menuepunkten. Die Polsterung haelt die Tippflaeche bei 44px (WCAG 2.5.8);
     ohne sie waere der Link nach dem Umbau nur noch 25px hoch gewesen. */
  .sub-menu__alle{font-size:15px;font-weight:var(--fw-semibold);color:#fff;
    padding:12px 2px;min-height:44px;box-sizing:border-box}

  /* Die Schublade muss ohne Scrollen auf ein Telefon passen - sonst stehen die
     ersten Menuepunkte ueber dem sichtbaren Bereich, sobald jemand nach unten
     zum Kontaktblock wischt. Deshalb sind die Abstaende hier knapp gehalten. */
  .nav-meta{display:grid;gap:16px;margin-top:20px;padding-top:20px;
    border-top:1px solid rgba(255,255,255,.14);font-size:var(--fs-small);color:rgba(255,255,255,.72)}
  .nav-meta p{margin:0}
  .nav-meta__label{font-size:12px;font-weight:var(--fw-semibold);
    text-transform:uppercase;letter-spacing:.2em;color:#fff}
  .nav-meta__ort{display:grid;gap:6px}
  .nav-meta__address,.nav-meta__hours{line-height:1.55}
  .nav-meta__wege{display:grid;gap:2px;margin-top:10px}
  /* Weiss ueber alle Linkzustaende festnageln. Ohne :link/:visited hat Safari die
     Zeilen in der Akzentfarbe bzw. im Besucht-Ton gezeichnet - die Telefonnummer
     war auf dem schwarzen Grund praktisch weg. Gleiches Muster wie bei .btn-accent. */
  .nav-meta__link,.nav-meta__link:link,.nav-meta__link:visited,
  .nav-meta__link:hover,.nav-meta__link:focus,.nav-meta__link:active{
    display:flex;align-items:center;gap:10px;min-height:38px;color:#fff;text-decoration:none}
  .nav-meta__link span{color:inherit}
  .nav-meta__link:hover,.nav-meta__link:focus-visible{text-decoration:underline;text-underline-offset:3px}
  /* .08 Weiss auf #020204 war praktisch unsichtbar - die Kachel las sich als Schmutz
     statt als Flaeche. Etwas kraeftiger und das Zeichen groesser. */
  .nav-meta__icon{flex:none;width:18px;height:18px;padding:8px;box-sizing:content-box;
    color:var(--color-accent-on-dark);background:rgba(255,255,255,.10)}
  .nav-meta__social{display:flex;gap:12px}
  .nav-meta__social a,.nav-meta__social a:link,.nav-meta__social a:visited,
  .nav-meta__social a:hover,.nav-meta__social a:focus,.nav-meta__social a:active{
    display:grid;place-items:center;width:42px;height:42px;
    border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-pill);color:#fff;
    transition:background-color .15s ease,border-color .15s ease}
  .nav-meta__social a:hover,.nav-meta__social a:focus-visible{background:rgba(255,255,255,.12);border-color:#fff}
  .nav-meta__social svg{width:20px;height:20px;fill:currentColor}
}
/* Solange das Menue offen ist, traegt die Leiste denselben dunklen Grund wie die
   Schublade und die schwebende Pille verschwindet - sonst schiene oben der Hero
   durch und der Streifen saehe wie ein Fehler aus. main.js setzt die Klasse. */
.site-header.nav-is-open{background:var(--color-ink)}
.site-header.nav-is-open::before{opacity:0}
.site-header.nav-is-open .nav-toggle{color:var(--color-heading)}
body.nav-locked{overflow:hidden}

/* Hero ----------------------------------------------------------------- */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding-block:180px 90px}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,2,4,.72),rgba(2,2,4,.55) 45%,rgba(2,2,4,.8));z-index:1}
/* Namenskonflikt: .hero-media heisst zweierlei - hier der absolut gesetzte
   Bildcontainer IM Startseiten-Hero, weiter unten der Foto-Hero-ABSCHNITT auf
   /ankauf und /kontakt. Unscoped traf dieses overflow:hidden auch den Abschnitt
   und sperrte dort position:sticky ein, sodass die linke Spalte mitlief. */
.hero > .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero > .hero-media img{width:100%;height:100%;object-fit:cover}
/* Das Video liegt ueber dem Standbild und blendet sich ein, sobald es laeuft -
   so ist zwischen Poster und erstem Frame kein Sprung zu sehen. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s ease}
.hero-video[data-playing]{opacity:1}
.hero .container{position:relative;z-index:2}
.hero .eyebrow{color:#fff;opacity:.85;letter-spacing:var(--ls-eyebrow);text-transform:none;font-weight:var(--fw-light);font-size:var(--fs-eyebrow)}
.hero h1{color:#fff;font-size:var(--fs-display);font-weight:var(--fw-bold);max-width:16ch;margin-inline:auto}
.hero p{color:rgba(255,255,255,.88);max-width:62ch;margin-inline:auto;font-size:var(--fs-lead)}
.hero--compact{min-height:auto;padding-block:200px 90px}
.hero--compact h1{font-size:var(--fs-h1)}

/* Autegro-Slots -------------------------------------------------------- */
/* min-height haelt den Platz frei, bevor das Widget nachlaedt - sonst springt
   der Hero beim Laden. 96px waren aber zu grosszuegig: das Suchfeld misst auf
   jeder Breite 50px, darunter standen 46px totes Feld vor dem Markenband. */
.autegro-search{position:relative;z-index:3;margin-top:40px;min-height:56px;text-align:left}
.autegro-slider{min-height:460px;margin-top:var(--section-y)}
.autegro-types{min-height:240px}
/* Ankaufsformular im Hero: Text links, Widget rechts. Das Widget bringt seine eigene
   Karte mit, deshalb hier nur die Mindesthoehe gegen Springen beim Nachladen. */
.autegro-inquiry{min-height:620px}
/* Hero mit Formular: der Text links bleibt beim Scrollen stehen, waehrend das
   vierstufige Autegro-Formular rechts durchlaeuft. Der Abstand nach oben haelt ihn
   unter der schwebenden Kopfleiste (rund 115 px). Sticky haengt daran, dass kein
   Vorfahre clippt - html/body tragen deshalb overflow-x:clip statt hidden.
   Gestapelt (unter 900 px) waere das Festhalten sinnlos, dort wieder normal. */
/* Doppelte Klasse, weil ".split{align-items:center}" weiter unten steht und bei
   gleicher Spezifitaet gewinnt. Mittig ausgerichtet stand die Spalte schon in
   der Mitte ihrer Rasterzelle und hielt deshalb nur die halbe Strecke. */
.split.split--form{align-items:start}
/* Formularkarte im Foto-Hero (Kontakt). Das Autegro-Ankaufformular bringt auf
   /ankauf seine eigene Karte mit - unser Kontaktformular nicht, deshalb hier
   eine eigene Flaeche mit Haarlinie, damit es nicht direkt auf dem Foto steht. */
.hero-form{background:var(--color-band);border:1px solid var(--color-border);
  padding:clamp(22px,2.4vw,32px)}
.hero-form .form{gap:16px}
@media (max-width:900px){.hero-form{margin-top:8px}}
.split--form .split-body{position:sticky;top:130px}
@media (max-width:900px){.split--form .split-body{position:static;top:auto}}
@media (max-width:900px){.autegro-inquiry{min-height:560px}}
.autegro-listing{min-height:640px}
.autegro-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:48px 24px;background:var(--color-band);border:1px solid var(--color-border);
  color:var(--color-text);text-align:center}

/* Marken-Laufband (Muster aus tcnrw.de) ---------------------------------- */
/* Zwei identische Listen im Track; die Animation laeuft bis translateX(-50%),
   also bis exakt zum Anfang der Kopie - dadurch ist der Umlauf nahtlos.
   Die Maske blendet beide Raender aus, statt die Logos hart abzuschneiden. */
.brand-marquee{overflow:hidden;padding-block:48px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brand-marquee__track{display:flex;width:max-content;animation:brand-marquee 45s linear infinite}
.brand-marquee:hover .brand-marquee__track,
.brand-marquee:focus-within .brand-marquee__track{animation-play-state:paused}
.brand-marquee__list{display:flex;align-items:center;flex:none;margin:0;padding:0;list-style:none}
.brand-marquee a{position:relative;display:grid;place-items:center;height:64px;
  padding:0 clamp(1.25rem,2.6vw,2.4rem);text-decoration:none}
.brand-marquee img{grid-area:1/1;height:42px;width:auto;max-width:none;object-fit:contain;
  /* Von Anfang an farbig (Kundenwunsch). Der Graustufenfilter ist raus; beim
     Hovern hebt sich das Logo nur noch an und wird voll deckend. */
  opacity:.82;transition:opacity .25s ease,transform .25s ease}
/* Markenname erscheint erst beim Hovern - im laufenden Band waere er sonst nur Unruhe */
.brand-marquee span{position:absolute;left:50%;bottom:-2px;transform:translate(-50%,6px);
  white-space:nowrap;font-size:12px;font-weight:var(--fw-semibold);color:var(--color-heading);
  opacity:0;transition:opacity .25s ease,transform .25s ease}
.brand-marquee a:hover img,.brand-marquee a:focus-visible img{opacity:1;transform:translateY(-11px)}
.brand-marquee a:hover span,.brand-marquee a:focus-visible span{opacity:1;transform:translate(-50%,0)}
@keyframes brand-marquee{to{transform:translateX(-50%)}}
/* Im Hero sitzt das Band zwischen Suchleiste und Knopfreihe - dort braucht es
   weniger Luft als in einem eigenen Abschnitt, und die Marken duerfen kleiner
   stehen, damit die Knoepfe darunter nicht aus dem Bild rutschen. */
.hero .brand-marquee{padding-block:8px 4px}
.hero .brand-marquee a{height:64px;padding:0 clamp(1rem,2.2vw,2rem)}
.hero .brand-marquee img{height:34px}
.hero .brand-marquee span{color:#fff}
/* Ohne Bewegung: kein Laufband, sondern ein normal scrollbarer Streifen -
   die Kopie faellt weg, sonst stuenden alle Logos doppelt da. */
@media (prefers-reduced-motion:reduce){
  .brand-marquee{overflow-x:auto}
  .brand-marquee__track{animation:none}
  .brand-marquee__list[aria-hidden]{display:none}
}

/* Split (Bild/Text) ---------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split--reverse .split-media{order:2}
/* Kontaktseite: "Route planen" ist ein eigenes Rasterkind, damit es mobil hinter
   die Karte rutschen kann - der Knopf gehoert dorthin, wo man die Adresse gerade
   gesehen hat. Am Schreibtisch holen ihn die Rasterbereiche zurueck unter die
   Kontaktdaten, dort steht die Karte daneben. */
.split--contact{grid-template-areas:"info karte" "aktion karte";
  grid-template-rows:auto 1fr;row-gap:0;align-items:start}
.split--contact > .split-info{grid-area:info}
.split--contact > .map-embed{grid-area:karte;align-self:stretch;min-height:300px}
.split--contact > .map-embed iframe{min-height:0}
.split--contact > .split-aktion{grid-area:aktion;margin-top:28px}
.split-media img{border-radius:var(--radius-card);width:100%;object-fit:cover}
.split-body h2{margin-top:0}

/* Karten --------------------------------------------------------------- */
.grid{display:grid;gap:28px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
/* Karte als Spalte, damit der Button per margin-top:auto unten sitzt. Die Karten im
   Grid sind gleich hoch, also stehen die Buttons dann auch auf einer Linie -
   unabhaengig davon, wie lang der Text darueber ist. */
/* Karten unter einem Split: am Desktop viel Luft, mobil steht der Text direkt
   darueber und 72 px wirken wie ein Bruch. */
.grid--after-split{margin-top:72px}
@media (max-width:900px){.grid--after-split{margin-top:32px}}
/* Nur im Stapel: nebeneinander bleibt linksbuendig richtig, untereinander
   steht die Spalte unter einer quadratischen Flaeche und soll deren Achse
   aufnehmen. Der Knopf zieht nicht mehr ueber die ganze Breite. */
@media (max-width:900px){
  .split--mitte-mobil{text-align:center}
  .split--mitte-mobil .split-media{max-width:320px;margin-inline:auto;width:100%}
  .split--mitte-mobil .btn-row{justify-content:center}
  .split--mitte-mobil .btn-row .btn{flex:0 1 auto;width:auto}
}
/* Auf Dunkel traegt kein Schatten - die Karte setzt sich ueber ihre Flaeche und
   die Haarlinie ab. Unter dem Zeiger hebt sie sich an und die Linie nimmt den
   Akzent auf; das Anheben bleibt, der Schatten faellt weg. */
.card{display:flex;flex-direction:column;align-items:flex-start;
  background:var(--color-band);border:1px solid var(--color-border);
  padding:32px;transition:transform .2s ease,background-color .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-4px);background:var(--color-band-hover);
  border-color:var(--color-accent-on-dark)}
.card > p:last-of-type{margin-bottom:24px}
.card h3{font-size:var(--fs-h4);margin-bottom:.6em}
.card .card-link{margin-top:auto;text-decoration:none}
.step{counter-increment:step}
/* Schrittkarten tragen ein Ionicon statt einer Ziffer - die Reihenfolge steht
   ohnehin in der Spaltenfolge, das Symbol sagt zusaetzlich, worum es geht.
   Beim Hovern der Karte kippt der Kreis auf die Akzentfarbe. */
/* Nicht mehr an .step gebunden: dieselbe Kachel traegt auch die drei Karten auf
   der Startseite. Die Klasse ist ohnehin eindeutig, der Vorfahre brachte nichts. */
.step-icon{display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;
  background:rgba(77,163,240,.14);color:var(--color-accent-on-dark);margin-bottom:20px;
  transition:background-color .2s ease,color .2s ease}
.step-icon svg{width:26px;height:26px}
/* Ionicons mischt in den Outline-Symbolen Pfade ohne fill-Attribut hinein (im
   Wagen-Symbol die Karosseriefläche). SVG faellt dort auf Schwarz zurueck, und
   auf der dunklen Kachel war das ein schwarzes Loch im blauen Umriss. Was kein
   eigenes fill mitbringt, nimmt die Farbe des Symbols - "fill:none" bleibt
   unangetastet, weil das ein gesetztes Attribut ist. */
.step-icon svg *:not([fill]){fill:currentColor}
.card:hover .step-icon{background:var(--color-accent);color:var(--color-on-accent)}

/* Markenkachel ("Weitere Marken" auf den Markenseiten): Karte als Ganzes ein
   Link, das Logo obenauf. Die Logos sind farbig und unterschiedlich hell -
   eine feste Hoehe haelt die Reihe ruhig, die Breite kommt aus dem Markup. */
.marke-kachel{text-decoration:none}
/* Einfarbig weiss wie im Megamenue - siehe dort zur Wirkung der Filterkette. */
.marke-kachel img{height:44px;width:auto;margin-bottom:18px;opacity:.85;
  filter:brightness(0) invert(1);transition:opacity .2s ease}
.marke-kachel:hover img{opacity:1}
/* Ausnahme Porsche: Das Wappen ist eine gefuellte Form, deren Binnenzeichnung
   allein ueber Farbe funktioniert - flach weiss bliebe davon nur ein
   Schildumriss, den niemand als Porsche erkennt. Es laeuft deshalb
   schwarzweiss und aufgehellt, damit es auf der dunklen Flaeche traegt. */
.mega-brands img[src*="marke-porsche"],
.marke-kachel img[src*="marke-porsche"]{filter:grayscale(1) brightness(1.9) contrast(1.25)}
.marke-kachel h3{margin-bottom:.35em}
.marke-kachel p{color:var(--color-muted);margin:0}

/* FAQ ------------------------------------------------------------------ */
/* Zweispaltig nach dem Muster von autohaus-galstyan.de: links Einstieg und ein
   Weg zur Frage, rechts die Liste. Die Nummern kommen aus einem CSS-Zaehler -
   so bleibt das Markup frei von Ziffern und die Reihenfolge stimmt immer. */
.faq-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);
  gap:clamp(32px,5vw,80px);align-items:start}
/* Bei zehn Fragen steht die linke Spalte sonst zur Haelfte leer. Sie laeuft
   deshalb mit, wie beim Ankauf-Formular. Der Abstand nach oben haelt sie unter
   der schwebenden Kopfleiste. Gestapelt (unter 900px) waere das sinnlos. */
.faq-intro{position:sticky;top:130px}
.faq-intro h2{margin-top:0}
.faq-intro > p{color:var(--color-text);max-width:34ch}
.faq-intro .btn{margin-top:10px}
.btn-arrow{width:17px;height:17px;flex:none;transition:transform .18s ease}
.btn:hover .btn-arrow{transform:translateX(3px)}

.faq{counter-reset:faq}
.faq details{counter-increment:faq;border-bottom:1px solid var(--color-border)}
.faq details:first-child{border-top:1px solid var(--color-border)}
.faq summary{cursor:pointer;list-style:none;display:grid;
  grid-template-columns:44px minmax(0,1fr) 34px;align-items:center;gap:16px;
  padding:26px 0;font-weight:var(--fw-medium);color:var(--color-heading);font-size:17px}
.faq summary::-webkit-details-marker{display:none}
/* 01, 02, ... statt 1, 2 - zweistellig steht die Spalte ruhig */
.faq summary::before{content:counter(faq,decimal-leading-zero);
  font-size:12px;letter-spacing:.12em;color:var(--color-muted);font-variant-numeric:tabular-nums}
/* Plus aus zwei Verlaufsstrichen statt eines Schriftzeichens: die Striche sind
   exakt gleich lang, und beim Aufklappen faehrt der senkrechte auf 0 zusammen. */
.faq summary::after{content:"";width:34px;height:34px;
  border:1px solid var(--color-border-strong);
  background:
    linear-gradient(var(--color-heading),var(--color-heading)) center/12px 1px no-repeat,
    linear-gradient(var(--color-heading),var(--color-heading)) center/1px 12px no-repeat;
  transition:background-size .2s ease,border-color .2s ease}
.faq summary:hover::after{border-color:var(--color-accent-on-dark)}
.faq details[open] summary::after{background-size:12px 1px,1px 0}
/* Die Antwort beginnt unter der Frage, nicht unter der Ziffer */
.faq details p{margin:0;padding:0 50px 26px 60px;color:var(--color-text)}
@media (max-width:900px){
  .faq-layout{grid-template-columns:1fr}
  .faq-intro{position:static;top:auto}
  .faq summary{grid-template-columns:34px minmax(0,1fr) 30px;gap:12px;font-size:16px}
  .faq summary::after{width:30px;height:30px}
  .faq details p{padding:0 0 24px 46px}
}

/* Google-Bewertungen (Layout nach automot-heidenau.de) --------------------- */
/* Firmenkarte links, Karten-Slider rechts. Die Karten sind statisch im HTML -
   kein Fremd-Script, kein Cookie, kein Layout-Shift beim Nachladen. */
.reviews-layout{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);
  gap:clamp(24px,3vw,40px);align-items:center}
.reviews-summary{display:flex;gap:16px;align-items:flex-start}
.reviews-summary__logo{width:64px;height:64px;flex:none}
.reviews-summary__name{font-weight:var(--fw-semibold);color:var(--color-heading);font-size:17px;line-height:1.35;margin:0}
.reviews__stars{display:inline-flex;gap:2px;color:#F6BB06;margin-top:8px}
.reviews__stars svg{width:22px;height:22px;fill:currentColor}
.reviews-summary__count{margin:6px 0 0;font-size:var(--fs-small)}
.reviews-summary__count a{color:var(--color-text);text-decoration:none}
.reviews-summary__count a:hover{text-decoration:underline}
.reviews-summary__write{display:inline-block;margin-top:14px;padding:10px 20px;
  border:1px solid var(--color-border-strong);color:var(--color-heading);
  font-weight:var(--fw-semibold);font-size:var(--fs-small);text-decoration:none;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.reviews-summary__write:hover{background:var(--color-heading);color:var(--color-surface);border-color:var(--color-heading)}

/* Vertrauensangabe im Ankauf-Hero: helle Kachel mit gruenem Siegel, Titelzeile
   und darunter Note, Sterne und Anzahl. Die Sterne kommen aus .reviews__stars,
   damit sie hier und in der Bewertungssektion gleich aussehen. */
.trust-badge{display:inline-flex;align-items:center;gap:13px;align-self:flex-start;
  padding:13px 18px;background:var(--color-band);border:1px solid var(--color-border);
  text-decoration:none;transition:background-color .15s ease,border-color .15s ease}
.trust-badge:hover,.trust-badge:focus-visible{background:var(--color-band-hover);border-color:var(--color-border-strong)}
.trust-badge__shield{flex:none;width:34px;height:34px;color:#25BE8B}
.trust-badge__title{display:block;font-size:18px;font-weight:var(--fw-medium);
  line-height:1.25;color:var(--color-heading)}
.trust-badge__meta{display:flex;align-items:center;gap:8px;margin-top:3px;
  font-size:14px;color:var(--color-text)}
.trust-badge__score{font-weight:var(--fw-medium);color:var(--color-heading)}
.trust-badge .reviews__stars{margin-top:0;gap:1px}
.trust-badge .reviews__stars svg{width:15px;height:15px}
/* Trennstrich wie in der Vorlage - als Rahmen, damit er beim Umbruch verschwindet */
.trust-badge__count{padding-left:9px;border-left:1px solid var(--color-border-strong)}
@media (max-width:560px){
  .trust-badge{gap:11px;padding:12px 15px}
  .trust-badge__shield{width:30px;height:30px}
  .trust-badge__title{font-size:16px}
  .trust-badge__meta{flex-wrap:wrap;gap:4px 8px;font-size:13px}
  .trust-badge__count{padding-left:0;border-left:0}
}

.reviews{position:relative;min-width:0}
.reviews__track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-block:4px}
.reviews__track::-webkit-scrollbar{display:none}
.review-card{scroll-snap-align:start;flex:0 0 calc((100% - 40px) / 3);
  background:var(--color-band);border:1px solid var(--color-border);
  padding:22px;display:flex;flex-direction:column}
/* Auf dem abgesetzten Band traegt die Karte dieselbe Farbe wie der Grund -
   dort eine Stufe heller, damit sie sich weiter abhebt. */
.section--tint .review-card{background:var(--color-band-hover)}
.review-card__head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.review-card__avatar{width:44px;height:44px;flex:none;display:grid;place-items:center;
  background:var(--av,#455a64);color:#fff;
  font-size:18px;font-weight:var(--fw-medium)}
.review-card__who{min-width:0}
.review-card__name{font-weight:var(--fw-semibold);color:var(--color-heading);line-height:1.3;
  margin:0;overflow-wrap:anywhere}
.review-card__meta{font-size:13px;color:var(--color-muted);margin:0}
.review-card__source{margin-left:auto;align-self:flex-start;line-height:0}
.review-card__source svg{width:20px;height:20px}
.review-card__stars{display:inline-flex;gap:2px;color:#F6BB06;margin-bottom:10px}
.review-card__stars svg{width:18px;height:18px;fill:currentColor}
.review-card__text{color:var(--color-text);line-height:1.55;margin:0;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.review-card__text.is-expanded{-webkit-line-clamp:unset;overflow:visible}
.review-card__more{align-self:flex-start;margin-top:8px;padding:6px 0;border:0;background:none;
  color:var(--color-muted);font:inherit;font-size:var(--fs-small);cursor:pointer}
.review-card__more:hover{color:var(--color-accent-on-dark);text-decoration:underline}
/* Die Pfeile stehen unter den Karten, rechts. Schwebend an den Seiten lagen
   sie ueber dem Bewertungstext und auf schmalen Schirmen mitten darin. */
.reviews{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  column-gap:12px;row-gap:20px}
.reviews__track{grid-area:1 / 1 / 2 / 4}
.reviews__nav{grid-row:2;display:inline-flex;
  width:40px;height:40px;border:1px solid var(--color-border-strong);
  background:var(--color-band);color:var(--color-heading);cursor:pointer;
  align-items:center;justify-content:center;transition:opacity .15s ease,background-color .15s ease}
.reviews__nav svg{width:18px;height:18px}
.reviews__nav--prev{grid-column:2}
.reviews__nav--next{grid-column:3}
.reviews__nav:hover{background:var(--color-band-hover)}
/* Nicht ausblenden, sondern abblenden - sonst springt die Reihe, sobald ein
   Pfeil am Anfang oder Ende abgeschaltet ist. */
.reviews__nav[disabled]{opacity:.35;pointer-events:none}
@media (max-width:1100px){.review-card{flex-basis:calc((100% - 20px) / 2)}}
@media (max-width:900px){
  .reviews-layout{grid-template-columns:1fr}
  .review-card{flex-basis:min(85%,320px)}
}
@media (max-width:640px){
  /* eine Karte fuellt die Breite - die angeschnittene zweite brachte nichts
     ausser abgeschnittenem Text. Die Pfeile stehen deshalb unter den Karten:
     auf dieser Breite lagen sie sonst mitten auf dem Bewertungstext.
     Platziert wird per Raster, die Reihenfolge im Markup bleibt wie sie ist. */
  .review-card{flex-basis:100%}
}

/* CTA-Karte ------------------------------------------------------------ */
/* Das Bild fuellt die ganze Karte; darueber ein Verlauf, damit Ueberschrift und
   Buttons auf jedem Bildausschnitt lesbar bleiben. Das alt-Attribut ist leer:
   als reines Hintergrundbild traegt es keine eigene Information. */
/* Sektion mit Vollbreiten-Bild: das Bild fuellt das ganze Band, der Verlauf liegt
   darueber, damit der Textkontrast nicht vom Bildausschnitt abhaengt. */
.section--media{position:relative;isolation:isolate;
  background:var(--color-ink);color:var(--color-text);--parallax-speed:.6}
/* Beschnitten wird nur, wo die Parallax einen Ueberstand erzeugt. Pauschales
   overflow auf .section--media sperrte position:sticky im Ankauf-Hero ein -
   die linke Spalte lief dort mit, statt stehen zu bleiben. Der Foto-Hero hat
   keine Parallax und deshalb auch nichts zu beschneiden. */
.section--media[data-parallax]{overflow:clip}
.section-media{position:absolute;inset:0;z-index:-2}
/* --media-pos je Sektion setzen: welcher Ausschnitt sichtbar bleibt, haengt am Motiv */
.section-media img{width:100%;height:100%;object-fit:cover;object-position:var(--media-pos,center 42%)}
.section--media::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(2,2,4,.92) 0%,rgba(2,2,4,.8) 42%,rgba(2,2,4,.35) 100%)}
/* Die Breite begrenzen die Textzeilen selbst, nicht der Block - sonst bricht die
   Knopfreihe um, sobald die Beschriftungen laenger werden. */
@media (max-width:900px){
  .section-media__body{text-align:center}
  .section-media__body > h2,.section-media__body > p{margin-inline:auto}
  .section-media__body .btn-row{justify-content:center}
}
.section-media__body > h2{max-width:18ch}
.section-media__body > p{max-width:46ch}
.section--media h2{color:#fff;margin-top:0}

/* Sektion mit Hintergrundbild + Parallax ---------------------------------- */
/* Mechanik uebernommen von autowelt-bodensee.de. Das Bild laeuft langsamer als
   die Seite (--parallax-speed, 1 = laeuft mit, 0 = steht fest). Den Ueberstand,
   den es dafuer braucht, setzt main.js als --parallax-overflow; overflow:clip
   haelt ihn in der Sektion. Ohne JS bleibt --parallax-y leer und das Bild steht
   einfach still - nichts ist kaputt. */
.section--bild{position:relative;isolation:isolate;overflow:clip;
  background:var(--color-ink);--parallax-speed:.55}
/* Versatz und Verschiebung gelten fuer jede Bildebene, egal ob sie als eigenes
   <picture> im Band liegt (Startseite) oder als .section-media (Termin-Band).
   Zwei Klassen tief selektiert, damit spaetere Regeln mit gleicher Spezifitaet
   den Versatz nicht wieder ueberschreiben. */
[data-parallax] > [data-parallax-layer]{
  top:calc(var(--parallax-overflow,0px) * -.5);
  bottom:calc(var(--parallax-overflow,0px) * -.5);
  transform:translate3d(0,var(--parallax-y,0px),0);will-change:transform}
.section--bild > .section-bg{position:absolute;inset-inline:0;z-index:-2;display:block}
.section--bild > .section-bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
/* Der Schleier haelt den Textkontrast unabhaengig vom Bildausschnitt. Links
   dichter, weil dort die Ueberschrift steht. */
.section--bild::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,11,13,.88) 0%,rgba(11,11,13,.74) 45%,rgba(11,11,13,.9) 100%)}
/* Auf schmalen Viewports aus: der Ueberstand streckt die Bildbox in der Hoehe,
   die Datei waehlt der Browser aber nach Breite - ein Querformat in einer hohen
   schmalen Box wird dadurch sichtbar unscharf hochskaliert. */
@media (max-width:900px){
  [data-parallax]{--parallax-speed:1}
  .section--bild > .section-bg img{object-position:center 50%}
}

/* Foto-Hero (Ankauf, Kontakt): dieselbe Mechanik wie das Termin-Band, nur mit mehr
   Luft oben, weil die Kopfleiste darueberliegt, und mit heller Schrift.
   Der Akzent wird aufgehellt: #0066CC kaeme auf dem dunklen Grund nur auf 2,9:1.
   Das Autegro-Formular bringt seine eigene weisse Karte mit und braucht nichts. */
.hero-media{padding-block:clamp(150px,16vw,205px) clamp(72px,9vw,110px)}
.hero-media h1{color:#fff;margin-top:0}
/* Der waagerechte Verlauf des Abschnitts deckt die Bildmitte ab, oben bleibt
   es hell - genau dort steht die Brotkrume. Auf /karriere kam sie damit auf
   3,7:1, noetig sind 4,5:1. Deshalb zusaetzlich ein Verlauf von oben. */
.hero-media::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(2,2,4,.6),rgba(2,2,4,0) 36%)}
/* Auf einem Foto traegt Akzentblau nicht: ueber den hellen Stellen der neuen
   Hero-Bilder kam die Vorzeile auf 3,2:1 und die Brotkrume auf 2,9:1 - noetig
   sind 4,5:1. Beides deshalb weiss, wie im Hero der Startseite. Nachgemessen
   wird gegen die tatsaechlichen Bildpixel, nicht gegen die Tokens. */
.hero-media .eyebrow{color:#fff}
.hero-media .lead,.hero-media p{color:#D9DADF}
.hero-media .crumbs,.hero-media .crumbs a{color:rgba(255,255,255,.92)}
.hero-media .crumbs a:hover{color:#fff}

/* Karte ---------------------------------------------------------------- */
/* Fassade statt Auto-Embed: vor dem Klick liegt hier nur eigenes Markup, es geht
   also keine Anfrage an Google raus. Nach dem Klick ersetzt das iframe die Kachel
   an derselben Stelle, damit die Seite nicht springt. */
.map-embed{position:relative;min-height:420px;display:flex;
  border:1px solid var(--color-border);overflow:hidden;
  background:var(--color-band)}
/* Auf getoenten Baendern haette die Fassade sonst dieselbe Farbe wie der Grund */
.section--tint .map-embed{background:var(--color-band-hover)}
.map-embed__facade{display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:14px;padding:clamp(24px,4vw,40px);width:100%}
.map-embed__pin{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  background:rgba(77,163,240,.14);color:var(--color-accent-on-dark)}
.map-embed__pin svg{width:26px;height:26px}
.map-embed__address{margin:0;font-size:17px;font-weight:var(--fw-medium);color:var(--color-heading)}
.map-embed__note{margin:0;font-size:var(--fs-small);max-width:44ch}
.map-embed iframe{display:block;width:100%;height:100%;min-height:420px;border:0}

/* Formulare ------------------------------------------------------------ */
.form{display:grid;gap:20px}
/* Formular in eigener Sektion: mittig und nicht ueber die volle Bandbreite,
   sonst werden die Felder unangenehm lang. Die Beschriftungen bleiben linksbuendig -
   zentrierte Labels ueber Feldern sind schlechter zu scannen. */
.form--wide{max-width:760px;margin-inline:auto}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:grid;gap:8px}
.field label{font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--color-heading)}
.field .req{color:var(--color-accent-on-dark)}
/* Feldrahmen aus --color-border-strong: die Haarlinie (#2A2C31) kaeme auf der
   dunklen Flaeche nur auf 1,3:1, die Felder waeren kaum auszumachen. #5E6168
   sind 3,17:1 und erfuellen WCAG 1.4.11 fuer Bedienelemente. */
.field input,.field textarea,.field select{font:inherit;font-size:var(--fs-body);
  color:var(--color-heading);padding:14px 16px;border:1px solid var(--color-border-strong);
  background:var(--color-ink);width:100%}
.field input::placeholder,.field textarea::placeholder{color:var(--color-muted)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--color-accent-on-dark)}
.field textarea{min-height:140px;resize:vertical}
.field input[type=file]{padding:10px;background:var(--color-band);color:var(--color-text)}
.field-consent{display:flex;gap:12px;align-items:flex-start}
/* Mehrfachauswahl ------------------------------------------------------- */
/* Ueberschrift wie eine Feldbeschriftung, aber kein <label>: es gehoert zu
   keinem einzelnen Bedienelement, sondern zur Gruppe darunter. */
.feld-titel{font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--color-heading)}
.mehrfach{position:relative}
.mehrfach__knopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;font:inherit;font-size:var(--fs-body);text-align:left;cursor:pointer;
  padding:12px 14px;background:var(--color-surface);color:var(--color-text);
  border:1px solid var(--color-border-strong)}
.mehrfach__knopf:focus-visible{border-color:var(--color-accent-on-dark)}
.mehrfach__chevron{width:14px;height:14px;flex:none;transition:transform .2s ease}
.mehrfach[data-open] .mehrfach__chevron{transform:rotate(180deg)}
.mehrfach__panel{display:none;position:absolute;left:0;right:0;top:calc(100% - 1px);z-index:20;
  max-height:260px;overflow-y:auto;background:var(--color-band);
  border:1px solid var(--color-border-strong)}
.mehrfach[data-open] .mehrfach__panel{display:block}
.mehrfach__panel label{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;
  color:var(--color-text);font-size:var(--fs-small);font-weight:var(--fw-regular);cursor:pointer}
.mehrfach__panel label:hover{background:var(--color-band-hover)}
.mehrfach__panel input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--color-accent)}
.field-consent input{width:20px;height:20px;flex:0 0 auto;margin-top:2px}
.field-consent label{font-weight:var(--fw-regular);font-size:14px;color:var(--color-text)}
.form-note{font-size:13px;color:var(--color-muted)}
.form-status{padding:14px 18px;border-radius:var(--radius);font-size:var(--fs-small);display:none}
.form-status[data-state]{display:block}
/* Erfolgsmeldung auf Dunkel: helles Gruen auf geduempfter Flaeche statt der
   hellgruenen Kachel - #1c5a33 auf #e8f3ec waere hier ein Fremdkoerper. */
.form-status[data-state=ok]{background:rgba(37,190,139,.13);color:#5FD3A8;border:1px solid rgba(37,190,139,.3)}
.form-status[data-state=err],.form-status[data-state=info]{background:var(--color-band);
  color:var(--color-heading);border:1px solid var(--color-border)}

/* NAP ------------------------------------------------------------------ */
.nap{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.nap li{display:flex;gap:12px;align-items:flex-start}
.nap address{font-style:normal}

/* Footer --------------------------------------------------------------- */
/* Der Footer war frueher die einzige dunkle Flaeche. Jetzt ist die ganze Seite
   dunkel, deshalb setzt ihn eine Haarlinie ab und er liegt eine Spur tiefer. */
.site-footer{background:var(--color-ink);color:var(--color-muted);
  border-top:1px solid var(--color-border);padding-block:72px 0;font-size:var(--fs-small)}
/* Fuenf Spalten seit der Trennung von Leistungen und Unternehmen. */
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1.3fr 1fr 1.5fr;gap:clamp(28px,3vw,48px)}
/* Die Filialspalte traegt die laengsten Zeilen (Anschrift, E-Mail) und bekommt
   deshalb am meisten Breite - sonst bricht die Hausnummer in eine eigene Zeile. */
/* Karriere und die Zaehlpille bleiben auf einer Zeile - deshalb bekommt die
   Unternehmensspalte oben mehr Breite als die uebrigen. */
.footer-grid a{display:inline-flex;align-items:baseline;gap:8px}
.footer-grid .pille{margin-left:0}
.footer-grid h2{color:var(--color-heading);font-size:12px;text-transform:uppercase;
  letter-spacing:var(--ls-kicker);margin-bottom:20px}
.footer-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.footer-grid a{color:var(--color-muted);text-decoration:none}
.footer-grid a:hover{color:var(--color-heading);text-decoration:underline}
/* Markenseiten als eigene Gruppe in der Unternehmen-Spalte: eingerueckt mit
   Strich, dazu etwas Luft davor und danach. Die Schriftfarbe bleibt muted —
   dunkler waere sie auf --color-ink unter dem Kontrastminimum (aktuell rund
   5,8:1). Die Abstaende kommen aus Geschwister-Selektoren, damit die Liste in
   der HTML-Vorlage ohne Sonderklassen fuer erstes/letztes Element auskommt. */
.footer-marke{padding-left:12px;border-left:1px solid rgba(255,255,255,.14)}
.footer-grid li:not(.footer-marke) + .footer-marke{margin-top:6px}
.footer-grid .footer-marke + li:not(.footer-marke){margin-top:6px}
.footer-brand img{width:86px;margin-bottom:20px}
.footer-social{display:flex;gap:12px;margin-top:22px}
.footer-social a{display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--color-border);color:var(--color-muted);
  transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.footer-social a:hover{color:var(--color-on-accent);border-color:var(--color-accent);background:var(--color-accent)}
.footer-social svg{width:18px;height:18px;fill:currentColor}
.footer-nap address{font-style:normal;line-height:1.6}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-block:24px;border-top:1px solid var(--color-border)}
.footer-bottom p{margin:0;font-size:13px}
.footer-bottom a{color:var(--color-muted);text-decoration:none}
.footer-bottom a:hover{color:var(--color-heading)}

/* Inception-Credit-Badge (Agency-Kit, dunkle Variante) ---------------------- */
.footer-bottom .inception{position:relative;  /* Anker fuer die Vorschau */
  display:inline-flex;align-items:center;gap:9px;padding:7px 12px;line-height:1;
  color:var(--color-muted);text-decoration:none;border:1px solid var(--color-border);
  transition:color .2s ease,border-color .2s ease}
.footer-bottom .inception:hover,.footer-bottom .inception:focus-visible{
  color:var(--color-heading);border-color:var(--color-border-strong);text-decoration:none}
/* Die Wortmarke liegt nur dunkel vor - auf dem dunklen Footer waere sie unsichtbar.
   brightness(0) invert(1) zieht jede einfarbige Marke auf reines Weiss. */
.footer-bottom .inception__logo{width:auto;height:16px;flex:none;display:block;
  filter:brightness(0) invert(1);opacity:.75;transition:opacity .2s ease}
.footer-bottom .inception:hover .inception__logo{opacity:1}
.footer-bottom .inception__preview{
  position:absolute;right:0;bottom:calc(100% + 12px);z-index:20;
  width:min(340px,calc(100vw - 32px));padding:6px;background:var(--color-light-surface);
  border:1px solid var(--color-border-strong);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
.footer-bottom .inception__preview img{display:block;width:100%;height:auto}
.footer-bottom .inception:hover .inception__preview,
.footer-bottom .inception:focus-visible .inception__preview{
  opacity:1;visibility:visible;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .footer-bottom .inception__preview{transition:opacity .2s ease;transform:none}
}
@media (max-width:600px){
  /* Mittig unter dem Knopf statt an einer Kante - der Knopf steht selbst mittig.
     translate statt transform, damit der Einblend-Versatz weiter funktioniert. */
  .footer-bottom .inception__preview{right:auto;left:50%;translate:-50% 0}
}
/* Auf dem Telefon gibt es kein Hover: der erste Tipp loest nur den haengenden
   Hover-Zustand aus, und die Vorschau deckt den halben Footer zu, statt etwas
   zu zeigen. Sie bleibt daher Geraeten mit echtem Zeiger vorbehalten. */
@media (hover:none){
  .footer-bottom .inception__preview{display:none}
}

/* Team- und Personenkacheln --------------------------------------------- */
/* Die Bildflaechen sind Platzhalter, bis echte Fotos da sind: ein Rahmen mit
   Personensymbol statt eines Fremdfotos. Seitenverhaeltnis fest, damit die
   Reihe spaeter beim Austausch gegen echte Bilder nicht springt. */
.person-bild{aspect-ratio:1;display:grid;place-items:center;
  background:var(--color-surface);margin-bottom:16px;align-self:stretch;width:100%}
/* Randlos bis an die Kartenkante: die Polsterung der Karte wird hier
   aufgehoben, damit das spaetere Foto die volle Breite bekommt. */
.card--person{padding:20px}
/* width:auto ist hier noetig: .person-bild traegt width:100%, und 100% misst
   die Inhaltsbreite der Karte - der negative Rand zog das Bild dann nur nach
   links, rechts blieb die Polsterung als Luecke stehen. Ohne feste Breite
   greift align-self:stretch und das Bild steht auf beiden Seiten am Rand. */
.card--person > .person-bild{margin:-20px -20px 16px;width:auto}
/* Ausserhalb einer Karte liegt die Platzhalterflaeche direkt auf dem
   Seitengrund - und --color-surface ist genau dieser Grund, die Flaeche war
   also unsichtbar und hinterliess nur ein Loch. Hier deshalb Bandfarbe mit
   Haarlinie, damit man sieht, dass dort ein Bild hingehoert. */
.split-media > .person-bild{background:var(--color-band);border:1px solid var(--color-border)}
.person-bild svg{width:56px;height:56px;color:var(--color-border-strong)}
.person-bild img{width:100%;height:100%;object-fit:cover}
/* Querformatige Platzhalterflaeche, bis ein Foto da ist. Festes Verhaeltnis,
   damit die Zeile beim Austausch nicht springt. */
.bild-platzhalter{aspect-ratio:4/3;display:grid;place-items:center;
  background:var(--color-band);border:1px solid var(--color-border)}
.bild-platzhalter svg{width:64px;height:64px;color:var(--color-border-strong)}
.person-name{color:var(--color-heading);font-weight:var(--fw-semibold);margin:0 0 2px}
.person-rolle{color:var(--color-muted);font-size:var(--fs-small);margin:0}
.person-wege{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:4px}
.person-wege a{color:var(--color-text);font-size:12px;text-decoration:none;
  overflow-wrap:anywhere}
.person-wege a:hover{color:var(--color-accent-on-dark);text-decoration:underline;text-underline-offset:3px}
/* Sichtbar als Baustelle gekennzeichnet - sonst liest sich Fuelltext wie
   fertige Seite und geht so live. */
.platzhalter{border:1px dashed var(--color-border-strong);padding:14px 16px;
  color:var(--color-muted);font-size:var(--fs-small);margin-bottom:28px}
.platzhalter strong{color:var(--color-heading);font-weight:var(--fw-semibold)}
/* Zaehlpille neben "Karriere". Die Zahl steht im Markup und muss mit der Liste
   in src/partials/stellen.html zusammenpassen - tools/check-stellen.mjs
   vergleicht beides. */
.pille{display:inline-block;margin-left:8px;padding:2px 8px;vertical-align:middle;
  background:rgba(77,163,240,.16);color:var(--color-accent-on-dark);
  font-size:11px;font-weight:var(--fw-medium);letter-spacing:.2px;white-space:nowrap}

/* Stellenliste (Muster geigercars.de/karriere) --------------------------- */
/* Je Stelle eine volle Zeile mit Haarlinie darueber: Kicker, Titel, kurzer
   Text links, die beiden Knoepfe rechts. Ab 860px untereinander. */
.stellen{display:grid}
.stellen__kopf{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:12px clamp(20px,3vw,48px);margin-bottom:8px}
.stellen__kopf > .btn{margin-top:6px}
.stellen__zahl{color:var(--color-accent-on-dark);font-size:var(--fs-small);
  font-weight:var(--fw-medium);letter-spacing:var(--ls-kicker);text-transform:uppercase}
.stelle{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:24px clamp(24px,4vw,64px);padding:32px 0;border-top:1px solid var(--color-border)}
.stelle:first-child{border-top:0}
.stelle__kicker{display:block;color:var(--color-muted);font-size:12px;
  letter-spacing:var(--ls-kicker);text-transform:uppercase;margin-bottom:10px}
.stelle__titel{margin:0 0 12px;color:var(--color-heading);font-size:var(--fs-h3)}
.stelle__text{margin:0;color:var(--color-text);max-width:52ch}
.stelle__knoepfe{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:860px){
  .stelle{grid-template-columns:1fr;padding:26px 0}
  .stelle__knoepfe .btn{flex:1 1 auto;justify-content:center}
}

/* Bewerbungsfenster ----------------------------------------------------- */
/* <dialog> statt eigenem Overlay: Fokusfalle, Escape und der abgedunkelte
   Hintergrund kommen vom Browser. */
.modal{width:min(680px,calc(100vw - 32px));max-height:min(88vh,900px);overflow-y:auto;padding:0;
  background:var(--color-band);border:1px solid var(--color-border-strong);color:var(--color-text)}
.modal::backdrop{background:rgba(2,2,4,.72)}
.modal__box{padding:clamp(22px,3vw,34px);gap:18px}
.modal__kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.modal__titel{margin:0;font-size:var(--fs-h3);color:var(--color-heading)}
.modal__lead{margin:6px 0 0;color:var(--color-muted);font-size:var(--fs-small)}
.modal__zu{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer;color:var(--color-text)}
.modal__zu:hover{color:var(--color-heading)}
.modal__zu svg{width:20px;height:20px}
.field .opt{color:var(--color-muted);font-weight:var(--fw-regular)}
/* Ablageflaeche fuer Unterlagen. Das Eingabefeld liegt unsichtbar darueber,
   damit die ganze Flaeche anklickbar ist und die Tastatur trotzdem hinkommt. */
.ablage{position:relative;display:grid;justify-items:center;gap:6px;padding:26px 18px;
  text-align:center;border:1px dashed var(--color-border-strong);background:var(--color-surface)}
.ablage[data-ueber]{border-color:var(--color-accent-on-dark);background:var(--color-band-hover)}
.ablage__symbol{width:26px;height:26px;color:var(--color-muted)}
.ablage__text{margin:0;color:var(--color-text);font-size:var(--fs-small)}
.ablage__link{color:var(--color-accent-on-dark);text-decoration:underline;text-underline-offset:3px}
.ablage__hinweis{margin:0;color:var(--color-muted);font-size:12px;line-height:1.5}
.ablage input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0}
.ablage input[type=file]:focus-visible{outline:2px solid var(--color-accent-on-dark);outline-offset:2px}
.ablage__liste{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.ablage__liste li{display:flex;justify-content:space-between;gap:12px;
  color:var(--color-text);font-size:var(--fs-small)}
.ablage__liste span{color:var(--color-muted)}

/* Brotkrumen ----------------------------------------------------------- */
.crumbs{font-size:13px;color:var(--color-muted);margin-bottom:20px}
.crumbs a{color:var(--color-muted);text-decoration:none}
.crumbs a:hover{color:var(--color-accent-on-dark)}

/* Responsive ----------------------------------------------------------- */
/* Vier Karten brechen frueher um als drei: unter 1180px wird aus einer Reihe
   ein Zweierblock, auf dem Telefon eine Spalte. */
@media (max-width:1180px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-4{grid-template-columns:1fr}}
@media (max-width:900px){
  .split,.grid-3,.grid-2,.form-row{grid-template-columns:1fr}
  .split--contact{grid-template-areas:"info" "karte" "aktion";
    grid-template-rows:auto auto auto;row-gap:clamp(32px,5vw,72px)}
  .split--contact > .split-aktion{margin-top:0}
  .split--reverse .split-media{order:0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  /* Die Markenspalte haengt an ihrer Ueberschrift - bei zwei Spalten darf sie
     nicht allein in eine neue Zeile rutschen. */
  .footer-col{min-width:0}
  .hero{padding-block:140px 72px;min-height:auto}
  .section--top{padding-top:48px}
  .autegro-slider{margin-top:48px}
}
@media (max-width:600px){
  /* Autegro-Formular darf auf dem Handy breiter stehen als der normale Gutter:
     12px Luft statt 20px, Ecken wie bei allen anderen Karten. */
  .autegro-inquiry{
    margin-inline:calc(12px - var(--gutter));
    border-radius:var(--radius-card);
    overflow:hidden}
  .footer-grid{grid-template-columns:1fr}
  /* Einspaltig wirkt der Markenblock linksbuendig wie ein abgeschnittener Rest -
     zentriert liest er sich als Kopf des Footers. Die Trennlinie setzt ihn von
     der Linkliste ab, die bewusst linksbuendig bleibt (besser scanbar). */
  .footer-brand{justify-items:center;text-align:center;display:grid}
  .footer-brand img{margin-inline:auto}
  .footer-social{justify-content:center}
  .footer-brand + .footer-col{padding-top:36px;border-top:1px solid rgba(255,255,255,.14)}
  .footer-bottom{justify-content:center;text-align:center}
  .brand-row img{height:32px}
  .btn{width:100%}
  .btn-row .btn{width:auto;flex:1 1 auto}
}

/* ---------------------------------------------------- Tabellen in Prosa-Seiten
   Bisher nur fuer die Cookie-Erklaerung gebraucht. Fuenf Spalten passen auf dem
   Handy nicht nebeneinander, deshalb scrollt die Tabelle dort waagerecht in
   ihrem eigenen Kasten statt die ganze Seite breit zu machen. tabindex="0" gibt
   es hier bewusst nicht - der Wrapper bekommt Tastaturfokus erst, wenn er
   wirklich ueberlaeuft (per CSS nicht ausdrueckbar); Screenreader lesen die
   Tabelle ohnehin Zelle fuer Zelle. */
.table-scroll{overflow-x:auto;margin:1.2em 0;border:1px solid var(--color-border);border-radius:var(--radius-card)}
.table-scroll table{border-collapse:collapse;width:100%;min-width:640px;font-size:var(--fs-small)}
.table-scroll th,.table-scroll td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--color-border)}
.table-scroll thead th{background:var(--color-band);color:var(--color-heading);font-weight:var(--fw-semibold);white-space:nowrap}
.table-scroll tbody tr:last-child td{border-bottom:0}
.table-scroll code{font-size:.92em;word-break:break-word}

/* ALTCHA-Widget: auf Kundenwunsch unsichtbar. auto="onload" loest die Aufgabe
   beim Laden der Seite, das Widget braucht also keine Bedienung - main.js liest
   nur das versteckte Eingabefeld aus.

   Bewusst NICHT display:none: das Element muss gerendert bleiben, damit das
   Web-Component seine Aufgabe zuverlaessig rechnet und sein Hidden-Input ins
   Formular haengt. Die Clip-Variante nimmt es aus dem Bild, ohne es aus dem
   Layout zu werfen.

   Wenn die Pruefung scheitert, sieht der Besucher hier nichts - aufgefangen
   wird das von main.js: nach 12s geht das Formular ohne Payload raus, der
   Server antwortet mit 422 und die Meldung landet in .form-status. */
.form .altcha{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ------------------------------------------------------- Linktree (/links)
   Aufbau von autohaus-neeman.de/links uebernommen: schmale Spalte, Logo,
   grosse Flaechen zum Antippen. Die Seite laeuft ohne Kopf- und Fusszeile
   ("bare" im meta-Block) - sie haengt in den Profilen bei Instagram und
   Facebook und soll auf dem Telefon mit einem Daumen bedienbar sein.
   Abweichung von der Vorlage: dort sind die Social-Knoepfe Kreise. Hier nicht,
   --radius-pill steht in tokens.css ausdruecklich auf 0. */
.linktree{max-width:460px;margin-inline:auto;text-align:center}
.linktree .lt-logo{width:132px;height:auto;margin:0 auto 28px;display:block}
.linktree h1{font-size:clamp(1.75rem,1.4rem + 1.5vw,2.4rem);margin-bottom:8px}
.lt-unterzeile{color:var(--color-muted);margin:0}
.lt-list{display:grid;gap:12px;margin:36px 0}
.lt-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Die Knoepfe fuellen ihre Zelle. .btn ist sonst inline-flex und waere hier
   unterschiedlich breit - eine Liste mit zackigem Rand liest sich schlecht. */
.btn-block,.lt-row .btn{width:100%;min-width:0}
.lt-icon{width:19px;height:19px;flex:none}
.lt-social{display:flex;justify-content:center;gap:16px;margin:0 0 32px;padding:0;list-style:none}
.lt-social a{display:grid;place-items:center;width:52px;height:52px;
  border:1px solid var(--color-border-strong);background:var(--color-band);
  color:var(--color-heading);transition:border-color .2s ease,color .2s ease,transform .2s ease}
.lt-social a:hover,.lt-social a:focus-visible{border-color:var(--color-accent-on-dark);
  color:var(--color-accent-on-dark);transform:translateY(-2px)}
.lt-social svg{width:22px;height:22px;fill:currentColor}
.lt-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;
  font-size:var(--fs-small);margin:0}
.lt-legal a{color:var(--color-muted);text-decoration:none}
.lt-legal a:hover{color:var(--color-heading);text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------------------ 404
   Ebenfalls von autohaus-neeman.de uebernommen. Die Zahl ist Dekoration und
   traegt aria-hidden; sie steht in der Akzentfarbe fuer Dunkelflaechen, nicht
   im Akzentblau - das kaeme auf dem Grund nur auf 2,9:1. */
.nichtgefunden{min-height:60vh;display:grid;place-items:center;text-align:center}
.nichtgefunden .container{max-width:var(--container-prose)}
.nichtgefunden__zahl{font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:clamp(5rem,3rem + 10vw,9rem);line-height:1;letter-spacing:-.02em;
  color:var(--color-accent-on-dark);margin:0 0 16px}
.nichtgefunden .lead{margin-inline:auto}