@charset "utf-8";
/* ==========================================================================
   AutoReader – Stylesheet
   Design-System aus dem Mockup (CarObserver AutoReader Design System).
   Schrift: Titillium Web, selbst gehostet (kein Google-CDN -> DSGVO).
   ========================================================================== */

/* ---------- Schrift ---------- */
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/titilliumweb-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/titilliumweb-400-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/titilliumweb-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/titilliumweb-600-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/titilliumweb-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/titilliumweb-700-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- Design-Token ---------- */
:root{
  --co-navy:#00213A; --co-steel:#47799F; --co-steel-dark:#3A6688; --co-steel-press:#325A78;
  --co-logo-blue:#074787; --co-logo-slate:#657785; --co-logo-ink:#1C1C1C; --co-sky:#4BB1FF;
  --co-white:#FFFFFF; --co-tint:#F3F7FB; --co-tint-deep:#ECF1F8;
  /* Update-Aktionen: 5,22:1 auf Weiss, passt im Sattgrad zum Steel-Blau */
  --co-green:#2E7A52; --co-green-hover:#276A46; --co-green-press:#205839;
  --co-grey-200:#EAEAEA; --co-grey-300:#E6E6E6; --co-grey-500:#ADADAD; --co-grey-600:#777777;

  --text-heading:var(--co-navy); --text-body:var(--co-navy);
  --text-secondary:var(--co-grey-600); --text-meta:var(--co-grey-500);
  --surface-band:var(--co-tint); --surface-card:var(--co-white);
  --border-hairline:var(--co-grey-300); --border-divider:var(--co-grey-200);
  --action-fill:var(--co-steel); --action-fill-hover:var(--co-steel-dark); --action-fill-press:var(--co-steel-press);

  --font-core:"Titillium Web",-apple-system,"Segoe UI",sans-serif;
  --w-regular:400; --w-semibold:600; --w-bold:700;

  /* Fluide Typo: Mockup-Werte als Obergrenze, mobil kleiner */
  --size-hero:clamp(34px,5.2vw,62.5px);   --lh-hero:1.2;
  --size-h2:clamp(28px,4vw,50px);         --lh-h2:1.2;
  --size-h3:clamp(24px,2.6vw,31.25px);    --lh-h3:1.28;
  --size-h4:clamp(20px,1.9vw,25px);       --lh-h4:1.2;
  --size-card-title:clamp(22px,2.1vw,26.25px); --lh-card-title:1.35;
  --size-body:clamp(17px,1.35vw,20px);    --lh-body:1.5;
  --size-body-sm:clamp(16px,1.25vw,18.75px); --lh-body-sm:1.42;
  --size-excerpt:17.5px;                  --lh-excerpt:26px;
  --size-utility:16.25px;                 --lh-utility:24px;
  --size-meta:15px;                       --lh-meta:22px;
  --size-button-sm:clamp(17px,1.3vw,20px);

  --space-1:5px; --space-2:10px; --space-3:12.5px; --space-4:20px; --space-5:25px;
  --space-6:30px; --space-7:37.5px; --space-8:50px; --space-9:62.5px; --space-10:75px;
  --space-11:100px; --space-12:137.5px;

  --radius-xs:5px; --radius-sm:10px; --radius-md:25px; --radius-full:999px;
  --shadow-card:0 6px 24px rgba(0,0,0,.10); --shadow-card-hover:0 12px 34px rgba(0,0,0,.14);
  --transition-base:200ms ease;

  --container-max:1440px; --grid-gap:37.5px; --card-pad:37.5px;
  --pad-x:var(--space-8); --pad-y:var(--space-10);
}
@media (max-width:900px){ :root{ --pad-x:var(--space-5); --pad-y:var(--space-8); --grid-gap:var(--space-6); --card-pad:var(--space-6); } }
@media (max-width:560px){ :root{ --pad-x:var(--space-4); --pad-y:var(--space-7); } }

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--co-white);color:var(--text-body);
  font-family:var(--font-core);font-size:var(--size-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{color:var(--co-navy);transition:color var(--transition-base)}
a:hover{color:var(--co-sky)}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--co-sky);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Layout ---------- */
.wrap{max-width:var(--container-max);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.section{padding-top:var(--pad-y);padding-bottom:var(--pad-y)}
.section--band{background:var(--surface-band)}
.section--hairline{border-top:1px solid var(--border-hairline)}
.stack>*+*{margin-top:var(--space-6)}
.stack-sm>*+*{margin-top:var(--space-4)}

.grid{display:grid;gap:var(--grid-gap)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--split{grid-template-columns:1.15fr .85fr;gap:var(--space-11);align-items:start}
.grid--hero{grid-template-columns:1.05fr .95fr;gap:var(--space-11);align-items:center}
@media (max-width:1100px){ .grid--4{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){
  .grid--2,.grid--3,.grid--4,.grid--split,.grid--hero{grid-template-columns:1fr;gap:var(--space-7)}
}

/* ---------- Typografie ---------- */
.h1{font-size:var(--size-hero);line-height:var(--lh-hero);font-weight:var(--w-bold);letter-spacing:-.005em;
  text-wrap:balance;hyphens:manual}
.h2{font-size:var(--size-h2);line-height:var(--lh-h2);font-weight:var(--w-bold);text-wrap:balance;hyphens:manual}
.h3{font-size:var(--size-h3);line-height:var(--lh-h3);font-weight:var(--w-bold);text-wrap:balance}
.h4{font-size:var(--size-h4);line-height:var(--lh-h4);font-weight:var(--w-bold);text-wrap:balance}
.lead{font-size:var(--size-body);line-height:var(--lh-body);text-wrap:pretty}
.small{font-size:var(--size-body-sm);line-height:var(--lh-body-sm)}
.meta{font-size:var(--size-meta);line-height:var(--lh-meta);color:var(--text-meta)}
.muted{color:var(--text-secondary)}
.measure{max-width:820px}
.measure-wide{max-width:1100px}
.h5{font-size:var(--size-body);line-height:var(--lh-body);font-weight:var(--w-bold)}
.bold{font-weight:var(--w-bold)}
.accent{color:var(--co-steel)}

/* Aufzaehlung in Fliesstexten. Das Reset nimmt ul den Punkt, hier kommt er zurueck. */
.list{padding-left:1.2em;list-style:disc}
.list li+li{margin-top:var(--space-2)}

/* Rechtstexte (AGB, Datenschutz): viele kurze Absaetze hintereinander. Das
   Reset setzt alle Margins auf null, ohne Abstaende klebt hier alles zusammen. */
.legal p,.legal ul{margin-top:var(--space-4)}
.legal dl{margin-top:var(--space-5)}
.legal h2{margin-top:var(--space-9)}
.legal h3{margin-top:var(--space-7)}
.legal>*:first-child{margin-top:0}

/* Schaltflaeche, die im Satz wie ein Link aussehen soll. */
.linkish{border:0;background:none;padding:0;cursor:pointer;text-decoration:underline;
  font-family:inherit;font-size:inherit;line-height:inherit;color:var(--co-navy)}
.linkish:hover{color:var(--co-sky)}

code{font-family:Consolas,"Courier New",monospace;font-size:.92em;
  padding:1px 5px;border-radius:var(--radius-xs);background:var(--co-tint-deep)}

/* Keine automatische Silbentrennung: die Woerterbuecher sind je nach Browser und
   Betriebssystem da oder eben nicht, darauf darf das Layout nicht bauen. Lange
   Komposita bekommen stattdessen ein weiches Trennzeichen im Text.
   Unter 560px bleibt der harte Umbruch als letzte Reissleine gegen Querscrollen. */
@media (max-width:560px){
  .h1,.h2,.h3,.h4,.card__title,.tile__title{overflow-wrap:break-word}
}

/* ---------- Kopfzeile ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--co-white);border-bottom:1px solid var(--border-hairline)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3) var(--space-6)}
.logo{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) 0;text-decoration:none;
  font-weight:var(--w-bold);font-size:clamp(24px,2.6vw,34px);line-height:1.3;color:var(--co-logo-ink);letter-spacing:-.005em}
.logo:hover{color:var(--co-logo-ink)}
.logo b{color:var(--co-logo-blue);font-weight:inherit}

/* Servicezeile über der Hauptleiste */
.topbar{background:var(--co-tint);border-bottom:1px solid var(--border-hairline);font-size:var(--size-meta)}
.topbar__inner{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;
  gap:var(--space-2) var(--space-4);padding-top:7px;padding-bottom:7px}
.topbar a{display:inline-flex;align-items:center;gap:6px;color:var(--co-grey-600);text-decoration:none;white-space:nowrap}
.topbar a:hover{color:var(--co-steel)}
.topbar__sep{color:var(--co-grey-500)}
@media (max-width:560px){ .topbar__inner{justify-content:flex-start} .topbar__sep{display:none} }

.nav-toggle{display:none;align-items:center;gap:var(--space-2);background:none;border:1px solid var(--border-hairline);
  border-radius:var(--radius-xs);padding:10px 14px;font:inherit;font-size:var(--size-utility);color:var(--co-navy);cursor:pointer}
.nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-3) var(--space-6);padding-bottom:var(--space-2)}
.nav>a{font-size:var(--size-body-sm);line-height:var(--lh-body-sm);text-decoration:none;white-space:nowrap}
.nav>a[aria-current="page"]{font-weight:var(--w-bold);color:var(--co-steel)}
.nav__actions{display:inline-flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
@media (max-width:1300px){ .nav{gap:var(--space-3) var(--space-4)} .nav>a{font-size:var(--size-utility)} }
@media (max-width:1080px){
  .nav-toggle{display:inline-flex}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;justify-content:flex-start;
       gap:var(--space-4);padding:var(--space-4) 0 var(--space-6);border-top:1px solid var(--border-hairline)}
  .site-header.is-open .nav{display:flex}
  .nav__actions{flex-direction:column;align-items:stretch;gap:var(--space-3);margin-top:var(--space-2)}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:56px;padding:0 var(--space-6);border:0;border-radius:var(--radius-xs);
  background:var(--action-fill);color:var(--co-white);text-decoration:none;cursor:pointer;
  font-family:var(--font-core);font-size:var(--size-button-sm);line-height:1.2;font-weight:var(--w-semibold);
  transition:background var(--transition-base)}
.btn:hover{background:var(--action-fill-hover);color:var(--co-white)}
.btn:active{background:var(--action-fill-press)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn--lg{min-height:70px;padding:0 var(--space-7);font-size:clamp(18px,1.6vw,25px)}
.btn--sm{min-height:44px;padding:0 var(--space-5);font-size:var(--size-utility);gap:8px}
.btn--ghost{background:transparent;color:var(--co-navy);border:1px solid var(--border-hairline)}
.btn--ghost:hover{background:var(--co-tint);color:var(--co-navy);border-color:var(--co-steel)}
.btn--ghost.is-active{border-color:var(--co-steel);background:var(--co-tint);color:var(--co-steel)}
.btn--green{background:var(--co-green)}
.btn--green:hover{background:var(--co-green-hover);color:var(--co-white)}
.btn--green:active{background:var(--co-green-press)}
.btn--dark{background:var(--co-logo-ink)}
.btn--dark:hover{background:#333}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5)}
.link-arrow{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none}

/* ---------- Karten ---------- */
.card{background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);
  padding:var(--card-pad);display:flex;flex-direction:column;gap:var(--space-5)}
.card--flat{box-shadow:none;background:var(--surface-band)}
.card__title{font-size:var(--size-card-title);line-height:var(--lh-card-title);font-weight:var(--w-bold);
  color:var(--co-logo-ink)}
.card__title b{color:var(--co-logo-blue);font-weight:inherit}
.card__title i{font-style:normal;color:var(--co-steel)}

.card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:auto}
.card__actions .btn{flex:1 1 auto;min-height:50px;padding:0 var(--space-5);font-size:var(--size-utility)}

/* Merkmalsliste mit Haken */
.ticks{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-4);
  border-top:1px solid var(--border-divider);font-size:var(--size-body-sm);line-height:var(--lh-body-sm)}
