/* =========================================================================
   Ingo Jäger · Wahlkampfseite · Design-System
   Statischer One-Pager · DSGVO (lokale Fonts, keine externen Requests)
   Palette [GEPRÜFT gegen IJ_Plakat.pdf]: Rot #B80808 · Schwarz · Weiß · Grün #173B11
   Register A (seriös/dezent). 6 Apple-Achsen: siehe SPEC §1.
   ========================================================================= */

/* ---------- Fonts (lokal, OFL) ------------------------------------------- */
@font-face{font-family:"Oswald";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/oswald-600.woff2") format("woff2")}
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/oswald-700.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/source-sans-3-400.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/source-sans-3-600.woff2") format("woff2")}

/* ---------- Design-Tokens ------------------------------------------------ */
:root{
  --rot:#B80808; --rot-dunkel:#8E0606; --rot-hell:#D64545;
  --schwarz:#111110; --tinte:#1C1B1A; --grau:#5C5B58; --grau-hell:#8A8985;
  --weiss:#FFFFFF; --papier:#FAFAF8; --papier-2:#F2F1EC;
  --gruen:#1B5E34; --gruen-tief:#173B11;
  --gruen-flagge:#009736;            /* offizielles Palästina-Grün (heller, für Akzente) */
  --gruen-bar:#2FA15A;               /* linker Randbalken, dezent-hell */
  --linie:#E5E3DD;

  --head:"Oswald",Impact,"Haettenschweiler","Arial Narrow",system-ui,sans-serif;
  --text:"Source Sans 3",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --maxw:72rem; --maxw-text:68ch; --header-h:72px;
  --greenbar:20px;                   /* linker Rand des grünen L (dezent) */
  --r:10px; --r-sm:6px;
  --shadow-1:0 1px 2px rgba(17,17,16,.06);
  --shadow-2:0 10px 30px rgba(17,17,16,.10);

  --resp-fast:.30s; --resp:.42s; --resp-slow:.6s;
  --ease:cubic-bezier(.2,.7,.2,1);   /* kritisch gedämpft, kein Overshoot */

  color-scheme:light;                /* Memory web-force-dark-mode */
}

/* ---------- Reset / Basis ------------------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--text);font-size:1.0625rem;line-height:1.6;
  color:var(--tinte);background:var(--papier);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;                   /* nicht hidden – Memory: iOS-Scrollcontainer-Falle (Licht) */
}
/* Grünes "L" wie im Plakat: linker Rand (dunkelgrün, dezent) läuft voll durch;
   das untere Bein des L trägt der Footer (Verlauf dunkel→hell, siehe unten). */
body::before{content:"";position:fixed;left:0;top:0;bottom:0;width:var(--greenbar);z-index:60;
  background:linear-gradient(180deg,#0C1B0B 0%,#123010 70%,#16380F 100%);pointer-events:none}
@media (max-width:900px){ :root{--greenbar:8px} }
h1,h2,h3,.kicker{font-family:var(--head);color:var(--schwarz);font-weight:700}
h1{font-size:clamp(2.5rem,6vw,4.5rem);line-height:1.02;letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,3.6vw,2.75rem);line-height:1.08;letter-spacing:0;margin-bottom:.4em}
h3{font-size:1.3rem;line-height:1.15;margin-bottom:.35em}
p{max-width:var(--maxw-text)}
a{color:inherit}
img,svg{display:block;max-width:100%}
strong{color:var(--schwarz);font-weight:600}
::selection{background:var(--rot);color:#fff}
:focus-visible{outline:3px solid var(--rot);outline-offset:2px;border-radius:3px}
a,.btn,.card,button{touch-action:manipulation}   /* REAKTION: kein 300ms-Delay */

.wrap{width:min(var(--maxw),92%);margin-inline:auto}
.kicker{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rot)}
.lead{font-size:clamp(1.1rem,2vw,1.3rem);color:var(--grau);max-width:60ch}
.small{font-size:.875rem;letter-spacing:.01em;color:var(--grau)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--rot);color:#fff;
  padding:10px 18px;border-radius:0 0 8px 0;font-family:var(--head);font-weight:700;z-index:100}
.skip-link:focus{left:0}

