/* frankwohlgemuth.de – Gestaltung
   Farben und Abstände zentral als Variablen; Hell- und Dunkelmodus. */

@font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url(/assets/fonts/opensans-400.woff2) format("woff2"), url(/assets/fonts/opensans-400.woff) format("woff"); }
@font-face { font-family: "Roboto Slab"; font-weight: 250; font-style: normal; font-display: swap;
  src: url(/assets/fonts/robotoslab-250.woff2) format("woff2"), url(/assets/fonts/robotoslab-250.woff) format("woff"); }
@font-face { font-family: "Roboto Slab"; font-weight: 300; font-style: normal; font-display: swap;
  src: url(/assets/fonts/robotoslab-300.woff2) format("woff2"), url(/assets/fonts/robotoslab-300.woff) format("woff"); }
@font-face { font-family: "Roboto Slab"; font-weight: 400; font-style: normal; font-display: swap;
  src: url(/assets/fonts/robotoslab-400.woff2) format("woff2"), url(/assets/fonts/robotoslab-400.woff) format("woff"); }
@font-face { font-family: Lora; font-weight: 400; font-style: normal; font-display: swap;
  src: url(/assets/fonts/lora-400.woff2) format("woff2"), url(/assets/fonts/lora-400.woff) format("woff"); }

:root {
  --kopf: #222222;
  --kopf-text: #ffffff;
  --hintergrund: #ffffff;
  --flaeche: #f8f8f8;
  --text: #000000;
  --text-leise: #666660;
  --ueberschrift: #222222;
  --akzent: #7a7a46;          /* Olivton (#999966), für Text abgedunkelt */
  --akzent-hell: #999966;
  --signal: #de6739;
  --gold: #d9b352;
  --gold-text: #222222;
  --linie: #e6e4dd;
  --text-h3: #555555;
  --widget: #444444;
  --breite: 1180px;
  --schmal: 760px;
  --rand: clamp(16px, 4vw, 40px);
  /* Schriftzuordnung nach dem ursprünglichen Stylesheet (Enfold Child) */
  --schrift-text: "Roboto Slab", Georgia, serif;                     /* Fließtext (Light), h5 (Regular), Fußzeile */
  --schrift-titel: Lora, Georgia, "Times New Roman", serif;          /* h1, h2, Bühne, Glossar, Widget-Titel */
  --schrift: "Open Sans", "Helvetica Neue", Arial, sans-serif;       /* h3, h4, Navigation, Buttons, Meta */
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kopf: #141414;
    --hintergrund: #1b1b1b;
    --flaeche: #242424;
    --text: #e6e4e0;
    --text-leise: #a8a59c;
    --ueberschrift: #f2f0eb;
    --akzent: #c2c28c;
    --akzent-hell: #999966;
    --linie: #34332f;
    --text-h3: #b9b6ae;
    --widget: #d2cfc7;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --kopf: #141414;
    --hintergrund: #1b1b1b;
    --flaeche: #242424;
    --text: #e6e4e0;
    --text-leise: #a8a59c;
    --ueberschrift: #f2f0eb;
    --akzent: #c2c28c;
    --akzent-hell: #999966;
    --linie: #34332f;
    --text-h3: #b9b6ae;
    --widget: #d2cfc7;
    color-scheme: dark;
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--hintergrund); color: var(--text);
  font: 400 1rem/1.75 var(--schrift);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--akzent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--signal); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
