/* ============================================================
   redlhammer.at
   Kampagnen-Website Georg Redlhammer, NEOS-Vorwahl Landtag OÖ 2027

   Aufbau dieser Datei:
   1. Schriften (lokal gehostet, kein Google-CDN)
   2. Farben und Grundwerte
   3. Grundlayout und Typografie
   4. Bausteine (Buttons, Links, Karten)
   5. Kopfbereich und Navigation
   6. Sektionen von oben nach unten
   7. Fußzeile
   8. Rechtsseiten (impressum.html, datenschutz.html)
   9. Responsive
   ============================================================ */


/* === 1. SCHRIFTEN ==========================================
   Newsreader für Überschriften, Inter für Fließtext.
   Beide liegen lokal in assets/fonts. Damit werden beim
   Aufruf der Seite keine Daten an Google übertragen.
   ========================================================== */

@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/newsreader-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/newsreader-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;
  src:url('assets/fonts/newsreader-latin-400-italic.woff2') format('woff2');
}


/* === 2. FARBEN UND GRUNDWERTE ==============================
   Willst Du die Akzentfarbe ändern, ändere --pink und
   --pink-ink. Beides wirkt dann auf der ganzen Seite.
   --pink       = Markenfarbe NEOS, für Flächen und Buttons
   --pink-ink   = dunklere Variante, nur für kleine Texte,
                  damit der Kontrast lesbar bleibt
   ========================================================== */

:root{
  --pink:#E5007D;
  --pink-ink:#C1006A;
  --pink-dark:#9E0057;

  --paper:#FBF8F3;   /* warmer Grundton der Seite */
  --cream:#F2ECE1;   /* ruhige Abschnittsfläche */
  --greige:#E7DFD1;  /* Platzhalterflächen */
  --line:#DED4C3;    /* Haarlinien */
  --hair:#C6B79C;    /* feine Zierlinie, sehr sparsam */

  --ink:#1c1c22;     /* Textfarbe */
  --soft:#5F5E68;    /* zurückgenommener Text */

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --wrap:1080px;
}


/* === 3. GRUNDLAYOUT UND TYPOGRAFIE ========================= */

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:120px;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
strong,b{font-weight:600;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}

h1,h2,h3,h4{font-family:var(--serif);font-weight:420;letter-spacing:-0.01em;line-height:1.14;}

/* Kleine Vorzeile über einer Überschrift */
.kicker{
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.2em;
  color:var(--pink-ink);display:flex;align-items:center;gap:14px;margin-bottom:20px;
}
.kicker::before{content:"";width:34px;height:1px;background:var(--hair);flex:none;}
.kicker.center{justify-content:center;}

.section-title{font-size:clamp(30px,4vw,44px);margin-bottom:18px;}
.lead{font-size:18px;color:var(--soft);max-width:640px;}
.body-text{color:var(--soft);max-width:640px;}
.body-text + .body-text{margin-top:14px;}

/* Sprungmarke für Tastatur und Screenreader */
.skip{
  position:absolute;left:-9999px;top:0;background:var(--pink);color:#fff;
  padding:12px 20px;z-index:200;font-size:14px;font-weight:600;
}
.skip:focus{left:0;}

/* Nur für Screenreader, optisch unsichtbar */
.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;
}

/* Sichtbarer Fokus überall */
a:focus-visible,button:focus-visible{
  outline:3px solid var(--pink-ink);outline-offset:3px;border-radius:2px;
}


/* === 4. BAUSTEINE ========================================== */