/* ---------- Palästina-Akzentband: entfernt (Grün trägt jetzt der linke Balken) */
.accent-band{display:none}
.accent-band--legacy{height:5px;width:100%;display:flex;overflow:hidden}
.accent-band span{display:block;height:100%}
.accent-band .s1{flex:0 0 32%;background:var(--rot)}
.accent-band .s2{flex:0 0 24%;background:var(--schwarz)}
.accent-band .s3{flex:0 0 20%;background:var(--weiss);box-shadow:inset 0 0 0 1px var(--linie)}
.accent-band .s4{flex:1 1 auto;background:var(--gruen-tief)}
/* Draw-In beim Scrollen */
.accent-band.draw{transform:scaleX(0);transform-origin:left;transition:transform var(--resp-slow) var(--ease)}
.accent-band.draw.in{transform:scaleX(1)}

/* ---------- Buttons ------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:600;
  font-size:1rem;letter-spacing:.02em;padding:13px 26px;border-radius:var(--r);text-decoration:none;
  min-height:44px;transition:transform var(--resp-fast) var(--ease),background-color .2s,border-color .2s,box-shadow .2s}
.btn-primary{background:var(--rot);color:#fff;box-shadow:0 8px 22px rgba(184,8,8,.22)}
.btn-primary:hover{background:var(--rot-dunkel)}
.btn-outline{border:1.5px solid var(--tinte);color:var(--tinte)}
.btn-outline:hover{background:var(--papier-2)}
.btn:active{transform:scale(.98)}          /* REAKTION: Feedback auf Press */
.btn-lg{padding:16px 32px;font-size:1.1rem}

/* ---------- Header (Material-Layer) -------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,250,248,.72);
  backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  transition:box-shadow .25s,background-color .25s}
.site-header.scrolled{box-shadow:0 1px 0 var(--linie),0 6px 20px rgba(17,17,16,.05);background:rgba(250,250,248,.9)}
.nav{display:flex;align-items:center;min-height:var(--header-h);gap:20px}
.brand{display:inline-flex;align-items:baseline;gap:.4em;text-decoration:none;font-family:var(--head);
  font-weight:700;font-size:1.3rem;color:var(--schwarz);letter-spacing:.01em}
.brand .emblem{align-self:center}
.brand-logo{height:42px;width:auto;display:block}
@media (max-width:560px){ .brand-logo{height:36px} }
/* 4-Farb-Emblem (abstrahierte Flagge aus "Ingo-per") – überall wiederverwendbar, ohne IDs */
.emblem{width:1.55em;height:1.55em;border-radius:5px;overflow:hidden;flex:0 0 auto;
  box-shadow:0 1px 2px rgba(17,17,16,.18)}
.emblem-lg{width:64px;height:64px;border-radius:12px}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin-left:auto}
.nav-links a{font-family:var(--head);font-weight:600;font-size:.98rem;letter-spacing:.02em;
  color:var(--tinte);text-decoration:none;padding:9px 14px;border-radius:var(--r-sm);
  transition:color .2s,background-color .2s}
.nav-links a:hover{color:var(--rot);background:rgba(184,8,8,.06)}
.nav-links a[aria-current="true"]{color:var(--rot)}
.nav-cta{margin-left:8px}
.btn-nav{padding:10px 20px;font-size:.92rem;min-height:44px}
/* Sprachumschalter DE/EN/AR */
.lang-switch{display:flex;align-items:center;gap:5px;margin-left:10px;padding-left:10px;
  border-left:1px solid var(--linie);font-family:var(--text)}
.lang-switch a{font-family:var(--text);font-weight:600;font-size:.8rem;letter-spacing:.02em;
  color:var(--grau);text-decoration:none;padding:6px 7px;border-radius:var(--r-sm);
  transition:color .2s,background-color .2s}
