/* ====================================================================
   UNTERSEITEN — Optik von Programm- UND About-Unterseite.
   Herausgeloest aus site.css am 26.07.2026 (Teilprojekt A2): Diese Datei
   wird vorne per wp_enqueue_style geladen UND hinten per add_editor_style
   in den Block-Editor gehaengt. Eine Quelle, zwei Orte — sonst laufen
   Vorschau und Frontend auseinander.
   site.css als Ganzes geht im Editor NICHT: .reader ist dort
   position:fixed; visibility:hidden, der Editor waere leer.
   ==================================================================== */

/* exemplary template for program/exhibition subpages.
   Max scope per element (agreed with client): teaser, ≤15-image slider,
   1 YouTube slot, ~7,000-character detail text, 3 links, 3 emails,
   3 social icon-links, ≤4 partner logos. → WP: one CPT entry, one ACF
   field per block; this long-form page scrolls (unlike the fit-to-screen
   Mission/History readers), so the text runs in a single measure with a
   sticky fact rail instead of CSS columns. */

/* Design-Variablen. site.css setzt sie auf :root, aber der Editor laedt
   site.css nicht — und Editor-Styles, deren Selektor `.editor-styles-wrapper`
   oder `body` ist, kommen im iframe nicht an (nachgemessen am 26.07.2026:
   getComputedStyle(body).getPropertyValue('--acc') lieferte ""). Regeln mit
   einer normalen Klasse funktionieren dagegen. Deshalb haengen die Variablen
   hier an den Wurzeln der Unterseite; die Kinder erben sie.
   Werte wortgleich aus site.css:12-16. Im Frontend aendert das nichts, dort
   stehen dieselben Werte schon auf :root. */
/* .is-root-container steht mit in der Liste, damit die Variablen auch am
   EDITOR-ROOT existieren (nicht nur in den prog-*-Containern): die
   Ueberschriften-Paritaetsregel weiter unten nutzt var(--sans) — ohne
   Verankerung hier kippte ihr font-Shorthand im Canvas komplett
   (Review-Fund 03.08.2026: Root-h4 blieben 16px/400). */
.reader--program,
.prog-head,
.prog-slider,
.prog-cols,
.prog-partners,
.editor-styles-wrapper .is-root-container {
  --bg: #f3f2ee;
  --ink: #26262a;
  --mut: #9a9a9e;
  --acc: #738ec8;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --ease: cubic-bezier(0.55, 0, 0.1, 1);
}

/* the clickable program row in the Programs & Exhibitions index */
.exrow__media[data-open] { cursor: pointer; }
.exrow__open {
  background: none; border: 0; padding: 0 0 2px; cursor: pointer; text-align: left;
  font: inherit; color: inherit; letter-spacing: inherit;
  border-bottom: 2px solid transparent; transition: border-color 0.3s var(--ease);
}
.exrow__open:hover { border-color: var(--acc); }

/* Der Selektor traegt .prog-head mit, damit er im Editor die generische Regel
   `.editor-styles-wrapper p { color: #3c3c40 }` (0,1,1) schlaegt — sonst steht
   die Datumszeile dort grau statt blau. Im Frontend aendert die zweite Klasse
   nichts, der Kontext ist derselbe. */
.prog-head .prog-dates { font: 500 clamp(18px, 1.5vw, 24px) var(--sans); letter-spacing: -0.01em; color: var(--acc); margin: 0 0 clamp(14px, 2vh, 22px); }
/* Der Teaser laeuft ueber die VOLLE Kopfbreite (Benni 02.08.: "noch immer
   nicht volle breite") — das fruehere Mass (52ch, dann 64ch) und das
   `text-wrap: balance` von damals sind raus: balance haelt die Zeilen gleich
   kurz und saehe auch ohne Mass nie vollbreit aus. Normaler Umbruch. */
.prog-teaser {
  font-size: clamp(20px, 1.65vw, 26px); line-height: 1.5; font-weight: 500;
  color: #3c3c40;
}

