/* =========================================================
   UNVEIL SPECIESISM — Base Stylesheet
   -----------------------------------------------------------
   PLATZHALTER-WERTE: Alle mit "TODO(spec)" markierten Werte
   sind Schätzungen aus den Screenshots und müssen durch die
   exakten Werte aus dem Adobe-XD-Design-Specs-Panel ersetzt
   werden (Farben als Hex, Schriftnamen, Schriftgrößen, etc.)
   ========================================================= */

:root {
  /* Farben — bestätigt aus XD Design Specs */
  --color-yellow: #ffeb00;         /* Highlight-Gelb (Button, Overlay, Marker) — bestätigt */
  --color-cream: rgba(255, 235, 0, 0.15); /* Content-Seiten-Hintergrund: Website-Gelb bei 15% Transparenz — bestätigt */
  --color-ink: #17181a;            /* Haupttextfarbe / fast schwarz — TODO(spec): noch bestätigen */
  --color-white: #ffffff;
  --color-header-overlay: rgba(255, 255, 255, 0.56); /* Header-Fläche auf Hero-Bild — bestätigt: weiß, 56% Deckkraft */
  --color-footnote: #9a9a9a;       /* Fußnoten-Klammern [1] etc. — TODO(spec): noch bestätigen */

  /* Schriften — bestätigt aus XD Design Specs (Logo, Nav, Hero-Button).
     Überschriften (SPEZIESISMUS/GLOSSAR) + Fließtext noch TODO(spec). */
  --font-heading: 'Inter', sans-serif;      /* Logo "UNVEIL Speciesism": Inter, 40px */
  --font-mono: 'Roboto Mono', monospace;    /* Nav: Roboto Mono 25px Regular · Hero-Button: Roboto Mono 40px Regular */

  --header-height: clamp(70px, 7.81vw, 150px); /* 150px bezogen auf 1920px-Leinwand, skaliert fluid */
  --max-width: 1440px;
}

/* -----------------------------------------------------------
   FLUID TYPOGRAFIE
   Das XD-Design ist eine feste 1920px-Leinwand. Alle Werte
   unten sind clamp(MIN, VW-Wert-bezogen-auf-1920px, MAX) —
   dadurch skaliert der Text proportional mit der Fensterbreite,
   genau wie beim Rein-/Rauszoomen der XD-Leinwand, bleibt aber
   auf sehr kleinen/großen Screens innerhalb sinnvoller Grenzen.
   ----------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth; /* One-Pager: sanftes Scrollen zu den Nav-Ankern */
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* verhindert horizontales Scrollen durch randüberschreitende Elemente wie die Info-Box */
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.5;
}

/* One-Pager: jede Sektion braucht Abstand nach oben beim Anspringen,
   damit sie nicht unter dem fixen Header verschwindet. */
#speziesismus, #glossar, #warum-sprache, #kampagne {
  scroll-margin-top: var(--header-height);
}

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

a { color: inherit; text-decoration: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------- Header / Navigation ---------- */

.site-header {
  position: fixed; /* One-Pager: Header bleibt beim Scrollen immer sichtbar */
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 40px;
  background: var(--color-header-overlay); /* transparent-weiß über dem Hero-Bild */
  transition: background 0.25s ease;
}

/* Sobald über die Hero-Sektion hinaus gescrollt wurde (JS setzt diese Klasse):
   Header bekommt einen soliden weißen Hintergrund, damit die Nav über den
   Content-Sektionen lesbar bleibt. */
.site-header.is-scrolled {
  background: var(--color-white);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

.logo {
  font-family: var(--font-heading); /* Inter */
  font-size: clamp(20px, 2.08vw, 40px);
  line-height: 0.95em; /* entspricht dem XD-Verhältnis 38/40 – skaliert mit der Schriftgröße mit */
}

.logo .logo-top {
  font-weight: 700; /* Inter Bold, Caps (getippt) */
}

.logo .logo-bottom {
  font-weight: 400; /* Inter Regular, keine Caps */
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.main-nav ul {
  display: flex;
  gap: 48px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.3vw, 25px); /* bestätigt: Roboto Mono, 25px auf 1920px-Leinwand */
  font-weight: 400;
  position: relative;
}

/* Hover-Zustand — TODO(spec): exaktes Verhalten (Farbe? Unterstrich? Gewicht?)
   noch von Paulina bestätigen. Platzhalter: Unterstrich blendet ein. */
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  transform: scaleX(1);
}

/* Hamburger-Button: nur auf Mobile sichtbar (siehe Media Query unten),
   auf Desktop komplett ausgeblendet — dort bleibt die normale horizontale
   Nav-Leiste unverändert. */
.nav-toggle {
  display: none;
}

.main-nav {
  position: relative;
}

/* ---------- Mobile Navigation (nur < 700px) ---------- */
@media (max-width: 700px) {
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-ink);
  }

  .main-nav ul {
    display: none;
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    left: auto;
    flex-direction: column;
    gap: 0;
    min-width: 220px;
    background: var(--color-white);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 8px 24px;
  }

  .main-nav.is-open ul {
    display: flex;
  }

  .main-nav ul li {
    border-bottom: 1px solid #eee;
  }

  .main-nav ul li:last-child {
    border-bottom: none;
  }

  .main-nav ul a {
    display: block;
    padding: 14px 0;
  }
}

