/* =========================================================================
   Peter Pröll — base.css
   Quelle der Wahrheit für alle Gestaltungswerte: peterproell-styleguide.html (1.3)
   Werte hier gespiegelt; bei Styleguide-Änderung nachziehen.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Schriften — self-hosted (Datenschutz, Ladezeit)
   WOFF2-Dateien ablegen unter: Resources/Public/Fonts/
   Subsetting-Empfehlung: Latin + benötigte Sonderzeichen, font-display: swap.
   Benötigte Schnitte:
     Vollkorn        400, 400 italic, 500, 600
     Source Sans 3   400, 600
   Anleitung siehe Resources/Public/Fonts/README.md
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../Fonts/vollkorn-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../Fonts/vollkorn-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../Fonts/vollkorn-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../Fonts/vollkorn-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../Fonts/vollkorn-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../Fonts/source-sans-3-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../Fonts/source-sans-3-600.woff2') format('woff2');
}

/* -------------------------------------------------------------------------
   Design-Tokens (Styleguide Kap. 2, Werte 1.3 — kühl-neutraler Mittelweg)
   ------------------------------------------------------------------------- */

:root {
  --papier: #FBFAF6;
  --karton: #F1EFEA;
  --linie: #E2E0D9;

  --tinte: #1A1816;
  --text: #4A453B;
  --gedaempft: #6B6557;
  --hauch: #9A937F;

  --rot: #B01019;
  --rot-tief: #8A0C13;
  --rot-hauch: #F6E9E4;

  --serif: 'Vollkorn', Georgia, serif;
  --sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;

  --zeile-max: 660px;
}

/* -------------------------------------------------------------------------
   Reset / Grundgerüst
   ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--papier);
  color: var(--text);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

.seite { display: flex; flex-direction: column; min-height: 100vh; }
.umschlag { max-width: 1020px; margin: 0 auto; padding: 0 28px 32px; width: 100%; }
.umschlag.breit { max-width: 1180px; }

/* Abstand nach Standard-Inhaltselementen (Text, Text & Medien) an den
   Seitenrhythmus angleichen — wie nach den Content-Blocks (32px). */
.frame-type-textmedia,
.frame-type-text { margin-bottom: 32px; }

/* Abstand Überschrift → Bodytext wie im CB Serie (.serie .cb-titel: 8px). */
.frame-type-textmedia header,
.frame-type-text header { margin-bottom: 8px; }

/* -------------------------------------------------------------------------
   Typografie (Styleguide Kap. 3)
   ------------------------------------------------------------------------- */

h1 { font-family: var(--serif); font-size: 38px; line-height: 1.15; font-weight: 600; color: var(--tinte); }
h2 { font-family: var(--serif); font-size: 26px; line-height: 1.25; font-weight: 600; color: var(--tinte); }
h3 { font-family: var(--serif); font-size: 20px; line-height: 1.3;  font-weight: 600; color: var(--tinte); }

p  { margin-bottom: 12px; max-width: var(--zeile-max); }
em { font-style: italic; }

/* Kräftige Auszeichnung: echtes Vollkorn-700 (kein synthetischer Fettschnitt
   aus 400 — der wirkte matschig und hob sich kaum ab) plus Tinte-Schwarz für
   spürbaren Kontrast. Setzt vollkorn-700.woff2 voraus; fehlt sie, fällt der
   Browser auf 600 zurück (faux-bold). */
strong, b { font-weight: 700; color: var(--tinte); }
/* In Links erbt die Auszeichnung die Linkfarbe — Tinte darf den roten
   Link-Look nicht überschreiben. */
a strong, a b { color: inherit; }

/* Inhaltslisten (Bodytext/RTE): der globale Reset (* { padding:0 }) nimmt
   ul/ol den Einzug, dadurch klebten die Bullets links am Fließtext. Hier
   gezielt zurückgeben — Nav- und Fuß-Listen bleiben über ihre eigenen
   Regeln (list-style:none + Flex) unberührt. */
