/* Wahlinitiative Elif Eralp — Stylesheet */

@font-face {
  font-family: "Gotham Condensed Bold";
  src: url("fonts/gotham-condensed-bold.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gotham Book";
  src: url("fonts/gotham-book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --rot: #e51919;
  --schwarz: #0a0a0a;
  --weiss: #ffffff;
  --lavendel: #ded6e9;
  --schrift-display: "Gotham Condensed Bold", system-ui, "Segoe UI", sans-serif;
  --schrift-text: "Gotham Book", system-ui, "Segoe UI", sans-serif;
  --raster-luecke: clamp(20px, 4vw, 30px);
  --fokus-farbe: #1a5fd6;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--schrift-text);
  color: var(--schwarz);
  background: var(--weiss);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1, h2, h3, p {
  margin: 0;
}

button, input {
  font-family: inherit;
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
label:focus-within {
  outline: 3px solid var(--fokus-farbe);
  outline-offset: 3px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 0;
  top: -100px;
  background: var(--weiss);
  color: var(--schwarz);
  padding: 12px 20px;
  z-index: 1000;
  font-family: var(--schrift-display);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

.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;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(100vh, 780px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px clamp(20px, 4vw, 30px) clamp(50px, 8vw, 90px);
  overflow: hidden;
  color: var(--weiss);
}

.hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: -2;
  transform: scale(1.08);
  animation: hero-zoom 12s ease-out forwards;
}

@keyframes hero-zoom {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bild {
    animation: none;
    transform: scale(1);
  }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.15) 38%,
    transparent 60%
  );
}

.hero__logo {
  width: clamp(140px, 20vw, 220px);
  height: auto;
}

.hero__logo img {
  width: 100%;
  height: auto;
}

.hero__text {
  max-width: 900px;
}

.hero__headline {
  font-family: var(--schrift-display);
  font-weight: 900;
  color: var(--rot);
  font-size: clamp(28px, 6.5vw, 72px);
  line-height: 1.08;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  letter-spacing: 0.2px;
}

.hero__credit {
  position: absolute;
  right: clamp(14px, 3vw, 24px);
  bottom: 10px;
  z-index: 1;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* ---------- Laufleiste (Ticker) ---------- */
.laufleiste {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--rot);
  color: var(--weiss);
}

.laufleiste__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px clamp(16px, 4vw, 30px);
  flex-wrap: wrap;
}

.laufleiste__stand {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
  flex-wrap: wrap;
}

.laufleiste__zahl {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--schrift-display);
  font-weight: 900;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.laufleiste__zahl .zahl {
  font-size: clamp(16px, 3vw, 22px);
  font-variant-numeric: tabular-nums;
}

.laufleiste__zahl .label {
  font-size: clamp(11px, 2vw, 14px);
}

.laufleiste__teilen {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 12px);
}

.laufleiste__teilen-label {
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: clamp(15px, 2.4vw, 20px);
  margin-right: 2px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
  color: var(--weiss);
}

.icon-btn svg {
  width: 23px;
  height: 23px;
  display: block;
}

.icon-btn:hover {
  opacity: 0.8;
}

/* ---------- Layout: zwei Spalten ---------- */
.spalten {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 960px) {
  .spalten {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.spalte-links {
  background: var(--weiss);
  padding: clamp(24px, 5vw, 30px);
}

.spalte-rechts {
  background: var(--lavendel);
  padding: clamp(24px, 5vw, 30px);
}

.spalte-inner {
  max-width: 660px;
  margin: 0 auto;
}

/* Aufruf */
.aufruf__titel {
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.1;
  margin-bottom: 16px;
}

.aufruf p + p {
  margin-top: 18px;
}

.aufruf p {
  font-size: 17px;
  line-height: 1.65;
}

.aufruf p:first-of-type {
  font-size: 19px;
}

.aufruf__empfehlung {
  font-family: var(--schrift-display);
  font-weight: 900;
}

/* Unterzeichnende */
.unterzeichnende {
  margin-top: clamp(48px, 8vw, 80px);
}

.unterzeichnende__zahl {
  font-family: var(--schrift-display);
  font-weight: 900;
  color: var(--rot);
  font-size: clamp(48px, 8vw, 72px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.unterzeichnende__titel {
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: clamp(24px, 4vw, 36px);
  margin-top: 6px;
  margin-bottom: 28px;
}

.unterzeichnende__liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 560px) {
  .unterzeichnende__liste {
    grid-template-columns: 1fr 1fr;
  }
}

.unterzeichnende__liste li {
  break-inside: avoid;
}

.unterzeichnende__name {
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.1;
  display: block;
}

.unterzeichnende__beruf {
  color: var(--rot);
  font-size: 14px;
  display: block;
  margin-top: 4px;
}

.unterzeichnende__hinweis {
  margin-top: 28px;
  font-size: 13px;
  color: #444;
  max-width: 46em;
}

/* ---------- Formular ---------- */
.formular-titel {
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: clamp(26px, 4vw, 36px);
  margin-bottom: 20px;
}

.feld {
  margin-bottom: 18px;
}

.feld label {
  display: block;
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}

.feld input[type="text"],
.feld input[type="email"] {
  width: 100%;
  background: var(--weiss);
  border: 2px solid var(--schwarz);
  padding: 12px 14px;
  font-size: 16px;
  font-family: var(--schrift-text);
  color: var(--schwarz);
}

.feld__hinweis {
  font-size: 13px;
  color: #333;
  margin-top: 4px;
}

.zustimmung-gruppe {
  margin: 24px 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.zustimmung-gruppe legend {
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: 15px;
  padding: 0 4px;
}

.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  cursor: pointer;
}

.zustimmung input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  min-width: 30px;
  background: var(--weiss);
  border: 2px solid var(--schwarz);
  position: relative;
  cursor: pointer;
  margin: 0;
}

.zustimmung input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  background-image: linear-gradient(45deg, transparent 42%, var(--rot) 42%, var(--rot) 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--rot) 42%, var(--rot) 58%, transparent 58%);
}

