/* SOS-EEG — Design „Schulterschluss", Fassung 2 (04.08.2026, Axels Feedback: weniger bullig).
   Palette = Schnittmenge der vier Unterkonstruktions-Hersteller (CSS-Ernte 04.08.2026):
   K2 Systems Rot #E30513 + Anthrazit #32373C · Aerocompact Schwarz #161717 + Cyan #48E5E5
   · SL Rack Dunkelgrün #004528 + Amber #F7A600 + Dunkelrot #C11813 · Schletter Petrol
   #005055/#008887 + Grau #5A6167. Gemeinsame Designsprache aller vier: viel Weiß, EINE tiefe
   dunkle Markenfarbe, EIN sparsamer Akzent — Ingenieurs-Ästhetik. Das „Branchenband" (feine
   Linie unter dem Header) trägt die sechs Hersteller-Töne Seite an Seite.
   Firmenzuordnung bewusst NUR hier im Kommentar, nie öffentlich. */

:root {
  --tinte: #0E3237;        /* tiefes Petrol-Anthrazit — Schnittmenge der dunklen Markentöne */
  --petrol: #005055;       /* dunkle Flächen, Zahlen, Hover */
  --seegruen: #008887;     /* Links, Sekundär-Akzente */
  --cyan: #48E5E5;         /* Mikro-Akzente NUR auf dunklem Grund */
  --amber: #F7A600;        /* warme Akzente, Unterstreichungen, Zähler-Detail */
  --rot: #C11813;          /* CTA + Kampfbegriff — das EINZIGE Rot im Layout */
  --rot-hell: #E30513;     /* Hover des CTA */
  --ink: #1A2528;
  --ink-500: #5A6167;
  --papier: #FFFFFF;
  --grau-50: #F6F7F7;
  --grau-100: #EEF0F0;
  --grau-linie: #E4E7E7;
  --f-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-plakat: 'Space Grotesk', 'Inter', sans-serif;
  --maxw: 1100px;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(14, 50, 55, .07), 0 8px 24px rgba(14, 50, 55, .05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--ink);
  font: 400 16px/1.65 var(--f-body);
}
h1, h2, h3 { line-height: 1.2; color: var(--tinte); margin: 0 0 .5em; }
h1 { font-size: 34px; } h2 { font-size: 25px; } h3 { font-size: 18px; }
p { margin: 0 0 1em; }
a { color: var(--seegruen); }
a:hover { color: var(--petrol); }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: #fff; padding: 8px 14px; z-index: 99; }

/* ---- Plakat-Headlines: Space Grotesk Bold — technisch, nicht brüllend ---- */
.plakat, .brief-kopf h1 {
  font-family: var(--f-plakat); font-weight: 700; letter-spacing: -.01em;
  line-height: 1.08;
}

