/* =========================================================
   FrauenZeit – Stylesheet
   Farben und Schriften ganz oben ändern, der Rest folgt.
   ========================================================= */

/* ---------- Schriften (liegen lokal, kein Google-Abruf) ----------
   FZ Serif  = Italiana, Ersatz für Le Jour Serif
   FZ Schrift = Waterfall, Ersatz für Emitha
   Originale als .woff2 mit Weblizenz? In assets/fonts legen und die src-Zeile ändern. */
@font-face { font-family: "FZ Serif"; src: url("../fonts/italiana.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "FZ Sans"; src: url("../fonts/raleway.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "FZ Schrift"; src: url("../fonts/script.woff2") format("woff2"); font-display: swap; }

:root {
  --creme: #f4efe8;
  --sand: #c9b5a1;
  --gold: #ba906a;
  --gruen: #1f5d5d;
  --hellblau: #98c4c6;
  --schwarz: #000000;

  --grund: var(--creme);
  --flaeche: #fbf8f3;
  --text: #1a1a1a;
  --text-leise: #5a5550;
  --titel: var(--gruen);
  --linie: #d9ccbe;
  --dunkel: var(--gruen);
  --dunkel-text: var(--creme);
  --ausstellung-grund: var(--hellblau);
  --logo-wort: #1f5d5d; --logo-akzent: #c9b5a1; --logo-claim: #000;

  --serif: "FZ Serif", Italiana, Didot, "Times New Roman", serif;
  --sans: "FZ Sans", Raleway, "Helvetica Neue", Arial, sans-serif;
  --schrift: "FZ Schrift", "Brush Script MT", cursive;

  --breite: 72rem;
  --rand: clamp(1.25rem, 5vw, 3rem);
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #122828; --flaeche: #173232; --text: #ece6dd; --text-leise: #bfb3a6;
    --titel: #f4efe8; --linie: #2f4a4a; --dunkel: #0c1c1c; --dunkel-text: #f4efe8;
    --ausstellung-grund: #1b3838;
    --logo-wort: #f4efe8; --logo-akzent: #c9b5a1; --logo-claim: #ece6dd;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --grund: #122828; --flaeche: #173232; --text: #ece6dd; --text-leise: #bfb3a6;
  --titel: #f4efe8; --linie: #2f4a4a; --dunkel: #0c1c1c; --dunkel-text: #f4efe8;
  --ausstellung-grund: #1b3838;
  --logo-wort: #f4efe8; --logo-akzent: #c9b5a1; --logo-claim: #ece6dd;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 5rem); -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; background: var(--grund); color: var(--text); font-family: var(--sans); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); line-height: 1.65; font-weight: 400; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--grund); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--titel); line-height: 1.08; margin: 0 0 0.6em; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); }
h3 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem); }
p { margin: 0 0 1em; max-width: 36em; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 1rem; left: 1rem; z-index: 50; background: var(--flaeche); padding: .5rem 1rem; }

section { padding: clamp(4rem, 9vw, 7.5rem) var(--rand); max-width: var(--breite); margin: 0 auto; position: relative; }