/* slider: filmstrip at natural aspect (no cropping), scroll-snap + arrows */
.prog-slider { margin: clamp(30px, 5vh, 56px) 0 0; }
.prog-track {
  display: flex; gap: clamp(10px, 1.2vw, 18px);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.prog-track::-webkit-scrollbar { display: none; }
.prog-slide { flex: 0 0 auto; height: min(58vh, 620px); margin: 0; scroll-snap-align: start; background: #e8e6df; }
/* Der Selektor traegt bewusst .prog-track mit: Im Editor-iframe setzt
   WordPress `.editor-styles-wrapper figure img { height: auto }` — das ist
   (0,1,2) und schlaegt ein blosses `.prog-slide img` (0,1,1). Mit der zweiten
   Klasse sind wir bei (0,2,1) und gewinnen ohne !important. max-width faellt
   aus demselben Grund weg; die Spur scrollt horizontal, ein Deckel waere auch
   im Frontend unnoetig. Ohne beides stehen die Dias als leere Kaesten da
   (nachgemessen am 26.07.: 300x200 statt 792x528). */
.prog-track .prog-slide img { width: auto; height: 100%; max-width: none; }
.prog-slider__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-top: 12px; }
/* .prog-credit war bis 26.07.2026 selbst der Credit-Text; jetzt ist es die
   Huelle fuer Unterschrift UND Credit des aktuellen Dias (update() haelt
   beide in app.js aktuell, siehe index()). */
.prog-credit { display: flex; flex-direction: column; gap: 3px; }
/* Wie die Bildunterschriften der Unterseiten (site.css, Benni 02.08.):
   Grundschrift, dunkel, klein — kein Mono, kein Grau, keine Versalien. */
.prog-slide-caption { font: 500 12px/1.5 var(--sans); letter-spacing: 0.01em; color: #343434; }
.prog-slide-credit { font: 500 12px/1.5 var(--sans); letter-spacing: 0.01em; color: #343434; }
/* Die Unterschrift ist redaktioneller Text, der Credit eine Quellenangabe —
   .bh-credits-hidden blendet deshalb nur den Credit aus. */
.bh-credits-hidden .prog-slide-credit { display: none; }
.prog-slider__ctl { display: inline-flex; align-items: baseline; gap: 18px; }
.prog-count { font: 400 12px var(--mono); letter-spacing: 0.12em; color: var(--mut); min-width: 6ch; text-align: right; }
.prog-arrow {
  background: none; border: 0; cursor: pointer; padding: 0 2px; line-height: 1;
  font: 500 clamp(20px, 1.6vw, 26px) var(--sans); color: var(--ink); transition: color 0.3s var(--ease);
}
.prog-arrow:hover { color: var(--acc); }

/* Faktenleiste + Fliesstext. Seit A2 rendert core/columns diese Struktur,
   und core/columns bringt sein eigenes Flex-Layout samt generierter
   .wp-container-core-columns-is-layout-*-Regeln mit. Frueher stand hier ein
   Grid; dagegen anzuschreiben waere ein Kampf mit unklarem Ausgang gewesen.
   Die Doppelklassen-Selektoren unten gewinnen zuverlaessig gegen die
   Layout-Regeln, die dieselbe Spezifitaet haben. */
.prog-cols {
  /* Das Gap wird als Variable gebraucht: die Breite der Faktenleiste
     rechnet den Raum NACH dem Gap aus, genau wie es das fruehere
     CSS-Grid getan hat. */
  --prog-gap: clamp(30px, 4.5vw, 90px);
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--prog-gap);
  margin-top: clamp(36px, 6vh, 64px);
}
/* core/columns bringt eigene Regeln mit, die staerker sind als sie aussehen.
   Nachgemessen am 26.07. in wp-includes/blocks/columns/style.min.css:

     .wp-block-columns { align-items: normal !important }
     @media (min-width:782px) { .wp-block-columns { flex-wrap: nowrap !important } }
     @media (min-width:782px) {
       .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column
         { flex-basis: 0; flex-grow: 1 }
     }

   Das erste ueberschreibt align-items — und eine gestreckte Spalte macht
   position:sticky wirkungslos, weil sie ohnehin schon volle Hoehe hat.
   Das dritte hat Spezifitaet (0,3,0) und macht beide Spalten gleich breit.
   Deshalb hier (0,2,0) mit !important bzw. (0,4,0) weiter unten. */
.prog-cols.wp-block-columns {
  display: flex;
  align-items: flex-start !important;
  gap: var(--prog-gap);
}

/* sticky offset clears the fixed nav (same clamp as the reader's top padding) */
/* Breite exakt wie das fruehere minmax(210px, 0.42fr) neben 1fr:
   Der Anteil ist 0.42 / 1.42 = 0.2958 des Raums NACH dem Gap, mit 210px
   als Untergrenze. Ein glatter Prozentwert waere hier daneben — 32 % der
   vollen Breite machen die Leiste bei mittleren Viewports rund 40px zu
   breit. */
.prog-aside {
  flex: 0 0 max(210px, calc((100% - var(--prog-gap)) * 0.2958));
  position: sticky;
  top: clamp(92px, 12vh, 132px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.6vh, 40px);
}
/* (0,4,0) — muss die (0,3,0)-Regel von core schlagen, siehe oben. */
.prog-cols.wp-block-columns > .prog-aside.wp-block-column {
  flex-basis: max(210px, calc((100% - var(--prog-gap)) * 0.2958));
  flex-grow: 0;
}

.prog-body {
  flex: 1 1 0;
  min-width: 0;
}
.prog-cols.wp-block-columns > .prog-body.wp-block-column {
  flex-basis: 0;
  flex-grow: 1;
  min-width: 0;
}

/* Der eigene Umbruch bei 900px greift frueher als der von core/columns bei
   781px. Zwischen 782 und 900px steht dem aber core mit
   `flex-wrap: nowrap !important` im Weg: ohne Umbruch koennen die Spalten
   nicht untereinander rutschen, egal welche flex-basis sie haben — sie wuerden
   nur nebeneinander schrumpfen. Deshalb hier zuruecknehmen. */
@media (max-width: 900px) {
  .prog-cols.wp-block-columns {
    flex-wrap: wrap !important;
  }
  .prog-cols > .prog-aside,
  .prog-cols > .prog-body,
  .prog-cols.wp-block-columns > .prog-aside.wp-block-column,
  .prog-cols.wp-block-columns > .prog-body.wp-block-column {
    flex-basis: 100%;
  }
  .prog-aside {
    position: static;
    order: 2;
  }
}

.prog-meta__label { font: 400 11px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mut); margin-bottom: 8px; }
.prog-meta p { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; font-weight: 500; color: var(--ink); }
.prog-meta a {
  display: block; width: fit-content; padding: 2px 0;
  font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease);
}
.prog-meta a:hover { border-color: var(--acc); }
.prog-social { display: flex; gap: 14px; }
.prog-social a { color: var(--ink); transition: color 0.3s var(--ease); }
.prog-social a:hover { color: var(--acc); }
.prog-social svg { width: 20px; height: 20px; display: block; }