/* ---------- Hero (Home) ---------- */

.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-cta {
  position: absolute;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  z-index: 10;
}

.highlight-link {
  background: var(--color-yellow);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: clamp(18px, 2.08vw, 40px); /* bestätigt: Roboto Mono, 40px auf 1920px-Leinwand */
  font-weight: 400;
  padding: 6px 14px;
  display: inline-block;
  transition: background 0.2s ease;
}

/* Hover-Zustand — TODO(spec): Platzhalter (etwas dunkleres Gelb) */
.highlight-link:hover {
  background: #e8db1f;
}

/* ---------- Content Page (Speziesismus) ---------- */

.content-page {
  background: var(--color-cream);
  padding: calc(var(--header-height) + 40px) 60px 100px;
}

.content-page h1 {
  font-family: var(--font-heading); /* Inter */
  font-weight: 700; /* Bold */
  font-size: clamp(30px, 3.65vw, 70px); /* 70px auf 1920px-Leinwand */
  text-transform: uppercase;
  margin: 0 0 60px;
}

.content-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.content-columns p {
  font-family: var(--font-heading); /* Inter */
  font-weight: 400; /* Regular */
  margin: 0 0 24px;
  font-size: clamp(15px, 1.15vw, 22px); /* 22px auf 1920px-Leinwand */
  line-height: 1.82; /* 40px Zeilenabstand bei 22px Schriftgröße */
}

.content-columns p strong {
  font-weight: 700; /* Inter Bold, für hervorgehobene Wörter */
}

/* Der letzte Absatz einer Spalte braucht keinen zusätzlichen Bottom-Margin
   mehr — sonst addiert sich dieser zum Grid-"gap" dazu, wodurch der Abstand
   zwischen zwei Spalten größer wirkt als der Abstand zwischen zwei Absätzen
   innerhalb derselben Spalte (genau das gemeldete Problem auf Mobile). */
.content-columns > div > p:last-child {
  margin-bottom: 0;
}

.footnote {
  color: var(--color-footnote);
  font-size: 0.8em;
  vertical-align: super;
}

.footnote-link {
  color: inherit;
  font-size: 0.7em; /* Quellenangaben-Zahlen kleiner als der Fließtext, Klammern bleiben erhalten */
  vertical-align: super;
}
.footnote-link:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

/* ---------- Quellen / Abbildungen ---------- */

.sources-page {
  padding: calc(var(--header-height) + 40px) 60px 100px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.sources-page h1 {
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.67vw, 32px);
  text-transform: uppercase;
  margin: 40px 0 24px;
}

.sources-page h1:first-of-type {
  margin-top: 0;
}

.sources-list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}

.sources-list li {
  font-size: clamp(12px, 0.68vw, 13px);
  line-height: 1.6;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
  word-break: break-all;
}

.sources-list .ref {
  display: inline-block;
  width: 44px;
  color: var(--color-footnote);
  font-weight: bold;
}

.ai-note {
  font-size: 12px;
  color: #777;
}