.btn{
  display:inline-block;font-size:15px;font-weight:600;letter-spacing:0.01em;
  padding:15px 30px;border-radius:2px;min-height:48px;
  transition:background .2s,color .2s,border-color .2s;
}
.btn-solid{background:var(--pink);color:#fff;}
.btn-solid:hover{background:var(--pink-dark);}
.btn-outline{border:1px solid var(--line);color:var(--ink);}
.btn-outline:hover{border-color:var(--pink);color:var(--pink-ink);}
.btn-big{font-size:17px;padding:19px 40px;}

.btn-text{
  display:inline-block;color:var(--ink);font-weight:600;font-size:15px;
  border-bottom:1px solid var(--hair);padding:6px 2px;
}
.btn-text:hover{color:var(--pink-ink);border-color:var(--pink);}

/* Runder, leichter Textlink, zum Beispiel für Social-Kanäle */
.tlink{
  display:inline-block;font-size:14px;font-weight:500;color:var(--ink);
  border:1px solid var(--line);border-radius:100px;padding:11px 19px;
  margin:6px 8px 0 0;transition:border-color .2s,color .2s;
}
.tlink:hover{border-color:var(--pink);color:var(--pink-ink);}

/* Bild mit feiner versetzter Rahmenlinie */
.portrait{position:relative;}
.portrait img{border-radius:3px;width:100%;}
.portrait::after{
  content:"";position:absolute;inset:16px -16px -16px 16px;
  border:1px solid var(--hair);border-radius:3px;z-index:-1;opacity:.75;
}

section.band{padding:88px 0;}
.band-cream{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;}

/* Sanftes Einblenden beim Scrollen */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}


/* === 5. KOPFBEREICH UND NAVIGATION ========================= */

/* Schlanke dunkle Leiste ganz oben, Hinweis auf den Termin */
.topbar{
  background:var(--ink);color:#EFE7DC;font-size:13.5px;letter-spacing:.01em;
  text-align:center;padding:10px 20px;
}
.topbar a{color:#EFE7DC;display:inline-block;padding:2px 0;}
.topbar strong{color:#fff;font-weight:600;}
.topbar .arrow{color:#FF7EC0;font-weight:600;margin-left:8px;white-space:nowrap;}

header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(251,248,243,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px;}
.brand{font-family:var(--serif);font-size:23px;letter-spacing:.01em;white-space:nowrap;}
.nav-right{display:flex;align-items:center;gap:26px;}
nav.main{display:flex;gap:22px;}
nav.main a{font-size:15px;font-weight:500;color:var(--ink);position:relative;padding:6px 0;white-space:nowrap;}
nav.main a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--pink);transition:right .25s ease;
}
nav.main a:hover::after{right:0;}
.nav-cta{font-size:14px;padding:12px 22px;min-height:44px;white-space:nowrap;}
.cta-short{display:none;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:10px;color:var(--ink);}


/* === 6. SEKTIONEN ========================================== */

/* --- Hero --------------------------------------------------
   Text links, Foto rechts. Das Gesicht bleibt frei, es liegt
   keine Farbfläche und kein Text darüber.
   -------------------------------------------------------- */
.hero{padding:88px 0 80px;}
.hero .grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:72px;align-items:center;}
.hero h1{font-size:clamp(34px,4.6vw,52px);line-height:1.1;margin-bottom:24px;}
.hero .lead{font-size:17.5px;max-width:540px;}
.hero-actions{margin-top:34px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}

/* --- Stationen, die Zeitleiste ---------------------------
   Wird auf der Startseite kurz und auf lebenslauf.html
   ausführlich verwendet. Ein weiterer Eintrag: einfach einen
   kompletten <div class="t-item"> ... </div> Block kopieren.
   -------------------------------------------------------- */
.timeline{margin-top:32px;border-left:1px solid var(--hair);padding-left:32px;}
.t-item{position:relative;padding-bottom:26px;}
.t-item:last-child{padding-bottom:0;}
.t-item::before{
  content:"";position:absolute;left:-37px;top:8px;
  width:9px;height:9px;border-radius:50%;background:var(--pink);
}
.t-era{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--pink-ink);}
.t-item h4{font-size:19px;margin:4px 0 5px;}
.t-item p{font-size:15px;color:var(--soft);line-height:1.6;max-width:620px;}

/* --- Bilanz: drei Belegkarten ---------------------------- */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;}
.proof-card{
  background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:28px 26px;border-top:2px solid var(--pink);
}
.proof-card .num{font-family:var(--serif);font-size:34px;line-height:1.05;color:var(--pink-ink);margin-bottom:8px;}
.proof-card h3{font-size:19px;margin-bottom:7px;}
.proof-card p{font-size:14.5px;color:var(--soft);line-height:1.55;}