h1, h2, h3, h4, h5, h6 { color: var(--ueberschrift); font-family: var(--schrift-titel); font-weight: 300; line-height: 1.25; margin: 1.6em 0 .5em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; font-weight: 400; }
h5 { font-size: 1.12rem; font-weight: 300; line-height: 1.6; }
strong, b { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2.5rem 0; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: #000; padding: .5rem 1rem; z-index: 99; }
.skip:focus { left: 1rem; }

/* ---------- Kopf */
.kopf { background: var(--kopf); color: var(--kopf-text); position: sticky; top: 0; z-index: 20; }
.kopf-innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.marke { color: #fff; text-decoration: none; display: flex; flex-direction: column; line-height: 1.15; padding: .6rem 0; }
.marke:hover { color: #fff; }
.marke-name { font-family: var(--schrift-titel); font-size: 1.2rem; font-weight: 300; letter-spacing: .02em; }
.marke-zusatz { font-size: .74rem; color: #bdbdb2; letter-spacing: .04em; }
.menue ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2rem; }
.menue a { color: #fff; text-decoration: none; font-size: 1rem; letter-spacing: .03em; padding: .3rem 0;
  border-bottom: 2px solid transparent; }
.menue a:hover, .menue a[aria-current] { border-bottom-color: var(--gold); color: #fff; }
.menue-knopf { display: none; background: none; border: 1px solid #555; color: #fff; font: inherit;
  padding: .35rem .8rem; border-radius: 3px; cursor: pointer; }
@media (max-width: 760px) {
  .menue-knopf { display: block; }
  .menue { position: absolute; left: 0; right: 0; top: 100%; background: var(--kopf); display: none;
    border-top: 1px solid #333; }
  .menue.offen { display: block; }
  .menue ul { flex-direction: column; gap: 0; padding: .5rem var(--rand) 1rem; }
  .menue a { display: block; padding: .7rem 0; border-bottom: 1px solid #333; }
}

/* ---------- Layout */
main { min-height: 60vh; }
.breite { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.schmal { max-width: calc(var(--schmal) + 2 * var(--rand)); margin: 0 auto; padding: 1rem var(--rand) 4rem; }
.mit-leiste { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 4rem; padding-top: 2.5rem; padding-bottom: 4rem; }
@media (max-width: 960px) { .mit-leiste { grid-template-columns: 1fr; gap: 2rem; } }
.kicker { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 400;
  color: var(--akzent); margin: 0 0 .4rem; }
.kicker a { text-decoration: none; }
.untertitel { font-family: var(--schrift-titel); font-weight: 250; font-size: 1.3rem; line-height: 1.45; color: var(--text-leise); margin: .2rem 0 1rem; }
.meta { font-size: .88rem; color: var(--text-leise); margin: .3rem 0 1rem; }
.meta a { color: inherit; }
.button { display: inline-block; background: var(--kopf); color: #fff; text-decoration: none; padding: .65rem 1.3rem;
  border-radius: 2px; font-weight: 400; letter-spacing: .03em; font-size: .95rem; }
.button:hover { background: var(--signal); color: #fff; }
.button[target="_blank"]::after { content: " ↗"; }
.mehr { font-weight: 400; text-decoration: none; }
.mehr::after { content: " →"; }

/* ---------- Startseite */
.buehne { position: relative; height: calc(100svh - 64px); min-height: 420px; overflow: hidden; background: #222;
  display: flex; align-items: center; justify-content: center; color: #fff; }
.buehne picture, .buehne-bild { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.buehne-bild { object-fit: cover; object-position: center 30%; }
.buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.05) 40%, rgba(0,0,0,.55)); }
.buehne-titel { position: relative; z-index: 1; align-self: flex-end; margin: 0 var(--rand) 5.5rem; color: #fff; text-align: center;
  font-size: clamp(2.2rem, 1.5rem + 3.5vw, 4.4rem); font-weight: 250; line-height: 1.12; max-width: 16ch;
  text-shadow: 0 2px 28px rgba(0,0,0,.5); }
.weiter { position: absolute; z-index: 1; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: #fff; text-decoration: none;
  font-size: 1.3rem; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; }
.weiter:hover { color: var(--gold); border-color: var(--gold); }
.frage { background: var(--kopf); color: #f9f9f9; text-align: center; padding: 4.5rem var(--rand); border-top: 1px solid #333; }
.frage p { margin: 0; font-family: var(--schrift-titel); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 250; line-height: 1.15; }
.teaser-liste { max-width: calc(1000px + 2 * var(--rand)); margin: 0 auto; padding: 4rem var(--rand) 4.5rem; display: grid; gap: 4.5rem; }
.teaser { display: grid; gap: 1.4rem; }
.teaser h2 { margin: 0 0 .6rem; }
.teaser h2 a { color: var(--ueberschrift); text-decoration: none; }
.teaser h2 a:hover { color: var(--signal); }
.teaser-text p { margin: 0 0 .8rem; max-width: 70ch; }
.teaser-bild { overflow: hidden; display: block; }
.teaser-bild img { width: 100%; transition: transform .4s ease; }
.teaser-bild:hover img { transform: scale(1.02); }
.alle { text-align: center; margin: 0; }

/* ---------- Listen */
.listen-kopf h1 { margin-top: 0; }
.listeneintrag { padding: 0 0 2.5rem; margin: 0 0 2.5rem; border-bottom: 1px solid var(--linie); }
.listeneintrag:last-child { border-bottom: 0; }
.listen-bild img { width: 100%; aspect-ratio: 71 / 37.5; object-fit: cover; margin-bottom: 1.2rem; }
.listeneintrag h2 { margin: 0 0 .2rem; }
.listeneintrag h2 a { color: var(--ueberschrift); text-decoration: none; }
.listeneintrag h2 a:hover { color: var(--signal); }
.listeneintrag .untertitel { font-size: 1.1rem; margin: 0 0 .6rem; }

/* ---------- Seitenleiste */
.seitenleiste { font-size: .95rem; }
.seitenleiste section { margin-bottom: 2.5rem; }
.seitenleiste h2 { font-family: var(--schrift); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 400; margin: 0 0 1rem;
  padding-bottom: .6rem; border-bottom: 2px solid var(--gold); }
.seitenleiste ul { list-style: none; margin: 0; padding: 0; }
.leiste-beitraege li { padding: .55rem 0; border-bottom: 1px solid var(--linie); line-height: 1.4; }
.leiste-beitraege time { display: block; font-size: .82rem; color: var(--text-leise); }
.leiste-beitraege a, .leiste-kategorien a { text-decoration: none; }
.leiste-kategorien li { padding: .2rem 0; }
.leiste-kategorien span { color: var(--text-leise); font-size: .85rem; }
.seitenleiste form, .glossar-filter { display: flex; gap: .4rem; }
input[type=search] { flex: 1; min-width: 0; font: inherit; font-weight: 400; padding: .55rem .7rem; border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--text); border-radius: 2px; }
.seitenleiste button { font: inherit; font-weight: 400; background: var(--kopf); color: #fff; border: 0; padding: 0 .9rem; border-radius: 2px; cursor: pointer; }
.seitenleiste button:hover { background: var(--signal); }

/* ---------- Beitrag / Fließtext */
.beitrag-kopf { margin-bottom: 2rem; }
.beitrag-kopf h1 { margin: 0 0 .4rem; }
.text > :first-child { margin-top: 0; }
.text p, .text ul, .text ol { margin: 0 0 1.2em; }
.text li { margin-bottom: .4em; }
.text img { margin: 1.5rem 0; }
.text h5 { color: var(--ueberschrift); }
.galerie { display: grid; gap: .8rem; margin: 0 0 2rem; }
.galerie-2 { grid-template-columns: 1fr 1fr; }
.galerie figure { margin: 0; }
.galerie img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
@media (max-width: 600px) { .galerie-2 { grid-template-columns: 1fr; } }
.button-zeile { display: inline-block; margin-right: .6rem !important; }
.glossar-link { color: inherit; text-decoration: underline dotted var(--akzent-hell); text-decoration-thickness: 1.5px; }
.glossar-link:hover { color: var(--signal); }
.blaettern { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.blaettern a { text-decoration: none; color: var(--ueberschrift); line-height: 1.35; }
.blaettern a:hover { color: var(--signal); }
.blaettern span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--akzent); margin-bottom: .3rem; }
.blaettern .neuer { text-align: right; grid-column: 2; }

/* ---------- Glossar */
.glossar { padding-top: 2.5rem; padding-bottom: 4rem; }
.glossar-filter { max-width: 520px; flex-wrap: wrap; margin-bottom: 1.2rem; }
.treffer { flex-basis: 100%; margin: .3rem 0 0; font-size: .9rem; color: var(--text-leise); min-height: 1.4em; }
.abc { display: flex; flex-wrap: wrap; gap: .2rem; margin: 0 0 2rem; position: sticky; top: 64px; background: var(--hintergrund);
  padding: .6rem 0; z-index: 5; border-bottom: 1px solid var(--linie); }
.abc a { display: inline-grid; place-items: center; min-width: 2.1rem; height: 2.1rem; text-decoration: none; font-weight: 400; border-radius: 2px; }
.abc a:hover { background: var(--gold); color: #000; }
.buchstabe h2 { font-weight: 250; font-size: 2.4rem; color: var(--gold); margin: 1.5rem 0 .5rem; }
.buchstabe dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 2.5rem; }
.begriff { padding: .9rem 0; border-top: 1px solid var(--linie); }
.begriff dt a { font-weight: 400; text-decoration: none; font-size: 1.05rem; }
.begriff dd { margin: .2rem 0 0; font-size: .92rem; color: var(--text-leise); line-height: 1.5; }
.glossar-eintrag h1 { margin-top: .2rem; }

/* ---------- Fuß */
.fuss { background: var(--gold); color: var(--gold-text); }
.fuss-innen { max-width: var(--breite); margin: 0 auto; padding: 1.6rem var(--rand); display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 1rem; font-size: .92rem; font-weight: 400; }
.fuss p { margin: 0; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.fuss a { color: var(--gold-text); text-decoration: none; }
.fuss a:hover { text-decoration: underline; color: #000; }

@media print {
  .kopf, .fuss, .seitenleiste, .blaettern, .weiter { display: none; }
  .mit-leiste { display: block; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }


/* ======================================================================
   Typografie nach dem ursprünglichen Stylesheet (Enfold Child, style.css)
   ====================================================================== */
body { -webkit-hyphens: auto; hyphens: auto; }
.text p, .seite p, .teaser-text p, .listeneintrag p, .glossar-eintrag .text {
  font-family: var(--schrift-text); font-weight: 300; font-size: 18px; line-height: 1.5; }
h1 { font-family: var(--schrift-titel); font-weight: 400; font-size: clamp(2rem, 1.6rem + 1.4vw, 42px); line-height: 1.19; }
h2 { font-family: var(--schrift-titel); font-weight: 400; }
h3 { font-family: var(--schrift); font-weight: 400; font-size: clamp(1.4rem, 1.2rem + .8vw, 28px); line-height: 1.15; color: var(--text-h3); }
h4 { font-family: var(--schrift); font-weight: 400; font-size: 18px; line-height: 1.33; color: var(--text-h3); padding-top: 20px; }
h5 { font-family: var(--schrift-text); font-weight: 400; font-size: 18px; line-height: 1.33; color: var(--ueberschrift); }
.untertitel { font-family: var(--schrift); font-weight: 400; font-size: clamp(1.3rem, 1.1rem + .8vw, 28px); line-height: 1.15; color: var(--text-h3); }
.kicker { font-family: var(--schrift); text-transform: none; letter-spacing: 0; font-size: 18px; color: var(--text-h3); }
.beitrag-kopf .kicker { margin-bottom: .2rem; }

/* Kopfzeile: Name in Open Sans, Zusatz in Roboto Slab Light */
.marke-name { font-family: var(--schrift); font-size: 18px; font-weight: 400; letter-spacing: 0; }
.marke-zusatz { font-family: var(--schrift-text); font-weight: 300; font-size: 12px; letter-spacing: 0; color: rgba(255,255,255,.85); margin-top: 2px; }
.menue a { font-family: var(--schrift); font-size: 18px; letter-spacing: 0; }

/* Bühne und Frage: wie Slider-Überschrift/h1 in Lora */
.buehne-titel, .frage p { font-family: var(--schrift-titel); font-weight: 400; }
.buehne-titel { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 48px); line-height: 1.4; }
.frage p { font-size: clamp(2rem, 1.6rem + 1.4vw, 42px); line-height: 1.19; }

/* Beitragstitel in Listen und auf der Startseite: Lora */
.teaser h2, .listeneintrag h2 { font-family: var(--schrift-titel); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 42px); line-height: 1.19; }
.blaettern a { font-family: var(--schrift-titel); }

/* „Weiterlesen“-Links: Roboto Slab Light, 20px */
.mehr { font-family: var(--schrift-text); font-weight: 300; font-size: 20px; }

/* Buttons: goldene Pillenform, Open Sans 18px */
.button, .seitenleiste button { font-family: var(--schrift); font-weight: 400; font-size: 18px; letter-spacing: 0;
  background: var(--gold); color: #222222; border-radius: 50px; padding: .5rem 30px; }
.button:hover, .seitenleiste button:hover { background: var(--kopf); color: #fff; }

/* Seitenleiste: Widget-Titel in Lora 20px, Beitragsliste wie bisher (Titel Lora kursiv, Datum Open Sans 13px) */
.seitenleiste h2 { font-family: var(--schrift-titel); font-size: 20px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--widget); }
.leiste-beitraege a { font-family: var(--schrift-titel); }
.leiste-beitraege time, .leiste-kategorien span { font-family: var(--schrift); font-size: 13px; }
.leiste-kategorien a { font-family: var(--schrift); }

/* Glossar: Index-Buchstaben und Titel in Lora */
.abc a { font-family: var(--schrift-titel); font-size: 24px; letter-spacing: 0; }
.buchstabe h2, .glossar-eintrag h1 { font-family: var(--schrift-titel); font-weight: 400; }
.glossar-eintrag h1 { font-size: clamp(2.2rem, 1.6rem + 2vw, 48px); }
.begriff dt a { font-family: var(--schrift-titel); font-style: normal; }

/* Fußzeile: Roboto Slab Light 18px */
.fuss-innen { font-family: var(--schrift-text); font-weight: 300; font-size: 18px; line-height: 1.33; }

/* ---------- Burger-Menü (drei Striche) */
.menue-knopf { border: 0; padding: 10px 4px; width: 36px; height: 36px; flex-direction: column; justify-content: space-between; }
.menue-knopf span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 1px; transition: transform .2s ease, opacity .2s ease; }
.menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 760px) {
  .menue-knopf { display: flex; }
  .marke-zusatz { font-size: 11px; }
  /* aufgeklapptes Menü: Balken über die volle Breite, beim Hover komplett gold */
  .menue ul { padding: 0 0 .5rem; }
  .menue a { padding: .8rem var(--rand); transition: background-color .15s ease, color .15s ease; }
  .menue a:hover, .menue a:focus-visible { background: var(--gold); color: #000; border-bottom-color: var(--gold); }
}

/* ---------- Startseite: Titel vertikal zentriert, Pille darunter */
.buehne-inhalt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
  padding: 0 var(--rand); text-align: center; }
.buehne-inhalt .buehne-titel { margin: 0; align-self: auto; }
.buehne::after { background: rgba(0,0,0,.28); }
.alle { text-align: center; margin: 0; }
.alle a { font-family: var(--schrift); font-size: 15px; color: var(--text-leise); text-decoration: underline; text-decoration-color: var(--linie); }
.alle a:hover { color: var(--signal); }
.social { display: flex; justify-content: center; gap: 2.5rem; padding: 1rem var(--rand) 3.5rem; }
.social-link { font-family: var(--schrift); font-size: 15px; letter-spacing: .06em; color: var(--text-leise); text-decoration: none;
  width: 88px; height: 88px; display: grid; place-items: center; border: 3px solid currentColor; border-radius: 50%; }
.social-link:hover, .social-link:focus-visible { color: var(--gold); border-color: var(--gold); }
.social-link svg { width: 40px; height: 40px; display: block; }

/* ---------- Fußzeile wie WordPress: drei Spalten (40 % / 17 % / rechts), Roboto Slab Light 18px */
.fuss-innen { display: grid; grid-template-columns: 40% 17% 1fr; gap: 0 2rem; align-items: baseline;
  padding: 2.2rem var(--rand) 2.4rem; justify-content: initial; }
.fuss-spalte { margin: 0; color: #222222; }
.fuss-3 { text-align: right; }
.fuss a { color: #222222; text-decoration: none; }
.fuss a:hover { text-decoration: underline; color: #222222; }
@media (max-width: 768px) {
  .fuss-innen { grid-template-columns: 1fr; gap: .5rem; padding-top: 20px; padding-bottom: 40px; }
  .fuss-3 { text-align: left; }
  /* größere Abstände und Klickflächen (mind. 44 px hoch) */
  .fuss-spalte { padding: .6rem 0; }
  .fuss-spalte a { display: block; margin: -.6rem 0; padding: .6rem 0; }
}

/* ---------- Zweisprachige Beiträge/Seiten: links Deutsch, rechts Englisch; mobil untereinander */
.zweisprachig { padding-top: 2.5rem; padding-bottom: 4rem; }
.kopf-galerie { margin-bottom: 2.5rem; }
.kopf-galerie .galerie { margin: 0; }
.spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.spalte > .text > :first-child, .spalte.text > :first-child { margin-top: 0; }
.spalte[lang="en"] .text > h4:first-child, .spalte.text[lang="en"] > h4:first-child { padding-top: 0; }
.seite-zweisprachig { padding-top: 2.5rem; padding-bottom: 4rem; }
.mit-leiste-breit { grid-template-columns: minmax(0, 1fr) 240px; }
@media (max-width: 960px) {
  .spalten { grid-template-columns: 1fr; gap: 2.5rem; }
  .spalte[lang="en"] { border-top: 1px solid var(--linie); padding-top: 2.5rem; }
  .mit-leiste-breit { grid-template-columns: 1fr; }
}
.kopf-galerie .galerie-1 { max-width: 845px; }
.spalte[lang="en"] .text > h4:first-child { margin-top: 0; padding-top: 0; }
.spalte[lang="en"] .text > h4:first-child + h1 { margin-top: .4rem; }
.spalte[lang="en"] .text > h1 + h3 { margin-top: .2rem; }
.beitrag-kopf .untertitel + .meta { margin-top: .6rem; }
.mit-leiste-breit { grid-template-columns: minmax(0, 1fr) 260px; }
@media (max-width: 960px) { .mit-leiste-breit { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .spalten { grid-template-columns: minmax(0, 1fr); } }
.text { overflow-wrap: break-word; }
.text a[href^="http"] { overflow-wrap: anywhere; }
/* Beitragsseiten: genau ein großes Bild in Originalproportion */
.beitrag .galerie, .kopf-galerie .galerie { display: block; margin: 0 0 2rem; }
.beitrag .galerie img { width: 100%; height: auto; object-fit: initial; }
.kopf-galerie .galerie-1 { max-width: none; }

/* ======================================================================
   Schriftgrößen fest nach ursprünglichem Stylesheet (nicht mehr fließend)
   Absatz 18/24 · h1 42/50 · h2 (Lora) 42/50 · h3 28/32 · h4 18/24 · h5 18/24
   ====================================================================== */
h1, .glossar-eintrag h1 { font-size: 42px; line-height: 50px; }
h2, .teaser h2, .listeneintrag h2 { font-size: 42px; line-height: 50px; }
h3, .untertitel { font-size: 28px; line-height: 32px; }
h4, .kicker { font-size: 18px; line-height: 24px; }
h5 { font-size: 18px; line-height: 24px; }
.buehne-titel { font-size: 48px; line-height: 68px; }
.frage p { font-size: 42px; line-height: 50px; }
.buchstabe h2 { font-size: 42px; line-height: 50px; }
.seitenleiste h2 { font-size: 20px; line-height: 1.4; }
.beitrag-kopf h1 { margin: .1rem 0 .5rem; }
.beitrag-kopf .untertitel { margin: 0 0 1.5rem; }
.beitrag-fuss { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.beitrag-fuss .meta { margin: 0; font-size: 15px; }
/* Nur auf sehr schmalen Bildschirmen etwas kleiner, Verhältnis bleibt */
@media (max-width: 480px) {
  h1, h2, .teaser h2, .listeneintrag h2, .glossar-eintrag h1, .frage p, .buchstabe h2 { font-size: 34px; line-height: 40px; }
  h3, .untertitel { font-size: 24px; line-height: 28px; }
  .buehne-titel { font-size: 38px; line-height: 48px; }
}

/* „Mehr“ / „Weiterlesen“ wie im Original (.more-link): Roboto Slab Light 20px, ohne Pfeil und Unterstreichung */
.mehr::after { content: none; }
.more-link { font-family: var(--schrift-text); font-weight: 300; font-size: 20px; text-decoration: none; color: var(--akzent-hell); }
.more-link:hover { color: var(--signal); }
/* Genre-Zeile (Kicker) immer Open Sans, auch innerhalb von Textblöcken */
p.kicker, .teaser-text p.kicker, .beitrag-kopf p.kicker, .glossar-eintrag p.kicker {
  font-family: var(--schrift); font-weight: 400; font-size: 18px; line-height: 24px; color: var(--text-h3); }

/* Startseite ab 1400px wie WordPress (.alignleft): Bild links in Originalbreite, Text rechts daneben */
@media (min-width: 1400px) {
  .teaser-liste { max-width: none; padding-left: 60px; padding-right: 60px; }
  .teaser { grid-template-columns: minmax(0, 1000px) minmax(260px, 1fr); gap: 0 40px; align-items: start; }
  .teaser-bild img { width: 100%; }
  .teaser h2 { margin-top: 0; }
  .alle { grid-column: 1 / -1; }
}

/* Kopfzeile in voller Breite wie WordPress (header_stretch) */
.kopf-innen { max-width: none; padding-left: clamp(16px, 3vw, 50px); padding-right: clamp(16px, 3vw, 50px); }

/* „Nach oben“-Knopf: goldenes Quadrat unten rechts */
.nach-oben { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  width: 50px; height: 50px; background: var(--gold); border-radius: 2px; display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.nach-oben::before { content: ""; width: 12px; height: 12px; border-left: 2px solid #222; border-top: 2px solid #222;
  transform: translateY(3px) rotate(45deg); }
.nach-oben:hover { background: #222; }
.nach-oben:hover::before { border-color: #fff; }
.nach-oben[hidden] { display: none; }
@media print { .nach-oben { display: none; } }
@media (min-width: 1400px) { .teaser-liste { padding-left: 50px; padding-right: 50px; } }

/* ---------- Keine Kursivschrift auf der gesamten Website */
em, i, cite, address, dfn, var { font-style: normal; }

/* ---------- Startseite: große Headline 56 px (mobil unverändert 38 px) */
.buehne-titel { font-size: 56px; line-height: 76px; }
@media (max-width: 480px) { .buehne-titel { font-size: 38px; line-height: 48px; } }

/* Quellenangabe unter Glossareinträgen */
.glossar-eintrag p.quelle { font-size: 13px; line-height: 1.5; margin-top: 1.4rem; opacity: .75; }
.glossar-eintrag p.quelle a { color: inherit; text-decoration: underline; }