/* ---- Topbar: weiß, ruhig — wie die Hersteller-Sites; darunter das feine Branchenband ---- */
.topbar { background: var(--papier); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--grau-linie); }
.topbar-in {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.marke {
  font-family: var(--f-plakat); font-weight: 700; font-size: 21px; color: var(--tinte);
  text-decoration: none; letter-spacing: -.01em;
}
.marke-sos { color: var(--rot); }
.topbar nav { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; }
.topbar nav a { color: var(--ink-500); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.topbar nav a:hover { color: var(--tinte); }
.topbar nav a.btn-alarm, .topbar nav a.btn-alarm:hover { color: #fff; }
.branchenband {
  height: 3px;
  background: linear-gradient(90deg,
    var(--rot-hell) 0 17%, var(--rot) 17% 33%, var(--amber) 33% 50%,
    #004528 50% 67%, var(--petrol) 67% 84%, var(--cyan) 84% 100%);
}

/* ---- Buttons ---- */
.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  font: 600 15px/1 var(--f-body); padding: 13px 24px; border-radius: 9px;
}
.btn-alarm { background: var(--rot); color: #fff; }
.btn-alarm:hover { background: var(--rot-hell); color: #fff; }
.btn-nacht { background: var(--tinte); color: #fff; }
.btn-nacht:hover { background: var(--petrol); color: #fff; }
.btn-ghost { background: transparent; color: var(--tinte); border: 1.5px solid var(--grau-linie); }
.btn-ghost:hover { border-color: var(--tinte); }

/* ---- Layout ---- */
.seite { max-width: var(--maxw); margin: 0 auto; padding: 40px 20px 64px; }
.seite.schmal { max-width: 640px; }
.lead { font-size: 17.5px; color: var(--ink-500); max-width: 720px; }
.hinweis { font-size: 13.5px; color: var(--ink-500); }
.card {
  background: var(--papier); border: 1px solid var(--grau-linie); border-radius: var(--radius);
  padding: 24px 26px; box-shadow: var(--shadow);
}

/* ---- Hero: hell, luftig; das Rot sitzt nur im Kampfbegriff und im CTA ---- */
.hero { background: var(--grau-50); border-bottom: 1px solid var(--grau-linie); padding: 64px 20px 52px; }
.hero-in { max-width: var(--maxw); margin: 0 auto; }
.hero .kicker {
  font: 600 12.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--seegruen); margin-bottom: 16px;
}
.hero h1 { color: var(--tinte); font-size: clamp(32px, 5.4vw, 56px); margin: 0 0 14px; }
.hero h1 .rot { color: var(--rot); }
.hero p { color: var(--ink-500); font-size: 18px; max-width: 640px; }
.hero .cta-zeile { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; align-items: center; }

/* Zähler: ruhige Karten, Zahl in Petrol, feine Amber-Linie als Wärme */
.zaehler { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.zaehler .z {
  min-width: 150px; background: var(--papier); border: 1px solid var(--grau-linie);
  border-radius: var(--radius); padding: 14px 18px 12px; box-shadow: var(--shadow);
}
.zaehler .z b {
  display: block; font-family: var(--f-plakat); font-weight: 700; font-size: 32px;
  color: var(--petrol); font-variant-numeric: tabular-nums; line-height: 1.15;
}
.zaehler .z b::after { content: ''; display: block; width: 26px; height: 3px; background: var(--amber); margin-top: 6px; border-radius: 2px; }
.zaehler .z span { font-size: 12px; color: var(--ink-500); letter-spacing: .05em; text-transform: uppercase; }
.zaehler-chip {
  display: inline-block; background: var(--grau-100); border-radius: 999px;
  padding: 7px 16px; font-size: 14px; color: var(--ink);
}
.countdown { font-size: 14.5px; color: var(--ink-500); margin-top: 20px; }
.countdown b { color: var(--rot); font-variant-numeric: tabular-nums; }

/* ---- Sektionen Startseite ---- */
.sek { max-width: var(--maxw); margin: 0 auto; padding: 48px 20px 8px; }
.sek > h2 { font-size: clamp(23px, 3.2vw, 30px); }
.vier-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 22px; }
.vz {
  background: var(--papier); border: 1px solid var(--grau-linie); border-top: 3px solid var(--amber);
  border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow);
}
.vz b { display: block; font-family: var(--f-plakat); font-weight: 700; font-size: 28px; color: var(--petrol); line-height: 1.15; margin-bottom: 8px; }
.vz p { font-size: 14.5px; color: var(--ink-500); margin: 0; }
.forderungen { counter-reset: f; list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.forderungen li {
  counter-increment: f; background: var(--papier); border: 1px solid var(--grau-linie);
  border-radius: var(--radius); padding: 18px 22px 18px 66px; position: relative; box-shadow: var(--shadow);
  font-size: 16.5px;
}
.forderungen li::before {
  content: counter(f); position: absolute; left: 18px; top: 16px;
  width: 34px; height: 34px; border-radius: 50%; background: var(--tinte); color: var(--amber);
  font: 700 17px/34px var(--f-body); text-align: center;
}

/* ---- Formulare ---- */
form .feld { margin-bottom: 14px; }
label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; color: var(--tinte); }
label .opt { font-weight: 400; color: var(--ink-500); }
input[type=text], input[type=email], input[type=number], select, textarea {
  width: 100%; padding: 11px 12px; border: 1.5px solid var(--grau-linie); border-radius: 9px;
  font: 400 15px/1.4 var(--f-body); color: var(--ink); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--seegruen); outline-offset: 1px; border-color: var(--seegruen); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-500); margin-bottom: 10px; }
.check input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--petrol); }
.check b { color: var(--ink); }
.form-fehler { color: var(--rot); font-weight: 600; font-size: 14.5px; min-height: 1.2em; }
.form-ok { background: #EFF7F1; border: 1px solid var(--seegruen); border-radius: var(--radius); padding: 18px 20px; }
/* Honeypot: unsichtbar für Menschen, Screenreader ausgenommen (aria-hidden im Markup) */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Formular-Tabs (Unternehmen / Bürger) */
.tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.tabs button {
  border: 1.5px solid var(--grau-linie); background: #fff; border-radius: 999px;
  font: 600 14.5px/1 var(--f-body); padding: 10px 18px; cursor: pointer; color: var(--ink-500);
}
.tabs button[aria-selected="true"] { background: var(--tinte); border-color: var(--tinte); color: #fff; }

/* ---- Offener Brief ---- */
.brief { max-width: 780px; margin: 0 auto; padding: 44px 20px 64px; }
.brief-kopf h1 { font-size: clamp(28px, 4.6vw, 42px); color: var(--tinte); margin-bottom: 8px; }
.brief-kopf h1 .rot { color: var(--rot); }
.brief-sub { font-size: 17px; color: var(--ink-500); max-width: 640px; }
.brief p, .brief li { font-size: 16.5px; }
.brief-anrede { margin-top: 26px; }
.brief ul, .brief-forderungen { padding-left: 22px; }
.brief-forderungen li { margin-bottom: 10px; }
.brief-unterzeichnende { margin-top: 30px; }
.brief-transparenz { font-size: 13.5px; color: var(--ink-500); border-top: 1px solid var(--grau-linie); padding-top: 14px; }
.unterzeichner { margin: 26px 0; }
.unterzeichner table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--grau-linie); border-radius: var(--radius); overflow: hidden; font-size: 14.5px; }
.unterzeichner th, .unterzeichner td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--grau-linie); }
.unterzeichner th { background: var(--grau-100); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); }
.unterzeichner .num { text-align: right; font-variant-numeric: tabular-nums; }
.brief-cta { margin-top: 30px; }

