/*
Theme Name: Marlen Hofmann
Theme URI: https://marlen-hofmann.de
Author: Dr. Marlen Hofmann
Description: Eigenes Theme für marlen-hofmann.de — HTML und CSS ohne Baukasten. Ein Kopfbereichs-Bauplan, acht Ausprägungen; Farben aus dem KI-Machwerk-Logo; Schriften selbst gehostet.
Version: 0.2.4
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: Alle Rechte vorbehalten
Text Domain: marlen-hofmann
*/

/* =============================================================
   marlen-hofmann.de — Gestaltungsgrundlage
   Entwurf 07.08.2026 · alle Grundwerte an EINER Stelle
   ============================================================= */

/* ---------- 1. Grundwerte (Design Tokens) ------------------- */

:root {
  /* Farben — abgeleitet aus dem KI-Machwerk-Logo.
     Kontrastwerte gegen Weiß in Klammern, gemessen nach WCAG 2.1 */
  --ton-tinte:        #23201E;   /* Fließtext            (16,2:1) */
  --ton-marke:        #514A46;   /* Markenbraun, Logo     (8,7:1) */
  --ton-leise:        #6B625C;   /* Nebentext             (6,0:1) */
  --ton-kupfer:       #8C5A3E;   /* Links, Schaltflächen  (5,8:1) */
  --ton-kupfer-tief:  #7A4E35;   /* Hover-Zustand         (7,1:1) */
  --ton-kupfer-hell:  #BA927E;   /* Logo-Kupfer, nur Dekor(2,8:1) */
  --ton-sand:         #F6F2EE;   /* warme Fläche                  */
  --ton-papier:       #FFFFFF;
  --ton-linie:        #E3DBD4;

  /* Semantische Zuweisung — hier wird umgefärbt, nicht oben */
  --flaeche:          var(--ton-papier);
  --flaeche-warm:     var(--ton-sand);
  --text:             var(--ton-tinte);
  --text-leise:       var(--ton-leise);
  --akzent:           var(--ton-kupfer);
  --akzent-hover:     var(--ton-kupfer-tief);
  --linie:            var(--ton-linie);

  /* Abstände — Vierer-Raster, damit nichts »fast« ausgerichtet ist */
  --raum-1:  .25rem;   /*  4px */
  --raum-2:  .5rem;    /*  8px */
  --raum-3:  .75rem;   /* 12px */
  --raum-4:  1rem;     /* 16px */
  --raum-5:  1.5rem;   /* 24px */
  --raum-6:  2rem;     /* 32px */
  --raum-7:  3rem;     /* 48px */
  --raum-8:  4rem;     /* 64px */
  --raum-9:  6rem;     /* 96px */

  /* Schriftgrößen — mitwachsend, kein Umbruchpunkt nötig */
  --schrift-klein:  .875rem;
  --schrift-basis:  clamp(1rem, .97rem + .15vw, 1.125rem);
  --schrift-lead:   clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
  --schrift-h3:     clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --schrift-h2:     clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  --schrift-h1:     clamp(2rem, 1.5rem + 2.4vw, 3.25rem);

  /* Schriftfamilien — EIN Ort für den späteren Austausch.
     Kanit + Open Sans, wie im Bestand. Beide werden im fertigen
     Theme SELBST GEHOSTET, nicht über das Google-CDN geladen
     (sonst geht die Besucher-IP an Google, und die Datenschutz-
     erklärung deckt das nicht ab). */
  --schrift-titel: "Kanit", "Avenir Next Condensed", "Helvetica Neue", Arial, sans-serif;
  --schrift-text:  "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --breite-inhalt: 68rem;
  --breite-text:   40rem;   /* Lesespalte, ca. 70 Zeichen */
  --radius:        4px;
  --kopf-hoehe:    clamp(19rem, 42vh, 27rem);
}

/* ---------- 2. Grundlagen ----------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--schrift-text);
  font-size: var(--schrift-basis);
  line-height: 1.65;
  color: var(--text);
  background: var(--flaeche);
  -webkit-font-smoothing: antialiased;
}

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

/* Kanit ist eine Grotesk, keine Serifenschrift. Sie läuft eng und
   wirkt bei großen Graden schnell gedrängt — deshalb hier etwas
   mehr Zeilenabstand und kein negativer Buchstabenabstand. */
h1, h2, h3 {
  font-family: var(--schrift-titel);
  line-height: 1.2;
  text-wrap: balance;
  color: var(--ton-marke);
  font-weight: 600;
}
h1 { font-size: var(--schrift-h1); letter-spacing: 0; }
h2 { font-size: var(--schrift-h2); letter-spacing: 0; }
h3 { font-size: var(--schrift-h3); }

