/* ==========================================================================
   KENBES.de — Stylesheet
   Keine externen Ressourcen. Keine Webfonts von Fremdservern (DSGVO).
   Systemschriften = 0 externe Requests, 0 Rechtsrisiko (vgl. LG München I,
   Urteil v. 20.01.2022 – 3 O 17493/20 zu Google Fonts).
   ========================================================================== */

:root{
  --bg:        #0b0c0e;
  --bg-2:      #121418;
  --bg-3:      #191c22;
  --line:      #262a32;
  --line-stark:#69717f;   /* Rahmen von Bedienelementen, 3,5:1 auf --bg-2 */
  --line-soft: #1d2027;

  --fg:        #eef0f3;
  --fg-2:      #a8aeb8;
  --fg-3:      #868d99;

  /* Gold. Gemessen aus assets/img/logo.png - haeufigste Farbe im
     Schriftzug. Vorher stand hier #e5b53f, ein dunkleres und roteres
     Gold, das neben dem Logo sichtbar abfiel. */
  --accent:    #e8c044;
  --accent-2:  #f2d275;
  --accent-dim:#2c2411;

  --ok:        #3ddc84;
  --warn:      #ffc247;

  --radius:    10px;
  --radius-sm: 6px;
  --maxw:      1140px;

  /* Barlow fuer den Fliesstext, Saira Condensed fuer Ueberschriften und
     Marke. Beide selbst gehostet, siehe schriften.css. Die Systemschriften
     bleiben als Rueckfallebene, falls eine Datei fehlt.                    */
  --font:    'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: 'Saira Condensed', 'Barlow', "Segoe UI", Roboto, Arial, sans-serif;
  /* Nur für den Markennamen: kursiv und schmal wie der Logo-Schriftzug */
  --marke:   'Barlow Condensed', 'Saira Condensed', "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:84px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:var(--accent-2); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Sichtbarer Fokus — Pflicht für Tastaturbedienung (Barrierefreiheit) */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}

/* Saira Condensed laeuft schmaler als die bisherige Systemschrift — die
   Schriftgrade werden deshalb angehoben, damit die Wirkung erhalten bleibt. */
h1,h2,h3,h4{
  font-family:var(--display);
  line-height:1.12;
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:-.005em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.5rem, 6.4vw, 4.3rem); font-weight:800; }
h2{ font-size:clamp(1.9rem, 4.2vw, 2.7rem); }
h3{ font-size:1.2rem; font-weight:600; }
p{ margin:0 0 1em; }

/* --- Layout ------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px; }

section{ padding:84px 0; border-top:1px solid var(--line-soft); }

.eyebrow{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 .9em;
}
.lead{ font-size:1.12rem; color:var(--fg-2); max-width:62ch; }

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--accent); color:#0b0c0e; padding:12px 18px; z-index:999; font-weight:600;
}
.skip:focus{ left:0; }

/* --- Header ------------------------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(11,12,14,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.site-head__inner{ display:flex; align-items:center; gap:20px; height:68px; }

.brand{ display:flex; align-items:baseline; font-weight:800; font-size:1.28rem; letter-spacing:-.03em; color:var(--fg); }
.brand:hover{ text-decoration:none; }
.brand span{ color:var(--accent); }
.brand small{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-3); font-weight:500; margin-left:.7ch;
}

.nav{ margin-left:auto; display:flex; align-items:center; gap:4px; }

/* Die Kopfzeile ist ein Wettbewerb um Breite: Logo, Slogan, Menue. Mit dem
   Dealer-Knopf reicht der Platz nicht mehr fuer alle drei, also muss
   feststehen, wer nachgibt. Das Menue gibt nicht nach — umgebrochene
   Menuepunkte sind schwer zu treffen und sehen kaputt aus. Der Slogan gibt
   nach; er hat dafuer bereits Auslassungspunkte und der goldene Name bleibt
   als Erstes stehen.                                                      */
@media (min-width:901px){
  .nav{ flex:none; }
  .nav a{ white-space:nowrap; }
}
.nav a{
  font-family:var(--display);
  color:var(--fg-2); font-size:1.02rem; font-weight:600;
  letter-spacing:.01em;
  padding:9px 13px; border-radius:var(--radius-sm);
}
.nav a:hover{ color:var(--fg); background:var(--bg-3); text-decoration:none; }
.nav a[aria-current="page"]{ color:var(--fg); }

/* --- Menueknopf: drei Balken, die zum X werden ---------------------------
   Der Knopf liegt ueber dem Overlay (die Kopfzeile hat z-index 100, das
   Overlay 90). Dadurch bleibt er im offenen Zustand sichtbar und schliesst
   das Menue - man braucht kein zweites Kreuz irgendwo im Bild. */
.nav-toggle{
  display:none; margin-left:auto;
  background:var(--bg-3); border:1px solid var(--line); color:var(--fg);
  width:44px; height:44px; border-radius:var(--radius-sm); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  /* Muss ueber dem Overlay liegen, sonst ist er im offenen Zustand nicht
     mehr anzuklicken - und dann kommt man aus dem Menue nur noch heraus,
     indem man einen Punkt waehlt.

     Der Stolperstein: Die Navigation ist ein KIND der Kopfzeile. Beide
     stapeln sich deshalb im selben Zusammenhang, und dort zaehlt nur der
     z-index untereinander - die 100 der Kopfzeile hilft dem Knopf nichts.
     Das Overlay steht auf 90, also muss der Knopf darueber. Gemessen mit
     elementFromPoint: vorher lag NAV.nav ueber dem Knopf. */
  position:relative; z-index:95;
  transition:border-color .2s ease, background .2s ease;
}
.nav-toggle:hover{ border-color:var(--accent); }

/* Im offenen Zustand ist der Knopf das Kreuz zum Schliessen. Damit man ihn
   auf der dunklen Flaeche auch als solches erkennt, bekommt er dort einen
   goldenen Rand - sonst sucht man ein X und sieht nur einen dunklen Kasten
   auf dunklem Grund. */
.nav-toggle[aria-expanded="true"]{
  border-color:var(--accent);
  background:var(--bg-2);
}
.nav-toggle__strich{
  display:block; width:19px; height:2px; border-radius:2px;
  background:var(--accent);
  transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .18s ease;
}
/* Mitte zu Mitte sind es 7px (2px Balken + 5px Abstand) - genau so weit
   muessen die aeusseren Balken wandern, damit sich das X in der Mitte
   kreuzt. */
