/* Affindly, Richtung C Graphit. Werte aus Superbrain/00-wer-wir-sind/brand-sheet.json und visual-playbook.md */
@font-face{font-family:"Archivo Wide";src:url(/fonts/Archivo-800-125.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Archivo Semi";src:url(/fonts/Archivo-800-112.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/InstrumentSans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/InstrumentSans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/InstrumentSans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"DM Mono";src:url(/fonts/DMMono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url(/fonts/DMMono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --graphit:#141518; --bone:#F1F0EC; --signal:#FF5A1F; --signal-text:#B83D0E; --stahl:#8B9099;
  --leise:#5E626A; --weiss:#FFFFFF; --linie:#DAD8D0; --erfolg:#1E7A50; --warnung:#8A5A00; --kritisch:#A63A3A;
  --f-wide:"Archivo Wide","Arial Black",sans-serif; --f-semi:"Archivo Semi","Arial Black",sans-serif;
  --f-text:"Instrument Sans",system-ui,sans-serif; --f-mono:"DM Mono",ui-monospace,monospace;
  --breite:1160px; --r-klein:4px; --r:6px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--graphit);font:17px/1.6 var(--f-text)}
img,svg{max-width:100%}
a{color:var(--signal-text);text-underline-offset:2px}
a:hover{color:var(--graphit)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
h1,h2,h3{margin:0;text-wrap:balance;line-height:1.1}
h1{font:800 clamp(30px,4vw,48px)/1.04 var(--f-wide);letter-spacing:-.03em;text-transform:uppercase;overflow-wrap:break-word;hyphens:auto}
@media (max-width:600px){h1{font-family:var(--f-semi);font-size:clamp(24px,7vw,32px)}}
h1 em{font-style:normal;color:var(--signal-text)}
h2{font:800 clamp(22px,2.6vw,30px)/1.12 var(--f-semi);letter-spacing:-.015em}
h3{font:600 18px/1.3 var(--f-text)}
p{margin:0}
.huelle{max-width:var(--breite);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:8px;z-index:50;background:var(--weiss);padding:8px 12px}
.mono{font-family:var(--f-mono)}
.label{font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}

/* Entwurfsleiste */
.entwurf{background:var(--signal);color:var(--graphit);font:500 13px/1.4 var(--f-mono);text-align:center;padding:6px 16px}

/* Kopf */
.kopf{background:var(--bone);border-bottom:1px solid var(--linie);position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
.kopf .huelle{display:flex;align-items:center;gap:24px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;color:var(--graphit);text-decoration:none}
.logo svg{width:30px;height:30px;flex:none}
.logo span{font:800 22px/1 var(--f-wide);letter-spacing:-.01em}
.site-nav{display:flex;align-items:center;gap:22px;margin-left:auto}
.site-nav a{color:var(--graphit);text-decoration:none;font-weight:500;font-size:15px}
.site-nav a[aria-current="page"]{color:var(--signal-text)}
.sprachen{display:flex;gap:2px;font:500 13px/1 var(--f-mono)}
.sprachen a{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:var(--r-klein);color:var(--leise);text-decoration:none}
.flagge{width:18px;height:12px;border-radius:2px;box-shadow:0 0 0 1px rgba(20,21,24,.18);flex:none}
.sprachen a[aria-current="true"]{background:var(--graphit);color:var(--bone)}
.site-nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--graphit);border-radius:var(--r-klein);padding:6px;color:var(--graphit);cursor:pointer}
.site-nav-toggle svg{width:22px;height:22px;display:block}
@media (max-width:860px){
  .js .site-nav-toggle{display:block}
  .site-nav{flex-wrap:wrap;gap:12px 18px}
  .js .site-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:0;background:var(--bone);border-bottom:1px solid var(--graphit);padding:8px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
  .js .site-nav.is-open{display:flex}
  .js .site-nav a{padding:12px 0;width:100%;border-bottom:1px solid var(--linie)}
  .js .sprachen{margin-top:12px}
  .js .sprachen a{border-bottom:0;width:auto;padding:8px 10px}
  .kopf .huelle{flex-wrap:wrap}
}