/* --- Mein Plan: fünf Blöcke mit Icon --------------------- */
.plan{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;margin-top:44px;}
.plan-item{display:flex;gap:20px;padding:28px 0;border-top:1px solid var(--line);}
.plan-item .ico{flex:none;width:34px;height:34px;color:var(--pink-ink);}
.plan-item .ico svg{width:34px;height:34px;}
.plan-item h3{font-size:20px;margin-bottom:6px;}
.plan-item p{font-size:15px;color:var(--soft);line-height:1.6;}
/* Der fünfte Block läuft über beide Spalten und schließt die Liste ab. */
.plan-item.wide{grid-column:1 / -1;}
.plan-item.wide p{max-width:760px;}

/* --- Videos ---------------------------------------------
   Keine Einbettung von YouTube, damit ohne Cookie-Hinweis
   nichts an Google übertragen wird. Jede Karte ist ein
   reiner Link, der das Video in einem neuen Tab öffnet.
   -------------------------------------------------------- */
.videos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px;}
.vcard{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:3px;overflow:hidden;
  transition:border-color .2s,transform .3s ease;
}
.vcard:hover{border-color:var(--pink);transform:translateY(-3px);}
.vcard .screen{
  aspect-ratio:16/9;position:relative;color:#F3EDE4;
  background:radial-gradient(120% 120% at 50% 40%, #2c2b34, var(--ink) 70%);
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--line);
}
.vcard .screen .tag{
  position:absolute;top:14px;left:16px;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:#F0C7DE;
}
.vcard .screen .watch{
  position:absolute;bottom:14px;right:16px;font-size:12.5px;color:#B9B2AB;
}
.vcard .play{
  width:56px;height:56px;border-radius:50%;background:var(--pink);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s ease;
}
.vcard:hover .play{transform:scale(1.08);}
.vcard .play svg{width:20px;height:20px;margin-left:3px;}
.vcard .body{padding:22px 22px 24px;}
.vcard h3{font-size:19px;margin-bottom:6px;}
.vcard p{font-size:14.5px;color:var(--soft);line-height:1.55;}

/* --- Weitersagen -----------------------------------------
   Alle Knöpfe sind einfache Links, keine eingebetteten
   Social-Media-Bausteine. Beim Aufruf der Seite wird also
   nichts an WhatsApp, LinkedIn oder Facebook übertragen,
   erst beim Klick.
   -------------------------------------------------------- */
.share-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;margin-top:40px;align-items:start;}