.info-box {
  background: var(--color-yellow);
  padding: 24px 24px 24px 24px;
  margin-right: -100px; /* weiter an den rechten Rand geschoben, kommt "von rechts rein" */
  padding-right: 48px; /* Innenabstand ausgleichen, damit der Text nicht am Rand klebt */
  font-family: var(--font-heading); /* Inter */
  font-weight: 700; /* Bold */
  font-size: clamp(15px, 1.15vw, 22px); /* 22px auf 1920px-Leinwand */
  line-height: 1.545; /* 34px Zeilenabstand bei 22px Schriftgröße */
}

/* Mobile: aus den beiden linken Textspalten wird eine Spalte, der gelbe
   Kasten (info-box) rutscht darunter statt daneben — und wird als eigene,
   zentrierte Box dargestellt statt (wie am Desktop gewollt) von rechts
   ins Bild zu ragen. Außerdem etwas kompaktere Abstände für Mobile.
   Der Rest bleibt exakt wie vorher (Desktop/Tablet unverändert).
   WICHTIG: dieser Block muss NACH der .info-box-Basisregel oben stehen,
   sonst gewinnt bei gleicher Spezifität die spätere (Desktop-)Regel im
   CSS-Cascade, obwohl die Media Query zutrifft. */
@media (max-width: 700px) {
  .content-page {
    padding-left: 24px;
    padding-right: 24px;
  }
  .content-page h1 {
    margin-bottom: 32px;
  }
  .content-columns {
    grid-template-columns: 1fr;
    gap: 24px; /* gleicher Wert wie der Absatz-Abstand (.content-columns p margin-bottom) */
  }
  .info-box {
    margin: 0 auto;
    max-width: 480px;
    padding: 20px;
  }
}

/* ---------- Glossar Overview ---------- */

.glossar-page {
  position: relative;
  background-color: var(--color-white);
  padding: calc(var(--header-height) + 40px) 60px 100px;
  text-align: center;
  overflow: hidden;
}

/* Von Paulina zugeschnittener Zaun-Ausschnitt (Zaun-offen-hell-Zusschnitt.jpg)
   oben auf der Glossar-Seite: heller weißer Kasten darüber (helleres Grau),
   reicht weiter nach unten, und läuft erst ganz am Ende leicht/dezent aus,
   statt abrupt an den Kacheln aufzuhören. */
.glossar-fence-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(280px, 32vw, 620px);
  background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), url('../images/zaun-final.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, white 0%, white 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, white 0%, white 80%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}

.glossar-page h1,
.glossar-page .disclaimer,
.glossar-page .glossar-grid {
  position: relative;
  z-index: 1;
}

.glossar-page h1 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.08vw, 40px);
  text-transform: uppercase;
  margin: 0 0 24px;
}

.disclaimer {
  max-width: 640px;
  margin: 0 auto 60px;
  font-size: clamp(12px, 0.73vw, 14px);
  color: #555;
}

.glossar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: clamp(720px, 70vw, 1340px); /* schmalerer Container -> insgesamt kleinere Kacheln, 3:4 bleibt erhalten */
  margin: 0 auto;
  text-align: left;
}

/* Responsive Spaltenzahl: die Kacheln werden nicht einfach immer schmaler
   (Text würde dann unverhältnismäßig groß wirken), sondern das Grid springt
   bei kleineren Bildschirmen auf weniger Spalten um. Der Normalzustand (3
   Spalten) behält die ursprüngliche Schriftgröße; erst in den Breakpoints
   unten wird die Schrift per Container Query (cqi = % der Kachel-Breite)
   passend zur dann schmaleren Kachel skaliert.
   Breakpoint bewusst höher als vorher (1100px statt 900px): bei 3 Spalten
   wird der Grid-Container ab ca. 1030px Fensterbreite auf seine Mindestbreite
   (720px) gedeckelt, wodurch die einzelnen Kacheln vor dem Spaltenwechsel
   sehr schmal wurden und Text abgeschnitten hat. Der Wechsel auf 2 Spalten
   passiert jetzt deutlich früher/breiter, bevor das passieren kann. */
@media (max-width: 1100px) {
  .glossar-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: min(600px, 88vw);
    gap: 24px;
  }
  /* nur hier per Container Query (cqi = % der Kachel-Breite) angepasst,
     damit der Text bei 2 Kacheln pro Reihe nicht unverhältnismäßig groß wirkt */
  .glossar-card h2 {
    font-size: clamp(16px, 8.5cqi, 32px);
  }
  .glossar-card p {
    font-size: clamp(10.5px, 3.2cqi, 14px);
  }
}