.lang-switch a:hover{color:var(--rot);background:rgba(184,8,8,.06)}
.lang-switch a[aria-current="true"]{color:var(--rot)}
.lang-switch .sep{color:var(--grau-hell);font-size:.8rem}
/* Nav-CTA gegen .nav-links a absichern (Memory nav-cta-spezifitaets-falle) */
.nav-links a.btn-nav,.nav-links a.btn-nav:hover{color:#fff;background:var(--rot)}
.nav-links a.btn-nav:hover{background:var(--rot-dunkel)}
.menu-toggle{display:none;align-items:center;gap:9px;background:transparent;border:1.5px solid var(--linie);
  border-radius:var(--r-sm);padding:10px 16px;cursor:pointer;color:var(--schwarz);font-family:var(--head);
  font-weight:600;font-size:.95rem;min-height:44px}
.menu-toggle .bars,.menu-toggle .bars::before,.menu-toggle .bars::after{content:"";display:inline-block;
  width:16px;height:2px;background:var(--rot);position:relative}
.menu-toggle .bars::before{position:absolute;left:0;top:-5px}
.menu-toggle .bars::after{position:absolute;left:0;top:5px}

/* ---------- Sektionen ---------------------------------------------------- */
.section{padding-block:clamp(56px,8vw,104px)}
.section-sm{padding-block:clamp(40px,6vw,72px)}
.bg-papier{background:var(--papier)}
.bg-papier-2{background:var(--papier-2)}
.bg-schwarz{background:var(--schwarz);color:#EDEDEA}
.bg-schwarz h1,.bg-schwarz h2,.bg-schwarz h3{color:#fff}
.center{text-align:center}
.center p{margin-inline:auto}

/* ---------- Hero --------------------------------------------------------- */
.hero{padding-block:clamp(40px,6vw,80px);position:relative;overflow:clip}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,64px);align-items:center}
.hero-text .kicker{margin-bottom:18px}
.hero h1{margin-bottom:.35em}
.hero h1 .rot{color:var(--rot)}
.hero .status{display:inline-block;margin-top:6px;font-family:var(--head);font-weight:600;font-size:.95rem;
  letter-spacing:.03em;color:#fff;background:var(--schwarz);padding:6px 14px;border-radius:var(--r-sm)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-media{position:relative}
.hero-media .frame{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-2);aspect-ratio:4/5}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
/* langsamer, dezenter Ken-Burns (BEWEGUNG) */
.hero-media.kb img{animation:kenburns 18s ease-out both}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1)}}

/* Kinematischer Hero (Modern-Hero, vanilla): full-bleed Porträt, Clip-Reveal + Zoom-Settle */
.hero-cine{position:relative;min-height:88vh;display:flex;align-items:center;padding-block:0;background:var(--schwarz)}
.hero-cine .hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-cine .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.hero-cine .hero-scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(9,10,8,.86),rgba(9,10,8,.5) 52%,rgba(9,10,8,.2)),
             linear-gradient(0deg,rgba(9,10,8,.6),transparent 44%)}
