/* ==========================================================================
   Kandidatenseite Kommunalwahl - Grundgestaltung
   Farbwelt: CDU-Cyan #52b7c1, Orange als Signalfarbe, Anthrazit
   ========================================================================== */

:root {
  --ink:        #151a1f;
  --ink-2:      #48535e;
  --ink-3:      #7b8792;
  --linie:      #e3e0da;

  --cyan:     #52b7c1;
  --cyan-tief:#2d656a;
  --cyan-hell:#eaf6f8;
  --cyan-flaeche: #3e8991;

  --orange:     #f39200;
  --orange-tief:#c97800;

  --sand:       #f8f5f0;
  --weiss:      #ffffff;

  --rund:       14px;
  --rund-gross: 26px;
  --schatten:   0 1px 2px rgba(21,26,31,.05), 0 12px 32px -18px rgba(21,26,31,.35);
  --schatten-hoch: 0 2px 4px rgba(21,26,31,.06), 0 28px 60px -28px rgba(21,26,31,.45);

  --breite:     1180px;
  --luft:       clamp(3.5rem, 7vw, 6.5rem);
  --portrait-breite: 100%;    /* bei einem kleinen Foto hier begrenzen, z. B. 390px */

  color-scheme: light;
}

/* --- Schriften, lokal eingebunden --------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/inter-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/inter-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }

/* Sanftes Scrollen erst, wenn die Seite steht. Sonst wird auch der Sprung
   zum Anker beim Laden animiert, und man sieht die Seite von oben nach
   unten fahren, etwa nach dem Absenden des Formulars. */
html { scroll-padding-top: 88px; }
html.bereit { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.bereit { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.7rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
p  { margin: 0 0 1.1em; }
a  { color: var(--cyan-tief); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--orange-tief); }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }

.visuell-versteckt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skiplink {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--rund) var(--rund); text-decoration: none;
  transition: top .18s ease;
}
.skiplink:focus { top: 0; color: #fff; }

/* --- Kopfzeile ---------------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 74px;
}
.marke {
  display: flex; align-items: center; gap: .85rem;
  text-decoration: none; color: inherit; margin-right: auto;
}
.marke img { width: 88px; height: auto; }
.marke__text {
  display: flex; flex-direction: column; line-height: 1.18;
  padding-left: .85rem; border-left: 1px solid var(--linie);
}
.marke__text strong { font-size: 1.02rem; letter-spacing: -.01em; }
.marke__text span { font-size: .8rem; color: var(--ink-3); }

.hauptnav { display: flex; align-items: center; gap: 1.75rem; }
.hauptnav ul {
  display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0;
}
.hauptnav a {
  color: var(--ink-2); text-decoration: none; font-size: .96rem;
  padding: .35rem 0; position: relative;
}
.hauptnav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--orange); transition: right .22s ease;
}
.hauptnav a:hover { color: var(--ink); }
.hauptnav a:hover::after { right: 0; }

.burger {
  display: none; width: 44px; height: 44px;
  border: 0; background: none; padding: 0; cursor: pointer;
  place-items: center; color: var(--ink); font-size: 22px; line-height: 1;
}
/* Geschlossen die drei Striche, geöffnet das Kreuz */
.burger .fa-xmark { display: none; }
.burger[aria-expanded="true"] .fa-bars { display: none; }
.burger[aria-expanded="true"] .fa-xmark { display: block; }

/* --- Knöpfe ------------------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--ink); color: #fff; text-decoration: none;
  padding: .9rem 1.5rem; border-radius: 999px; border: 1px solid var(--ink);
  font-size: 1rem; font-weight: 600; letter-spacing: -.005em;
  cursor: pointer;
  /* Farben springen ohne Übergang. Sonst steht beim Hover kurz die schon
     schwarze Schrift auf dem noch schwarzen Hintergrund. */
  transition: transform .18s ease;
}
.knopf:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); transform: translateY(-1px); }
/* Im Menü ist .hauptnav a spezifischer als .knopf. Farbe und Polsterung
   müssen deshalb hier nachgezogen werden, sonst greifen die Knopf-Werte nicht. */