/* ---------- Buttons ---------- */
.knopf { display: inline-block; background: var(--gruen); color: #f4efe8; text-decoration: none; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; padding: 0.95em 1.7em; border-radius: 999px; border: 1px solid var(--gruen); transition: background .2s, color .2s; white-space: nowrap; }
.knopf:hover { background: var(--gold); border-color: var(--gold); }
.knopf--klein { padding: 0.65em 1.2em; font-size: 0.85rem; }
.knopf--rand { background: transparent; color: var(--titel); border-color: currentColor; }
.knopf--rand:hover { background: var(--gruen); color: #f4efe8; border-color: var(--gruen); }
.knopf--hell { background: #f4efe8; color: #1f5d5d; border-color: #f4efe8; }
.knopf--hell:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
:root[data-theme="dark"] .knopf--rand:hover { background: #f4efe8; color: #1f5d5d; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--grund) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie); }
.kopf__innen { max-width: var(--breite); margin: 0 auto; padding: 0.7rem var(--rand); display: flex; align-items: center; gap: 2rem; }
.kopf__logo svg { width: clamp(150px, 20vw, 200px); height: auto; }
.kopf__nav { display: flex; gap: 1.6rem; margin-left: auto; font-size: 0.92rem; }
.kopf__nav a { text-decoration: none; color: var(--text); }
.kopf__nav a:hover { color: var(--gold); }
@media (max-width: 760px) { .kopf__nav { display: none; } .kopf__innen { justify-content: space-between; } }

/* ---------- Der Ring aus dem Logo ---------- */
.ring { position: absolute; border: 1.5px solid var(--sand); border-radius: 50%; pointer-events: none; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; padding-top: clamp(3rem, 7vw, 6rem); }
.hero h1 { font-size: clamp(2.7rem, 1.5rem + 4.4vw, 5.2rem); font-weight: 400; line-height: 1.02; margin-bottom: 0.45em; max-width: 13ch; }
.hero__sub { font-size: 1.12em; color: var(--text-leise); max-width: 31em; }
.hero__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.pille { display: inline-block; border-radius: 999px; padding: 0.45em 1.15em; font-size: 0.9rem; margin: 0; max-width: none; }
.pille--gruen { background: var(--gruen); color: #f4efe8; font-weight: 300; margin-bottom: 1.6rem; }
.pille--gold { background: var(--gold); color: #fff; font-weight: 600; }
.pille--creme { background: var(--grund); color: var(--text); font-size: 0.85rem; letter-spacing: 0.02em; }
.hero__bild { position: relative; aspect-ratio: 1; }
.hero__foto { position: absolute; left: 0; top: 2%; width: 88%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 1.5rem 7rem 1.5rem 1.5rem; z-index: 3; min-height: 0; }
.kreis { position: absolute; border-radius: 50%; aspect-ratio: 1; }
.kreis--gruen { width: 50%; right: 0; bottom: 0; background: var(--gruen); z-index: 2; }
.kreis--sand { width: 30%; right: -7%; top: 30%; background: var(--sand); z-index: 1; }
.kreis--gold { width: 20%; left: 6%; top: 58%; background: var(--gold); z-index: 4; }
.kreis--blau { width: 22%; left: 30%; bottom: 0; background: var(--hellblau); z-index: 1; }
.kreis--schwarz { width: 8%; right: 34%; top: 63%; background: var(--schwarz); z-index: 4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kreis--schwarz { background: #f4efe8; } }
:root[data-theme="dark"] .kreis--schwarz { background: #f4efe8; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .hero__bild { max-width: 30rem; width: 100%; } }

/* ---------- Platzhalter für Fotos ---------- */
.platzhalter { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sand) 38%, var(--grund)) 0 14px, color-mix(in srgb, var(--sand) 26%, var(--grund)) 14px 28px); display: grid; place-items: center; text-align: center; color: var(--text-leise); font-size: 0.85rem; padding: 1rem; min-height: 10rem; }
.platzhalter small { opacity: .7; font-size: 0.78rem; }

/* ---------- Handschrift statt Etiketten ---------- */
.handschrift { display: block; width: clamp(200px, 70%, 320px); height: auto; margin: 0 0 1.25rem -0.25rem; }

/* ---------- Warum ---------- */
.warum { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-top: 2rem; }
.warum__links, .warum__rechts { padding: clamp(2rem, 5vw, 4rem); }
.warum__links { padding-left: 0; }
.warum__rechts { background: var(--dunkel); color: var(--dunkel-text); border-radius: 2rem 6rem 2rem 2rem; }
.warum p:not(.handschrift) { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.6; font-weight: 300; }
@media (max-width: 760px) { .warum { grid-template-columns: 1fr; } .warum__links { padding: 0 0 2.5rem; } }

/* ---------- Termine ---------- */
.abschnitt-kopf { margin-bottom: 2.5rem; }
.abschnitt-kopf h2 { margin: 0 0 0.2em; }
.abschnitt-kopf p { margin: 0; color: var(--text-leise); }
.abschnitt-kopf__unter { font-size: 1.15rem; color: var(--titel) !important; }
.abschnitt-kopf h2, .termin h3, .rueckblick h2, .rueckblick__eintrag h3 { text-transform: uppercase; letter-spacing: 0.04em; }
.termin-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.termin { background: var(--flaeche); border-left: 4px solid var(--gold); border-radius: 5rem 7rem 7rem 5rem; padding: 2.2rem clamp(1.75rem, 5vw, 4rem) 2.2rem clamp(1.75rem, 4vw, 3.25rem); }
.termin:nth-child(3n+2) { border-left-color: var(--hellblau); }
.termin:nth-child(3n+3) { border-left-color: var(--gruen); }
.termin__wann { color: var(--titel); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; margin-bottom: 0.5em; }
.termin h3 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); margin-bottom: 0.3em; }
.termin__mit { color: var(--text-leise); margin-bottom: 0.6em; }
.termin__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.5rem; }
.termin__plaetze { font-size: 0.88rem; color: var(--text-leise); }
.termin__fuss .knopf { margin-left: auto; }
@media (max-width: 640px) { .termin { border-radius: 2rem 3.5rem 3.5rem 2rem; } .termin__fuss .knopf { margin-left: 0; } }
.leer { font-size: 1.15rem; }

.rueckblick { margin-top: clamp(4rem, 8vw, 6rem); }
.rueckblick h2 { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem); }
.rueckblick__eintrag { display: grid; grid-template-columns: minmax(10rem, 18rem) 1fr; gap: 2rem; align-items: center; padding: 1.5rem 0; }
.rueckblick__eintrag > img, .rueckblick__eintrag > .platzhalter { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; border-radius: 1rem 3rem 1rem 1rem; min-height: 0; }
.rueckblick__eintrag h3 { font-size: 1.5rem; }
@media (max-width: 640px) { .rueckblick__eintrag { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------- Stimmen ---------- */
.stimmen { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem 4rem; }
.stimmen h2 { grid-column: 1 / -1; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.stimme { margin: 0; }
.stimme blockquote { margin: 0 0 0.8rem; font-family: var(--serif); font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); line-height: 1.3; color: var(--titel); }
.stimme--gross { grid-row: span 2; }
.stimme--gross blockquote { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); line-height: 1.15; }
.stimme figcaption { font-size: 0.88rem; color: var(--text-leise); }
@media (max-width: 760px) { .stimmen { grid-template-columns: 1fr; } .stimme--gross { grid-row: auto; } }

/* ---------- Ausstellung ---------- */
.ausstellung { max-width: none; background: var(--ausstellung-grund); }
.ausstellung > * { position: relative; }
.ausstellung { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; padding-left: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))); padding-right: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))); }
.ausstellung__jahr { font-weight: 600; color: var(--titel); margin-bottom: 0.6em; }
.ausstellung { align-items: start; }
.ausstellung h2 { text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); }
.ausstellung__einstieg { font-family: var(--serif); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); line-height: 1.3; color: var(--titel); }
.ausstellung__seite { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 6rem); display: grid; gap: 2.5rem; justify-items: center; padding-top: 3rem; }
.eroeffnung { background: var(--flaeche); border-left: 4px solid var(--gruen); border-radius: 3rem 5rem 5rem 3rem; padding: 1.75rem 2.5rem 1.75rem 2rem; width: 100%; max-width: 26rem; }
.eroeffnung p { margin-bottom: 0.4em; }
.eroeffnung__datum { font-family: var(--serif); font-size: 1.8rem; line-height: 1.15; color: var(--titel); }
.eroeffnung__hinweis { font-size: 0.85rem; color: var(--text-leise); }
.termin--ausstellung { border-left-color: var(--sand) !important; }
.schild { background: #fffdf9; aspect-ratio: 4 / 3; max-width: 26rem; width: 100%; justify-self: center; display: grid; place-items: center; padding: 2rem; transform: rotate(-2.5deg); box-shadow: 0 1px 0 var(--sand), 0 24px 40px -24px rgba(31, 93, 93, .45); border-radius: 2px; }
.schild__satz { width: 88%; height: auto; }
@media (max-width: 760px) { .ausstellung { grid-template-columns: 1fr; } .ausstellung__seite { position: static; padding-top: 0; } }

/* ---------- Wir ---------- */
.wir__kopf { max-width: 40rem; margin-bottom: 3rem; }
.wir__personen { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem clamp(2rem, 6vw, 5rem); align-items: start; }
.person .wir__foto { aspect-ratio: 4 / 5; width: 100%; max-width: 24rem; object-fit: cover; border-radius: 1rem 4rem 1rem 1rem; margin-bottom: 1.25rem; }
.person h3 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem); margin-bottom: 0.4em; }
.person--versetzt { margin-top: 4rem; }
@media (max-width: 760px) { .wir__personen { grid-template-columns: 1fr; } .person--versetzt { margin-top: 0; } }