.share-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.share-btns > *:last-child{grid-column:1 / -1;}
.share-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;text-align:center;
  font-size:15px;font-weight:600;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:14px 20px;min-height:50px;cursor:pointer;font-family:var(--sans);
  transition:border-color .2s,color .2s;
}
.share-btn:hover{border-color:var(--pink);color:var(--pink-ink);}
.share-btn svg{flex:none;width:19px;height:19px;}
.share-btn.primary{background:var(--pink);color:#fff;border-color:var(--pink);}
.share-btn.primary:hover{background:var(--pink-dark);border-color:var(--pink-dark);color:#fff;}

/* Fertiger Text zum Kopieren.
   Betreffzeile abgesetzt, Text in Absätzen, die Adresse als Knopf. */
.share-text{
  background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:26px 28px 28px;
}
.share-text .label{
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:var(--pink-ink);display:block;margin-bottom:16px;
}
.share-subject{
  border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px;
  font-family:var(--serif);font-size:19px;line-height:1.35;color:var(--ink);
}
.share-subject span{
  display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--soft);margin-bottom:6px;
}
.share-body p{font-size:15.5px;line-height:1.65;color:var(--ink);}
.share-body p + p{margin-top:12px;}

/* Die Adresse als Knopf, nicht als nackter Link */
.url-btn{
  display:inline-block;margin-top:14px;
  background:var(--pink);color:#fff;
  font-size:16px;font-weight:600;letter-spacing:.02em;
  padding:13px 26px;border-radius:2px;min-height:46px;
  transition:background .2s;
}
.url-btn:hover{background:var(--pink-dark);color:#fff;}

.share-text .copy-row{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.copy-done{font-size:14px;color:var(--pink-ink);font-weight:600;opacity:0;transition:opacity .2s;}
.copy-done.on{opacity:1;}

/* Link mitten im Fließtext. Ohne diese Klasse wären Links unsichtbar,
   weil a{color:inherit} gilt. */
.txt-link{
  color:var(--pink-ink);
  border-bottom:1px solid rgba(193,0,106,.35);
  transition:border-color .2s;
}
.txt-link:hover{border-bottom-color:var(--pink-ink);}
.proof-card .txt-link{font-weight:600;}

/* Infokarten zum Herunterladen und Weiterschicken.
   Liegt in der linken Spalte unter den Teilen-Knöpfen. */
.share-cards{
  margin-top:26px;background:var(--paper);border:1px solid var(--line);
  border-radius:3px;padding:22px 22px 24px;
}
.share-cards .label{
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:var(--pink-ink);display:block;margin-bottom:14px;
}
.share-cards p.hint{font-size:14.5px;line-height:1.6;color:var(--soft);margin:0 0 16px;}
.card-preview{
  display:block;width:100%;height:auto;border:1px solid var(--line);
  border-radius:2px;margin-bottom:16px;background:#fff;
}
.dl-list{display:grid;gap:10px;}
.dl-btn{
  display:flex;align-items:center;gap:10px;
  font-size:14.5px;font-weight:600;color:var(--ink);font-family:var(--sans);
  background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:12px 16px;min-height:46px;
  transition:border-color .2s,color .2s;
}
.dl-btn:hover{border-color:var(--pink);color:var(--pink-ink);}
.dl-btn svg{flex:none;width:18px;height:18px;}
.dl-btn .fmt{margin-left:auto;font-weight:400;font-size:12.5px;color:var(--soft);letter-spacing:.03em;}

@media (max-width:960px){
  .share-grid{grid-template-columns:1fr;gap:28px;}
}
@media (max-width:640px){
  .share-btns{grid-template-columns:1fr;}
  .share-text{padding:22px 20px;}
  .share-cards{padding:20px 18px 22px;}
  .dl-btn .fmt{display:none;}
}

/* --- Haltung: ruhiges Zitatband -------------------------- */
.stance{text-align:center;padding:96px 0;}
.stance h2{font-size:clamp(30px,4.4vw,46px);margin-bottom:22px;}
.stance p{
  font-family:var(--serif);font-size:clamp(19px,2.2vw,24px);line-height:1.55;
  color:var(--ink);max-width:720px;margin:0 auto;
}

/* --- Mitstimmen ------------------------------------------ */

/* Die drei Stufen der Vorwahl.
   Stufe 1 ist die einzige, in der alle mitstimmen dürfen,
   deshalb ist nur diese Karte farbig hervorgehoben. */
.stages{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px;}
.stage{
  position:relative;background:var(--paper);
  border:1px solid var(--line);border-radius:3px;padding:26px 24px 28px;
}
.stage.now{border-color:var(--pink);}
/* Feiner Pfeil zwischen den Karten */
.stage:not(:last-child)::after{
  content:"";position:absolute;top:50%;right:-15px;width:8px;height:8px;
  border-top:1px solid var(--hair);border-right:1px solid var(--hair);
  transform:rotate(45deg);
}
.stage-badge{
  position:absolute;top:-11px;left:24px;
  background:var(--pink);color:#fff;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;padding:5px 12px;border-radius:2px;
}
.stage-n{
  display:block;font-size:11.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;color:var(--soft);margin-bottom:8px;
}
.stage.now .stage-n{color:var(--pink-ink);}
.stage h4{font-size:20px;margin-bottom:6px;}
.stage-when{
  font-family:var(--serif);font-style:italic;font-size:15px;
  color:var(--soft);margin-bottom:10px;
}
.stage p:not(.stage-when){font-size:14.5px;color:var(--soft);line-height:1.6;}
.stage b{color:var(--ink);font-weight:600;}
.stages-note{margin-top:22px;font-size:14.5px;color:var(--soft);max-width:760px;}

/* Kasten mit den drei Voraussetzungen */
.reqs{
  margin-top:40px;background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--pink);border-radius:3px;padding:28px 30px;
}
.reqs h3{font-size:21px;margin-bottom:16px;}
.reqs ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px 30px;}
.reqs li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.55;}
.reqs li svg{flex:none;margin-top:4px;color:var(--pink);}
.reqs li b{font-weight:600;}