/* h4 tritt nur in gegliederten Fließtexten auf (Rechtstexte) — gleiche
   Schrift wie die übrigen Überschriften, aber im Grad des Fließtextes. */
h4 {
  font-family: var(--schrift-titel);
  font-size: var(--schrift-basis);
  line-height: 1.3; color: var(--ton-marke);
  font-weight: 600;
}

/* Gegliederter Fließtext: Überschriften brauchen Luft nach oben, sonst
   kleben sie am Absatz davor und die Gliederung ist nicht mehr lesbar.
   Aufeinanderfolgende Überschriften rücken enger zusammen — sie gehören
   als Paar zusammen, nicht als zwei Blöcke. */
:is(p, ul, ol) + :is(h2, h3, h4) { margin-top: var(--raum-7); }
:is(h2) + h3, :is(h3) + h4 { margin-top: var(--raum-5); }
:is(h2, h3, h4) + :is(p, ul, ol) { margin-top: var(--raum-4); }
.raster + :is(p, ul, ol) { margin-top: var(--raum-6); }
/* Absatz, der unter einem Kartenraster steht und deshalb über die
   ganze Bahn läuft statt über die Lesespalte. */
.breit { max-width: none; }

p, ul, ol { max-width: var(--breite-text); }
p + p, p + ul, p + ol, ul + p, ol + p { margin-top: var(--raum-4); }

/* Luft zwischen Aufzählungspunkten — aber nur im Fließtext.
   Navigation und Fußzeile sind waagerechte Listen; dort würde der
   Abstand jeden Punkt außer dem ersten nach unten schieben. */
li + li { margin-top: var(--raum-2); }
.navi li + li, .fusszeile li + li { margin-top: 0; }

a { color: var(--akzent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--akzent-hover); }

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Auf dunklen Flächen (Fußzeile, Kopf-Band, Sprungmarke) erreicht der
   Kupfer-Ring nur 1,5:1 gegen Markenbraun — dort übernimmt Weiß. */
.fusszeile :focus-visible, .kopf :focus-visible, .sprung:focus-visible { outline-color: #fff; }

/* Anker und Sprungmarke landen sonst unter der klebenden Kopfzeile */
html { scroll-padding-top: 5.5rem; }

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.sprung {
  position: absolute; left: var(--raum-4); top: -4rem;
  background: var(--ton-marke); color: #fff;
  padding: var(--raum-3) var(--raum-5); z-index: 100;
  transition: top .15s;
}
.sprung:focus { top: var(--raum-4); }

.bahn {
  width: min(100% - 2.5rem, var(--breite-inhalt));
  margin-inline: auto;
}

/* ---------- 3. Kopfzeile mit Navigation --------------------- */

.kopfzeile {
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
  position: sticky; top: 0; z-index: 50;
}
.kopfzeile > .bahn {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--raum-5); min-height: 4.5rem;
  /* Zwischen Menü-Umbruchpunkt und voller Breite (48–62rem, auch
     125–175 % Desktop-Zoom) bricht die Navigation in eine zweite
     Zeile, statt rechts hinauszulaufen. */
  flex-wrap: wrap;
}
.marke {
  font-family: var(--schrift-titel);
  font-size: 1.125rem; font-weight: 600;
  color: var(--ton-marke); text-decoration: none;
  letter-spacing: .01em; white-space: nowrap;
}
.marke:hover { color: var(--ton-marke); }

/* Aufklappmenü ohne JavaScript: <details>/<summary> ist ein
   eingebautes Ausklapp-Element und funktioniert mit Tastatur und
   Screenreader von Haus aus. Auf breiten Fenstern ist die Liste
   dauerhaft offen, der Knopf verschwindet. */
.menue { position: relative; }
.menue > summary {
  display: none; cursor: pointer; list-style: none;
  padding: var(--raum-2) var(--raum-3); margin-right: calc(var(--raum-3) * -1);
  font-size: var(--schrift-klein); font-weight: 600; color: var(--ton-marke);
}
.menue > summary::-webkit-details-marker { display: none; }
.menue > summary::after { content: " ☰"; }
.menue[open] > summary::after { content: " ✕"; }

