/* =========================================================
   eric-eigendorf.de
   Stylesheet, ein einziges File, keine externen Abhängigkeiten
   ========================================================= */

/* ---------- Schriften, selbst gehostet ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-var.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --rot: #e3000f;        /* Flächenfarbe, bleibt in beiden Modi identisch */
  --akzent: #e3000f;     /* Akzentfarbe für Text und Linien */
  --akzent-tief: #a8000b;
  --seite: #ffffff;      /* Seitenhintergrund */
  --tinte: #16161a;
  --grau: #3d3d44;
  --grau-leise: #6a6a72;
  --linie: #e1e1dd;
  --papier: #f7f7f5;
  --weiss: #ffffff;

  --schrift-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --schrift-text: "Source Serif 4", Georgia, "Times New Roman", serif;

  --breite: 76rem;
  --rand: clamp(1.25rem, 5vw, 4rem);
  --raum: clamp(4.5rem, 10vw, 8.5rem);
  --kopf-hoehe: 4rem;

  --tempo: 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Sanfter Seitenwechsel in Browsern, die das unterstützen.
   Ältere Browser ignorieren die Regel einfach. */
@view-transition {
  navigation: auto;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

body {
  margin: 0;
  background: var(--seite);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  line-height: 1.62;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

figure {
  margin: 0;
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--schrift-display);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

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

.auf-rot :focus-visible,
.kopf--ueber-rot:not(.ist-gescrollt) :focus-visible {
  outline-color: var(--weiss);
}

::selection {
  background: var(--rot);
  color: var(--weiss);
}

/* ---------- Trefferflächen ----------
   Auf dem Handy wird mit dem Finger getippt, nicht mit dem Mauszeiger.
   Kleine Textlinks bekommen deshalb eine unsichtbar vergrößerte Fläche von
   mindestens 44 Bildpunkten Höhe, ohne dass sich das Layout ändert. */
@media (pointer: coarse) {
  .navigation a,
  .fuss__navi a,
  .fuss__links a,
  .pfeillink,
  .hero__ig,
  .kontakt__mail {
    position: relative;
  }

  .navigation a::after,
  .fuss__navi a::after,
  .fuss__links a::after,
  .pfeillink::after,
  .hero__ig::after,
  .kontakt__mail::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 44px;
    transform: translateY(-50%);
  }

  .ig-punkt {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* ---------- Hilfsklassen ---------- */
.behaelter {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

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

.sprungmarke {
  position: absolute;
  left: 1rem;
  top: -6rem;
  z-index: 100;
  background: var(--tinte);
  color: var(--weiss);
  font-family: var(--schrift-display);
  font-size: 0.9rem;
  padding: 0.7rem 1.1rem;
  text-decoration: none;
  transition: top var(--tempo);
}

.sprungmarke:focus {
  top: 1rem;
}

.augenbraue {
  font-family: var(--schrift-display);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--akzent);
  line-height: 1.3;
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.augenbraue::after {
  content: "";
  flex: 0 0 3.5rem;
  height: 2px;
  background: currentColor;
}

.leise {
  color: var(--grau-leise);
}

/* Textlink mit Pfeil, ersetzt Buttons */
.pfeillink {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--schrift-display);
  font-weight: 620;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid currentColor;
  color: var(--akzent);
  transition: gap var(--tempo), color var(--tempo);
}

.pfeillink:hover,
.pfeillink:focus-visible {
  gap: 0.95em;
  color: var(--akzent-tief);
}

.auf-rot .pfeillink {
  color: var(--weiss);
}

.auf-rot .pfeillink:hover,
.auf-rot .pfeillink:focus-visible {
  color: var(--weiss);
}

/* ---------- Lesefortschritt ----------
   Nutzt eine scrollgesteuerte Animation. Browser ohne Unterstützung zeigen
   den Balken schlicht nicht an, es fehlt dann nichts Wesentliches. */
.fortschritt {
  display: none;
}

@supports (animation-timeline: scroll()) {
  .fortschritt {
    display: block;
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 60;
    width: 100%;
    height: 3px;
    background: var(--rot);
    transform-origin: 0 50%;
    animation: lesen linear;
    animation-timeline: scroll(root block);
  }

  @keyframes lesen {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .fortschritt {
    display: none;
  }
}

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
  color: var(--akzent);
  transition: background var(--tempo), border-color var(--tempo),
    color var(--tempo);
}

/* über dem roten Hero: transparent und weiß */
.kopf--ueber-rot {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--weiss);
}

.kopf--ueber-rot.ist-gescrollt {
  background: var(--weiss);
  border-bottom-color: var(--linie);
  color: var(--akzent);
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.wortmarke {
  display: none;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.navigation {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  justify-content: space-between;
}

.navigation a {
  font-family: var(--schrift-display);
  font-size: 0.875rem;
  font-weight: 560;
  letter-spacing: -0.005em;
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: border-color var(--tempo), opacity var(--tempo);
}

.navigation a:hover {
  border-bottom-color: currentColor;
}

.navigation .ig-punkt {
  border-bottom: 0;
  padding: 0;
}

.navigation .ig-punkt:hover {
  border-bottom-color: transparent;
}

.navigation a[aria-current="page"] {
  border-bottom-color: currentColor;
}

.kopf--ueber-rot .navigation a[aria-current="page"] {
  border-bottom-color: currentColor;
}

.kopf--ueber-rot.ist-gescrollt .navigation a[aria-current="page"] {
  border-bottom-color: currentColor;
}

.ig-punkt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-inline-start: 0;
  border-radius: 50%;
  transition: background var(--tempo);
}

.ig-punkt svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.ig-punkt:hover {
  background: rgba(227, 0, 15, 0.08);
}

.kopf--ueber-rot .ig-punkt:hover {
  background: rgba(255, 255, 255, 0.18);
}

.kopf--ueber-rot.ist-gescrollt .ig-punkt:hover {
  background: rgba(227, 0, 15, 0.08);
}

@media (min-width: 30rem) {
  :root {
    --kopf-hoehe: 4.25rem;
  }
  .navigation {
    gap: clamp(0.9rem, 1.6vw, 1.5rem);
    width: auto;
    justify-content: flex-end;
  }
  .navigation a {
    font-size: 0.9375rem;
  }
  .ig-punkt {
    margin-inline-start: -0.4rem;
  }
}

@media (min-width: 46rem) {
  /* Der Name erscheint erst, wenn er vollständig danebenpasst.
     Eine Abkürzung wie EOE würde niemand einordnen. */
  .wortmarke {
    display: block;
  }
}

@media (min-width: 60rem) {
  /* Auf großen Bildschirmen darf die Kopfzeile flacher sein. Sie ist eine
     Orientierungshilfe, kein Gestaltungselement, und nimmt dem Hero sonst
     unnötig Höhe weg. */
  :root {
    --kopf-hoehe: 3.75rem;
  }
  .wortmarke {
    font-size: 0.875rem;
  }
  .navigation a {
    font-size: 0.875rem;
  }

  /* Name und Menü stehen zusammen links, das Instagram-Symbol verankert die
     rechte Seite. Vorher klaffte zwischen beiden ein Drittel der Bildbreite. */
  .navigation {
    flex: 1;
    margin-inline-start: clamp(2rem, 4vw, 3.5rem);
    gap: clamp(1.25rem, 2.2vw, 2rem);
    justify-content: flex-start;
  }
  .navigation .ig-punkt {
    margin-inline-start: auto;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--rot);
  color: var(--weiss);
  margin-top: calc(var(--kopf-hoehe) * -1);
  padding-top: var(--kopf-hoehe);
  overflow: hidden;
}

.hero__innen {
  display: grid;
  gap: 0;
  align-items: end;
  grid-template-rows: auto auto;
}

.hero__text {
  /* Auf dem Handy zählt jeder Bildpunkt oberhalb der Falz. Der Name soll
     dicht unter der Navigation stehen, nicht erst nach einem Luftpolster. */
  padding-block: clamp(1.25rem, 4.5vh, 2.25rem) clamp(1.25rem, 3.5vh, 2rem);
  align-self: center;
  min-width: 0;
  container-type: inline-size;
}

.hero__name {
  /* Rückfall für Browser ohne Container-Einheiten */
  font-size: clamp(2.6rem, 9vw, 5rem);
  /* Die Größe richtet sich nach der Textspalte, nicht nach dem Fenster.
     So bleibt der Name auf jeder Breite in genau drei Zeilen. */
  font-size: clamp(2.4rem, 16.5cqi, 5.6rem);
  font-weight: 760;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0;
}

.hero__name span {
  display: block;
}

.hero__strich {
  width: 100%;
  height: 2px;
  background: currentColor;
  opacity: 0.55;
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(1.2rem, 2.5vw, 1.8rem);
}

.hero__claim {
  font-family: var(--schrift-text);
  font-size: clamp(1.375rem, 3.6vw, 2.125rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(1.6rem, 4vw, 2.4rem);
  /* Auf dem Handy steht der Leitsatz in einer Zeile. Die Größe richtet sich
     nach der Textspalte, damit er auch auf 320 Bildpunkten nicht umbricht. */
  white-space: nowrap;
  font-size: min(1.5rem, 6.4cqi);
}

.hero__rolle {
  font-family: var(--schrift-display);
  /* Rückfall für Browser ohne Container-Einheiten */
  font-size: 0.875rem;
  /* Die Zeile "Vorsitzender der Fraktion SPD & FW Halle (Saale)" soll auch
     auf schmalen Geräten in einer Zeile stehen. Die Größe richtet sich
     deshalb nach der Textspalte und wird nach oben begrenzt. */
  font-size: min(0.9375rem, 4.3cqi);
  font-weight: 520;
  line-height: 1.45;
  letter-spacing: 0.005em;
  margin: 0 0 1.75rem;
}

.hero__rolle span {
  display: block;
  white-space: nowrap;
}

.hero__ig {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--schrift-display);
  font-size: 0.9375rem;
  font-weight: 560;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  padding-bottom: 0.2rem;
  transition: border-color var(--tempo);
}

.hero__ig svg {
  width: 1.1rem;
  height: 1.1rem;
}

.hero__ig:hover,
.hero__ig:focus-visible {
  border-bottom-color: currentColor;
}

/* Porträt */
.hero__bild {
  position: relative;
  align-self: end;
  /* Rechtsbündig statt mittig, mit leichtem Überhang über den Seitenrand.
     Das wirkt großzügiger und lässt links Luft zum Text. */
  justify-self: end;
  width: 100%;
  max-width: 26rem;
  /* Das Foto darf nach rechts über den Seitenrand hinausragen und nach oben
     hinter den Textblock rutschen. Im oberen Bilddrittel ist die linke Hälfte
     transparent, dort steht nur der Instagram-Link, der frei bleibt. */
  margin-inline-end: calc(var(--rand) * -3);
  margin-top: -5rem;
}

.hero__bild img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
}

/* Variante A: freigestelltes Foto, steht auf der Unterkante */
.hero__bild--frei img {
  display: block;
  max-height: 60svh;
  width: auto;
  margin-inline: auto;
}

/* Variante B: rechteckiges Originalfoto in ruhigem Bildfeld */
.hero__bild--rechteck {
  align-self: center;
  margin-bottom: clamp(2rem, 6vh, 4rem);
}

.hero__bild--rechteck img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
}

@media (min-width: 60rem) {
  .hero__innen {
    max-width: 88rem;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
    grid-template-rows: auto;
    /* Auf mittelbreiten Fenstern begrenzt die Spalte die Bildgröße. Der Hero
       bleibt deshalb flacher, damit das Foto nicht in einer leeren Fläche
       schwebt. Ab 86rem greift weiter unten der höhere Wert. */
    min-height: min(calc(100svh - var(--kopf-hoehe)), 40rem);
  }
  .hero__text {
    padding-block: 4.5rem 4.75rem;
  }
  .hero__rolle {
    /* Auch hier bleibt die Containerbegrenzung aktiv, damit die Zeile bei
       schmalen Spalten nicht über den Rand läuft. */
    font-size: min(clamp(0.9375rem, 1.6vw, 1.0625rem), 4.3cqi);
  }
  .hero__claim {
    white-space: normal;
    font-size: clamp(1.375rem, 3.6vw, 2.125rem);
    max-width: 16ch;
  }
  .hero__bild {
    max-width: none;
    margin-inline: 0;
    justify-self: end;
    transform: translate(6%, -1.6rem);
    margin-bottom: -1.6rem;
  }
  .hero__bild--frei img {
    /* Auf dem Desktop sitzt das Porträt näher am rechten und oberen Rand.
       So nutzt der Hero die Fläche besser und wirkt weniger luftig. */
    max-height: min(calc(100svh - var(--kopf-hoehe)), 54rem);
    width: auto;
    margin-inline-start: auto;
  }
}

@media (min-width: 86rem) {
  .hero__innen {
    min-height: min(calc(100svh - var(--kopf-hoehe)), 44rem);
  }
  .hero__bild {
    transform: translate(9%, -2rem);
    margin-bottom: -2rem;
  }
}

/* ---------- Sektionen ---------- */
.sektion {
  padding-block: var(--raum);
}

.sektion--hell {
  background: var(--papier);
}

.sektion--rot {
  background: var(--rot);
  color: var(--weiss);
}

.sektion--schmal {
  padding-block: calc(var(--raum) * 0.62);
}

/* ---------- Heimat ---------- */
.heimat__aussage {
  font-family: var(--schrift-text);
  font-size: clamp(1.625rem, 4.2vw, 3rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  max-width: 17em;
}

.heimat__aussage strong {
  font-weight: 600;
}


.heimat__spalten {
  display: grid;
  gap: 1.15em;
  max-width: 62rem;
}

.heimat__spalten p {
  color: var(--grau);
}

.heimat__mehr {
  margin-top: clamp(2rem, 5vw, 3rem);
}

@media (min-width: 52rem) {
  /* Große Aussage über die volle Breite, darunter die Erläuterung in zwei
     Spalten. So bleibt die Zeilenlänge lesbar und die Fläche wird genutzt. */
  .heimat__aussage {
    max-width: 17em;
  }
  .heimat__spalten {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    max-width: none;
  }
}

/* ---------- Leitsatzband ---------- */
.band {
  background: var(--rot);
  color: var(--weiss);
  padding-block: clamp(3.5rem, 9vw, 7rem);
}

.band__satz {
  font-family: var(--schrift-text);
  font-size: clamp(1.5rem, 4.2vw, 3.25rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.018em;
  margin: 0;
  max-width: 20em;
}

.band__satz strong {
  font-weight: 400;
  /* Unterstreichung, die den Kern des Satzes markiert, ohne zu schreien */
  box-shadow: inset 0 -0.09em 0 rgba(255, 255, 255, 0.85);
  padding-bottom: 0.02em;
}

/* ---------- Themenliste, Signatur der Seite ---------- */
.themen__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.themen__kopf h2 {
  font-size: clamp(1.75rem, 4.4vw, 3rem);
  max-width: 16ch;
}

.themenliste {
  border-top: 1px solid var(--linie);
}

.thema {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  align-items: start;
  gap: 0 clamp(0.9rem, 2.5vw, 2.5rem);
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(0.75rem, 2vw, 1.5rem);
  margin-inline: clamp(-0.75rem, -2vw, -1.5rem);
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
  color: inherit;
  transition: background var(--tempo), color var(--tempo);
}

.thema__nr {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--schrift-display);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--akzent);
  padding-top: 0.06em;
  transition: color var(--tempo);
  font-variant-numeric: tabular-nums;
}

.thema__titel {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--schrift-display);
  font-size: clamp(1.375rem, 3.5vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 0.5rem;
}

.thema__satz {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  color: var(--grau);
  max-width: 54ch;
  transition: color var(--tempo);
}

@media (hover: hover) {
  .thema:hover {
    background: var(--rot);
    color: var(--weiss);
  }
  .thema:hover .thema__nr,
  .thema:hover .thema__satz {
    color: var(--weiss);
  }
}

.thema:focus-visible {
  background: var(--rot);
  color: var(--weiss);
  outline-color: var(--weiss);
  outline-offset: -4px;
}

.thema:focus-visible .thema__nr,
.thema:focus-visible .thema__satz {
  color: var(--weiss);
}

.themen__alle {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

@media (min-width: 52rem) {
  .thema {
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 26rem);
    align-items: baseline;
    gap: 0 clamp(1.25rem, 3vw, 2.75rem);
  }
  .thema__titel {
    margin-bottom: 0;
    max-width: 20ch;
  }
  .thema__satz {
    grid-column: 3;
    grid-row: 1;
    font-size: 1.0625rem;
    line-height: 1.55;
  }
}

/* ---------- Themenseite ausführlich ---------- */
.langthema {
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  border-top: 1px solid var(--linie);
  display: grid;
  gap: 0.75rem clamp(1.5rem, 4vw, 4rem);
  scroll-margin-top: calc(var(--kopf-hoehe) + 2rem);
}

.langthema:last-of-type {
  border-bottom: 1px solid var(--linie);
}

.langthema__nr {
  font-family: var(--schrift-display);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.5rem;
}

.langthema h2 {
  font-size: clamp(1.5rem, 4vw, 2.375rem);
  margin: 0;
}

.langthema p {
  color: var(--grau);
  max-width: 58ch;
}

.langthema p.langthema__kern {
  margin: 0 0 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--akzent);
  color: var(--text);
  font-family: var(--schrift-display);
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  font-weight: 720;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

@media (min-width: 56rem) {
  .langthema {
    grid-template-columns: 4.5rem minmax(0, 24rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
  }
  .langthema__nr {
    margin: 0;
    padding-top: 0.05em;
  }
  .langthema h2 {
    position: sticky;
    top: calc(var(--kopf-hoehe) + 2rem);
  }
}

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf {
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--linie);
}

.seitenkopf h1 {
  font-size: clamp(2.25rem, 7vw, 4.25rem);
  max-width: 18ch;
}

.seitenkopf p {
  margin-top: 1.25rem;
  max-width: 46ch;
  color: var(--grau);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

/* ---------- Instagram ---------- */
.ig__kopf {
  width: 100%;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  text-align: left;
}

.ig__kopf > * {
  align-self: flex-start;
  text-align: left;
}

.ig__kicker {
  margin: 0 0 0.65rem;
  font-family: var(--schrift-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--akzent);
}

.ig__kopf h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4.4vw, 3rem);
}