/* ---- News-Ticker ---- */
.news-eintrag {
  background: #fff; border: 1px solid var(--grau-linie); border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.news-eintrag.angeheftet { border-left: 3px solid var(--amber); }
.news-eintrag h2 { font-size: 18px; margin: 6px 0; }
.news-eintrag p { font-size: 15px; margin-bottom: 6px; }
.news-meta { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink-500); }
.news-quelle { font-size: 13px; }
.chip { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.chip-parlament { background: #E9F0F4; color: #33566B; }
.chip-medien { background: #E6F3F3; color: var(--petrol); }
.chip-kampagne { background: #F9ECEA; color: var(--rot); }
.chip-meilenstein { background: #FBF1DC; color: #8A6410; }

/* ---- FAQ ---- */
details.faq { background: #fff; border: 1px solid var(--grau-linie); border-radius: 10px; padding: 0 18px; margin-bottom: 10px; }
details.faq summary { font-weight: 600; padding: 14px 0; cursor: pointer; color: var(--tinte); }
details.faq p { color: var(--ink-500); font-size: 15px; }

/* ---- Footer: der einzige dunkle Block — eleganter Abschluss ---- */
.fuss { background: var(--tinte); color: #B9C8CB; margin-top: 64px; }
.fuss-in { max-width: var(--maxw); margin: 0 auto; padding: 36px 20px 42px; }
.fuss a { color: #fff; }
.fuss-claim { color: #fff; font-size: 16px; }
.fuss-claim b { color: var(--amber); }
.fuss-transparenz { font-size: 13.5px; }
.fuss nav { font-size: 14px; margin: 10px 0; }
.fuss-tags { font-size: 13px; color: #6F8489; margin: 6px 0 0; }

/* ---- Danke-Seite (nach DOI-Bestätigung) ---- */
.danke { max-width: 720px; text-align: center; }
.danke-check {
  width: 64px; height: 64px; margin: 8px auto 18px; border-radius: 50%;
  background: var(--seegruen); color: #fff; font: 700 34px/64px var(--f-body);
}
.danke h1 { font-size: clamp(30px, 5vw, 44px); }
.danke-lead { font-size: 17.5px; color: var(--ink-500); max-width: 560px; margin: 0 auto 8px; }
.danke-spruch {
  margin: 30px auto 18px; padding: 22px 26px; max-width: 560px;
  background: var(--grau-50); border-radius: var(--radius); border-left: 4px solid var(--amber);
  text-align: left;
}
.danke-spruch p { font-family: var(--f-plakat); font-weight: 700; font-size: 22px; line-height: 1.35; color: var(--tinte); margin: 0; }
.danke-spruch b { color: var(--petrol); }
.danke-mut { max-width: 560px; margin: 0 auto 30px; color: var(--ink-500); font-size: 15.5px; }
.danke-mut b { color: var(--ink); }
.danke h2 { font-size: 19px; margin-top: 8px; }
.danke-share { justify-content: center; }
.danke-widerruf { margin-top: 34px; }

/* ---- Share-Leiste (nur Intent-Links, keine Fremd-Skripte) ---- */
.share { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.share a, .share button {
  display: inline-block; border: 1.5px solid var(--grau-linie); background: #fff; color: var(--ink);
  border-radius: 9px; padding: 9px 14px; font: 600 13.5px/1 var(--f-body); text-decoration: none; cursor: pointer;
}
.share a:hover, .share button:hover { border-color: var(--petrol); color: var(--petrol); }

/* ---- Druck (/brief geht an MdB-Büros) ---- */
@media print {
  .topbar, .fuss, .brief-cta, .noprint, .branchenband { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .brief { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
}

@media (max-width: 640px) {
  .topbar nav { gap: 4px 12px; font-size: 13.5px; }
  .zaehler { gap: 10px; }
  .zaehler .z { min-width: 42%; }
  .zaehler .z b { font-size: 26px; }
}