.ticks li{display:flex;gap:var(--space-3);align-items:flex-start}
.ticks svg{flex:0 0 auto;margin-top:.35em;color:var(--co-steel)}

/* Schrittzahlen */
.step__num{font-size:var(--size-h3);line-height:var(--lh-h3);font-weight:var(--w-bold);color:var(--co-steel)}

/* Definitionsliste "Auf einen Blick" */
.facts{display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--size-body-sm);line-height:var(--lh-body-sm)}
.facts>div{display:grid;grid-template-columns:150px 1fr;gap:var(--space-4)}
.facts>div+div{border-top:1px solid var(--border-hairline);padding-top:var(--space-3)}
.facts dt{color:var(--co-grey-600)}
.facts dd{margin:0}
@media (max-width:560px){ .facts>div{grid-template-columns:1fr;gap:2px} }

/* ---------- Live-Panel (Hero) ---------- */
@keyframes arIn{0%{opacity:0;transform:translateY(-12px)}10%{opacity:1;transform:none}85%{opacity:1;transform:none}100%{opacity:0;transform:translateY(6px)}}
@keyframes arPulse{0%,100%{opacity:1}50%{opacity:.25}}
.dot{display:block;width:9px;height:9px;border-radius:var(--radius-full);background:var(--co-steel);animation:arPulse 2s ease-in-out infinite}
.eyebrow{display:flex;align-items:center;gap:var(--space-3);font-size:var(--size-utility);line-height:var(--lh-utility);color:var(--co-logo-slate)}
.live{background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden}
.live__head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-7);border-bottom:1px solid var(--border-divider)}
.live__body{padding:var(--space-4) var(--space-7) var(--space-6)}
/* Der Ticker haengt jetzt an assets/js/ticker.js. Kein Dauerloop mehr per CSS,
   die Zeile bekommt beim Einhaengen kurz .live__row--neu und blendet ein. */