.hauptnav a.knopf { color: #fff; padding: .72rem 1.45rem; }
.hauptnav a.knopf:hover { color: var(--ink); }
/* Der Unterstrich der Menülinks gehört nicht auf den Knopf */
.hauptnav a.knopf::after { display: none; }
.knopf--klein { padding: .72rem 1.45rem; font-size: .9rem; }
.knopf--voll { width: 100%; padding: 1.05rem 1.5rem; }

/* --- Kicker ------------------------------------------------------------- */

.kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan-tief); margin-bottom: 1rem;
}
.kicker .punkt {
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
  flex: none;
}
.kopfzeile--hell .kicker { color: #fff; }

.lead { font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem); color: var(--ink-2); max-width: 58ch; }

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--cyan-hell);
}
.hero__inner {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 { margin-bottom: .55em; }
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.9rem 0 2.2rem; }
.hero__signatur {
  display: inline-flex; flex-direction: column; gap: .1rem; margin: 0;
  padding-top: 1.1rem; border-top: 1px solid var(--linie);
}
.hero__signatur strong { font-size: 1.1rem; }
.hero__signatur span { font-size: .92rem; color: var(--ink-3); }

/* Breite des Porträts. Sobald das hochauflösende Foto vorliegt, auf 100% setzen. */
.hero__bild { position: relative; margin: 0 0 0 auto; max-width: var(--portrait-breite); }
.hero__flaeche {
  position: absolute; inset: 8% -6% -4% 6%;
  background: var(--cyan);
  border-radius: var(--rund-gross);
}
.hero__bild img {
  position: relative;
  width: 100%;
  border-radius: 14px;
  background: var(--cyan-hell);
}
/* Weißes Passepartout um das Foto */
.hero__rahmen {
  position: relative;
  padding: 12px;
  background: var(--weiss);
  border-radius: var(--rund-gross);
  box-shadow: var(--schatten-hoch);
}
.hero__badge {
  position: absolute; left: -1.5rem; bottom: 2.2rem; z-index: 2;
  display: flex; align-items: center; gap: .75rem;
  background: var(--weiss); border-radius: var(--rund);
  padding: .85rem 1.15rem; box-shadow: var(--schatten-hoch);
}
.hero__badge-zahl {
  font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--orange-tief);
  letter-spacing: -.03em;
}
.hero__badge-text { font-size: .82rem; line-height: 1.25; color: var(--ink-2); }

/* --- Band mit Wahltermin ------------------------------------------------ */