.hero-cine .hero-inner{position:relative;z-index:2;padding-block:clamp(48px,12vh,140px)}
.hero-cine .hero-text{max-width:44rem}
.hero-cine .kicker{color:var(--rot-hell)}
.hero-cine h1{color:#fff}
.hero-cine .hero-text h1 .rot{color:var(--rot-hell)}
.hero-cine .lead{color:#ECEBE8;max-width:52ch}
.hero-cine .btn-outline.hero-outline,.hero-cine .btn-outline.hero-outline:hover{border-color:rgba(255,255,255,.75);color:#fff}
.hero-cine .btn-outline.hero-outline:hover{background:rgba(255,255,255,.14)}
@media (prefers-reduced-motion:no-preference){
  .hero-cine .hero-bg{animation:heroClip 1.2s var(--ease)}
  .hero-cine .hero-bg img{animation:heroZoom 1.7s var(--ease)}
}
@keyframes heroClip{from{clip-path:inset(15% 13% 15% 13% round 14px)}to{clip-path:inset(0 0 0 0)}}
@keyframes heroZoom{from{transform:scale(1.14)}to{transform:scale(1)}}
@media (max-width:600px){
  .hero-cine{min-height:90vh;align-items:flex-end}       /* Text nach UNTEN, Gesicht oben frei */
  /* Ingo ganz nach rechts (Schulter an die Kante), Gesicht in der oberen Hälfte */
  .hero-cine .hero-bg img{object-position:0% 6%}
  /* Scrim: unten stark (Text) + links, oben klar (Gesicht sichtbar) */
  .hero-cine .hero-scrim{background:
    linear-gradient(0deg,rgba(9,10,8,.9) 0%,rgba(9,10,8,.62) 32%,rgba(9,10,8,.12) 60%,rgba(9,10,8,0) 78%),
    linear-gradient(90deg,rgba(9,10,8,.72) 0%,rgba(9,10,8,.28) 46%,rgba(9,10,8,0) 82%)}
  .hero-cine .hero-inner{padding-block:26px 32px}
  .hero-cine .hero-text{max-width:none;text-shadow:0 1px 14px rgba(0,0,0,.55)}
  .hero-cine h1{font-size:clamp(2.1rem,9vw,2.7rem);line-height:1.04;margin-bottom:.6em}
  .hero-cine .lead{font-size:1.02rem;line-height:1.5}
  .hero-cine .hero-actions{margin-top:22px}
  .hero-cine .kicker{color:#F26D5B;margin-bottom:12px}
}

/* ---------- Wahl-Fakten-Band (schwarz, wie Plakat-Balken) ---------------- */
.fakten{background:var(--schwarz);color:#EDEDEA}
.fakten .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding-block:20px}
.fakten .item{display:flex;align-items:baseline;gap:8px;font-size:1rem}
.fakten .item b{font-family:var(--head);font-weight:700;color:#fff;font-size:1.15rem}
.fakten .item .hl{color:var(--rot-hell);font-family:var(--head);font-weight:700}
.fakten .sep{color:#4A4A47}

/* ---------- Wahl-Fakten als eigener Karten-Bereich (herausstechend) ------ */
.wahlkarten{position:relative}
.wk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.wk-card{position:relative;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);
  text-align:center;box-shadow:var(--shadow-1);overflow:hidden}
.wk-card::before{content:"";position:absolute;left:0;top:0;right:0;height:5px;z-index:1}
.wk-card.c-rot::before{background:var(--rot)}
.wk-card.c-schwarz::before{background:var(--schwarz)}
.wk-card.c-gruen::before{background:var(--gruen-flagge)}
.wk-media{aspect-ratio:3/2;overflow:hidden;background:var(--papier-2)}
.wk-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.wk-card:hover .wk-media img{transform:scale(1.04)}
.wk-body{padding:22px 26px 28px}
.wk-card .wk-eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.wk-card .wk-value{font-family:var(--head);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.05;color:var(--schwarz);margin-top:8px}
.wk-card .wk-note{font-size:.95rem;color:var(--grau);margin-top:8px}
.wk-cta{display:flex;justify-content:center;margin-top:34px}

/* ---------- Einsatz-Bereich (vollständiger, belegter Record) ------------- */
.einsatz-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:36px}
.einsatz-group{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);padding:26px 28px;box-shadow:var(--shadow-1)}
.einsatz-group h3{display:flex;align-items:center;gap:10px;color:var(--schwarz);margin-bottom:14px}
.einsatz-group h3 .gi{width:26px;height:26px;color:var(--rot);flex:0 0 auto}
.einsatz-list{list-style:none;display:grid;gap:12px}
.einsatz-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-size:.98rem;color:var(--tinte);
  padding-bottom:12px;border-bottom:1px solid var(--papier-2)}
.einsatz-list li:last-child{border-bottom:0;padding-bottom:0}
.einsatz-list .txt{flex:1 1 60%}
.tag{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap}
.tag-ok{background:rgba(0,151,54,.12);color:#0B6B2E}
.tag-req{background:rgba(28,27,26,.07);color:var(--tinte)}          /* neutral – "von mir eingebracht", nicht negativ */
.tag-info{background:transparent;color:var(--grau);box-shadow:inset 0 0 0 1px var(--linie)}
.einsatz-note{margin-top:24px;font-size:.95rem;color:var(--grau)}

/* ---------- Ortsbild-Bande (lokaler Anker) ------------------------------- */
.ortband{position:relative;min-height:clamp(260px,34vw,420px);display:grid;place-items:center;overflow:hidden;background:var(--schwarz)}
.ortband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ortband::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,17,16,.74),rgba(17,17,16,.32))}
.ortband .inner{position:relative;z-index:1;color:#fff;padding:clamp(32px,5vw,64px);width:min(var(--maxw),92%);margin-inline:auto}
.ortband .kicker{color:var(--gruen-flagge)}
.ortband h2{color:#fff;max-width:20ch}
.ortband p{color:#EDECEA;max-width:46ch;margin-top:10px}
.ortband .credit{position:absolute;right:10px;bottom:8px;z-index:1;font-size:.68rem;color:rgba(255,255,255,.55)}
.split .credit{display:block;font-size:.72rem;color:var(--grau-hell);margin-top:8px}
.split .media.media-wide{aspect-ratio:3/2}
.ziele--stack{grid-template-columns:1fr}

/* ---------- Persönlich-Block --------------------------------------------- */
.persoenlich .emblem-wrap{margin:24px 0 4px}
.persoenlich .emblem-wrap .cap{display:block;padding-left:16px;border-left:3px solid #2FA15A;
  font-family:var(--head);font-weight:600;font-size:1.05rem;line-height:1.5;color:var(--tinte);max-width:40ch}
.persoenlich .p-quote{font-family:var(--head);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.7rem);
  line-height:1.3;color:var(--schwarz);border-left:4px solid var(--gruen-flagge);padding-left:22px;margin:6px 0 18px}

/* ---------- Grid / Karten ------------------------------------------------ */
.grid{display:grid;gap:22px;margin-top:36px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);padding:28px;
  box-shadow:var(--shadow-1)}
.card .icon{width:44px;height:44px;margin-bottom:16px;color:var(--rot)}
.card h3{color:var(--schwarz)}
.card ul{list-style:none;margin-top:14px;display:grid;gap:9px}
.card li{position:relative;padding-left:20px;color:var(--grau);font-size:.98rem}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:2px;
  background:var(--gruen);transform:rotate(45deg)}