/* Brotkrumen */
.brotkrumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:16px 0 0;font:400 13px/1.4 var(--f-mono);color:var(--leise)}
.brotkrumen li+li::before{content:"/";margin-right:6px;color:var(--stahl)}
.brotkrumen a{color:var(--leise)}

/* Hero Startseite */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle,rgba(20,21,24,.13) 1px,transparent 1.2px) 0 0/18px 18px;-webkit-mask:linear-gradient(90deg,transparent 30%,#000);mask:linear-gradient(90deg,transparent 30%,#000)}
.hero__raster{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:20px 56px}
.hero__text{display:grid;gap:18px;min-width:0}
.hero .label{color:var(--graphit)}
.hero .unterzeile{font-size:19px;color:#3A3D43;max-width:56ch}
@media (max-width:900px){.hero__raster{grid-template-columns:minmax(0,1fr);gap:24px;padding-bottom:40px}}
.suche{display:flex;gap:8px;align-items:center;background:var(--signal);border:2px solid var(--graphit);border-radius:var(--r);padding:6px 6px 6px 16px;max-width:640px}
.suche input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font:600 19px var(--f-text);padding:9px 0}
.suche input::placeholder{color:#fff;opacity:.92}
.suche input:focus{outline:none}
.suche:focus-within{outline:2px solid var(--graphit);outline-offset:2px}
.suche button{background:var(--graphit);color:var(--bone);border:0;border-radius:var(--r-klein);font:600 16px var(--f-text);padding:12px 20px;cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--graphit);border-radius:var(--r-klein);padding:6px 10px;font:500 12px/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--graphit);text-decoration:none;background:transparent}
.chip::before{content:"";width:7px;height:7px;background:var(--signal)}
.chip--leer::before{display:none}
button.chip{cursor:pointer}
.chip[aria-pressed="true"]{background:var(--graphit);color:var(--bone)}

