/* =========================================================================
   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;
}
/* Anführungszeichen passt sich der Farbfläche an. Das Zeichen ist standardmäßig
   in --karton gehalten — auf einer Karton-/Rot-Hauch-Fläche geht es darin unter
   (gleiche bzw. zu nahe Helligkeit). Wie bei den Plattform-Buttons greift hier
   automatisch eine Variante in den bekannten Farb-Containern: eine Stufe dunkler
   als der jeweilige Untergrund, damit das Zeichen leise sichtbar bleibt, ohne
   laut zu werden (Rot bleibt dem CTA vorbehalten). */
.kasten--karton    :is(.ce-bodytext, .frame-type-text, .frame-type-textmedia) blockquote::before,
.kasten--karton    blockquote.zitat::before { color: var(--linie); }
.kasten--rot-hauch :is(.ce-bodytext, .frame-type-text, .frame-type-textmedia) blockquote::before,
.kasten--rot-hauch blockquote.zitat::before { color: #EAD6CE; }
.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);
}

/* -------------------------------------------------------------------------
   Breadcrumb (Brotkrümel) — leise Orientierungszeile über dem Seitenkopf.
   Erscheint nur eine Ebene unter den Sektionen (siehe Breadcrumb-Partial),
   startet bei der Sektion, aktuelle Seite als nicht verlinkte End-Station.
   ------------------------------------------------------------------------- */
.brotkrumen {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
}
.brotkrumen .umschlag { padding-top: 22px; padding-bottom: 0; }
.brotkrumen .krumen {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.brotkrumen li { display: flex; align-items: center; gap: 8px; }
.brotkrumen li + li::before { content: "\203A"; color: var(--hauch); }
.brotkrumen a {
  color: var(--gedaempft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.brotkrumen a:hover { color: var(--rot); border-bottom-color: currentColor; }
.brotkrumen .hier { color: var(--hauch); }

/* -------------------------------------------------------------------------
   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; }

/* -------------------------------------------------------------------------
   Grounding-Seite (/de/peter-proell/) — Fakten-Dossier
   Die Seite besteht aus html-CType-Elementen (frame-type-html); zwei
   Bausteine brauchen eigenes CSS, sonst rendern sie als nackte Auszeichnung:
   die Definitions-Lead (p.lead-definition) und das Kerndaten-Register
   (dl.data-grid). Die Klassen sind eindeutig — sie kommen nur hier vor —,
   deshalb globale Regeln ohne Seiten-Scope. Anmutung: ruhiges Datenblatt,
   das zur Einordnungs-/Grounding-Aufgabe passt (nicht Marketing).
   ------------------------------------------------------------------------- */

/* Etwas Luft über der ersten Überschrift: ohne Breadcrumb klebt das H1 sonst
   direkt an der Kopfzeile. Greift am ersten Inhalts-Frame. */
.umschlag > .frame-type-html:first-child { padding-top: 14px; }

/* Definitionssatz direkt unter dem H1 — die Kernaussage der Seite, eine
   Spur größer als Fließtext und in Tinte. <strong> darin bleibt 700. */
.lead-definition {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.5;
  color: var(--tinte);
  margin: 2px 0 20px;
  max-width: var(--zeile-max);
}

/* Kerndaten-Register: Label/Wert-Paare zweispaltig. Das <dl> enthält
   abwechselnd dt/dd → ein zweispaltiges CSS-Grid reiht sie automatisch
   zeilenweise. Haarlinien (--linie) über jeder Zeile geben den ruhigen
   Ledger-Look. Label in Sans/gedämpft (Metadaten-Anmutung), Wert in
   Serif/Tinte (Markenschrift, klar lesbar). */
.data-grid {
  display: grid;
  grid-template-columns: minmax(8.5rem, 15rem) 1fr;
  column-gap: 28px;
  max-width: var(--zeile-max);
  margin: 0 0 16px;
}
.data-grid dt,
.data-grid dd {
  padding: 9px 0;
  border-top: 1px solid var(--linie);
  align-self: baseline;
}
.data-grid dt {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gedaempft);
}
.data-grid dd {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.45;
  color: var(--tinte);
}
/* Abschluss-Linie unter der letzten Zeile — schließt das Register. */
.data-grid dt:last-of-type,
.data-grid dd:last-of-type { border-bottom: 1px solid var(--linie); }

/* Rhythmus der Abschnitte: H2-Sektionen (Kerndaten, Schwerpunkt, Abgrenzung,
   FAQ) brauchen Luft nach oben, die FAQ-Fragen (h3) etwas weniger. Greift nur
   in html-Frames — praktisch ausschließlich diese Seite. */
.frame-type-html h2 { margin-top: 40px; margin-bottom: 14px; }
.frame-type-html h3 { margin-top: 22px; margin-bottom: 6px; }
.frame-type-html h1 { margin-top: 0; margin-bottom: 10px; }

/* -------------------------------------------------------------------------
   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; }

  /* Kerndaten-Register stapelt: Label über Wert. Trennlinie sitzt am Label
     (Zeilenkopf), der Wert schließt bündig darunter an. */
  .lead-definition { font-size: 19px; }
  .data-grid { grid-template-columns: 1fr; column-gap: 0; }
  .data-grid dt { padding: 10px 0 0; border-top: 1px solid var(--linie); }
  .data-grid dd { padding: 1px 0 10px; border-top: 0; }
  .data-grid dt:last-of-type { border-bottom: 0; }
}

/* -------------------------------------------------------------------------
   Space Before / After — redaktionelle Abstände (FSC-Feldwerte)
   Werte: extra-small … extra-large. Klasse sitzt bei Core-Elementen auf
   .frame, bei Content Blocks und Containern am äußeren Element. !important,
   damit die bewusste Redaktionswahl den Standard-Rhythmus sicher übersteuert.
   ------------------------------------------------------------------------- */
.frame-space-before-extra-small { margin-top: 8px !important; }
.frame-space-before-small       { margin-top: 16px !important; }
.frame-space-before-medium      { margin-top: 32px !important; }
.frame-space-before-large       { margin-top: 64px !important; }
.frame-space-before-extra-large { margin-top: 96px !important; }

.frame-space-after-extra-small  { margin-bottom: 8px !important; }
.frame-space-after-small        { margin-bottom: 16px !important; }
.frame-space-after-medium       { margin-bottom: 32px !important; }
.frame-space-after-large        { margin-bottom: 64px !important; }
.frame-space-after-extra-large  { margin-bottom: 96px !important; }

/* Frame = "none": FSC gibt leere Spacer-Divs aus statt Klassen am Wrapper.
   Leerer Div braucht Höhe statt Margin. */
.frame-space-before-extra-small:empty { height: 8px;  margin: 0 !important; }
.frame-space-before-small:empty       { height: 16px; margin: 0 !important; }
.frame-space-before-medium:empty      { height: 32px; margin: 0 !important; }
.frame-space-before-large:empty       { height: 64px; margin: 0 !important; }
.frame-space-before-extra-large:empty { height: 96px; margin: 0 !important; }
.frame-space-after-extra-small:empty  { height: 8px;  margin: 0 !important; }
.frame-space-after-small:empty        { height: 16px; margin: 0 !important; }
.frame-space-after-medium:empty       { height: 32px; margin: 0 !important; }
.frame-space-after-large:empty        { height: 64px; margin: 0 !important; }
.frame-space-after-extra-large:empty  { height: 96px; margin: 0 !important; }