.ce-bodytext ul, .ce-bodytext ol,
.frame-type-text ul, .frame-type-text ol,
.frame-type-textmedia ul, .frame-type-textmedia ol {
  margin: 0 0 12px;
  padding-left: 2em;
  max-width: var(--zeile-max);
}
.ce-bodytext ul, .frame-type-text ul, .frame-type-textmedia ul { list-style: disc; }
.ce-bodytext ol, .frame-type-text ol, .frame-type-textmedia ol { list-style: decimal; }
.ce-bodytext li, .frame-type-text li, .frame-type-textmedia li { margin-bottom: 4px; }
.ce-bodytext li > ul, .ce-bodytext li > ol { margin: 4px 0 0; }

/* -------------------------------------------------------------------------
   Zitat — geteilter Look. Eine Quelle der Wahrheit für BEIDE Wege:
   Inline-<blockquote> aus dem RTE (blockQuote-Button) und den Zitat-CB
   (blockquote.zitat). Großes Anführungszeichen in Karton als leises
   Hintergrundzeichen (kein roter Strich — Rot bleibt dem CTA vorbehalten),
   Zitattext nur knapp über Fließtextgröße, in Tinte. Die Bobbel sitzen auf
   der ersten Zeile, die Hörner ragen darüber. Der CB erweitert das nur um
   die Quelle als <p class="cite"> — bewusst KEIN <cite>-Tag, weil CKEditor das
   beim Speichern verwirft; <p>+Klasse übersteht den RTE-Roundtrip. Die Quelle
   ist hier mitgestylt, damit sie für BEIDE Wege gilt (CB UND inline p.cite).
   ------------------------------------------------------------------------- */
.ce-bodytext blockquote,
.frame-type-text blockquote,
.frame-type-textmedia blockquote,
blockquote.zitat {
  position: relative;
  margin: 36px 0;
  padding: 0 0 0 2.2em;
  max-width: var(--zeile-max);
}
.ce-bodytext blockquote::before,
.frame-type-text blockquote::before,
.frame-type-textmedia blockquote::before,
blockquote.zitat::before {
  content: "\201C";
  position: absolute;
  left: -0.04em;
  top: -6px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 90px;
  line-height: 1;
  color: var(--karton);
  z-index: 0;
  pointer-events: none;
}
.ce-bodytext blockquote p,
.frame-type-text blockquote p,
.frame-type-textmedia blockquote p,
blockquote.zitat p {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--tinte);
  margin: 0 0 10px;
  max-width: none;
}
.ce-bodytext blockquote p:last-child,
.frame-type-text blockquote p:last-child,
.frame-type-textmedia blockquote p:last-child,
blockquote.zitat p:last-child { margin-bottom: 0; }
/* Quelle / Zitatgeber — kleiner Sans-Nachsatz. Überschreibt den Zitat-p-Look.
   Gilt für CB (<p class="cite"> aus dem Fluid-Template) wie für eine inline im
   RTE gesetzte <p class="cite">. */
.ce-bodytext blockquote p.cite,
.frame-type-text blockquote p.cite,
.frame-type-textmedia blockquote p.cite,
blockquote.zitat p.cite {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gedaempft);
  margin: 0;
}
/* Abstand Zitat -> Quelle eng halten (klare Zugehörigkeit, auch einzeilig).
   Gesteuert am Unterrand des letzten Zitat-Absatzes, weil benachbarte
   Margins kollabieren — eine margin-top an der Quelle bliebe wirkungslos. */
.ce-bodytext blockquote p:has(+ p.cite),
.frame-type-text blockquote p:has(+ p.cite),
.frame-type-textmedia blockquote p:has(+ p.cite),
blockquote.zitat p:has(+ p.cite) { margin-bottom: 4px; }

a { color: var(--rot); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--rot-tief); }

/* -------------------------------------------------------------------------
   Glossar-Begriffe (dpn_glossary): leise <abbr>-Anmutung, KEIN Link-Look.
   Fließtextfarbe statt Rot, gepunktete Unterlinie statt durchgezogen,
   Hilfe-Cursor. title trägt die Kurzerklärung (siehe Glossary.typoscript).
   ------------------------------------------------------------------------- */