/* ---------- Partner ---------- */
.partner { padding-top: 0; text-align: center; }
.partner h2 { font-family: var(--sans); font-size: 0.95rem; font-weight: 500; color: var(--text-leise); letter-spacing: 0.02em; }
.partner ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; font-family: var(--serif); font-size: 1.45rem; color: var(--titel); }

/* ---------- Fragen ---------- */
.fragen { display: grid; grid-template-columns: 1fr 1.6fr; gap: 3rem; }
.fragen details { border-top: 1px solid var(--linie); }
.fragen details:last-child { border-bottom: 1px solid var(--linie); }
.fragen summary { cursor: pointer; list-style: none; padding: 1.2rem 2.5rem 1.2rem 0; font-family: var(--serif); font-size: 1.35rem; color: var(--titel); position: relative; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-weight: 300; font-size: 1.6rem; color: var(--gold); transition: transform .2s; }
.fragen details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.fragen details p { padding-bottom: 1.2rem; color: var(--text-leise); }
@media (max-width: 760px) { .fragen { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------- Schluss ---------- */
.schluss { max-width: none; background: var(--dunkel); color: var(--dunkel-text); text-align: center; overflow: hidden; }
.schluss__motto { font-weight: 600; color: var(--sand); margin: 0 auto 1rem !important; }
.schluss h2 { color: var(--dunkel-text); font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.2rem); font-weight: 400; max-width: 14ch; margin: 0 auto 0.8em; }
.schluss p { margin: 2rem auto 0; max-width: 32em; font-size: 0.95rem; opacity: .9; }
.schluss .ring { width: min(60vw, 34rem); aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-72%, -50%) rotate(-35deg); border-color: color-mix(in srgb, var(--sand) 60%, transparent); border-right-color: transparent; }
.schluss > *:not(.ring) { position: relative; }