@media (max-width: 560px) {
  .glossar-page {
    padding-left: 24px;
    padding-right: 24px;
  }
  .glossar-grid {
    grid-template-columns: repeat(1, 1fr);
    max-width: min(420px, 92vw);
    gap: 20px;
  }
  .glossar-card h2 {
    font-size: clamp(15px, 8cqi, 28px);
  }
  .glossar-card p {
    font-size: clamp(10px, 3cqi, 13px);
  }
}

.glossar-card {
  position: relative; /* Bezugsrahmen für das Bild-Pseudoelement (::before) */
  container-type: inline-size; /* Schrift in der Karte skaliert an der Kachel-Breite (cqi), nicht am Viewport */
  border: 1px solid #ccc;
  background: var(--color-white); /* Normalzustand: einfach weiß */
  width: 100%;
  aspect-ratio: 3 / 4; /* exaktes 3:4-Format, passend zu den "3:4-"-Bildern im Format-Ordner —
    dadurch wird nichts mehr zugeschnitten, das Bild füllt die Karte 1:1 */
  height: auto;
  min-height: 0; /* verhindert, dass der Inhalt die Karte trotzdem aufbläht (Flex-/Grid-Item-Bug) */
  overflow: hidden; /* zu langer Titel/Text wird abgeschnitten statt die Karte zu vergrößern */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Titel klebt oben, Text klebt unten — Startpunkt variiert je nach Textlänge */
  padding: 24px;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

/* Das Tierbild ist ein echtes <img>, absolut positioniert hinter dem Inhalt,
   und im Normalzustand unsichtbar (opacity 0). Einfacher/robuster als der
   vorherige Versuch mit ::before + CSS-Variable, der nicht zuverlässig
   funktioniert hat. */
.glossar-card .card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
  pointer-events: none;
}

.glossar-card:hover .card-img,
.glossar-card:focus-visible .card-img {
  opacity: 1; /* Bild erscheint erst beim Hover über die jeweilige Kachel */
}

/* Titel und Definitionstext verschwinden beim Hover, damit nur noch das
   Bild sichtbar ist. */
.glossar-card h2,
.glossar-card p {
  transition: opacity 0.35s ease;
}

.glossar-card:hover h2,
.glossar-card:hover p,
.glossar-card:focus-visible h2,
.glossar-card:focus-visible p {
  opacity: 0;
}

.glossar-card h2 {
  position: relative;
  z-index: 1; /* über dem Bild-Pseudoelement */
  font-family: var(--font-mono); /* Roboto Mono */
  font-weight: 500; /* Medium (nicht Semi Bold) */
  /* Zusätzliches Sicherheitsnetz per Container Query: min() nimmt den kleineren
     der beiden Werte. Bei normaler Kachelbreite sind vw- und cqi-Wert nahezu
     identisch (kein sichtbarer Unterschied zum vorherigen Normalzustand) —
     wird die Kachel aber (z.B. kurz vor einem Breakpoint) schmaler als
     "normal", greift automatisch der cqi-Wert und verhindert abgeschnittenen
     Text, ohne dass extra Breakpoints für jeden Zwischenzustand nötig wären. */
  font-size: clamp(18px, min(2.08vw, 9.4cqi), 40px); /* bestätigt: 40px auf 1920px-Leinwand — Normalzustand wie vorher */
  line-height: 1.15;
  margin: 0;
  margin-top: clamp(10px, 1.6vw, 30px); /* etwas weiter unten, bleibt im obersten Drittel der Kachel */
  flex-shrink: 0;
}