.live__row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) 0;transition:opacity 260ms ease,transform 260ms ease}
.live__row--neu{opacity:0;transform:translateY(-10px)}
.live__row+.live__row{border-top:1px solid var(--border-divider)}
/* Jede Zeile bleibt zweizeilig, sonst springt die Karte bei jedem Zulauf.
   Lange Typbezeichnungen werden deshalb abgeschnitten statt umgebrochen. */
.live__row>div:first-child{min-width:0;flex:1}
.live__row>div:first-child>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live__right{text-align:right;white-space:nowrap;flex:0 0 auto}
.live__price{font-size:var(--size-body-sm);font-weight:var(--w-bold);white-space:nowrap}
.live__age{margin-top:2px}
/* Kennzeichnung, dass die Karte nur ein Beispiel zeigt und nicht die Software. */
.live__tag{display:inline-block;padding:2px var(--space-3);border-radius:var(--radius-full);
  background:var(--co-tint-deep);color:var(--co-navy);font-size:var(--size-meta);
  font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase}
.live__note{margin:0;padding:var(--space-4) var(--space-7) var(--space-5);
  border-top:1px solid var(--border-divider);
  color:var(--text-secondary);font-size:var(--size-meta);line-height:var(--lh-meta)}
/* Auf dem Handy sind 37,5 Pixel Rand je Seite zu viel: die Metazeile wird sonst
   mitten in der Laufleistung abgeschnitten. ticker.js setzt dort ausserdem zwei
   Metazeilen statt einer, siehe .live__row--zwei. */