/* Geführter Weg, Schritt für Schritt untereinander.
   Bewusst nicht nebeneinander, damit die Reihenfolge klar ist. */
.walk{margin-top:40px;}
.walk-step{
  position:relative;padding:0 0 34px 68px;
}
.walk-step:last-child{padding-bottom:0;}
/* Senkrechte Linie zwischen den Ziffern */
.walk-step::before{
  content:"";position:absolute;left:21px;top:46px;bottom:0;width:1px;background:var(--line);
}
.walk-step:last-child::before{display:none;}
.walk-step .n{
  position:absolute;left:0;top:0;
  width:43px;height:43px;border-radius:50%;background:var(--pink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:600;
}
.walk-step h3{font-size:21px;margin:6px 0 8px;}
.walk-step p{font-size:15.5px;color:var(--soft);line-height:1.62;max-width:640px;}
.walk-step p + p{margin-top:10px;}
.walk-step b{color:var(--ink);font-weight:600;}
.walk-step ul{list-style:none;margin-top:10px;}
.walk-step ul li{
  font-size:15px;color:var(--soft);line-height:1.55;
  padding:7px 0 7px 20px;position:relative;max-width:640px;
}
.walk-step ul li::before{
  content:"";position:absolute;left:0;top:15px;width:7px;height:1px;background:var(--pink);
}

/* Die drei Wege zur Verifizierung sind Alternativen, keine Schritte.
   Deshalb Karten statt Aufzählungsstrichen und ein sichtbares "oder"
   dazwischen. Das "oder" steht bewusst in der CSS und nicht im HTML,
   damit die Liste eine saubere Liste bleibt. Der Satz "Du brauchst nur
   einen davon" steht zusätzlich im Text, falls die CSS nicht lädt. */
.walk-step ul.choices{margin:14px 0 18px;max-width:640px;}
.walk-step ul.choices li{
  background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:14px 18px;max-width:none;
}
.walk-step ul.choices li::before{display:none;}
/* Abstand zwischen den Karten, in dem das "oder" Platz hat */
.walk-step ul.choices li + li{margin-top:42px;}
.walk-step ul.choices li + li::before{
  display:block;content:"oder";
  position:absolute;left:0;right:0;top:-31px;
  width:auto;height:auto;background:none;
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--pink-ink);text-align:center;line-height:1;
}

/* Kleine Nachbildung der NEOS-Kopfleiste, damit klar ist,
   wo der Knopf "Registrieren" sitzt. Das ist keine Grafik,
   sondern reines HTML, also auch bei Zoom scharf. */