/* ---------- Bilanz ------------------------------------------------------- */
.bilanz{display:grid;gap:14px;margin-top:34px;max-width:52rem}
.bilanz-item{display:flex;gap:14px;align-items:flex-start;background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--r);padding:18px 22px}
.bilanz-item .check{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:rgba(27,94,52,.12);
  color:var(--gruen);display:grid;place-items:center;margin-top:2px}
.bilanz-item .check svg{width:15px;height:15px}
.bilanz-item h3{font-family:var(--text);font-weight:600;font-size:1.05rem;color:var(--schwarz);margin:0 0 3px}
.bilanz-item p{font-size:.96rem;color:var(--grau);margin:0}
.bilanz-item .q{font-size:.82rem;color:var(--rot);text-decoration:none;font-weight:600;white-space:nowrap}
.bilanz-item .q:hover{text-decoration:underline}

/* ---------- Stat-Kacheln ------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.stat{text-align:center;padding:24px 16px;border-radius:var(--r);background:var(--papier-2);border:1px solid var(--linie)}
.stat .num{font-family:var(--head);font-weight:700;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;color:var(--rot)}
.stat .lbl{margin-top:8px;font-size:.95rem;color:var(--grau)}

/* ---------- Haltung / Zitat ---------------------------------------------- */
.quote{border-left:4px solid var(--rot);padding:6px 0 6px 26px;margin-top:10px}
.quote p{font-family:var(--head);font-weight:600;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.25;
  color:var(--schwarz);letter-spacing:0;max-width:34ch}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,56px);align-items:center}
.split .media{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-2);aspect-ratio:4/5}
.split .media img{width:100%;height:100%;object-fit:cover}

/* ---------- Ziele-Liste -------------------------------------------------- */
.ziele{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 28px;margin-top:32px}
.ziel{display:flex;gap:14px;align-items:flex-start}
.ziel .dot{flex:0 0 10px;width:10px;height:10px;border-radius:2px;margin-top:9px;transform:rotate(45deg);
  background:var(--rot)}
.ziel:nth-child(3n) .dot{background:var(--gruen)}
.ziel h3{font-family:var(--text);font-weight:600;font-size:1.05rem;margin:0 0 3px;color:var(--schwarz)}
.ziel p{font-size:.95rem;color:var(--grau);margin:0}

/* ---------- So wählen (Stimmzettel) -------------------------------------- */
.ballot{display:flex;gap:12px;justify-content:center;margin:28px 0}
.ballot .box{width:56px;height:56px;border:3px solid var(--schwarz);border-radius:6px;display:grid;place-items:center;background:#fff}
.ballot .box svg{width:38px;height:38px;color:var(--rot)}

/* ---------- Kontakt / Formular ------------------------------------------- */
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,48px);margin-top:34px}
.social-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.social-row a{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border:1px solid var(--linie);
  border-radius:var(--r);background:var(--weiss);text-decoration:none;color:var(--schwarz);font-weight:600;font-size:.96rem}
