/* ==========================================================================
   KAMPAGNEN-HUB — Team Freiheit Mecklenburg-Vorpommern
   CI: ANTIPARTEI. Reines Schwarz/Weiss + Creme. System-Font.
   Keine externen Ressourcen. Kein Tracking. Keine Cookies.
   Basis: Stylesheet des Briefwahl-Lotsen (waehl-dich-frei.de), erweitert.
   ========================================================================== */

:root{
  --schwarz:#000;
  --weiss:#fff;
  --creme:#FBFAF8;
  --ink:#14110F;
  --grau:#6B6660;
  --grau-hell:#B9B4AE;
  --linie:#000;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--weiss);color:var(--ink);line-height:1.5;font-size:17px;
  -webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--schwarz);outline-offset:2px}

.wrap{max-width:960px;margin:0 auto;padding:0 22px}
.wrap--schmal{max-width:720px}

/* ---------- Sektionen: Akzent ueber Inversion ---------- */
.sektion{padding:64px 0;border-bottom:3px solid var(--schwarz)}
.sektion--invers{background:var(--schwarz);color:var(--weiss)}
.sektion--creme{background:var(--creme)}
.sektion--eng{padding:44px 0}
.sektion--invers :focus-visible{outline-color:var(--weiss)}

/* ---------- Typografie ---------- */
.display{font-weight:900;font-style:italic;text-transform:uppercase;
  letter-spacing:-.025em;line-height:.92;font-size:clamp(38px,8.5vw,86px)}
h2.display{font-size:clamp(30px,5.6vw,52px)}
h3{font-weight:900;font-style:italic;text-transform:uppercase;
  letter-spacing:-.015em;font-size:clamp(20px,3vw,26px);line-height:1.05}
h4{font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:15px}
p+p{margin-top:14px}
.lead{font-size:clamp(17px,2.3vw,21px);line-height:1.45;max-width:44em}
.klein{font-size:14px;line-height:1.45;color:var(--grau)}
.sektion--invers .klein,.kopf .klein{color:var(--grau-hell)}
.augbraue{font-size:12px;font-weight:900;text-transform:uppercase;
  letter-spacing:.14em;color:var(--grau)}