.navi ul {
  list-style: none; padding: 0; margin: 0; max-width: none;
  display: flex; gap: var(--raum-5); align-items: center;
}
.navi a {
  color: var(--text); text-decoration: none;
  font-size: var(--schrift-klein); font-weight: 500;
  padding: var(--raum-2) 0; display: block;
  border-bottom: 2px solid transparent;
}
.navi a:hover { color: var(--akzent); border-bottom-color: var(--ton-kupfer-hell); }
.navi a[aria-current="page"] { color: var(--ton-marke); border-bottom-color: var(--akzent); }
/* Auch auf Unterseiten bleibt der Hauptblock markiert: WordPress
   vergibt die Vorfahren-Klassen (current-menu-ancestor & Co.) selbst. */
.navi li.current-menu-ancestor > a,
.navi li.current-menu-parent > a,
.navi li.current-page-ancestor > a { color: var(--ton-marke); border-bottom-color: var(--akzent); }

/* Unternavigation (z. B. DORA → Navigator, Produkte, Hilfsmittel, Blog).
   Aufklappen bei Maus UND Tastaturfokus (:focus-within) — dasselbe
   Paneel-Muster wie das mobile Menü. WordPress liefert die Klassen
   sub-menu und menu-item-has-children von sich aus. */
.navi li { position: relative; }
.navi li.menu-item-has-children > a::after { content: " ▾"; font-size: .75em; }
.navi .sub-menu {
  list-style: none; margin: 0;
  display: none;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: var(--raum-2) var(--raum-5);
  box-shadow: 0 8px 28px rgba(35,32,30,.14);
  min-width: 13rem;
}
.navi li:hover > .sub-menu,
.navi li:focus-within > .sub-menu,
.navi li.offen > .sub-menu { display: block; }
/* .offen setzt das Skript in header.php: auf Berührungsgeräten öffnet
   der erste Tipp das Paneel, Esc schließt (WCAG 1.4.13). */
.navi .sub-menu a {
  border-bottom: 1px solid var(--linie);
  padding: var(--raum-3) 0;
}
.navi .sub-menu li:last-child > a { border-bottom: 0; }

/* ---------- 4. Kopfbereich — der Bauplan -------------------- *
   EIN Aufbau, acht Ausprägungen. Gleiche Höhe, gleiche
   Typografie, gleiche Textposition. Nur das Bild wechselt.     */

.kopf {
  position: relative;
  min-height: var(--kopf-hoehe);
  display: flex; align-items: flex-end;
  padding-block: var(--raum-8) var(--raum-7);
  overflow: hidden;
  background: var(--ton-marke);
}
.kopf__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Je Bild einstellbar, weil ein hochformatiges Porträt in einem
     breiten Band sonst den Kopf abschneidet. Beispiel im Markup:
     style="--bild-position: 62% 12%" */
  object-position: var(--bild-position, center);
}
/* Abdunklung, damit weiße Schrift auf JEDEM Bild lesbar bleibt.
   Unten dichter als oben — dort steht der Text.               */
.kopf::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(35,32,30,.86) 0%,
    rgba(35,32,30,.62) 42%,
    rgba(35,32,30,.30) 100%);
}
/* Rechtsseiten haben kein Motiv — Höhe, Typografie und Textposition
   bleiben trotzdem gleich. Statt Bild und Schleier nur die Markenfarbe. */
.kopf--schlicht { background: var(--ton-marke); }
.kopf--schlicht::after {
  background: linear-gradient(to top,
    rgba(35,32,30,.55) 0%, rgba(35,32,30,.15) 100%);
}
.kopf__inhalt { position: relative; z-index: 1; }
.kopf__rubrik {
  display: block;
  font-size: var(--schrift-klein);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  /* Kupfer-hell ist laut Token-Regel nur Dekor (2,8:1) — als Textfarbe
     auf hellen Motiven fiel die Rubrik unter 3:1 (Gutachten A11). */
  color: rgba(255, 255, 255, .85);
  margin-bottom: var(--raum-3);
}
/* Brotkrumen in der Rubrik-Zeile: Vorfahren als Links, gleicher Ton */
.kopf__rubrik a { color: inherit; text-decoration: none; }
.kopf__rubrik a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.kopf__trenner { opacity: .55; margin-inline: var(--raum-2); }
.kopf h1 { color: #fff; max-width: 20ch; }
/* Startseite: Der Leitspruch ist ein Satz, kein Seitentitel. Etwas
   kleiner und breiter gesetzt, damit er in drei Zeilen läuft und der
   Kopfbereich dieselbe Höhe behält wie auf allen anderen Seiten. */
.kopf--start h1 { font-size: clamp(1.625rem, 1.1rem + 1.7vw, 2.5rem); max-width: 28ch; }
.kopf__lead {
  color: rgba(255,255,255,.9);
  font-size: var(--schrift-lead);
  margin-top: var(--raum-4);
  max-width: 46ch;
}

/* ---------- 5. Abschnitte ----------------------------------- */

.abschnitt { padding-block: var(--raum-9); }
.abschnitt--warm { background: var(--flaeche-warm); }
.abschnitt__titel { margin-bottom: var(--raum-6); }

.lead { font-size: var(--schrift-lead); color: var(--text); }

/* Leitsatz — trägt den Markenspruch */
.leitsatz {
  font-family: var(--schrift-titel);
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.5rem);
  line-height: 1.25; color: var(--ton-marke);
  max-width: 24ch; text-wrap: balance;
  border-left: 3px solid var(--akzent);
  padding-left: var(--raum-5);
}
.leitsatz em { font-style: normal; color: var(--akzent); }
p + .leitsatz { margin-top: var(--raum-7); }

