/* Taxiverband Deutschland e.V. – gemeinsames Stylesheet
   Alle Werte stammen aus dem Canvas-Entwurf (Entwurf/entwurf/*.dc.html).
   Schriften werden ausschließlich lokal geladen (siehe Datenschutzerklärung). */

/* ---------- Schriften ---------- */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/barlow-semi-condensed-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/barlow-semi-condensed-latin-800-normal.woff2') format('woff2')}

/* ---------- Design-Tokens ---------- */
:root{
  --gelb:#F2C200;
  --schwarz:#15171B;
  --grau-headline:#8A929C;   /* nur für große Schrift */
  --text:#3E454F;
  --flaeche:#F2F3F5;
  --linie:#E3E5E8;
  --label:#5E6873;
  --caption:#6B7480;
  --text-auf-dunkel:#C7CCD4;
  --text-auf-gelb:#3A3418;
  --lane-grau:#D3D6DB;
  --lane-grau-dunkel:#C3C7CD;
  --fokus:#0B57B8;
  --radius:20px;
  --breite:1240px;
  --rand:40px;
  --font-text:'Hanken Grotesk','Helvetica Neue',Helvetica,sans-serif;
  --font-cond:'Barlow Semi Condensed','Arial Narrow',sans-serif;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font-text);color:var(--schwarz);background:#FFFFFF;font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