@media (max-width:560px){
  .live__head,.live__note{padding-left:var(--space-4);padding-right:var(--space-4)}
  .live__body{padding-left:var(--space-4);padding-right:var(--space-4)}
}
@media (prefers-reduced-motion:reduce){
  .dot,.live__row{animation:none;transition:none}
  .live__row--neu{opacity:1;transform:none}
}

/* ---------- Vergleichstabelle ----------
   1:1 nach der Design-System-Komponente "CompareTable":
   weisse Karte mit Radius und Schatten, jede Zelle 20/25 px, Trennlinie oben,
   Gruppenzeile in der Bandfarbe. Der Scroll-Container kommt zusaetzlich dazu,
   weil die Komponente selbst keine mobile Behandlung vorsieht. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-md)}
table.compare{width:100%;min-width:640px;border-collapse:collapse;overflow:hidden;
  background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
table.compare th,table.compare td{padding:var(--space-4) var(--space-5);
  font-size:var(--size-body);line-height:var(--lh-body);border-top:1px solid var(--border-divider)}
table.compare thead th{border-top:0;font-weight:var(--w-bold);color:var(--co-navy)}
table.compare thead th:first-child{text-align:left}
table.compare thead th:not(:first-child){text-align:center}
table.compare tbody th[scope="row"]{text-align:left;font-weight:var(--w-regular)}
table.compare tbody td{text-align:center}
table.compare .compare__group th{background:var(--surface-band);font-weight:var(--w-bold);
  font-size:var(--size-body-sm);text-align:left}
table.compare .yes{color:var(--co-steel)}
table.compare .no{color:var(--co-grey-300)}
/* Dritter Zustand: keine belegte Angabe. Bewusst leiser als das Minus. */
table.compare .unklar{color:var(--co-grey-500)}