.sektion--invers .augbraue{color:var(--grau-hell)}
.mark{background:var(--schwarz);color:var(--weiss);padding:0 .16em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sektion--invers .mark{background:var(--weiss);color:var(--schwarz)}

.badge{display:inline-block;border:3.5px solid currentColor;padding:7px 13px;
  font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:13px;
  line-height:1;border-radius:0}

/* ---------- Buttons ---------- */
.btn{display:inline-block;border:2px solid var(--schwarz);background:var(--schwarz);
  color:var(--weiss);padding:15px 24px;font-weight:900;text-transform:uppercase;
  letter-spacing:.03em;font-size:15px;border-radius:0;cursor:pointer;
  text-decoration:none;text-align:center;transition:background .12s,color .12s}
.btn:hover,.btn:focus-visible{background:var(--weiss);color:var(--schwarz)}
.btn--geist{background:transparent;color:var(--schwarz)}
.btn--geist:hover,.btn--geist:focus-visible{background:var(--schwarz);color:var(--weiss)}
.btn--klein{padding:11px 16px;font-size:13px}
.btn--breit{display:block;width:100%}
.sektion--invers .btn,.hero .btn{border-color:var(--weiss);background:var(--weiss);color:var(--schwarz)}
.sektion--invers .btn:hover,.hero .btn:hover,
.sektion--invers .btn:focus-visible,.hero .btn:focus-visible{background:transparent;color:var(--weiss)}
.sektion--invers .btn--geist,.hero .btn--geist{background:transparent;color:var(--weiss)}
.sektion--invers .btn--geist:hover,.hero .btn--geist:hover{background:var(--weiss);color:var(--schwarz)}
.btnreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- Kopf ---------- */
.kopf{background:var(--schwarz);color:var(--weiss);border-bottom:3px solid var(--schwarz)}
.kopf__leib{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:14px;padding-bottom:14px}
.wortmarke{font-weight:900;font-style:italic;text-transform:uppercase;
  letter-spacing:-.01em;font-size:clamp(19px,2.6vw,24px);text-decoration:none;white-space:nowrap}
.wortmarke span{opacity:.55}
.nav{display:flex;flex-wrap:wrap;gap:2px;margin-left:auto}
.nav a{text-decoration:none;font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;padding:8px 10px;border:2px solid transparent}
.nav a:hover,.nav a:focus-visible{border-color:var(--weiss)}
.nav a[aria-current="page"]{background:var(--weiss);color:var(--schwarz)}
@media(max-width:760px){
  .nav{margin-left:0;width:100%;border-top:2px solid #333;padding-top:10px}
  .nav a{padding:7px 9px;font-size:12px}
}

/* ---------- Hero ---------- */
.hero{background:var(--schwarz);color:var(--weiss);padding:44px 0 56px;border-bottom:3px solid var(--schwarz)}
.hero .badge{border-color:var(--weiss)}
.hero h1{margin:22px 0 18px}
.hero .lead{color:var(--grau-hell);max-width:38em}
.fristzeile{margin-top:26px;border-top:2px solid #333;padding-top:18px;
  display:flex;flex-wrap:wrap;gap:26px;align-items:baseline}
.zahl{font-weight:900;font-style:italic;font-size:clamp(34px,7vw,58px);line-height:.9;
  font-variant-numeric:tabular-nums}
.zahl+.zahlzusatz{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}

/* ---------- Wege / Kartenraster ---------- */
/* Trennlinien entstehen durch die Luecke ueber schwarzem Grund — das haelt
   auch beim Umbrechen in mehrere Zeilen gleichmaessig dicke Kanten. */
.raster{display:grid;gap:3px;background:var(--schwarz);border:3px solid var(--schwarz);
  margin-top:30px}
.raster--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.raster--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.karte{padding:26px;border:0;text-decoration:none;
  display:flex;flex-direction:column;gap:12px;background:var(--weiss);color:var(--ink)}
.karte:hover,.karte:focus-visible{background:var(--creme)}
.karte h3{margin-bottom:2px}
.karte p{flex:1;font-size:15.5px}
.karte__fuss{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.sektion--invers .raster{background:var(--weiss);border-color:var(--weiss)}
.sektion--invers .karte{background:var(--schwarz);color:var(--weiss)}
.sektion--invers .karte:hover,.sektion--invers .karte:focus-visible{background:#141414}

/* ---------- Nummerierte Liste ---------- */
.stufen{list-style:none;margin-top:26px;border-top:3px solid var(--schwarz)}
.stufen li{display:grid;grid-template-columns:64px 1fr;gap:18px;
  padding:22px 0;border-bottom:3px solid var(--schwarz)}
.stufen .nr{font-weight:900;font-style:italic;font-size:32px;line-height:1}
.stufen b{display:block;font-weight:900;text-transform:uppercase;letter-spacing:.02em;
  font-size:18px;margin-bottom:5px}
.sektion--invers .stufen,.sektion--invers .stufen li{border-color:var(--weiss)}
@media(max-width:520px){.stufen li{grid-template-columns:44px 1fr;gap:12px}}

/* ---------- Termine ---------- */
.termine{list-style:none;border-top:3px solid var(--schwarz)}
.termine li{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:20px 0;
  border-bottom:2px solid var(--schwarz)}
.termine .datum{font-weight:900;font-style:italic;text-transform:uppercase;font-size:18px;line-height:1.1}
.termine li.wahltag{background:var(--schwarz);color:var(--weiss);padding-left:18px;padding-right:18px}
@media(max-width:600px){.termine li{grid-template-columns:1fr;gap:4px}}

/* ---------- Kasten / Hinweis ---------- */
.kasten{border:3px solid var(--schwarz);padding:22px;margin-top:26px}
.kasten--creme{background:var(--creme)}
.kasten--gestrichelt{border-style:dashed}
.kasten h3{margin-bottom:10px}
.platzhalter{border:3px dashed var(--schwarz);background:var(--creme);padding:22px;margin-top:22px}
.platzhalter b{display:block;font-weight:900;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}

/* ---------- Rechtstexte ---------- */
.rechtstext{max-width:44em}
.rechtstext h2{font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(22px,3.4vw,30px);margin:38px 0 12px;letter-spacing:-.015em}
.rechtstext h3{margin:24px 0 8px;font-size:19px}
.rechtstext p,.rechtstext ul{margin-top:12px}
.rechtstext ul{padding-left:22px}
.rechtstext li{margin-top:6px}
.rechtstext dl{margin-top:14px;border-top:2px solid var(--schwarz)}
.rechtstext dt{font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.08em;
  color:var(--grau);padding-top:12px}
.rechtstext dd{padding-bottom:12px;border-bottom:2px solid var(--schwarz)}

/* ---------- Fuss ---------- */
.fuss{background:var(--schwarz);color:var(--weiss);padding:48px 0 34px;font-size:15px}
.fuss__raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
.fuss h4{font-size:12px;letter-spacing:.14em;color:var(--grau-hell);margin-bottom:12px}
.fuss a{text-decoration:underline;text-underline-offset:3px}
.fuss ul{list-style:none}
.fuss li{margin-top:7px}
.fuss__zeile{grid-column:1/-1;border-top:2px solid #333;margin-top:12px;padding-top:16px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:13px;color:var(--grau-hell)}

/* ---------- Sprungmarke ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--weiss);color:var(--schwarz);
  padding:10px 14px;font-weight:900;z-index:99}
.skip:focus{left:0}

/* ==========================================================================
   "Welches Team bist du?" — nur auf welches-team.html benutzt
   ========================================================================== */
.exp{background:var(--creme);min-height:70vh;padding:44px 0 64px}
.exp__balken{height:8px;background:var(--weiss);border:2px solid var(--schwarz);margin-bottom:30px}
.exp__balken i{display:block;height:100%;width:0;background:var(--schwarz);transition:width .35s ease}
.exp__tag{display:inline-block;background:var(--schwarz);color:var(--weiss);
  font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:12px;padding:6px 11px}
.exp h1{margin:18px 0 14px}
.exp .lead{margin-bottom:26px}
.exp__buehne>*{animation:auf .28s ease}
@keyframes auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .exp__buehne>*{animation:none}
  .exp__balken i{transition:none}
}

.frage{border:3px solid var(--schwarz);background:var(--weiss);padding:28px}
.frage__zaehler{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;color:var(--grau)}
.frage__satz{font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.015em;
  line-height:1.08;font-size:clamp(22px,4.4vw,34px);margin:16px 0 24px}
.zweiwahl{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.zweiwahl{grid-template-columns:1fr}}

.duell{display:grid;gap:12px;margin-top:22px}
.seite{border:3px solid var(--schwarz);background:var(--weiss);color:var(--ink);
  padding:24px;cursor:pointer;text-align:left;width:100%;display:block}
.seite:hover,.seite:focus-visible{background:var(--creme)}
.seite--wir{background:var(--schwarz);color:var(--weiss)}
.seite--wir:hover,.seite--wir:focus-visible{background:#141414}
.seite b{display:block;font-weight:900;font-style:italic;text-transform:uppercase;
  letter-spacing:-.01em;font-size:clamp(19px,3.4vw,26px);line-height:1.05}
.seite span{display:block;font-size:14.5px;margin-top:7px;opacity:.75}
.oder{text-align:center;font-weight:900;text-transform:uppercase;letter-spacing:.2em;
  font-size:12px;color:var(--grau)}

.spiegel{border-left:8px solid var(--schwarz);background:var(--weiss);padding:20px 22px;
  font-size:clamp(17px,2.4vw,20px);line-height:1.4;margin-top:22px}
.zaehler{font-weight:900;font-style:italic;font-size:clamp(48px,12vw,92px);line-height:.9;
  font-variant-numeric:tabular-nums}
.zaehler small{display:block;font-size:13px;font-style:normal;font-weight:900;
  text-transform:uppercase;letter-spacing:.12em;margin-top:8px;color:var(--grau)}
.wirliste{list-style:none;margin-top:22px;border-top:3px solid var(--schwarz)}
.wirliste li{padding:18px 0;border-bottom:3px solid var(--schwarz)}
.wirliste b{display:block;font-weight:900;text-transform:uppercase;letter-spacing:.02em;
  font-size:17px;margin-bottom:5px}
.leiser{background:none;border:0;padding:0;font-size:14px;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;color:var(--grau)}

/* ---------- Abstaende, die sonst zu eng sitzen ---------- */
h1.display+.lead,h2.display+.lead{margin-top:14px}
.augbraue+h1,.augbraue+h2{margin-top:8px}
.stufen+p,.stufen+.klein,.termine+p,.raster+p,.raster+.kasten{margin-top:22px}
h1,h2,h3,.display,.frage__satz,.seite b{overflow-wrap:break-word}
.karte h3{font-size:clamp(18px,2.4vw,23px)}