/*!
 * THK Verlag — GHOS-Shim Stylesheet (v0.7.11.2)
 *
 * Stylesheet für die aus GruppenhausOS portierten Backend-Komponenten
 * (Mediathek-Welle v0.7.9, Page-Header/Filter-Bar-Partials v0.7.11.1).
 * Mappt die `.ghos-*`-Klassen auf das THK-Designsystem (--thk-tinte,
 * --thk-bordeaux, --thk-papier-warm, --thk-line, etc.).
 *
 * Lädt VOR mediathek.css — mediathek.css ergänzt Mediathek-spezifische
 * Klassen (Karten-Grid, Upload-Liste, Picker-Modal), dieser Shim deckt
 * die generischen UI-Bausteine ab (Buttons, Headers, Filter-Bar, Forms,
 * Empty-States, Badges, Block-Cards).
 *
 * Designprinzip: nicht 1:1 das GHOS-Tannengrün, sondern THK-Papier/Tinte.
 * Die ghos-Klassen sind nur die Namen — die Optik passt zur Marke.
 *
 * @copyright (C) THK-Verlag UG / Jens Richter Agentur
 * @license   Proprietary
 */

/* ── PAGE-HEADER ─────────────────────────────────────────────────────── */
.ghos-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--thk-line, #e3decf);
}
.ghos-page-header > div:first-child { min-width: 0; flex: 1; }
.ghos-page-header__titel {
  margin: 0;
  font-family: var(--thk-serif, 'Cormorant Garamond', serif);
  font-size: 1.85rem;
  line-height: 1.15;
  color: var(--thk-tinte, #1e3a5f);
  font-weight: 600;
}
.ghos-page-header__stats {
  margin-top: .4rem;
  color: var(--thk-text-mute, #6a6256);
  font-size: .95rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.2rem;
}
.ghos-page-header__stats span strong {
  color: var(--thk-tinte, #1e3a5f);
  font-weight: 600;
  margin-right: .25rem;
}
.ghos-page-header__sub {
  margin: .4rem 0 0;
  color: var(--thk-text-mute, #6a6256);
  font-size: .95rem;
}
.ghos-page-header__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

/* ── BUTTONS (alle ghos-btn-Varianten) ─────────────────────────────────── */
.ghos-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .9rem;
  border: 1px solid transparent;
  border-radius: var(--radius, 6px);
  background: var(--thk-papier-tief);
  color: var(--thk-tinte, #1e3a5f);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.ghos-btn:hover { background: var(--thk-papier-warm, #faf6e9); }
.ghos-btn:focus-visible { outline: 2px solid var(--thk-tinte, #1e3a5f); outline-offset: 2px; }
.ghos-btn svg { width: 1em; height: 1em; flex: 0 0 auto; }
.ghos-btn--icon { padding-left: .7rem; padding-right: .9rem; }

.ghos-btn--haupt,
.ghos-btn--primaer {
  background: var(--thk-bordeaux, #7a2c1e);
  border-color: var(--thk-bordeaux, #7a2c1e);
  color: #fff;
}
.ghos-btn--haupt:hover,
.ghos-btn--primaer:hover {
  background: var(--thk-bordeaux-tief, #5e2117);
  border-color: var(--thk-bordeaux-tief, #5e2117);
  color: #fff;
}

.ghos-btn--zart {
  background: transparent;
  border-color: var(--thk-line, #e3decf);
  color: var(--thk-tinte, #1e3a5f);
}
.ghos-btn--zart:hover {
  background: var(--thk-papier-warm, #faf6e9);
  border-color: var(--thk-line);
}

.ghos-btn--gefahr {
  background: transparent;
  border-color: var(--thk-danger, #a33);
  color: var(--thk-danger, #a33);
}
.ghos-btn--gefahr:hover {
  background: var(--thk-danger, #a33);
  color: #fff;
}

.ghos-btn--klein {
  padding: .3rem .6rem;
  font-size: .85rem;
}

.ghos-btn[disabled],
.ghos-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── FILTER-BAR ──────────────────────────────────────────────────────── */
.ghos-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  margin: 0 0 1rem;
  background: var(--thk-papier-tief);
  border: 1px solid var(--thk-line, #e3decf);
  border-radius: var(--radius, 6px);
}
.ghos-filter-bar__suche {
  position: relative;
  flex: 1;
  min-width: 220px;
}
/* v0.7.11.5-Fix: Das Such-Icon wird im _filter_bar.php als blankes
 * <svg class="ghos-filter-bar__suche-icon"> gerendert — die Klasse
 * sitzt DIREKT auf dem <svg>, nicht auf einem Wrapper. Der frühere
 * Selektor `.ghos-filter-bar__suche-icon svg` matchte deshalb nie,
 * width/height blieben unbestimmt und das SVG füllte den ganzen
 * verfügbaren Container — sichtbar als riesige Lupe oben links auf
 * der Mediathek-Seite. Doppelseitiger Selektor: greift sowohl auf
 * das SVG direkt (Standard-Fall) als auch auf ein <svg> innerhalb
 * eines Wrapper-Elements (falls künftige Templates so kommen). */
svg.ghos-filter-bar__suche-icon,
.ghos-filter-bar__suche-icon {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.05rem;
  height: 1.05rem;
  color: var(--thk-text-mute, #6a6256);
  pointer-events: none;
  flex-shrink: 0;
}
.ghos-filter-bar__suche-icon svg { width: 1em; height: 1em; }
.ghos-filter-bar__suche-input {
  width: 100%;
  padding: .5rem .65rem .5rem 2.1rem;
  border: 1px solid var(--thk-line);
  border-radius: var(--radius, 6px);
  font: inherit;
  background: var(--thk-papier, #fbf7ef);
}
.ghos-filter-bar__suche-input:focus {
  outline: none;
  border-color: var(--thk-tinte, #1e3a5f);
  background: #fff;
}
.ghos-filter-bar__feld select,
.ghos-filter-bar__feld input {
  padding: .5rem .65rem;
  border: 1px solid var(--thk-line);
  border-radius: var(--radius, 6px);
  background: var(--thk-papier, #fbf7ef);
  font: inherit;
  min-width: 140px;
}
.ghos-filter-bar__rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ── VIEW-TOGGLE (Tabelle/Karten) ────────────────────────────────────── */
.ghos-view-toggle {
  display: inline-flex;
  border: 1px solid var(--thk-line);
  border-radius: var(--radius, 6px);
  overflow: hidden;
}
.ghos-view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .4rem .7rem;
  background: var(--thk-papier-tief);
  color: var(--thk-text-mute, #6a6256);
  border: none;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}
.ghos-view-toggle__btn + .ghos-view-toggle__btn { border-left: 1px solid var(--thk-line); }
.ghos-view-toggle__btn:hover { background: var(--thk-papier-warm, #faf6e9); }
.ghos-view-toggle__btn--aktiv {
  background: var(--thk-tinte, #1e3a5f);
  color: #fff;
}
.ghos-view-toggle__btn--aktiv:hover { background: var(--thk-tinte-dunkel, #132840); }

/* ── BULK-LEISTE (Auswahl-Aktionen oben) ──────────────────────────────────
   v0.19.2.0 — entgiftet. Vorher: knallige bordeaux-helle Vollfläche, die
   die ganze Mediathek dominierte. Jetzt: ruhiger Papier-Hintergrund mit
   einem schmalen Bordeaux-Akzent-Streifen links und einem kompakten
   Pillen-Badge für den Counter. Bedienelemente bleiben funktional
   identisch, nur die Optik fügt sich ins warme Beige-Theme. */
.ghos-mediathek-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: .65rem 1rem;
  margin: 0 0 1rem;
  background: var(--thk-papier, #fbf7ef);
  border: 1px solid var(--thk-line, #d8cdb8);
  border-left: 3px solid var(--thk-bordeaux, #7a2c1e);
  border-radius: var(--radius, 6px);
}
.ghos-mediathek-bulk__counter {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .55rem;
  background: var(--thk-bordeaux-soft, rgba(122, 44, 30, 0.10));
  color: var(--thk-bordeaux-tief, #5e2117);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
}
.ghos-mediathek-bulk__counter [data-bulk-count] {
  /* eigener Tag bleibt fürs JS — visuell ein mit "ausgewählt" */
  font-variant-numeric: tabular-nums;
}
.ghos-mediathek-bulk__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}

/* ── KARTEN-GRID Bulk-Mode (Auswahl-Marker, fehlende Bilder) ─────────── */
/* v0.9.8.1 — `.ghos-mediathek-karte` hat jetzt IMMER pointer-Cursor,
   weil der ganze Karten-Body klickbar ist (JS-Click-Delegation,
   kein Stretched-Link mehr). Vorher nur im Bulk-Mode. */
.ghos-mediathek-karte { cursor: pointer; }
.ghos-mediathek-karte__auswahl {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 3;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  border: 2px solid var(--thk-line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* v0.9.8.1 — Die echte <input type="checkbox"> deckt die ganze
   Schale ab, damit Klicks darauf den nativen Toggle auslösen.
   Sichtbar bleibt unsere runde Marke darunter (siehe -marke).
   `appearance: none` damit der Browser-Default keine ungewollte
   Checkbox-Optik daneben zeigt. */
.ghos-mediathek-karte__auswahl input[type="checkbox"] {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.ghos-mediathek-karte__auswahl-marke {
  display: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--thk-bordeaux, #7a2c1e);
}
.ghos-mediathek-karte.is-ausgewaehlt .ghos-mediathek-karte__auswahl {
  border-color: var(--thk-bordeaux, #7a2c1e);
  background: #fff;
}
.ghos-mediathek-karte.is-ausgewaehlt .ghos-mediathek-karte__auswahl-marke {
  display: block;
}
.ghos-mediathek-karte__bild--fehlt,
.ghos-mediathek-karte__fehlt {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--thk-papier-warm, #faf6e9);
  color: var(--thk-text-mute, #6a6256);
  font-size: .85em;
  min-height: 80px;
}

/* ── EMPTY/LEERZUSTAND ───────────────────────────────────────────────── */
.ghos-empty,
.ghos-leerzustand {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--thk-text-mute, #6a6256);
  background: var(--thk-papier, #fbf7ef);
  border: 1px dashed var(--thk-line);
  border-radius: var(--radius, 6px);
}
.ghos-empty__icon {
  font-size: 2.5rem;
  margin-bottom: .5rem;
  opacity: .55;
}
.ghos-empty__icon svg { width: 2.5rem; height: 2.5rem; }
.ghos-empty__titel {
  font-family: var(--thk-serif, 'Cormorant Garamond', serif);
  font-size: 1.3rem;
  color: var(--thk-tinte, #1e3a5f);
  margin: 0 0 .4rem;
}
.ghos-empty__text { margin: 0; font-size: .95rem; }

/* ── FORM-ELEMENTE (Forms in Mediathek-Detail, Kategorien-Anlegen) ───── */
.ghos-form { display: flex; flex-direction: column; gap: 1rem; }

.ghos-feld {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.ghos-feld__label,
.ghos-label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--thk-tinte, #1e3a5f);
}
.ghos-feld__hilfe,
.ghos-hint {
  font-size: .8rem;
  color: var(--thk-text-mute, #6a6256);
  margin: 0;
}
.ghos-input,
.ghos-feld input[type="text"],
.ghos-feld input[type="number"],
.ghos-feld input[type="url"],
.ghos-feld input[type="email"],
.ghos-feld input[type="search"],
.ghos-feld select,
.ghos-feld textarea {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--thk-line);
  border-radius: var(--radius, 6px);
  background: var(--thk-papier, #fbf7ef);
  font: inherit;
  color: var(--thk-text, #2a2620);
}
.ghos-input:focus,
.ghos-feld input:focus,
.ghos-feld select:focus,
.ghos-feld textarea:focus {
  outline: none;
  border-color: var(--thk-tinte, #1e3a5f);
  background: #fff;
}
.ghos-feld textarea { min-height: 5rem; resize: vertical; }

/* ── BADGES (Endung, Counter, …) ─────────────────────────────────────── */
.ghos-badge {
  display: inline-block;
  padding: .15rem .5rem;
  font-size: .78rem;
  font-weight: 600;
  background: var(--thk-line, #e3decf);
  color: var(--thk-tinte, #1e3a5f);
  border-radius: 999px;
  line-height: 1.4;
}
.ghos-badge--addon {
  background: var(--thk-gold-hell, #efe4b8);
  color: var(--thk-tinte-dunkel, #132840);
}

/* ── BLOCK (Card-Container für Detailblöcke, z.B. "Gefahr"-Zone) ───────
   v0.16.0.2 — auf body.admin gescopt. Vorher kollidierte die generische
   .ghos-block-Regel mit dem CMS-Section-Wrapper im Frontend (der
   BlockRenderer baut <section class="ghos-block ghos-block--text …">).
   ghos-shim.css wird seit v0.13.5.0 auch im Frontend geladen — daher
   landete der hier definierte 1-px-Rahmen + Hintergrund auf jedem CMS-
   Block, unabhängig von den Darstellungs-Einstellungen. Über das
   admin-Scope bleibt die Mediathek-Optik („Gefahr"-Zone usw.) erhalten,
   und die Frontend-CMS-Blöcke sind wieder rahmenfrei.                  */
body.admin .ghos-block {
  padding: 1rem 1.25rem;
  background: var(--thk-papier-tief);
  border: 1px solid var(--thk-line, #e3decf);
  border-radius: var(--radius, 6px);
  margin: 0 0 1rem;
}
body.admin .ghos-block__kopf {
  font-family: var(--thk-serif, 'Cormorant Garamond', serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--thk-tinte, #1e3a5f);
  margin: 0 0 .6rem;
}
body.admin .ghos-block--gefahr {
  background: #fff5f3;
  border-color: var(--thk-bordeaux-hell, #c2978c);
}
body.admin .ghos-block--gefahr .ghos-block__kopf {
  color: var(--thk-bordeaux-tief, #5e2117);
}

/* ── BREADCRUMB (Server-Ordner-Browser) ──────────────────────────────── */
.ghos-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  padding: .5rem .75rem;
  margin: 0 0 1rem;
  background: var(--thk-papier-warm, #faf6e9);
  border: 1px solid var(--thk-line, #e3decf);
  border-radius: var(--radius, 6px);
  font-size: .92rem;
  color: var(--thk-text-mute, #6a6256);
}
.ghos-breadcrumb a {
  color: var(--thk-tinte, #1e3a5f);
  text-decoration: none;
}
.ghos-breadcrumb a:hover { text-decoration: underline; }

/* ── HEADLINES ───────────────────────────────────────────────────────── */
.ghos-h {
  font-family: var(--thk-serif, 'Cormorant Garamond', serif);
  font-weight: 600;
  color: var(--thk-tinte, #1e3a5f);
  margin: 1.25rem 0 .6rem;
}

/* ── INLINE-DELETE-FORM (Kategorien-Knoten) ─────────────────────────── */
.ghos-loesch-inline,
.ghos-karte-loesch {
  display: inline;
}
.ghos-loesch-inline button,
.ghos-karte-loesch button {
  background: none;
  border: none;
  padding: .2rem .4rem;
  color: var(--thk-danger, #a33);
  cursor: pointer;
  font: inherit;
}
.ghos-loesch-inline button:hover,
.ghos-karte-loesch button:hover {
  text-decoration: underline;
}

/* ── KATEGORIEN-FORM (Inline-Anlegen-Form über dem Baum) ────────────── */
.ghos-kategorie-form {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  padding: .75rem 1rem;
  margin: 0 0 1.25rem;
  background: var(--thk-papier-tief);
  border: 1px solid var(--thk-line, #e3decf);
  border-radius: var(--radius, 6px);
}
.ghos-kategorie-form__inline {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.ghos-kategorie-form input[type="text"],
.ghos-kategorie-form select {
  padding: .4rem .55rem;
  border: 1px solid var(--thk-line);
  border-radius: var(--radius, 6px);
  background: var(--thk-papier, #fbf7ef);
  font: inherit;
}

/* ── AKZENT-Hervorhebungen (z.B. Tab-aktiv-Strich) ───────────────────── */
.ghos-akzent {
  color: var(--thk-bordeaux, #7a2c1e);
  font-weight: 600;
}
.ghos-akzent-sehr-hell {
  background: var(--thk-papier-warm, #faf6e9);
}

/* ── HINT (Hilfe-Box neben Forms) ───────────────────────────────────── */
.ghos-hint {
  padding: .65rem .85rem;
  background: var(--thk-papier-warm, #faf6e9);
  border-left: 3px solid var(--thk-gold, #b89c5a);
  border-radius: var(--radius-sm, 4px);
  font-size: .9rem;
  color: var(--thk-text, #2a2620);
}

/* ════════════════════════════════════════════════════════════════════════
 *  v0.13.5.0 — PUBLIC-FRONTEND JOURNAL (portiert aus GHOS v1.62.3)
 *  Featured-Hero + Filter-Pills + 3-Spalten-Karten-Grid + Pagination.
 *  Klassen-Namen identisch zum GHOS-Pattern, Optik auf THK-Brand
 *  (Bordeaux #99354e / Tinte #1e3a5f / Papier-warm #faf6e9) gemappt.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Typografie-Bausteine fürs Public-Frontend ─────────────────────────── */
.ghos-h1 {
  font-family: var(--thk-serif, 'Cormorant Garamond', serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--thk-tinte, #1e3a5f);
  margin: 0 0 1rem;
}
.ghos-h2 {
  font-family: var(--thk-serif, 'Cormorant Garamond', serif);
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--thk-tinte, #1e3a5f);
  margin: 0 0 1rem;
}
.ghos-kicker {
  display: inline-block;
  font-family: var(--thk-sans, system-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--thk-bordeaux, #99354e);
  margin-bottom: 0.75rem;
}
.ghos-lead {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--thk-text-mute);
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}
.ghos-container {
  max-width: var(--content-wide, 1180px);
  margin: 0 auto;
  padding: var(--space-7, 3rem) var(--space-5, 1.5rem);
}

/* ── JOURNAL-PAGE-HEAD ─────────────────────────────────────────────────── */
.ghos-journal-page__head {
  text-align: center;
  max-width: 50rem;
  margin: 0 auto 3rem;
}
.ghos-journal-page__head .ghos-h1 { margin-bottom: 0.75rem; }
.ghos-journal-page__rss {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .85rem;
  padding: .3rem .75rem;
  border: 1px solid var(--thk-line, #e3decf);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--thk-text-mute);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.ghos-journal-page__rss:hover {
  background: var(--thk-papier-warm, #faf6e9);
  color: var(--thk-bordeaux, #99354e);
  border-color: var(--thk-bordeaux, #99354e);
}

/* ── KATEGORIE-FILTER (Pills, zentriert) ───────────────────────────────── */
.ghos-journal-filter {
  display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 3rem;
}
.ghos-journal-filter__item {
  padding: 0.4rem 1rem; font-size: 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--thk-line, #e3decf);
  text-decoration: none; color: var(--thk-text, #2a2620);
  background: transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.ghos-journal-filter__item:hover,
.ghos-journal-filter__item.is-active {
  background: var(--thk-bordeaux, #99354e);
  color: #fff;
  border-color: var(--thk-bordeaux, #99354e);
}
.ghos-journal-filter__zahl { opacity: .7; margin-left: .2rem; font-size: .8em; }

/* ── FEATURED-BEITRAG (Hero auf Seite 1 der Übersicht) ─────────────────── */
.ghos-journal-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 0 0 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--thk-line, #e3decf);
  align-items: center;
}
@media (min-width: 800px) {
  .ghos-journal-feature { grid-template-columns: 1.2fr 1fr; gap: 2.5rem; }
}
.ghos-journal-feature__bild {
  display: block;
  aspect-ratio: 16/10;
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  background: var(--thk-papier-warm, #faf6e9);
}
.ghos-journal-feature__bild img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform .35s;
}
.ghos-journal-feature__bild:hover img { transform: scale(1.03); }
.ghos-journal-feature__inhalt { display: flex; flex-direction: column; }
.ghos-journal-feature__kategorie {
  display: inline-block;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--thk-bordeaux, #99354e);
  text-decoration: none;
  margin-bottom: 0.7rem;
}
.ghos-journal-feature__titel {
  font-family: var(--thk-serif, 'Cormorant Garamond', serif);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.8rem;
  letter-spacing: -0.01em;
}
.ghos-journal-feature__titel a { color: var(--thk-tinte, #1e3a5f); text-decoration: none; }
.ghos-journal-feature__titel a:hover { color: var(--thk-bordeaux, #99354e); }
.ghos-journal-feature__teaser {
  font-size: 1.05rem; line-height: 1.55;
  color: var(--thk-text, #2a2620);
  margin: 0 0 1rem;
}
.ghos-journal-feature__meta {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--thk-text-mute);
  margin-bottom: 1.2rem;
}

/* ── 3-SPALTEN-GRID ────────────────────────────────────────────────────── */
.ghos-journal-grid {
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .ghos-journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ghos-journal-grid { grid-template-columns: repeat(3, 1fr); } }

.ghos-journal-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--thk-line, #e3decf);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.ghos-journal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 22px rgba(30,58,95,.10);
  border-color: var(--thk-bordeaux, #99354e);
}
.ghos-journal-card__bild {
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--thk-papier-warm, #faf6e9);
}
.ghos-journal-card__bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s;
}
.ghos-journal-card:hover .ghos-journal-card__bild img { transform: scale(1.04); }

/* Fallback-Karte ohne Cover: typografisch stark, Bordeaux-Akzent */
.ghos-journal-card--ohne-bild .ghos-journal-card__inhalt { padding-top: 2rem; }
.ghos-journal-card--ohne-bild { border-top: 4px solid var(--thk-bordeaux, #99354e); }

.ghos-journal-card__inhalt {
  padding: 1.25rem 1.4rem 1.4rem;
  flex: 1;
  display: flex; flex-direction: column;
}
.ghos-journal-card__kategorie {
  display: inline-block;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--thk-bordeaux, #99354e);
  text-decoration: none;
  margin-bottom: 0.5rem;
}
.ghos-journal-card__datum {
  font-size: 0.8rem; color: var(--thk-text-mute);
  margin-bottom: 0.3rem;
}
.ghos-journal-card__titel {
  font-family: var(--thk-serif, 'Cormorant Garamond', serif);
  font-size: 1.35rem; font-weight: 600; line-height: 1.2;
  margin: 0 0 0.6rem;
  letter-spacing: -0.005em;
}
.ghos-journal-card__titel a { color: var(--thk-tinte, #1e3a5f); text-decoration: none; }
.ghos-journal-card__titel a:hover { color: var(--thk-bordeaux, #99354e); }
.ghos-journal-card__teaser {
  margin: 0 0 .8rem; color: var(--thk-text, #2a2620);
  font-size: 0.95rem; line-height: 1.55;
  flex: 1;
}
.ghos-journal-card__meta {
  font-size: 0.78rem; color: var(--thk-text-mute);
  display: flex; gap: 1rem; flex-wrap: wrap;
  margin-top: auto; padding-top: .6rem;
  border-top: 1px solid var(--thk-line, #e3decf);
}

/* ── PAGINATION (zentriert, Bordeaux-aktiv) ────────────────────────────── */
.ghos-pagination {
  display: flex; justify-content: center; gap: 0.5rem;
  margin-top: 3.5rem; flex-wrap: wrap;
}
.ghos-pagination a, .ghos-pagination span {
  padding: 0.5rem 0.85rem; min-width: 2.5rem;
  text-align: center;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--thk-line, #e3decf);
  text-decoration: none; color: var(--thk-text, #2a2620);
  font-size: 0.95rem;
  background: #fff;
}
.ghos-pagination a:hover {
  background: var(--thk-papier-warm, #faf6e9);
  border-color: var(--thk-bordeaux, #99354e);
}
.ghos-pagination .is-current {
  background: var(--thk-bordeaux, #99354e);
  color: #fff;
  border-color: var(--thk-bordeaux, #99354e);
}
.ghos-pagination .is-disabled { opacity: 0.4; pointer-events: none; }

/* ── EMPTY-STATE im Journal ────────────────────────────────────────────── */
.ghos-empty {
  text-align: center; padding: 3rem 1rem;
  border: 1px dashed var(--thk-line, #e3decf);
  border-radius: var(--radius-md, 6px);
  background: var(--thk-papier-warm, #faf6e9);
}
.ghos-empty__titel {
  font-family: var(--thk-serif, 'Cormorant Garamond', serif);
  font-size: 1.4rem; margin: 0 0 .5rem;
  color: var(--thk-tinte, #1e3a5f);
}
.ghos-empty__text { color: var(--thk-text-mute); margin: 0; }

/* ── BUTTONS (für „Weiterlesen" in Featured-Karte) ─────────────────────── */
.ghos-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.2rem;
  border-radius: var(--radius-sm, 4px);
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
  align-self: flex-start;
}
.ghos-btn--primaer {
  background: var(--thk-bordeaux, #99354e);
  color: #fff;
}
.ghos-btn--primaer:hover { background: var(--thk-tinte, #1e3a5f); color: #fff; }

/* ════════════════════════════════════════════════════════════════════════
 *  v0.13.5.1 — PUBLIC-FRONTEND JOURNAL-DETAIL (aus GHOS v1.62.3 portiert)
 *  Lesebreite 68ch + Kategorie-Pill + großer Titelbild-Hero + .ghos-prose
 *  + „Weitere Beiträge"-Sektion (nutzt .ghos-journal-grid + .ghos-journal-card)
 * ════════════════════════════════════════════════════════════════════════ */

.ghos-post {
  max-width: 68rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4rem;
}
.ghos-post__zurueck {
  display: inline-flex; gap: 0.4rem; align-items: center;
  margin-bottom: 2rem; font-size: 0.92rem;
  text-decoration: none;
  color: var(--thk-text-mute);
  transition: color .15s;
}
.ghos-post__zurueck:hover { color: var(--thk-bordeaux, #99354e); }

.ghos-post__kategorie {
  display: inline-block;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--thk-bordeaux, #99354e);
  margin-bottom: 1rem;
  text-decoration: none;
}
.ghos-post__kategorie:hover { color: var(--thk-tinte, #1e3a5f); }

.ghos-post__titel {
  font-family: var(--thk-serif, 'Cormorant Garamond', serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
  color: var(--thk-tinte, #1e3a5f);
}
.ghos-post__untertitel {
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--thk-text-mute);
  margin: 0 0 1.4rem;
  max-width: 60ch;
}
.ghos-post__meta {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: 2.5rem;
  color: var(--thk-text-mute);
  font-size: 0.9rem;
}

.ghos-post__titelbild {
  margin: 0 0 2.5rem;
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--thk-papier-warm, #faf6e9);
}
.ghos-post__titelbild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Lesebreite — Artikel-Body bekommt max 68ch (typografisch optimal) */
.ghos-post__body,
.ghos-post__body--bloecke {
  max-width: 68ch;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--thk-text, #2a2620);
}
.ghos-post__body p { margin: 0 0 1.25em; }
.ghos-post__body h2 {
  font-family: var(--thk-serif, 'Cormorant Garamond', serif);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--thk-tinte, #1e3a5f);
  margin: 2.2rem 0 1rem;
  letter-spacing: -0.01em;
}
.ghos-post__body h3 {
  font-family: var(--thk-serif, 'Cormorant Garamond', serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--thk-tinte, #1e3a5f);
  margin: 1.7rem 0 .75rem;
}
.ghos-post__body img {
  max-width: 100%; height: auto;
  border-radius: var(--radius-sm, 4px);
  margin: 1.75rem 0;
}
.ghos-post__body blockquote {
  border-left: 3px solid var(--thk-bordeaux, #99354e);
  padding: 0.5rem 0 0.5rem 1.25rem;
  margin: 1.75rem 0;
  font-style: italic;
  color: var(--thk-text-mute);
  background: var(--thk-papier-warm, #faf6e9);
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}
.ghos-post__body ul, .ghos-post__body ol { padding-left: 1.5rem; margin: 0 0 1.25em; }
.ghos-post__body li { margin-bottom: 0.35em; }
.ghos-post__body a {
  color: var(--thk-bordeaux, #99354e);
  text-decoration-color: var(--thk-bordeaux, #99354e);
}
.ghos-post__body iframe {
  max-width: 100%; width: 100%; aspect-ratio: 16/9; border: 0;
  border-radius: var(--radius-md, 6px);
  margin: 1.75rem 0;
}

/* Teaser-Lead unter Meta — etwas größer, Bordeaux-Akzent links */
.ghos-post__teaser {
  max-width: 68ch;
  margin: 0 auto 2rem;
  font-size: 1.18rem; line-height: 1.55;
  color: var(--thk-text, #2a2620);
  padding-left: 1rem;
  border-left: 3px solid var(--thk-bordeaux, #99354e);
}

/* „Weitere Beiträge"-Sektion (cremefarbener Block am Ende) */
.ghos-post-weitere {
  background: var(--thk-papier-warm, #faf6e9);
  padding: 3.5rem 0;
  margin-top: 4rem;
  border-top: 1px solid var(--thk-line, #e3decf);
}
.ghos-post-weitere__head { text-align: center; margin-bottom: 2rem; }
.ghos-post-weitere__head .ghos-kicker { margin-bottom: .5rem; }
.ghos-post-weitere .ghos-journal-grid { max-width: var(--content-wide, 1180px); margin: 0 auto; }

/* Vorschau-Banner (redaktioneller Look statt yellow inline-style) */
.ghos-vorschau-banner {
  background: linear-gradient(180deg, #fff4c2 0%, #ffe9a0 100%);
  border-bottom: 2px solid #d8b500;
  padding: .9rem 1.2rem;
  text-align: center;
  font-size: .95rem;
  color: #5a4a00;
}
.ghos-vorschau-banner strong { color: #3a3000; }
.ghos-vorschau-banner em { font-style: italic; color: #3a3000; }

/* ════════════════════════════════════════════════════════════════════════
 *  v0.13.5.2 — NEWSLETTER-ANMELDE-BOX (wiederverwendbares Partial)
 *  Cremefarbener Block mit Bordeaux-Akzent. Wird auf der Journal-Liste
 *  (vor Pagination) und im Detail (vor „Weitere Beiträge") eingebunden.
 *  Auch beliebig in CMS-Seiten verwendbar.
 * ════════════════════════════════════════════════════════════════════════ */

.ghos-newsletter-box {
  margin: 3rem auto;
  max-width: 48rem;
  padding: 2rem 2rem 2.2rem;
  background: var(--thk-papier-warm, #faf6e9);
  border: 1px solid var(--thk-line, #e3decf);
  border-left: 4px solid var(--thk-bordeaux, #99354e);
  border-radius: var(--radius-md, 6px);
}
.ghos-newsletter-box__kicker {
  display: inline-block;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--thk-bordeaux, #99354e);
  margin-bottom: 0.6rem;
}
.ghos-newsletter-box__titel {
  font-family: var(--thk-serif, 'Cormorant Garamond', serif);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--thk-tinte, #1e3a5f);
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
.ghos-newsletter-box__text {
  color: var(--thk-text, #2a2620);
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0 0 1.25rem;
  max-width: 36rem;
}
/* Screenreader-only. War bisher NICHT definiert — dadurch blieb das
   „E-Mail-Adresse"-Label ein sichtbares Grid-Item und verschob die
   Newsletter-Form (Label/Button links, Eingabefeld oben rechts).
   Mit display:none verlässt es den Grid-Flow → sauberes [Feld | Button].
   (v0.26.0.1) */
.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

.ghos-newsletter-box__form {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  margin: 0;
}
@media (max-width: 540px) {
  .ghos-newsletter-box__form { grid-template-columns: 1fr; }
}
.ghos-newsletter-box__input {
  width: 100%;
  padding: 0.7rem 0.95rem;
  font-size: 1rem;
  border: 1.5px solid var(--thk-line, #e3decf);
  border-radius: var(--radius-sm, 4px);
  background: #fff;
  color: var(--thk-text, #2a2620);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.ghos-newsletter-box__input:focus {
  outline: 0;
  border-color: var(--thk-bordeaux, #99354e);
  box-shadow: 0 0 0 3px rgba(153, 53, 78, .15);
}
.ghos-newsletter-box__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 1.4rem;
  font-size: 1rem; font-weight: 600;
  background: var(--thk-bordeaux, #99354e);
  color: #fff;
  border: 1.5px solid var(--thk-bordeaux, #99354e);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: inherit;
}
.ghos-newsletter-box__btn:hover {
  background: var(--thk-tinte, #1e3a5f);
  border-color: var(--thk-tinte, #1e3a5f);
}
.ghos-newsletter-box__hinweis {
  margin: .85rem 0 0;
  font-size: 0.78rem;
  color: var(--thk-text-mute);
  line-height: 1.45;
}
.ghos-newsletter-box__hinweis a {
  color: var(--thk-bordeaux, #99354e);
  text-decoration: underline;
}
/* Honeypot — visuell + a11y unsichtbar, aber für Bots ein einladendes Feld */
.ghos-newsletter-box__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
}
/* Flash-Banner über der Form (Erfolg/Fehler nach Submit + Redirect-Zurück) */
.ghos-newsletter-box__flash {
  padding: .65rem .9rem;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.92rem;
  margin: 0 0 1rem;
}
.ghos-newsletter-box__flash--success {
  background: #e6f3ea;
  color: #1f5a31;
  border: 1px solid #b6d9c3;
}
.ghos-newsletter-box__flash--error {
  background: #fbeaea;
  color: #8a1f1f;
  border: 1px solid #e0bcbc;
}