/* Aufklappzeile in der Vergleichstabelle. Die Eintraege sind eigene
   Tabellenzeilen, der Haken sitzt deshalb in derselben Spalte wie sonst. */
.expand__btn{display:inline-flex;align-items:center;gap:var(--space-3);
  padding:0;border:0;background:none;cursor:pointer;font:inherit;color:var(--co-navy);text-align:left}
.expand__btn::after{content:'';width:7px;height:7px;border-right:2px solid var(--co-steel);
  border-bottom:2px solid var(--co-steel);transform:rotate(45deg);margin-top:-3px}
.expand__btn[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:2px}
.expand__zahl{padding:1px var(--space-3);border-radius:var(--radius-full);
  background:var(--surface-band);color:var(--text-secondary);
  font-size:var(--size-meta);font-weight:var(--w-regular)}
table.compare tr[hidden]{display:none}
table.compare .compare__unter th[scope="row"]{padding-left:calc(var(--space-5) + var(--space-6));
  font-size:var(--size-meta);color:var(--text-secondary)}
table.compare .compare__unter th,table.compare .compare__unter td{border-top:1px solid var(--border-divider);
  padding-top:var(--space-3);padding-bottom:var(--space-3)}

/* ---------- Formulare ---------- */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field label{font-size:var(--size-body-sm);line-height:var(--lh-body-sm)}
.field .req{color:var(--co-steel)}
.field input,.field select,.field textarea{
  font-family:var(--font-core);font-size:var(--size-body-sm);line-height:1.4;color:var(--co-navy);
  padding:12px 14px;border:1px solid var(--border-hairline);border-radius:var(--radius-xs);
  background:var(--co-white);width:100%;transition:border-color var(--transition-base)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--co-steel);outline:none;box-shadow:0 0 0 3px rgba(71,121,159,.18)}