.ig__einleitung {
  margin: 0 0 0.7rem;
  max-width: 46ch;
  color: var(--grau);
}

.ig__handle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.15rem;
  border-bottom: 2px solid rgba(227, 0, 15, 0.22);
  color: var(--akzent);
  font-family: var(--schrift-display);
  font-size: 1rem;
  font-weight: 740;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: gap var(--tempo), border-color var(--tempo), color var(--tempo);
}

.ig__handle:hover,
.ig__handle:focus-visible {
  gap: 0.7rem;
  border-color: currentColor;
  color: var(--akzent-tief);
}

/* Redaktioneller Aufmacher statt klassischem Social-Media-Raster */
.ig__aufmacher {
  width: min(100%, 42rem);
  margin-inline: 0;
}

.ig__aufmacher-bild {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--papier);
  text-decoration: none;
  border: 1px solid var(--linie);
}

.ig__aufmacher-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ig__aufmacher-bild:hover img,
.ig__aufmacher-bild:focus-visible img {
  transform: scale(1.025);
}


.ig__fuss {
  margin-top: 1.25rem;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
}

.ig__fuss .pfeillink {
  color: var(--akzent);
}

/* ---------- Kontakt ---------- */
.kontakt__frage {
  font-family: var(--schrift-display);
  font-weight: 740;
  font-size: clamp(2rem, 6.5vw, 4rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
  max-width: 16ch;
}

.kontakt__frage span {
  display: block;
}

.kontakt__text {
  max-width: 44ch;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
}

.kontakt__wege {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.25rem 3rem;
}

.kontakt__mail {
  font-family: var(--schrift-display);
  font-size: clamp(1.125rem, 3.2vw, 1.875rem);
  font-weight: 640;
  letter-spacing: -0.02em;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.55);
  padding-bottom: 0.25rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  transition: border-color var(--tempo), gap var(--tempo);
}