/* ---------- Fuß ---------- */
.fuss { max-width: var(--breite); margin: 0 auto; padding: 3.5rem var(--rand) 2.5rem; display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; font-size: 0.88rem; color: var(--text-leise); }
.fuss__logo svg { width: 230px; height: auto; }
.fuss p { margin: 0; }
.fuss nav { display: flex; gap: 1.5rem; }
@media (max-width: 760px) { .fuss { grid-template-columns: 1fr; } }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 44rem; }
.rechtstext h1 { font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem); }
.rechtstext h2 { font-size: 1.5rem; margin-top: 2rem; }
.hinweis { font-size: 0.88rem; color: var(--text-leise); border-left: 2px solid var(--gold); padding-left: 1rem; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
@media (max-width: 640px) { .pille { font-size: 0.8rem; } }
a.pille { text-decoration: none; } a.pille--gold:hover { background: var(--gruen); }
.rueckblick__eintrag { align-items: start; }
.mitgenommen { margin-top: 1.5rem; border-left: 2px solid var(--gold); padding-left: 1.25rem; }
.mitgenommen__titel { font-size: 0.85rem; font-weight: 600; color: var(--gold); margin-bottom: 0.6rem; }
.mitgenommen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.mitgenommen li { font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem); line-height: 1.3; color: var(--titel); }
.stimmen__kopf { grid-column: 1 / -1; }
.stimmen__kopf h2 { margin-bottom: 0.3em; }
.stimmen__kopf p { color: var(--text-leise); margin: 0; }