.nav-toggle[aria-expanded="true"] .nav-toggle__strich:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__strich:nth-child(2){
  opacity:0; transform:scaleX(.4);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__strich:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

@media (max-width:880px){
  .nav-toggle{ display:flex; }

  /* --- Das Vollbildmenue -------------------------------------------------
     Frueher war das eine aufklappende Liste unter der Kopfzeile, die mit
     display:none/flex hart umsprang. Jetzt legt es sich als Flaeche ueber
     die Seite und blendet auf.

     Wichtig: display bleibt immer flex. Wuerde hier display:none stehen,
     gaebe es nichts zu ueberblenden - der Browser kann von "nicht
     vorhanden" nicht weich nach "vorhanden" rechnen. Die Sichtbarkeit
     regeln deshalb opacity, visibility und pointer-events. */
  .nav{
    position:fixed; inset:0;
    z-index:90;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:0; margin:0;
    padding:88px 24px 34px;
    background:rgba(11,12,14,.975);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .34s ease, visibility 0s linear .34s;
  }
  .nav.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .34s ease, visibility 0s linear 0s;
  }

  /* Zentriert, aber ohne oben abzuschneiden, wenn die Eintraege nicht auf
     den Bildschirm passen. Zwei leere Kaesten mit margin:auto teilen den
     Rest des Platzes unter sich auf - bleibt keiner uebrig, schrumpfen sie
     auf null und die Liste beginnt einfach oben. Mit justify-content:center
     allein waere der erste Eintrag beim Ueberlauf nicht mehr erreichbar. */
  .nav::before,
  .nav::after{ content:""; display:block; margin:auto; }

  .nav a{
    font-family:var(--display);
    font-size:1.42rem; font-weight:700;
    letter-spacing:.055em;
    text-transform:uppercase;
    color:var(--fg);
    padding:11px 10px;
    border:0; border-radius:var(--radius-sm);
    flex:none;

    /* Ausgangslage der Staffelung: etwas tiefer und unsichtbar. */
    opacity:0;
    transform:translateY(13px);
    transition:opacity .4s ease,
               transform .4s cubic-bezier(.22,1,.36,1),
               color .15s ease;
  }
  .nav a:hover{ color:var(--accent); background:none; }
  .nav a[aria-current="page"]{ color:var(--accent); }

  .nav .btn{
    margin-top:16px;
    padding:14px 30px;
    font-size:1.02rem;
    letter-spacing:.05em;
    text-transform:uppercase;
    border-radius:var(--radius-sm);
  }
  .nav .btn:hover{ color:#0b0c0e; }

  .nav .sprachwahl{
    margin-top:20px;
    opacity:0;
    transform:translateY(13px);
    transition:opacity .4s ease,
               transform .4s cubic-bezier(.22,1,.36,1);
  }

  /* --- Die Staffelung ----------------------------------------------------
     Jeder Eintrag startet 40ms nach dem vorigen. Elf Eintraege ergeben
     440ms bis zum letzten - lang genug, dass man die Bewegung sieht, kurz
     genug, dass niemand wartet. Das Vorbild nimmt 80ms, hat aber nur acht
     Eintraege.

     Die Verzoegerung steht nur im offenen Zustand. Beim Schliessen sollen
     alle gleichzeitig verschwinden, sonst zerfaellt das Menue. */
  .nav.is-open a,
  .nav.is-open .sprachwahl{ opacity:1; transform:none; }

  .nav.is-open > :nth-child(1) { transition-delay:.05s; }
  .nav.is-open > :nth-child(2) { transition-delay:.09s; }
  .nav.is-open > :nth-child(3) { transition-delay:.13s; }
  .nav.is-open > :nth-child(4) { transition-delay:.17s; }
  .nav.is-open > :nth-child(5) { transition-delay:.21s; }
  .nav.is-open > :nth-child(6) { transition-delay:.25s; }
  .nav.is-open > :nth-child(7) { transition-delay:.29s; }
  .nav.is-open > :nth-child(8) { transition-delay:.33s; }
  .nav.is-open > :nth-child(9) { transition-delay:.37s; }
  .nav.is-open > :nth-child(10){ transition-delay:.41s; }
  .nav.is-open > :nth-child(11){ transition-delay:.45s; }
  .nav.is-open > :nth-child(12){ transition-delay:.49s; }

  /* Die Punkte, die auf breiten Bildschirmen nur im Menue stehen, sind
     hier alle sichtbar - das Menue IST ja das Menue. */
  .nav__mehr{ display:block; }
}

/* Auf niedrigen Bildschirmen wird es mit elf Eintraegen eng. Gemessen auf
   908px Hoehe passt alles ohne Rollen; darunter nicht mehr. Statt scrollen
   zu lassen ruecken Schrift und Abstaende zusammen - ein Menue, in dem man
   erst suchen muss, ist keins.

   Die Grenze liegt bei 760px, weil ein Telefon im Hochformat typisch
   zwischen 640 und 740 nutzbarer Hoehe hat. */
@media (max-width:880px) and (max-height:760px){
  .nav{ padding:74px 24px 26px; }
  .nav a{ font-size:1.2rem; padding:8px 10px; letter-spacing:.045em; }
  .nav .btn{ margin-top:12px; padding:12px 26px; font-size:.96rem; }
  .nav .sprachwahl{ margin-top:14px; }
}

/* Und fuer die kleinsten Geraete noch eine Stufe enger. */
@media (max-width:880px) and (max-height:620px){
  .nav{ padding:66px 20px 20px; }
  .nav a{ font-size:1.04rem; padding:6px 8px; }
  .nav .btn{ margin-top:10px; padding:10px 22px; font-size:.9rem; }
  .nav .sprachwahl{ margin-top:10px; }
}

/* Wer Bewegung reduziert haben moechte, bekommt dasselbe Menue ohne Flug.
   Das Vorbild macht das nicht; fuer empfindliche Menschen ist ein
   einfliegendes Vollbild unangenehm bis ausloesend. */
@media (prefers-reduced-motion:reduce){
  .nav,
  .nav a,
  .nav .sprachwahl,
  .nav-toggle__strich{
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
  .nav a,
  .nav .sprachwahl{ transform:none !important; }
}

/* Solange das Menue offen ist, steht die Seite dahinter still. */
body.menue-offen{ overflow:hidden; }

/* --- Warum der Kopfzeile hier der Weichzeichner genommen wird ------------
   Ein Element mit backdrop-filter wird zum Bezugsrahmen fuer alles, was
   darin position:fixed steht. Die Navigation liegt in der Kopfzeile - das
   Vollbildmenue war dadurch nicht bildschirmgross, sondern kopfzeilengross:
   gemessen 122px statt 908px. Man sah einen Streifen unter dem Logo, und
   der Rest der Eintraege stand ausserhalb.

   Sichtbar wird das nur, wenn man nachmisst: Die Regeln stimmen alle, der
   Browser wendet sie an - er bezieht "fixed" nur auf den falschen Rahmen.

   Solange das Menue offen ist, bleibt der Weichzeichner deshalb aus. Er
   fehlt dort auch nicht: das Overlay bringt seinen eigenen mit und deckt
   ohnehin alles ab. Auch der Grund der Kopfzeile faellt weg, damit sie im
   offenen Menue nicht als abgesetzter Balken stehenbleibt.
   ------------------------------------------------------------------------ */
@media (max-width:880px){
  body.menue-offen .site-head{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:transparent;
    border-bottom-color:transparent;
  }
}

/* --- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6ch;
  padding:13px 24px; border-radius:var(--radius-sm);
  font-family:var(--display);
  font-weight:700; font-size:1.04rem; line-height:1.2;
  letter-spacing:.012em;
  border:1px solid transparent; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
  text-decoration:none; font-family:inherit;
  white-space:nowrap;
}
.btn:hover{ text-decoration:none; }
.btn--primary{ background:var(--accent); color:#0b0c0e; }
.btn--primary:hover{ background:var(--accent-2); }
.btn--ghost{ background:transparent; color:var(--fg); border-color:var(--line); }
.btn--ghost:hover{ background:var(--bg-3); border-color:var(--fg-3); }

/* Dealer-Panel. Steht direkt neben dem primaeren Knopf und darf ihn
   nicht ueberstrahlen: nur Umriss in Gold, gefuellt erst beim Zeigen.
   Die gefuellte Fassung passt zur Regel .nav .btn:hover im Menue,
   die auf Mobilgeraeten die Schrift dunkel setzt.                     */
.btn--dealer{
  background:transparent; color:var(--accent);
  border-color:var(--accent);
}
.btn--dealer:hover{ background:var(--accent); color:#0b0c0e; }
.btn--dealer svg{ width:1.05em; height:1.05em; flex:none; }

/* Im Menue faerbt .nav a alle Eintraege um und ist spezifischer als die
   Variante oben. Ohne diese Zeilen steht der Knopf im Handy-Menue weiss
   statt golden da, und .nav .btn:hover setzt die Schrift auf Dunkel —
   dunkel auf durchsichtig, also unlesbar.                                 */
.nav a.btn--dealer{ color:var(--accent); border-color:var(--accent); }
.nav a.btn--dealer:hover{ background:var(--accent); color:#0b0c0e; }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

/* --- Hero --------------------------------------------------------------- */
.hero{
  padding:104px 0 92px;
  border-top:0;
  background:
    radial-gradient(900px 420px at 78% -10%, rgba(229,181,63,.14), transparent 65%),
    linear-gradient(180deg, #0d0e11 0%, var(--bg) 100%);
}
.hero h1{ max-width:17ch; }
.hero h1 em{
  font-family:var(--marke);
  font-style:italic;
  font-weight:800;
  font-size:1.1em;
  letter-spacing:.005em;
  color:var(--accent);
}
.hero .lead{ font-size:1.2rem; margin-top:20px; }

.hero-facts{
  display:flex; flex-wrap:wrap; gap:38px;
  margin:52px 0 0; padding-top:30px; border-top:1px solid var(--line-soft);
}
.hero-facts > div{ min-width:130px; }
.hero-facts dt{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); }
.hero-facts dd{ font-family:var(--display); margin:6px 0 0; font-size:1.62rem; font-weight:700; letter-spacing:0; }

/* --- Cards / Grid ------------------------------------------------------- */
.grid{ display:grid; gap:20px; margin-top:44px; }
.grid--3{ grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); }
.grid--2{ grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); }

.card{
  background:var(--bg-2);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:28px 26px;
}
.card h3{ margin-bottom:.55em; }
.card p{ color:var(--fg-2); font-size:.97rem; }
.card p:last-child{ margin-bottom:0; }
.card__icon{
  width:42px; height:42px; border-radius:var(--radius-sm);
  background:var(--accent-dim); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.card__icon svg{ width:21px; height:21px; }
.card ul{ margin:0; padding-left:1.15em; color:var(--fg-2); font-size:.96rem; }
.card ul li{ margin-bottom:.45em; }

.tag{
  display:inline-block; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:4px;
  background:var(--bg-3); color:var(--fg-3); border:1px solid var(--line);
  margin-bottom:16px;
}
.tag--legal{ background:rgba(61,220,132,.09); color:var(--ok); border-color:rgba(61,220,132,.28); }

/* --- Ablauf ------------------------------------------------------------- */
.steps{ counter-reset:step; list-style:none; margin:44px 0 0; padding:0; display:grid; gap:2px; }
.steps li{
  counter-increment:step;
  position:relative;
  padding:24px 26px 24px 78px;
  background:var(--bg-2);
  border:1px solid var(--line-soft);
}
.steps li:first-child{ border-radius:var(--radius) var(--radius) 0 0; }
.steps li:last-child{ border-radius:0 0 var(--radius) var(--radius); }
.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute; left:26px; top:24px;
  font-family:var(--mono); font-size:1.05rem; font-weight:700; color:var(--accent);
}
.steps h3{ margin-bottom:.35em; font-size:1.05rem; }
.steps p{ margin:0; color:var(--fg-2); font-size:.96rem; }

/* --- Marken ------------------------------------------------------------- */
.marken{ display:flex; flex-wrap:wrap; gap:9px; margin-top:32px; padding:0; list-style:none; }
.marken li{
  padding:9px 16px; border:1px solid var(--line);
  border-radius:100px; background:var(--bg-2);
  font-size:.93rem; color:var(--fg-2);
}

/* --- Hinweisbox --------------------------------------------------------- */
.note{
  border:1px solid var(--line);
  border-left:3px solid var(--warn);
  background:var(--bg-2);
  border-radius:var(--radius-sm);
  padding:20px 24px;
  margin:34px 0 0;
  font-size:.95rem;
  color:var(--fg-2);
}
.note strong{ color:var(--fg); }
.note--ok{ border-left-color:var(--ok); }
.note p:last-child{ margin-bottom:0; }

/* --- Formular ----------------------------------------------------------- */
.form{ margin-top:40px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:.92rem; font-weight:600; margin-bottom:7px; }
.field .hint{ display:block; font-weight:400; color:var(--fg-3); font-size:.85rem; margin-top:4px; }
.req{ color:var(--accent); }

.field input,
.field select,
.field textarea{
  width:100%;
  padding:12px 14px;
  background:var(--bg-2);
  border:1px solid var(--line-stark);
  border-radius:var(--radius-sm);
  color:var(--fg);
  font-family:inherit;
  font-size:1rem;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--fg-3); }

.check{ display:flex; gap:12px; align-items:flex-start; font-size:.92rem; color:var(--fg-2); }
.check input{ width:19px; height:19px; margin-top:3px; flex:none; accent-color:var(--accent); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status{ margin-top:18px; padding:14px 18px; border-radius:var(--radius-sm); font-size:.95rem; }
.form-status:empty{
  /* Nicht display:none — sonst ist die Live-Region für Screenreader tot.
     Sie bleibt im Baum, nimmt aber keinen Platz ein.                     */
  padding:0; margin:0; border:0;
}
.form-status.is-ok{ background:rgba(61,220,132,.1); border:1px solid rgba(61,220,132,.3); color:var(--ok); }
.form-status.is-err{ background:rgba(229,181,63,.1); border:1px solid rgba(229,181,63,.35); color:var(--accent-2); }

/* --- Kontakt ------------------------------------------------------------ */
.kontakt-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:56px; align-items:start; margin-top:44px; }
@media (max-width:840px){ .kontakt-grid{ grid-template-columns:1fr; gap:40px; } }
.kontakt-liste{ margin:0; padding:0; }
.kontakt-liste > div{ padding:16px 0; border-bottom:1px solid var(--line-soft); }
.kontakt-liste dt{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); margin-bottom:5px; }
.kontakt-liste dd{ margin:0; font-size:1.02rem; }