a{color:inherit}
a:focus-visible,summary:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:6px}
img{max-width:100%;height:auto}
picture{display:contents}
h1,h2,h3,p,figure{margin:0}
[id]{scroll-margin-top:84px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;background:var(--schwarz);color:#FFFFFF;padding:12px 18px;border-radius:8px;font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}

.wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.cond{font-family:var(--font-cond)}
.grau{color:var(--grau-headline)}

/* Fahrbahnmarkierung */
.lane{background-image:linear-gradient(to bottom,currentColor 0 60%,transparent 60% 100%);background-size:4px 36px;background-repeat:repeat-y;width:4px}
.lane-h{height:4px;background-image:linear-gradient(to right,currentColor 0 60%,transparent 60% 100%);background-size:36px 4px;background-repeat:repeat-x}
.lane-h--hell{color:var(--lane-grau)}

/* Links und Knöpfe */
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;min-height:44px;border-bottom:2px solid currentColor;padding-top:4px;align-self:flex-start}
.pill{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border-radius:999px;font-weight:600;text-decoration:none}
.pill--gelb{background:var(--gelb);color:var(--schwarz)}
.pill--rahmen{border:1.5px solid var(--schwarz);color:var(--schwarz)}
.pill--dunkel{background:var(--schwarz);color:#FFFFFF}

/* Typografie-Bausteine */
.eyebrow{margin:0 0 24px;font-size:19px;font-weight:700}
.label{font-size:16px;font-weight:600;color:var(--label)}
.h-xl{font-size:clamp(44px,6vw,84px);line-height:1;font-weight:800;letter-spacing:-0.04em}
.h-l{font-size:clamp(40px,5vw,64px);line-height:1.04;font-weight:800;letter-spacing:-0.04em}
.h-m{font-size:clamp(36px,4vw,52px);line-height:1.02;font-weight:800;letter-spacing:-0.035em}
.h-card{font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-0.015em}
.lead{font-size:21px;line-height:1.5;color:var(--text)}
.text{color:var(--text)}
.caption{font-size:12px;color:var(--caption)}
.foto{display:block;width:100%;object-fit:cover;border-radius:var(--radius);background:#DADCE0}

/* ---------- Kopfleiste ---------- */
.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,0.82);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid rgba(0,0,0,0.06)}
.header-inner{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:10px 28px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;padding:8px 0}
.brand img{height:32px;width:auto;display:block}
.brand-text{display:flex;flex-direction:column;font-family:var(--font-cond);font-weight:700;font-size:13px;line-height:1.05;text-transform:uppercase;letter-spacing:0.03em;color:#4A525C}
.nav-main{display:flex;flex-wrap:wrap;align-items:center;gap:4px 32px;font-size:15px;font-weight:500}
.nav-main a{text-decoration:none;padding:10px 0}
.nav-main a.pill{min-height:40px;padding:0 20px}
.nav-main a[aria-current="page"]{border-bottom:2px solid currentColor;padding-bottom:8px}

/* Mobiles Menü ohne JavaScript */
.nav-mobile{display:none}
.nav-mobile summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border-radius:999px;background:var(--schwarz);color:#FFFFFF;font-size:15px;font-weight:600}
.nav-mobile summary::-webkit-details-marker{display:none}
.nav-mobile .burger{display:inline-block;width:16px;height:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
.nav-mobile[open] .burger{height:0;box-shadow:none;position:relative}
.nav-mobile[open] .burger::before,.nav-mobile[open] .burger::after{content:"";position:absolute;left:0;top:-1px;width:16px;height:2px;background:currentColor;transform:rotate(45deg)}
.nav-mobile[open] .burger::after{transform:rotate(-45deg)}
.nav-mobile nav{position:absolute;left:0;right:0;top:100%;background:#FFFFFF;border-bottom:1px solid var(--linie);box-shadow:0 18px 30px rgba(0,0,0,0.08);padding:8px var(--rand) 24px;display:flex;flex-direction:column}
.nav-mobile nav a{display:flex;align-items:center;min-height:52px;font-size:20px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--linie)}
.nav-mobile nav a:last-child{border-bottom:0}
.nav-mobile nav a[aria-current="page"]{color:var(--label)}

@media (max-width:1020px){
  .nav-main{display:none}
  .nav-mobile{display:block}
  /* Ohne JavaScript bleibt das Menü nach einem Klick auf einen Anker offen.
     Deshalb klebt die Kopfleiste bei offenem Menü nicht, sondern scrollt mit weg. */
  .site-header:has(.nav-mobile[open]){position:relative}
}

/* ---------- Presse und Footer (alle Seiten) ---------- */
.presse{border-top:1px solid var(--linie)}
.presse .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 64px;padding-top:72px;padding-bottom:72px}
.presse h2{font-size:clamp(36px,4vw,52px);line-height:1;font-weight:800;letter-spacing:-0.035em}
.presse-text{max-width:440px}
.presse-text p:first-child{margin:0 0 6px;color:var(--text)}
.presse-name{margin:0 0 12px;font-size:20px;font-weight:700}

.site-footer{background:var(--schwarz);color:#B9C0CB;font-size:14px}
.site-footer .wrap{padding-top:56px;padding-bottom:40px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px 48px}
.footer-brand{display:flex;flex-direction:column;gap:20px}
.footer-brand img{height:40px;width:auto;display:block;align-self:flex-start}
.footer-nav{display:flex;flex-wrap:wrap;gap:8px 28px}
.footer-nav a{color:#FFFFFF;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}

/* ---------- Startseite ---------- */
.hero{padding:120px 0 64px}
.hero-kicker{margin:0 0 28px;font-size:18px;font-weight:600;color:var(--label)}
.hero h1{font-size:clamp(52px,8.4vw,120px);line-height:0.98;font-weight:800;letter-spacing:-0.045em;max-width:1100px}
.hero-unten{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px 64px;margin-top:56px}
.hero-unten .lead{max-width:560px}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}

.buehne{position:relative;height:clamp(420px,52vw,720px);overflow:hidden;background:#2F5FB8}
.buehne img{width:100%;height:100%;object-fit:cover;object-position:center 80%;display:block}
.buehne-verlauf{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(to top,rgba(0,0,0,0.55),rgba(0,0,0,0));padding:120px 0 28px}
.buehne-verlauf .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 32px;color:#FFFFFF}
.buehne-claim{max-width:520px;font-size:20px;font-weight:600;line-height:1.35}
.buehne-credit{font-size:12px;opacity:0.85}

.schwerpunkt{background:var(--gelb);color:var(--schwarz);padding:128px 0 136px}
.null-toleranz{display:block;font-family:var(--font-cond);font-size:clamp(88px,15vw,216px);line-height:0.86;font-weight:800;letter-spacing:-0.02em;text-transform:uppercase}
.null-toleranz-sub{display:block;margin-top:24px;font-size:clamp(30px,4.2vw,56px);line-height:1.08;font-weight:700;letter-spacing:-0.03em;max-width:980px}
.schwerpunkt .lane-h{margin:72px 0 64px;color:var(--schwarz);opacity:0.9}
.schwerpunkt-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:48px 64px}
.schwerpunkt-raster h3{margin:0 0 12px}
.schwerpunkt-raster p{color:var(--text-auf-gelb)}
.schwerpunkt-link{margin-top:64px}

.zukunft{background:var(--schwarz);color:#FFFFFF;padding:136px 0}
.zukunft .wrap{display:flex;flex-wrap:wrap;gap:56px 72px;align-items:stretch}
.zukunft-titel{flex:1 1 520px}
.zukunft .eyebrow{color:var(--gelb)}
.zukunft .lane{color:var(--gelb);flex:0 0 4px}
.zukunft-text{flex:1 1 360px;display:flex;flex-direction:column;justify-content:flex-end;gap:24px}
.zukunft-text p{font-size:20px;line-height:1.55;color:var(--text-auf-dunkel)}
.zukunft-text .more{color:#FFFFFF}

.daseinsvorsorge{padding:136px 0 128px}
.daseinsvorsorge .eyebrow,.kontakt .eyebrow{color:var(--label)}
.daseinsvorsorge h2{max-width:1100px}
.daseinsvorsorge .lead{margin-top:40px;max-width:720px}
.dv-raster{display:flex;flex-wrap:wrap;gap:48px 80px;align-items:stretch;margin-top:72px}
.dv-foto{flex:1 1 400px;max-width:560px}
.dv-foto img{aspect-ratio:3/4;object-position:center 70%}
.dv-foto figcaption{margin-top:8px}
.dv-punkte{flex:1 1 420px;display:flex;flex-direction:column;justify-content:center}
.dv-punkt{padding:32px 0}
.dv-nr{margin:0 0 16px;font-family:var(--font-cond);font-size:56px;line-height:1;font-weight:800;color:var(--gelb);-webkit-text-stroke:1.5px var(--schwarz)}
.dv-punkt h3{margin:0 0 12px}
.rund-um-die-uhr{margin-top:96px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 64px;padding:56px;border-radius:24px;background:var(--schwarz);color:#FFFFFF}
.rund-um-die-uhr .zahl{font-family:var(--font-cond);font-size:clamp(72px,11vw,160px);line-height:0.86;font-weight:800;letter-spacing:-0.01em;color:var(--gelb)}
.rund-um-die-uhr .zahl-text{max-width:460px;font-size:22px;line-height:1.45;color:#E4E7EB}

.themen{padding:136px 0 120px}
.themen h2{margin:0 0 64px;max-width:760px}
.themen-raster{display:flex;flex-wrap:wrap;gap:48px 64px;align-items:stretch}
.themen-bild{flex:1.3 1 520px;position:relative;border-radius:var(--radius);overflow:hidden;min-height:440px}
.themen-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 70%;display:block}
.credit-overlay{position:absolute;right:12px;bottom:12px;font-size:12px;color:#FFFFFF;background:rgba(0,0,0,0.55);padding:3px 8px;border-radius:6px}
.themen-liste{flex:1 1 380px;display:flex;flex-direction:column;justify-content:center}
.thema{padding:40px 0 0}
.thema:first-child{padding:0 0 40px}
.thema .label{margin:0 0 10px}
.thema h3{margin:0 0 12px;font-size:32px;line-height:1.12;font-weight:700;letter-spacing:-0.025em}
.thema p.text{margin:0 0 16px}
.lane-h--abstand{margin-top:40px}

.lobbyregister{padding:0 0 120px}
.lobbyregister-zeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:36px 0;border-top:1.5px solid var(--schwarz);border-bottom:1.5px solid var(--schwarz)}
.lobbyregister-titel{font-size:22px;font-weight:700;letter-spacing:-0.01em}
.lobbyregister-nr{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
.lobbyregister-nr .cond{font-size:28px;font-weight:700;letter-spacing:0.02em}

.kontakt{background:var(--flaeche);padding:128px 0}
.kontakt-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 64px;margin-bottom:64px}
.kontakt-kopf p{max-width:420px;color:var(--text)}
.kontakt-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:48px 40px}
.person img{aspect-ratio:4/5}
.foto--oben{object-position:center 30%}
.person .caption{margin-top:8px}
.person-name{margin:16px 0 2px;font-size:26px;font-weight:700;letter-spacing:-0.02em}
.person-rolle{margin:0 0 12px;color:var(--label)}
.kontakt-buero{display:flex;flex-direction:column;justify-content:flex-end;gap:24px}
.kontakt-buero .label{margin:0 0 10px}
.adresse{font-size:22px;line-height:1.4;font-weight:600}
.kontakt-buero a{font-size:22px;line-height:1.4;font-weight:600;text-decoration:none;min-height:44px;display:flex;align-items:center}

/* ---------- Unterseiten (Themen) ---------- */
.seitenkopf{padding:112px 0 120px}
.seitenkopf--hell .seitenkopf-pfad{color:var(--label)}
.seitenkopf--hell .seitenkopf-intro{color:var(--text)}
.seitenkopf--gelb{background:var(--gelb);color:var(--schwarz)}
.seitenkopf-pfad{margin:0 0 28px;font-size:18px;font-weight:700}
.seitenkopf h1{font-size:clamp(48px,7vw,104px);line-height:0.98;font-weight:800;letter-spacing:-0.045em;max-width:1120px}
.seitenkopf-intro{margin-top:48px;max-width:680px;font-size:23px;line-height:1.5}
.seitenkopf--gelb .zweitzeile,.seitenkopf--gelb .seitenkopf-intro{color:var(--text-auf-gelb)}
.seitenkopf--dunkel{background:var(--schwarz);color:#FFFFFF}
.seitenkopf--dunkel .seitenkopf-pfad{color:var(--gelb)}
.seitenkopf--dunkel .zweitzeile{color:var(--grau-headline)}
.seitenkopf--dunkel .seitenkopf-intro{color:var(--text-auf-dunkel)}

.bildband{position:relative;height:clamp(360px,44vw,640px);overflow:hidden;background:#2F5FB8}
.bildband img{width:100%;height:100%;object-fit:cover;display:block}
.bildband .credit-overlay{right:16px}

.abschnitt{padding:0 0 120px}
.abschnitt--start{padding:120px 0 96px}
.abschnitt > .wrap > .lane-h{margin-bottom:96px}
.zweispalter{display:flex;flex-wrap:wrap;gap:48px 96px}
.spalte-links{flex:0 1 300px}
.spalte-rechts{flex:1 1 560px;max-width:720px}
.sticky-label{position:sticky;top:96px}
.fliesstext p{margin:0 0 24px;font-size:20px;line-height:1.6;color:var(--text)}
.fliesstext p.vor-karten{margin-bottom:40px}
.fliesstext p.nach-karten{margin:40px 0 0}

.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px}
.karte{border-radius:var(--radius);padding:36px}
.karte--dunkel{background:var(--schwarz);color:#FFFFFF}
.karte--grau{background:var(--flaeche)}
.karte-label{margin:0 0 12px;font-size:16px;font-weight:700;color:var(--label)}
.karte--dunkel .karte-label{color:var(--gelb)}
.karte-titel{margin:0 0 12px;font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-0.02em}
.karte p:last-child{color:var(--text)}
.karte--dunkel p:last-child{color:var(--text-auf-dunkel)}

.forderungen{background:var(--flaeche);padding:112px 0}
.forderungen .spalte-rechts{color:var(--schwarz)}
.forderung{padding:28px 0;font-size:24px;line-height:1.35;font-weight:600;letter-spacing:-0.01em}
.forderungen .lane-h{color:var(--lane-grau-dunkel)}

.schlusssatz{padding:120px 0}
.schlusssatz .lane-h{color:var(--gelb);margin-bottom:56px;max-width:240px}
.schlusssatz .more{margin-top:40px}

/* Dunkler Praxisblock (Elektromobilität) */
.praxis{background:var(--schwarz);color:#FFFFFF;padding:120px 0}
.praxis .wrap{display:flex;flex-wrap:wrap;gap:56px 72px;align-items:stretch}
.praxis-titel{flex:1 1 520px}
.praxis .eyebrow{color:var(--gelb)}
.praxis-zahl{font-family:var(--font-cond);font-size:clamp(96px,14vw,200px);line-height:0.86;font-weight:800;letter-spacing:-0.02em;color:var(--gelb)}
.praxis-titel h2{margin-top:24px;font-size:clamp(28px,3.4vw,44px);line-height:1.1;font-weight:700;letter-spacing:-0.03em;max-width:620px}
.praxis .lane{color:var(--gelb);flex:0 0 4px}
.praxis-text{flex:1 1 360px;display:flex;flex-direction:column;justify-content:flex-end;gap:24px}
.praxis-text p{font-size:20px;line-height:1.55;color:var(--text-auf-dunkel)}

.schlusssatz p{max-width:1000px;font-size:clamp(32px,4.2vw,56px);line-height:1.1;font-weight:800;letter-spacing:-0.035em}

/* ---------- Reformstau ---------- */
.reform{padding:112px 0 96px}
.reform > .wrap > h2{margin:0 0 48px}
.reform-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:20px}
.reform-karte{background:#FFFFFF;border:1px solid var(--linie);border-radius:var(--radius);padding:40px;display:flex;flex-direction:column;gap:14px}
.reform-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.reform-thema{font-size:15px;font-weight:600;color:var(--label)}
/* Fundstelle: im Entwurf #8A929C; auf Weiß für 16 px zu kontrastarm, daher etwas dunkler */
.reform-paragraf{font-family:var(--font-cond);font-size:16px;font-weight:700;color:var(--caption);letter-spacing:0.02em}
.reform-karte h3{font-size:26px;line-height:1.14;font-weight:700;letter-spacing:-0.02em}
.reform-karte p{color:var(--text)}

.ausgebremst-abschnitt{padding:0 0 120px}
.ausgebremst{background:var(--schwarz);color:#FFFFFF;border-radius:28px;padding:64px;display:flex;flex-wrap:wrap;gap:40px 72px;align-items:flex-start}
.ausgebremst-titel{flex:1 1 420px}
.ausgebremst-titel .reform-kopf{margin-bottom:20px}
.ausgebremst-label{font-size:16px;font-weight:700;color:var(--gelb)}
.ausgebremst .reform-paragraf{color:var(--grau-headline)}
.ausgebremst h2{font-size:clamp(34px,3.8vw,48px);line-height:1.05;font-weight:800;letter-spacing:-0.035em}
.ausgebremst .lane{color:var(--gelb);flex:0 0 4px;align-self:stretch}
.ausgebremst-text{flex:1 1 340px;display:flex;flex-direction:column;gap:20px}
.ausgebremst-text p{font-size:19px;line-height:1.6;color:var(--text-auf-dunkel)}
.ausgebremst-text p.betont{font-weight:600;color:#FFFFFF}

.schlusssatz--gelb{background:var(--gelb);color:var(--schwarz)}
.schlusssatz--gelb .lane-h{color:var(--schwarz);opacity:0.85}

/* ---------- Rechtliches (Impressum, Datenschutz) ---------- */
.seitenkopf--recht{padding:112px 0 72px}
.seitenkopf--recht .seitenkopf-intro{margin-top:40px;font-size:21px}
.legal{padding:0 0 120px}
.legal h2{font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-0.01em}
.legal h3{margin:24px 0 8px;font-size:18px;line-height:1.35;font-weight:700}
.legal p,.legal li{font-size:18px;line-height:1.6;color:var(--text)}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:1.2em}
.legal .txt > :last-child{margin-bottom:0}
.legal .row{display:flex;flex-wrap:wrap;gap:16px 96px;padding:40px 0;border-top:1px solid var(--linie)}
.legal .lab{flex:0 1 300px}
.legal .txt{flex:1 1 560px;max-width:720px}
.legal .stand{font-size:15px;color:var(--caption)}

/* ---------- 404 ---------- */
.fehler-knoepfe{margin-top:48px}

/* ---------- Mobil ---------- */
@media (max-width:760px){
  :root{--rand:20px}
  .lane-col{display:none}
  /* „TOLERANZ“ ist 4,16 em breit; ohne Anpassung bricht das Wort unter 400 px um */
  .null-toleranz{font-size:min(88px,calc((100vw - 40px) / 4.3))}
  .reform-karte{padding:32px 24px}
  .ausgebremst{padding:40px 24px}
}