.band { background: var(--cyan); color: #fff; }
/* Drei Spalten, damit das Datum wirklich in der Mitte des Bandes sitzt */
.band__inner {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: .8rem 2rem; padding: 1.35rem 0;
}
/* Nach der Wahl entfällt das Abzeichen, dann reichen zwei Spalten */
.band__inner--danach { grid-template-columns: auto 1fr; }
.band__inner--danach .band__datum { text-align: left; }
.band p { margin: 0; }
.band__hinweis { display: flex; align-items: center; }
.band__label {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: var(--weiss); padding: .35rem .75rem; border-radius: 999px;
}
.band__datum {
  font-family: "Inter", "Segoe UI", system-ui, Arial, sans-serif; font-weight: 800;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); letter-spacing: -.02em;
  text-align: center;
}
.band__zaehler { color: rgba(255, 255, 255, .9); font-size: .95rem; text-align: right; }
.band__tage { color: #fff; font-weight: 700; font-size: 1.15rem; }

/* --- Abschnitte --------------------------------------------------------- */

.abschnitt { padding: var(--luft) 0; }
.abschnitt--sand { background: var(--sand); }
/* Fläche im CDU-Cyan, weiße Schrift */
.abschnitt--cyan {
  background: var(--cyan);
  color: #fff;
}
.abschnitt--cyan h2 { color: #fff; }
.abschnitt--cyan .lead { color: #fff; }

.kopfzeile { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.kopfzeile .lead { margin-bottom: 0; }

/* --- Zur Person --------------------------------------------------------- */

.person { max-width: 66ch; margin-inline: auto; text-align: center; }
.person .kicker { justify-content: center; }
.person .lead { margin-inline: auto; }
.person .fakten { justify-content: center; }
.zitat {
  margin: 2rem 0; padding: 1.5rem 0;
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 600;
  line-height: 1.4; letter-spacing: -.015em; color: var(--cyan-tief);
}
.fakten {
  display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem;
  list-style: none; margin: 0; padding: .4rem 0 0;
}
.fakten li { display: flex; flex-direction: column; font-size: .9rem; color: var(--ink-3); }
.fakten span {
  font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--ink);
  letter-spacing: -.03em;
}

/* --- Stimmzettel -------------------------------------------------------- */

.stimmzettel {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
  list-style: none; margin: 0 0 1.8rem; padding: 0; counter-reset: none;
}
.stimmzettel__karte {
  background: var(--weiss); color: var(--ink);
  border-radius: var(--rund-gross); padding: 1.7rem 1.7rem 1.5rem;
  box-shadow: var(--schatten-hoch);
  display: flex; flex-direction: column; gap: .15rem;
  position: relative; overflow: hidden;
}
.stimmzettel__karte p { margin: 0; }
.stimmzettel__gremium {
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em;
}
.stimmzettel__liste { color: var(--ink-3); font-size: .95rem; margin-bottom: .9rem !important; }
.stimmzettel__platz {
  display: flex; align-items: baseline; gap: .5rem; margin-top: auto !important;
  padding-top: .9rem; border-top: 1px solid var(--linie);
}
.stimmzettel__platz span {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.stimmzettel__platz strong {
  font-size: 3rem; line-height: 1; font-weight: 700; color: var(--orange-tief);
  letter-spacing: -.04em;
}
.hinweis { color: #fff; font-size: .95rem; max-width: 70ch; margin: 0; }

/* --- Themenkarten ------------------------------------------------------- */

.karten {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem;
}
.karte {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--rund-gross); padding: 2rem 2rem 1.7rem;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.karte:hover {
  border-color: transparent; transform: translateY(-3px); box-shadow: var(--schatten-hoch);
}
.karte__icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 1.2rem;
  background: var(--cyan-hell); color: var(--cyan-tief);
}
.karte__icon i { font-size: 24px; line-height: 1; }
.karte h3 { margin-bottom: .6rem; }
.karte p { margin: 0; color: var(--ink-2); }
.karte em { color: var(--ink-3); font-style: italic; }

/* --- Kontakt ------------------------------------------------------------ */

.kontakt {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.kontakt__wege { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.kontakt__wege li {
  display: flex; flex-direction: column; gap: .1rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--linie);
}
.kontakt__wege li:last-child { border-bottom: 0; padding-bottom: 0; }
.kontakt__weg-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.kontakt__wege a { font-size: 1.1rem; font-weight: 600; text-decoration: none; }
.kontakt__wege a:hover { text-decoration: underline; }

.kontakt__form {
  background: var(--weiss); border-radius: var(--rund-gross);
  padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--schatten-hoch);
}

.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.feld { margin-bottom: 1.1rem; }
.feld label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .4rem; }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld textarea {
  width: 100%; font: inherit; color: inherit;
  padding: .8rem .95rem; border: 1px solid var(--linie); border-radius: 10px;
  background: var(--sand); transition: border-color .16s ease, background .16s ease;
}
.feld textarea { resize: vertical; min-height: 140px; }
.feld input:focus, .feld textarea:focus { background: var(--weiss); border-color: var(--cyan); }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: #c0392b; }
.feld__fehler { margin: .4rem 0 0; font-size: .86rem; color: #a5281a; }
.feld__hinweis { margin: .9rem 0 0; font-size: .82rem; color: var(--ink-3); text-align: center; }
.pflicht { color: var(--orange-tief); }
.feld--honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feld--check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; margin: 1.4rem 0 1.5rem; }
.feld--check input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--cyan); }
.feld--check label { font-weight: 400; font-size: .88rem; color: var(--ink-2); margin: 0; }
.feld--check .feld__fehler { grid-column: 1 / -1; }

.meldung { border-radius: var(--rund); padding: 1.2rem 1.4rem; border: 1px solid; }
.meldung p { margin: .3rem 0 0; }
.meldung--gut { background: var(--cyan-hell); border-color: #a9cfda; color: var(--cyan-tief); }
.meldung--fehler { background: #fdeeec; border-color: #e6b3ac; color: #a5281a; margin-bottom: 1.5rem; }

/* --- Fußzeile ----------------------------------------------------------- */

.fuss { background: var(--ink); color: #b9c3cc; padding: clamp(3rem, 5vw, 4.5rem) 0 1.5rem; }
.fuss__inner {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem;
}
.fuss h2 {
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; margin-bottom: .9rem;
}
.fuss p { margin: 0 0 .5rem; font-size: .93rem; }
.fuss a { color: #dfe6ec; text-decoration: none; }
.fuss a:hover { color: var(--orange); text-decoration: underline; }
.fuss__logo { box-sizing: content-box; width: auto; height: 24px; background: var(--weiss); padding: .55rem .7rem; border-radius: 8px; margin-bottom: 1.1rem; }
.fuss__name { color: #fff; font-weight: 700; font-size: 1.05rem !important; }
.fuss__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
.fuss__datum { color: var(--orange); font-weight: 700; font-size: 1.1rem !important; }
.fuss__zeile {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between;
  margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid #2b333c;
  font-size: .82rem; color: #7b8792;
}
.fuss__zeile p { margin: 0; font-size: .82rem; }

/* --- Rechtstexte -------------------------------------------------------- */

.rechtstext { padding: clamp(2.5rem, 5vw, 4.5rem) 0 var(--luft); }
.rechtstext__inner { max-width: 74ch; }
.rechtstext h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); margin-bottom: .6em; }
.rechtstext h2 {
  font-size: 1.35rem; margin-top: 2.4rem; padding-top: 1.6rem;
  border-top: 1px solid var(--linie);
}
.rechtstext h3 { font-size: 1.08rem; margin-top: 1.8rem; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .4rem; }
.rechtstext .zurueck {
  display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1.6rem;
  font-size: .92rem; text-decoration: none; color: var(--ink-3);
}
.rechtstext .zurueck:hover { color: var(--ink); }
.rechtstext .stand { color: var(--ink-3); font-size: .9rem; }
.platzhalter {
  background: #fff4e0; border-bottom: 1px dashed var(--orange-tief);
  padding: 0 .2em; border-radius: 3px; font-style: normal;
}

/* --- Aufblenden beim Scrollen ------------------------------------------ */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.sichtbar {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.sichtbar { opacity: 1; transform: none; transition: none; }
  .knopf, .karte { transition: none; }
}

/* --- Kleinere Bildschirme ---------------------------------------------- */

@media (max-width: 960px) {
  .hero__inner, .kontakt { grid-template-columns: 1fr; }
  .hero__bild { order: -1; max-width: 420px; margin-inline: auto; }
  .hero__badge { left: auto; right: 1rem; }
  .stimmzettel { grid-template-columns: 1fr; }
  .karten { grid-template-columns: 1fr; }
  .fuss__inner { grid-template-columns: 1fr 1fr; }
}

/* Auf dem Handy fehlt der Platz für die Farbfläche hinter dem Foto, und das
   Abzeichen würde im Bild liegen. Beides wird deshalb umgestellt. */
@media (max-width: 780px) {
  .hero__flaeche { display: none; }
  .hero__bild { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
  .hero__badge {
    position: static;
    justify-content: center;
    box-shadow: var(--schatten);
  }
}

@media (max-width: 780px) {
  .burger { display: grid; }
  .hauptnav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--weiss); border-bottom: 1px solid var(--linie);
    padding: .5rem 1.25rem 1.4rem;
    box-shadow: var(--schatten); display: none;
  }
  .hauptnav.offen { display: flex; }
  .hauptnav ul { flex-direction: column; gap: 0; }
  .hauptnav li { border-bottom: 1px solid var(--linie); }
  .hauptnav a { display: block; padding: .9rem 0; font-size: 1.02rem; }
  .hauptnav a::after { display: none; }
  .hauptnav .knopf { margin-top: 1.1rem; }
  .kopf__inner { position: relative; }

  /* Band untereinander und zentriert */
  .band__inner { grid-template-columns: 1fr; justify-items: center; }
  .band__zaehler { text-align: center; }
}

@media (max-width: 560px) {
  .feld-reihe { grid-template-columns: 1fr; }
  .fuss__inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .marke__text span { display: none; }
  .hero__knoepfe .knopf { width: 100%; }
  .band__inner { padding: 1.1rem 0; }
}

/* --- Druck -------------------------------------------------------------- */

@media print {
  .kopf, .burger, .hero__knoepfe, .kontakt__form, .skiplink { display: none; }
  body { font-size: 11pt; }
  .abschnitt--cyan, .band { background: #fff !important; color: #000 !important; }
  .abschnitt--cyan h2, .band__datum { color: #000 !important; }
}