.glossar-card p {
  /* CSS-Tricks (box-decoration-break etc.) haben keine zuverlässigen Lücken
     zwischen den Zeilen erzeugt. Stattdessen berechnet js/main.js die exakten
     Zeilenumbrüche zur Laufzeit (Range.getClientRects()) und setzt pro Zeile
     eine eigene gelbe Box HINTER den Text — siehe .line-box unten. */
  position: relative;
  z-index: 1; /* über dem Bild-Pseudoelement der Karte */
  color: var(--color-ink);
  font-family: var(--font-mono); /* Roboto Mono */
  font-weight: 400; /* Regular */
  font-size: clamp(12px, min(0.78vw, 3.52cqi), 15px); /* Normalzustand wie vorher, mit cqi-Sicherheitsnetz — siehe Kommentar bei h2 */
  line-height: 1.9; /* Abstand zwischen den Zeilen-Boxen */
  text-wrap: pretty; /* moderne Browser: vermeidet zusätzlich einzelne Wörter/Waisen in der letzten Zeile */
  margin: 0;
  hyphens: auto; /* automatische Worttrennung bei langen Wörtern, reduziert die Zeilenzahl */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.glossar-card p .line-text {
  position: relative;
  z-index: 1;
}

.glossar-card p .line-box {
  position: absolute;
  background: var(--color-yellow);
  z-index: 0;
  pointer-events: none;
}

/* Hover-Zustand — TODO(spec): Paulina bestätigen ob Bild erst beim Hover
   eingeblendet wird oder von Anfang an bei manchen Karten sichtbar ist. */
.glossar-card:hover {
  box-shadow: 0 0 0 2px var(--color-ink);
}

/* ---------- Glossar Detail Overlay ---------- */

.glossar-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  grid-template-columns: 1fr 1fr;
  background: var(--color-yellow);
}

.glossar-overlay.is-open { display: grid; }

.overlay-text {
  padding: 100px 60px;
  overflow-y: auto;
}

.overlay-text h1 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 2.92vw, 56px);
  text-transform: none;
  text-decoration: line-through;
  margin: 0 0 60px;
}

/* Echter Fließtext-Umbruch statt Grid: ohne feste Höhe balanciert der
   Browser den Text automatisch gleichmäßig auf beide Spalten (column-fill:
   balance, der Standardwert bei nicht fest definierter Höhe) — dadurch sind
   beide Spalten überall etwa gleich lang, auch bei kurzen Texten, statt eine
   Spalte sehr lang und die andere sehr kurz werden zu lassen. */
.overlay-columns {
  column-count: 2;
  column-gap: 40px;
}

.overlay-columns p {
  font-size: clamp(13px, 0.73vw, 14px);
  margin: 0 0 20px;
  /* KEIN break-inside:avoid — das hat ganze Absätze vorzeitig in Spalte 2
     springen lassen, sobald sie nicht mehr komplett in Spalte 1 passten,
     wodurch Spalte 1 nie wirklich bis zum Rand gefüllt wurde (genau der
     gemeldete Fehler). Jetzt darf ein Absatz mitten im Satz umbrechen,
     damit Spalte 1 wirklich komplett voll wird. */
}

.overlay-image {
  position: relative;
  overflow: hidden;
}

.overlay-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* Standard: Bildmitte, für einzelne Overlays unten gezielt verschoben */
}

/* Bildausschnitt (object-position) für einzelne Overlays angepasst, damit
   bei object-fit: cover die wichtigen Bildmotive nicht abgeschnitten werden. */
#overlay-anbindehaltung .overlay-image img { object-position: center 25%; } /* Köpfe der Kühe sichtbar */
#overlay-artgerecht .overlay-image img { object-position: center 60%; }
#overlay-besamen .overlay-image img { object-position: center 45%; }
#overlay-beschaeftigungsmaterial .overlay-image img { object-position: center 40%; }
#overlay-federpicken .overlay-image img { object-position: center 40%; }
#overlay-gondel .overlay-image img { object-position: center 100%; }
#overlay-hochleistungskuh .overlay-image img { object-position: center 12%; }
#overlay-humane-schlachtung .overlay-image img { object-position: center 65%; }
#overlay-intensivtierhaltung .overlay-image img { object-position: center 65%; }
#overlay-nutztier .overlay-image img { object-position: center 40%; }
#overlay-schlachtreife .overlay-image img { object-position: center 25%; }
#overlay-veredelung .overlay-image img { object-position: center 25%; }

.img-credit {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,0.55);
  color: var(--color-white);
  font-size: 11px;
  padding: 3px 8px;
}

.sources-link {
  max-width: var(--max-width);
  margin: 60px auto 0;
  text-align: right;
  font-size: 14px;
}

.sources-link a {
  border-bottom: 1px solid currentColor;
}

.overlay-close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 31;
  width: 44px;
  height: 44px;
  background: var(--color-white);
  border: 2px solid var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 20px;
  cursor: pointer;
}

.overlay-close:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