/* --- Footer ------------------------------------------------------------- */
.site-foot{
  border-top:1px solid var(--line);
  background:var(--bg-2);
  padding:56px 0 34px;
  font-size:.93rem;
  color:var(--fg-3);
}
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:460px){ .foot-grid{ grid-template-columns:1fr; } }
.site-foot h4{ font-size:.76rem; font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2); margin-bottom:14px; }
.site-foot ul{ list-style:none; margin:0; padding:0; }
.site-foot li{ margin-bottom:9px; }
.site-foot a{ color:var(--fg-3); }
.site-foot a:hover{ color:var(--fg); }
.foot-bottom{
  margin-top:44px; padding-top:24px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-size:.86rem;
}

/* --- Rechtstexte -------------------------------------------------------- */
.doc{ padding:60px 0 90px; }
.doc-inner{ max-width:78ch; }
.doc h1{ font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:.4em; }
.doc h2{ font-size:1.32rem; margin-top:2.4em; padding-top:1.1em; border-top:1px solid var(--line-soft); }
.doc h3{ font-size:1.05rem; margin-top:1.9em; color:var(--fg); }
.doc p, .doc li{ color:var(--fg-2); font-size:1rem; }
.doc ul, .doc ol{ padding-left:1.3em; }
.doc li{ margin-bottom:.5em; }
.doc address{ font-style:normal; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--radius-sm); padding:20px 24px; margin:1em 0; color:var(--fg); }
.doc__meta{ font-family:var(--mono); font-size:.8rem; color:var(--fg-3); margin-bottom:2.4em; }
.doc table{ width:100%; border-collapse:collapse; margin:1.4em 0; font-size:.94rem; }
.doc th, .doc td{ text-align:left; padding:11px 14px; border:1px solid var(--line-soft); vertical-align:top; }
.doc th{ background:var(--bg-3); color:var(--fg); font-weight:600; }
.doc td{ color:var(--fg-2); }
.doc__box{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:24px 28px; margin:1.6em 0; }
.doc__box h3{ margin-top:0; }

/* Platzhalter, die vor dem Livegang ersetzt werden müssen */
.todo{
  background:rgba(255,194,71,.14);
  color:var(--warn);
  border:1px dashed rgba(255,194,71,.5);
  border-radius:3px;
  padding:1px 7px;
  font-family:var(--mono);
  font-size:.86em;
  font-weight:600;
}

.toc{ background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:22px 26px; margin:2em 0; }
.toc h2{ margin:0 0 .7em; border:0; padding:0; font-size:.78rem; font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); }
.toc ol{ margin:0; padding-left:1.3em; }
.toc li{ margin-bottom:.3em; }