.field textarea{min-height:140px;resize:vertical}
.choice{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.choice label{display:inline-flex;align-items:center;gap:var(--space-2);
  padding:10px 22px;border:1px solid var(--border-hairline);border-radius:var(--radius-xs);cursor:pointer;
  font-size:var(--size-body-sm);transition:border-color var(--transition-base),background var(--transition-base)}
.choice label:hover{border-color:var(--co-steel)}
.choice input{accent-color:var(--co-steel)}
.choice input:checked+span{font-weight:var(--w-bold)}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2) var(--space-4)}
.checks label{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--size-body-sm);line-height:1.35}
.checks input{margin-top:.2em;width:18px;height:18px;accent-color:var(--co-steel);flex:0 0 auto}
@media (max-width:560px){ .checks{grid-template-columns:1fr} }
.consent{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--size-body-sm);line-height:var(--lh-body-sm);
  padding-top:var(--space-4);border-top:1px solid var(--border-divider)}
.consent input{width:20px;height:20px;accent-color:var(--co-steel);flex:0 0 auto;margin-top:.15em}
.notice{padding:var(--space-5);background:var(--surface-band);border-radius:var(--radius-sm)}
.notice--warn{background:#FDF1F1;border:1px solid #E9C4C4}
.notice--ok{background:#EDF6EF;border:1px solid #BFDFC6}
.field-alt{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important}
/* Andere Technik als .field-alt: Nullgroesse und Beschnitt statt Verschiebung.
   position:absolute ist noetig, sonst erzeugt das Feld eine Luecke im Flex-Layout. */
.field-meta{position:absolute!important;width:0!important;height:0!important;
  overflow:hidden!important;opacity:0!important;clip-path:inset(50%)!important;
  margin:0!important;padding:0!important;border:0!important}
.field-opt{display:none!important}

/* ---------- Fußzeile ---------- */
.site-footer{background:var(--co-white);border-top:1px solid var(--border-hairline)}
.site-footer__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--space-8);
  padding-top:var(--space-9);padding-bottom:var(--space-8)}
@media (max-width:900px){ .site-footer__cols{grid-template-columns:1fr;gap:var(--space-7)} }
.site-footer h2{font-weight:var(--w-bold);font-size:var(--size-h4);line-height:var(--lh-h4);margin-bottom:var(--space-3)}
.site-footer nav{display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--size-body-sm)}
.site-footer nav a{text-decoration:none}
.site-footer__legal{border-top:1px solid var(--border-divider);padding-top:var(--space-6);padding-bottom:var(--space-6);
  display:grid;grid-template-columns:1fr auto;gap:var(--space-6);align-items:end;
  font-size:var(--size-meta);line-height:var(--lh-meta);color:var(--co-grey-600)}
@media (max-width:900px){ .site-footer__legal{grid-template-columns:1fr} }
.site-footer__bar{border-top:1px solid var(--border-hairline)}
.site-footer__bar div{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-5);
  padding-top:var(--space-5);padding-bottom:var(--space-5);font-size:var(--size-meta);color:var(--text-meta)}
.site-footer__bar img{height:34px;width:auto}

/* ---------- FAQ ----------
   Abstaende 1:1 aus dem Mockup: 50 px zwischen den Zeilen, 100 px zwischen den
   Spalten, aber nur 12,5 px zwischen Frage und Antwort. Dieses Verhaeltnis macht
   die Gruppierung lesbar - mit gleichmaessigen Abstaenden verschwimmt alles. */
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));
  gap:var(--space-8) var(--space-11)}
@media (max-width:640px){ .faq-grid{grid-template-columns:1fr;gap:var(--space-7)} }
.faq-item{display:flex;flex-direction:column;gap:var(--space-3)}
.faq-item h3{font-size:var(--size-h4);line-height:var(--lh-h4);font-weight:var(--w-bold)}
.faq-item p{font-size:var(--size-body-sm);line-height:var(--lh-body-sm)}

/* ---------- Produktkacheln (CarObserver) ----------
   Ganze Kachel ist der Link - so wie im Mockup. */
.tile{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-7);
  background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);
  text-decoration:none;color:var(--co-navy);transition:box-shadow var(--transition-base),transform var(--transition-base)}