/* Messinstrument im Hero: der eine inszenierte Moment */
.hero__messer{background:var(--graphit);color:var(--bone);border-radius:var(--r);padding:20px;display:grid;justify-items:center;text-align:center;gap:8px;min-width:0;max-width:320px;justify-self:end}
.hero__messer svg{display:block;width:100%;max-width:240px;height:auto;margin:0 auto}
.hero__messer .wert{font:800 clamp(28px,3vw,36px)/1 var(--f-wide);letter-spacing:-.02em;color:var(--signal)}
.hero__messer .unter{font:400 13px/1.4 var(--f-mono);color:#C9CBD0}
.nadel{transform-origin:150px 150px;transform:rotate(var(--ziel))}
@media (prefers-reduced-motion:no-preference){
  .nadel{animation:ausschlag 1.1s cubic-bezier(.2,.8,.2,1) .25s both}
  @keyframes ausschlag{from{transform:rotate(-90deg)}to{transform:rotate(var(--ziel))}}
  .hero h1 .w{display:inline-block;animation:einblenden .6s ease-out both;animation-delay:calc(var(--i)*70ms)}
  @keyframes einblenden{from{opacity:.15;transform:translateY(.25em)}to{opacity:1;transform:none}}
}

/* Abschnitte */
.abschnitt{padding-block:56px}
.abschnitt--dunkel{background:var(--graphit);color:var(--bone)}
.abschnitt--dunkel .label{color:#C9CBD0}
.abschnitt--dunkel a{color:var(--signal)}
.abschnitt--weiss{background:var(--weiss);border-block:1px solid var(--linie)}
.kopfzeile{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 24px;margin-bottom:24px}
.mehr{font-weight:600;text-decoration:none}
.mehr::after{content:" →"}

.ziele{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.ziel{position:relative;display:grid;gap:6px;padding:20px 56px 20px 20px;border:1px solid var(--graphit);border-radius:var(--r);background:var(--weiss);color:var(--graphit);text-decoration:none}
.ziel h3{font:800 18px/1.15 var(--f-semi)}
.ziel p{color:var(--leise);font-size:15px}
.ziel:hover{background:var(--graphit);color:var(--bone)}
.ziel:hover p{color:#C9CBD0}

/* Programmkarte */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:12px}
@media (max-width:400px){.karten{grid-template-columns:1fr}}
.karte{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto auto 1fr;gap:4px 10px;align-items:center;padding:16px;border:1px solid var(--graphit);border-radius:var(--r);background:var(--weiss);color:var(--graphit);text-decoration:none}
.karte:hover{box-shadow:4px 4px 0 var(--graphit)}
.kachel{grid-row:1;align-self:start;margin-top:2px;width:44px;height:44px;border-radius:var(--r-klein);background:var(--graphit);color:var(--bone);display:grid;place-items:center;font:800 15px/1 var(--f-semi)}
.karte .name{font-weight:600;line-height:1.25}
.karte .meta{grid-column:1 / 3;font:400 12px/1.4 var(--f-mono);color:var(--leise)}
.karte .prov{grid-row:span 2;text-align:right;font:500 18px/1.1 var(--f-mono);white-space:nowrap}
.karte .prov::before{content:"";display:inline-block;width:8px;height:8px;background:var(--signal);margin-right:6px;vertical-align:middle}
.karte .prov small{display:block;font-size:11px;color:var(--leise);margin-top:3px}
.karte__unten{grid-column:1 / 3;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px}
.score{grid-column:3;grid-row:3;justify-self:end;align-self:center;display:inline-flex;align-items:center;gap:6px;font:400 12px/1 var(--f-mono);color:var(--leise)}
.score small{font-size:11px}
.score b{font-weight:500;color:var(--graphit);font-size:16px}
.score .mini{width:26px;height:16px}

.hinweis{font:400 12px var(--f-mono);margin-left:4px}
.tacho-panel{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px 40px;align-items:center;background:var(--graphit);color:var(--bone);border-radius:var(--r);padding:28px 32px;margin-top:12px}
.tacho-panel li{font-size:14px}
@media (max-width:640px){.tacho-panel{grid-template-columns:1fr}}
.tacho-panel .label{color:#C9CBD0}
.tacho-panel__wert{display:grid;justify-items:center;text-align:center;gap:8px}
.tacho-panel .gross{width:96px;height:58px}
.tacho-panel .gross path:first-child{stroke:#2D2F34}
.tacho-panel .gross g path,.tacho-panel .gross circle{stroke:#F1F0EC;fill:#F1F0EC}
.tacho-panel .zahl{font:800 34px/1 var(--f-wide);color:var(--signal)}
.tacho-panel .stufe{font:500 13px var(--f-mono);text-transform:uppercase;letter-spacing:.06em}
.tacho-panel ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.tacho-panel li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 32px;gap:12px;align-items:center;font-size:15px}
@media (max-width:480px){.tacho-panel li{grid-template-columns:minmax(0,1fr) 32px}.tacho-panel .balken{grid-column:1 / -1;grid-row:2}}
.tacho-panel li b{font:500 14px var(--f-mono);text-align:right}
.balken{height:8px;background:#2D2F34;border-radius:4px;overflow:hidden}
.balken i{display:block;height:100%;background:var(--signal)}
.tacho-panel p{font-size:14px;color:#C9CBD0}
.tacho-panel a{color:var(--signal)}

.status{font:400 12px/1.4 var(--f-mono);color:var(--leise)}
.status--offen{color:var(--warnung)}

.pruefen{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.pruefen div{display:grid;gap:8px;border-top:2px solid var(--signal);padding-top:14px}
.pruefen p{color:#C9CBD0;font-size:15px}

/* Einsteiger und Anzeige */
.einsteiger{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 32px;align-items:center;padding:28px;border:1px solid var(--graphit);border-radius:var(--r);background:var(--weiss)}
@media (max-width:700px){.einsteiger{grid-template-columns:1fr}}
.einsteiger p{color:#3A3D43;max-width:60ch;margin-top:8px}
.anzeige{position:absolute;top:-10px;left:16px;background:var(--bone);border:1px solid var(--graphit);border-radius:var(--r-klein);font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 7px}
.knopf{display:inline-block;background:var(--signal);color:var(--graphit);border:0;border-radius:var(--r-klein);font:600 16px/1 var(--f-text);padding:14px 20px;text-decoration:none;white-space:nowrap}
.knopf:hover{background:var(--graphit);color:var(--bone)}
.knopf--leise{background:transparent;border:1px solid var(--graphit)}

/* FAQ */
.faq{display:grid;gap:8px;max-width:820px}
.faq details{border:1px solid var(--linie);border-radius:var(--r);background:var(--weiss);padding:0 18px}
.faq summary{cursor:pointer;font-weight:600;padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid var(--graphit);border-bottom:2px solid var(--graphit);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
.faq details div{padding:0 0 16px;color:#3A3D43}

/* Seitenkopf Unterseiten */
.seitenkopf{padding-block:24px 32px;display:grid;gap:14px}
.seitenkopf h1{font-size:clamp(28px,4vw,44px)}
@media (max-width:600px){.seitenkopf h1{font-size:clamp(22px,6.4vw,30px)}}
.seitenkopf .lede{font-size:19px;color:#3A3D43;max-width:62ch}
.prog-kopf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
.prog-kopf .kachel{width:44px;height:44px;font-size:16px;grid-row:auto;margin-top:6px}
.prog-kopf .knopfreihe{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}

/* Fakten und Tabellen */
.raster2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px;align-items:start}
.fakten{width:100%;border-collapse:collapse;background:var(--weiss);border:1px solid var(--graphit);border-radius:var(--r)}
.fakten th,.fakten td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--linie);vertical-align:top}
.fakten th{font:500 12px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--leise);width:42%;overflow-wrap:anywhere;hyphens:auto}
.fakten td{overflow-wrap:anywhere}
@media (max-width:420px){.fakten th,.fakten td{padding:10px}.fakten th{letter-spacing:.02em;font-size:11px}}
.fakten td{font:500 16px/1.4 var(--f-mono);font-variant-numeric:tabular-nums}
.fakten tr:last-child th,.fakten tr:last-child td{border-bottom:0}
.tabelle-huelle{overflow-x:auto}
.vergleich{width:100%;border-collapse:collapse;min-width:560px}
.vergleich th,.vergleich td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie)}
.vergleich th{font:500 12px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.vergleich td{font-variant-numeric:tabular-nums}
.vergleich td.mono{font-family:var(--f-mono)}
.traffic{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.traffic li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--linie);border-radius:var(--r);background:var(--weiss)}
.traffic b{font:500 13px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.04em}
.t-ja{color:var(--erfolg)}.t-nein{color:var(--kritisch)}.t-eingeschraenkt{color:var(--warnung)}.t-unbekannt{color:var(--leise)}
.einordnung{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.einordnung div{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);padding:18px;display:grid;gap:8px;align-content:start}
.einordnung .label{color:var(--signal-text)}
.einordnung ul{margin:0;padding-left:18px}

/* Übersicht */
.filter{display:grid;gap:12px;margin-bottom:20px}
.filter .zeile{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 12px;align-items:start}
.filter .zeile .label{padding-top:8px}
.filter .zeile .chips{align-items:center}
@media (max-width:600px){.filter .zeile{grid-template-columns:minmax(0,1fr)}.filter .zeile .label{padding-top:0}}
.ergebnis{font:400 13px var(--f-mono);color:var(--leise);margin-bottom:12px}
.filter select{font:500 13px var(--f-mono);padding:6px 8px;border:1px solid var(--graphit);border-radius:var(--r-klein);background:var(--weiss);color:var(--graphit)}

/* Textseiten */
.text{max-width:72ch;display:grid;gap:14px}
.text h2{margin-top:18px}
.text ol,.text ul{margin:0;padding-left:22px}

/* Fuß */
.fuss{background:var(--graphit);color:#C9CBD0;padding-block:48px 32px;margin-top:40px}
.fuss .logo{color:var(--bone)}
.fuss a{color:var(--bone)}
.fuss__raster{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:32px}
@media (max-width:760px){.fuss__raster{grid-template-columns:1fr}}
.fuss h2{font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--signal);margin-bottom:12px}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fuss p{font-size:15px;max-width:52ch;margin-top:12px}
.fuss__unten{border-top:1px solid #2D2F34;margin-top:32px;padding-top:20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 32px;font-size:13px;align-items:start}
.fuss__partner{justify-self:end;text-align:right;max-width:52ch}
@media (max-width:760px){.fuss__unten{grid-template-columns:minmax(0,1fr)}.fuss__partner{justify-self:start;text-align:left}}
.fuss .claim{font:500 13px var(--f-mono);color:var(--signal)}

/* Kompakte Chips mit Icon (Nischen, Herkunft) */
.chip--klein{text-transform:none;letter-spacing:0;font:500 13px/1 var(--f-text);padding:5px 9px;gap:5px;border-color:var(--linie);background:var(--weiss)}
.chip--klein .ico{width:14px;height:14px;flex:none}
.filter .zeile .chips{gap:6px}
/* Provisionsarten am Kartenende */
.arten{grid-column:1 / -1;align-self:end;display:flex;gap:6px;margin-top:6px;padding-top:10px;border-top:1px solid var(--linie)}
.art{flex:1;text-align:center;font:500 11px/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;padding:6px 4px;border-radius:var(--r-klein);background:var(--bone);color:#A3A6AC}
.art--an{background:var(--graphit);color:var(--bone)}
.art--an::before{content:"";display:inline-block;width:6px;height:6px;background:var(--signal);margin-right:5px;vertical-align:1px}
/* Magazin */
.artikel-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:12px}
.artikel-karte{display:grid;gap:10px;align-content:start;padding:22px;border:1px solid var(--graphit);border-radius:var(--r);background:var(--weiss);color:var(--graphit);text-decoration:none}
.artikel-karte h3{font:800 20px/1.2 var(--f-semi)}
.artikel-karte p{color:var(--leise);font-size:15px}
.artikel-karte .mehr{color:var(--signal-text)}
.artikel-karte:hover{box-shadow:4px 4px 0 var(--graphit)}
.artikel__raster{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;padding-bottom:48px}
@media (max-width:860px){.artikel__raster{grid-template-columns:minmax(0,1fr)}}
.toc{position:sticky;top:90px;align-self:start;display:grid;gap:10px;font-size:14px}
.toc ol{margin:0;padding-left:18px;display:grid;gap:6px}
.toc a{color:var(--graphit)}
@media (max-width:860px){.toc{position:static;border:1px solid var(--linie);border-radius:var(--r);padding:14px;background:var(--weiss)}}
.quellen{font-size:14px}

/* Anbieter-Logo statt Initialen */
.kachel--logo{background:var(--weiss);border:1px solid var(--linie);padding:3px}
.karte .kachel{width:28px;height:28px;font-size:11px}
.kachel--logo img{width:100%;height:100%;object-fit:contain;display:block}

.ziel__icon{position:absolute;top:16px;right:16px;color:var(--signal)}
/* Einwilligungs-Banner */
.einwilligung{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.einwilligung__box{max-width:720px;margin:0 auto;background:var(--weiss);border:2px solid var(--graphit);border-radius:var(--r);box-shadow:6px 6px 0 var(--graphit);padding:20px 22px;display:grid;gap:10px}
.einwilligung h2{font-size:20px}
.einwilligung p{font-size:15px;color:#3A3D43}
.einwilligung__knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.linkknopf{background:none;border:0;padding:0;font:inherit;color:var(--bone);text-decoration:underline;cursor:pointer}

.sprachhinweis{grid-column:1 / -1;display:inline-flex;align-items:center;gap:6px;font:400 12px/1 var(--f-mono);color:var(--leise)}
.chip--klein .flagge{width:16px;height:11px}

.teilnahme{grid-column:1 / -1;justify-self:start;font:500 11px/1 var(--f-mono);letter-spacing:.03em;padding:4px 7px;border-radius:var(--r-klein);border:1px solid var(--linie)}
.teilnahme--einzelunternehmer{color:var(--erfolg);border-color:currentColor}
.teilnahme--firma{color:var(--warnung);border-color:currentColor}

/* Lange Quellen-Adressen brechen um statt die Seite zu verbreitern */
.text{min-width:0}
.quellen,.quellen a,.text a{overflow-wrap:anywhere}

.knopf--klein{padding:9px 14px;font-size:14px;margin-left:8px}
@media (max-width:860px){.knopf--klein{margin:12px 0 0}}
/* Startseite: So funktioniert der Tacho */
.tacho-start{display:grid;gap:28px}
.tacho-start__kopf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center}
.tacho-start__kopf .gross{width:120px;height:72px}
.tacho-start .lede{color:#3A3D43;max-width:64ch;margin-top:8px}
@media (max-width:600px){.tacho-start__kopf{grid-template-columns:minmax(0,1fr)}}
.tacho-teile{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tacho-teil{background:var(--weiss);border:1px solid var(--graphit);border-radius:var(--r);padding:18px;display:grid;gap:6px;align-content:start}
.tacho-teil__gewicht{font:800 28px/1 var(--f-wide);color:var(--signal)}
.tacho-teil p{color:var(--leise);font-size:15px}
/* Top 10 */
.top10{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.top10__eintrag{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center}
.top10__platz{font:800 32px/1 var(--f-wide);color:var(--signal);text-align:center}
@media (max-width:480px){.top10__eintrag{grid-template-columns:36px minmax(0,1fr)}.top10__platz{font-size:22px}}

/* Klarstellung zum Tacho und Beispiele (So prüfen wir) */
.betont{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--signal)}
.tacho-beispiele{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px}
.tacho-beispiel{display:grid;justify-items:center;text-align:center;gap:6px;padding:18px;border:1px solid var(--graphit);border-radius:var(--r);background:var(--weiss);color:var(--graphit);text-decoration:none}
.tacho-beispiel .gross{width:72px;height:44px}
.tacho-beispiel__wert{font:800 28px/1 var(--f-wide);color:var(--signal)}
.tacho-beispiel ul{list-style:none;margin:6px 0 0;padding:0;width:100%;display:grid;gap:4px;font-size:13px}
.tacho-beispiel li{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--linie);padding-top:4px}
.tacho-beispiel li b{font:500 13px var(--f-mono)}

/* Nischen-Links, Bestenlisten */
.nischen-links{display:grid;gap:8px;margin-bottom:16px}
a.chip{text-decoration:none}
.beste__karte{display:grid;gap:6px;min-width:0}

/* Feinschliff 15.10.2026: Hero mobil, Top 10, Fakten, Tabellen im Magazin */
.hero__text{grid-template-columns:minmax(0,1fr)}
.karte .name{min-width:0;overflow-wrap:break-word;hyphens:auto}
.fakten td{font-size:14px;line-height:1.45}
.top10{max-width:880px}
.top10__eintrag{align-items:start}
.top10__platz{padding-top:18px}
@media (max-width:560px){
  .top10{gap:18px}
  .top10__eintrag{grid-template-columns:minmax(0,1fr);position:relative}
  .top10__platz{position:absolute;z-index:1;top:-10px;left:-6px;width:30px;height:30px;padding:0;display:grid;place-items:center;border-radius:50%;background:var(--graphit);color:var(--signal);font-size:14px}
}
.tabelle-text{overflow-x:auto;border:1px solid var(--graphit);border-radius:var(--r);background:var(--weiss);margin:4px 0}
.tabelle-text table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.tabelle-text th,.tabelle-text td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--linie)}
.tabelle-text thead th{font:500 12px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--leise);background:var(--bone)}
.tabelle-text tbody tr:last-child td{border-bottom:0}
.tabelle-text td:first-child{font-weight:600}
@media (max-width:480px){.tabelle-text table{font-size:14px;hyphens:auto;overflow-wrap:break-word}.tabelle-text th,.tabelle-text td{padding:10px}.tabelle-text table:has(th:nth-child(3)){font-size:13px}.tabelle-text table:has(th:nth-child(3)) :is(th,td){padding:9px 8px}}
@media (max-width:600px){.chip.chip--klein{padding:9px 11px;font-size:14px}button.chip{min-height:34px}}
@media (max-width:600px){.suche{padding-left:12px}.suche input{font-size:16px;text-overflow:ellipsis}.suche button{padding:12px 14px}}
@media (max-width:900px){.hero__messer{justify-self:center}}