.mock{margin:18px 0 4px;max-width:640px;}
.mock-bar{
  display:flex;align-items:center;gap:16px;
  background:#fff;border:1px solid var(--line);border-bottom:2px solid #E9D46A;
  border-radius:3px;padding:13px 18px;
}
.mock-brand{font-weight:600;color:var(--pink);letter-spacing:.02em;font-size:15px;}
.mock-nav{font-size:13px;color:#9b958e;flex:1;}
.mock-right{display:flex;align-items:center;gap:12px;flex:none;}
.mock-reg{
  font-size:13.5px;font-weight:600;color:var(--ink);
  border-bottom:2px solid var(--pink);padding-bottom:2px;
}
.mock-login{
  font-size:13.5px;font-weight:600;color:var(--pink-ink);
  border:1px solid var(--pink); border-radius:100px;padding:6px 15px;
}
.mock-cap{font-size:13.5px;color:var(--soft);margin-top:10px;}
.mock-cap .arrow-up{color:var(--pink);font-weight:600;}

/* Termin-Hinweis */
.deadline{
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--pink);border-radius:3px;background:var(--paper);
  padding:24px 28px;margin-top:44px;
}
.deadline .cal{
  flex:none;width:62px;border:1px solid var(--line);border-radius:3px;
  overflow:hidden;text-align:center;
}
.deadline .cal .m{background:var(--pink);color:#fff;font-size:12px;font-weight:600;letter-spacing:.1em;padding:4px 0;}
.deadline .cal .d{font-family:var(--serif);font-size:25px;padding:7px 0;}
/* Textblock darf schrumpfen, sonst rutscht er unter das Kalenderblatt */
.deadline > div:last-child{flex:1 1 300px;min-width:0;}
.deadline h3{font-size:19px;margin-bottom:4px;}
.deadline p{font-size:14.5px;color:var(--soft);}

/* --- Die zwei Abstimmungen, als Infografik ----------------
   Zwei Karten nebeneinander. Links die Wahl des Listenplatzes 1,
   rechts die Punktevergabe als Balken. Alles reines HTML und CSS,
   also keine Bilddatei, scharf bei jedem Zoom und mitwachsend.
   -------------------------------------------------------- */
.ballot{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  gap:26px;margin-top:44px;align-items:start;
}
.ballot-card{
  background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:30px 30px 32px;
}
.ballot-card.accent{border-color:var(--pink);}
.ballot-tag{
  display:inline-block;font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--pink-ink);margin-bottom:10px;
}
.ballot-card h3{font-size:24px;margin-bottom:8px;}
.ballot-card > p{font-size:15px;color:var(--soft);line-height:1.6;}
.ballot-card > p + p{margin-top:10px;}
.ballot-card b{color:var(--ink);font-weight:600;}

/* Linke Karte: ein einziger Platz */
.one-seat{
  margin-top:24px;display:flex;gap:18px;align-items:center;
  background:var(--cream);border:1px solid var(--line);border-radius:3px;padding:22px 24px;
}
.one-seat .seat{
  flex:none;width:60px;height:60px;border-radius:50%;
  border:1px solid var(--hair);background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:28px;color:var(--ink);
}
.one-seat .seat-label{font-size:14.5px;color:var(--soft);line-height:1.55;}

/* Rechte Karte: die Punkte als Balken */
.pointbars{list-style:none;margin:24px 0 0;}
.pb{display:grid;grid-template-columns:42px 1fr;gap:16px;align-items:center;padding:9px 0;}
.pb-n{
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:20px;color:var(--soft);
}
.pb-name{font-size:14.5px;color:var(--soft);margin-bottom:6px;display:block;}
.pb-bar{display:block;height:10px;background:var(--greige);border-radius:2px;overflow:hidden;}
.pb-bar i{display:block;height:100%;width:var(--w);background:var(--hair);}
/* Die eigene Zeile ist die einzige farbige */
.pb-me .pb-n{background:var(--pink);border-color:var(--pink);color:#fff;font-weight:600;}
.pb-me .pb-name{color:var(--ink);font-weight:600;font-size:15.5px;}
.pb-me .pb-bar i{background:var(--pink);}

.pb-note{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--soft);line-height:1.6;
}
.pb-note b{color:var(--ink);}

/* Hinweiskasten, verwendet für den Wählerevidenz-Hinweis
   und für den Datenschutz-Hinweis zur Anmeldung */
.note-box{
  display:flex;gap:18px;align-items:flex-start;
  border:1px solid var(--line);border-radius:3px;background:var(--paper);
  padding:24px 26px;margin-top:26px;
}
.note-box .ico{flex:none;color:var(--pink-ink);}
.note-box h3{font-size:18px;margin-bottom:5px;}
.note-box p{font-size:14.5px;color:var(--soft);line-height:1.6;}
.note-box p + p{margin-top:8px;}
.note-box b{color:var(--ink);}
/* Variante mit stärkerem Rahmen für den wichtigsten Hinweis */
.note-box.important{border-color:var(--pink);border-width:1px;}

/* Person statt Partei, ruhiger Absatz vor dem Aufruf */
.person-note{
  margin-top:40px;padding:32px 34px;background:var(--cream);
  border:1px solid var(--line);border-radius:3px;
}
.person-note h3{font-size:23px;margin-bottom:12px;}
.person-note p{color:var(--soft);max-width:720px;}
.person-note p + p{margin-top:12px;}
.person-note b{color:var(--ink);font-weight:600;}