/* KEINE eigene Zeilenlaengen-Bremse mehr am Absatz. Hier stand bis zum
   01.08.2026 `max-width: var(--prog-mass)` (~605–718px, der Nachfolger von
   68ch). Seit der Text ohnehin in der Spalte von core/columns steht, war das
   doppelt gemoppelt — und Benno fiel zu Recht auf, dass der Text seine
   Spalte nie fuellte und rechtsbuendiger Satz nicht an der Spaltenkante
   endete. Die Spalte selbst ist jetzt das Mass. */

/* Die Grundschrift kommt aus derselben Stufe, die im Editor "Regular" heisst.
   Vorher stand hier ein eigener clamp-Wert: der Absatz ohne Auswahl war damit
   16px und lag zwischen den Stufen — "S" machte ihn kleiner, "M" groesser,
   und keine Stufe war die, die er schon hatte. Die Stufen selbst tragen
   !important, eine Auswahl von Benno sticht diese Regel also immer. */
.prog-body p {
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.6; font-weight: 400; color: #3c3c40;
  margin: 0 0 1.25em;
}
/* Der Einstiegsabsatz ist bewusst groesser — ein gestalterischer Akzent wie
   der Teaser darueber, keine der vier Stufen. Waehlt Benno fuer ihn eine
   Groesse, gewinnt sie (!important an der Stufen-Regel). DIREKTES Kind der
   Spalte (>), sonst traefe die Regel auch den ersten Absatz in jedem Panel
   und Zitat. Die 500 stehen hier ausdruecklich: der Fliesstext laeuft seit
   02.08. auf 400 (Rita-Referenz), der Akzent behaelt sein Gewicht. */