a.glossary-term,
a.glossary-term:hover {
  color: inherit;                       /* Farbe des umgebenden Fließtextes */
  border-bottom: 0;                     /* den soliden Link-Strich entfernen */
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: help;
}
a.glossary-term:hover {
  text-decoration-color: var(--hauch);  /* dezentes Hover-Feedback ohne Farbwechsel */
}

/* Sofort-Tooltip: ersetzt das verzögerte native title-Tooltip.
   Text kommt aus data-glossary (siehe Glossary.typoscript). Erscheint ohne
   Delay bei Hover und Tastatur-Fokus; kein natives title = kein Duplikat. */
a.glossary-term[data-glossary] { position: relative; }

a.glossary-term[data-glossary]:hover::after,
a.glossary-term[data-glossary]:focus-visible::after {
  content: attr(data-glossary);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  width: max-content;
  max-width: 260px;
  padding: 6px 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.35;
  color: var(--papier);
  background: var(--tinte);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(26, 24, 22, 0.18);
  white-space: normal;
  pointer-events: none;       /* Tooltip fängt keine Maus-Events ab */
}

/* -------------------------------------------------------------------------
   Plattform-Buttons im Bodytext: a.podcasts / a.spotify / a.rss / a.linkedin
   Karton-Hintergrund, Linie-Rahmen, roter Rahmen bei Hover.
   Logo sitzt als ::before vor dem Linktext.
   ------------------------------------------------------------------------- */

a.podcasts, a.spotify, a.rss, a.linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--karton);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: border-color .15s ease, background-color .15s ease;
}

a.podcasts:hover, a.spotify:hover, a.rss:hover, a.linkedin:hover {
  border-color: var(--rot-tief);
  color: var(--text);
  background: var(--karton);
}

/* Icon als CSS-Maske statt background-image: so steuert die background-color
   die Glyph-Farbe (Tinte im Normalfall, Papier in der Invers-Variante). Die
   SVG-Füllfarbe in den Daten-URIs ist dabei egal — die Maske nutzt nur die
   Deckkraft der Form. */
a.podcasts::before, a.spotify::before, a.rss::before, a.linkedin::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background-color: var(--text);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain;    mask-size: contain;
  transition: background-color .15s ease;
}

a.podcasts::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='2.6' fill='%23000'/%3E%3Cpath d='M8.4 12.4a5 5 0 0 0 7.2 0' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M10.7 14.2 9.9 19a2.1 2.1 0 0 0 4.2 0l-.8-4.8' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='2.6' fill='%23000'/%3E%3Cpath d='M8.4 12.4a5 5 0 0 0 7.2 0' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M10.7 14.2 9.9 19a2.1 2.1 0 0 0 4.2 0l-.8-4.8' fill='%23000'/%3E%3C/svg%3E");
}

a.spotify::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M7 10c3.5-.9 7-.4 9.6 1M7.3 13c2.9-.7 5.7-.3 7.9.9M7.6 15.8c2.3-.5 4.4-.2 6.1.8' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M7 10c3.5-.9 7-.4 9.6 1M7.3 13c2.9-.7 5.7-.3 7.9.9M7.6 15.8c2.3-.5 4.4-.2 6.1.8' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

a.rss::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6.5' cy='17.5' r='2' fill='%23000'/%3E%3Cpath d='M5.5 11a8 8 0 0 1 8 8M5.5 6a13 13 0 0 1 13 13' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6.5' cy='17.5' r='2' fill='%23000'/%3E%3Cpath d='M5.5 11a8 8 0 0 1 8 8M5.5 6a13 13 0 0 1 13 13' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