.tile:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px);color:var(--co-navy)}
.tile__title{font-size:var(--size-h4);line-height:var(--lh-h4);font-weight:var(--w-bold);
  overflow-wrap:break-word}
.tile__text{font-size:var(--size-body-sm);line-height:var(--lh-body-sm);color:var(--text-secondary);
  overflow-wrap:break-word}
/* Lange Woerter wie "Bestandsmanagement" sprengten die Kachel: ein inline-flex
   schrumpft seinen Textteil von sich aus nicht unter die Wortbreite. flex-wrap
   laesst den Pfeil notfalls umbrechen, overflow-wrap erlaubt den Umbruch im Wort. */
.tile__link{margin-top:auto;padding-top:var(--space-4);display:inline-flex;align-items:center;gap:6px;
  flex-wrap:wrap;overflow-wrap:anywhere;
  font-size:var(--size-body-sm);line-height:var(--lh-body-sm);color:var(--co-steel)}
@media (prefers-reduced-motion:reduce){ .tile:hover{transform:none} }

/* ---------- Marktreport ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap)}
@media (max-width:1100px){ .kpis{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .kpis{grid-template-columns:1fr} }
.kpi{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--card-pad);
  background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.kpi__value{font-size:clamp(30px,3.4vw,50px);line-height:1.1;font-weight:var(--w-bold);color:var(--co-navy)}
.kpi__value.is-empty{color:var(--co-grey-500)}
.kpi__label{font-size:var(--size-body-sm);line-height:var(--lh-body-sm);color:var(--text-secondary)}

/* Datentabellen (Marken, Budget, Top-Fahrzeuge) */
.table-scroll--card{background:var(--co-white);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
table.data{width:100%;min-width:560px;border-collapse:collapse;font-size:var(--size-body-sm)}
table.data th,table.data td{padding:var(--space-3) var(--space-4);text-align:left;vertical-align:top}
table.data thead th{position:sticky;top:0;background:var(--co-white);border-bottom:2px solid var(--co-navy);
  font-weight:var(--w-bold);white-space:nowrap}
table.data td:not(:first-child),table.data th:not(:first-child){text-align:right;white-space:nowrap}
table.data tbody tr+tr td,table.data tbody tr+tr th{border-top:1px solid var(--border-divider)}
table.data tbody th{font-weight:var(--w-regular)}
table.data .is-empty{color:var(--co-grey-500)}
table.data tfoot td,table.data tfoot th{border-top:2px solid var(--co-navy);font-weight:var(--w-bold)}

/* Anteilsbalken Händler/Privat */
.bar+.bar{margin-top:var(--space-5)}
.bar__head{display:flex;justify-content:space-between;gap:var(--space-4);
  font-size:var(--size-body-sm);line-height:var(--lh-body-sm)}
.bar__head b{font-weight:var(--w-bold)}
.bar__track{margin-top:var(--space-2);height:14px;border-radius:var(--radius-full);
  background:var(--co-tint-deep);overflow:hidden}
.bar__fill{height:100%;width:0;border-radius:var(--radius-full);background:var(--co-steel);
  transition:width var(--transition-base)}
.bar__fill--alt{background:var(--co-logo-slate)}

/* Methodik-Liste */
.method{display:flex;flex-direction:column;gap:var(--space-5)}
.method>div{display:grid;grid-template-columns:240px 1fr;gap:var(--space-6)}
.method>div+div{border-top:1px solid var(--border-hairline);padding-top:var(--space-5)}
.method dt{font-weight:var(--w-bold)}
.method dd{margin:0;font-size:var(--size-body-sm);line-height:var(--lh-body-sm)}
@media (max-width:760px){ .method>div{grid-template-columns:1fr;gap:var(--space-2)} }

/* Zitierblock */
.cite{padding:var(--space-6);background:var(--co-white);border-radius:var(--radius-sm);
  border-left:4px solid var(--co-steel);font-size:var(--size-body-sm);line-height:var(--lh-body-sm)}

/* Hinweis auf noch fehlende Zahlen */
.pending{display:inline-block;padding:2px 10px;border-radius:var(--radius-full);
  background:var(--co-tint-deep);color:var(--co-grey-600);font-size:var(--size-meta);line-height:1.8}

/* ---------- Cookie-Einwilligung ---------- */
/* Siehe _inc/consent.php und assets/js/consent.js.
   Muss vor den Regeln stehen: eine eigene display-Angabe schlaegt sonst das
   Attribut hidden, und Leiste, Dialog und Reiter waeren von Anfang an sichtbar. */
.consent [hidden],.consent[hidden]{display:none!important}

.consent__bar{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--co-white);border-top:1px solid var(--border-hairline);
  box-shadow:0 -6px 24px rgba(0,0,0,.10)}
