/* Lokale Schrift */
@font-face {
  font-family: Jost;
  src: url("assets/fonts/Jost-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Globale Designvariablen */
:root {
  /* Global colours: text, surfaces, accents and interactive elements. */
  --forest: #315b42;
  --sage: #a8b895;
  --cream: #f2f0e7;
  --white: #fff;
  --ink: #20382a;
  --line: #cdd1c4;
  /* Locally supplied typeface, typography scale and readable line heights. */
  --font: Jost, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-sm: 1.2rem;
  --text-base: 1.5rem;
  --text-lg: 1.6rem;
  --text-xl: 1.7rem;
  --heading-1: clamp(2.75rem, 6.4vw, 6rem);
  --heading-2: clamp(2rem, 3.6vw, 3.5rem);
  --heading-3: 1.7rem;
  --leading: 1.7;
  --leading-heading: 1.2;
  /* Spacing uses the agreed steps; containers limit overall and reading width. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 2rem;
  --space-5: 4rem;
  --space-6: 8rem;
  --container: 80rem;
  --reading: 65ch;
  --radius: 0;
  --shadow: none;
  /* Reference values; media queries use literal values because CSS custom
    properties are not supported as media-query conditions. */
  --breakpoint-tablet: 48rem;
  --breakpoint-desktop: 72rem;
}

/* Grundelemente und Typografie */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 2rem;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 var(--text-base)/var(--leading) var(--font);
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3 {
  font-weight: 500;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h1 {
  font-size: var(--heading-1);
  line-height: var(--leading-heading);
  color: var(--forest);
}

h2 {
  font-size: var(--heading-2);
  line-height: 1.12;
  color: var(--forest);
}

h3 {
  font-size: var(--heading-3);
  line-height: 1.25;
}

p + p {
  margin-top: var(--space-3);
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.065em;
}

a:hover {
  color: var(--forest);
}

button {
  font: inherit;
}

button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 0.2rem solid var(--forest);
  outline-offset: 0.25rem;
}

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

::selection {
  background: var(--sage);
  color: var(--ink);
}

.container {
  width: calc(100% - 2rem);
  max-width: var(--container);
  margin-inline: auto;
}

.section {
  padding-block: var(--space-5);
}

.reading {
  max-width: var(--reading);
}

.lead {
  font-size: var(--text-lg);
  line-height: 1.5;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  padding: 1rem;
  background: var(--white);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Kopfbereich und Navigation */
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.brand {
  display: block;
  width: 12rem;
  flex-shrink: 0;
}

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

.navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  font-size: var(--text-lg);
}

.navigation a {
  text-decoration: none;
  padding-block: 0.5rem;
}

.navigation a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 0.125rem;
}

.nav-vote {
  border-bottom: 1px solid var(--forest);
}

.menu-toggle {
  border: 1px solid var(--forest);
  background: none;
  color: var(--ink);
  padding: 0.5rem 1rem;
  cursor: pointer;
  min-height: 2.75rem;
}

.menu-toggle[hidden] {
  display: none;
}

.js-enabled .menu-toggle {
  display: block;
}

.js-enabled .navigation {
  display: none;
  flex-direction: column;
  align-items: stretch;
  padding-block: 1rem;
}

.js-enabled .navigation.is-open {
  display: flex;
}

.js-enabled .navigation a {
  min-height: 2.75rem;
}

.navigation a:hover {
  text-decoration: underline;
}

/* Einstieg, Buttons und Abstimmungshinweis */
.hero {
  padding-top: var(--space-5);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}

.hero-copy > span {
  font-weight: 700;
  font-size: var(--text-xl);
}

.hero h1 span {
  color: var(--forest);
}

.hero-aside {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-4);
}

.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--forest);
  color: var(--white);
  padding: 1rem 2rem;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid var(--forest);
  min-height: 3rem;
  transition: background-color 0.15s;
}

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

.button-light {
  background: var(--cream);
  color: var(--forest);
  border-color: var(--cream);
}

.button-light:hover {
  background: var(--white);
  color: var(--forest);
}

.text-link {
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--forest);
  padding-block: 0.5rem;
  display: inline-block;
}

.text-link span {
  display: inline-block;
  margin-left: 0.5rem;
}

.hero-picture {
  position: relative;
}

.hero-picture > img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}

.date-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--forest);
  color: var(--white);
  padding: var(--space-4);
  text-decoration: none;
}