a.linkedin::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4.98 3.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM3.2 9h3.56v11.5H3.2zM9.3 9h3.41v1.57h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.32h-3.56v-5.6c0-1.34-.02-3.06-1.86-3.06-1.87 0-2.15 1.46-2.15 2.96v5.7H9.3z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4.98 3.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM3.2 9h3.56v11.5H3.2zM9.3 9h3.41v1.57h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.32h-3.56v-5.6c0-1.34-.02-3.06-1.86-3.06-1.87 0-2.15 1.46-2.15 2.96v5.7H9.3z'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   Invers-Variante der Plattform-Buttons.
   Auf Karton-/Farbflächen geht die Karton-Füllung im Untergrund unter — dann
   Tinte-Fläche mit Papier-Text und -Icon, Hover wie gewohnt nach Rot-tief.
   Greift AUTOMATISCH in den bekannten Farb-Containern (.kasten--karton,
   .kasten--rot-hauch, .serie) und lässt sich überall per Zusatzklasse
   erzwingen:  class="linkedin invers"
   ------------------------------------------------------------------------- */
.kasten--karton    :is(a.podcasts, a.spotify, a.rss, a.linkedin),
.kasten--rot-hauch :is(a.podcasts, a.spotify, a.rss, a.linkedin),
.serie             :is(a.podcasts, a.spotify, a.rss, a.linkedin),
a.podcasts.invers, a.spotify.invers, a.rss.invers, a.linkedin.invers {
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--papier);
}

.kasten--karton    :is(a.podcasts, a.spotify, a.rss, a.linkedin):hover,
.kasten--rot-hauch :is(a.podcasts, a.spotify, a.rss, a.linkedin):hover,
.serie             :is(a.podcasts, a.spotify, a.rss, a.linkedin):hover,
a.podcasts.invers:hover, a.spotify.invers:hover, a.rss.invers:hover, a.linkedin.invers:hover {
  background: var(--rot-tief);
  border-color: var(--rot-tief);
  color: var(--papier);
}

.kasten--karton    :is(a.podcasts, a.spotify, a.rss, a.linkedin)::before,
.kasten--rot-hauch :is(a.podcasts, a.spotify, a.rss, a.linkedin)::before,
.serie             :is(a.podcasts, a.spotify, a.rss, a.linkedin)::before,
a.podcasts.invers::before, a.spotify.invers::before, a.rss.invers::before, a.linkedin.invers::before {
  background-color: var(--papier);
}

.kicker {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rot);
  line-height: 1.65;
  margin-bottom: 8px;
}

.meta {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--gedaempft);
}

/* -------------------------------------------------------------------------
   Standard-Block-Kopf (gilt in allen Content Blocks)
   Anatomie:  [Kicker?]  Header (H2 default)  [+ Rechts-Link]
                                Subheader?
   Kicker liegt semantisch IN der Überschrift (siehe Doku). Der Rechts-Link
   (peterproell_header_rechts) sitzt rechtsbündig, Ziel = header_link.
   Der Subheader steht unter dem Header, Schrift wie der Rechts-Link, aber
   gedämpft statt rot.
   ------------------------------------------------------------------------- */
.cb-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Rechts-Spalte des Kopfs (peterproell_header_rechts) wächst/schrumpft nicht. */
.cb-sub {
  flex: none;
}

/* Rechts-Text: Typografie + Default-Grau liegen auf dem Wrapper-Span, der IMMER
   vorhanden ist. So bleibt die kleine Schrift auch dann erhalten, wenn typolink
   bei deaktiviertem Ziel kein <a> (und damit keine Klasse) rendert, sondern nur
   den nackten Text. Rot kommt ausschließlich vom echten Link. */
.cb-kopf-rechts {
  flex: none;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gedaempft);
  border-bottom: none;
  white-space: nowrap;
}

.cb-kopf-rechts__link {
  color: var(--rot);
  border-bottom: none;
}

.cb-kopf-rechts__link:hover {
  color: var(--rot-tief);
}

.cb-subheader {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--gedaempft);
  margin: 4px 0 0;
}

/* -------------------------------------------------------------------------
   Kopf / Hauptnavigation (Styleguide Kap. 5, Protokoll IA)
   Menü: Lesen · Hören · Zusammenarbeiten | Über · Kontakt
   Rot nur bei Hover/aktiv; kein Button im Ruhezustand.
   ------------------------------------------------------------------------- */