/* ---------- Glossar Detail Overlay — Mobile ---------- */
/* Auf schmalen Screens: nur noch 1 Spalte Fließtext (statt 2), Bild oben
   klein/gestaucht (statt volle Höhe), damit sichtbar ist, dass darunter
   noch Text folgt, und die durchgestrichene Überschrift ganz oben. */
@media (max-width: 700px) {
  .glossar-overlay {
    grid-template-columns: 1fr;
    overflow-y: auto;
    align-content: start;
  }

  /* .overlay-text wird "unsichtbar" fürs Layout (display: contents):
     dadurch werden h1 und .overlay-columns zu direkten Grid-Kindern von
     .glossar-overlay und können per "order" frei zusammen mit dem Bild
     angeordnet werden (Bild zwischen Headline und Fließtext), obwohl sie
     im HTML beide innerhalb von .overlay-text verschachtelt sind. */
  .overlay-text {
    display: contents;
  }

  .overlay-text h1 {
    order: 1;
    padding: 90px 24px 0;
    margin: 0 0 16px;
    font-size: clamp(24px, 7vw, 34px);
  }

  .overlay-image {
    order: 2;
    height: 48vh;
    min-height: 260px;
  }

  .overlay-columns {
    order: 3;
    column-count: 1;
    padding: 16px 24px 60px;
  }

  .img-credit {
    font-size: 10px;
  }
}

/* ---------- Platzhalterbilder ---------- */

.placeholder-img {
  background: #d8d8d8 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect width="10" height="10" fill="%23d8d8d8"/></svg>');
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: center;
  min-height: 200px;
}

/* ---------- Placeholder-Seiten (Kampagne) ---------- */

.placeholder-page {
  padding: calc(var(--header-height) + 40px) 60px 100px;
  min-height: 60vh;
}

.placeholder-page .note {
  background: var(--color-yellow);
  display: inline-block;
  padding: 16px 20px;
  font-size: 14px;
  margin-top: 24px;
}

/* ---------- Warum Sprache? ---------- */

.warum-page {
  background: var(--color-yellow);
  padding: calc(var(--header-height) + 60px) 60px 100px;
}

.warum-inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 3.65vw, 70px); /* 70px auf 1920px-Leinwand */
  max-width: var(--max-width);
  margin: 0 auto;
}

.warum-image {
  flex: 0 0 clamp(220px, 33.3vw, 640px); /* 640px auf 1920px-Leinwand */
  aspect-ratio: 640 / 610;
}

.warum-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.warum-text {
  flex: 1 1 auto;
  min-width: 0;
}

.warum-text h1 {
  font-family: var(--font-heading); /* Inter */
  font-size: clamp(28px, 3.65vw, 70px); /* 70px auf 1920px-Leinwand */
  line-height: 1.1;
  margin: 0 0 clamp(16px, 1.5vw, 28px);
}

.warum-text h1 .warum-bold {
  font-weight: 700; /* Inter Bold */
  text-transform: uppercase;
}

.warum-text h1 .warum-underline {
  font-weight: 400; /* Inter Regular */
  text-decoration: underline;
}

.warum-text p {
  font-family: var(--font-heading); /* Inter */
  font-weight: 400;
  font-size: clamp(14px, 1.04vw, 20px); /* 20px auf 1920px-Leinwand */
  line-height: 2; /* 40px Zeilenabstand bei 20px Schriftgröße */
  margin: 0;
}

.warum-text p strong {
  font-weight: 700; /* Inter Bold */
}

/* Mobile: Bild und Text nebeneinander würde die Textspalte auf schmalen
   Screens zu sehr einquetschen — stattdessen Bild oben, Text darunter.
   Außerdem weniger Seitenabstand (mehr Platz für den Text) und kleinere,
   feste Schriftgrößen statt der vw-basierten Mindestwerte, die auf
   schmalen Screens noch recht groß wirkten. */