.kontakt__mail:hover,
.kontakt__mail:focus-visible {
  border-bottom-color: currentColor;
  gap: 0.85em;
}

/* ---------- Über mich ---------- */
.person {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}

@media (min-width: 60rem) {
  /* Überschrift links, Inhalt rechts. Nutzt die Breite und gibt der Seite
     eine zweite Kante, statt alles an einer Fahne aufzureihen. */
  .person__block {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
  .person__block > h2 {
    grid-column: 1;
    grid-row: 1 / span 20;
    position: sticky;
    top: calc(var(--kopf-hoehe) + 2rem);
    margin-bottom: 0;
  }
  .person__block > *:not(h2) {
    grid-column: 2;
  }
  /* Der Einstieg braucht keine Überschriftenspalte und läuft deshalb
     über die volle Breite. */
  .person__block--einstieg {
    display: block;
    max-width: 46rem;
  }
  .person__block p,
  .liste-schlicht {
    max-width: 42rem;
  }
}

.person__block h2 {
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  margin-bottom: 1.25rem;
}

.person__block h3 {
  font-family: var(--schrift-display);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau-leise);
  margin: 2rem 0 0;
}

.person__block p {
  max-width: 62ch;
  color: var(--grau);
}

.person__block--einstieg p {
  color: var(--tinte);
  font-size: clamp(1.125rem, 1.9vw, 1.3125rem);
  max-width: 56ch;
}