/* --- Print -------------------------------------------------------------- */
@media print{
  .site-head, .site-foot, .btn-row, .nav-toggle, .skip,
  .direkt, .qr-zeile, .wa-fab, .toc{ display:none; }

  /* Alles schwarz auf weiß. Ohne die Sammelregel behalten Überschriften,
     Adressblöcke und Tabellenköpfe ihre helle Bildschirmfarbe und sind
     auf Papier unsichtbar.                                              */
  body{ background:#fff; color:#000; font-size:11pt; }
  .doc, .doc *{ color:#000 !important; background:transparent !important; }

  .doc h1, .doc h2, .doc h3, .doc h4{ color:#000 !important; }
  .doc h2{ border-top:1px solid #999; }
  .doc address, .doc__box{ background:#fff !important; border:1px solid #999; }
  .doc table{ border-collapse:collapse; }
  .doc th, .doc td{ border:1px solid #999; }
  .doc th{ background:#eee !important; font-weight:700; }

  a{ color:#000; text-decoration:underline; }
  .todo{ background:#ffe !important; color:#000 !important; border:1px dashed #999; }

  /* Absätze und Listen nicht mitten im Satz umbrechen */
  p, li, tr{ page-break-inside:avoid; break-inside:avoid; }
  h1, h2, h3{ page-break-after:avoid; break-after:avoid; }
}

/* ==========================================================================
   Komponenten
   ========================================================================== */

/* --- Logo im Header ----------------------------------------------------- */
.brand-logo{ display:flex; align-items:center; height:68px; }
.brand-logo img{ height:34px; width:auto; }
@media (max-width:480px){ .brand-logo img{ height:27px; } }

/* --- Hero-Logo ---------------------------------------------------------- */
.hero-logo{ max-width:430px; width:72%; margin-bottom:34px; }

/* --- Fahrzeug-Konfigurator ---------------------------------------------- */
.konf{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 30px;
  margin-top:44px;
}
.konf__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:900px){ .konf__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .konf__grid{ grid-template-columns:1fr; } }

.konf__step label{
  display:block; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); margin-bottom:8px;
}
.konf__step label b{ color:var(--accent); font-weight:700; margin-right:.6ch; }
.konf__step select{
  width:100%; padding:12px 13px;
  background:var(--bg-3); border:1px solid var(--line-stark);
  border-radius:var(--radius-sm); color:var(--fg);
  font-family:inherit; font-size:.97rem;
}
.konf__step select:disabled{
  color:var(--fg-3);
  background:var(--bg-2);
  border-color:var(--line);
  cursor:not-allowed;
}

.konf__out{
  margin-top:28px; padding-top:26px; border-top:1px solid var(--line-soft);
}
.konf__out[hidden]{ display:none; }
.konf__werte{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:2px; margin-bottom:24px;
}
.konf__wert{ background:var(--bg-3); padding:18px 20px; }
.konf__wert:first-child{ border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.konf__wert:last-child{ border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
@media (max-width:640px){
  .konf__wert, .konf__wert:first-child, .konf__wert:last-child{ border-radius:var(--radius-sm); }
}
.konf__wert dt{ font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3); }
.konf__wert dd{ margin:8px 0 0; font-size:1.05rem; }
.konf__wert dd .von{ color:var(--fg-3); }
.konf__wert dd .pfeil{ color:var(--accent); margin:0 .5ch; }
.konf__wert dd .nach{ font-family:var(--display); color:var(--accent); font-weight:700; font-size:1.45rem; }
.konf__wert dd .plus{ display:block; font-size:.84rem; color:var(--ok); margin-top:3px; font-family:var(--mono); }

/* --- Stufen-Vergleich --------------------------------------------------- */
.stufen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:44px; }
.stufe{
  background:var(--bg-2); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:30px 28px;
  display:flex; flex-direction:column;
}
.stufe--top{ border-color:var(--accent); position:relative; }
.stufe--top::after{
  content:"Meistgewählt";
  position:absolute; top:-11px; left:28px;
  background:var(--accent); color:#0b0c0e;
  font-size:.68rem; font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; padding:4px 11px; border-radius:3px;
}
.stufe h3{ font-size:1.5rem; margin-bottom:.2em; }
.stufe__sub{ color:var(--fg-3); font-size:.9rem; margin-bottom:22px; }
.stufe ul{ list-style:none; margin:0 0 24px; padding:0; font-size:.95rem; }
.stufe li{
  padding:10px 0 10px 27px; position:relative;
  border-bottom:1px solid var(--line-soft); color:var(--fg-2);
}
.stufe li::before{
  content:"✓"; position:absolute; left:0; top:10px;
  color:var(--accent); font-weight:700;
}
.stufe li.no::before{ content:"–"; color:var(--fg-3); }
.stufe .btn{ margin-top:auto; }

/* --- Über mich ---------------------------------------------------------- */
.about-grid{ display:grid; grid-template-columns:1fr 380px; gap:60px; align-items:start; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:38px; } }

.about-stats{
  background:var(--bg-2); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:8px 28px;
}
.about-stats > div{ padding:22px 0; border-bottom:1px solid var(--line-soft); }
.about-stats > div:last-child{ border-bottom:0; }
.about-stats dt{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); }
.about-stats dd{ font-family:var(--display); margin:7px 0 0; font-size:1.8rem; font-weight:700; letter-spacing:0; color:var(--accent); }
.about-stats dd small{ display:block; font-size:.88rem; font-weight:400; color:var(--fg-2); letter-spacing:0; margin-top:4px; }

.sig{
  margin-top:34px; padding-top:26px; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:.88rem; color:var(--fg-3);
}
.sig strong{ display:block; color:var(--fg); font-size:1.05rem; font-family:var(--font); letter-spacing:-.02em; margin-bottom:3px; }

/* --- Fileservice: B2B-Hinweis ------------------------------------------- */
.b2b{
  position:relative;
  background:var(--bg-2);
  border:1px solid var(--accent);
  border-radius:var(--radius);
  padding:30px 28px 26px;
  margin-top:40px;
}
.b2b__marke{
  position:absolute; top:-11px; left:26px;
  background:var(--accent); color:#0b0c0e;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:700;
  padding:4px 12px; border-radius:3px;
}
.b2b p{ margin:0; color:var(--fg-2); font-size:.97rem; }

/* --- Touch-Ziele: mindestens 24px hoch (WCAG 2.2, 2.5.8) ---------------- */
/* Fliesstext-Links sind von der Anforderung ausgenommen und bleiben, wie
   sie sind. Betroffen sind nur die Listen- und Kontaktlinks.              */

.site-foot li{ margin-bottom:4px; }
.site-foot li a{
  display:inline-block;
  padding:5px 0;
  min-height:24px;
}

.kontakt-liste dd a{
  display:inline-block;
  padding:3px 0;
  min-height:24px;
}

.check input{
  width:24px; height:24px;
  margin-top:1px;
}

.foot-bottom a{
  display:inline-block;
  padding:3px 0;
  min-height:24px;
}

/* --- Direktkontakt ------------------------------------------------------ */
/* Reine Hyperlinks. Es wird nichts von fremden Servern geladen — die Icons
   sind Inline-SVG, die Farben stehen hier im Stylesheet.                   */

.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;
}

.direkt{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(255px, 1fr));
  gap:14px;
  margin-top:40px;
}

.direkt__btn{
  display:flex; align-items:center; gap:16px;
  padding:18px 20px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--fg);
  min-height:76px;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.direkt__btn:hover{
  text-decoration:none;
  background:var(--bg-3);
  border-color:var(--fg-3);
}
.direkt__btn:active{ transform:translateY(1px); }

.direkt__icon{
  flex:none;
  width:44px; height:44px;
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
}
.direkt__icon svg{ width:23px; height:23px; }

.direkt__text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.direkt__text b{ font-size:1.02rem; font-weight:600; letter-spacing:-.01em; }
.direkt__text small{
  font-size:.85rem; color:var(--fg-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.direkt__extern{
  margin-left:auto; flex:none;
  color:var(--fg-3); font-size:.95rem;
}

/* Kanaltypische Farben, damit die Icons sofort erkannt werden */
.direkt__btn--wa   .direkt__icon{ background:rgba(37,211,102,.13);  color:#25d366; }
.direkt__btn--tel  .direkt__icon{ background:var(--accent-dim);     color:var(--accent); }
.direkt__btn--mail .direkt__icon{ background:var(--accent-dim);     color:var(--accent); }
.direkt__btn--ig   .direkt__icon{ background:rgba(225,48,108,.13);  color:#e1306c; }

.direkt__btn--wa:hover{ border-color:#25d366; }
.direkt__btn--ig:hover{ border-color:#e1306c; }

.direkt__hinweis{
  margin-top:16px;
  font-size:.86rem;
  color:var(--fg-3);
}

/* --- Schwebender WhatsApp-Knopf ----------------------------------------- */
.wa-fab{
  position:fixed;
  right:20px; bottom:20px;
  z-index:90;
  width:58px; height:58px;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
  transition:transform .15s ease, box-shadow .15s ease;
}
.wa-fab svg{ width:29px; height:29px; }
.wa-fab:hover{
  transform:scale(1.06);
  box-shadow:0 8px 28px rgba(37,211,102,.4);
  text-decoration:none;
}
.wa-fab:active{ transform:scale(.98); }

/* Im Kontaktbereich ausblenden — dort stehen die Knoepfe ohnehin gross da */
.wa-fab.ist-versteckt{
  opacity:0; visibility:hidden; transform:scale(.8);
  transition:opacity .2s ease, visibility .2s ease, transform .2s ease;
}

@media print{
  .wa-fab{ display:none; }
}

/* --- QR-Code für den Wechsel vom Rechner aufs Handy ---------------------- */
.qr-zeile{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:26px; margin-top:22px;
}
.qr-zeile .direkt__hinweis{ flex:1 1 300px; margin-top:0; }

.qr-box{
  display:flex; align-items:center; gap:20px;
  background:var(--bg-2);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:20px 24px 20px 20px;
  flex:0 1 auto;
}
.qr-box img{
  width:104px; height:104px;
  background:#fff;
  border-radius:var(--radius-sm);
  padding:7px;
  flex:none;
}
.qr-box__text{ max-width:26ch; }
.qr-box__text b{ display:block; font-size:.98rem; margin-bottom:5px; }
.qr-box__text p{ margin:0; font-size:.88rem; color:var(--fg-3); line-height:1.55; }

/* Auf dem Handy sinnlos — dort wird geklickt, nicht gescannt */
@media (max-width:700px){
  .qr-box{ display:none; }
}
@media print{
  .qr-box{ display:flex; }
}

/* --- Hilfsklassen -------------------------------------------------------- */
/* Ersetzen die frueheren style-Attribute. Notwendig, weil die
   Content-Security-Policy (style-src 'self') Inline-Styles blockiert —
   und die CSP soll streng bleiben.                                         */

.foot-logo{ width:170px; margin-bottom:18px; }
.foot-claim{ max-width:34ch; }
.h2-first{ border-top:0; margin-top:0; padding-top:0; }
.umbruch{ word-break:break-all; }

.m-0{ margin:0; }
.mt-0{ margin-top:0; }
.mt-12{ margin-top:12px; }
.mt-14{ margin-top:14px; }
.mt-18{ margin-top:18px; }
.mt-26{ margin-top:26px; }
.mt-1-4em{ margin-top:1.4em; }
.mt-1-6em{ margin-top:1.6em; }
.mt-2em{ margin-top:2em; }
.txt-klein{ font-size:.9rem; }

/* --- Einwilligungsbanner ------------------------------------------------- */
/* Wichtig: "Nur Notwendiges" und "Alles erlauben" sind absichtlich identisch
   gestaltet — gleiche Größe, gleiche Farbe, gleiche Ebene. Ein Banner, der
   das Ablehnen optisch benachteiligt, ist der häufigste Abmahngrund.       */

.consent{
  position:fixed;
  inset:auto 0 0 0;
  z-index:200;
  padding:12px;
  display:flex;
  justify-content:center;
  background:linear-gradient(180deg, rgba(11,12,14,0), rgba(11,12,14,.45) 55%);
}

/* Kleiner als frueher: 540 statt 660 Breite, knapperes Innenmass, kleinere
   Schrift. Die Verhaeltnisse bleiben dabei gleich - beide Schaltflaechen
   werden gleich stark verkleinert. Eine Einwilligung ist nur wirksam, wenn
   Ablehnen genauso leicht faellt wie Zustimmen (EuGH Planet49 C-673/17,
   DSK-Orientierungshilfe Telemedien). Deshalb tragen beide dieselbe Klasse,
   stehen nebeneinander und haben dieselbe Groesse. */
.consent__box{
  width:100%;
  max-width:460px;
  max-height:calc(100vh - 24px);
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
  overscroll-behavior:contain;

  /* Durchsichtig mit Weichzeichner statt massivem Grund. Die Seite bleibt
     dahinter erkennbar - man sieht, wovon man gerade weggehalten wird.

     Der Grund ist trotzdem dunkel genug, dass der Text darauf seine
     Lesbarkeit behaelt: 4,5:1 wird auch gegen den hellsten Bildausschnitt
     eingehalten, den die Seite an dieser Stelle zeigt. Ein Kasten, den man
     nicht lesen kann, ist keine wirksame Einwilligung. */
  background:rgba(17,18,21,.82);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);

  border:1px solid rgba(232,192,68,.22);
  border-radius:var(--radius);
  padding:15px 17px 13px;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}

/* Wo der Browser keinen Weichzeichner kann, wird der Grund wieder deckend -
   sonst stuende der Text auf der Seite darunter. */
@supports not (backdrop-filter: blur(4px)){
  .consent__box{ background:rgba(17,18,21,.97); }
}

.consent__titel{ font-size:.99rem; margin:0 0 .4em; }
.consent__text{ font-size:.845rem; line-height:1.5; color:var(--fg-2); margin:0 0 13px; }

.consent__kategorien{ margin:0 0 14px; }
.consent__kat{
  border-top:1px solid var(--line-soft);
  padding:12px 0 2px;
}
.consent__kat p{ font-size:.82rem; line-height:1.5; color:var(--fg-2); margin:0 0 .4em; }
.consent__details{ color:var(--fg-3) !important; font-family:var(--mono); font-size:.72rem !important; }

.consent__kat-kopf{
  display:flex; align-items:center; gap:9px;
  margin-bottom:7px; cursor:pointer;
}
.consent__kat-kopf input{
  width:19px; height:19px; flex:none;
  accent-color:var(--accent); cursor:pointer;
}
.consent__kat-kopf input:disabled{ cursor:default; opacity:.65; }
.consent__kat-kopf b{ font-size:.93rem; }
.consent__pflicht{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--fg-3);
  border:1px solid var(--line); border-radius:3px; padding:2px 6px;
}

.consent__knoepfe{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
/* Beide Schaltflaechen: gleiche Klasse, gleiche Groesse, gleiche Zeile. */
.consent__knopf{
  flex:1 1 150px;
  padding:10px 15px;
  font-size:.92rem;
}

.consent__mehr{
  background:none; border:0; padding:8px 5px;
  color:var(--fg-2); font:inherit; font-size:.83rem;
  text-decoration:underline; cursor:pointer;
  flex:0 0 auto;
}
.consent__mehr:hover{ color:var(--fg); }

@media (max-width:520px){
  .consent{ padding:0; }
  .consent__box{
    border-radius:var(--radius) var(--radius) 0 0;
    border-left:0; border-right:0; border-bottom:0;
    padding:16px 16px 14px;
  }
  .consent__knopf{ flex:1 1 100%; }
  .consent__mehr{ flex:1 1 100%; text-align:center; }
}


/* Zusatzzeile in den Hero-Kennzahlen (z. B. "Partnerbetriebe bundesweit") */
.hero-facts dd small{
  display:block;
  font-size:.78rem;
  font-weight:400;
  letter-spacing:0;
  color:var(--fg-3);
  margin-top:5px;
  max-width:22ch;
}

/* --- Fahrzeugart-Auswahl im Konfigurator --------------------------------- */
.konf__arten{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:26px; padding-bottom:24px;
  border-bottom:1px solid var(--line-soft);
}
.konf__art{
  padding:10px 17px;
  background:var(--bg-3);
  border:1px solid var(--line-stark);
  border-radius:100px;
  color:var(--fg-2);
  font-family:inherit; font-size:.91rem; font-weight:500;
  cursor:pointer;
  min-height:40px;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.konf__art:hover{ color:var(--fg); border-color:var(--fg-3); }
.konf__art.is-aktiv{
  background:var(--accent);
  border-color:var(--accent);
  color:#0b0c0e;
  font-weight:700;
}
@media (max-width:520px){
  .konf__art{ flex:1 1 calc(50% - 4px); text-align:center; font-size:.86rem; padding:10px 8px; }
}

/* --- Häufige Fragen ------------------------------------------------------ */
/* <details>/<summary> statt eigenem Aufklapp-Skript: funktioniert ohne
   JavaScript, ist von Haus aus tastaturbedienbar und wird von Screenreadern
   als aufklappbarer Bereich angesagt.                                       */

.faq{ margin-top:44px; border-top:1px solid var(--line-soft); }

.faq__punkt{ border-bottom:1px solid var(--line-soft); }

.faq__punkt summary{
  display:flex; align-items:center; gap:14px;
  padding:22px 4px;
  font-family:var(--display);
  font-size:1.22rem; font-weight:600;
  cursor:pointer;
  list-style:none;
  min-height:44px;
}
.faq__punkt summary::-webkit-details-marker{ display:none; }

/* Eigenes Pluszeichen, das sich beim Öffnen dreht */
.faq__punkt summary::before{
  content:"";
  flex:none;
  width:18px; height:18px;
  background:
    linear-gradient(var(--accent), var(--accent)) center/100% 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center/2px 100% no-repeat;
  transition:transform .2s ease;
}
.faq__punkt[open] summary::before{ transform:rotate(45deg); }

.faq__punkt summary:hover{ color:var(--accent-2); }

.faq__antwort{ padding:0 4px 24px 32px; }
.faq__antwort p{ color:var(--fg-2); font-size:.97rem; max-width:70ch; }
.faq__antwort p:last-child{ margin-bottom:0; }

@media (max-width:520px){
  .faq__punkt summary{ font-size:1rem; gap:11px; }
  .faq__antwort{ padding-left:29px; }
}

/* --- Lange Wörter und breite Tabellen ------------------------------------ */
/* Ohne overflow-wrap sprengen Komposita wie
   "Fahrzeug-Identifizierungsnummer" auf schmalen Displays ihren Kasten.     */
body{ overflow-wrap:break-word; }

/* Tabellen in den Rechtstexten dürfen scrollen, statt die Seite aufzureißen */
.doc table{ display:block; overflow-x:auto; max-width:100%; }
@media (min-width:640px){
  .doc table{ display:table; }
}

/* ==========================================================================
   Feinschliff — modernere Anmutung, ohne die Zurückhaltung aufzugeben
   ========================================================================== */

/* --- Icons in der Fahrzeugart-Leiste ------------------------------------- */
.konf__art{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px 9px 13px;
}
.konf__art svg{
  width:19px; height:19px; flex:none;
  opacity:.75;
  transition:opacity .15s ease;
}
.konf__art:hover svg{ opacity:1; }
.konf__art.is-aktiv svg{ opacity:1; }

@media (max-width:520px){
  .konf__art{ gap:7px; padding:9px 10px; }
  .konf__art svg{ width:17px; height:17px; }
}

/* --- Karten: leichtes Anheben beim Überfahren ---------------------------- */
/* 2 Pixel und ein kaum sichtbarer Schatten. Mehr wäre Effekthascherei —
   spürbar soll es sein, nicht auffällig.                                   */
.card,
.stufe,
.direkt__btn{
  transition:transform .18s cubic-bezier(.2,.7,.3,1),
             border-color .18s ease,
             background .18s ease;
}
.card:hover,
.stufe:hover{
  transform:translateY(-2px);
  border-color:var(--line);
}
.direkt__btn:hover{ transform:translateY(-1px); }

/* Das Symbolfeld in den Leistungskarten reagiert mit */
.card__icon{ transition:background .2s ease, color .2s ease; }
.card:hover .card__icon{ background:rgba(229,181,63,.16); }

/* --- Ziffern in der Ablaufliste ----------------------------------------- */
/* Vorher nur eine Zahl, jetzt in einem eigenen Feld — gibt der Liste
   Struktur, ohne bunt zu werden.                                          */
.steps li{ padding-left:82px; }
.steps li::before{
  left:24px; top:22px;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-3);
  border:1px solid var(--line);
  border-radius:9px;
  font-size:.86rem;
  color:var(--accent);
}
@media (max-width:520px){
  .steps li{ padding-left:70px; }
  .steps li::before{ left:18px; width:30px; height:30px; font-size:.8rem; }
}

/* --- Trennlinien zwischen den Abschnitten -------------------------------- */
/* Statt einer durchgehenden Linie eine, die zu den Rändern hin ausläuft.
   Fällt kaum auf, wirkt aber weniger nach Baukasten.                       */
section{ position:relative; border-top:0; }
section + section::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,
    transparent, var(--line-soft) 18%, var(--line-soft) 82%, transparent);
}

/* --- Fokus im Gold der Marke -------------------------------------------- */
.konf__art:focus-visible,
.faq__punkt summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

/* --- Slogan in der Kopfzeile --------------------------------------------- */
/* Greift die Gestaltung der Überschrift auf: Name in Gold, Aussage in Weiß.
   Bleibt beim Scrollen sichtbar und trägt die Marke durch die ganze Seite.  */
.kopf-slogan{
  margin:0;
  display:flex; align-items:baseline; gap:.45ch;
  font-family:var(--display);
  font-size:1.14rem;
  letter-spacing:.005em;
  white-space:nowrap;
  min-width:0;
}

.kopf-slogan em{
  font-family:var(--marke);
  font-style:italic;
  font-weight:800;
  font-size:1.24em;
  letter-spacing:.005em;
  color:var(--accent);
}

.kopf-slogan__strich{
  color:var(--fg-3);
  font-weight:400;
}

.kopf-slogan__text{
  font-weight:600;
  color:var(--fg);
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Auf großen Bildschirmen mit etwas Luft hinter dem Logo */
@media (min-width:881px){
  .kopf-slogan{ margin-left:22px; }
}

/* Auf schmalen Geräten mittig zwischen Logo und Menüknopf.
   Bei 375px stehen zwischen Logo und Menüknopf genau 169px zur Verfügung —
   der Slogan braucht ebenso viel. Innenabstand und der großzügige Abstand
   der Kopfzeile müssen deshalb schrumpfen, sonst wird der Text gekürzt.  */
@media (max-width:880px){
  .site-head__inner{ gap:12px; }
  .kopf-slogan{
    flex:1;
    justify-content:center;
    padding-inline:2px;
    font-size:.86rem;
  }
}

/* Gemessen bei 375px: zwischen Logo und Menüknopf sind 209px frei, der
   vollständige Slogan braucht 169px. Er bleibt also auch auf dem Handy
   komplett stehen — der goldene Name ist der Punkt daran.                 */

/* Erst unterhalb von 360px wird es zu eng. Dann weicht die Aussage und der
   Name bleibt, nicht umgekehrt.                                           */
@media (max-width:359px){
  .kopf-slogan__strich,
  .kopf-slogan__text{ display:none; }
}

/* Ganz schmale Geräte: Logo hat Vorrang */
@media (max-width:309px){
  .kopf-slogan{ display:none; }
}


/* ==========================================================================
   Projektseite
   -------------------------------------------------------------------------- */

#kopf{ padding-bottom:34px; border-top:0; }
#kopf h1{ margin-bottom:.3em; }
#neues{ padding-top:44px; }
.sec__unter{ color:var(--fg-3); max-width:62ch; margin:-.6em 0 2em; }


/* --- Neues --------------------------------------------------------------- */
.news-liste{ display:grid; gap:18px; max-width:74ch; }

.news{
  position:relative;
  padding-left:26px;
}
/* Der Punkt links ist die einzige Zierde hier — er ersetzt eine Überschrift,
   die sonst nur „Meldung" sagen würde. */
.news::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:9px; height:9px; border-radius:50%;
  background:var(--accent);
}
.news:not(:first-child)::before{ background:var(--line-stark); }

.news time{
  display:block;
  font-family:var(--display); font-size:.84rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--fg-3); margin-bottom:2px;
}
.news h3{ margin:0 0 .3em; font-size:1.14rem; }
.news p{ margin:0; color:var(--fg-2); }


/* --- Projektkarten ------------------------------------------------------- */
.projekt-liste{
  display:grid; gap:26px;
  grid-template-columns:1fr;
}
@media (min-width:780px){
  .projekt-liste{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1180px){
  .projekt-liste{ grid-template-columns:repeat(3, 1fr); }
}

.projekt{
  display:flex; flex-direction:column;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .18s ease, transform .18s ease;
}
.projekt:hover{ border-color:var(--line-stark); transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){
  .projekt{ transition:none; }
  .projekt:hover{ transform:none; }
}

.projekt__bild{
  margin:0;
  aspect-ratio:3 / 2;
  background:var(--bg-3);
  overflow:hidden;
}
.projekt__bild img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

.projekt__inhalt{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }

.projekt__marke{
  font-family:var(--display); font-size:.8rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .35em;
}
.projekt__inhalt h3{ margin:0 0 .35em; font-size:1.24rem; }

.projekt__meta{
  font-size:.87rem; color:var(--fg-3);
  margin:0 0 .9em;
  padding-bottom:.9em;
  border-bottom:1px solid var(--line);
}
.projekt__text{ color:var(--fg-2); margin:0 0 1.1em; }


/* --- Werte vorher/nachher ------------------------------------------------ */
/* Zwei Zeilen, die zweite hervorgehoben. Ein Balkendiagramm wäre hier
   Effekthascherei — die Zahlen sprechen für sich. */
.werte{
  margin:auto 0 0;
  display:grid; gap:2px;
  font-variant-numeric:tabular-nums;
}
.werte > div{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px;
  padding:7px 0;
}
.werte > div + div{ border-top:1px solid var(--line); }
.werte dt{
  font-size:.86rem; color:var(--fg-3);
  font-family:var(--display); font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
}
.werte dd{ margin:0; font-weight:600; }
.werte > div:last-child dd{
  color:var(--accent);
  font-family:var(--display); font-size:1.1rem; font-weight:700;
}

.projekt-leer{
  grid-column:1 / -1;
  text-align:center; color:var(--fg-3);
  padding:44px 24px;
  border:1px dashed var(--line-stark);
  border-radius:var(--radius);
  margin:0;
}

.hinweis-klein{
  margin-top:34px; padding-top:20px;
  border-top:1px solid var(--line);
  font-size:.86rem; color:var(--fg-3);
  max-width:88ch;
}


/* --- Abschluss ----------------------------------------------------------- */
.abschluss{
  display:flex; align-items:center; justify-content:space-between;
  gap:26px; flex-wrap:wrap;
}
.abschluss h2{ margin:0 0 .2em; }
.abschluss p{ margin:0; color:var(--fg-2); }


/* --- Der goldene Punkt in der Navigation --------------------------------- */
/* Erscheint nur, wenn auf der Projektseite etwas Frisches steht, und
   verschwindet nach 30 Tagen von selbst. Kein Zähler, kein Wort — ein
   Signal, das man wahrnimmt, ohne dass es sich aufdrängt. */
.nav a[data-neues]{ position:relative; }
.nav a[data-neues].ist-neu::after{
  content:"";
  position:absolute; top:.55em; right:-2px;
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
}
@media (max-width:900px){
  .nav a[data-neues].ist-neu::after{ top:50%; right:auto; left:-14px; margin-top:-3px; }
}


/* ==========================================================================
   Reiter
   --------------------------------------------------------------------------
   Leistungen, Stages und Fileservice beantworten dieselbe Frage. Drei
   Abschnitte untereinander kosten drei Bildschirmhöhen — als Reiter eine.

   Ohne JavaScript sind alle drei Felder sichtbar. Dann ist die Seite länger
   als gedacht, aber vollständig; das ist die richtige Richtung, in die ein
   Fehler ausschlagen soll.
   ========================================================================== */

.reiter{ margin-top:34px; }

.reiter__leiste{
  display:flex; gap:4px;
  border-bottom:1px solid var(--line);
  margin-bottom:34px;
  overflow-x:auto;
  scrollbar-width:none;
}
.reiter__leiste::-webkit-scrollbar{ display:none; }

.reiter__knopf{
  position:relative;
  padding:14px 22px 15px;
  background:transparent; border:0;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  font-family:var(--display); font-size:1.06rem; font-weight:600;
  letter-spacing:.01em;
  color:var(--fg-3);
  cursor:pointer; white-space:nowrap;
  transition:color .15s ease, border-color .15s ease;
}
.reiter__knopf:hover{ color:var(--fg); }

.reiter__knopf[aria-selected="true"]{
  color:var(--accent);
  border-bottom-color:var(--accent);
}

.reiter__knopf:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-4px;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}

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

/* Auf schmalen Geräten schrumpft die Beschriftung, statt umzubrechen —
   drei Reiter sollen nebeneinander bleiben. */
@media (max-width:560px){
  .reiter__knopf{ padding:13px 15px 14px; font-size:.98rem; }
}

.reiter__feld{ animation:reiter-ein .22s ease; }
@keyframes reiter-ein{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .reiter__feld{ animation:none; }
}

/* Die Überschrift des jeweiligen Themas steht jetzt im Reiter, nicht mehr
   über dem Abschnitt — der Vorspann darunter bleibt. */
.reiter__feld > .lead:first-child{ margin-top:0; }

/* Ohne JavaScript: alle Felder zeigen. Das Attribut hidden setzt erst das
   Skript; solange es nicht gelaufen ist, steht nichts im Weg. */
.reiter__feld[hidden]{ display:block; }
.js-an .reiter__feld[hidden]{ display:none; }

/* --- Die Hauptnavigation als Reiterleiste -------------------------------- */
/* Der Balken unter dem Punkt zeigt, in welchem Abschnitt man gerade ist.
   Er wandert beim Scrollen mit — dadurch wird aus einer Linkliste eine
   Orientierung. */
.nav a{ position:relative; }
.nav a::after{
  content:"";
  position:absolute; left:13px; right:13px; bottom:2px;
  height:2px; border-radius:2px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.nav a.ist-hier::after{ transform:scaleX(1); }
.nav a.ist-hier{ color:var(--fg); }
.nav a.btn::after{ display:none; }

@media (prefers-reduced-motion:reduce){
  .nav a::after{ transition:none; }
}
@media (max-width:900px){
  /* Im ausgeklappten Menü steht der Balken links statt unten */
  .nav a::after{
    left:0; right:auto; top:50%; bottom:auto;
    width:3px; height:20px; margin-top:-10px;
    transform:scaleY(0); transform-origin:center;
  }
  .nav a.ist-hier::after{ transform:scaleY(1); }
}


/* --- Menuepunkte, die nur im ausgeklappten Menue stehen ------------------- */
/* Oben in der Leiste waeren zehn Punkte zu viel - dort stehen die fuenf,
   die die meisten suchen. Wer das Menue oeffnet, will dagegen sehen, was es
   ueberhaupt gibt: dort steht jeder Abschnitt der Seite, auch Stages,
   Ablauf und die haeufigen Fragen. */
.nav__mehr{ display:none; }

@media (max-width:880px){
  .nav__mehr{ display:block; }
}

/* ==========================================================================
   Klappbare Abschnitte
   --------------------------------------------------------------------------
   Mit <details>/<summary> statt mit JavaScript. Der Browser kann das von
   Haus aus: Tastatur, Vorlesehilfen und die Suche im Browser funktionieren
   ohne eine Zeile Skript, und Suchmaschinen lesen den Inhalt trotzdem.

   Zugeklappt steht dort trotzdem ein Satz darüber, worum es geht — sonst
   wäre das Aufklappen ein Ratespiel.
   ========================================================================== */

.klapp{ border-top:1px solid var(--line); }
.klapp + .klapp{ border-top:0; }

.klapp__kopf{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px;
  padding:30px 0;
  cursor:pointer;
  list-style:none;
}
/* Das voreingestellte Dreieck weg — es kommt ein eigenes Zeichen rechts */
.klapp__kopf::-webkit-details-marker{ display:none; }
.klapp__kopf::marker{ content:""; }

.klapp__kopf:hover .klapp__titel{ color:var(--accent); }
.klapp__kopf:focus-visible{
  outline:2px solid var(--accent); outline-offset:4px;
  border-radius:var(--radius-sm);
}

.klapp__text{ display:block; }
.klapp__titel{
  margin:.15em 0 0;
  transition:color .15s ease;
}
.klapp__unter{
  display:block; margin-top:.5em;
  color:var(--fg-3); font-size:1rem;
  max-width:62ch;
}

/* Der Pfeil dreht sich beim Aufklappen. Mehr Bewegung braucht es nicht —
   die Zustandsänderung ist die Information, nicht die Animation. */
.klapp__zeichen{
  flex:none;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-stark); border-radius:50%;
  color:var(--fg-2);
  margin-top:4px;
  transition:transform .2s ease, border-color .15s ease, color .15s ease;
}
.klapp__zeichen svg{ width:20px; height:20px; }
.klapp[open] .klapp__zeichen{ transform:rotate(180deg); }
.klapp__kopf:hover .klapp__zeichen{ border-color:var(--accent); color:var(--accent); }

@media (prefers-reduced-motion:reduce){
  .klapp__zeichen, .klapp__titel{ transition:none; }
}

.klapp__inhalt{ padding-bottom:34px; }

/* Zugeklappt sitzt die Zeile über der Überschrift dichter am Titel */
.klapp .eyebrow{ margin-bottom:.2em; }

/* --- Was ich kann -------------------------------------------------------- */
/* Eine Liste statt Absätzen: Wer wissen will, ob jemand sein Steuergerät
   kann, überfliegt keinen Fließtext — er sucht die Bezeichnung seines
   Geräts. Die soll er finden, ohne zu lesen. */
.koennen{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:14px; }
.koennen li{
  padding-left:20px; position:relative;
  color:var(--fg-2); font-size:.97rem; line-height:1.5;
}
.koennen li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:2px; background:var(--accent); border-radius:2px;
}
.koennen strong{
  display:block; color:var(--fg);
  font-family:var(--display); font-weight:700; font-size:1.04rem;
  margin-bottom:1px;
}

/* --- Partner werden ------------------------------------------------------ */
/* Sitzt am Ende des Fileservice-Blocks, nicht als eigener Menüpunkt: Wer
   bis hierher gelesen hat, weiß bereits, worum es geht — jetzt fehlt nur
   noch die Einladung. */
.partner-ruf{
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
  margin-top:34px; padding:26px 28px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
}
.partner-ruf > div{ flex:1 1 380px; }
.partner-ruf h3{ margin:0 0 .45em; }
.partner-ruf p{ margin:0 0 .7em; color:var(--fg-2); max-width:64ch; }
.partner-ruf p:last-child{ margin-bottom:0; }
.partner-ruf__klein{ font-size:.88rem; color:var(--fg-3) !important; }
.partner-ruf .btn{ flex:none; }

@media (max-width:640px){
  .partner-ruf{ padding:22px; }
  .partner-ruf .btn{ width:100%; }
}


/* --- Sprachwahl ---------------------------------------------------------- */
/* Sie sitzt am Ende der Navigation, nicht daneben — die Sprache ist ein
   Navigationsziel wie jedes andere: sie führt auf eine andere Fassung
   derselben Seite.

   Auf breiten Bildschirmen steht sie hinter der Anfrage-Schaltfläche, auf
   schmalen unten im ausgeklappten Menü. So ist sie da, wo man sie sucht,
   und sonst nirgends.

   Flaggen statt Sprachkürzel auf Wunsch des Auftraggebers. Fachlich wäre
   "DE / EN / BS" richtiger — eine Sprache ist kein Land. Als Ausgleich
   trägt jede Schaltfläche den Sprachnamen als aria-label. */

.sprachwahl{
  display:flex; align-items:center; gap:1px;
  margin-left:10px; padding-left:12px;
  border-left:1px solid var(--line-soft);
  flex:none;
}

.sprachwahl a{
  display:flex; align-items:center; justify-content:center;
  width:24px; height:22px;
  padding:0; border-radius:3px;
  opacity:.3;
  filter:grayscale(.45);
  transition:opacity .15s ease, filter .15s ease;
}
.sprachwahl a:hover{ opacity:.7; filter:grayscale(0); background:none; }
.sprachwahl a[aria-current="true"]{ opacity:.9; filter:grayscale(0); }

.sprachwahl svg{
  width:15px; height:11px;
  display:block; border-radius:1px;
}

.sprachwahl a:focus-visible{
  outline:1px solid var(--accent); outline-offset:2px;
  opacity:1; filter:none;
}

@media (prefers-reduced-motion:reduce){
  .sprachwahl a{ transition:none; }
}

/* Im ausgeklappten Menü: eine eigene Zeile unten, mit Abstand zur
   Schaltfläche darüber. Die Klickflächen werden größer, damit man sie
   mit dem Daumen trifft — die Flaggen selbst bleiben klein. */
@media (max-width:880px){
  .sprachwahl{
    margin:18px 0 0; padding:16px 8px 0;
    border-left:0; border-top:1px solid var(--line-soft);
    justify-content:flex-start; gap:6px;
  }
  .sprachwahl a{ width:44px; height:38px; opacity:.45; }
  .sprachwahl a[aria-current="true"]{ opacity:1; }
  .sprachwahl svg{ width:22px; height:16px; }
}


/* ==========================================================================
   Code-Akzente
   --------------------------------------------------------------------------
   Aus dem Logo uebernommen: die eckigen Winkel um den Schriftzug und die
   kleinen Zeichen darin - "</>" und "{}". Beides sitzt hier so zurueckhaltend
   wie dort: klein, gedaempft, nie lauter als der Text, den es einrahmt.

   Alle diese Zeichen sind Zierrat und tragen aria-hidden - eine
   Vorlesesoftware wuerde sonst "kleiner Schrägstrich größer" vorlesen.
   ========================================================================== */

/* --- Eckwinkel um den Namen in der Ueberschrift -------------------------- */
.hero h1 em{
  position:relative;
  padding:0 .34em;
  /* Der Name steht im Logo in einer Klammer, nicht kursiv. Hier bleibt die
     Kursive, weil sie den Namen im Fliesstext heraushebt - die Klammer
     kommt dazu. */
}
.hero h1 em::before,
.hero h1 em::after{
  content:"";
  position:absolute;
  top:.02em; bottom:.1em;
  width:.2em;
  border:2px solid var(--accent);
  opacity:.4;
  pointer-events:none;
}
.hero h1 em::before{ left:0;  border-right:0; }
.hero h1 em::after { right:0; border-left:0; }

/* Auf schmalen Bildschirmen wird die Ueberschrift umgebrochen; dann sitzen
   die Winkel an den Zeilenenden statt am Namen. Ab hier ohne. */
@media (max-width:420px){
  .hero h1 em{ padding:0; }
  .hero h1 em::before,
  .hero h1 em::after{ display:none; }
}

/* --- Die Zeichen in der Eyebrow-Zeile ------------------------------------ */
.eyebrow__zeichen{
  font-family:var(--mono);
  color:var(--accent);
  opacity:.5;
  letter-spacing:0;         /* die Eyebrow ist gesperrt - "</>" nicht */
  font-size:.92em;
}
.eyebrow__zeichen--ende{ margin-left:.15em; }

/* Der Trenner war ein Mittelpunkt. Ein Schraegstrich passt zu den Zeichen
   davor und dahinter - und ist das, was in einem Pfad zwischen zwei
   Angaben steht. */
.eyebrow__tr{
  color:var(--accent);
  opacity:.38;
  font-weight:400;
}