.prog-body > p:first-child { font-size: clamp(19px, 1.4vw, 24px); line-height: 1.5; font-weight: 500; color: var(--ink); }

/* video slot — a clearly-labelled placeholder until the client provides the link */
.prog-video {
  aspect-ratio: 16 / 9; background: #15151a; color: #f2f1ec;
  margin: clamp(26px, 4vh, 44px) 0 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.prog-video svg { width: 44px; height: 44px; }
.prog-video span { font: 400 11px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: #9b988f; }
/* real YouTube embed variant (WP theme renders this once a link is set) */
.prog-video--embed { display: block; padding: 0; }
.prog-video--embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Leiste mittig zentriert (Benno, 30.07.2026: "sitzt irgendwie links unten") */
.prog-partners { margin-top: clamp(40px, 7vh, 72px); border-top: 1px solid #d8d6cf; padding-top: clamp(20px, 3vh, 32px); text-align: center; }
.prog-partners__row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(30px, 5vw, 80px); margin-top: 14px; }
/* Groesse je Zeile (s/m/l, bh_render_partners) — m ist der alte Standardwert.
   `prog-partner--tall` war die fruehere Sonderklasse fuer die BHA-Marke und
   bleibt als Alias von `l` fuer gespeicherte Inhalte gueltig. */
/* max-width ist Pflicht: Die Hoehenangabe hebt die globale
   `img { width: 100% }`-Regel auf, ein breites Wortmarken-Logo (8:1) waere
   auf einem 360px-Handy sonst 320px breit und schoebe die Unterseite
   seitwaerts (Review-Fund 03.08.2026; haengt allein an Bennos Uploads). */
.prog-partners__row img { width: auto; max-width: 100%; object-fit: contain; height: clamp(40px, 4.5vw, 60px); }
.prog-partners__row img.prog-partner--s { height: clamp(26px, 2.8vw, 38px); }
.prog-partners__row img.prog-partner--l,
.prog-partners__row img.prog-partner--tall { height: clamp(76px, 8vw, 108px); }
.prog-partner-word { font: 500 clamp(17px, 1.4vw, 23px) var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.prog-partner-word.prog-partner--s { font-size: clamp(13px, 1vw, 16px); }
.prog-partner-word.prog-partner--l { font-size: clamp(22px, 2vw, 32px); }

/* Bloecke im Fliesstext: Abstaende passend zum uebrigen Satz */
.prog-body .wp-block-image,
.prog-body .wp-block-gallery,
.prog-body .wp-block-embed { margin: 1.6em 0; }

.prog-body .wp-block-image img { width: 100%; height: auto; }

/* Freie Eintraege der Faktenleiste sind seit A2 core/heading + core/paragraph
   (statt des frueheren bh_customs-Repeaters) — damit gibt es dort echtes
   RichText samt Link-Knopf. Sie muessen aussehen wie die Beschriftungen der
   festen Bloecke, sonst faellt die Naht sofort auf.

   ZWEI Fallen, beide am 26.07.2026 nachgemessen:

   1. Die Liste deckte nur h2/h3/h4 ab. Wer im Editor "Heading 1" waehlte,
      bekam die Theme-Vorgabe: 34,6px Helvetica, gemischte Schreibung — also
      genau das Gegenteil einer Leisten-Beschriftung. h1, h5 und h6 fehlten
      schlicht.

   2. Die Werte hier waren nicht die, die in der Leiste tatsaechlich
      erscheinen. `.prog-meta__label` steht zwar auf 11px/400/grau, ist in der
      Leiste aber ein <p> — und `.prog-aside p` (0,1,1) sticht die Klasse
      (0,1,0). Real gesetzt werden dort 18px, Strichstaerke 500 und Ink.
      (Dieselbe Klasse unter .prog-partners liegt ausserhalb der Leiste und
      bleibt bei 11px/grau — die Klasse sieht also an zwei Orten verschieden
      aus. Wer `.prog-meta__label` "geradezieht", aendert die Leiste aller
      Programmseiten; deshalb steht das hier.) */
.prog-aside h1,
.prog-aside h2,
.prog-aside h3,
.prog-aside h4,
.prog-aside h5,
.prog-aside h6 {
  font-family: var(--mono);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 8px;
}
.prog-aside p {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px;
}
.prog-aside a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.prog-aside a:hover {
  border-color: var(--acc);
}

/* ====================================================================
   FLIESSTEXT DER ABOUT-UNTERSEITEN (Block bh/flowtext)

   Hierher verschoben aus site.css am 26.07.2026. site.css laedt der
   Block-Editor nicht; solange die Regeln dort standen, zeigte der Editor
   die Spalten des Blocks gar nicht, und editor-about.css legte ersatzweise
   Spalten ueber den ganzen Wurzel-Container — auch ueber Bilder.
   Diese Datei haengt vorne wie hinten drin, damit es EINE Fassung gibt.
   ==================================================================== */
.bh-flow { column-gap: clamp(30px, 3.2vw, 60px); }

/* Galerien benutzen DENSELBEN Spaltenabstand wie der mehrspaltige
   Fliesstext. Benno setzt Bildreihen (Gallery) direkt ueber
   Textspalten (bh/flowtext) — mit Cores eigenem Galerie-Gap (24px)
   standen die Spaltenkanten des Texts nie auf einer Linie mit den
   Bildkanten darueber (01.08.2026). Core rechnet die Kachelbreiten aus
   der Gap-Variablen, deshalb reicht es, sie zu ueberschreiben. */
.reader__body .wp-block-gallery.has-nested-images,
.prog-body .wp-block-gallery.has-nested-images,
.is-root-container .wp-block-gallery.has-nested-images {
  --wp--style--unstable-gallery-gap: clamp(30px, 3.2vw, 60px);
  gap: clamp(30px, 3.2vw, 60px);
}
.bh-flow--1 { columns: 1; }
.bh-flow--2 { columns: 2; }
.bh-flow--3 { columns: 3; }

/* Grundschrift der About-Unterseiten = EXAKT dieselbe wie .prog-body p
   (Benni 02.08.: "diese schriften, staerke, zeilenabstand usw muessen gleich
   sein"). Bis dahin lief About auf der Stufe "Small" (14px/500) — das war
   12,5% kleiner UND fetter als der Exhibition-Fliesstext und fiel in den
   Spalten sofort auf. Wer hier eine Zahl anfasst, aendert sie bei
   .prog-body p (oben) und in editor-about.css MIT. */
.bh-flow p, .reader__body p {
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.6; font-weight: 400; color: #3c3c40;
  margin: 0 0 1.25em; break-inside: avoid;
}
.bh-flow p:last-child, .reader__body p:last-child { margin-bottom: 0; }

/* Listen hatten NIE eine eigene Regel und fielen auf die body-Erbwerte
   zurueck (16px/400/ink, UA-Einrueckung von `* { padding: 0 }` geschluckt):
   im About-Reader groesser und in anderer Farbe als die Absaetze daneben,
   die Aufzaehlungszeichen hingen ausserhalb (Audit 02.08.). Gleiche Werte
   wie die Absaetze. .prog-aside bleibt draussen — die Faktenleiste hat ihre
   eigene Typografie. */
.bh-flow ul, .bh-flow ol, .reader__body ul, .reader__body ol,
.prog-body ul, .prog-body ol { padding-left: 1.2em; margin: 0 0 1.25em; }
.bh-flow li, .reader__body li, .prog-body li {
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.6; font-weight: 400; color: #3c3c40;
}

/* Spalten fallen mit der Breite zusammen — drei Spalten auf einem schmalen
   Fenster waeren unlesbar. */
@media (max-width: 1180px) { .bh-flow--3 { columns: 2; } }
@media (max-width: 720px)  { .bh-flow--2, .bh-flow--3 { columns: 1; } }

/* ====================================================================
   Tafeln: bh/newsitem UND core/quote in den Unterseiten.

   Benno hat sich Kaesten bis zum 31.07.2026 aus core/quote gebaut (News:
   h3 + Zitat je Eintrag; Restoration: Zitat im Zitat als Kapitel-Tafel).
   Diese Optik macht daraus eine bewusste Gestaltung: flacher, leicht
   abgesetzter Kasten, kein Zitatstrich. Der neue Block bh/newsitem nutzt
   dieselben Regeln — Bestand und Neues sehen gleich aus.
   Diese Datei laedt Frontend UND Editor (siehe Kopf) — Parität inklusive.
   ==================================================================== */
.bh-panel,
.reader__body .wp-block-quote,
.prog-body .wp-block-quote,
.is-root-container .wp-block-quote {
  background: #eceae4;
  border: 0;
  margin: 1.6em 0; /* wie Bilder im Fluss — Tafeln kleben sonst aneinander */
  padding: clamp(18px, 2.4vh, 28px) clamp(18px, 2vw, 30px);
}
/* Zwischenueberschriften im Fliesstext: EINE feste Stufe, egal wo sie
   stehen und welche Ebene Benno waehlt — ALLE sechs, nicht nur h2–h4:
   h1/h5/h6 fielen sonst auf UA-Defaults (2em fett bzw. winzig), dieselbe
   Falle wie am 26.07. in der Faktenleiste. Die h2 MUSS hier stehen:
   `.reader__inner h2` ist der grosse Seitentitel (34–64px) und traefe
   sonst auch jede Inhalts-h2. */
.bh-panel__title,
.reader__body h1, .reader__body h2, .reader__body h3, .reader__body h4, .reader__body h5, .reader__body h6,
.bh-flow h1, .bh-flow h2, .bh-flow h3, .bh-flow h4, .bh-flow h5, .bh-flow h6,
.prog-body h1, .prog-body h2, .prog-body h3, .prog-body h4, .prog-body h5, .prog-body h6,
.editor-styles-wrapper .is-root-container h1, .editor-styles-wrapper .is-root-container h2,
.editor-styles-wrapper .is-root-container h3, .editor-styles-wrapper .is-root-container h4,
.editor-styles-wrapper .is-root-container h5, .editor-styles-wrapper .is-root-container h6 {
  /* Die .is-root-container-Variante ist der EDITOR-Spiegel (wie bei den
     Quote-/Galerie-/Spalten-Regeln in dieser Datei): Im Canvas heisst der
     Behaelter nicht .reader__body — ohne sie zeigte der About-Editor
     Root-Ueberschriften mit UA- bzw. editor-base-Groessen (h2 doppelt so
     gross wie live, h4 fett 16px; gemessen 03.08.2026). Der Wrapper-Prefix
     hebt die Spezifitaet ueber die h2/h3-Titelspiegel in editor-base.css. */
  font: 500 clamp(17px, 1.5vw, 22px) var(--sans);
  letter-spacing: -0.01em; color: var(--ink);
  line-height: 1.3;
  margin: 1.5em 0 0.6em;
}
.reader__body h1:first-child, .reader__body h2:first-child, .reader__body h3:first-child,
.reader__body h4:first-child, .reader__body h5:first-child, .reader__body h6:first-child,
.bh-flow h1:first-child, .bh-flow h2:first-child, .bh-flow h3:first-child,
.bh-flow h4:first-child, .bh-flow h5:first-child, .bh-flow h6:first-child,
.prog-body h1:first-child, .prog-body h2:first-child, .prog-body h3:first-child,
.prog-body h4:first-child, .prog-body h5:first-child, .prog-body h6:first-child,
.wp-block-quote h1:first-child, .wp-block-quote h2:first-child, .wp-block-quote h3:first-child,
.wp-block-quote h4:first-child, .wp-block-quote h5:first-child, .wp-block-quote h6:first-child { margin-top: 0; }
.bh-panel__title { margin: 0 0 0.55em; }
.bh-panel__text { margin: 0; }
/* Ein Zitat direkt IM Zitat war Bennos Behelf fuer "noch ein Kasten" —
   optisch flachziehen, damit keine Tafel in der Tafel entsteht. Der
   Bestand in der Datenbank bleibt unangetastet. */
.bh-panel .wp-block-quote,
.reader__body .wp-block-quote .wp-block-quote,
.prog-body .wp-block-quote .wp-block-quote,
.is-root-container .wp-block-quote .wp-block-quote {
  background: none;
  padding: 0;
  margin: 0;
}
/* Ueberschrift STEHT bei Bennos News-Muster vor der Tafel — haengt eine h3
   direkt ueber einem Kasten, ruecken beide zusammen, damit sie als ein
   Eintrag lesbar sind. */
.reader__body h3 + .wp-block-quote,
.reader__body h4 + .wp-block-quote { margin-top: 0; }

/* ====================================================================
   bh/panel — Hervorhebungs-Kasten mit echten Bloecken darin.

   Drei Gesichter ueber den Reiter "Styles" (inc/blocks.php): Filled
   (Standard, dieselbe Flaeche wie die Tafeln), Outlined (feine Linie),
   Accent bar (Akzentstrich links, das Blau der vier Balken). Die Schrift
   im Kasten ist bewusst NICHT eigen — Absaetze darin sind gewoehnliche
   core/paragraph und lesen sich exakt wie der uebrige Fliesstext (Bennos
   Punkt vom 01.08.2026 am Press-Kasten: "die Schrift darin ist staerker").
   Diese Datei laedt Frontend UND Editor — Paritaet inklusive.
   ==================================================================== */
.bh-panelbox { margin: 1.6em 0; }
/* Ohne gewaehlten Stil gilt "Filled": Im EDITOR schreibt WordPress die
   is-style-Klasse erst, wenn man im Reiter Styles aktiv waehlt — der
   :not-Zweig deckt genau diesen frischen Zustand ab (im Frontend haengt
   render.php die Klasse ohnehin an). */
.bh-panelbox.is-style-filled,
.bh-panelbox:not([class*="is-style-"]) {
  background: #eceae4;
  padding: clamp(18px, 2.4vh, 28px) clamp(18px, 2vw, 30px);
}
.bh-panelbox.is-style-outlined {
  border: 1px solid rgba(38, 38, 42, 0.45);
  padding: clamp(18px, 2.4vh, 28px) clamp(18px, 2vw, 30px);
}
.bh-panelbox.is-style-accent {
  border-left: 3px solid var(--acc);
  padding: 2px 0 2px clamp(16px, 1.6vw, 26px);
}
.bh-panelbox > :first-child { margin-top: 0; }
.bh-panelbox > :last-child { margin-bottom: 0; }

/* Blocksatz als Absatz-Stil (Gutenberg kennt nur links/mittig/rechts). */
.is-style-bh-justified { text-align: justify; hyphens: auto; }

/* Spalten beginnen und enden buendig: Das ERSTE Element einer Spalte
   verliert seinen oberen, das LETZTE seinen unteren Aussenabstand. Ohne das
   sassen z.B. Bild (margin 1.6em) und Nachbartext nie auf einer Oberkante —
   Bennos Versatz auf der Restoration-Seite (01.08.2026), sowohl bei Bild
   neben Text als auch bei Bildzeile ueber Textzeile. Gilt im Frontend UND
   im Editor (diese Datei laedt beide). */
.reader__body .wp-block-column > :first-child,
.prog-body .wp-block-column > :first-child,
.is-root-container .wp-block-column > :first-child { margin-top: 0; }
.reader__body .wp-block-column > :last-child,
.prog-body .wp-block-column > :last-child,
.is-root-container .wp-block-column > :last-child { margin-bottom: 0; }