.liste-schlicht {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  max-width: 46rem;
  border-top: 1px solid var(--linie);
}

.liste-schlicht li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-display);
  font-size: 1rem;
  font-weight: 520;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}

.liste-schlicht li::before {
  content: "";
  flex: 0 0 0.5rem;
  height: 0.5rem;
  background: var(--akzent);
  transform: translateY(-0.15em);
}

.zeitachse {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.5rem, 5vw, 3.5rem);
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
  font-family: var(--schrift-display);
}

.zeitachse li {
  padding-top: 1rem;
  border-top: 3px solid var(--akzent);
  min-width: 8rem;
  flex: 1 1 8rem;
  max-width: 16rem;
}

.zeitachse b {
  display: block;
  font-size: 1.5rem;
  font-weight: 740;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.4rem;
}

.zeitachse span {
  font-family: var(--schrift-text);
  font-size: 0.9375rem;
  color: var(--grau);
  line-height: 1.4;
  display: block;
}

/* ---------- Rechtstexte ---------- */
.rechtstext {
  max-width: 46rem;
}

.rechtstext h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  margin: 2.75rem 0 1rem;
}

.rechtstext h3 {
  font-size: 1.0625rem;
  font-weight: 650;
  margin: 1.75rem 0 0.5rem;
}

.rechtstext p,
.rechtstext li {
  color: var(--grau);
  font-size: 1.0625rem;
}