/* Linie läuft über die volle Seitenbreite; Inhalt sitzt im umschlag breit. */
.kopf {
  width: 100%;
  border-bottom: 1px solid var(--linie);
}

.kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-block: 26px;
}

.kopf .marke { border-bottom: none; display: inline-flex; align-items: center; }
/* Wortmarke als ausgepfadete SVG (Styleguide Kap. 1: Vollkorn 600, Tinte,
   roter Markenpunkt) — schrift-unabhängig, kein FOUT. Höhe steuert die Größe,
   die Breite folgt dem viewBox-Verhältnis. Regeneration: Build/wortmarke-to-svg.py. */
.kopf .wortmarke {
  display: block;
  height: 30px;
  width: auto;
}

.haupt .verben {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
}

.haupt a {
  color: var(--text);
  border-bottom: none;
  padding-bottom: 1px;
}
.haupt a:hover,
.haupt .aktiv > a,
.haupt a[aria-current="page"] { color: var(--rot); }

/* Senkrechte Haarlinie als Gruppentrenner (Spacer-Seite, Doktype 199). */
.haupt .trenner { display: inline-flex; align-items: center; }
.haupt .strich { width: 1px; height: 22px; background: #D4D5D6; display: block; }

@media (max-width: 380px) {
  .haupt .trenner { display: none; }
}

/* -------------------------------------------------------------------------
   Fuß
   ------------------------------------------------------------------------- */

/* Linie über volle Breite; zwei Inhaltscontainer (links/rechts) im umschlag. */
.fuss {
  margin-top: auto;
  width: 100%;
  border-top: 1px solid var(--linie);
}

.fuss-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-block: 28px 48px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--gedaempft);
}

.fuss-spalte { min-width: 0; }
.fuss-rechts { text-align: right; }

/* Inhalt der Container kommt aus dem Backend (Menü-CE, Text …). */
.fuss-zeile a { color: var(--gedaempft); border-bottom: none; }
.fuss-zeile a:hover { color: var(--rot); }
.fuss-zeile p { margin: 0; max-width: none; }
.fuss-zeile ul { list-style: none; display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 600px) {
  .fuss-zeile { flex-direction: column; }
  .fuss-rechts { text-align: left; }
}

/* -------------------------------------------------------------------------
   Bildnachweis (Protokoll: Core-Feld copyright + Caption-Zeile)
   ------------------------------------------------------------------------- */

figure { margin: 20px 0; }
figure img { width: 100%; height: auto; border-radius: 8px; display: block; }
figcaption { font-family: var(--sans); font-size: 12.5px; color: var(--gedaempft); margin-top: 6px; text-align: right; }

/* -------------------------------------------------------------------------
   Mobil
   ------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .umschlag { padding: 0 20px 28px; }
  /* Schmalere Spalte: Zeichen einen Tick kleiner und enger, damit es den Text
     rahmt statt ihn zu überlagern. Zitatgröße bleibt wie Desktop (18px). */
  .ce-bodytext blockquote,
  .frame-type-text blockquote,
  .frame-type-textmedia blockquote,
  blockquote.zitat { padding-left: 2em; }
  .ce-bodytext blockquote::before,
  .frame-type-text blockquote::before,
  .frame-type-textmedia blockquote::before,
  blockquote.zitat::before { font-size: 76px; top: -4px; }
  /* nach .umschlag, damit padding-block nicht vom padding-Shorthand überschrieben wird */
  .kopfzeile { flex-direction: column; align-items: flex-start; gap: 16px; padding-block: 20px; }
  .fuss-zeile { padding-block: 28px 48px; }

  /* Wortmarke auf schmalen Viewports kleiner, damit sie nicht überläuft. */
  .kopf .wortmarke { height: 25px; }

  /* Navigation enger setzen, damit sie bei ~390px nicht umbricht */
  .haupt .verben { gap: 16px; font-size: 13.5px; row-gap: 8px; }
  .haupt .trenner { margin-inline: -2px; }   /* Linie näher an die Nachbarn */
  .haupt .strich { height: 18px; }
}