/* Großer Abschluss-Aufruf */
.final-cta{text-align:center;margin-top:44px;}
.final-cta p.kick{font-family:var(--serif);font-size:clamp(21px,2.6vw,27px);margin-bottom:22px;}
.final-cta .note{font-size:13.5px;color:var(--soft);margin-top:18px;}


/* === 7. FUSSZEILE ========================================== */

footer.site{background:var(--ink);color:#C9C2BA;padding:56px 0 40px;font-size:14.5px;}
footer.site .top{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;}
footer.site .fb{font-family:var(--serif);font-size:22px;color:var(--paper);margin-bottom:6px;}
footer.site .mail{color:#fff;border-bottom:1px solid #55505a;}
footer.site .mail:hover{border-color:var(--pink);}
footer.site nav{display:flex;gap:22px;flex-wrap:wrap;}
footer.site a{color:#E0D9D1;}
footer.site nav a{padding:6px 0;}
footer.site nav a:hover{color:#fff;}
footer.site .social{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;}
footer.site .social a{
  border:1px solid #44404a;border-radius:100px;padding:9px 17px;font-size:14px;
}
footer.site .social a:hover{border-color:var(--pink);color:#fff;}
footer.site .legal{
  margin-top:32px;padding-top:20px;border-top:1px solid #38343d;
  font-size:13px;color:#918A83;
}
footer.site .legal a{color:#B5ADA5;border-bottom:1px solid #4a454f;}


/* === 8a. LEBENSLAUF-SEITE ==================================
   lebenslauf.html. Nutzt dieselben Farben und Schriften wie
   die Startseite, nur ruhiger und dichter gesetzt.
   ========================================================== */

.cv-head{padding:56px 0 8px;}
.cv-head .grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:56px;align-items:center;}
.cv-head h1{font-size:clamp(34px,4.6vw,50px);margin-bottom:6px;}
.cv-head .grad{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--soft);margin-bottom:18px;}
.cv-head .tag{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--ink);margin-bottom:16px;}
.cv-head .roles{font-size:16px;color:var(--soft);line-height:1.7;}
.cv-head .roles b{color:var(--ink);font-weight:600;}
.cv-head .contact{margin-top:18px;font-size:15px;}
.cv-head .contact a{border-bottom:1px solid var(--hair);}
.cv-head .contact a:hover{color:var(--pink-ink);border-color:var(--pink);}

.cv-section{padding:52px 0;border-top:1px solid var(--line);}
.cv-section:first-of-type{border-top:none;}
.cv-section h2{font-size:clamp(26px,3.2vw,34px);margin-bottom:18px;}
.cv-section > p{color:var(--soft);max-width:760px;}
.cv-section > p + p{margin-top:12px;}

/* Aufzählung mit feinem Strich statt Punkt */
.cv-list{list-style:none;margin-top:8px;}
.cv-list li{
  position:relative;padding:10px 0 10px 24px;
  font-size:16px;color:var(--soft);line-height:1.65;max-width:800px;
}
.cv-list li::before{content:"";position:absolute;left:0;top:20px;width:10px;height:1px;background:var(--pink);}
.cv-list li b{color:var(--ink);font-weight:600;}

/* Faktenraster für Ausbildung und Sprachen */
.cv-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 40px;margin-top:8px;}
.cv-fact{border-top:1px solid var(--line);padding-top:18px;}
.cv-fact h3{font-size:18px;margin-bottom:6px;}
.cv-fact p{font-size:15px;color:var(--soft);line-height:1.6;}

@media (max-width:960px){
  .cv-head .grid{grid-template-columns:1fr;gap:36px;}
  .cv-head .portrait{max-width:320px;}
  .cv-facts{grid-template-columns:1fr;gap:20px;}
  .cv-section{padding:40px 0;}
}


/* === 8b. RECHTSSEITEN ====================================== */

.legalpage{padding:64px 0 88px;max-width:780px;}
.legalpage h1{font-size:clamp(30px,4vw,42px);margin-bottom:10px;}
.legalpage .updated{font-size:14px;color:var(--soft);margin-bottom:40px;}
.legalpage h2{font-size:23px;margin:40px 0 12px;}
.legalpage h3{font-size:18px;margin:24px 0 8px;}
.legalpage p,.legalpage li{color:var(--soft);font-size:16px;line-height:1.7;}
.legalpage p{margin-bottom:12px;}
.legalpage ul{margin:0 0 12px 22px;}
.legalpage li{margin-bottom:6px;}
.legalpage a{color:var(--pink-ink);border-bottom:1px solid var(--line);}
.legalpage a:hover{border-color:var(--pink);}
.back-link{display:inline-block;margin-bottom:28px;font-size:14.5px;font-weight:500;color:var(--pink-ink);}

/* Klar markierter Platzhalter, den Georg noch ausfüllt.
   Sobald der Text steht, einfach das <span class="todo">
   samt Klammern durch die echte Angabe ersetzen. */
.todo{
  background:#FFF0F7;border:1px dashed var(--pink);border-radius:2px;
  padding:1px 8px;color:var(--pink-dark);font-size:.94em;font-weight:500;
  font-family:var(--sans);
}


/* === 9. RESPONSIVE ========================================= */

@media (max-width:960px){
  .hero .grid,.two-col{grid-template-columns:1fr;gap:44px;}
  .hero{padding:56px 0 64px;}
  .hero .portrait{max-width:420px;}
  .proof,.videos{grid-template-columns:1fr 1fr;}
  .reqs ul{grid-template-columns:1fr;}
  .stages{grid-template-columns:1fr;gap:26px;}
  .stage:not(:last-child)::after{
    top:auto;bottom:-18px;right:auto;left:32px;transform:rotate(135deg);
  }
  .plan{grid-template-columns:1fr;gap:0;}
  .ballot{grid-template-columns:1fr;gap:20px;}
  section.band{padding:64px 0;}

}

/* Die Navigation klappt früher ins Menü als das übrige Layout
   umbricht. Grund: mit sechs Menüpunkten plus Knopf wird die
   Leiste sonst schon ab etwa 1150 Pixel zweizeilig. */
@media (max-width:1180px){
  nav.main{
    display:none;position:absolute;top:76px;left:0;right:0;
    flex-direction:column;gap:0;background:var(--paper);
    border-bottom:1px solid var(--line);padding:8px 32px 20px;
  }
  nav.main.open{display:flex;}
  nav.main a{padding:15px 0;border-bottom:1px solid var(--line);font-size:16px;}
  nav.main a::after{display:none;}
  .nav-toggle{display:block;}
  .nav-right{gap:8px;}
  .nav-cta{padding:11px 16px;font-size:13.5px;}
}

@media (max-width:640px){
  body{font-size:16.5px;}
  .wrap{padding:0 22px;}
  .proof,.videos{grid-template-columns:1fr;}
  .hero .portrait::after{display:none;}
  .walk-step{padding-left:56px;}
  .walk-step .n{width:38px;height:38px;font-size:16px;}
  .walk-step::before{left:18.5px;top:42px;}
  .mock-nav{display:none;}
  .mock-bar{gap:10px;padding:11px 13px;flex-wrap:wrap;}
  .deadline{padding:20px 22px;gap:16px;}
  .ballot-card{padding:24px 22px 26px;}
  .one-seat{padding:18px 18px;gap:14px;}
  .pb{grid-template-columns:36px 1fr;gap:13px;}
  .pb-n{width:36px;height:36px;font-size:18px;}
  .reqs,.person-note{padding:24px 22px;}
  .note-box{padding:22px 20px;gap:14px;}
  .hero-actions .btn{width:100%;text-align:center;}
  .brand{font-size:20px;}
  .topbar{font-size:12.5px;}
  /* Auf dem Handy heißt der Knopf nur noch "Mitstimmen",
     damit er in einer Zeile bleibt. */
  .cta-long{display:none;}
  .cta-short{display:inline;}
  footer.site .top{flex-direction:column;gap:24px;}
}