/* Auf dem hellblauen Grund: dunklere Nebentexte für gute Lesbarkeit */
@media (prefers-color-scheme: light) { .ausstellung { --text-leise: #2c4646; } }
:root[data-theme="light"] .ausstellung { --text-leise: #2c4646; }
.eroeffnung__knopf { margin-top: 0.8rem; }

/* Mitgenommene Sätze: je Satz eine Markenfarbe. Text leicht abgedunkelt für Lesbarkeit, Linie in Originalfarbe */
.stimme { border-left: 3px solid var(--gruen); padding-left: 1.25rem; }
.stimme:nth-of-type(1) blockquote { color: #1f5d5d; }
.stimme:nth-of-type(2) { border-left-color: var(--gold); }
.stimme:nth-of-type(2) blockquote { color: #94704e; }
.stimme:nth-of-type(3) { border-left-color: var(--hellblau); }
.stimme:nth-of-type(3) blockquote { color: #3b7a7d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stimme:nth-of-type(1) blockquote { color: #f4efe8; }
  :root:not([data-theme="light"]) .stimme:nth-of-type(2) blockquote { color: #d9bfa3; }
  :root:not([data-theme="light"]) .stimme:nth-of-type(3) blockquote { color: #98c4c6; }
}
:root[data-theme="dark"] .stimme:nth-of-type(1) blockquote { color: #f4efe8; }
:root[data-theme="dark"] .stimme:nth-of-type(2) blockquote { color: #d9bfa3; }
:root[data-theme="dark"] .stimme:nth-of-type(3) blockquote { color: #98c4c6; }

/* ---------- Interviews ---------- */
.iv-kopf h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); text-transform: uppercase; letter-spacing: 0.03em; max-width: 18ch; }
.iv-vorschau { background: var(--gold); color: #fff; display: inline-block; padding: 0.4em 1em; border-radius: 999px; font-size: 0.85rem; }
.iv-raster { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 2rem 1.25rem; }
.iv-raster a { text-decoration: none; display: grid; gap: 0.3rem; }
.iv-raster__foto { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-radius: 0.75rem 2.5rem 0.75rem 0.75rem; min-height: 0; margin-bottom: 0.4rem; }
.iv-raster__name { font-family: var(--serif); font-size: 1.25rem; color: var(--titel); line-height: 1.15; }
.iv-raster__beruf { font-size: 0.82rem; color: var(--text-leise); }
.iv-raster a:hover .iv-raster__name { color: var(--gold); }
.interview { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; border-top: 1px solid var(--linie); }
.interview__bild { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 6rem); }
.interview__foto { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-radius: 1rem 4rem 1rem 1rem; min-height: 0; }
.interview h2 { margin-bottom: 0.2em; }
.interview__beruf { color: var(--text-leise); }
.interview__mut { margin: 2rem 0 2.5rem; border-left: 3px solid var(--gold); padding-left: 1.25rem; }
.interview__mut img { width: min(18rem, 70%); height: auto; margin-bottom: 0.5rem; }
.interview__mut p { font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.25; color: var(--titel); }
.interview h3 { font-family: var(--sans); font-weight: 700; font-size: 1rem; color: var(--titel); margin: 1.8rem 0 0.4rem; letter-spacing: 0; text-transform: none; }
.interview__zurueck { display: inline-block; margin-top: 2rem; font-size: 0.9rem; color: var(--gold); }
@media (max-width: 760px) { .interview { grid-template-columns: 1fr; } .interview__bild { position: static; max-width: 24rem; } }

/* ---------- Untermenü ---------- */
.kopf__nav { align-items: center; }
.nav-gruppe { position: relative; }
.nav-gruppe > a::after { content: ""; display: inline-block; width: 0.35em; height: 0.35em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-0.2em) rotate(45deg); margin-left: 0.45em; }
.nav-unter { position: absolute; left: -1rem; top: 100%; padding-top: 0.6rem; display: none; }
.nav-unter a { display: block; background: var(--flaeche); padding: 0.6rem 1.1rem; border-radius: 0.75rem 1.5rem 1.5rem 0.75rem; border-left: 3px solid var(--hellblau); box-shadow: 0 10px 24px -14px rgba(31, 93, 93, .45); white-space: nowrap; }
.nav-gruppe:hover .nav-unter, .nav-gruppe:focus-within .nav-unter { display: block; }