.social-row a:hover{border-color:var(--rot);color:var(--rot)}
.social-row svg{width:20px;height:20px}
form.kf{display:grid;gap:14px}
.kf label{font-weight:600;font-size:.92rem;color:var(--schwarz);display:block;margin-bottom:5px}
.kf input,.kf textarea{width:100%;padding:12px 14px;border:1.5px solid var(--linie);border-radius:var(--r-sm);
  font:inherit;background:#fff;color:var(--tinte)}
.kf input:focus,.kf textarea:focus{border-color:var(--rot);outline:none}
.kf .consent{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--grau)}
.kf .consent input{width:auto;margin-top:3px}

/* ---------- Footer ------------------------------------------------------- */
/* Footer = unteres Bein des grünen "L": Verlauf dunkel (links) → heller (rechts), wie Plakat */
.site-footer{background:linear-gradient(100deg,#0B1A0A 0%,#123010 45%,#1C5217 100%);color:#CFE0D2}
.footer-inner{padding-block:44px}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.footer-brand{display:inline-block;text-decoration:none}
.footer-logo{display:block;height:40px;width:auto;background:#FAFAF8;padding:8px 12px;border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.25)}
.footer-vsdp{font-size:.85rem;color:#A9C3AC;max-width:34ch;margin-top:10px}
.footer-social{display:flex;gap:12px}
.footer-social a{color:#CFE0D2}.footer-social a:hover{color:#fff}
.footer-social svg{width:22px;height:22px}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:28px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.16);font-size:.88rem;color:#A9C3AC}
.footer-bottom a{color:#EAF3EB;text-decoration:none}.footer-bottom a:hover{text-decoration:underline}

/* ---------- Rechtsseiten ------------------------------------------------- */
.legal{padding-block:clamp(48px,8vw,90px);min-height:70vh}
.legal .wrap{max-width:680px}
.legal h1{margin-bottom:.5em}
.legal h2{font-size:1.3rem;margin-top:1.6em;margin-bottom:.4em;color:var(--schwarz)}
.legal p{margin-top:.8em;color:var(--tinte)}
.legal a{color:var(--rot);text-decoration:underline}
.legal .todo{background:#FFF4CC;border-radius:6px;padding:2px 8px;color:#7a5c00;font-size:.92em}

/* ---------- Belegseite --------------------------------------------------- */
.beleg{max-width:44rem}
.beleg h2{margin-top:1.8em}
.beleg blockquote{border-left:3px solid var(--linie);padding:4px 0 4px 20px;margin:16px 0;color:var(--grau);
  font-style:italic}
.beleg .src{font-size:.85rem}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0}
.table-scroll table{margin:0}
.beleg table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.95rem}
.table-scroll table{min-width:520px}
.beleg th,.beleg td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie);vertical-align:top}
.beleg th{font-family:var(--head);font-weight:600;color:var(--schwarz)}
.beleg .erg{white-space:nowrap;color:var(--rot);font-weight:600}
.beleg ul.quellen{list-style:none;display:grid;gap:10px;margin-top:14px}
.beleg ul.quellen li{padding-left:18px;position:relative}
.beleg ul.quellen li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;
  background:var(--gruen);transform:rotate(45deg)}

/* ---------- Scroll-Reveal (BEWEGUNG, damping 1.0 / kein Overshoot) ------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity var(--resp) var(--ease),transform var(--resp) var(--ease)}
.rv.in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}
.rv-stagger>*{opacity:0;transform:translateY(16px);transition:opacity var(--resp) var(--ease),transform var(--resp) var(--ease)}
.rv-stagger.in>*{opacity:1;transform:none}
.rv-stagger.in>*:nth-child(2){transition-delay:.08s}
.rv-stagger.in>*:nth-child(3){transition-delay:.16s}
.rv-stagger.in>*:nth-child(4){transition-delay:.24s}
.rv-stagger.in>*:nth-child(5){transition-delay:.32s}
.rv-stagger.in>*:nth-child(6){transition-delay:.40s}
.rv-stagger.in>*:nth-child(7){transition-delay:.48s}
.rv-stagger.in>*:nth-child(8){transition-delay:.56s}
html:not(.js) .rv-stagger>*{opacity:1;transform:none}

/* Richtungs-Reveals + Scale-in (Bib „Landing Page_Animation_immer", vanilla + gedämpft).
   Immer zusammen mit .rv setzen (class="rv rv-l"). Reihenfolge NACH .rv/.rv.in – gleiche
   Spezifität, spätere Regel gewinnt den Startzustand; .rv.in räumt beim Eintritt auf. */
.rv-l{transform:translateX(-42px)}
.rv-r{transform:translateX(42px)}
.rv-s{transform:scale(.92)}
.rv-l.in,.rv-r.in,.rv-s.in{transform:none}
html:not(.js) .rv-l,html:not(.js) .rv-r,html:not(.js) .rv-s{transform:none}
@media (max-width:760px){ .rv-l,.rv-r{transform:translateY(16px)} }  /* mobil kein Seitwärts */

/* Word-Appear (Bib „Digital Serenity") – Wörter erscheinen einzeln, nur Hero-Text.
   JS setzt die Animation je nach data-delay; .wa startet unsichtbar. */
@keyframes word-appear{
  0%{opacity:0;transform:translateY(26px) scale(.9);filter:blur(8px)}
  55%{opacity:.85;transform:translateY(8px) scale(.97);filter:blur(2px)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
.wa{opacity:0}
.wa.word-inline{display:inline-block}
html:not(.js) .wa{opacity:1;animation:none}
@media (prefers-reduced-motion:reduce){ .wa{opacity:1!important;animation:none!important} }

/* Header gleitet beim Laden herein */
@media (prefers-reduced-motion:no-preference){ .site-header{animation:hdr-in .5s var(--ease)} }
@keyframes hdr-in{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* Bild-Zoom on Hover (nur in overflow:hidden-Rahmen) */
.split .media img,.ortband>img{transition:transform .6s var(--ease)}
.split .media:hover img,.ortband:hover>img{transform:scale(1.045)}

/* ---------- Hover-Transforms (HINTER Reveal-Block – Memory Spezifitätsfalle) */
.card{transition:transform var(--resp) var(--ease),box-shadow var(--resp) var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
.bilanz-item{transition:transform var(--resp-fast) var(--ease),border-color .2s}
.bilanz-item:hover{transform:translateY(-2px);border-color:#D9D7D0}

/* ---------- Responsiv ---------------------------------------------------- */
@media (max-width:900px){
  .menu-toggle{display:inline-flex;margin-left:auto}
  .nav-links{position:absolute;top:var(--header-h);left:0;right:0;flex-direction:column;align-items:stretch;
    gap:4px;margin:0;background:var(--weiss);border-bottom:1px solid var(--linie);
    box-shadow:0 24px 40px rgba(17,17,16,.12);padding:16px clamp(20px,5vw,48px) 24px;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 14px;border-radius:8px}
  .nav-cta{margin:8px 0 0}.nav-cta .btn{width:100%;justify-content:center}
  .lang-switch{margin:10px 0 0;padding:10px 0 0;border-left:0;border-top:1px solid var(--linie);justify-content:center}
  .hero-grid{grid-template-columns:1fr}
  .hero-media{max-width:420px;margin-inline:auto;order:-1}
  .split{grid-template-columns:1fr}
  .kontakt-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .einsatz-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .grid-3,.grid-2,.ziele,.stats,.wk-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:520px){
  .hero-actions .btn{width:100%;justify-content:center}
  .stats{grid-template-columns:1fr}
  .ballot .box{width:48px;height:48px}
}

/* ---------- Reduced motion / transparency / contrast (A11y) -------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,.rv,.rv-stagger>*{transition:none!important;animation:none!important}
  .rv,.rv-stagger>*{opacity:1;transform:none}
  .accent-band.draw{transform:none}
  .hero-media.kb img{animation:none}
}
@media (prefers-reduced-transparency:reduce){
  .site-header{background:var(--papier);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  .card,.bilanz-item,.stat{border-color:var(--tinte)}
  .lead,.card li,.stat .lbl,.ziel p{color:var(--tinte)}
}