/* ---------- 6. Bausteine ------------------------------------ */

.knopf {
  display: inline-block;
  background: var(--akzent); color: #fff;
  padding: var(--raum-3) var(--raum-6);
  border-radius: var(--radius); text-decoration: none;
  font-weight: 500; font-size: var(--schrift-basis);
  border: 1px solid var(--akzent);
}
.knopf:hover { background: var(--akzent-hover); border-color: var(--akzent-hover); color: #fff; }
.knopf--leise { background: transparent; color: var(--akzent); }
.knopf--leise:hover { background: var(--ton-sand); color: var(--akzent-hover); }

.raster {
  display: grid; gap: var(--raum-5);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
/* Fünf Karten (die Rechtsakte) laufen im Grundraster auf 4 + 1 hinaus —
   die fünfte stünde allein in der zweiten Reihe. Drei feste Spalten
   ergeben 3 + 2 und lesen sich als eine Gruppe. Unterhalb greift wieder
   das automatische Raster. */
@media (min-width: 60rem) {
  .raster--drei { grid-template-columns: repeat(3, 1fr); }
}
/* Vier Karten (die Einstiege einer Bereichsseite) passen im Grundraster
   nicht nebeneinander: Bei 68rem Bahn blieben 15,875rem je Spalte, knapp
   unter dem 16rem-Minimum — es würden 3 + 1, die vierte stünde allein.
   Zwei feste Spalten ergeben ein ruhiges 2 × 2. */
@media (min-width: 60rem) {
  .raster--vier { grid-template-columns: repeat(2, 1fr); }
}
.karte {
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: var(--raum-6); background: var(--flaeche);
  display: flex; flex-direction: column; gap: var(--raum-3);
}
/* Auf der Kontaktseite trägt die Karte kein übergeordnetes
   Abschnittsthema — dort ist die Kartenüberschrift die zweite Ebene
   (h2). Gleicher Grad wie h3, damit beide Formen gleich aussehen. */
.karte h2, .karte h3 { color: var(--ton-marke); }
.karte h2 { font-size: var(--schrift-h3); }
.karte p { color: var(--text-leise); font-size: var(--schrift-basis); }
/* Der Link sitzt am Kartenfuß, damit alle Karten einer Reihe unten
   bündig schließen. Vorher trug den Ausgleich der Absatz selbst
   (flex-grow) — bei ZWEI Absätzen riss das eine Lücke mitten in den
   Text (About me, 09.08.). */
.karte__mehr { font-size: var(--schrift-klein); font-weight: 600; text-decoration: none; margin-top: auto; }
.karte__mehr::after { content: " →"; }
/* Trägt die Karte statt des Textlinks einen Knopf (Kontaktseite),
   sitzt er nach derselben Regel am Fuß. `align-self` hält ihn auf
   Inhaltsbreite — als Flex-Kind würde er sonst über die ganze Karte
   laufen. Die zwei Karten schließen damit unten bündig ab, egal
   welcher Text länger läuft. */
.karte > .knopf { margin-top: auto; align-self: start; }

/* Zweispaltiger Abschnitt: Fließtext links, Steckbrief rechts. Damit
   steht die Vita gleich oben neben dem Einstieg statt weit unten am
   Seitenende. Unter 60rem wird gestapelt — auf dem Telefon
   nebeneinander wäre beides unlesbar. */
.zweispalt {
  display: grid; align-items: start;
  gap: var(--raum-6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.zweispalt > * { min-width: 0; }

/* Startseite: die Lesespalte behält GENAU ihre Breite, der bisher leere
   Rest der Bahn trägt den Leitsatz. Vorher stand der Satz in einem
   eigenen Band darunter — das kostete einen ganzen Bildlauf, bevor die
   Rechtsakte kamen (Votum 09.08.). Steht bewusst vor dem Umbruchpunkt
   unten, damit die Stapelung bei 60rem greift. */
.zweispalt--lesespalte {
  grid-template-columns: minmax(0, var(--breite-text)) minmax(0, 1fr);
}

/* Zitattafel — der Leitsatz als Fläche neben dem Text, nicht als Band.
   Sie läuft über die volle Höhe der Textspalte, damit die rechte Seite
   eine Fläche ist und nicht eine kleine Kachel mit viel Weiß darunter. */
.zitattafel {
  background: var(--flaeche-warm);
  border-radius: var(--radius);
  padding: var(--raum-6);
  align-self: stretch;
  display: flex; align-items: center;
}
/* In der schmalen Spalte ist der volle Leitsatzgrad zu groß: eine Stufe
   kleiner, damit „wenn man es teilt." auf einer Zeile bleibt. */
.zitattafel .leitsatz { font-size: clamp(1.25rem, 1rem + .9vw, 1.875rem); }

/* Kachel: flächig gefüllt statt umrandet. Ein dünner Rahmen wirkt
   beliebig; die Fläche selbst trägt den Block. Seit dem Votum 09.08.
   steht dort nur noch der Werdegang — die Kachel „Erfahrungen und
   Fähigkeiten“ ist raus, die Spalte war zu voll. */
.kachel { border-radius: var(--radius); padding: var(--raum-5) var(--raum-6); }
.kachel + .kachel { margin-top: var(--raum-3); }
.kachel--warm { background: var(--flaeche-warm); }
.kachel h2, .kachel h3 { font-size: var(--schrift-h3); margin-bottom: var(--raum-4); }

/* Die Liste sitzt zwischen zwei Fehlern (beide am 09.08. gesehen): im
   alten Kleingrad (.875rem/1.45) las sie sich als andere Schrift, im
   vollen Lesegrad mit 1.65 wurde sie ein aufgeblähter Block — die
   Einträge brechen in der halben Bahn ohnehin zweizeilig um.
   Deshalb: 1rem — dieselbe Anmutung, eine Spur ruhiger —, enge Zeilen
   innerhalb eines Eintrags und ein deutlicher Abstand ZWISCHEN den
   Einträgen. So liest sich eine zweizeilige Station als eine Zeile. */
.kachel ul { padding-left: 1.1em; max-width: none;
             font-size: 1rem; line-height: 1.35; }
.kachel li::marker { color: var(--akzent); }
.kachel li + li { margin-top: var(--raum-3); }

@media (max-width: 60rem) {
  .zweispalt { grid-template-columns: 1fr; gap: var(--raum-6); }
}

/* Breite Inhalte scrollen in sich, nie die Seite */
.tabelle-huelle { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--schrift-klein); }
th, td { text-align: left; padding: var(--raum-3) var(--raum-4); border-bottom: 1px solid var(--linie); }
th { font-weight: 600; color: var(--ton-marke); }

/* ---------- 7. Fußzeile ------------------------------------- */

.fusszeile {
  background: var(--ton-marke); color: rgba(255,255,255,.75);
  padding-block: var(--raum-7); margin-top: var(--raum-9);
  font-size: var(--schrift-klein);
}
.fusszeile a { color: #fff; text-decoration: none; }
/* Hover bleibt weiß — Kupfer-hell käme auf Markenbraun nur auf 3,1:1 */
.fusszeile a:hover { text-decoration: underline; }
.fusszeile ul { list-style: none; padding: 0; display: flex; gap: var(--raum-5); flex-wrap: wrap; max-width: none; }
.fusszeile__reihe { display: flex; justify-content: space-between; gap: var(--raum-5); flex-wrap: wrap; }

/* ---------- 8. Mobilgeräte zuerst gedacht ------------------- */

@media (max-width: 48rem) {
  :root { --kopf-hoehe: clamp(15rem, 34vh, 19rem); --raum-9: 3.5rem; }
  .kopfzeile > .bahn { min-height: 3.75rem; }

  .menue > summary { display: block; }
  .menue > .navi {
    position: absolute; right: 0; top: calc(100% + var(--raum-3));
    background: var(--flaeche); border: 1px solid var(--linie);
    border-radius: var(--radius); padding: var(--raum-3) var(--raum-5);
    box-shadow: 0 8px 28px rgba(35,32,30,.14);
    min-width: 13rem;
    /* Mit Unternavigation sind es zwölf Einträge — auf niedrigen
       Fenstern scrollt das Paneel in sich, statt abgeschnitten zu werden. */
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
  }
  .menue > .navi ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menue > .navi a {
    padding: var(--raum-3) 0; font-size: var(--schrift-basis);
    border-bottom: 1px solid var(--linie);
  }
  .menue > .navi li:last-child a { border-bottom: 0; }
  .menue > .navi a:hover,
  .menue > .navi a[aria-current="page"] { border-bottom-color: var(--linie); color: var(--akzent); }

  /* Unternavigation im mobilen Paneel: kein schwebendes Fenster,
     sondern eingerückt unter dem Elternpunkt, immer sichtbar. */
  .menue > .navi .sub-menu {
    display: block; position: static; transform: none;
    border: 0; border-radius: 0; box-shadow: none;
    min-width: 0; padding: 0 0 0 var(--raum-4);
  }
  .menue > .navi .sub-menu a { border-bottom: 1px solid var(--linie); }
  .menue > .navi .sub-menu li:last-child > a { border-bottom: 0; }

  .kopf { padding-block: var(--raum-7) var(--raum-6); }

  /* Kopfzeile ist mobil 3.75rem — Anker und Navigator-Höhe folgen ihr */
  html { scroll-padding-top: 4.75rem; }
  .navigator-voll {
    height: calc(100vh - 3.75rem);
    height: calc(100dvh - 3.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- 9. WordPress-Betrieb ----------------------------- */

/* Angemeldet: Die Adminleiste liegt oben fest — die klebende
   Kopfzeile rückt darunter, statt sich mit ihr zu überlagern. */
.admin-bar .kopfzeile { top: var(--wp-admin--admin-bar--height, 32px); }

/* Von WordPress erzeugte, nur für Vorlesesoftware bestimmte Texte
   (z. B. die Überschrift der Blätter-Navigation) */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Metazeile eines Beitrags: Datum, Themenschild */
.beitrag-meta { color: var(--text-leise); font-size: var(--schrift-klein); }

/* ---------- Themenleiste über der Beitragsliste -------------
   Zweiter Zugang neben der Chronologie (Votum 09.08.). Bewusst ohne
   jedes Skript: jedes Schild ist ein Link auf dieselbe Übersicht mit
   angehängtem ?thema=… — ein gewöhnlicher Seitenaufruf. Erscheint erst
   ab vier belegten Themen, siehe MH_THEMEN_SCHWELLE. */
/* Volle Bahnbreite, NICHT auf die 54rem der Beitragsliste gedeckelt:
   Bei vierzehn Schildern kostete der Deckel zwei zusätzliche Zeilen,
   und die Leiste schob die Beiträge aus dem Bild (Befund 09.08.). */
.themenleiste { margin-bottom: var(--raum-6); }
.themenleiste__zeile {
  font-weight: 600; font-size: .75rem; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-leise); margin-bottom: var(--raum-3);
}
/* max-width: none wie bei .navi ul — die Grundregel `p, ul, ol` deckelt
   jede Liste auf die Lesespalte (40rem). Für eine waagerechte
   Schilderleiste ist das falsch: Sie lief dadurch über fünf Zeilen,
   obwohl die Bahn doppelt so breit ist (Befund 09.08.). */
.themenleiste__schilder {
  display: flex; flex-wrap: wrap; gap: var(--raum-2);
  list-style: none; padding: 0; margin: 0; max-width: none;
}
.schild {
  display: inline-block; text-decoration: none;
  font-size: var(--schrift-klein); line-height: 1.2;
  padding: .4rem .7rem;
  border: 1px solid var(--linie); border-radius: 999px;
  background: var(--flaeche); color: var(--ton-marke);
}
.schild:hover { border-color: var(--ton-kupfer-hell); background: var(--flaeche-warm); color: var(--akzent); }
.schild__zahl { color: var(--text-leise); font-variant-numeric: tabular-nums; margin-left: .35rem; }
/* Aktives Schild trägt den Filterzustand allein — es gibt bewusst
   keinen zusätzlichen Erläuterungskasten (Votum 09.08.). Zurück zur
   vollen Liste führt das Schild „Alle". */
.schild--aktiv, .schild--aktiv:hover {
  background: var(--akzent); border-color: var(--akzent); color: #fff;
}
.schild--aktiv .schild__zahl { color: rgba(255, 255, 255, .85); }
/* Kleine Ausführung in der Metazeile eines Listeneintrags und in der
   Infospalte des Beitrags. */
.schild--mini {
  padding: .15rem .5rem; font-size: .78rem;
  border-color: var(--ton-kupfer-hell); background: var(--flaeche-warm);
}

/* Blog-Übersicht: klassische chronologische Liste. Ein Eintrag =
   Datum, Titel, Kurzauszug, Weiterlesen; Linien trennen die Einträge. */
.blogliste { max-width: 54rem; }   /* breiter als die Lesespalte — Platz für die Bildspalte (Votum 08.08.) */
.blogeintrag + .blogeintrag {
  margin-top: var(--raum-6);
  padding-top: var(--raum-6);
  border-top: 1px solid var(--linie);
}
.blogeintrag__titel {
  font-size: var(--schrift-h3);
  margin-top: var(--raum-1);
}
.blogeintrag__titel a { color: var(--ton-marke); text-decoration: none; }
.blogeintrag__titel a:hover { color: var(--akzent); }
.blogeintrag__auszug { color: var(--text-leise); margin-top: var(--raum-2); }
.blogeintrag p + p { margin-top: var(--raum-2); }

/* Vorschaubild je Eintrag (Votum 08.08., zweite Fassung): feste LINKE
   Bildspalte, alle Vorschaubilder im selben Format (leicht breitbild,
   4:3) — zugeschnitten statt gestaucht, das volle Bild steht im
   Beitrag. Einträge ohne Bild bekommen eine stille Farbkachel, bis
   ein Titelbild nacherfasst ist — das Raster bleibt harmonisch. */
.blogeintrag {
  display: grid;
  grid-template-columns: 13.5rem 1fr;
  gap: var(--raum-4);
  align-items: start;
}
.blogeintrag__bildlink { display: block; }
.blogeintrag__bild {
  width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; display: block;
  /* Ausschnitt am OBEREN Rand statt mittig: Dokument-Deckblätter sind
     A4-Hochformat mit Titel oben und viel Weißraum darunter — mittig
     zugeschnitten zeigte die Kachel genau diesen leeren Bauch und wirkte
     unbebildert (Befund Heidi 08.08.2026). */
  object-position: top center;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche-warm);
}
.blogeintrag__bild--leer {
  background:
    linear-gradient(135deg, var(--flaeche-warm) 0%, rgba(140, 90, 62, .12) 100%);
}
@media (max-width: 40rem) {
  .blogeintrag { grid-template-columns: 1fr; }
  .blogeintrag__bildlink { max-width: 22rem; }
}

/* Einzelbeitrag (Votum 08.08.): flacher Kopf, H1 im Text, zweispaltig —
   zwei Drittel Inhalt, ein Drittel Infospalte (Herkunft, Material). */
.kopf--flach {
  min-height: 0;
  padding-block: var(--raum-6) var(--raum-5);
}
.kopf--flach .kopf__rubrik { margin-bottom: 0; }
.beitrag-spalten {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
  gap: var(--raum-7);
  align-items: start;
}
.beitrag-titel { margin-bottom: var(--raum-2); }
.beitrag-untertitel {
  color: var(--text-leise);
  font-size: var(--schrift-gross, 1.125rem);
  margin-bottom: var(--raum-4);
}
.beitrag-info {
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche-warm);
  padding: var(--raum-4);
  position: sticky; top: var(--raum-7);
}
.beitrag-info__titel {
  font-size: var(--schrift-klein);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: var(--raum-2);
}
.beitrag-info__titel + .beitrag-info__titel,
.beitrag-info__zeile + .beitrag-info__titel { margin-top: var(--raum-4); }
.beitrag-info__zeile { margin-top: var(--raum-1); }
.beitrag-info__liste { list-style: none; padding: 0; margin: 0; }
.beitrag-info__liste li + li { margin-top: var(--raum-2); }
@media (max-width: 52rem) {
  .beitrag-spalten { grid-template-columns: 1fr; }
  .beitrag-info { position: static; }
}

/* Blätter-Navigation unter den Blog-Übersichten */
.pagination { margin-top: var(--raum-6); font-size: var(--schrift-klein); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.pagination .page-numbers {
  display: inline-block; padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--linie); border-radius: var(--radius);
  text-decoration: none;
}
.pagination .page-numbers.current {
  background: var(--ton-marke); border-color: var(--ton-marke); color: #fff;
}
.pagination .page-numbers.dots { border: 0; }

/* Bildunterschriften aus dem Blockeditor */
figcaption {
  font-size: var(--schrift-klein); color: var(--text-leise);
  margin-top: var(--raum-2);
}

/* Navigator-Einbindung (iframe im wp:html-Block, Klasse navigator-voll).
   Ein iframe kann die Höhe seines Inhalts nicht messen — die Höhe kommt
   deshalb vom Theme. Unter jedem Navigator rendert das Theme selbst den
   Direktlink „im eigenen Tab öffnen" (functions.php, Votum 10.08.2026:
   Ausweichweg für Zoom-/Screenreader-Nutzung und den Fußzeilen-Zugang
   auf dem Telefon; hebt das Streich-Votum vom 07.08. auf). Der frühere
   gerahmte Kasten (.navigator-rahmen) ist ersatzlos entfallen. */

/* Nahtlose Einbettung (Votum 07.08.): randlos und in voller Breite —
   der Navigator wirkt als Teil der Seite, nicht als Kasten. Höhe =
   Fenster minus klebende Kopfzeile, so füllt er beim Herunterscrollen
   den Bildschirm. Technisch bleibt es eine eigenständige Datei im
   eigenen Rahmen (iframe) — nur ohne sichtbare Grenze. */
.navigator-voll {
  display: block; width: 100%;
  height: calc(100vh - 4.5rem);
  height: calc(100dvh - 4.5rem);
  border: 0;
  /* Luft zwischen Kopfbereich und Navigator — angebunden, nicht verklebt */
  margin-top: var(--raum-6);
}

/* Navigator-Seiten ohne Theme-Kopfbereich (mh_traegt_navigator):
   der Navigator schließt direkt an die Menüleiste an — der Abstand
   hätte sonst einen Streifen ohne Inhalt über dem Kopf-Band. */
.seite-navigator .navigator-voll { margin-top: 0; }

/* Der vom Theme gerenderte Direktlink unter der Einbettung —
   unauffällige Zeile in der Lesespalte, kein Knopf. */
.navigator-direktlink {
  width: min(100% - 2.5rem, var(--breite-inhalt));
  margin: var(--raum-3) auto 0;
  font-size: var(--schrift-klein);
}

/* ---------- 10. Downloadliste (Hilfsmittel) ------------------
   Ein Eintrag = Vorschau, Titel, Beschreibung, Dateiangaben,
   Holen-Link. Bewusst dieselbe Sprache wie die Blogliste: feste
   linke Bildspalte im 4:3-Format, Ausschnitt am oberen Rand (die
   Deckblätter tragen ihren Titel oben), Linien statt Kästen. */
.downloads { list-style: none; padding: 0; margin: 0; max-width: 54rem; }
.download + .download {
  margin-top: var(--raum-6);
  padding-top: var(--raum-6);
  border-top: 1px solid var(--linie);
}
.download {
  display: grid;
  grid-template-columns: 13.5rem 1fr;
  gap: var(--raum-5);
  align-items: start;
}
.download__blatt { display: block; }
.download__bild {
  width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: top center;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche-warm);
}
/* Schaubilder sind quer und leben vom Ganzen — nicht anschneiden */
.download__bild--ganz { object-fit: contain; background: var(--flaeche-warm); }
.download__titel { font-size: var(--schrift-h3); color: var(--ton-marke); margin: 0; }
.download__text { color: var(--text-leise); margin-top: var(--raum-2); }
.download__angaben {
  font-size: var(--schrift-klein); color: var(--text-leise);
  margin-top: var(--raum-3);
  letter-spacing: .06em; text-transform: uppercase;
}
.download__holen {
  display: inline-block; margin-top: var(--raum-3);
  font-size: var(--schrift-klein); font-weight: 600; text-decoration: none;
}
.download__holen::after { content: " ↓"; }
@media (max-width: 40rem) {
  .download { grid-template-columns: 1fr; }
  .download__blatt { max-width: 22rem; }
}

/* ---------- 11. Produkttabellen ------------------------------
   Digitale Produkte: Bezeichnung, Preis, Bestellweg, ggf. Vorschau.
   Die Tabelle scrollt in ihrer Hülle, nie die Seite. */
.produkt-tabelle { max-width: 54rem; }
.produkt-tabelle table { margin-top: var(--raum-4); }
.produkt-tabelle td { vertical-align: top; }
.produkt-tabelle td:first-child { color: var(--text); }
.preis { white-space: nowrap; }
/* Preisspalte nicht umbrechen — „2.900 € zzgl. 19 % MwSt." gehört in eine Zeile */
.produkt-tabelle td:nth-child(2) { white-space: nowrap; }
.bestellen { font-weight: 600; text-decoration: none; white-space: nowrap; }
.bestellen::after { content: " →"; }
.vorschau-link { text-decoration: none; white-space: nowrap; }
.vorschau-link::after { content: " ↓"; }
.leer { color: var(--text-leise); }
.hinweis { font-size: var(--schrift-klein); color: var(--text-leise); margin-top: var(--raum-4); }