.consent__bar-inner{max-width:var(--container-max);margin:0 auto;
  padding:var(--space-5) var(--pad-x);
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-5);justify-content:space-between}
.consent__text{flex:1 1 460px;min-width:0;
  font-size:var(--size-meta);line-height:var(--lh-meta);color:var(--text-secondary)}
.consent__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3)}
.consent__link{border:0;background:none;padding:0;cursor:pointer;text-decoration:underline;
  font-family:var(--font-core);font-size:var(--size-meta);color:var(--text-secondary)}
.consent__link:hover{color:var(--co-steel)}
@media (max-width:700px){
  .consent__actions{width:100%}
  .consent__actions .btn{flex:1 1 auto}
}

.consent__backdrop{position:fixed;inset:0;z-index:70;background:rgba(0,33,58,.55)}
.consent__dialog{position:fixed;z-index:80;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(720px,calc(100vw - var(--space-6)));max-height:86vh;display:flex;flex-direction:column;
  background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card-hover)}
.consent__dialog-head{display:flex;align-items:flex-start;gap:var(--space-4);
  padding:var(--space-6) var(--space-6) var(--space-4)}
.consent__dialog-head .h4{flex:1}
.consent__x{border:0;background:none;padding:6px;margin:-6px;cursor:pointer;color:var(--text-secondary);
  line-height:0;border-radius:var(--radius-xs)}
.consent__x:hover{color:var(--co-navy);background:var(--co-tint)}
.consent__dialog-body{overflow-y:auto;padding:0 var(--space-6);
  border-top:1px solid var(--border-divider);padding-top:var(--space-5)}
.consent__dialog-body>*+*{margin-top:var(--space-4)}
.consent__dialog-fuss{display:flex;flex-wrap:wrap;gap:var(--space-3);
  padding:var(--space-5) var(--space-6) var(--space-6);
  border-top:1px solid var(--border-divider);margin-top:var(--space-5)}
.consent__kat{padding:var(--space-4);background:var(--surface-band);border-radius:var(--radius-sm)}
.consent__kat-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  margin-bottom:var(--space-2)}
.consent__immer{font-size:var(--size-meta);color:var(--text-secondary)}
.consent__schalter{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer}
.consent__schalter input{width:20px;height:20px;margin:0;cursor:pointer;accent-color:var(--co-steel)}

.consent__reiter{position:fixed;z-index:55;right:var(--space-4);bottom:var(--space-4);
  display:inline-flex;align-items:center;gap:8px;padding:9px var(--space-4);cursor:pointer;
  background:var(--co-white);color:var(--text-secondary);
  border:1px solid var(--border-hairline);border-radius:var(--radius-full);
  box-shadow:var(--shadow-card);font-family:var(--font-core);font-size:var(--size-meta);line-height:1}
.consent__reiter:hover{color:var(--co-steel);border-color:var(--co-steel)}

/* ---------- Druck ---------- */
@media print{
  .site-header,.nav,.btn,.live,.consent{display:none!important}
  body{font-size:11pt}
  .section{padding:0 0 1.5em}
}