.rechtstext ul {
  padding-left: 1.15rem;
  margin: 0 0 1.15em;
}

.rechtstext li {
  margin-bottom: 0.35em;
}

.rechtstext a {
  color: var(--akzent);
  text-underline-offset: 3px;
}

.hinweisbox {
  border-left: 3px solid var(--akzent);
  background: var(--papier);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  font-size: 1rem;
}

.hinweisbox p {
  color: var(--tinte);
  font-size: 1rem;
}

/* ---------- Fußzeile ---------- */
.fuss {
  border-top: 3px solid var(--rot);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-family: var(--schrift-display);
}

.fuss__innen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.75rem 2rem;
  align-items: start;
}

.fuss__name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.4rem;
}

.fuss__rolle {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--grau-leise);
  max-width: 34ch;
  line-height: 1.5;
}

.fuss__navi {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9375rem;
}

.fuss__navi a {
  text-decoration: none;
  color: var(--grau);
  transition: color var(--tempo);
}

.fuss__navi a:hover {
  color: var(--tinte);
}

.fuss__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  font-size: 0.9375rem;
}

.fuss__links a {
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 0.15rem;
  transition: border-color var(--tempo);
}

.fuss__links a:hover {
  border-bottom-color: var(--tinte);
}

/* ---------- Sanftes Erscheinen beim Scrollen ---------- */
.auftritt {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.auftritt.ist-da {
  opacity: 1;
  transform: none;
}

/* Ohne JavaScript bleibt alles sichtbar */
.kein-js .auftritt {
  opacity: 1;
  transform: none;
}


/* ---------- Dunkelmodus ----------
   Folgt der Systemeinstellung, ohne Umschalter und ohne gespeicherte Auswahl.
   Das Flächenrot bleibt unverändert, denn es ist die Identitätsfarbe.
   Für Text und Linien wird ein aufgehelltes Rot verwendet, weil SPD-Rot auf
   dunklem Grund nur einen Kontrast von 3,8 zu 1 erreicht und damit unter der
   Anforderung von 4,5 zu 1 liegt. */
@media (prefers-color-scheme: dark) {
  :root {
    --seite: #121215;
    --papier: #1b1b1f;
    --tinte: #ececf0;
    --grau: #bcbcc4;
    --grau-leise: #9a9aa3;
    --linie: #2e2e35;
    --akzent: #ff4d57;
    --akzent-tief: #ff7b83;
  }

  .kopf {
    background: var(--weiss);
    color: var(--akzent);
  }

  .kopf--ueber-rot {
    background: transparent;
    color: var(--weiss);
  }

  .kopf--ueber-rot.ist-gescrollt {
    background: var(--weiss);
    color: var(--akzent);
  }

  .ig-punkt:hover,
  .kopf--ueber-rot.ist-gescrollt .ig-punkt:hover {
    background: rgba(227, 0, 15, 0.08);
  }

  .kopf--ueber-rot:not(.ist-gescrollt) .ig-punkt:hover {
    background: rgba(255, 255, 255, 0.18);
  }

  .ig__handle {
    border-bottom-color: rgba(227, 0, 15, 0.35);
    color: #ff6b72;
  }

  .hinweisbox {
    background: var(--papier);
  }

  /* Auf den roten Flächen bleibt alles wie im hellen Modus */
  .hero .pfeillink,
  .sektion--rot .pfeillink {
    color: var(--weiss);
  }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    view-transition-name: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .auftritt {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Druck ---------- */
@media print {
  .kopf,
  .sprungmarke {
    display: none;
  }
  .hero,
  .sektion--rot {
    background: none;
    color: #000;
  }
}