.zustimmung span {
  font-size: 15px;
  line-height: 1.5;
}

.zustimmung input[type="radio"]:required:invalid {
  border-color: var(--rot);
}

.btn {
  display: block;
  width: 100%;
  background: var(--rot);
  color: var(--weiss);
  border: 2px solid var(--rot);
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: 19px;
  text-align: center;
  padding: 15px 30px;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover {
  background: #c31414;
  border-color: #c31414;
}

.formular__bestaetigung {
  font-size: 14px;
  margin-top: 14px;
  color: #222;
}

.pflichtfeld-hinweis {
  font-size: 13px;
  color: #333;
  margin-top: -8px;
  margin-bottom: 18px;
}

.form-status {
  margin-top: 14px;
  padding: 12px 14px;
  font-size: 14px;
  border: 2px solid var(--schwarz);
  display: none;
}

.form-status.ist-sichtbar {
  display: block;
}

/* ---------- Sharepic ---------- */
.sharepic {
  margin-top: clamp(48px, 8vw, 80px);
}

.sharepic__titel {
  font-family: "Gotham Condensed Bold", var(--schrift-display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.4px;
  margin-bottom: 16px;
}

.sharepic__canvas-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--schwarz);
  overflow: hidden;
}

#sharepic-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.sharepic__umschalter {
  display: flex;
  margin-top: 16px;
}

.sharepic__umschalter button {
  flex: 1;
  padding: 15px;
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: 17px;
  border: 2px solid var(--rot);
  background: var(--lavendel);
  color: var(--rot);
  cursor: pointer;
}

.sharepic__umschalter button.ist-aktiv {
  background: var(--rot);
  color: var(--weiss);
}

.sharepic__umschalter button:first-child {
  border-right: none;
}

.sharepic__download {
  margin-top: 16px;
}

.sharepic__fehler {
  margin-top: 12px;
  padding: 12px 14px;
  font-size: 14px;
  background: var(--weiss);
  border: 2px solid var(--rot);
  display: none;
}

.sharepic__fehler.ist-sichtbar {
  display: block;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--schwarz);
  color: var(--weiss);
  padding: clamp(40px, 8vw, 100px) clamp(20px, 4vw, 30px) 30px;
}

.footer__block {
  max-width: 1380px;
  margin: 0 auto 20px;
  font-size: 14px;
  line-height: 1.6;
}

.footer__block a {
  color: var(--weiss);
  text-decoration: underline;
}

.footer__meta {
  max-width: 1380px;
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 14px;
  line-height: 1.7;
}

.footer__meta h2 {
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 4px;
}

.footer__meta a {
  color: var(--weiss);
}

.footer__nav a {
  display: block;
  margin-bottom: 4px;
}

@media (max-width: 480px) {
  .laufleiste__inner {
    justify-content: flex-start;
  }
}

/* ---------- Rechtstext-Seiten (Impressum, Datenschutz) ---------- */
.rechts-kopf {
  background: var(--rot);
  color: var(--weiss);
  padding: 20px clamp(20px, 4vw, 30px);
}

.rechts-kopf a {
  color: var(--weiss);
  font-family: var(--schrift-display);
  font-weight: 900;
  text-decoration: none;
  font-size: 15px;
}

.rechts-kopf a:hover {
  text-decoration: underline;
}

.rechts-inhalt {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(30px, 6vw, 60px) clamp(20px, 4vw, 30px) 80px;
}

.rechts-inhalt h1 {
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 40px);
  margin-bottom: 28px;
}

.rechts-inhalt h2 {
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: 20px;
  margin-top: 32px;
  margin-bottom: 10px;
}

.rechts-inhalt p {
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 14px;
}

.rechts-inhalt a {
  color: var(--rot);
}

.rechts-inhalt .platzhalter {
  background: #fff4f4;
  border: 2px dashed var(--rot);
  padding: 14px 16px;
  margin: 8px 0 20px;
  font-size: 15px;
}