.date-card:hover {
  color: var(--white);
  background: var(--ink);
}

.date-card > span {
  font-size: var(--text-sm);
}

.date-card strong {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.12;
}

.date-card > span:last-child {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

/* Inhaltsraster, Bilder und Argumentkarten */
.split {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

.split h2 {
  margin-bottom: var(--space-4);
}

.split .text-link {
  margin-top: var(--space-4);
}

figcaption {
  font-size: var(--text-sm);
  margin-top: 0.5rem;
  line-height: 1.45;
}

.portrait-figure {
  max-width: 100%;
}

.portrait-figure img {
  width: 100%;
  max-height: 44rem;
  object-fit: cover;
}

.section-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.section-heading > p {
  max-width: 24rem;
}

.section-note {
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.surface,
.argument-teasers {
  background: #e7eadf;
}

/* Weisse Abschnitte markieren redaktionelle Schwerpunkte und geben Logos
   einen neutralen Grund. Auf der Startseite wechseln Creme, Weiss und Gruen. */
.section-white {
  background: var(--white);
}

/* Hintergrund über die volle Breite, Inhalt im inneren .container. */
.committee-section {
  padding-bottom: var(--space-4);
}

.three-grid {
  display: grid;
  gap: var(--space-3);
}

.argument-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-4);
  background: var(--cream);
  text-decoration: none;
  min-height: 20rem;
  border: 1px solid transparent;
}

.argument-card:hover {
  border-color: var(--forest);
}

.card-number {
  font-size: 1rem;
  border-bottom: 1px solid var(--sage);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  width: 100%;
  color: var(--forest);
}

.argument-card h3 {
  margin-bottom: 1rem;
}

.argument-card p {
  font-size: var(--text-base);
}

.card-arrow {
  font-size: 1.5rem;
  align-self: flex-end;
  margin-top: auto;
  padding-top: 2rem;
}

/* Zitate und Komitee */
.quote-grid {
  display: grid;
  gap: var(--space-5);
}

.quote blockquote {
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.quote figcaption {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.quote figcaption img {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
}

.quote figcaption span span {
  display: block;
}

.quote strong {
  font-weight: 500;
}

.quotes-section {
  padding-bottom: var(--space-4);
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.person img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  margin-bottom: 1rem;
}

.person h3 {
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

.person p {
  font-size: 1rem;
  margin-top: 0.25rem;
}

.party-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: var(--space-4);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}

.party-logos img {
  object-fit: contain;
  width: 100%;
  max-width: 9rem;
  height: 4rem;
}

/* Ungerade Anzahl Logos: das letzte füllt die ganze Zeile aus. */
.party-logos img:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: none;
}

/* Unterseiten, Projekt und Argumente */
.page-intro {
  padding-block: var(--space-5);
}

.page-intro .lead {
  margin-top: 2rem;
  max-width: 42rem;
}

.project-opening > .reading {
  margin-bottom: var(--space-4);
}

.comparison {
  display: grid;
  gap: var(--space-4);
}

.comparison img {
  width: 100%;
  aspect-ratio: 604/677;
  object-fit: cover;
}

.comparison figcaption {
  font-size: var(--text-sm);
}

.info-panel {
  background: var(--sage);
  padding: var(--space-4);
  max-width: none;
}

.info-panel h2 {
  margin-bottom: 2rem;
  color: var(--ink);
}

.info-panel p {
  max-width: var(--reading);
}

.editorial-note,
.placeholder {
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.editorial-note {
  margin-top: 2rem;
}

.placeholder {
  font-weight: 500;
}

.argument-layout {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}

.argument-nav {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 0.5rem 1rem;
  font-size: var(--text-base);
}

.argument-nav a {
  padding-block: 0.5rem;
}

.argument {
  border-top: 1px solid var(--line);
  padding-block: var(--space-4);
  display: grid;
  gap: var(--space-3);
  scroll-margin-top: 2rem;
}

.argument h2 {
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  margin-bottom: 1rem;
}

.argument p {
  max-width: var(--reading);
}

.content-bottom {
  padding-bottom: var(--space-5);
}

.placeholder-panel {
  border: 1px solid var(--line);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.placeholder-panel h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.placeholder-panel .placeholder {
  margin-block: 2rem;
}

.faq-layout {
  display: grid;
  gap: var(--space-4);
}

.faq-layout > div > h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.faq-list details {
  border-top: 1px solid var(--line);
}

.faq-list details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-list summary span {
  font-size: var(--text-base);
  font-weight: 500;
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  list-style: none;
  padding: 2rem 0;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1.4;
}

summary::-webkit-details-marker {
  display: none;
}

.faq-symbol {
  position: relative;
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
}

.faq-symbol::before,
.faq-symbol::after {
  content: "";
  position: absolute;
  background: var(--forest);
  left: 0;
  top: 50%;
  width: 1rem;
  height: 0.1rem;
}

.faq-symbol::after {
  transform: rotate(90deg);
}

details[open] .faq-symbol::after {
  transform: rotate(0);
}

.faq-answer {
  padding-bottom: 2rem;
  max-width: var(--reading);
}

.legal h2 {
  font-size: 1.75rem;
  margin-block: 4rem 1rem;
}

.legal h2:first-child {
  margin-top: 0;
}

.legal p {
  overflow-wrap: anywhere;
}

/* Footer */
.site-footer {
  padding-block: var(--space-5) var(--space-4);
}

.footer-top,
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer-top {
  padding-bottom: var(--space-4);
}

.footer-top > a:last-child {
  overflow-wrap: anywhere;
}

.footer-bottom {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: 1rem;
}

.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.footer-bottom nav a {
  padding-block: 0.5rem;
}





/* Argumentseite: Einstiegszitat und halbierte Abstände vor den Schlusszitaten.
   Die drei bisherigen Abstände (letztes Argument, Raster, Zitatabschnitt)
   werden jeweils halbiert. */
.arguments-page {
  --argument-spacing: var(--space-4);
}

.argument-intro-quote {
  padding-bottom: var(--space-5);
}

/* Weisse Zitatkästen auf der Argumentseite. */
.arguments-page .quote {
  background: var(--white);
  padding: var(--space-4);
}

.arguments-page .argument-layout {
  padding-bottom: var(--argument-spacing);
}

.arguments-page .argument:last-child {
  padding-bottom: calc(var(--argument-spacing) / 2);
}

.arguments-page .argument-closing-quotes {
  padding-top: var(--argument-spacing);
}


/* Argumentseite: Hero in Originalgrösse des Bilds (1920×640, ohne Zuschnitt oder Zoom). */
.argument-hero {
  overflow: hidden;
}

.argument-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus-x) var(--hero-focus-y);
  transform: scale(var(--hero-zoom));
  transform-origin: var(--hero-focus-x) var(--hero-focus-y);
}


/* Projekt: weisser Nutzungskasten und halbierter Abstand zu den Zitaten. */
.project-use-section .info-panel {
  background: var(--white);
}

.project-use-section {
  padding-bottom: var(--space-4);
}

.project-use-section + .quotes-section {
  padding-top: var(--space-4);
}


/* Startseite: halbierter Abstand zwischen Projektüberblick und Zitaten. */
.home-project-overview {
  padding-bottom: var(--space-4);
}

.home-project-overview + .quotes-section {
  padding-top: var(--space-4);
}


/* Beispielbilder zur Hanggestaltung mit gemeinsamer Bildlegende. */
.field-hedges {
  margin-top: var(--space-4);
}

.field-hedges-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.field-hedges-images img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}

/* Faktencheck: weisse Kästen mit klar getrennten Behauptungen und Antworten. */
.factcheck-intro {
  max-width: var(--reading);
  margin-top: var(--space-4);
}

.factcheck-list {
  display: grid;
  gap: var(--space-4);
}

.factcheck-card {
  min-width: 0;
  background: var(--white);
  padding: var(--space-4);
}

.factcheck-card h2 {
  max-width: var(--reading);
  font-size: clamp(1.6rem, 2.6vw, 1.8rem);
  line-height: 1.5;
  
}

.factcheck-card h3 {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  letter-spacing: normal;
}

.factcheck-card ul {
  max-width: var(--reading);
  margin-block: var(--space-3) 0;
  padding-left: var(--space-4);
}

.factcheck-card li + li {
  margin-top: var(--space-3);
}


/* Behauptungslabel im Stil der H3, ohne zusätzliche Überschriftenebene. */
.factcheck-eyebrow {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: normal;
}

/* ---- Überarbeitung: Parteilogos, Projekt, Argumente, Footer, Seitenkopf ---- */





/* Faktencheck: Zwischenüberschriften kursiv. */
.page-faktencheck h2 {
  font-style: italic;
}


/* Unterseiten: halber Abstand zwischen Navigation und Titel. */
.page-intro-tight {
  padding-top: 2rem;
}


/* Footer: Primärnavigation immer in Grundschrift; Rechtliches rechts und kleiner (Desktop) */
.footer-primary {
  font-size: var(--text-base);
}



/* Optische Ausrichtung: Die Seitenbearing grosser Schrift rückt die H1 nach rechts ein.
   Der Wert gleicht den linken Glyphenrand an die Textkante an (gemessen am Buchstaben F). */
h1 {
  margin-inline-start: -0.07em;
}

/* ---- Breakpoint ab 48rem (Tablet und Desktop) ---- */
@media (min-width: 48rem) {
/* Tablet ab 48 rem */
  .party-logos {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .party-logos img {
    max-width: none;
  }
  .party-logos img:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .container {
    width: calc(100% - 4rem);
  }
  .hero-copy {
    grid-template-columns: 1.2fr 1fr;
    gap: 2rem;
    padding-bottom: 4rem;
  }
  .hero-aside {
    padding-bottom: 0.5rem;
  }
  .hero-picture > img {
    aspect-ratio: 16/9;
  }
  .date-card {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    width: 16rem;
  }
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
  .three-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .quote-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
  }
  .quote-grid > .quote:last-child:nth-child(3) {
    grid-column: 1/-1;
    max-width: 48rem;
  }
  .section-heading {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  .people-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
  .person img {
    max-width: 12rem;
  }
  .comparison {
    grid-template-columns: 1fr 1fr;
  }
  .vote-layout {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }
  .ballot {
    border-top: 0;
    border-left: 1px solid var(--sage);
    padding-top: 0;
    padding-left: 4rem;
  }
  .faq-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-top {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .argument {
    grid-template-columns: minmax(0, 1fr);
  }
  .info-panel {
    padding: 4rem;
  }

  .factcheck-card {
    padding: var(--space-5);
  }

/* Projekt, Desktop: Satellitenbild oben auf Höhe des Textes. Auf dem Handy
   bleibt die Reihenfolge im Textfluss: Satellit nach dem ersten Absatz,
   Waldhaus-Visualisierung nach dem ersten Absatz. */
  .split-satellite-section,
  .split-waldhaus-section {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .split-satellite-section .split-reflow,
  .split-waldhaus-section .split-reflow {
    display: contents;
  }
  .split-satellite-section > .split-reflow > p,
  .split-satellite-section > .split-reflow > .field-hedges {
    grid-column: 1;
  }
  .split-satellite-section > .split-reflow > .split-media {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
  /* Textabschnitt «Bänder aus Feldgehölzen» in der rechten Spalte, unter dem Satelliten. */
  .split-satellite-section > .split-reflow > .split-media + p {
    grid-column: 2;
    grid-row: 2;
  }
  .split-satellite-section > .split-reflow > .field-hedges {
    grid-row: 2;
  }
  /* Linke und rechte Spalte der zweiten Reihe oben bündig ausrichten. */
  .split-satellite-section > .split-reflow > .field-hedges,
  .split-satellite-section > .split-reflow > .split-media + p {
    align-self: start;
    margin-top: 0;
  }
  /* Waldhaus, Desktop: Text als eine Spalte rechts, Visualisierung links, beide oben bündig. */
  .split-waldhaus-section > .split-reflow {
    display: contents;
  }
  .split-waldhaus-section .split-text {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .split-waldhaus-section .split-text > p {
    margin: 0;
  }
  .split-waldhaus-section > .split-reflow > .split-media {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-top: 0;
  }
}

/* ---- Breakpoint ab 72rem (Desktop) ---- */
@media (min-width: 72rem) {
/* Desktop ab 72 rem */
  .faq-layout {
    width: 67%;
  }

  .section {
    padding-block: 8rem;
  }
  .hero {
    padding-top: 4rem;
  }
  .brand {
    width: 14rem;
  }
  .header-inner {
    flex-wrap: nowrap;
    min-height: 6rem;
  }
  .navigation,
  .js-enabled .navigation {
    display: flex;
    flex-direction: row;
    width: auto;
    align-items: center;
    padding: 0;
    gap: 2rem;
  }
  .js-enabled .menu-toggle {
    display: none;
  }
  .navigation a,
  .js-enabled .navigation a {
    min-height: auto;
  }
  .nav-vote {
    margin-left: 2rem;
  }
  .hero-copy {
    grid-template-columns: 1.15fr 1fr;
    gap: 4rem;
  }
  /* Abstand zwischen Abstimmungshinweis und H1 halbieren (Gap 4rem → 2rem). */
  .hero-cta + h1 {
    margin-top: -2rem;
  }
  .hero-aside {
    gap: 2rem;
  }
  .hero-aside .lead {
    font-size: 1.5rem;
  }
  .hero-picture > img {
    aspect-ratio: 2.1;
  }
  .date-card {
    bottom: 2rem;
    right: 2rem;
  }
  .portrait-figure {
    max-width: 32rem;
    margin-left: auto;
  }
  .split {
    gap: 8rem;
  }
  .people-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2rem;
  }
  .person h3 {
    font-size: 1.125rem;
  }
  .committee-section {
    padding-bottom: var(--space-5);
  }
  .party-logos {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2rem;
  }
  .party-logos img {
    height: 5rem;
  }
  .page-intro {
    padding-block: 8rem 4rem;
  }
  .argument-layout {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 8rem;
    padding-bottom: 8rem;
  }
  .argument-nav {
    position: sticky;
    top: 2rem;
    flex-direction: column;
    align-self: start;
    align-items: flex-start;
  }
  .argument {
    padding-block: 4rem;
  }
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .content-bottom {
    padding-bottom: 8rem;
  }

  .arguments-page {
    --argument-spacing: var(--space-5);
  }

  .project-use-section {
    padding-bottom: var(--space-5);
  }

  .project-use-section + .quotes-section {
    padding-top: var(--space-5);
  }

  .home-project-overview {
    padding-bottom: var(--space-5);
  }

  .home-project-overview + .quotes-section {
    padding-top: var(--space-5);
  }

  .page-intro-tight {
    padding-top: 4rem;
  }

  .footer-secondary {
    font-size: var(--text-sm);
  }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Druckansicht */
@media print {
  body {
    font-size: 11pt;
    background: white;
    color: black;
  }
  .site-header,
  .site-footer,
  .actions,
  .argument-nav,
  .date-card,
  .vote {
    display: none;
  }
  .section,
  .page-intro {
    padding-block: 2rem;
  }
  .container {
    width: 100%;
  }
  h1 {
    font-size: 32pt;
  }
  h2 {
    font-size: 24pt;
  }
  .hero-picture > img {
    aspect-ratio: auto;
  }
  details:not([open]) .faq-answer {
    display: block;
  }
  .argument {
    break-inside: avoid;
  }
  .quote {
    break-inside: avoid;
  }
}

/* ---- Breakpoint bis 47.99rem (Handy) ---- */
@media (max-width: 47.99rem) {
/* Startseite: Parteilogos auf dem Handy ausblenden. */
  .party-logos {
    display: none;
  }

/* Argumente: Inhaltsverzeichnis auf dem Handy ausblenden. */
  .argument-nav {
    display: none;
  }

/* Projekt, Handy: Nutzungskasten bis an die Bildschirmränder, oben ohne Abstand. */
  .project-use-section {
    padding-top: 0;
  }
  .project-use-section .info-panel {
    margin-inline: calc(50% - 50vw);
    padding-block: var(--space-5);
  }
  /* Satellitenbild und Waldhaus-Visualisierung: 2rem Abstand zum Text. */
  .split-satellite-section .split-media,
  .split-waldhaus-section .split-media {
    margin-block: var(--space-4);
  }

/* Faktencheck, Handy: Überschriften und Listen nutzen die volle Containerbreite; seitlicher Kartenabstand 1rem. */
  .factcheck-card h2,
  .factcheck-card ul {
    max-width: none;
  }
  .factcheck-card {
    padding-inline: 1rem;
  }

/* Waldhaus, Handy: Reihenfolge im Textfluss ist erster Absatz, Visualisierung, Rest. */
  .split-waldhaus-section > .split-reflow {
    display: flex;
    flex-direction: column;
  }
  .split-waldhaus-section .split-text {
    display: contents;
  }
  .split-waldhaus-section .split-text > p:first-child {
    order: 1;
  }
  .split-waldhaus-section .split-media {
    order: 2;
  }
  .split-waldhaus-section .split-text > p:not(:first-child) {
    order: 3;
  }
}