@media (max-width: 700px) {
  .warum-page {
    padding-left: 24px;
    padding-right: 24px;
  }
  .warum-inner {
    flex-direction: column;
  }
  .warum-image {
    flex: 0 0 auto;
    width: 100%;
  }
  .warum-text {
    width: 100%;
  }
  .warum-text h1 {
    font-size: clamp(22px, 7vw, 32px);
  }
  .warum-text p {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* ---------- Handlungsoptionen (vormals "Kampagne") ---------- */

.handlungsoptionen-page {
  background: var(--color-white);
  padding: calc(var(--header-height) + 40px) 60px 100px;
}

.handlungsoptionen-box {
  background: rgba(255, 235, 0, 0.15); /* Website-Gelb bei 15% Transparenz */
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(32px, 4.17vw, 80px);
}

.handlungsoptionen-columns {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(24px, 3.65vw, 70px);
  align-items: start;
}

.handlungsoptionen-left h1 {
  font-family: var(--font-mono); /* Roboto Mono */
  font-weight: 400; /* Regular */
  font-size: clamp(28px, 3.65vw, 70px); /* 70px auf 1920px-Leinwand */
  line-height: clamp(1.3, 5.2vw, 1.43); /* 100px Zeilenabstand bei 70px Schriftgröße */
  margin: 0 0 clamp(20px, 2.6vw, 50px);
}

.handlungsoptionen-left h1 strong {
  font-weight: 700; /* Roboto Mono Bold, für "Wirkungsbereich" */
}

.handlungsoptionen-left p {
  font-family: var(--font-heading); /* Inter */
  font-weight: 400;
  font-size: clamp(14px, 1.04vw, 20px); /* 20px auf 1920px-Leinwand */
  line-height: 1.75; /* 35px Zeilenabstand bei 20px Schriftgröße */
  margin: 0 0 clamp(20px, 2.6vw, 50px);
}

.handlungsoptionen-links {
  display: flex;
  gap: clamp(12px, 1.56vw, 30px);
}

.ho-box {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.15vw, 22px);
  border: 1px solid var(--color-ink);
  padding: clamp(12px, 1.25vw, 24px);
  color: var(--color-ink);
  text-decoration: none;
  min-width: clamp(90px, 8.85vw, 170px);
  transition: background 0.2s ease, color 0.2s ease;
}

.ho-box:hover .ho-caption {
  color: var(--color-white);
  opacity: 0.85;
}

.ho-title {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(13px, 0.885vw, 17px);
  line-height: 1.3;
}

.ho-caption {
  font-family: var(--font-heading); /* Inter */
  font-weight: 400;
  font-size: clamp(10px, 0.625vw, 12px);
  line-height: 1.4;
  color: var(--color-ink);
  opacity: 0.75;
}

.ho-box:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

.handlungsoptionen-list p {
  font-family: var(--font-mono); /* Roboto Mono */
  font-weight: 400;
  font-size: clamp(14px, 1.04vw, 20px); /* 20px auf 1920px-Leinwand */
  line-height: 1.75; /* 35px Zeilenabstand bei 20px Schriftgröße */
  margin: 0 0 clamp(20px, 2.6vw, 40px);
}

.handlungsoptionen-list p:last-child {
  margin-bottom: 0;
}

.handlungsoptionen-list p strong {
  font-weight: 700; /* Roboto Mono Bold */
}

/* Mobile: die 2 Spalten (Titel/Text/Links links, 5-Punkte-Liste rechts)
   würden auf schmalen Screens zu sehr gequetscht — stattdessen die
   5-Punkte-Liste unter das PDF-Booklet/Instagram-Feld stellen. Außerdem
   weniger Außen-/Innenabstand (Text bekommt mehr Breite, "rückt weiter
   nach rechts") und kleinere, feste Schriftgrößen statt der vw-Mindestwerte. */
@media (max-width: 700px) {
  .handlungsoptionen-page {
    padding-left: 24px;
    padding-right: 24px;
  }
  .handlungsoptionen-box {
    padding: 24px;
  }
  .handlungsoptionen-columns {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .handlungsoptionen-left h1 {
    font-size: clamp(22px, 7vw, 32px);
  }
  .handlungsoptionen-left p,
  .handlungsoptionen-list p {
    font-size: 14px;
    line-height: 1.6;
  }
  .ho-title {
    font-size: 13px;
  }
  .ho-caption {
    font-size: 10px;
  }
}

/* ---------- Footer / Impressum ---------- */

.site-footer {
  background: var(--color-white);
  border-top: 1px solid #e5e5e5;
  padding: 32px 60px;
}

.site-footer p {
  max-width: var(--max-width);
  margin: 0 auto;
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.68vw, 13px);
  line-height: 1.7;
  color: var(--color-footnote);
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
}