/* GruppenhausOS — app.css (v0.1.2.1)
 *
 * Basis-Styling für Auth-Pages (Login/Setup/Reset/2FA/Errors) und
 * Admin-Dashboards (Mandant + System). Schlicht, funktional, eigenes
 * Look-&-Feel — kein Tailwind, kein Bootstrap, kein Build-Schritt.
 *
 * Mandanten-Branding kann später über CSS-Variablen-Override per
 * inline <style> im Layout-Head eingespielt werden.
 *
 * Naming: BEM-light. Block (`ghos-foo`) → Element (`ghos-foo__bar`)
 * → Modifier (`ghos-foo--gross`).
 */

:root {
  /* Farben — neutral mit warmem Naturhaus-Beige als Hintergrund */
  --ghos-bg:           #f6f5f1;
  --ghos-bg-karte:     #ffffff;
  --ghos-bg-zart:      #fafaf7;
  --ghos-bg-tief:      #efede6;
  --ghos-trennlinie:   #e6e4dd;
  --ghos-trennlinie-kraeftig: #cdc9bd;

  --ghos-text:         #1f2a37;
  --ghos-text-zart:    #4b5563;
  --ghos-text-leise:   #9ca3af;

  /* Kanonische Gruppenhaus-OS-Farbe; Mandanten-Branding kann ueberschreiben. */
  --ghos-akzent:       #7A5230;
  --ghos-akzent-hell:  #5C3D24;
  --ghos-akzent-text:  #ffffff;
  --ghos-akzent-sehr-hell: #F0E6DC;
  --ghos-gruen:        #5a7a4f;

  /* v1.84.3 — Link-Farben semantisch von Button-Akzent getrennt.
     Vorher: Links nutzten --ghos-akzent (= Button-Dunkelblau),
     Hover wechselte zu --ghos-akzent-hell (= Button-Hover-Blau).
     Folge: Links sahen wie Buttons aus, Hover war kaum sichtbar
     und wirkte wie Button-Hover. Praxisbefund aus v1.84.3.
     Jetzt: eigenes Link-Blau (klassisch web-blau), deutlich heller
     als die Button-Farbe, mit deutlich wahrnehmbarem Hover. */
  --ghos-link:         #2563eb;
  --ghos-link-hover:   #1d4ed8;

  /* Status — Pills/Badges */
  --ghos-erfolg-bg:    #ecf4e6;
  --ghos-erfolg-text:  #355c2c;
  --ghos-erfolg-rand:  #b9d4ad;

  --ghos-fehler-bg:    #fdecec;
  --ghos-fehler-text:  #7f1d1d;
  --ghos-fehler-rand:  #f1b4b4;

  --ghos-warn-bg:      #fef6e0;
  --ghos-warn-text:    #7a4f00;
  --ghos-warn-rand:    #ecd49a;

  --ghos-info-bg:      #F0E6DC;
  --ghos-info-text:    #5C3D24;
  --ghos-info-rand:    #d8c5b2;

  --ghos-neutral-bg:   #f1efe9;
  --ghos-neutral-text: #4b5563;
  --ghos-neutral-rand: #d8d4c8;

  /* Maße */
  --ghos-radius-xs:    4px;
  --ghos-radius-klein: 6px;
  --ghos-radius:       8px;
  --ghos-radius-gross: 12px;
  --ghos-radius-pille: 999px;
  --ghos-sidebar-breite: 17rem;
  --ghos-topbar-h:     56px;

  /* Schatten — subtil, nicht aufdringlich */
  --ghos-schatten-mini:  0 1px 2px rgba(31, 42, 55, .04);
  --ghos-schatten-1:     0 1px 3px rgba(31, 42, 55, .06), 0 1px 2px rgba(31, 42, 55, .03);
  --ghos-schatten-2:     0 4px 12px rgba(31, 42, 55, .08), 0 2px 4px rgba(31, 42, 55, .04);
  --ghos-schatten-fokus: 0 0 0 3px rgba(122, 82, 48, .18);
  --ghos-schatten-hover: 0 6px 20px rgba(31, 42, 55, .10);

  /* Übergänge */
  --ghos-uebergang-schnell: 120ms cubic-bezier(.4, 0, .2, 1);
  --ghos-uebergang:         180ms cubic-bezier(.4, 0, .2, 1);

  /* Typografie — Body bleibt System-Stack, Display-Stimme über serif */
  --ghos-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --ghos-font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
                       "URW Palladio L", Georgia, "Times New Roman", serif;
  --ghos-font-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--ghos-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ghos-text);
  background: var(--ghos-bg);
}

/* v1.84.3 — Links nutzen jetzt eigene Link-Farb-Variablen statt
   der Button-Akzent-Farben. Damit unterscheiden sich Text-Links
   klar von Buttons (vorher: Akzent-Dunkelblau = Button-Farbe,
   Hover = Akzent-Hell = Button-Hover → kein erkennbarer Wechsel).
   Hover bekommt zusätzlich eine deutlichere Underline (von 1 auf
   2 px), damit der Wechsel auch bei farbblinden Nutzern erkennbar
   ist. */
a {
  color: var(--ghos-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .12s, text-decoration-thickness .12s;
}
a:hover {
  color: var(--ghos-link-hover);
  text-decoration-thickness: 2px;
}

code {
  font-family: var(--ghos-font-mono);
  font-size: .92em;
  background: var(--ghos-bg-zart);
  border: 1px solid var(--ghos-trennlinie);
  padding: .05em .35em;
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   AUTH-LAYOUT (Card-zentriert)
   ════════════════════════════════════════════════════════════════════ */

.ghos-auth {
  min-height: 100vh;
}

.ghos-auth__viewport {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.ghos-auth__karte {
  width: 100%;
  max-width: 28rem;
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.04);
}

.ghos-auth__kopf {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ghos-trennlinie);
}

.ghos-auth__marke strong {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.ghos-auth__mandant {
  margin-top: .25rem;
  color: var(--ghos-text-zart);
  font-size: .9rem;
}

.ghos-auth__inhalt > :first-child { margin-top: 0; }
.ghos-auth__inhalt > :last-child  { margin-bottom: 0; }

.ghos-auth__fuss {
  margin-top: 1.5rem;
  text-align: center;
  font-size: .85rem;
  color: var(--ghos-text-leise);
}

.ghos-auth__fuss a {
  color: var(--ghos-text-leise);
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════════
   ADMIN-LAYOUT (Sidebar + Content)
   ════════════════════════════════════════════════════════════════════ */

.ghos-admin {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--ghos-sidebar-breite) 1fr;
  /* v1.58.8 — Explizite Area-Zuweisung statt Auto-Placement.
     Der vorherige v1.58.4-Fix (grid-column:1/-1 nur auf Topbar)
     liess die Sidebar im Auto-Placement, was bei manchen Seiten
     dazu fuehrte dass sie nicht oben unter der Topbar startete
     sondern weiter unten — sichtbar als weisser Streifen ueber
     der Sidebar, dessen Hoehe mit der Position der aktiven
     Nav-Gruppe korrelierte (Browser-Heuristik im Auto-Flow). */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "topbar  topbar"
    "sidebar inhalt";
}
.ghos-admin__topbar  { grid-area: topbar; }
.ghos-admin__sidebar { grid-area: sidebar; }
.ghos-admin__inhalt  { grid-area: inhalt; }

.ghos-admin__sidebar {
  background: #21314b;
  color: #d6dcea;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
}

.ghos-admin__marke {
  margin-bottom: 1.5rem;
}
.ghos-admin__marke strong {
  display: block;
  font-size: 1.1rem;
  color: #fff;
  letter-spacing: -.01em;
}
.ghos-admin__marke small {
  display: block;
  font-size: .8rem;
  color: #98a4be;
  margin-top: .15rem;
}

.ghos-admin__mandant {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--ghos-radius-klein);
  padding: .75rem;
  margin-bottom: 1rem;
}
.ghos-admin__mandant-name {
  font-weight: 600;
  color: #fff;
  font-size: .95rem;
}
.ghos-admin__mandant-rechtsname {
  color: #98a4be;
  font-size: .8rem;
  margin-top: .15rem;
}

.ghos-admin__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin: .5rem 0 1rem;
}
.ghos-admin__nav-item {
  display: block;
  padding: .55rem .75rem;
  border-radius: var(--ghos-radius-klein);
  font-size: .92rem;
  text-decoration: none;
  color: #c4cce0;
}
.ghos-admin__nav-item:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.ghos-admin__nav-item--aktiv {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.ghos-admin__nav-item--inaktiv {
  color: #6c7896;
  cursor: not-allowed;
}
.ghos-admin__nav-item--inaktiv:hover {
  background: transparent;
  color: #6c7896;
}

.ghos-admin__benutzer {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1rem;
  font-size: .88rem;
}
.ghos-admin__benutzer-name {
  color: #fff;
  font-weight: 500;
}
.ghos-admin__benutzer-rolle {
  color: #98a4be;
  font-size: .82rem;
  margin-top: .15rem;
}
.ghos-admin__benutzer-aktionen {
  margin-top: .65rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.ghos-admin__benutzer-aktionen .ghos-link-btn {
  display: inline-block;
  padding: 0;
  text-align: left;
  color: #c5d0e8;
  font-size: .85rem;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
}
.ghos-admin__benutzer-aktionen .ghos-link-btn:hover {
  color: #fff;
  text-decoration: underline;
}
.ghos-admin__site-ansehen { color: #c5d0e8; }
.ghos-admin__abmelden {
  margin: 0;
}

.ghos-admin__inhalt {
  padding: 1.5rem 2rem 3rem;
  /* v1.84.1 — Default max-width auf 1400 px (statt 1200) erhöht.
     Damit auch normale Inhalte auf 24" mehr Atem haben, ohne dass
     Formular-Felder unleserlich breit werden. Komponenten, die
     wirklich die volle Inhaltsfläche nutzen sollen (Belegungs-
     Kalender, breite Tabellen), opten via :has() oder
     ghos-admin__inhalt--breit aus. */
  max-width: 1400px;
  width: 100%;
  min-width: 0;
}

/* v1.84.1 — Voll-Breite-Opt-in für große Monitore (24"/27"+). Wird
   automatisch aktiv, wenn eine breite Komponente im Content liegt.
   :has() ist seit 2023 in allen modernen Browsern (Chrome 105+,
   Firefox 121+, Safari 15.4+) verfügbar.
   Plus manuelle Klasse `.ghos-admin__inhalt--breit` zum gezielten
   Setzen pro View. */
.ghos-admin__inhalt:has(.ghos-belegung-kalender),
.ghos-admin__inhalt:has(.ghos-fullwidth),
.ghos-admin__inhalt--breit {
  max-width: none;
}
.ghos-admin__inhalt-kopf {
  margin-bottom: 1.5rem;
}
.ghos-admin__inhalt-kopf h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

@media (max-width: 720px) {
  .ghos-admin {
    /* v1.58.8 — auf Mobile faellt das Grid auf eine Spalte zurueck.
       Areas dazu passend: Topbar oben, Sidebar (per fixed positioniert
       in Z.1963) gleitet als Drawer ein, Inhalt vollflaechig. Die
       Sidebar-Area entfaellt; Sidebar wird per `position: fixed`
       aus dem Grid-Flow herausgenommen. */
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "topbar"
      "inhalt";
  }
  .ghos-admin__sidebar {
    padding: 1rem;
  }
  .ghos-admin__nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ghos-admin__inhalt {
    padding: 1rem;
  }
}

/* ════════════════════════════════════════════════════════════════════
   FORMULARE
   ════════════════════════════════════════════════════════════════════ */

.ghos-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ghos-feld {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.ghos-feld__label {
  font-size: .9rem;
  font-weight: 500;
  color: var(--ghos-text);
}

.ghos-feld input,
.ghos-feld select,
.ghos-feld textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: .55rem .75rem;
  border: 1px solid var(--ghos-trennlinie-kraeftig);
  border-radius: var(--ghos-radius-klein);
  background: #fff;
  color: var(--ghos-text);
}

.ghos-feld input:focus,
.ghos-feld select:focus,
.ghos-feld textarea:focus {
  outline: none;
  border-color: var(--ghos-akzent);
  box-shadow: 0 0 0 3px rgba(31, 58, 95, .15);
}

.ghos-feld__hilfe {
  font-size: .82rem;
  color: var(--ghos-text-zart);
}

.ghos-form__nebenlink {
  margin-top: .75rem;
  text-align: center;
  font-size: .9rem;
}

/* ════════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════════ */

.ghos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 1rem;
  padding: .65rem 1.2rem;
  border: 1px solid var(--ghos-trennlinie-kraeftig);
  border-radius: var(--ghos-radius-klein);
  background: #fff;
  color: var(--ghos-text);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.ghos-btn:hover {
  background: var(--ghos-bg-zart);
  border-color: var(--ghos-text-zart);
  /* v1.84.3 — Color bleibt unverändert auf Hover. Vorher griff
     der globale a:hover und färbte Button-Texte zur Link-Hover-
     Farbe ein. */
  color: var(--ghos-text);
  text-decoration: none;
}
.ghos-btn,
a.ghos-btn {
  text-decoration: none;
}
a.ghos-btn:hover {
  text-decoration: none;
}
.ghos-btn--primaer {
  background: var(--ghos-akzent);
  border-color: var(--ghos-akzent);
  color: var(--ghos-akzent-text);
}
.ghos-btn--primaer:hover {
  background: var(--ghos-akzent-hell);
  border-color: var(--ghos-akzent-hell);
  color: #fff;
  text-decoration: none;
}

.ghos-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: #c4cce0;
  text-decoration: underline;
  cursor: pointer;
}
.ghos-link-btn:hover { color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   ALERTS / FLASH
   ════════════════════════════════════════════════════════════════════ */

.ghos-alert {
  padding: .75rem 1rem;
  border: 1px solid;
  border-radius: var(--ghos-radius-klein);
  font-size: .92rem;
  margin: 0 0 1rem;
}
.ghos-alert--fehler {
  background: var(--ghos-fehler-bg);
  border-color: var(--ghos-fehler-rand);
  color: var(--ghos-fehler-text);
}
.ghos-alert--warnung {
  background: var(--ghos-warn-bg);
  border-color: var(--ghos-warn-rand);
  color: var(--ghos-warn-text);
}

.ghos-flash-stack {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0 0 1rem;
}
.ghos-flash {
  padding: .65rem 1rem;
  border: 1px solid;
  border-radius: var(--ghos-radius-klein);
  font-size: .92rem;
}
.ghos-flash--erfolg {
  background: var(--ghos-erfolg-bg);
  border-color: var(--ghos-erfolg-rand);
  color: var(--ghos-erfolg-text);
}
.ghos-flash--fehler {
  background: var(--ghos-fehler-bg);
  border-color: var(--ghos-fehler-rand);
  color: var(--ghos-fehler-text);
}
.ghos-flash--warnung {
  background: var(--ghos-warn-bg);
  border-color: var(--ghos-warn-rand);
  color: var(--ghos-warn-text);
}
.ghos-flash--info {
  background: var(--ghos-info-bg);
  border-color: var(--ghos-info-rand);
  color: var(--ghos-info-text);
}

/* ════════════════════════════════════════════════════════════════════
   TYPO-HELFER
   ════════════════════════════════════════════════════════════════════ */

.ghos-h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 .75rem;
  letter-spacing: -.005em;
}
.ghos-text {
  margin: 0 0 1rem;
  color: var(--ghos-text-zart);
}

.ghos-details {
  margin: 1rem 0;
  font-size: .9rem;
  color: var(--ghos-text-zart);
}
.ghos-details summary {
  cursor: pointer;
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD-KARTEN
   ════════════════════════════════════════════════════════════════════ */

.ghos-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
}
.ghos-karte {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  padding: 1rem 1.25rem;
}
.ghos-karte__label {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ghos-text-leise);
  margin-bottom: .25rem;
}
.ghos-karte__wert {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ghos-text);
}
.ghos-karte__detail {
  font-size: .85rem;
  color: var(--ghos-text-zart);
  margin-top: .25rem;
}

/* ════════════════════════════════════════════════════════════════════
   BLOCK
   ════════════════════════════════════════════════════════════════════ */

.ghos-block {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  padding: 1.5rem;
  margin: 0 0 1.5rem;
}
.ghos-block--zart {
  background: var(--ghos-bg-zart);
  border-style: dashed;
}

/* ════════════════════════════════════════════════════════════════════
   TABELLE
   ════════════════════════════════════════════════════════════════════ */

.ghos-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.ghos-tabelle thead th {
  text-align: left;
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ghos-text-leise);
  border-bottom: 1px solid var(--ghos-trennlinie);
  padding: .5rem .75rem;
}
.ghos-tabelle tbody td {
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--ghos-trennlinie);
  vertical-align: top;
}
.ghos-tabelle tbody tr:last-child td { border-bottom: none; }

.ghos-tabelle__klein {
  display: block;
  font-size: .8rem;
  color: var(--ghos-text-leise);
  margin-top: .15rem;
}

.ghos-tabelle__zeile--inaktiv td {
  color: var(--ghos-text-leise);
}

/* ════════════════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════════════════ */

.ghos-badge {
  display: inline-block;
  padding: .15em .55em;
  font-size: .8rem;
  font-weight: 500;
  border-radius: 999px;
  background: #e6e8ee;
  color: var(--ghos-text-zart);
}
.ghos-badge--ok {
  background: var(--ghos-erfolg-bg);
  color: var(--ghos-erfolg-text);
}
.ghos-badge--fehler {
  background: var(--ghos-fehler-bg);
  color: var(--ghos-fehler-text);
}
.ghos-badge--inaktiv {
  background: #f0eee7;
  color: #8a8474;
}
.ghos-badge--addon {
  background: var(--ghos-info-bg);
  color: var(--ghos-info-text);
}


/* ════════════════════════════════════════════════════════════════════
   SETUP-WIZARD 2.0 (v0.1.2.2)
   Fortschrittsanzeige (5 Schritte) + Wizard-Karte + Form-Erweiterungen.
   ════════════════════════════════════════════════════════════════════ */

.ghos-wizard-body {
  background: var(--ghos-bg, #f7f5ee);
  min-height: 100vh;
  margin: 0;
  font-family: var(--ghos-schrift-fliesstext, system-ui, -apple-system, sans-serif);
  color: var(--ghos-text, #1a1a1a);
}

.ghos-wizard {
  max-width: 880px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ghos-wizard__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ghos-wizard__marke {
  font-size: 1.05rem;
  letter-spacing: .03em;
}

/* ── Fortschrittsanzeige ───────────────────────────────────────────── */
.ghos-wizard-progress {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .25rem;
  align-items: stretch;
  background: var(--ghos-karte-bg, #fff);
  border-radius: 12px;
  padding: 1rem .75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.ghos-wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 0 .25rem;
  text-align: center;
  position: relative;
}
.ghos-wizard-step + .ghos-wizard-step::before {
  content: '';
  position: absolute;
  top: 18px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: #d8d4c8;
  z-index: 0;
}
.ghos-wizard-step--abgeschlossen + .ghos-wizard-step::before,
.ghos-wizard-step--aktiv::before {
  background: var(--ghos-primaer, #0f172a);
}
.ghos-wizard-step__nr {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e6e2d4;
  color: #6e6754;
  font-weight: 600;
  border: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.ghos-wizard-step--aktiv .ghos-wizard-step__nr {
  background: var(--ghos-primaer, #0f172a);
  color: #fff;
  border-color: var(--ghos-primaer, #0f172a);
  box-shadow: 0 0 0 4px rgba(15,23,42,.08);
}
.ghos-wizard-step--abgeschlossen .ghos-wizard-step__nr {
  background: var(--ghos-akzent, #10b981);
  color: #fff;
}
.ghos-wizard-step--abgeschlossen .ghos-wizard-step__nr::after {
  content: '✓';
  font-size: .9rem;
  margin-left: -1ch;
  width: 1ch;
}
.ghos-wizard-step--abgeschlossen .ghos-wizard-step__nr {
  font-size: 0;  /* Zahl ausblenden, ✓ einblenden */
}
.ghos-wizard-step__label {
  font-size: .8rem;
  color: var(--ghos-text-zart, #555);
  font-weight: 500;
}
.ghos-wizard-step--aktiv .ghos-wizard-step__label {
  color: var(--ghos-text, #1a1a1a);
  font-weight: 600;
}
.ghos-wizard-step--zukunft .ghos-wizard-step__label {
  color: #999;
}

/* ── Karte ─────────────────────────────────────────────────────────── */
.ghos-wizard__karte {
  background: var(--ghos-karte-bg, #fff);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.04);
  padding: 2rem 2rem 2.25rem;
}
.ghos-wizard__titel {
  font-family: var(--ghos-schrift-ueberschrift, inherit);
  font-size: 1.5rem;
  margin: 0 0 1.25rem;
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
}
.ghos-wizard__schritt-nr {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ghos-text-zart, #777);
  font-weight: 500;
}
.ghos-wizard__inhalt {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ghos-wizard__fuss {
  text-align: center;
  font-size: .85rem;
  color: var(--ghos-text-zart, #777);
}
.ghos-wizard__fuss a {
  color: inherit;
}

/* ── Form-Erweiterungen für den Wizard ─────────────────────────────── */
.ghos-form--breit {
  max-width: 100%;
}
.ghos-feld-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.ghos-feld--klein {
  flex: 0 1 160px;
}
.ghos-fieldset {
  border: 1px solid #e2dfd4;
  border-radius: 10px;
  padding: 1rem 1.25rem 1.25rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.ghos-fieldset__legend {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ghos-text-zart, #777);
  font-weight: 600;
  padding: 0 .5rem;
}
.ghos-pflicht {
  color: #c0392b;
  font-weight: 700;
}
.ghos-pille {
  display: inline-block;
  padding: .15em .55em;
  font-size: .85rem;
  font-weight: 500;
  border-radius: 999px;
  background: var(--ghos-akzent, #10b981);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ghos-radio {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .55rem .75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
}
.ghos-radio:hover {
  background: rgba(0,0,0,.03);
}
.ghos-radio input {
  margin-top: .25rem;
}
.ghos-checkbox {
  display: flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
}
.ghos-checkbox--tag {
  padding: .35rem .55rem;
  border-radius: 6px;
  font-size: .9rem;
}
.ghos-checkbox--tag:hover {
  background: rgba(0,0,0,.04);
}
.ghos-tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .35rem;
}

.ghos-details {
  border-top: 1px dashed #d6d2c4;
  padding-top: .75rem;
}
.ghos-details summary {
  cursor: pointer;
  font-size: .9rem;
  color: var(--ghos-text-zart, #555);
  margin-bottom: .5rem;
}

.ghos-mb-md { margin-bottom: 1rem; }

@media (max-width: 600px) {
  .ghos-wizard__karte { padding: 1.25rem 1rem 1.5rem; }
  .ghos-wizard-step__label { display: none; }
  .ghos-wizard-progress { grid-template-columns: repeat(5, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   v0.1.7 — Hausbetreiber-Domäne (Häuser, Räume, Belegung)
   ════════════════════════════════════════════════════════════════════ */

/* ── Allgemeine Layout-Bausteine ──────────────────────────────────── */
.ghos-aktion-leiste {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.ghos-block__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.ghos-block--gefahr {
  border: 1px solid #e2c2c2;
  background: #fcf6f6;
}
.ghos-h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.ghos-h3 { font-size: 1rem;    margin: 0 0 .5rem; }
.ghos-text { line-height: 1.55; margin: 0 0 .75rem; }
.ghos-text-zart { color: var(--ghos-text-zart, #777); font-size: .9rem; }

/* ── Buttons-Erweiterung ──────────────────────────────────────────── */
.ghos-btn--klein {
  padding: .25rem .55rem;
  font-size: .82rem;
}
.ghos-btn--gefahr {
  background: #fff;
  color: #a82c2c;
  border-color: #d8a8a8;
}
.ghos-btn--gefahr:hover {
  background: #f4dada;
  border-color: #b06a6a;
}

/* ── Badges ───────────────────────────────────────────────────────── */
.ghos-badge--leise {
  background: #eee;
  color: #555;
  border-color: #ddd;
}

/* ── Forms: Fieldset-System für lange Formulare ───────────────────── */
.ghos-form--breit { max-width: 880px; }
.ghos-fieldset {
  border: 1px solid #e3e0d6;
  border-radius: 8px;
  padding: 1rem 1.25rem 1.25rem;
  margin: 0 0 1rem 0;
  background: #fff;
}
.ghos-fieldset__legend {
  padding: 0 .5rem;
  font-weight: 600;
  font-size: .92rem;
  color: var(--ghos-text-zart, #555);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ghos-feld-zwei,
.ghos-feld-drei {
  display: grid;
  gap: 1rem;
}
.ghos-feld-zwei  { grid-template-columns: 1fr 1fr; }
.ghos-feld-drei  { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 720px) {
  .ghos-feld-zwei,
  .ghos-feld-drei { grid-template-columns: 1fr; }
}
.ghos-feld__hilfe {
  display: block;
  font-size: .82rem;
  color: var(--ghos-text-zart, #777);
  margin-top: .35rem;
  line-height: 1.4;
}
.ghos-form-aktionen {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #ebe7d9;
}
.ghos-tags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .35rem .75rem;
}

/* ── v1.37.0 — Chip-Toggle für Ausstattungs-Items ──────────────────
   Ersetzt die alte Checkbox+Textfeld-Stapel-Darstellung. Klick auf
   den Chip toggelt aktiv; das Notiz-Icon erscheint nur bei aktiven
   Chips und blendet einen Inline-Editor unterhalb des Chips ein. */
.ghos-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  align-items: flex-start;
}
.ghos-chip-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  font-size: .88rem;
}
.ghos-chip-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .75rem .42rem .65rem;
  background: #f3f1ea;
  border: 1px solid #e3dfd2;
  color: #4a4034;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  line-height: 1.15;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.ghos-chip-toggle__btn:hover {
  background: #ebe6d6;
  border-color: #d6cfb8;
}
.ghos-chip-toggle__btn:focus-visible {
  outline: 2px solid var(--ghos-akzent, #773e18);
  outline-offset: 2px;
}
.ghos-chip-toggle__haken {
  display: inline-block;
  width: 14px; height: 14px;
  border: 1.5px solid #b3a98e;
  border-radius: 4px;
  background: #fff;
  position: relative;
  flex-shrink: 0;
}
.ghos-chip-toggle--aktiv .ghos-chip-toggle__btn {
  background: var(--ghos-akzent, #773e18);
  border-color: var(--ghos-akzent, #773e18);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.ghos-chip-toggle--aktiv .ghos-chip-toggle__haken {
  background: var(--ghos-akzent, #773e18);
  border-color: rgba(255,255,255,.85);
}
.ghos-chip-toggle--aktiv .ghos-chip-toggle__haken::after {
  content: "";
  position: absolute;
  left: 3px; top: -0.5px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ghos-chip-toggle__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ghos-chip-toggle__tag {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(0,0,0,.08);
  font-size: .7rem;
  border-radius: 8px;
  margin-left: .15rem;
}
.ghos-chip-toggle--aktiv .ghos-chip-toggle__tag {
  background: rgba(255,255,255,.2);
}
.ghos-chip-toggle__notiz-btn {
  display: none;  /* nur sichtbar bei aktiven Chips */
  position: absolute;
  background: #fff;
  border: 1px solid #d6cfb8;
  color: #7a5a00;
  width: 22px; height: 22px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  margin-top: -28px;
  margin-left: -10px;
  align-self: flex-end;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  align-items: center;
  justify-content: center;
}
.ghos-chip-toggle--aktiv .ghos-chip-toggle__notiz-btn {
  display: inline-flex;
}
.ghos-chip-toggle__notiz-btn:hover {
  background: #fef9e7;
  border-color: #e2b13b;
}
.ghos-chip-toggle__notiz-btn--gefuellt {
  background: #e2b13b;
  color: #fff;
  border-color: #b58d2a;
}
.ghos-chip-toggle__editor {
  display: flex;
  gap: .35rem;
  align-items: center;
  margin-top: .35rem;
  padding: .4rem .55rem;
  background: #fffdf3;
  border: 1px solid #e2b13b;
  border-radius: 8px;
  flex-basis: 100%;
  min-width: 240px;
}
.ghos-chip-toggle__editor input[type="text"] {
  flex: 1;
  border: 1px solid #d6cfb8;
  background: #fff;
  padding: .35rem .55rem;
  font-size: .85rem;
  border-radius: 4px;
  min-width: 0;
}
.ghos-chip-toggle__editor-fertig {
  background: var(--ghos-akzent, #773e18);
  color: #fff;
  border: 0;
  padding: .35rem .8rem;
  font-size: .82rem;
  border-radius: 4px;
  cursor: pointer;
}
.ghos-chip-toggle__editor-fertig:hover {
  filter: brightness(1.1);
}

.ghos-checkbox {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem;
  font-size: .92rem;
  cursor: pointer;
  border-radius: 4px;
}
.ghos-checkbox:hover { background: rgba(0,0,0,.03); }
.ghos-checkbox input[type="checkbox"] { margin: 0; }

.ghos-filter-form select {
  padding: .35rem .5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: .9rem;
}

/* ── Quill-Editor-Wrapper ─────────────────────────────────────────── */
.ghos-quill {
  background: #fff;
  border-radius: 0 0 4px 4px;
  min-height: 220px;
}
.ql-toolbar.ql-snow,
.ql-container.ql-snow { border-color: #d6d2c4; }
.ql-editor { min-height: 200px; font-size: .95rem; }

/* ── Definitionsliste ─────────────────────────────────────────────── */
.ghos-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .5rem 1rem;
  margin: 0 0 1rem 0;
}
.ghos-dl dt {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ghos-text-zart, #777);
  align-self: center;
}
.ghos-dl dd { margin: 0; }

/* ── Haus-Detail Layout ───────────────────────────────────────────── */
.ghos-haus-detail__kopf {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
@media (max-width: 720px) {
  .ghos-haus-detail__kopf { grid-template-columns: 1fr; }
}
.ghos-haus-detail__logo {
  border: 1px dashed #d6d2c4;
  border-radius: 6px;
  padding: .75rem;
  background: #fafaf6;
}
.ghos-haus-detail__logo strong {
  display: block;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ghos-text-zart, #777);
  margin-bottom: .5rem;
}
.ghos-haus-detail__logo-img {
  max-width: 100%;
  max-height: 120px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: .5rem;
  display: block;
}
.ghos-haus-detail__logo-upload { margin-top: .5rem; }
.ghos-haus-detail__logo-upload input[type="file"] {
  display: block;
  font-size: .82rem;
  margin-bottom: .5rem;
  width: 100%;
}
.ghos-haus-detail__beschreibung {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #ebe7d9;
  line-height: 1.6;
}
.ghos-haus-detail__beschreibung h2,
.ghos-haus-detail__beschreibung h3,
.ghos-haus-detail__beschreibung h4 {
  margin: 1rem 0 .5rem;
}
.ghos-haus-detail__beschreibung ul,
.ghos-haus-detail__beschreibung ol { padding-left: 1.5rem; }
.ghos-haus-detail__galerie-upload {
  border: 1px dashed #d6d2c4;
  border-radius: 6px;
  padding: .75rem;
  margin-bottom: 1rem;
  background: #fafaf6;
}
.ghos-haus-detail__galerie-upload input[type="file"] {
  display: block;
  margin: .35rem 0 .5rem;
  font-size: .9rem;
}

/* ── Galerie-Grid ─────────────────────────────────────────────────── */
.ghos-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .75rem;
}
.ghos-galerie__item {
  position: relative;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #f0ede1;
  border: 1px solid #e3e0d6;
}
.ghos-galerie__item--titel {
  border: 2px solid #c8a55a;
  outline: 2px solid #f3e3b7;
  outline-offset: 2px;
}
.ghos-galerie__bild {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
}
.ghos-galerie__aktionen {
  display: flex;
  gap: .25rem;
  padding: .35rem;
  background: #fff;
  border-top: 1px solid #ebe7d9;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* ── Belegungs-Kalender ─────────────────────────────────────────────
   v0.7.1 — Scroll-Wrapper getrennt vom Container, damit der Header
   („Haupthaus · Stammdaten") nicht horizontal mitscrollt. Linke
   Zeilenlabel-Spalte sticky, damit beim horizontalen Scrollen sichtbar
   bleibt welche Zeile gerade gezeigt wird. Mindest-Tagesbreite auf
   38px hochgezogen — 28px war zu schmal, Buchungs-Block-Namen waren
   nicht lesbar. */
.ghos-belegung-kalender {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.ghos-belegung-haus {
  background: #fff;
  border: 1px solid #e3e0d6;
  border-radius: 8px;
  padding: 1rem;
}
.ghos-belegung-haus__kopf {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .75rem;
}
.ghos-belegung-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* Eigener Stacking-Context, damit sticky gegen den Wrapper greift */
  position: relative;
  /* v1.37.0 — Touch-Scroll-Verbesserungen */
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
/* v1.37.0 — Rechter Fade-Gradient als visueller Hinweis „es geht
   weiter nach rechts". Verschwindet automatisch wenn ans Ende
   gescrollt wurde (per CSS-Trick mit scroll-driven shadow ist
   nicht überall verfügbar, daher fester Gradient — der harmoniert
   mit der hellen Tabelle und stört nicht). Nur auf Mobile, weil
   Desktop genug Platz hat. */
@media (max-width: 720px) {
  .ghos-belegung-scroll::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 22px;
    background: linear-gradient(to left, rgba(250,247,232,.92), rgba(250,247,232,0));
    pointer-events: none;
    z-index: 3;
  }
}
.ghos-belegung-grid {
  display: grid;
  grid-template-columns: 200px repeat(var(--ghos-tage, 31), minmax(38px, 1fr));
  grid-auto-rows: 32px;
  position: relative;
  /* v1.84.2 — Min-width bleibt schlank: 200 + 31×38 = 1378 px.
     Das `1fr` in den Tagesspalten sorgt dafür, dass die Spalten
     den verfügbaren Container-Platz vollständig nutzen — also auf
     einem 27"-Monitor automatisch breiter werden, ohne dass die
     Min-Width des Grids hochgezogen werden muss.
     v1.84.1-Mistake: Stufen-Media-Queries hatten min-width auf
     bis zu 2368 px hochgesetzt — das war BREITER als der Content
     auf 27", also scrollte das Grid horizontal (sichtbar waren nur
     bis Tag 24). Rücknahme: 1fr regelt das automatisch. */
  min-width: max(100%, calc(200px + var(--ghos-tage, 31) * 38px));
}
.ghos-belegung-grid__zeile-label {
  grid-column: 1;
  border-right: 1px solid #ebe7d9;
  padding: .35rem .6rem;
  font-size: .85rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .05rem;
  line-height: 1.25;
  background: #fafaf6;
  /* Sticky linke Spalte — bleibt beim horizontalen Scroll sichtbar */
  position: sticky;
  left: 0;
  z-index: 2;
  /* v1.37.0 — Schatten rechts an der sticky-Spalte als visueller
     Hinweis dass die Tabelle horizontal-scrollt. Nur bemerkbar wenn
     tatsächlich gescrollt wird (vorher liegt die Spalte direkt am
     linken Rand). */
  box-shadow: 4px 0 6px -3px rgba(0,0,0,.06);
}
.ghos-belegung-grid__zeile-label__name {
  color: var(--ghos-text);
  white-space: normal;
  word-break: break-word;
}
.ghos-belegung-grid__zeile-label__plaetze {
  font-size: .72rem;
  color: var(--ghos-text-leise);
  font-variant-numeric: tabular-nums;
}
.ghos-belegung-grid__tag {
  grid-row: 1;
  text-align: center;
  font-size: .78rem;
  color: var(--ghos-text-zart, #888);
  border-bottom: 1px solid #ebe7d9;
  padding: .35rem 0;
  font-weight: 600;
}
.ghos-belegung-grid__tag--we {
  background: #f4f1e3;
  color: #555;
}
.ghos-belegung-grid__zelle {
  border-right: 1px solid #f0ede1;
  border-bottom: 1px solid #f0ede1;
  background: #fff;
}
.ghos-belegung-grid__zelle--we { background: #faf7e8; }
.ghos-belegung-block {
  align-self: center;
  height: 24px;
  margin: 4px 1px;
  padding: 0 .5rem;
  border-radius: 4px;
  font-size: .82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  text-decoration: none;
  overflow: hidden;
  z-index: 2;
  cursor: pointer;
}
.ghos-belegung-block__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ghos-belegung-block--fest {
  background: #2c5d3f;
  color: #fff;
}
.ghos-belegung-block--fest:hover { background: #1d4a2e; }
.ghos-belegung-block--vormerk {
  background: #f3e3b7;
  color: #5a4a1a;
  border: 1px dashed #c8a55a;
}
.ghos-belegung-block--vormerk:hover { background: #e6d495; }
.ghos-belegung-block--neutral {
  background: #ddd;
  color: #444;
}

@media (max-width: 720px) {
  .ghos-belegung-grid {
    /* Mobile: schmaler — Tages-Header bleibt 26px-min, linke Spalte 130 */
    grid-template-columns: 130px repeat(var(--ghos-tage, 31), minmax(26px, 1fr));
    min-width: max(100%, calc(130px + var(--ghos-tage, 31) * 26px));
  }
  .ghos-belegung-grid__zeile-label { padding: .3rem .45rem; }
  .ghos-belegung-grid__zeile-label__name { font-size: .8rem; }
  .ghos-belegung-block { font-size: .72rem; padding: 0 .25rem; }
  .ghos-belegung-haus { padding: .75rem; }
  /* v1.37.0 — Tagesnummern kompakter, damit mehr ins Viewport passt */
  .ghos-belegung-grid__tag {
    font-size: .72rem;
    padding: .25rem .15rem;
  }
}

/* v1.37.0 — Sehr schmale Phones (<= 380px): nochmal kompakter, plus
   ein dezenter Touch-Hinweis über der Tabelle. */
@media (max-width: 380px) {
  .ghos-belegung-grid {
    grid-template-columns: 110px repeat(var(--ghos-tage, 31), minmax(22px, 1fr));
    min-width: max(100%, calc(110px + var(--ghos-tage, 31) * 22px));
  }
  .ghos-belegung-grid__zeile-label__name { font-size: .75rem; }
  .ghos-belegung-grid__zeile-label__plaetze { font-size: .65rem; }
  .ghos-belegung-haus__kopf::after {
    content: "← horizontal scrollen →";
    display: block;
    font-size: .72rem;
    color: var(--ghos-text-leise, #888);
    margin-top: .25rem;
    text-align: center;
    font-style: italic;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v0.3.0 — UX OVERHAUL: Toolbar, Pills, Cards, Segmented, Empty-State,
                         Sortable Headers, polierte Buttons
   ════════════════════════════════════════════════════════════════════ */

/* ── Display-Headlines (Serif) ────────────────────────────────────── */

.ghos-display {
  font-family: var(--ghos-font-display);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.ghos-admin__inhalt-kopf h1 {
  font-family: var(--ghos-font-display);
  font-weight: 400;
  letter-spacing: -.015em;
  font-size: 1.85rem;
  line-height: 1.1;
  margin: 0;
}

/* ── Sticky Listen-Toolbar ────────────────────────────────────────── */

.ghos-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  padding: .75rem 1rem;
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  box-shadow: var(--ghos-schatten-mini);
  margin: 0 0 1rem 0;
  position: sticky;
  top: 0;
  z-index: 30;
}
.ghos-toolbar__suche {
  flex: 1 1 220px;
  min-width: 180px;
  position: relative;
}
.ghos-toolbar__suche input {
  width: 100%;
  padding: .55rem .75rem .55rem 2.25rem;
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-klein);
  background: var(--ghos-bg-zart);
  font: inherit;
  color: inherit;
  transition: border-color var(--ghos-uebergang), box-shadow var(--ghos-uebergang), background var(--ghos-uebergang);
}
.ghos-toolbar__suche input:focus {
  outline: none;
  border-color: var(--ghos-akzent);
  background: var(--ghos-bg-karte);
  box-shadow: var(--ghos-schatten-fokus);
}
.ghos-toolbar__suche::before {
  content: "";
  position: absolute;
  left: .65rem; top: 50%;
  width: 16px; height: 16px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") no-repeat center / contain;
  pointer-events: none;
}
.ghos-toolbar__filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.ghos-toolbar__select,
.ghos-toolbar select {
  padding: .5rem .75rem;
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-klein);
  background: var(--ghos-bg-karte);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--ghos-uebergang);
}
.ghos-toolbar__select:hover,
.ghos-toolbar select:hover { border-color: var(--ghos-trennlinie-kraeftig); }
.ghos-toolbar__select:focus,
.ghos-toolbar select:focus {
  outline: none;
  border-color: var(--ghos-akzent);
  box-shadow: var(--ghos-schatten-fokus);
}
.ghos-toolbar__rechts {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-left: auto;
}

/* ── Segmented Control (View-Toggle Tabelle/Karten) ───────────────── */

.ghos-segmented {
  display: inline-flex;
  background: var(--ghos-bg-tief);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-klein);
  padding: 2px;
  gap: 0;
}
.ghos-segmented__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ghos-text-zart);
  padding: .35rem .7rem;
  font: inherit;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: calc(var(--ghos-radius-klein) - 2px);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: background var(--ghos-uebergang), color var(--ghos-uebergang);
}
.ghos-segmented__btn:hover { color: var(--ghos-text); }
.ghos-segmented__btn--aktiv {
  background: var(--ghos-bg-karte);
  color: var(--ghos-text);
  box-shadow: var(--ghos-schatten-mini);
}
.ghos-segmented__btn svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
}

/* ── Pills (Status, Tags, Counter) ────────────────────────────────── */

.ghos-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .6rem;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--ghos-radius-pille);
  background: var(--ghos-neutral-bg);
  color: var(--ghos-neutral-text);
  border: 1px solid var(--ghos-neutral-rand);
  white-space: nowrap;
}
.ghos-pill::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}
.ghos-pill--erfolg  { background: var(--ghos-erfolg-bg); color: var(--ghos-erfolg-text); border-color: var(--ghos-erfolg-rand); }
.ghos-pill--info    { background: var(--ghos-info-bg);   color: var(--ghos-info-text);   border-color: var(--ghos-info-rand); }
.ghos-pill--warn    { background: var(--ghos-warn-bg);   color: var(--ghos-warn-text);   border-color: var(--ghos-warn-rand); }
.ghos-pill--fehler  { background: var(--ghos-fehler-bg); color: var(--ghos-fehler-text); border-color: var(--ghos-fehler-rand); }
.ghos-pill--zart    { background: var(--ghos-bg-zart); color: var(--ghos-text-zart); border-color: var(--ghos-trennlinie); }
.ghos-pill--ohne-punkt::before { display: none; }
.ghos-pill--klein { font-size: .72rem; padding: .1rem .5rem; }

/* ── Card-Grid + Card (für Listen-Karten-Ansicht) ─────────────────── */

.ghos-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin: 0;
}
.ghos-card {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--ghos-schatten-mini);
  transition: box-shadow var(--ghos-uebergang), border-color var(--ghos-uebergang), transform var(--ghos-uebergang);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  text-decoration: none;
  color: inherit;
}
a.ghos-card:hover,
.ghos-card--klickbar:hover {
  border-color: var(--ghos-trennlinie-kraeftig);
  box-shadow: var(--ghos-schatten-hover);
  transform: translateY(-1px);
  /* v1.84.3 — Color bleibt inherit, damit der ganze Card-Text
     nicht zur Link-Farbe wechselt (Card ist ein klickbarer Block,
     nicht ein Text-Link). */
  color: inherit;
}
a.ghos-card,
a.ghos-tile,
a.ghos-stat {
  text-decoration: none;
  color: inherit;
}
a.ghos-card:hover,
a.ghos-tile:hover,
a.ghos-stat:hover {
  text-decoration: none;
  color: inherit;
}
.ghos-card__kopf {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  justify-content: space-between;
}
.ghos-card__titel {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ghos-text);
  margin: 0;
}
.ghos-card__sub {
  font-size: .85rem;
  color: var(--ghos-text-zart);
  margin: 0;
}
.ghos-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  margin-top: .25rem;
  font-size: .82rem;
  color: var(--ghos-text-zart);
}
.ghos-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.ghos-card__fuss {
  margin-top: auto;
  padding-top: .5rem;
  border-top: 1px dashed var(--ghos-trennlinie);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  color: var(--ghos-text-leise);
}
.ghos-card__bild {
  width: calc(100% + 2.2rem);
  margin: -1rem -1.1rem .25rem -1.1rem;
  height: 140px;
  object-fit: cover;
  background: var(--ghos-bg-tief);
  border-radius: var(--ghos-radius) var(--ghos-radius) 0 0;
  display: block;
}
.ghos-card__bild-fallback {
  width: calc(100% + 2.2rem);
  margin: -1rem -1.1rem .25rem -1.1rem;
  height: 140px;
  background: linear-gradient(135deg, var(--ghos-bg-tief) 0%, var(--ghos-bg-zart) 100%);
  border-radius: var(--ghos-radius) var(--ghos-radius) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ghos-text-leise);
  font-family: var(--ghos-font-display);
  font-size: 2.5rem;
}

/* ── Sortable Table-Headers ───────────────────────────────────────── */

.ghos-tabelle thead th[data-sort] {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 1.5rem;
  transition: color var(--ghos-uebergang);
}
.ghos-tabelle thead th[data-sort]:hover {
  color: var(--ghos-text);
}
.ghos-tabelle thead th[data-sort]::after {
  content: "";
  position: absolute;
  right: .6rem; top: 50%;
  width: 10px; height: 10px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cdc9bd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='8 9 12 5 16 9'/><polyline points='8 15 12 19 16 15'/></svg>") no-repeat center / contain;
  opacity: .6;
}
.ghos-tabelle thead th[data-sort-aktiv="asc"]::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3a5f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 15 12 9 18 15'/></svg>") no-repeat center / contain;
  opacity: 1;
}
.ghos-tabelle thead th[data-sort-aktiv="desc"]::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3a5f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / contain;
  opacity: 1;
}

/* Tabellen-Zeile mit Hover + klickbarem Link */
.ghos-tabelle tbody tr {
  transition: background var(--ghos-uebergang-schnell);
}
.ghos-tabelle tbody tr:hover {
  background: var(--ghos-bg-zart);
}
.ghos-tabelle tbody tr.ghos-tabelle__zeile--klickbar { cursor: pointer; }

/* ── Empty-State ──────────────────────────────────────────────────── */

.ghos-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--ghos-bg-karte);
  border: 1px dashed var(--ghos-trennlinie-kraeftig);
  border-radius: var(--ghos-radius);
}
.ghos-empty__icon {
  width: 56px; height: 56px;
  margin: 0 auto .75rem;
  border-radius: 50%;
  background: var(--ghos-bg-tief);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ghos-text-leise);
}
.ghos-empty__icon svg { width: 28px; height: 28px; }
.ghos-empty__titel {
  font-family: var(--ghos-font-display);
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0 0 .35rem 0;
  color: var(--ghos-text);
}
.ghos-empty__text {
  margin: 0 auto 1.2rem;
  max-width: 28rem;
  color: var(--ghos-text-zart);
  font-size: .95rem;
}

/* ── Polierte Buttons (Erweiterung, BC) ───────────────────────────── */

.ghos-btn {
  border-radius: var(--ghos-radius-klein);
  font-weight: 500;
  letter-spacing: .005em;
  transition: transform var(--ghos-uebergang-schnell), box-shadow var(--ghos-uebergang),
              background var(--ghos-uebergang), border-color var(--ghos-uebergang);
}
.ghos-btn:hover { box-shadow: var(--ghos-schatten-1); }
.ghos-btn:active { transform: translateY(1px); box-shadow: none; }
.ghos-btn:focus-visible { outline: none; box-shadow: var(--ghos-schatten-fokus); }
.ghos-btn--haupt,
.ghos-btn--primaer {
  background: var(--ghos-akzent);
  color: var(--ghos-akzent-text);
  border-color: var(--ghos-akzent);
}
.ghos-btn--haupt:hover,
.ghos-btn--primaer:hover {
  background: var(--ghos-akzent-hell);
  border-color: var(--ghos-akzent-hell);
  color: var(--ghos-akzent-text);  /* v1.84.3 — bleibt weiß */
  text-decoration: none;
}
.ghos-btn--icon {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.ghos-btn--icon svg { width: 16px; height: 16px; }

/* ── Page-Header (Hero über Listen) ───────────────────────────────── */

.ghos-page-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 0 1.25rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ghos-trennlinie);
}
.ghos-page-header__titel {
  font-family: var(--ghos-font-display);
  font-weight: 400;
  font-size: 1.85rem;
  letter-spacing: -.015em;
  margin: 0 0 .15rem 0;
  line-height: 1.1;
}
.ghos-page-header__sub {
  margin: 0;
  color: var(--ghos-text-zart);
  font-size: .92rem;
}
.ghos-page-header__aktionen {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* ── Quick-Stat-Cards (Dashboard-artig oben in Listen) ────────────── */

.ghos-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
  margin: 0 0 1rem 0;
}
.ghos-stat {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  transition: border-color var(--ghos-uebergang);
}
.ghos-stat:hover { border-color: var(--ghos-trennlinie-kraeftig); }
.ghos-stat__zahl {
  font-family: var(--ghos-font-display);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ghos-text);
}
.ghos-stat__label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ghos-text-leise);
  font-weight: 500;
}
.ghos-stat--akzent .ghos-stat__zahl { color: var(--ghos-akzent); }
.ghos-stat--warn .ghos-stat__zahl { color: var(--ghos-warn-text); }
.ghos-stat--erfolg .ghos-stat__zahl { color: var(--ghos-erfolg-text); }

/* ── Inhalt-Sichtbarkeit (View-Toggle) ────────────────────────────── */

.ghos-list-view[data-aktiv="tabelle"] .ghos-list-view__karten,
.ghos-list-view[data-aktiv="karten"]  .ghos-list-view__tabelle {
  display: none;
}

/* ── Sidebar-Modernisierung (dunkle BG #21314b) ──────────────────── */

.ghos-admin__sidebar {
  box-shadow: 1px 0 0 rgba(0, 0, 0, .15);
}
.ghos-admin__nav-item {
  border-radius: var(--ghos-radius-klein);
  margin: 1px .5rem;
  padding: .5rem .8rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
  text-decoration: none;
  color: #c9d2e2;
  transition: background var(--ghos-uebergang-schnell), color var(--ghos-uebergang-schnell);
}
.ghos-admin__nav-item:hover {
  background: rgba(255, 255, 255, .07);
  color: #ffffff;
}
.ghos-admin__nav-item--aktiv,
.ghos-admin__nav-item--aktiv:hover {
  background: rgba(255, 255, 255, .12);
  color: #ffffff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #ffffff;
}
.ghos-admin__nav-item--inaktiv {
  color: #6b7891;
  font-style: italic;
  cursor: default;
}
.ghos-admin__nav-item--inaktiv:hover {
  background: transparent;
  color: #6b7891;
}
.ghos-admin__nav-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  opacity: .85;
}

/* Topbar mit Mobile-Hamburger */
.ghos-admin__topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ghos-bg-karte);
  border-bottom: 1px solid var(--ghos-trennlinie);
  padding: .5rem .75rem;
  align-items: center;
  gap: .75rem;
  height: var(--ghos-topbar-h);
}
.ghos-admin__topbar-marke {
  font-weight: 600;
  font-size: .95rem;
  flex: 1;
}
.ghos-admin__hamburger {
  appearance: none;
  border: 1px solid var(--ghos-trennlinie);
  background: var(--ghos-bg-karte);
  border-radius: var(--ghos-radius-klein);
  padding: .4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
}
.ghos-admin__hamburger svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .ghos-admin__topbar { display: flex; }
  .ghos-admin__sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 80%; max-width: 18rem;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--ghos-uebergang);
    box-shadow: var(--ghos-schatten-2);
  }
  .ghos-admin__sidebar--offen { transform: translateX(0); }
  .ghos-admin__inhalt { margin-left: 0; }
  .ghos-admin__sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(31, 42, 55, .4);
    z-index: 45;
    opacity: 0; pointer-events: none;
    transition: opacity var(--ghos-uebergang);
  }
  .ghos-admin__sidebar-backdrop--sichtbar {
    opacity: 1; pointer-events: auto;
  }
}

/* ── Toolbar + Page-Header Mobile ─────────────────────────────────── */

@media (max-width: 600px) {
  .ghos-toolbar {
    padding: .6rem;
    flex-direction: column;
    align-items: stretch;
  }
  .ghos-toolbar__rechts { margin-left: 0; justify-content: space-between; }
  .ghos-page-header { flex-direction: column; align-items: stretch; }
  .ghos-page-header__aktionen { justify-content: stretch; }
  .ghos-page-header__aktionen .ghos-btn { flex: 1; }
}

/* ════════════════════════════════════════════════════════════════════
   v0.4.0 — DASHBOARD WIDGET-SYSTEM mit Drag & Drop
   ════════════════════════════════════════════════════════════════════ */

.ghos-dash {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  margin: 0 0 1.5rem 0;
}

.ghos-dash__toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  padding: .55rem .85rem;
  flex-wrap: wrap;
}
.ghos-dash__toolbar-info {
  font-size: .88rem;
  color: var(--ghos-text-zart);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ghos-dash__toolbar-info svg { width: 16px; height: 16px; flex-shrink: 0; }

.ghos-dash__widget {
  grid-column: span 4;
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--ghos-schatten-mini);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  min-height: 120px;
  position: relative;
  transition: box-shadow var(--ghos-uebergang), transform var(--ghos-uebergang);
}
.ghos-dash__widget:hover { box-shadow: var(--ghos-schatten-1); }
.ghos-dash__widget--span2 { grid-column: span 8; }
.ghos-dash__widget--span3 { grid-column: span 12; }

/* Drag-State */
.ghos-dash__widget.is-dragging {
  opacity: .35;
  transform: scale(.98);
}
.ghos-dash__widget.is-drop-target-before {
  box-shadow: -3px 0 0 var(--ghos-akzent), var(--ghos-schatten-1);
}
.ghos-dash__widget.is-drop-target-after {
  box-shadow: 3px 0 0 var(--ghos-akzent), var(--ghos-schatten-1);
}

/* Bearbeitungs-Modus: alle Widgets bekommen einen wackelnden Drag-Hinweis */
.ghos-dash.is-editing .ghos-dash__widget {
  cursor: grab;
  outline: 1px dashed var(--ghos-trennlinie-kraeftig);
  outline-offset: 2px;
}
.ghos-dash.is-editing .ghos-dash__widget:active { cursor: grabbing; }

.ghos-dash__widget-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.ghos-dash__widget-titel {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ghos-text-leise);
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.ghos-dash__widget-titel svg { width: 14px; height: 14px; opacity: .7; }
.ghos-dash__drag-handle {
  display: none;
  cursor: grab;
  color: var(--ghos-text-leise);
  padding: .15rem;
  border-radius: 4px;
  background: transparent;
  border: 0;
  transition: background var(--ghos-uebergang-schnell);
}
.ghos-dash__drag-handle:hover { background: var(--ghos-bg-zart); color: var(--ghos-text-zart); }
.ghos-dash__drag-handle svg { width: 16px; height: 16px; display: block; }
.ghos-dash.is-editing .ghos-dash__drag-handle { display: inline-flex; }

.ghos-dash__hide-btn {
  display: none;
  background: transparent;
  border: 0;
  color: var(--ghos-text-leise);
  cursor: pointer;
  padding: .15rem .35rem;
  font-size: .8rem;
  border-radius: 4px;
}
.ghos-dash__hide-btn:hover { background: var(--ghos-fehler-bg); color: var(--ghos-fehler-text); }
.ghos-dash.is-editing .ghos-dash__hide-btn { display: inline-flex; }

.ghos-dash__widget-zahl {
  font-family: var(--ghos-font-display);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ghos-text);
  margin: 0;
}
.ghos-dash__widget-sub {
  font-size: .85rem;
  color: var(--ghos-text-zart);
  margin: 0;
}

/* Listen-Widget (Anfragen, Buchungen) */
.ghos-dash__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ghos-dash__liste li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--ghos-trennlinie);
  font-size: .9rem;
}
.ghos-dash__liste li:last-child { border-bottom: 0; }
.ghos-dash__liste a { color: inherit; text-decoration: none; flex: 1; min-width: 0; }
.ghos-dash__liste a strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghos-dash__liste a small { color: var(--ghos-text-leise); font-size: .78rem; }
.ghos-dash__liste-leer {
  color: var(--ghos-text-leise);
  font-size: .88rem;
  text-align: center;
  padding: 1.5rem 0;
  font-style: italic;
}

/* Schnell-Aktionen-Widget */
.ghos-dash__aktionen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.ghos-dash__aktion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .75rem .5rem;
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-klein);
  background: var(--ghos-bg-zart);
  text-decoration: none;
  color: var(--ghos-text);
  font-size: .82rem;
  text-align: center;
  transition: background var(--ghos-uebergang), border-color var(--ghos-uebergang), transform var(--ghos-uebergang-schnell);
}
.ghos-dash__aktion:hover {
  background: var(--ghos-akzent-sehr-hell);
  border-color: var(--ghos-akzent);
  color: var(--ghos-akzent);
}
.ghos-dash__aktion:active { transform: translateY(1px); }
.ghos-dash__aktion svg { width: 22px; height: 22px; }

/* Widget hidden (vom User ausgeblendet) */
.ghos-dash__widget--hidden { display: none; }
.ghos-dash__verfuegbar {
  margin-top: .5rem;
  padding: .85rem 1rem;
  background: var(--ghos-bg-zart);
  border: 1px dashed var(--ghos-trennlinie-kraeftig);
  border-radius: var(--ghos-radius);
  font-size: .88rem;
  color: var(--ghos-text-zart);
  display: none;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.ghos-dash.is-editing .ghos-dash__verfuegbar { display: flex; }
.ghos-dash__verfuegbar-titel { font-weight: 600; color: var(--ghos-text); margin-right: .5rem; }
.ghos-dash__verfuegbar-btn {
  border: 1px solid var(--ghos-trennlinie-kraeftig);
  background: var(--ghos-bg-karte);
  border-radius: var(--ghos-radius-pille);
  padding: .25rem .65rem;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.ghos-dash__verfuegbar-btn:hover { background: var(--ghos-akzent-sehr-hell); border-color: var(--ghos-akzent); }
.ghos-dash__verfuegbar-btn svg { width: 12px; height: 12px; }

/* Mini-Belegungs-Heatmap (30 Tage) */
.ghos-dash__heatmap {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 3px;
}
.ghos-dash__heat-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--ghos-bg-tief);
}
.ghos-dash__heat-cell--belegt   { background: var(--ghos-akzent); }
.ghos-dash__heat-cell--teil     { background: var(--ghos-akzent-hell); opacity: .6; }
.ghos-dash__heat-cell--vergangen { background: var(--ghos-trennlinie); opacity: .5; }

/* Mobile: Single-Spalte, kein DnD */
@media (max-width: 767px) {
  .ghos-dash { grid-template-columns: 1fr; }
  .ghos-dash__widget,
  .ghos-dash__widget--span2,
  .ghos-dash__widget--span3 { grid-column: span 1; }
  .ghos-dash.is-editing .ghos-dash__widget { cursor: default; outline: none; }
  .ghos-dash__drag-handle { display: none !important; }
}
@media (max-width: 1100px) and (min-width: 768px) {
  .ghos-dash__widget { grid-column: span 6; }
  .ghos-dash__widget--span2 { grid-column: span 12; }
  .ghos-dash__widget--span3 { grid-column: span 12; }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ CMS / Block-Editor (v0.5.0)                                       ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* Layout */
.ghos-cms-editor__layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; align-items: start; }
@media (max-width: 1024px) { .ghos-cms-editor__layout { grid-template-columns: 1fr; } }

/* Block-Liste */
.ghos-blocks-liste { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.ghos-blocks-add { width: 100%; padding: 1rem; font-weight: 600; }
.ghos-blocks-leer {
  text-align: center; padding: 3rem 1rem; background: var(--ghos-bg-soft, #f8fafc);
  border: 2px dashed var(--ghos-border, #e2e8f0); border-radius: 12px;
}
.ghos-blocks-leer__icon { font-size: 3rem; line-height: 1; color: var(--ghos-text-soft, #64748b); margin-bottom: 1rem; }
.ghos-blocks-leer h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.ghos-blocks-leer p { color: var(--ghos-text-soft, #64748b); margin: 0 0 1.25rem; }

/* Block-Card */
.ghos-block-card {
  background: #fff; border: 1px solid var(--ghos-border, #e2e8f0); border-radius: 10px;
  transition: box-shadow .15s, border-color .15s;
}
.ghos-block-card:hover { border-color: var(--ghos-primaer, #2c5f3f); box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.ghos-block-card.is-inaktiv { opacity: .55; }
.ghos-block-card--ghost { opacity: .4; background: var(--ghos-bg-soft, #f8fafc); }

.ghos-block-card__head {
  display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem;
  border-bottom: 1px solid var(--ghos-border, #e2e8f0);
}
.ghos-block-card__handle {
  cursor: grab; user-select: none; color: var(--ghos-text-soft, #64748b);
  font-size: 1.4rem; line-height: 1; padding: .25rem .4rem; border-radius: 4px;
}
.ghos-block-card__handle:hover { background: var(--ghos-bg-soft, #f1f5f9); }
.ghos-block-card__icon { width: 22px; height: 22px; color: var(--ghos-primaer, #2c5f3f); }
.ghos-block-card__icon svg { width: 100%; height: 100%; }
.ghos-block-card__label { font-weight: 600; font-size: .95rem; }
.ghos-block-card__aktionen { margin-left: auto; display: flex; gap: .25rem; }
.ghos-block-card__btn {
  width: 30px; height: 30px; border: 1px solid var(--ghos-border, #e2e8f0);
  background: #fff; border-radius: 6px; cursor: pointer; padding: 5px;
  color: var(--ghos-text-soft, #64748b); transition: all .15s;
}
.ghos-block-card__btn svg { width: 100%; height: 100%; }
.ghos-block-card__btn:hover { background: var(--ghos-bg-soft, #f1f5f9); color: var(--ghos-text, #0f172a); }
.ghos-block-card__btn--del:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.ghos-block-card__preview { padding: 1rem 1.25rem; font-size: .9rem; line-height: 1.5; color: var(--ghos-text, #0f172a); cursor: pointer; }
.ghos-block-card__preview strong { font-weight: 600; }

/* v0.9.3 — reiche Block-Card-Previews je Typ */
.ghos-preview-leer { color: var(--ghos-text-soft, #64748b); font-style: italic; }
.ghos-preview-tag {
  display: inline-block; padding: .1rem .45rem; border-radius: 3px;
  background: var(--ghos-bg-soft, #f1f5f9); color: var(--ghos-text-soft, #64748b);
  font-size: .72rem; font-family: ui-monospace, SFMono-Regular, monospace;
  margin-right: .35rem; vertical-align: middle;
}
.ghos-preview-auszug {
  color: var(--ghos-text-soft, #64748b); font-size: .85rem;
}
.ghos-preview-url {
  color: var(--ghos-text-soft, #64748b); font-size: .78rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.ghos-preview-bild {
  display: flex; gap: .65rem; align-items: center;
}
.ghos-preview-bild img {
  width: 56px; height: 56px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--ghos-trennlinie, #e2e8f0); flex: 0 0 56px;
}
.ghos-preview-bild span { flex: 1; }
.ghos-preview-galerie {
  display: flex; gap: .35rem; align-items: center; flex-wrap: wrap;
}
.ghos-preview-galerie img {
  width: 48px; height: 48px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--ghos-trennlinie, #e2e8f0);
}
.ghos-preview-anzahl { font-size: .8rem; color: var(--ghos-text-soft, #64748b); margin-left: .2rem; }
.ghos-preview-rest { color: var(--ghos-text-soft, #64748b); }
.ghos-preview-text-bild {
  display: flex; gap: .65rem; align-items: flex-start;
}
.ghos-preview-text-bild > img {
  width: 56px; height: 56px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--ghos-trennlinie, #e2e8f0); flex: 0 0 56px;
}
.ghos-preview-text-bild > div { flex: 1; min-width: 0; }


/* Modal */
.ghos-cms-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.ghos-cms-modal[hidden] { display: none; }
.ghos-cms-modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }
.ghos-cms-modal__panel {
  position: relative; background: #fff; border-radius: 12px; width: 90%; max-width: 600px;
  max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 25px 50px rgba(0,0,0,.25);
}
.ghos-cms-modal__panel--breit { max-width: 900px; }
.ghos-cms-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--ghos-border, #e2e8f0);
}
.ghos-cms-modal__head h2 { margin: 0; font-size: 1.25rem; }
.ghos-cms-modal__close {
  background: transparent; border: none; font-size: 1.75rem; cursor: pointer;
  color: var(--ghos-text-soft, #64748b); width: 36px; height: 36px; line-height: 1;
  border-radius: 6px;
}
.ghos-cms-modal__close:hover { background: var(--ghos-bg-soft, #f1f5f9); color: var(--ghos-text, #0f172a); }
.ghos-cms-modal__body { padding: 1.5rem; overflow-y: auto; flex: 1; }
.ghos-cms-modal__foot {
  display: flex; gap: .5rem; justify-content: flex-end; padding: 1rem 1.5rem;
  border-top: 1px solid var(--ghos-border, #e2e8f0); background: var(--ghos-bg-soft, #f8fafc);
  border-radius: 0 0 12px 12px;
}

/* Block-Typ-Auswahl-Grid (Add-Modal) */
.ghos-block-kat { margin-bottom: 1.75rem; }
.ghos-block-kat__h {
  font-size: .85rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ghos-text-soft, #64748b); margin: 0 0 .75rem; font-weight: 600;
}
.ghos-block-kat__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem;
}
.ghos-block-typ {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  padding: 1rem; background: #fff; border: 1.5px solid var(--ghos-border, #e2e8f0);
  border-radius: 10px; cursor: pointer; text-align: left; transition: all .15s;
  font: inherit; color: inherit;
}
.ghos-block-typ:hover {
  border-color: var(--ghos-primaer, #2c5f3f); background: var(--ghos-bg-soft, #f8fafc);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.ghos-block-typ__icon { color: var(--ghos-primaer, #2c5f3f); width: 28px; height: 28px; }
.ghos-block-typ__icon svg { width: 100%; height: 100%; }
.ghos-block-typ__label { font-weight: 600; font-size: .95rem; }
.ghos-block-typ__desc { font-size: .8rem; color: var(--ghos-text-soft, #64748b); line-height: 1.4; }

/* Felder im Edit-Modal */
.ghos-feld-wrapper { display: flex; flex-direction: column; gap: 1.25rem; }
.ghos-feld-wrapper .ghos-feld { margin: 0; }
.ghos-feld { display: flex; flex-direction: column; gap: .35rem; }
.ghos-feld > label { font-weight: 600; font-size: .9rem; color: var(--ghos-text, #0f172a); }
.ghos-feld > input[type="text"], .ghos-feld > input[type="number"],
.ghos-feld > textarea, .ghos-feld > select {
  padding: .55rem .75rem; border: 1px solid var(--ghos-border, #e2e8f0);
  border-radius: 6px; font: inherit; background: #fff;
}
.ghos-feld > input:focus, .ghos-feld > textarea:focus, .ghos-feld > select:focus {
  outline: none; border-color: var(--ghos-primaer, #2c5f3f);
  box-shadow: 0 0 0 3px rgba(44, 95, 63, .15);
}
.ghos-hilfe { font-size: .8rem; color: var(--ghos-text-soft, #64748b); }
.ghos-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .ghos-grid-2 { grid-template-columns: 1fr; } }
.ghos-fieldset {
  border: 1px solid var(--ghos-border, #e2e8f0); border-radius: 8px;
  padding: 1rem 1.25rem; margin: 1.25rem 0; display: flex; flex-direction: column; gap: 1rem;
}
.ghos-fieldset legend { padding: 0 .5rem; font-weight: 600; }
.ghos-check { display: flex; align-items: center; gap: .5rem; cursor: pointer; }

/* Quill-Anpassung */
.ghos-quill-host { background: #fff; border-radius: 6px; }
.ghos-quill-host .ql-toolbar.ql-snow {
  border-color: var(--ghos-border, #e2e8f0); border-radius: 6px 6px 0 0;
  background: var(--ghos-bg-soft, #f8fafc);
}
.ghos-quill-host .ql-container.ql-snow {
  border-color: var(--ghos-border, #e2e8f0); border-radius: 0 0 6px 6px;
  font: inherit; min-height: 120px;
}

/* Bild-Picker */
.ghos-bild-picker {
  background: var(--ghos-bg-soft, #f8fafc); border: 1px dashed var(--ghos-border, #e2e8f0);
  border-radius: 8px; padding: .75rem;
}
.ghos-bild-picker__preview { min-height: 80px; display: flex; align-items: center; justify-content: center; padding: .5rem 0; }
.ghos-bild-picker__aktionen { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }

/* Listen-Felder */
.ghos-feld-liste { display: flex; flex-direction: column; gap: .75rem; }
.ghos-feld-liste__items { display: flex; flex-direction: column; gap: .75rem; }
.ghos-feld-liste__item {
  display: flex; gap: .75rem; padding: .75rem; background: var(--ghos-bg-soft, #f8fafc);
  border: 1px solid var(--ghos-border, #e2e8f0); border-radius: 8px;
}
.ghos-feld-liste__item-aktionen { display: flex; flex-direction: column; gap: .2rem; }
.ghos-feld-liste__mini-btn {
  width: 28px; height: 28px; border: 1px solid var(--ghos-border, #e2e8f0);
  background: #fff; border-radius: 5px; cursor: pointer; font-size: .9rem; line-height: 1;
}
.ghos-feld-liste__mini-btn:hover { background: var(--ghos-bg-soft, #f1f5f9); }

/* Page-Layout */
.ghos-page__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.ghos-page__head h1 { margin: 0 0 .25rem; }
.ghos-page__sub { color: var(--ghos-text-soft, #64748b); margin: 0; }
.ghos-page__actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ghos-back { color: var(--ghos-text-soft, #64748b); text-decoration: none; font-size: .85rem; }
.ghos-back:hover { color: var(--ghos-primaer, #2c5f3f); }
.ghos-form__aktionen { display: flex; gap: .5rem; margin-top: 1.5rem; }

/* Tabelle Admin */
.ghos-table { width: 100%; border-collapse: collapse; }
.ghos-table th, .ghos-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--ghos-border, #e2e8f0); text-align: left; vertical-align: middle; }
.ghos-table th { background: var(--ghos-bg-soft, #f8fafc); font-weight: 600; font-size: .85rem; color: var(--ghos-text-soft, #64748b); text-transform: uppercase; letter-spacing: .04em; }
.ghos-table tr:last-child td { border-bottom: none; }
.ghos-table tbody tr:hover { background: var(--ghos-bg-soft, #f8fafc); }

/* Buttons Erweiterungen */
.ghos-btn--gefahr { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.ghos-btn--gefahr:hover { background: #fecaca; }

/* ─── Profil (v0.5.4) ─────────────────────────────────────────────── */
.ghos-defliste {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: .55rem 1.2rem;
  margin: 0;
  font-size: .95rem;
}
.ghos-defliste dt {
  color: #6c7896;
  font-weight: 500;
}
.ghos-defliste dd {
  margin: 0;
  color: #1a2236;
}
.ghos-card__hinweis {
  color: #6c7896;
  font-size: .9rem;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 600px) {
  .ghos-defliste {
    grid-template-columns: 1fr;
    gap: .15rem 0;
  }
  .ghos-defliste dt {
    margin-top: .55rem;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
  }
}

/* ═══════════════════════════════════════════════════════════════════
 *  v0.6.0.1 — UI-System: Stammdaten, Medien-Feld, Haus-Hero
 *  Wiederverwendbare Bausteine für saubere Detail-/Stammdaten-Views.
 *  Additiv zu bestehenden Klassen — kein Breakage.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Section (besser als ghos-block für Detail-Seiten) ────────────── */

.ghos-section {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  margin-bottom: 1rem;
  overflow: hidden;
}
.ghos-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--ghos-trennlinie);
}
.ghos-section__head--ohne-trenner { border-bottom: 0; padding-bottom: 0; }
.ghos-section__titel {
  font-family: var(--ghos-font-display);
  font-weight: 400;
  font-size: 1.15rem;
  margin: 0;
  color: var(--ghos-text);
  line-height: 1.2;
}
.ghos-section__titel small {
  color: var(--ghos-text-leise);
  font-family: var(--ghos-font);
  font-size: .85rem;
  font-weight: 400;
  margin-left: .35rem;
}
.ghos-section__aktionen {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}
.ghos-section__body {
  padding: 1.25rem;
}
.ghos-section__body--kompakt { padding: .85rem 1.25rem; }
.ghos-section__body--null    { padding: 0; }

.ghos-section--gefahr {
  border-color: var(--ghos-fehler-rand);
  background: linear-gradient(0deg, var(--ghos-fehler-bg) 0%, var(--ghos-bg-karte) 60%);
}
.ghos-section--gefahr .ghos-section__head {
  border-bottom-color: var(--ghos-fehler-rand);
}
.ghos-section--gefahr .ghos-section__titel {
  color: var(--ghos-fehler-text);
}

/* ── Haus-Hero (großer Header oben in Detail-View) ────────────────── */

.ghos-haus-hero {
  display: grid;
  /* v0.7.1: 220 → 260px. Bei drei Action-Buttons (Hochladen/Mediathek/
     Entfernen) à 9 Zeichen + Icon waren 220/3 ≈ 73px zu schmal — Buttons
     wurden visuell abgeschnitten. */
  grid-template-columns: 260px 1fr;
  gap: 1.5rem;
  padding: 1.25rem;
  align-items: start;
}
@media (max-width: 720px) {
  .ghos-haus-hero { grid-template-columns: 1fr; gap: 1rem; }
}

.ghos-haus-hero__bild-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--ghos-radius);
  overflow: hidden;
  background: var(--ghos-bg-tief);
  border: 1px solid var(--ghos-trennlinie);
}
.ghos-haus-hero__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ghos-haus-hero__bild-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .5rem;
  background: linear-gradient(135deg, var(--ghos-bg-tief) 0%, var(--ghos-bg-zart) 100%);
  color: var(--ghos-text-leise);
  font-family: var(--ghos-font-display);
  font-size: 3.5rem;
  line-height: 1;
}
.ghos-haus-hero__bild-fallback small {
  font-family: var(--ghos-font);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ghos-text-leise);
}

.ghos-haus-hero__inhalt {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0;
}
.ghos-haus-hero__zeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}
.ghos-haus-hero__typ {
  font-size: .85rem;
  color: var(--ghos-text-zart);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.ghos-haus-hero__typ svg { color: var(--ghos-text-leise); flex-shrink: 0; }

.ghos-haus-hero__schnellstats {
  display: flex;
  gap: 1.5rem;
  padding: .85rem 0;
  border-top: 1px solid var(--ghos-trennlinie);
  border-bottom: 1px solid var(--ghos-trennlinie);
  flex-wrap: wrap;
}
.ghos-haus-hero__stat {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.ghos-haus-hero__stat-zahl {
  font-family: var(--ghos-font-display);
  font-size: 1.65rem;
  line-height: 1;
  color: var(--ghos-text);
}
.ghos-haus-hero__stat-zahl small {
  font-family: var(--ghos-font);
  font-size: .82rem;
  color: var(--ghos-text-leise);
  font-weight: 400;
  margin-left: .15rem;
}
.ghos-haus-hero__stat-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ghos-text-leise);
}

.ghos-haus-hero__kurz {
  margin: 0;
  color: var(--ghos-text-zart);
  line-height: 1.55;
  font-size: .95rem;
}

/* ── Stammdaten-Liste (Schlüssel/Wert in Spalten) ─────────────────── */

.ghos-stammdaten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem 2rem;
  margin: 0;
}
.ghos-stammdaten__zeile {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.ghos-stammdaten__label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ghos-text-leise);
  font-weight: 500;
}
.ghos-stammdaten__wert {
  color: var(--ghos-text);
  line-height: 1.4;
  font-size: .95rem;
  word-wrap: break-word;
}
.ghos-stammdaten__wert a {
  color: var(--ghos-akzent);
  text-decoration: none;
}
.ghos-stammdaten__wert a:hover { text-decoration: underline; }
.ghos-stammdaten__wert--mono {
  font-family: var(--ghos-font-mono);
  font-size: .9rem;
}

.ghos-stammdaten-luecke {
  margin-top: 1rem;
  padding: .75rem 1rem;
  background: var(--ghos-bg-zart);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-klein);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .9rem;
  color: var(--ghos-text-zart);
}
.ghos-stammdaten-luecke__text { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.ghos-stammdaten-luecke__icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--ghos-text-leise);
}

/* ── Medien-Feld (Logo + Galerie) — integriertes Upload-Widget ────── */

.ghos-medien-feld {
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  background: var(--ghos-bg-karte);
  overflow: hidden;
}
.ghos-medien-feld__slot {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ghos-bg-tief);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ghos-medien-feld__slot--leer {
  background: linear-gradient(135deg, var(--ghos-bg-zart) 0%, var(--ghos-bg-tief) 100%);
  color: var(--ghos-text-leise);
  flex-direction: column;
  gap: .35rem;
  padding: 1rem;
  text-align: center;
}
.ghos-medien-feld__slot--leer svg {
  width: 36px; height: 36px;
  color: var(--ghos-text-leise);
}
.ghos-medien-feld__slot--leer span {
  font-size: .82rem;
  letter-spacing: .02em;
}
.ghos-medien-feld__bild {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.ghos-medien-feld__aktionen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ghos-trennlinie);
  border-top: 1px solid var(--ghos-trennlinie);
}
.ghos-medien-feld__aktionen--einzeln { grid-template-columns: 1fr; }
.ghos-medien-feld__aktionen--drei    { grid-template-columns: 1fr 1fr 1fr; }
.ghos-medien-feld__aktion {
  background: var(--ghos-bg-karte);
  border: 0;
  /* v0.7.1: kompakteres Padding + min-width:0 + overflow-handling, damit
     drei Buttons in 260px-Spalte ohne Abschneiden Platz finden */
  padding: .55rem .4rem;
  font-size: .78rem;
  color: var(--ghos-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  font-family: inherit;
  transition: background var(--ghos-uebergang);
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
}
.ghos-medien-feld__aktion span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ghos-medien-feld__aktion:hover { background: var(--ghos-bg-zart); }
.ghos-medien-feld__aktion svg { width: 14px; height: 14px; color: var(--ghos-text-zart); }
.ghos-medien-feld__aktion--gefahr { color: var(--ghos-fehler-text); }
.ghos-medien-feld__aktion--gefahr:hover { background: var(--ghos-fehler-bg); }
.ghos-medien-feld__aktion--gefahr svg { color: var(--ghos-fehler-text); }

/* Hidden file input + label-as-button */
.ghos-medien-feld__file-label {
  position: relative;
  overflow: hidden;
}
.ghos-medien-feld__file-label input[type="file"] {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Inline-form "submit on file change" — nutzt versteckten button */
.ghos-medien-feld form { display: contents; }

/* ── Tabellen-Zeile-klickbar (für Räume) ──────────────────────────── */

.ghos-tabelle__zeile--klickbar { cursor: pointer; transition: background var(--ghos-uebergang); }
.ghos-tabelle__zeile--klickbar:hover { background: var(--ghos-bg-zart); }
.ghos-tabelle__zeile--klickbar td:last-child { text-align: right; }

/* ── Inline-Empty (kleiner als ghos-empty, in Sub-Sections) ───────── */

.ghos-empty-inline {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--ghos-text-zart);
  font-size: .92rem;
  background: var(--ghos-bg-zart);
  border-radius: var(--ghos-radius-klein);
  border: 1px dashed var(--ghos-trennlinie-kraeftig);
}
.ghos-empty-inline strong {
  display: block;
  color: var(--ghos-text);
  margin-bottom: .25rem;
  font-weight: 600;
}

/* ── Stat-Card mit Icon (visuell stärker) ─────────────────────────── */

.ghos-stat--mit-icon {
  flex-direction: row;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.1rem;
}
.ghos-stat__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--ghos-radius-klein);
  background: var(--ghos-bg-tief);
  color: var(--ghos-text-zart);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ghos-stat__icon svg { width: 20px; height: 20px; }
.ghos-stat--akzent .ghos-stat__icon { background: var(--ghos-akzent-sehr-hell); color: var(--ghos-akzent); }
.ghos-stat--erfolg .ghos-stat__icon { background: var(--ghos-erfolg-bg); color: var(--ghos-erfolg-text); }
.ghos-stat__inhalt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

/* ── Galerie: Drop-Zone Look ──────────────────────────────────────── */

.ghos-medien-dropzone {
  border: 1.5px dashed var(--ghos-trennlinie-kraeftig);
  border-radius: var(--ghos-radius);
  padding: 1.5rem 1.25rem;
  background: var(--ghos-bg-zart);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  text-align: center;
  margin-bottom: 1rem;
  transition: border-color var(--ghos-uebergang), background var(--ghos-uebergang);
}
.ghos-medien-dropzone:hover {
  border-color: var(--ghos-akzent);
  background: var(--ghos-akzent-sehr-hell);
}
.ghos-medien-dropzone__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ghos-bg-karte);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ghos-text-zart);
  border: 1px solid var(--ghos-trennlinie);
}
.ghos-medien-dropzone__icon svg { width: 22px; height: 22px; }
.ghos-medien-dropzone__text {
  font-size: .92rem;
  color: var(--ghos-text-zart);
  margin: 0;
}
.ghos-medien-dropzone__text strong { color: var(--ghos-text); font-weight: 600; }
.ghos-medien-dropzone__aktionen {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.ghos-medien-dropzone__hinweis {
  font-size: .78rem;
  color: var(--ghos-text-leise);
  margin: 0;
}
.ghos-medien-dropzone input[type="file"] {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* ── Card-Bild: robusteres Fallback mit Initial + Haustyp-Icon ────── */
/* Bestehende ghos-card__bild bleibt — wir ergänzen nur ein Fallback-Pattern */
.ghos-card__bild--mit-fallback {
  position: relative;
}
.ghos-card__bild-overlay-typ {
  position: absolute;
  bottom: .5rem;
  left: .65rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
  border-radius: var(--ghos-radius-pille);
  padding: .15rem .55rem;
  font-size: .72rem;
  color: var(--ghos-text-zart);
  border: 1px solid var(--ghos-trennlinie);
}

/* ============================================================
   v0.6.0.2 — Inline-Lösch-Aktionen für Listen-Views
   ============================================================ */

/* Inline-Lösch-Form: kein Block, kein Margin */
.ghos-loesch-inline {
  display: inline-block;
  margin: 0;
  padding: 0;
}

/* Mülleimer-Icon-Button: dezent, on-hover rot */
.ghos-btn--gefahr-zart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .4rem .55rem;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--ghos-trennlinie);
  color: var(--ghos-text-zart);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  text-decoration: none;
  line-height: 1;
}

.ghos-btn--gefahr-zart:hover,
.ghos-btn--gefahr-zart:focus-visible {
  background: var(--ghos-fehler-bg, #fef2f2);
  border-color: var(--ghos-fehler, #dc2626);
  color: var(--ghos-fehler, #dc2626);
  outline: none;
}

.ghos-btn--gefahr-zart svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

/* Wenn nur Icon, ohne Text: kompakter */
.ghos-btn--gefahr-zart.ghos-btn--icon-only {
  padding: .4rem;
}

/* Aktion-Cluster in Listen: Buttons mit kleinem Abstand */
.ghos-aktion-cluster {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: nowrap;
}

/* Lösch-Action auf Karten — Top-Right.
   v0.7.0: opacity:1 statt hover-only — der Button war auf Touch-Geräten
   unsichtbar und auf Desktop nicht entdeckbar. UX-Disaster.
   Kompakt und dezent stylen, damit er bei vielen Karten nicht visuell
   überlädt. */
.ghos-karte-loesch {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 4;
  opacity: 1;
}
.ghos-karte-loesch button {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ghos-text-zart);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: all .15s ease;
  padding: 0;
  backdrop-filter: blur(2px);
}
.ghos-karte-loesch button:hover {
  background: #fee;
  border-color: #dc2626;
  color: #dc2626;
}
.ghos-karte-loesch svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

/* Mediathek-Thumb: Fehler-Fallback (wenn img onerror) */
.ghos-mediathek-karte__bild--fehlt {
  display: none !important;
}
.ghos-mediathek-karte__fehlt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  color: #9ca3af;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  border-radius: 6px 6px 0 0;
}
.ghos-mediathek-karte__fehlt::before {
  content: "📄  Bild nicht ladbar";
  display: block;
}


/* ════════════════════════════════════════════════════════════════════
   v0.6.1 — System-Status & Selftest
   Additiv ergänzt: fehlende Badge-/Alert-Varianten und der
   Pill-Filter-Strip auf der Status-Seite.
   ════════════════════════════════════════════════════════════════════ */

.ghos-badge--warn {
  background: var(--ghos-warn-bg);
  color: var(--ghos-warn-text);
}

.ghos-alert--ok {
  background: var(--ghos-erfolg-bg);
  border-color: var(--ghos-erfolg-rand);
  color: var(--ghos-erfolg-text);
}

.ghos-status-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1rem;
}
.ghos-status-filter .ghos-pill {
  text-decoration: none;
  cursor: pointer;
}
.ghos-status-filter .ghos-pill small {
  font-weight: 400;
  opacity: .75;
  margin-left: .25rem;
}

/* ════════════════════════════════════════════════════════════════════
   v0.7.0 — Mediathek Bulk-Auswahl
   ════════════════════════════════════════════════════════════════════ */

.ghos-mediathek-bulk {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding: .5rem .75rem;
  background: var(--ghos-bg-zart);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-klein);
}
.ghos-mediathek-bulk__aktionen {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}
.ghos-mediathek-bulk__counter {
  font-size: .9rem;
  color: var(--ghos-text-zart);
  margin-right: .25rem;
}
.ghos-mediathek-bulk__counter span { font-weight: 600; color: var(--ghos-text); }

.ghos-mediathek-karte__auswahl {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 5;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--ghos-trennlinie);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.ghos-mediathek-karte__auswahl input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ghos-mediathek-karte__auswahl-marke {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.ghos-mediathek-karte__auswahl input:checked + .ghos-mediathek-karte__auswahl-marke {
  background: var(--ghos-akzent);
  color: #fff;
}

/* Bulk-Mode am Grid: alle Karten kriegen einen Auswahl-Cursor + leichten
   Outline-Marker bei aktiver Auswahl. Detail-Link wird per JS abgefangen. */
.ghos-mediathek-grid--bulk .ghos-mediathek-karte { cursor: pointer; }
.ghos-mediathek-grid--bulk .ghos-mediathek-karte:has(input:checked) {
  outline: 2px solid var(--ghos-akzent);
  outline-offset: -2px;
}

.ghos-btn--gefahr {
  background: var(--ghos-fehler-bg, #fee);
  border: 1px solid var(--ghos-fehler-rand, #fca5a5);
  color: var(--ghos-fehler-text, #b91c1c);
}
.ghos-btn--gefahr:hover:not(:disabled) {
  background: #fecaca;
}
.ghos-btn--gefahr:disabled { opacity: .5; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════════
   v0.7.1 — Form-Klassen-Aliase
   Sieben Views benutzten alternative Klassennamen, die nirgends
   definiert waren — `ghos-form__feld`, `ghos-label`, `ghos-input`,
   `ghos-select`, `ghos-textarea`, `ghos-hint`. Führte zu unstilisierten
   Forms in Buchung/Anfrage/Lizenz/System-Mail/Status/Selftest.
   Statt sieben Views zu refactoren, hier Aliase auf die existierenden
   `.ghos-feld`-Definitionen oben.
   ════════════════════════════════════════════════════════════════════ */

.ghos-form__feld {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1rem;
}
.ghos-form__feld:last-child { margin-bottom: 0; }

.ghos-label {
  font-size: .9rem;
  font-weight: 500;
  color: var(--ghos-text);
}

.ghos-input,
.ghos-select,
.ghos-textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: .55rem .75rem;
  border: 1px solid var(--ghos-trennlinie-kraeftig);
  border-radius: var(--ghos-radius-klein);
  background: #fff;
  color: var(--ghos-text);
  width: 100%;
  box-sizing: border-box;
}

.ghos-input:focus,
.ghos-select:focus,
.ghos-textarea:focus {
  outline: none;
  border-color: var(--ghos-akzent);
  box-shadow: 0 0 0 3px rgba(31, 58, 95, .15);
}

.ghos-input[disabled],
.ghos-input[readonly],
.ghos-select[disabled],
.ghos-textarea[disabled],
.ghos-textarea[readonly] {
  background: var(--ghos-bg-zart);
  color: var(--ghos-text-zart);
  cursor: not-allowed;
}

.ghos-textarea {
  font-family: inherit;
  resize: vertical;
  min-height: 4em;
}

.ghos-hint {
  font-size: .82rem;
  color: var(--ghos-text-zart);
  display: block;
  margin-top: .25rem;
}

/* Hilfsklasse `.ghos-form-aktionen` für die Button-Reihe unter Forms.
   Mehrere Views nutzten das schon implizit, aber die Klasse war nicht
   konsequent ausgerollt. */
.ghos-form-aktionen {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ghos-trennlinie);
}

/* `.se-feld` / `.se-feld__label` — von admin/seite/formular.php benutzt,
   aber nie definiert. Führte dazu, dass die <label> als inline-Element
   gerendert wurden und Label-Text + Input nebeneinander statt untereinander
   saßen. Aliase auf das `.ghos-feld`-Schema. */
.se-feld {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0;
}
.se-feld__label {
  font-size: .9rem;
  font-weight: 500;
  color: var(--ghos-text);
}

/* ═══════════════════════════════════════════════════════════════════════
 * v0.9.3 — Blog-Redaktions-Header (Punkt 8: Titelbild + Teaser sichtbar)
 * ═════════════════════════════════════════════════════════════════════ */

.ghos-blog-redaktion { margin-bottom: 1rem; }
.ghos-blog-redaktion__head {
  padding: 1rem 1.25rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.ghos-blog-redaktion__titelbild {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.ghos-blog-redaktion__bild-preview {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--ghos-bg-soft, #f1f5f9);
  border: 1px solid var(--ghos-trennlinie, #e2e8f0);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ghos-blog-redaktion__bild-preview img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ghos-blog-redaktion__bild-aktionen {
  display: flex; gap: .35rem; flex-wrap: wrap;
}
.ghos-blog-redaktion__felder {
  flex: 1; min-width: 280px;
  display: flex; flex-direction: column; gap: .75rem;
}
.ghos-blog-redaktion__felder .ghos-feld { margin: 0; }
.ghos-blog-redaktion__toolbar {
  margin-top: .6rem;
  padding: .65rem 1rem;
  background: var(--ghos-bg-soft, #f1f5f9);
  border-radius: 6px;
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap;
}
.ghos-blog-redaktion__hilfe {
  font-size: .82rem; color: var(--ghos-text-soft, #64748b);
}

@media (max-width: 720px) {
  .ghos-blog-redaktion__head { flex-direction: column; }
  .ghos-blog-redaktion__titelbild { flex: 1 1 auto; width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   v0.9.5 — Welle 2.4: Backend-UX-Fundament
   ════════════════════════════════════════════════════════════════════
   Konsistente Komponenten für alle Backend-Listen-/Dashboard-Pages.
   Pattern: Page-Header → Stat-Row → Filter-Bar → Section-Cards.

   Pattern-Migration:
   - Bestehende .ghos-page-header* bleibt; .ghos-page-header__stats neu.
   - Neue Bausteine: .ghos-stat-row, .ghos-filter-bar, .ghos-section.
   - Stammdaten-Page bekommt .ghos-tile (ersetzt nicht-existentes
     .ghos-karte aus v0.9.4).
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Spacing-Skala — eine Wahrheit für Margin/Padding/Gap */
  --ghos-space-1: .25rem;  /* 4 */
  --ghos-space-2: .5rem;   /* 8 */
  --ghos-space-3: .75rem;  /* 12 */
  --ghos-space-4: 1rem;    /* 16 */
  --ghos-space-5: 1.25rem; /* 20 */
  --ghos-space-6: 1.5rem;  /* 24 */
  --ghos-space-8: 2rem;    /* 32 */
  --ghos-space-10: 2.5rem; /* 40 */

  /* Typo-Skala — Display in serif, Body in sans */
  --ghos-fz-h1: 1.875rem;  /* 30 */
  --ghos-fz-h2: 1.375rem;  /* 22 */
  --ghos-fz-h3: 1.0625rem; /* 17 */
  --ghos-fz-stat: 2.25rem; /* 36 */
  --ghos-fz-label: .75rem; /* 12 */
  --ghos-fz-sub: .9375rem; /* 15 */

  /* Stat-Card-Töne — leicht abgestuft, eine Familie */
  --ghos-stat-tone-1-bg: #1f3a5f;  /* dunkel-navy: Hauptmetrik */
  --ghos-stat-tone-1-fg: #ffffff;
  --ghos-stat-tone-1-sub: rgba(255,255,255,.78);

  --ghos-stat-tone-2-bg: #2d6e7e;  /* mittel-teal: zweite Metrik */
  --ghos-stat-tone-2-fg: #ffffff;
  --ghos-stat-tone-2-sub: rgba(255,255,255,.78);

  --ghos-stat-tone-3-bg: #4d8e9d;  /* hell-teal: dritte Metrik */
  --ghos-stat-tone-3-fg: #ffffff;
  --ghos-stat-tone-3-sub: rgba(255,255,255,.85);

  --ghos-stat-tone-neutral-bg: var(--ghos-bg-karte);
  --ghos-stat-tone-neutral-fg: var(--ghos-text);
  --ghos-stat-tone-neutral-sub: var(--ghos-text-zart);
}

/* ─── PAGE-HEADER — Erweiterung der bestehenden Klassen ─────────────
   .ghos-page-header gibt's schon. Neu: __stats-Slot zwischen Titel und
   Aktionen für Statistik-Subtitle (z.B. „6 Häuser, 73 Schlafplätze") */

.ghos-page-header__stats {
  margin-top: var(--ghos-space-2);
  font-size: var(--ghos-fz-sub);
  color: var(--ghos-text-zart);
  display: flex;
  gap: var(--ghos-space-4);
  flex-wrap: wrap;
}
.ghos-page-header__stats strong {
  color: var(--ghos-text);
  font-weight: 600;
}

/* Belegungs-Picker (Monat/Jahr) als Header-Sub statt H1 */
.ghos-page-header__picker {
  display: inline-flex;
  align-items: center;
  gap: var(--ghos-space-2);
  margin-top: var(--ghos-space-2);
  padding: var(--ghos-space-1) var(--ghos-space-3);
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-pille);
  font-size: var(--ghos-fz-sub);
  color: var(--ghos-text);
}
.ghos-page-header__picker strong { font-weight: 600; }

/* ─── Belegungs-Datums-Picker (v1.20.3) ─────────────────────────────
   Trigger ist der "Mai 2026"-Button. Click öffnet ein Popover mit
   Jahres-Stepper + 3×4 Monats-Grid. Tastatur: Esc schliesst. */

.ghos-page-header__picker__btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 0 .25rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  border-radius: var(--ghos-radius-pille);
}
.ghos-page-header__picker__btn:hover,
.ghos-page-header__picker__btn:focus-visible {
  background: rgba(0,0,0,.06);
  outline: none;
}
.ghos-page-header__picker__btn .ghos-page-header__picker__chevron {
  width: .7em; height: .7em; opacity: .55;
}

.ghos-page-header__picker {
  position: relative;
}

.ghos-page-header__picker__pop {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  z-index: 60;
  min-width: 18rem;
  padding: .85rem;
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-block);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  font-size: var(--ghos-fz-body);
  color: var(--ghos-text);
}
.ghos-page-header__picker__pop[hidden] { display: none; }

.ghos-page-header__picker__jahr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .6rem;
}
.ghos-page-header__picker__jahr strong {
  font-size: 1.05em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ghos-page-header__picker__jahr-btn {
  width: 1.9rem; height: 1.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ghos-trennlinie);
  background: transparent;
  border-radius: var(--ghos-radius-pille);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: inherit;
}
.ghos-page-header__picker__jahr-btn:hover,
.ghos-page-header__picker__jahr-btn:focus-visible {
  background: rgba(0,0,0,.06);
  outline: none;
}

.ghos-month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
}
.ghos-month-grid__cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .35rem;
  border: 1px solid var(--ghos-trennlinie);
  background: transparent;
  border-radius: var(--ghos-radius-form);
  cursor: pointer;
  font: inherit;
  font-size: .9em;
  color: inherit;
  text-decoration: none;
  text-align: center;
}
.ghos-month-grid__cell:hover,
.ghos-month-grid__cell:focus-visible {
  background: rgba(0,0,0,.06);
  outline: none;
}
.ghos-month-grid__cell--aktiv {
  background: var(--ghos-akzent, #2c3e50);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}
.ghos-month-grid__cell--heute {
  font-weight: 600;
  text-decoration: underline;
}
.ghos-month-grid__cell--aktiv.ghos-month-grid__cell--heute {
  text-decoration: none;
}

@media (max-width: 480px) {
  .ghos-page-header__picker__pop {
    min-width: 16rem;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ─── STAT-ROW — die EINE Stat-Card-Familie ─────────────────────────
   Ersetzt drei Designs aus v0.9.4 (Übersicht, Anfragen, Häuser).
   Pattern: 1–4 Karten als Grid, optional farbig (tone-1..3), sonst neutral. */

.ghos-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ghos-space-4);
  margin-bottom: var(--ghos-space-6);
}

.ghos-stat-card {
  background: var(--ghos-stat-tone-neutral-bg);
  color: var(--ghos-stat-tone-neutral-fg);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-gross);
  padding: var(--ghos-space-5) var(--ghos-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--ghos-space-2);
  text-decoration: none;
  transition: transform var(--ghos-uebergang),
              box-shadow var(--ghos-uebergang);
  min-height: 7rem;
}
.ghos-stat-card[href]:hover {
  transform: translateY(-1px);
  box-shadow: var(--ghos-schatten-2);
}

.ghos-stat-card--tone-1 {
  background: var(--ghos-stat-tone-1-bg);
  color: var(--ghos-stat-tone-1-fg);
  border-color: transparent;
}
.ghos-stat-card--tone-2 {
  background: var(--ghos-stat-tone-2-bg);
  color: var(--ghos-stat-tone-2-fg);
  border-color: transparent;
}
.ghos-stat-card--tone-3 {
  background: var(--ghos-stat-tone-3-bg);
  color: var(--ghos-stat-tone-3-fg);
  border-color: transparent;
}

.ghos-stat-card__label {
  font-size: var(--ghos-fz-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: inherit;
  opacity: .82;
  display: flex;
  align-items: center;
  gap: var(--ghos-space-2);
}
.ghos-stat-card__label svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.ghos-stat-card__wert {
  font-family: var(--ghos-font-display);
  font-size: var(--ghos-fz-stat);
  font-weight: 600;
  line-height: 1.05;
  color: inherit;
}

.ghos-stat-card__sub {
  font-size: .8125rem;
  color: inherit;
  opacity: .78;
  margin-top: auto;
}
.ghos-stat-card--tone-1 .ghos-stat-card__sub,
.ghos-stat-card--tone-2 .ghos-stat-card__sub,
.ghos-stat-card--tone-3 .ghos-stat-card__sub {
  color: inherit;
}
.ghos-stat-card__sub a {
  color: inherit;
  opacity: .92;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── FILTER-BAR — die EINE Filter-Familie ──────────────────────────
   Pattern: Suche links (flex), 0–4 Filter-Slots (Selects/Date), 
   optional View-Toggle (Tabelle/Karten) rechts. */

.ghos-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ghos-space-3);
  align-items: center;
  padding: var(--ghos-space-4);
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  margin-bottom: var(--ghos-space-6);
}

.ghos-filter-bar__suche {
  flex: 1 1 16rem;
  min-width: 12rem;
  position: relative;
}
.ghos-filter-bar__suche-input {
  width: 100%;
  padding: .55rem .8rem .55rem 2.2rem;
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-klein);
  font: inherit;
  background: var(--ghos-bg-zart);
}
.ghos-filter-bar__suche-input:focus {
  outline: none;
  border-color: var(--ghos-akzent);
  background: var(--ghos-bg-karte);
  box-shadow: var(--ghos-schatten-fokus);
}
.ghos-filter-bar__suche-icon {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ghos-text-leise);
  pointer-events: none;
  width: 16px;
  height: 16px;
}

.ghos-filter-bar__feld {
  flex: 0 1 12rem;
  min-width: 8rem;
}
.ghos-filter-bar__feld select,
.ghos-filter-bar__feld input {
  width: 100%;
  padding: .55rem .8rem;
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-klein);
  font: inherit;
  background: var(--ghos-bg-karte);
}

.ghos-filter-bar__rechts {
  margin-left: auto;
  display: flex;
  gap: var(--ghos-space-2);
  align-items: center;
}

.ghos-view-toggle {
  display: inline-flex;
  background: var(--ghos-bg-zart);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-klein);
  padding: 2px;
  gap: 2px;
}
.ghos-view-toggle__btn {
  background: transparent;
  border: 0;
  padding: .35rem .8rem;
  font: inherit;
  font-size: .875rem;
  color: var(--ghos-text-zart);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--ghos-space-2);
  text-decoration: none;
}
.ghos-view-toggle__btn--aktiv {
  background: var(--ghos-bg-karte);
  color: var(--ghos-text);
  box-shadow: var(--ghos-schatten-mini);
}
.ghos-view-toggle__btn svg { width: 14px; height: 14px; }

/* ─── SECTION-CARD — wiederkehrender Inhalts-Container ──────────────
   Card mit Kopf (Titel + optionale Aktionen/Menü) und Body. Ersetzt
   ad-hoc divs auf Listen-/Detail-Pages. */

.ghos-section {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  margin-bottom: var(--ghos-space-6);
  overflow: hidden;
}

.ghos-section__kopf {
  display: flex;
  align-items: center;
  gap: var(--ghos-space-4);
  padding: var(--ghos-space-4) var(--ghos-space-6);
  border-bottom: 1px solid var(--ghos-trennlinie);
  background: var(--ghos-bg-zart);
}
.ghos-section__titel {
  margin: 0;
  font-size: var(--ghos-fz-h3);
  font-weight: 600;
  color: var(--ghos-text);
  letter-spacing: -.005em;
}
.ghos-section__sub {
  font-size: .8125rem;
  color: var(--ghos-text-zart);
  margin: 0;
}
.ghos-section__aktionen {
  margin-left: auto;
  display: flex;
  gap: var(--ghos-space-2);
  align-items: center;
}
.ghos-section__body {
  padding: var(--ghos-space-6);
}
.ghos-section__body--bündig {
  padding: 0;
}

/* ─── TILE — Stammdaten-Reparatur ────────────────────────────────────
   Ersetzt das nicht existierende .ghos-karte-Pattern aus v0.9.4. */

.ghos-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--ghos-space-5);
}

.ghos-tile {
  display: flex;
  flex-direction: column;
  gap: var(--ghos-space-3);
  padding: var(--ghos-space-6);
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  text-decoration: none;
  color: inherit;
  transition: transform var(--ghos-uebergang),
              box-shadow var(--ghos-uebergang),
              border-color var(--ghos-uebergang);
}
.ghos-tile[href]:hover {
  transform: translateY(-1px);
  box-shadow: var(--ghos-schatten-2);
  border-color: var(--ghos-trennlinie-kraeftig);
}

.ghos-tile__kopf {
  display: flex;
  align-items: flex-start;
  gap: var(--ghos-space-3);
}
.ghos-tile__icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: var(--ghos-akzent-sehr-hell);
  color: var(--ghos-akzent);
  border-radius: var(--ghos-radius-klein);
}
.ghos-tile__icon svg { width: 22px; height: 22px; }
.ghos-tile__titel {
  font-size: var(--ghos-fz-h3);
  font-weight: 600;
  margin: 0;
  color: var(--ghos-text);
}
.ghos-tile__sub {
  font-size: .8125rem;
  color: var(--ghos-text-zart);
  margin: var(--ghos-space-1) 0 0 0;
}
.ghos-tile__text {
  font-size: .9375rem;
  color: var(--ghos-text-zart);
  line-height: 1.5;
  margin: 0;
}
.ghos-tile__fuss {
  margin-top: auto;
  padding-top: var(--ghos-space-3);
  border-top: 1px dashed var(--ghos-trennlinie);
  font-size: .8125rem;
  color: var(--ghos-text-zart);
}
.ghos-tile__fuss strong { color: var(--ghos-text); font-weight: 600; }

/* ─── DEZENTE STATUS-BANNER ─────────────────────────────────────────
   Für Diagnostik-Hinweise (z.B. Portal-Sync-Fehler), die NICHT als
   roter Block im Hero stehen sollen. */

.ghos-mini-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ghos-space-2);
  font-size: .8125rem;
  padding: var(--ghos-space-1) var(--ghos-space-3);
  border-radius: var(--ghos-radius-pille);
  background: var(--ghos-bg-zart);
  color: var(--ghos-text-zart);
  border: 1px solid var(--ghos-trennlinie);
}
.ghos-mini-status--warn {
  background: var(--ghos-warn-bg);
  color: var(--ghos-warn-text);
  border-color: var(--ghos-warn-rand);
}
.ghos-mini-status--fehler {
  background: var(--ghos-fehler-bg);
  color: var(--ghos-fehler-text);
  border-color: var(--ghos-fehler-rand);
}
.ghos-mini-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}

/* ─── MOBILE ──────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .ghos-stat-row { grid-template-columns: 1fr; }
  .ghos-filter-bar__rechts { margin-left: 0; width: 100%; justify-content: flex-end; }
  .ghos-section__kopf { padding: var(--ghos-space-3) var(--ghos-space-4); }
  .ghos-section__body { padding: var(--ghos-space-4); }
  .ghos-page-header__stats { font-size: .8125rem; gap: var(--ghos-space-2); }
}

/* ─── Welle 2.5b (v0.9.7) — Tile-Inaktiv + Status-Tabs ─────────────────
   .ghos-tile--inaktiv: Sektion sichtbar, aber kommt-noch (Einstellungen).
   .ghos-status-tabs:    Pill-Tab-Leiste über der Filter-Bar (Journal-Status). */

.ghos-tile--inaktiv {
  opacity: .6;
  cursor: default;
}
.ghos-tile--inaktiv .ghos-tile__icon {
  background: var(--ghos-bg-zart);
  color: var(--ghos-text-zart);
}

.ghos-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ghos-space-2);
  align-items: center;
  margin: 0 0 var(--ghos-space-4);
  padding: var(--ghos-space-3) var(--ghos-space-4);
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
}
.ghos-status-tabs__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ghos-space-2);
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ghos-text-zart);
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--ghos-uebergang),
              border-color var(--ghos-uebergang),
              color var(--ghos-uebergang);
}
.ghos-status-tabs__pill:hover {
  background: var(--ghos-bg-zart);
  color: var(--ghos-text);
}
.ghos-status-tabs__zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0 .35rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  background: var(--ghos-bg-zart);
  color: var(--ghos-text-zart);
}
.ghos-status-tabs__pill--aktiv {
  background: var(--ghos-bg-zart);
  color: var(--ghos-text);
  border-color: var(--ghos-trennlinie-kraeftig);
}
.ghos-status-tabs__pill--aktiv .ghos-status-tabs__zahl {
  background: var(--ghos-bg-karte);
  color: var(--ghos-text);
}
.ghos-status-tabs__pill--ok    { color: var(--ghos-erfolg-text); border-color: var(--ghos-erfolg-rand); background: var(--ghos-erfolg-bg); }
.ghos-status-tabs__pill--info  { color: var(--ghos-info-text);   border-color: var(--ghos-info-rand);   background: var(--ghos-info-bg); }
.ghos-status-tabs__pill--warn  { color: var(--ghos-warn-text);   border-color: var(--ghos-warn-rand);   background: var(--ghos-warn-bg); }
.ghos-status-tabs__pill--fehler{ color: var(--ghos-fehler-text); border-color: var(--ghos-fehler-rand); background: var(--ghos-fehler-bg); }
.ghos-status-tabs__pill--ok .ghos-status-tabs__zahl,
.ghos-status-tabs__pill--info .ghos-status-tabs__zahl,
.ghos-status-tabs__pill--warn .ghos-status-tabs__zahl,
.ghos-status-tabs__pill--fehler .ghos-status-tabs__zahl {
  background: var(--ghos-bg-karte);
}

@media (max-width: 760px) {
  .ghos-status-tabs { padding: var(--ghos-space-2) var(--ghos-space-3); gap: var(--ghos-space-1); }
  .ghos-status-tabs__pill { font-size: .8rem; padding: .25rem .55rem; }
}

/* ════════════════════════════════════════════════════════════════════
   v0.9.8 — Sidebar-Akkordion + Textarea-Größen + Mail-Vorlagen-Form
   ════════════════════════════════════════════════════════════════════ */

/* ── Sidebar Akkordion-Gruppen ──────────────────────────────────────
   Klick auf einen Gruppen-Titel öffnet diese Gruppe und schließt alle
   anderen (Akkordion-Verhalten). Beim initialen Render ist die Gruppe
   offen, in der die aktuelle Page liegt. Smooth-Collapse über
   grid-template-rows-Animation (kein fixes max-height nötig). */

.ghos-admin__nav-gruppe {
  display: flex;
  flex-direction: column;
}
.ghos-admin__nav-gruppe + .ghos-admin__nav-gruppe {
  margin-top: .15rem;
}
.ghos-admin__nav-gruppe-titel {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: calc(100% - 1rem);
  margin: .35rem .5rem .15rem;
  padding: .5rem .8rem;
  background: transparent;
  border: 0;
  border-radius: var(--ghos-radius-klein);
  color: #8895b3;
  font-family: inherit;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: color var(--ghos-uebergang-schnell), background var(--ghos-uebergang-schnell);
}
.ghos-admin__nav-gruppe-titel:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, .04);
}
.ghos-admin__nav-gruppe-titel:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
}
.ghos-admin__nav-gruppe-titel-text {
  flex: 1;
}
.ghos-admin__nav-gruppe-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: .7;
  transform: rotate(-90deg);
  transition: transform var(--ghos-uebergang);
}
.ghos-admin__nav-gruppe[data-offen="true"] .ghos-admin__nav-gruppe-chevron {
  transform: rotate(0deg);
  opacity: 1;
}
.ghos-admin__nav-gruppe[data-offen="true"] .ghos-admin__nav-gruppe-titel {
  color: #ffffff;
}

.ghos-admin__nav-gruppe-inhalt {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ghos-uebergang);
}
.ghos-admin__nav-gruppe[data-offen="true"] .ghos-admin__nav-gruppe-inhalt {
  grid-template-rows: 1fr;
}
.ghos-admin__nav-gruppe-inhalt-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding-bottom: .25rem;
}

/* Aktiv-Markierung für Items innerhalb einer Gruppe etwas zarter, da
   die Gruppe bereits den Kontext liefert. */
.ghos-admin__nav-gruppe .ghos-admin__nav-item--aktiv {
  background: rgba(255, 255, 255, .14);
}

/* ── Textarea-Größen-Modifier ───────────────────────────────────────
   Erzwingen vernünftige Mindesthöhen für Code/Mail-Editoren.
   .ghos-feld textarea war bisher nicht groß genug — die alten
   .adm-form-input-Klassen aus mailtemplate/ existierten nie als CSS. */

.ghos-feld textarea {
  resize: vertical;
  min-height: 6rem;
  font-family: inherit;
  line-height: 1.5;
}
.ghos-feld textarea.ghos-feld__mono,
.ghos-feld__mono {
  font-family: var(--ghos-font-mono);
  font-size: .88rem;
  line-height: 1.55;
}
.ghos-feld textarea.ghos-feld__hoch-gross,
.ghos-feld__hoch-gross {
  min-height: 22rem;
}
.ghos-feld textarea.ghos-feld__hoch-mittel,
.ghos-feld__hoch-mittel {
  min-height: 13rem;
}

/* ── Mail-Vorlagen-Hinweisbox (Inline-Notiz) ────────────────────────
   Reine Hinweis-Box (z.B. „So funktionieren Overrides"). Subtiler als
   .ghos-flash, ohne Status-Farbgebung. */

.ghos-hinweis-box {
  background: var(--ghos-bg-zart);
  border: 1px solid var(--ghos-trennlinie);
  border-left: 3px solid var(--ghos-akzent);
  border-radius: var(--ghos-radius-klein);
  padding: .85rem 1rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ghos-text-zart);
}
.ghos-hinweis-box strong {
  color: var(--ghos-text);
  font-weight: 600;
}
.ghos-hinweis-box code {
  background: rgba(0, 0, 0, .04);
  padding: .08em .35em;
  border-radius: 3px;
  font-size: .92em;
}

.ghos-variablen-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .35rem 0 .75rem;
}
.ghos-variablen-cluster code {
  background: var(--ghos-bg-zart);
  border: 1px solid var(--ghos-trennlinie);
  padding: .2em .55em;
  border-radius: var(--ghos-radius-xs);
  font-size: .85em;
  color: var(--ghos-text);
}

/* ── Form-Aktions-Cluster (Submit + Abbrechen + …) ──────────────────
   Universell für jede Formular-Footer-Aktion. */

.ghos-form-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: 1.5rem;
}

@media (max-width: 700px) {
  .ghos-feld textarea.ghos-feld__hoch-gross,
  .ghos-feld__hoch-gross { min-height: 16rem; }
  .ghos-feld textarea.ghos-feld__hoch-mittel,
  .ghos-feld__hoch-mittel { min-height: 10rem; }
}

/* ════════════════════════════════════════════════════════════════════
   v0.9.8 — Medien-Feld-Aktionen vertikal gestapelt + Bild-Picker
   ════════════════════════════════════════════════════════════════════ */

/* Aktions-Buttons im Medien-Slot (Logo/Titelbild) als Icon-über-Label —
   so passen drei Buttons auch in 220px-Spalten ohne Truncation. */
.ghos-medien-feld__aktionen--gestapelt .ghos-medien-feld__aktion {
  flex-direction: column;
  gap: .2rem;
  padding: .55rem .25rem;
  font-size: .72rem;
  letter-spacing: .01em;
}
.ghos-medien-feld__aktionen--gestapelt .ghos-medien-feld__aktion svg {
  width: 16px; height: 16px;
}
.ghos-medien-feld__aktionen--gestapelt .ghos-medien-feld__aktion span {
  white-space: normal;
  text-overflow: clip;
}

/* Bild-Picker (CMS Block-Editor) — sicheres Layout für Preview + Aktionen.
   v0.9.8: Klassen waren bisher in JS verwendet, hier die fehlenden CSS-Regeln. */
.ghos-bild-picker {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.ghos-bild-picker__preview {
  border: 1px dashed var(--ghos-trennlinie-kraeftig);
  border-radius: var(--ghos-radius-klein);
  background: var(--ghos-bg-zart);
  min-height: 6rem;
  padding: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
}
.ghos-bild-picker__preview img {
  max-width: 100%;
  max-height: 16rem;
  border-radius: var(--ghos-radius-xs);
  display: block;
}
.ghos-bild-picker__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

/* ════════════════════════════════════════════════════════════════════
   v0.9.9 — Blog-Liste, Blog-Editor (Redaktionsarbeitsplatz)
   Audit B + C
   ════════════════════════════════════════════════════════════════════ */

/* ─── Blog-Liste: Tabellen-Zelle mit Mini-Titelbild ─── */
.ghos-blog-zelle {
  display: flex; align-items: flex-start; gap: .75rem;
}
.ghos-blog-zelle__bild {
  flex: 0 0 56px;
  width: 56px; height: 56px;
  border-radius: var(--ghos-radius-klein);
  background: var(--ghos-bg-soft, #f0eee5) center/cover no-repeat;
  border: 1px solid var(--ghos-trennlinie);
}
.ghos-blog-zelle__bild--leer {
  display: flex; align-items: center; justify-content: center;
  color: var(--ghos-text-leise, #999);
  background: var(--ghos-bg-soft, #f5f4ec);
}
.ghos-blog-zelle__bild--leer svg { width: 24px; height: 24px; }
.ghos-blog-zelle__text { flex: 1; min-width: 0; }
.ghos-blog-zelle__titel {
  display: block;
  font-weight: 600;
  text-decoration: none;
  color: var(--ghos-text);
  margin-bottom: .15rem;
  line-height: 1.3;
}
.ghos-blog-zelle__titel:hover { color: var(--ghos-akzent); }
.ghos-blog-zelle__teaser {
  display: block;
  color: var(--ghos-text-soft);
  font-size: .85rem;
  line-height: 1.4;
  margin-bottom: .15rem;
}
.ghos-blog-zelle__slug {
  display: block;
  color: var(--ghos-text-leise, #999);
  font-size: .75rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ─── Blog-Liste: Karten-Ansicht ─── */
.ghos-blog-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  background: var(--ghos-card-bg, #fff);
  text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
}
.ghos-blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.18);
  border-color: var(--ghos-akzent-zart, #d4cfb8);
}
.ghos-blog-card__bild {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--ghos-bg-soft, #f0eee5) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.ghos-blog-card__bild-platzhalter {
  color: var(--ghos-text-leise, #aaa);
}
.ghos-blog-card__bild-platzhalter svg { width: 40px; height: 40px; }
.ghos-blog-card__status {
  position: absolute; top: .55rem; left: .55rem;
}
.ghos-blog-card__inhalt { padding: .85rem 1rem 1rem; flex: 1; display: flex; flex-direction: column; }
.ghos-blog-card__titel {
  font-size: 1.05rem;
  margin: 0 0 .35rem;
  line-height: 1.3;
  font-weight: 600;
}
.ghos-blog-card__teaser {
  color: var(--ghos-text-soft);
  font-size: .9rem;
  margin: 0 0 .65rem;
  line-height: 1.45;
  flex: 1;
}
.ghos-blog-card__meta {
  display: flex; flex-wrap: wrap; gap: .5rem;
  font-size: .8rem;
  color: var(--ghos-text-leise, #888);
}

/* ─── Editor: Sticky-Toolbar ─── */
.ghos-blog-toolbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .65rem 1rem;
  background: var(--ghos-card-bg, #fff);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  margin-bottom: 1rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: padding .15s ease, box-shadow .15s ease;
}
.ghos-blog-toolbar.is-scrolled {
  padding: .45rem 1rem;
  box-shadow: 0 4px 12px -8px rgba(0,0,0,.15);
}
.ghos-blog-toolbar__links { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.ghos-blog-toolbar__rechts { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
/* v1.34.10 — Buttons im Editor-Header visuell zur Ruhe bringen.
   Vorher: <a class="ghos-btn"> und <button class="ghos-btn"> liefen
   im Browser auseinander (Baseline-Pixelversatz, abweichende effektive
   Höhe), und die Wörter „↗ Live", „SEO & mehr", „Speichern" haben
   unterschiedliche Längen, was den optischen Eindruck verstärkt hat.
   Wir vereinheitlichen Höhe, Padding und Schriftgröße — kein
   Re-Design, nur ruhige Linie. */
.ghos-blog-toolbar__rechts > .ghos-btn,
.ghos-blog-toolbar__rechts > a.ghos-btn,
.ghos-blog-toolbar__rechts > button.ghos-btn {
  min-height: 2rem;
  line-height: 1.15;
  padding: .35rem .8rem;
  font-size: .85rem;
  white-space: nowrap;
  box-sizing: border-box;
}
.ghos-blog-toolbar__back {
  text-decoration: none;
  color: var(--ghos-text-soft);
  font-size: 1.1rem;
  padding: .25rem .5rem;
  border-radius: var(--ghos-radius-klein);
}
.ghos-blog-toolbar__back:hover { background: var(--ghos-bg-soft, #f5f4ec); }
.ghos-blog-toolbar__speicher {
  font-size: .82rem;
  color: var(--ghos-text-leise, #888);
  padding-left: .5rem;
  border-left: 1px solid var(--ghos-trennlinie);
}
.ghos-blog-toolbar__speicher[data-zustand="dirty"]   { color: var(--ghos-warn-rand, #b78b00); }
.ghos-blog-toolbar__speicher[data-zustand="saving"]  { color: var(--ghos-info-rand,  #2a73d3); }
.ghos-blog-toolbar__speicher[data-zustand="saved"]   { color: var(--ghos-erfolg-rand,#2c8a3f); }
.ghos-blog-toolbar__speicher[data-zustand="error"]   { color: var(--ghos-fehler-rand,#c0392b); font-weight: 600; }

/* ─── Editor: Layout ─── */
.ghos-blog-editor__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.25rem;
  align-items: start;
}
.ghos-blog-editor__sidebar { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 70px; }
/* v1.34.10 — Sidebar-Karten visuell zur Ruhe bringen. Die Karten
   nutzen alle das gleiche Markup-Muster: <div class="ghos-card"><h3>…</h3>…</div>.
   Vorher kam die h3-Höhe und der margin-top aus dem User-Agent-Default,
   was sich je nach Sidebar-Karte (Veröffentlichungs-Check, Veröffent-
   lichung, Aktionen, Daten) unterschiedlich auswirkte. Wir setzen den
   Header-Stil einheitlich. */
.ghos-blog-editor__sidebar .ghos-card > h3 {
  margin: 0 0 .75rem 0;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ghos-text);
  text-transform: none;
}
.ghos-blog-editor__sidebar .ghos-card {
  padding: .9rem 1rem;
  gap: .5rem;
}
.ghos-blog-editor__sidebar .ghos-card > h3 + * {
  margin-top: 0;
}
@media (max-width: 1100px) {
  .ghos-blog-editor__layout { grid-template-columns: 1fr; }
  .ghos-blog-editor__sidebar { position: static; }
}

/* ─── Editor: Redaktionskopf ─── */
.ghos-redaktion {
  background: var(--ghos-card-bg, #fff);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  padding: 1rem 1.1rem 1.1rem;
  margin-bottom: 1rem;
}
.ghos-redaktion__head {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 720px) {
  .ghos-redaktion__head { grid-template-columns: 1fr; }
}
.ghos-redaktion__titelbild { display: flex; flex-direction: column; gap: .55rem; }
.ghos-redaktion__bild-preview {
  aspect-ratio: 16/9;
  background: var(--ghos-bg-soft, #f5f4ec);
  border: 2px dashed var(--ghos-trennlinie-kraeftig, #c8c2a8);
  border-radius: var(--ghos-radius);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ghos-redaktion__bild-preview img { width: 100%; height: 100%; object-fit: cover; }
.ghos-redaktion__bild-leer {
  text-align: center;
  color: var(--ghos-text-leise, #999);
  font-size: .9rem;
  padding: .5rem;
  line-height: 1.4;
}
.ghos-redaktion__bild-leer small { color: var(--ghos-text-leise, #aaa); font-size: .75rem; }
.ghos-redaktion__bild-aktionen {
  display: flex; flex-wrap: wrap; gap: .35rem;
}

.ghos-redaktion__felder { display: flex; flex-direction: column; gap: .65rem; }
.ghos-redaktion__titel-input {
  font-size: 1.5rem;
  font-weight: 700;
  border: 1px solid transparent;
  background: transparent;
  padding: .35rem .5rem;
  margin-left: -.5rem;
  width: 100%;
  border-radius: var(--ghos-radius-klein);
  font-family: inherit;
  color: var(--ghos-text);
  transition: border-color .15s ease, background .15s ease;
}
.ghos-redaktion__titel-input:hover { background: var(--ghos-bg-soft, #fafaf2); }
.ghos-redaktion__titel-input:focus { border-color: var(--ghos-akzent, #b8a064); background: #fff; outline: none; }
.ghos-redaktion__untertitel-input {
  font-size: 1.05rem;
  border: 1px solid transparent;
  background: transparent;
  padding: .25rem .5rem;
  margin-left: -.5rem;
  width: 100%;
  border-radius: var(--ghos-radius-klein);
  color: var(--ghos-text-soft);
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.ghos-redaktion__untertitel-input:hover { background: var(--ghos-bg-soft, #fafaf2); }
.ghos-redaktion__untertitel-input:focus { border-color: var(--ghos-akzent, #b8a064); background: #fff; outline: none; color: var(--ghos-text); }
.ghos-redaktion__slug {
  display: flex; align-items: center; gap: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .82rem;
  color: var(--ghos-text-leise, #888);
}
.ghos-redaktion__slug-prefix {
  background: var(--ghos-bg-soft, #f5f4ec);
  padding: .35rem .55rem;
  border: 1px solid var(--ghos-trennlinie);
  border-right: 0;
  border-radius: var(--ghos-radius-klein) 0 0 var(--ghos-radius-klein);
}
.ghos-redaktion__slug-input {
  flex: 1;
  border: 1px solid var(--ghos-trennlinie);
  padding: .35rem .55rem;
  font-family: inherit;
  font-size: inherit;
  border-radius: 0 var(--ghos-radius-klein) var(--ghos-radius-klein) 0;
}

/* ─── Editor: Kategorien-Picker ─── */
.ghos-redaktion__kategorien {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ghos-trennlinie);
}
.ghos-redaktion__kategorien > label {
  display: block;
  font-weight: 600;
  margin-bottom: .5rem;
  font-size: .9rem;
}
.ghos-redaktion__kategorien-liste {
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.ghos-check--pill { cursor: pointer; }
.ghos-check--pill input { position: absolute; opacity: 0; pointer-events: none; }
.ghos-check__pill {
  display: inline-flex; align-items: center;
  padding: .3rem .65rem;
  border: 1.5px solid;
  border-radius: 999px;
  font-size: .82rem;
  background: transparent;
  transition: background .12s ease;
}
.ghos-check--pill input:checked + .ghos-check__pill {
  background: var(--ghos-akzent-sehr-hell, #f5f0e0);
  font-weight: 600;
}
.ghos-check--pill:hover .ghos-check__pill { background: var(--ghos-bg-soft, #fafaf2); }

/* ─── Editor: Plus-Buttons zwischen Block-Karten ─── */
.ghos-block-zwischen {
  display: flex; justify-content: center; align-items: center;
  height: 0;
  position: relative;
  margin: .15rem 0;
  transition: height .15s ease, margin .15s ease;
}
.ghos-block-zwischen:hover,
.ghos-block-zwischen:focus-within { height: 32px; margin: .35rem 0; }
.ghos-block-zwischen__btn {
  background: var(--ghos-akzent-sehr-hell, #f5f0e0);
  color: var(--ghos-akzent, #b8a064);
  border: 1px dashed var(--ghos-akzent, #b8a064);
  width: 28px; height: 28px;
  border-radius: 999px;
  font-size: 1.1rem; line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
}
.ghos-block-zwischen:hover .ghos-block-zwischen__btn,
.ghos-block-zwischen:focus-within .ghos-block-zwischen__btn { opacity: 1; }
.ghos-block-zwischen__btn:hover {
  transform: scale(1.1);
  background: var(--ghos-akzent, #b8a064);
  color: #fff;
}
.ghos-block-zwischen__btn--haupt {
  width: auto; padding: .35rem .9rem;
  border-radius: var(--ghos-radius-klein);
  font-size: .85rem;
  border-style: solid;
  opacity: 1;
}

/* ─── Editor: Block-Card-Body Preview-Erweiterungen ─── */
.ghos-preview-warn {
  color: var(--ghos-warn-rand, #b78b00);
  background: var(--ghos-warn-bg, #fff8e0);
  padding: .1rem .45rem;
  border-radius: var(--ghos-radius-klein);
  font-size: .75rem;
  margin-left: .35rem;
}

/* ─── Editor: Sidebar-Karten ─── */
.ghos-blog-check__liste {
  list-style: none; padding: 0; margin: .5rem 0 0;
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .9rem;
}
.ghos-blog-check__liste li {
  display: flex; align-items: center; gap: .5rem;
  padding: .25rem 0;
}
.ghos-blog-check__liste li.ok       { color: var(--ghos-erfolg-rand, #2c8a3f); }
.ghos-blog-check__liste li.warn     { color: var(--ghos-warn-rand,   #b78b00); font-weight: 500; }
.ghos-blog-check__liste li.optional { color: var(--ghos-text-leise,  #999); }
.ghos-blog-publish .ghos-btn--block { width: 100%; display: block; }
.ghos-btn--block { width: 100%; display: block; text-align: center; }

.ghos-blog-meta-dl { font-size: .85rem; margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; }
.ghos-blog-meta-dl dt { color: var(--ghos-text-soft); }
.ghos-blog-meta-dl dd { margin: 0; }

/* ─── Legacy-Body-Hinweis ─── */
.ghos-blog-legacy {
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  background: var(--ghos-warn-bg, #fff8e0);
  border-left: 3px solid var(--ghos-warn-rand, #b78b00);
}
.ghos-blog-legacy p { margin: .4rem 0 .8rem; font-size: .9rem; line-height: 1.45; }

/* ─── Block-Header: "Inhalt" + Hilfe ─── */
.ghos-blog-bloecke-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 1.5rem 0 .65rem;
  gap: 1rem;
}
.ghos-blog-bloecke-head h2 { margin: 0; font-size: 1.1rem; }
.ghos-blog-bloecke-head .ghos-hilfe { font-size: .8rem; color: var(--ghos-text-leise, #999); }

/* ─── Mobile: Sticky-Toolbar bricht um ─── */
@media (max-width: 600px) {
  .ghos-blog-toolbar { flex-wrap: wrap; padding: .5rem; }
  .ghos-blog-toolbar__links { width: 100%; justify-content: flex-start; }
  .ghos-blog-toolbar__rechts { width: 100%; justify-content: flex-end; }
  .ghos-blog-toolbar__speicher {
    border-left: 0;
    padding-left: 0;
    font-size: .75rem;
  }
  .ghos-redaktion__titel-input { font-size: 1.25rem; }
}

/* ─── Einstellungs-Übersicht: Sektions-Gruppen (v1.34.11) ─────────────
   Kleine Uppercase-Headlines zwischen den ghos-tile-grid-Containern,
   um Branding / Zahlungs-Provider / Buchung & Voucher / KI / E-Mail
   visuell zu trennen, ohne ein zweites Card-Layout zu öffnen.
   Pattern bewusst minimal — wir wollen NICHT noch eine .ghos-section
   mit eigener Card-Border, sondern nur eine optische Gliederung. */

.ghos-einst-gruppe + .ghos-einst-gruppe {
  margin-top: 1.75rem;
}
.ghos-einst-gruppe__titel {
  font-family: var(--ghos-font-display);
  font-weight: 400;
  font-size: .95rem;
  color: var(--ghos-text-leise);
  margin: 0 0 .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Mail-Automatik ist Lizenz-gegated → bei fehlendem Feature dimmen
   wir die Karte via .ghos-tile--inaktiv (opacity .6, gedimmtes Icon),
   sie bleibt aber klickbar (führt auf die Lizenz-Sperrseite mit
   Upgrade-Hinweis). Daher den cursor:default-Override des Basis-
   Selektors für klickbare Links wieder auf pointer ziehen. */
a.ghos-tile.ghos-tile--inaktiv { cursor: pointer; }

/* ════════════════════════════════════════════════════════════════════
   v1.40.0 — Detail-Layout mit Sidebar
   Zwei-Spalten-Pattern für Detail-Ansichten (Haus, Mandant, Raum,
   Anfrage, Aufenthalt, Faktura …) — Hauptcontent links, Sidebar
   rechts mit Status, Quick-Stats, Aktions-Shortcuts und Adresse.
   ════════════════════════════════════════════════════════════════════ */

.ghos-detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  align-items: start;
}

.ghos-detail-layout__main {
  min-width: 0;                       /* verhindert grid-overflow */
}

.ghos-detail-layout__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

/* Mobile/Tablet: Sidebar wandert unter den Hauptcontent */
@media (max-width: 1024px) {
  .ghos-detail-layout {
    grid-template-columns: 1fr;
  }
  .ghos-detail-layout__sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* ─── Sidebar-Karten ────────────────────────────────────────────── */

.ghos-detail-card {
  background: var(--ghos-surface, #fff);
  border: 1px solid var(--ghos-border, rgba(0, 0, 0, 0.08));
  border-radius: 8px;
  overflow: hidden;
}

.ghos-detail-card__head {
  padding: 0.65rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ghos-text-zart, #707070);
  border-bottom: 1px solid var(--ghos-border, rgba(0, 0, 0, 0.06));
}

.ghos-detail-card__body {
  padding: 0.9rem 1rem;
}

.ghos-detail-card__body--kompakt {
  padding: 0.65rem 1rem;
}

/* ─── Status-Pillen-Reihe ───────────────────────────────────────── */

.ghos-detail-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

/* ─── Quick-Stats 2x2-Raster ────────────────────────────────────── */

.ghos-detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.ghos-detail-stats__zelle {
  text-align: left;
}

.ghos-detail-stats__zahl {
  display: block;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ghos-text, #2a2a2a);
}

.ghos-detail-stats__label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ghos-text-zart, #777);
  margin-top: 0.15rem;
}

/* ─── Aktions-Liste ─────────────────────────────────────────────── */

.ghos-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.ghos-detail-actions__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--ghos-border, rgba(0, 0, 0, 0.06));
  font-size: 0.92rem;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.ghos-detail-actions__item:first-child {
  border-top: 0;
}
.ghos-detail-actions__item:hover {
  background: rgba(0, 0, 0, 0.03);
}
.ghos-detail-actions__item svg {
  flex-shrink: 0;
  opacity: 0.6;
}
.ghos-detail-actions__item--haupt {
  background: var(--ghos-akzent, #773e18);
  color: #fff;
  font-weight: 500;
}
.ghos-detail-actions__item--haupt:hover {
  background: color-mix(in srgb, var(--ghos-akzent, #773e18) 85%, #000);
}
.ghos-detail-actions__item--haupt svg {
  opacity: 0.9;
}
.ghos-detail-actions__zaehler {
  margin-left: auto;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* ─── Adresse-Block (kompakt) ───────────────────────────────────── */

.ghos-detail-adresse {
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0;
}
.ghos-detail-adresse strong {
  display: block;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

/* ════════════════════════════════════════════════════════════════════
   v1.42.0 — Belegungs-Kalender Drag-Picker
   Range-Highlight beim Ziehen + Quick-Erstell-Modal.
   ════════════════════════════════════════════════════════════════════ */

.ghos-belegung-grid__zelle {
  cursor: cell;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;          /* Page-Scroll während Drag verhindern */
}

.ghos-belegung-grid__zelle--drag {
  background: color-mix(in srgb, var(--ghos-akzent, #773e18) 28%, transparent);
  outline: 1px solid var(--ghos-akzent, #773e18);
  outline-offset: -1px;
  position: relative;
  z-index: 1;
}

/* ─── Quick-Erstell-Modal ─────────────────────────────────────────── */

.ghos-belegung-quick-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.ghos-belegung-quick-modal[hidden] {
  display: none;
}

.ghos-belegung-quick-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.ghos-belegung-quick-modal__dialog {
  position: relative;
  background: var(--ghos-surface, #fff);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.ghos-belegung-quick-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ghos-border, rgba(0, 0, 0, 0.08));
}

.ghos-belegung-quick-modal__head h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.ghos-belegung-quick-modal__close {
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ghos-text-zart, #777);
  padding: 0 .35rem;
}
.ghos-belegung-quick-modal__close:hover {
  color: var(--ghos-text, #2a2a2a);
}

.ghos-belegung-quick-modal__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.ghos-belegung-quick-modal__info {
  margin: 0;
  padding: .6rem .75rem;
  background: color-mix(in srgb, var(--ghos-akzent, #773e18) 8%, transparent);
  border-left: 3px solid var(--ghos-akzent, #773e18);
  border-radius: 4px;
  font-size: .92rem;
  line-height: 1.4;
}

.ghos-belegung-quick-modal__fehler {
  margin: 0;
  padding: .55rem .75rem;
  background: #fff4f4;
  border: 1px solid #ecbcbc;
  border-radius: 4px;
  color: #9a2a2a;
  font-size: .9rem;
}

/* v1.85.4 — Soft-Warnung (parallele Belegung): gelb statt rot */
.ghos-belegung-quick-modal__fehler--warnung {
  background: #fff8e6;
  border-color: #e9d08a;
  color: #7a5a12;
}

.ghos-belegung-quick-modal__aktionen {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .25rem;
}

/* ─── Mobile-Anpassung ────────────────────────────────────────────── */

@media (max-width: 600px) {
  .ghos-belegung-quick-modal__dialog {
    max-width: 100%;
  }
  .ghos-belegung-quick-modal {
    padding: 0;
    align-items: flex-end;
  }
  .ghos-belegung-quick-modal__dialog {
    border-radius: 12px 12px 0 0;
    max-height: 90vh;
  }
}

/* ═══════════════════════════════════════════════════════════════════
 * Buchen-Filter (v1.43.0)
 * Verfügbarkeits-Filter oben auf /buchen — Anreise/Abreise/Personen,
 * Server-Anwort filtert Karten live über CSS-Klassen.
 * ═══════════════════════════════════════════════════════════════════ */

.ghos-buchen-filter-section {
  background: var(--ghos-akzent-zart, rgba(0, 0, 0, .03));
}

.ghos-buchen-filter {
  background: var(--ghos-surface, #fff);
  border: 1px solid var(--ghos-border, rgba(0, 0, 0, .1));
  border-radius: .6rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}

.ghos-buchen-filter__felder {
  display: grid;
  grid-template-columns: 1fr 1fr 100px auto;
  gap: 1rem;
  align-items: end;
}

.ghos-buchen-filter__feld {
  display: flex;
  flex-direction: column;
  font-size: .82rem;
  font-weight: 500;
  gap: .25rem;
}

.ghos-buchen-filter__feld > span {
  opacity: .8;
}

.ghos-buchen-filter__feld input {
  padding: .5rem .65rem;
  border: 1px solid var(--ghos-border, rgba(0, 0, 0, .15));
  border-radius: .3rem;
  font: inherit;
  background: var(--ghos-surface, #fff);
}

.ghos-buchen-filter__feld input:focus {
  outline: 2px solid var(--ghos-akzent, #1a4488);
  outline-offset: 1px;
}

.ghos-buchen-filter__aktionen {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.ghos-buchen-filter__aktionen .ghos-btn {
  white-space: nowrap;
}

.ghos-buchen-filter__status {
  margin-top: .75rem;
  font-size: .9rem;
  min-height: 1.2em;
  padding: 0;
  border-radius: .3rem;
  transition: background .15s, padding .15s;
}

.ghos-buchen-filter__status:not(:empty) {
  padding: .5rem .75rem;
}

.ghos-buchen-filter__status--ok {
  background: rgba(34, 130, 60, .08);
  color: #1f6b35;
}

.ghos-buchen-filter__status--warn {
  background: rgba(192, 105, 20, .08);
  color: #a35400;
}

.ghos-buchen-filter__status--fehler {
  background: rgba(160, 35, 35, .08);
  color: #962727;
}

@media (max-width: 720px) {
  .ghos-buchen-filter__felder {
    grid-template-columns: 1fr 1fr;
  }
  .ghos-buchen-filter__feld--klein {
    grid-column: 1 / 2;
  }
  .ghos-buchen-filter__aktionen {
    grid-column: 1 / -1;
  }
  .ghos-buchen-filter__aktionen .ghos-btn {
    flex: 1;
  }
}

/* ─── Karten-States ─────────────────────────────────────────────── */

.ghos-buchen-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ghos-surface, #fff);
  border: 1px solid var(--ghos-border, rgba(0, 0, 0, .08));
  border-radius: .5rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, transform .15s, opacity .2s, filter .2s;
}

.ghos-buchen-karte:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}

.ghos-buchen-karte__inhalt {
  padding: 1rem 1.25rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ghos-buchen-karte--raum .ghos-buchen-karte__inhalt {
  padding: 1.25rem;
}

.ghos-buchen-karte__meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
}

.ghos-buchen-karte__kapa {
  font-size: .82rem;
  opacity: .7;
}

.ghos-buchen-karte__preis {
  font-weight: 600;
}

.ghos-buchen-karte__preis small {
  font-weight: 400;
  opacity: .7;
  font-size: .85rem;
}

.ghos-buchen-karte__preis--leer {
  font-weight: 400;
  opacity: .6;
  font-size: .9rem;
}

/* Badge oben rechts auf der Karte */
.ghos-buchen-karte__badge {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 2;
  padding: .25rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  pointer-events: none;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

.ghos-buchen-karte__badge--frei {
  background: #1f6b35;
}

.ghos-buchen-karte__badge--blockiert {
  background: #962727;
}

.ghos-buchen-karte__badge--zuklein {
  background: #a35400;
}

/* Frei-Markierung: leichter grüner Rahmen */
.ghos-buchen-karte--frei {
  outline: 2px solid rgba(31, 107, 53, .35);
  outline-offset: -2px;
}

/* Blockiert/zu klein: ausgegraut, aber klickbar */
.ghos-buchen-karte--blockiert,
.ghos-buchen-karte--zuklein {
  opacity: .55;
  filter: grayscale(.4);
}

.ghos-buchen-karte--blockiert:hover,
.ghos-buchen-karte--zuklein:hover {
  opacity: .85;
}

.ghos-buchen-leer {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--ghos-surface, #f7f5ee);
  border: 1px dashed var(--ghos-border, rgba(0, 0, 0, .15));
  border-radius: .4rem;
  font-size: .95rem;
  opacity: .75;
  text-align: center;
}

/* ════════════════════════════════════════════════════════════════════
   Mediathek-Picker (Modal-Layer)
   v1.54.6 — Vorher fehlend, das Overlay wurde ins DOM eingefügt aber
   war ohne Styles unsichtbar. Picker-internes CSS (Tabs, Panes) ist
   weiter inline in injiziereStyle() in mediathek-picker.js.
   ════════════════════════════════════════════════════════════════════ */

.ghos-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 1rem;
}

.ghos-picker-modal {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  max-width: 64rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
}

.ghos-picker-modal__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #eeece4;
  background: #fafaf6;
}

.ghos-picker-modal__titel {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
}

.ghos-picker-modal__schliessen {
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  padding: .25rem .5rem;
  border-radius: 4px;
}
.ghos-picker-modal__schliessen:hover { background: #efece4; color: #222; }

.ghos-picker-modal__filter {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .75rem 1rem;
  border-bottom: 1px solid #eeece4;
  background: #fff;
}
.ghos-picker-modal__filter input,
.ghos-picker-modal__filter select {
  padding: .5rem .75rem;
  border: 1px solid #d6d3c8;
  border-radius: 6px;
  font: inherit;
}
.ghos-picker-modal__filter input { flex: 1; min-width: 12rem; }

.ghos-picker-modal__inhalt {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  background: #fff;
}

.ghos-picker-modal__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: .5rem 1rem;
  border-top: 1px solid #eeece4;
  background: #fafaf6;
  font-size: .85rem;
  color: #666;
}

.ghos-picker-modal__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.25rem;
  border-top: 1px solid #eeece4;
  background: #fafaf6;
}

.ghos-picker-modal__hinweis {
  font-size: .85rem;
  color: #666;
}

.ghos-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: .75rem;
}

.ghos-picker-karte {
  position: relative;
  background: #fff;
  border: 1px solid #e5e3da;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.ghos-picker-karte:hover {
  border-color: #b4a06a;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.ghos-picker-karte.is-ausgewaehlt {
  border-color: #7a5a00;
  box-shadow: 0 0 0 2px rgba(122,90,0,.25);
}

.ghos-picker-karte__bild {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background: #f0eee8;
}

.ghos-picker-karte__icon {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0eee8;
  color: #999;
  font-size: 2rem;
}

.ghos-picker-karte__name {
  padding: .4rem .55rem;
  font-size: .78rem;
  color: #333;
  word-break: break-word;
  border-top: 1px solid #f0eee8;
  background: #fafaf6;
}

.ghos-picker-karte__credit {
  padding: .25rem .55rem .4rem;
  font-size: .7rem;
  color: #888;
  background: #fafaf6;
}

.ghos-picker-karte__check {
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: #7a5a00;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 700;
  border: 1px solid #d6d3c8;
}
.ghos-picker-karte.is-ausgewaehlt .ghos-picker-karte__check {
  background: #7a5a00;
  color: #fff;
  border-color: #7a5a00;
}

.ghos-picker-leer {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 1rem;
  color: #888;
  font-size: .9rem;
}

.ghos-picker-upl-drop {
  border: 2px dashed #cfccc1;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  color: #666;
  background: #fafaf6;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.ghos-picker-upl-drop:hover,
.ghos-picker-upl-drop.is-aktiv {
  border-color: #7a5a00;
  background: #fff;
}

.ghos-picker-upl-liste {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.ghos-picker-upl-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .75rem;
  border-bottom: 1px solid #eeece4;
  font-size: .88rem;
}
.ghos-picker-upl-zeile:last-child { border-bottom: 0; }
.ghos-picker-upl-zeile__name {
  flex: 1;
  word-break: break-word;
  color: #333;
}
.ghos-picker-upl-zeile__status {
  margin-left: 1rem;
  font-size: .8rem;
  color: #666;
}
.ghos-picker-upl-zeile.is-ok .ghos-picker-upl-zeile__status { color: #16a34a; }
.ghos-picker-upl-zeile.is-fehler .ghos-picker-upl-zeile__status { color: #dc2626; }

/* ════════════════════════════════════════════════════════════════════
   v1.55.0 — UI-VEREINHEITLICHUNG
   ════════════════════════════════════════════════════════════════════

   Über die Versionen sind in Views Klassen verwendet worden, die nie
   in app.css definiert wurden. Browser-Defaults haben die Elemente
   dann als „DOS-Look" gerendert (Times-Serif <pre>, ungestylte Buttons,
   raw <table>-Borders). Dieser Block schließt die Lücken — additiv,
   ohne Bruch zu bestehenden Klassen.

   Inhalt:
     • Button-Vollsatz   (--zart 197×, --sekundaer, --warn, --primary
                          Alias, --gross, --neutral, --link, --aktiv,
                          --neben, --mini, --ghost, --erfolg)
     • ghos-pre          (modernes Code/Log-Block-Styling)
     • ghos-form-inline  (Inline-Form mit Feldreihe)
     • ghos-card-header  (Card-Header-Element)
     • Badge-Farbpalette (--blau/--gruen/--gelb/--grau)
     • ghos-link         (semantischer Link-Helper)
     • Tabellen-Alias    (.ghos-tabelle ↔ .ghos-table identisch)
     • Generischer Schliff für inline-styled <pre>/<table>-Bereiche
   ──────────────────────────────────────────────────────────────────── */

/* ── BUTTON-VOLLSATZ ──────────────────────────────────────────────────
   Konvention: Primaer/Haupt sind die kräftigen CTAs. Zart ist die
   sekundäre Variante (transparent, dezent — wird in der Codebase
   197× genutzt). Sekundaer ist ein Alias auf Zart, damit beide
   deutsche Schreibweisen funktionieren. Primary ist der Alias-Fallback
   für den englischen Tippfehler in mail-status/update/selftest.
   ──────────────────────────────────────────────────────────────────── */

.ghos-btn--zart,
.ghos-btn--sekundaer,
.ghos-btn--neutral {
  background: transparent;
  border-color: var(--ghos-trennlinie);
  color: var(--ghos-text-zart);
}
.ghos-btn--zart:hover,
.ghos-btn--sekundaer:hover,
.ghos-btn--neutral:hover {
  background: var(--ghos-bg-zart);
  border-color: var(--ghos-trennlinie-kraeftig);
  color: var(--ghos-text);
}

.ghos-btn--primary {
  /* Englischer Tippfehler-Alias auf --primaer */
  background: var(--ghos-akzent);
  border-color: var(--ghos-akzent);
  color: var(--ghos-akzent-text);
}
.ghos-btn--primary:hover {
  background: var(--ghos-akzent-hell);
  border-color: var(--ghos-akzent-hell);
  color: #fff;
}

.ghos-btn--warn {
  background: var(--ghos-warn-bg);
  border-color: var(--ghos-warn-rand);
  color: var(--ghos-warn-text);
}
.ghos-btn--warn:hover {
  background: #f6e6b8;
  border-color: #d8b87a;
}

.ghos-btn--erfolg {
  background: var(--ghos-erfolg-bg);
  border-color: var(--ghos-erfolg-rand);
  color: var(--ghos-erfolg-text);
}
.ghos-btn--erfolg:hover {
  background: #d8e7cc;
  border-color: #99b88c;
}

.ghos-btn--gross {
  padding: .85rem 1.6rem;
  font-size: 1.05rem;
}

.ghos-btn--mini {
  padding: .2rem .45rem;
  font-size: .76rem;
  border-radius: var(--ghos-radius-xs);
}

.ghos-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ghos-text-zart);
}
.ghos-btn--ghost:hover {
  background: var(--ghos-bg-zart);
  color: var(--ghos-text);
  box-shadow: none;
}

.ghos-btn--link {
  background: transparent;
  border-color: transparent;
  color: var(--ghos-akzent);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: .25rem .35rem;
  box-shadow: none;
}
.ghos-btn--link:hover {
  background: transparent;
  color: var(--ghos-akzent-hell);
  box-shadow: none;
}

.ghos-btn--aktiv {
  background: var(--ghos-akzent-sehr-hell);
  border-color: var(--ghos-akzent);
  color: var(--ghos-akzent);
}

.ghos-btn--neben {
  /* Wird in einer Aktions-Leiste als „weiterer" Button gerendert —
     subtil getrennt vom Haupt-CTA, aber nicht so leise wie --ghost. */
  background: var(--ghos-bg-karte);
  border-color: var(--ghos-trennlinie);
  color: var(--ghos-text);
}
.ghos-btn--neben:hover {
  background: var(--ghos-bg-zart);
  border-color: var(--ghos-trennlinie-kraeftig);
}

/* Mini-Form-Inputs in der Inline-Bestätigung (Update-Restore etc.) —
   früher waren da inline-styles mit font-family:monospace, das
   passt jetzt zum Design-System. */
input[type="text"].ghos-input--mono,
.ghos-input--mono {
  font-family: var(--ghos-font-mono);
  font-size: .9rem;
  padding: .45rem .65rem;
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-klein);
  background: var(--ghos-bg-zart);
}
.ghos-input--mono:focus {
  outline: none;
  border-color: var(--ghos-akzent);
  background: #fff;
  box-shadow: var(--ghos-schatten-fokus);
}

/* ── GHOS-PRE — Code/Log/JSON-Block ──────────────────────────────────
   Ersetzt den Browser-Default <pre> (Times-Serif, weißer Hintergrund,
   eckiger Border-Look). Subtile Card-Optik, monospace, scrollbar bei
   langen Zeilen. Ersetzt auch das veraltete „Terminal-Schwarz" aus
   portal-sync-vorschau (dunkel auf hell ist im Backoffice unruhig).
   ──────────────────────────────────────────────────────────────────── */

.ghos-pre {
  margin: 0;
  padding: .85rem 1rem;
  background: var(--ghos-bg-zart);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-klein);
  color: var(--ghos-text);
  font-family: var(--ghos-font-mono);
  font-size: .82rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 480px;
}
.ghos-pre--kompakt {
  padding: .55rem .75rem;
  font-size: .78rem;
  max-height: 240px;
}
.ghos-pre--zeile {
  /* Einzeilige Code-Snippets wie GET-URLs in Cron-Hinweisen */
  white-space: nowrap;
  overflow-x: auto;
  max-height: none;
}
.ghos-pre--terminal {
  /* Wenn dunkles Pre wirklich gewollt ist (z.B. JSON-Diff-Vorschau),
     diese Variante explizit anfordern. Verträgliche Dark-Mode-Farben,
     keine harten DOS-Schwarz-Werte. */
  background: #1f2329;
  color: #e3e7ee;
  border-color: #2e333b;
}
.ghos-pre--terminal code { color: inherit; background: transparent; padding: 0; border: 0; }

.ghos-pre[class*="ghos-pre"]::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.ghos-pre[class*="ghos-pre"]::-webkit-scrollbar-thumb {
  background: var(--ghos-trennlinie-kraeftig);
  border-radius: 4px;
}

/* ── FORM-INLINE ──────────────────────────────────────────────────────
   Horizontaler Form-Container (Label + Input + Button auf einer Linie).
   Verwendet in /system/mail (Verbindungstest, Test-Mail) und in
   einigen Quick-Action-Forms. Bricht auf Mobile sauber um.
   ──────────────────────────────────────────────────────────────────── */

.ghos-form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .65rem;
  margin: 0;
}
.ghos-form-inline .ghos-feld {
  flex: 1 1 14rem;
  min-width: 0;
}
.ghos-form-inline .ghos-btn {
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .ghos-form-inline { flex-direction: column; align-items: stretch; }
  .ghos-form-inline .ghos-btn { width: 100%; }
}

/* ── CARD-HEADER (für die backup/aktion-Karten) ──────────────────────
   .ghos-card hat keinen eigenen Kopf-Slot — der wird hier nachgereicht.
   ──────────────────────────────────────────────────────────────────── */

.ghos-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--ghos-trennlinie);
  background: var(--ghos-bg-zart);
  font-weight: 600;
  font-size: .95rem;
  color: var(--ghos-text);
}
.ghos-card-header small {
  font-weight: 400;
  color: var(--ghos-text-leise);
  font-size: .82rem;
}
.ghos-card-body {
  padding: 1rem;
}
.ghos-card-body--kompakt { padding: .65rem 1rem; }

/* ── BADGE-FARBPALETTE ────────────────────────────────────────────────
   Generische Farb-Badges für freie Kategorien (Backup-Typ, Auftrags-
   Kategorie etc.). Erfolg/Fehler/Warn/Info bleiben semantisch — diese
   hier sind „nur Farbe", für nicht-semantische Sortierungen.
   ──────────────────────────────────────────────────────────────────── */

.ghos-badge--blau   { background: #e1ecf7; color: #1f4774; }
.ghos-badge--gruen  { background: #e3eedd; color: #3a5e2c; }
.ghos-badge--gelb   { background: #fbf0c8; color: #7a5311; }
.ghos-badge--grau   { background: #ebe9e3; color: #5b574c; }
.ghos-badge--rot    { background: #f7dede; color: #8a2a2a; }
.ghos-badge--violett { background: #ece4f3; color: #5a3a78; }

/* ── GHOS-LINK — semantischer Text-Link in Cards/Listen ──────────────
   Wird in system/update/index.php als <summary class="ghos-link">
   verwendet — bisher unstyled (gestrichelt-default vom Browser).
   ──────────────────────────────────────────────────────────────────── */

.ghos-link {
  color: var(--ghos-akzent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ghos-link:hover { color: var(--ghos-akzent-hell); }
.ghos-link--leise {
  color: var(--ghos-text-zart);
  text-decoration-color: var(--ghos-trennlinie-kraeftig);
}
.ghos-link--leise:hover { color: var(--ghos-text); }

/* ── TABELLEN-ALIAS ───────────────────────────────────────────────────
   .ghos-tabelle (alt, deutsch) und .ghos-table (neu, englisch) liefen
   nebeneinander mit minimal abweichenden Maßen — Header-Farben unter-
   schiedlich, Padding leicht anders. Beide bekommen jetzt das gleiche
   Erscheinungsbild. .ghos-table wird auf .ghos-tabelle-Standard
   hochgezogen. Auch wrap-Container für horizontales Scrollen.
   ──────────────────────────────────────────────────────────────────── */

.ghos-table {
  /* Lese mit ghos-tabelle gleich: Header in --text-leise, kompakteres
     Padding, dünnere Trennlinien. */
  border-collapse: collapse;
  font-size: .92rem;
}
.ghos-table thead th {
  background: transparent;
  text-align: left;
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ghos-text-leise);
  border-bottom: 1px solid var(--ghos-trennlinie);
  padding: .55rem .8rem;
}
.ghos-table tbody td {
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--ghos-trennlinie);
  vertical-align: middle;
}
.ghos-table tbody tr:hover {
  background: var(--ghos-bg-zart);
}
.ghos-table tbody tr:last-child td {
  border-bottom: none;
}
.ghos-table th {
  /* Wenn <th> direkt in <tr> ohne <thead> (Schlüssel-Wert-Listen wie
     in mail-status), dann linksbündig, leise Farbe. */
  text-align: left;
  font-weight: 600;
  font-size: .82rem;
  color: var(--ghos-text-zart);
}
.ghos-table tbody tr th {
  /* Schlüssel-Spalte in 2-Spalten-Listen: nicht uppercase, schmal */
  width: 12rem;
  text-transform: none;
  letter-spacing: 0;
  padding: .6rem .8rem;
  vertical-align: top;
}
.ghos-table code {
  font-size: .85em;
}

.ghos-table-wrap {
  /* Tabellen werden auf Mobile oft schmaler als ihr Inhalt — Wrapper
     mit overflow-x:auto verhindert Layout-Brüche. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  background: var(--ghos-bg-karte);
}
.ghos-table-wrap > .ghos-table,
.ghos-table-wrap > .ghos-tabelle {
  width: 100%;
  margin: 0;
}

/* ── HEADLINES IM CONTENT-BEREICH ────────────────────────────────────
   Inline-Hardcoded <h2 style="margin-top:1.5rem"> in den älteren
   Diagnose-Views bekommt eine konsistente Default-Erscheinung. */

.ghos-admin__inhalt h2 {
  font-family: var(--ghos-font-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 1.75rem 0 .75rem;
  color: var(--ghos-text);
}
.ghos-admin__inhalt h2:first-child,
.ghos-admin__inhalt section > h2:first-child,
.ghos-block > h2:first-child,
.ghos-section > h2:first-child,
.ghos-section__body > h2:first-child {
  margin-top: 0;
}
.ghos-admin__inhalt h3 {
  font-weight: 600;
  font-size: 1.02rem;
  margin: 1.25rem 0 .5rem;
  color: var(--ghos-text);
  letter-spacing: -.005em;
}
.ghos-admin__inhalt h3:first-child { margin-top: 0; }

/* ── DETAILS / SUMMARY ────────────────────────────────────────────────
   <details>/<summary> erscheinen sonst mit nativem Driver-Look (kleines
   schwarzes Dreieck, Times-Default). Anheben aufs Design-System. */

details.ghos-details > summary,
.ghos-admin__inhalt details > summary {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .5rem .25rem 0;
  font-weight: 500;
  font-size: .9rem;
  color: var(--ghos-text-zart);
  list-style: none;
  border-radius: var(--ghos-radius-xs);
  transition: color var(--ghos-uebergang-schnell);
}
details.ghos-details > summary::-webkit-details-marker,
.ghos-admin__inhalt details > summary::-webkit-details-marker { display: none; }
details.ghos-details > summary::before,
.ghos-admin__inhalt details > summary::before {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-right: .2rem;
  transition: transform var(--ghos-uebergang-schnell);
  flex-shrink: 0;
}
details[open].ghos-details > summary::before,
.ghos-admin__inhalt details[open] > summary::before {
  transform: rotate(90deg);
}
details.ghos-details > summary:hover,
.ghos-admin__inhalt details > summary:hover { color: var(--ghos-text); }

details.ghos-details,
.ghos-admin__inhalt details {
  margin: .5rem 0;
}
details.ghos-details > *:not(summary),
.ghos-admin__inhalt details > *:not(summary) {
  margin-top: .5rem;
}

/* ── CODE-INLINE-FEINSCHLIFF ──────────────────────────────────────────
   Bereits in app.css definiert — hier nur die Dichte für Diagnose-
   Tabellen, wo viele <code>-Werte hintereinander stehen. */

.ghos-admin__inhalt code {
  font-family: var(--ghos-font-mono);
  font-size: .85em;
  background: var(--ghos-bg-zart);
  border: 1px solid var(--ghos-trennlinie);
  padding: .08em .35em;
  border-radius: 3px;
  color: var(--ghos-text);
  white-space: nowrap;
}
.ghos-admin__inhalt code small { font-size: .9em; }

/* ── DIAGNOSE-KARTE (für portal-sync-vorschau Status-Reihe) ──────────
   Standardisiert die KPI-Kacheln-Reihe, die bisher mit inline-styles
   zusammengeflickt war. */

.ghos-kpi-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
  margin: 0 0 1.25rem;
}
.ghos-kpi {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.ghos-kpi__label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ghos-text-leise);
  font-weight: 600;
}
.ghos-kpi__wert {
  font-family: var(--ghos-font-display);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ghos-text);
}
.ghos-kpi__sub {
  font-size: .78rem;
  color: var(--ghos-text-zart);
  margin-top: .15rem;
}
.ghos-kpi--alarm {
  border-left: 3px solid var(--ghos-fehler-text);
  background: linear-gradient(90deg, var(--ghos-fehler-bg) 0%, var(--ghos-bg-karte) 30%);
}
.ghos-kpi--alarm .ghos-kpi__wert { color: var(--ghos-fehler-text); }
.ghos-kpi--alarm .ghos-kpi__sub { color: var(--ghos-fehler-text); }
.ghos-kpi--mono .ghos-kpi__wert {
  font-family: var(--ghos-font-mono);
  font-size: 1rem;
  word-break: break-all;
  line-height: 1.3;
}

/* ── BEDINGTE TABELLEN-ZEILEN (Highlight-Reihen in Diagnose) ─────────
   Statt inline background-Color → semantische Klasse */

.ghos-tabelle tr.is-alarm,
.ghos-table   tr.is-alarm {
  background: var(--ghos-fehler-bg);
}
.ghos-tabelle tr.is-alarm:hover,
.ghos-table   tr.is-alarm:hover {
  background: #fbdcdc;
}
.ghos-tabelle tr.is-warn,
.ghos-table   tr.is-warn {
  background: var(--ghos-warn-bg);
}
.ghos-tabelle tr.is-warn:hover,
.ghos-table   tr.is-warn:hover {
  background: #f8e8b4;
}

/* ── ALERTS-VARIANTEN ergänzt ─────────────────────────────────────────
   .ghos-alert--ok und --erfolg waren teilweise nur teils definiert. */

.ghos-alert--ok,
.ghos-alert--erfolg {
  background: var(--ghos-erfolg-bg);
  border-color: var(--ghos-erfolg-rand);
  color: var(--ghos-erfolg-text);
}
.ghos-alert--info {
  background: var(--ghos-info-bg);
  border-color: var(--ghos-info-rand);
  color: var(--ghos-info-text);
}

/* ── BADGE-WARN war als --warn nicht überall — sicherstellen ────────── */

.ghos-badge--warn,
.ghos-badge--warnung {
  background: var(--ghos-warn-bg);
  color: var(--ghos-warn-text);
}

/* ── INPUT-FOKUS-VEREINHEITLICHUNG ───────────────────────────────────
   Browser-Defaults schlagen oft durch (blauer Webkit-Outline auf
   <input>/<textarea>/<select>) und überlagern den Akzent-Schatten. */

.ghos-admin__inhalt input[type="text"]:focus,
.ghos-admin__inhalt input[type="email"]:focus,
.ghos-admin__inhalt input[type="password"]:focus,
.ghos-admin__inhalt input[type="number"]:focus,
.ghos-admin__inhalt input[type="search"]:focus,
.ghos-admin__inhalt input[type="tel"]:focus,
.ghos-admin__inhalt input[type="url"]:focus,
.ghos-admin__inhalt input[type="date"]:focus,
.ghos-admin__inhalt input[type="time"]:focus,
.ghos-admin__inhalt input[type="datetime-local"]:focus,
.ghos-admin__inhalt textarea:focus,
.ghos-admin__inhalt select:focus {
  outline: none;
  border-color: var(--ghos-akzent);
  box-shadow: var(--ghos-schatten-fokus);
}

/* ── SECTIONS-DEFAULT mit Lufthülle ───────────────────────────────────
   Wenn eine View <section> ohne Block-Klasse nutzt, kein DOS-Look
   ohne Trennung. */

.ghos-admin__inhalt > section:not([class]),
.ghos-admin__inhalt > section.ghos-card:not(.ghos-card--ohne-padding) {
  margin: 0 0 1.25rem;
}
.ghos-admin__inhalt > section.ghos-card:not(.ghos-card--ohne-padding) {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  padding: 1.25rem;
  box-shadow: var(--ghos-schatten-mini);
}
.ghos-admin__inhalt > section.ghos-card > .ghos-card-header {
  margin: -1.25rem -1.25rem 1rem;
  border-radius: var(--ghos-radius) var(--ghos-radius) 0 0;
}
.ghos-admin__inhalt > section.ghos-card > .ghos-card-header + p {
  margin-top: 0;
}

/* ── KEYBOARD-FOCUS ───────────────────────────────────────────────────
   Sichtbarer Fokus für Tastatur-Nutzer — vorher war's der Browser-
   Default-Outline (DOS-Blau). */

.ghos-admin__inhalt a:focus-visible,
.ghos-admin__inhalt button:focus-visible {
  outline: 2px solid var(--ghos-akzent);
  outline-offset: 2px;
  border-radius: var(--ghos-radius-xs);
}

/* ── FEINSCHLIFF SIDEBAR ──────────────────────────────────────────────
   Aktive Nav-Items hatten leichten Inset-Schatten links. Auf hochauf-
   gelösten Displays subtil sichtbar. Hier kein Patch — schon ok. */

/* ── PRINT ────────────────────────────────────────────────────────────
   Druck-Ansicht ohne Sidebar, ohne dunkle Hintergründe. */

@media print {
  .ghos-admin__sidebar,
  .ghos-admin__topbar,
  .ghos-page-header__aktionen,
  .ghos-toolbar,
  .ghos-form-aktionen { display: none !important; }
  /* v1.58.8 — neben grid-template-columns auch die areas zuruecksetzen,
     sonst hat das neue Grid-Layout (mit Areas fuer topbar/sidebar/inhalt)
     beim Druck noch eine Topbar-Row, die zwar visuell weg ist (display:
     none), aber das Grid die Zeile reserviert. */
  .ghos-admin {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    grid-template-areas: "inhalt" !important;
  }
  .ghos-admin__inhalt { padding: 0 !important; max-width: 100% !important; }
  .ghos-card, .ghos-block, .ghos-section {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    page-break-inside: avoid;
  }
  .ghos-pre, .ghos-pre--terminal {
    background: #fafafa !important;
    color: #111 !important;
    border-color: #ddd !important;
  }
}

/* ── GHOS-TEXTBOX — pre-formatiert, aber prosa-fonts ──────────────────
   Für Freitext-Felder (Allergien, Bemerkungen, Notizen), die Zeilen-
   umbrüche bewahren sollen, aber visuell nicht als „Code" wirken
   sollen. Ersetzt die alten <pre style="font-family:inherit">. */

.ghos-textbox {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
}
.ghos-textbox--gefahr {
  color: var(--ghos-fehler-text);
  font-weight: 500;
}
.ghos-textbox--karte {
  background: var(--ghos-bg-zart);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-klein);
  padding: .6rem .8rem;
}

/* ── v1.55.0 — Generische Aliase und Helfer ──────────────────────────
   Klassen, die in Views ohne Definition aufgetaucht sind und ent-
   weder semantische Aliase älterer Namen sind oder generische
   Utility-Helfer ohne festes Modul. */

/* Semantische Pill-Aliase (deutsch ⇄ englisch) */
.ghos-pill--ok        { background: var(--ghos-erfolg-bg); color: var(--ghos-erfolg-text); border-color: var(--ghos-erfolg-rand); }
.ghos-pill--warnung   { background: var(--ghos-warn-bg);   color: var(--ghos-warn-text);   border-color: var(--ghos-warn-rand); }
.ghos-pill--gefahr    { background: var(--ghos-fehler-bg); color: var(--ghos-fehler-text); border-color: var(--ghos-fehler-rand); }

/* Badge-Alias */
.ghos-badge--zart {
  background: var(--ghos-bg-zart);
  color: var(--ghos-text-zart);
  border: 1px solid var(--ghos-trennlinie);
}

/* Text-Hilfen */
.ghos-text--zart  { color: var(--ghos-text-zart); }
.ghos-text--leise { color: var(--ghos-text-leise); }
.ghos-mute        { color: var(--ghos-text-leise); font-size: .88rem; }
.ghos-text-right  { text-align: right; }
.ghos-text-mono   { font-family: var(--ghos-font-mono); font-size: .9em; }

/* Page-Header __actions ist der englische Alias von __aktionen */
.ghos-page-header__actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Hinweis-Variante als zarte Info-Karte (nicht so laut wie Alert) */
.ghos-hinweis {
  margin: 0 0 1rem;
  padding: .65rem .85rem;
  background: var(--ghos-bg-zart);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-klein);
  font-size: .92rem;
  color: var(--ghos-text-zart);
}
.ghos-hinweis--info {
  background: var(--ghos-info-bg);
  border-color: var(--ghos-info-rand);
  color: var(--ghos-info-text);
}
.ghos-hinweis--warn {
  background: var(--ghos-warn-bg);
  border-color: var(--ghos-warn-rand);
  color: var(--ghos-warn-text);
}

/* Empty-State-Aliase (es kursieren 4 Schreibweisen in den Views) */
.ghos-leer,
.ghos-leerer-zustand,
.ghos-leerstand,
.ghos-leerzustand {
  text-align: center;
  padding: 2rem 1.25rem;
  color: var(--ghos-text-zart);
  font-size: .95rem;
  background: var(--ghos-bg-zart);
  border: 1px dashed var(--ghos-trennlinie-kraeftig);
  border-radius: var(--ghos-radius);
}

/* Tabellen-Helfer-Aliase */
.ghos-tabelle-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ghos-tabelle--klein { font-size: .85rem; }
.ghos-tabelle--klein th,
.ghos-tabelle--klein td { padding: .4rem .55rem; }
.ghos-tabelle__rechts { text-align: right; }
.ghos-tabelle__aktionen {
  text-align: right;
  white-space: nowrap;
}
.ghos-table--meta {
  /* Schlüssel/Wert-Tabellen ohne Hover, schmal */
  font-size: .9rem;
}
.ghos-table--meta th,
.ghos-table--meta tbody tr th {
  background: transparent;
  color: var(--ghos-text-zart);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  width: auto;
  padding: .35rem .65rem .35rem 0;
}
.ghos-table--meta td { padding: .35rem 0; }
.ghos-table--meta tbody tr:hover { background: transparent; }
.ghos-table--meta tr td,
.ghos-table--meta tr th { border-bottom-color: var(--ghos-bg-tief); }

/* Flex-Helfer (sparsam, aber häufig erwartet) */
.ghos-flex {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ghos-flex--zwischen { justify-content: space-between; }
.ghos-flex--wrap     { flex-wrap: wrap; }
.ghos-flex--spalte   { flex-direction: column; align-items: stretch; }

/* Formular-Alias (deutsch zu engl. .ghos-form) */
.ghos-formular {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ghos-formular__zeile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.ghos-formular__aktionen {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--ghos-trennlinie);
}

/* Print-Helfer */
.ghos-no-print { /* sichtbar normal */ }
@media print {
  .ghos-no-print { display: none !important; }
}

/* Key/Value-Display (kompakte Definitionsliste) */
.ghos-key-value {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem 1rem;
  font-size: .92rem;
  margin: 0;
}
.ghos-key-value dt {
  color: var(--ghos-text-zart);
  font-weight: 500;
}
.ghos-key-value dd { margin: 0; color: var(--ghos-text); }

/* Sticky Submit-Leiste (z.B. lange Formulare) */
.ghos-sticky-submit {
  position: sticky;
  bottom: 0;
  background: var(--ghos-bg-karte);
  border-top: 1px solid var(--ghos-trennlinie);
  padding: .85rem 1rem;
  margin: 1.25rem -1.25rem -1.25rem;
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  z-index: 5;
  box-shadow: 0 -2px 8px rgba(0,0,0,.04);
}

/* Breadcrumb (falls in Detail-Views genutzt) */
.ghos-breadcrumb {
  font-size: .85rem;
  color: var(--ghos-text-leise);
  margin: 0 0 .75rem;
  display: flex;
  gap: .35rem;
  align-items: center;
  flex-wrap: wrap;
}
.ghos-breadcrumb a {
  color: var(--ghos-text-zart);
  text-decoration: none;
}
.ghos-breadcrumb a:hover { color: var(--ghos-text); text-decoration: underline; }
.ghos-breadcrumb .sep {
  color: var(--ghos-text-leise);
}

/* Marke-Logo im Sidebar-Header */
.ghos-admin__marke-logo {
  display: block;
  text-decoration: none;
  color: inherit;
}
.ghos-admin__marke-logo:hover { opacity: .9; }

/* Hauptspalte in Detail-Layouts (deutsch zu __main) */
.ghos-haus-detail__hauptspalte { min-width: 0; }

/* ════════════════════════════════════════════════════════════════════
   v1.55.1 — GLOBALE FORM-DEFAULTS
   ════════════════════════════════════════════════════════════════════
   In v1.55.0 wurde nur :focus aufs Design-System gezogen — der
   Default-State der Form-Felder fiel aber auf den Browser zurück
   (eckiger 1px-Border, Times-fallback, Padding 1-2px). Genau das ist
   was JR als „DOS-Felder" auf /admin/einstellungen/steuer sah:
   <input type="text">, <textarea>, <select> ohne .ghos-input-Klasse.

   Diese Regeln greifen NUR im .ghos-admin__inhalt-Scope, damit sie
   weder den Login-Card noch interne Komponenten (Mediathek-Picker
   im Modal mit eigenen Inputs) durcheinanderbringen.

   Die explizit gestylten Klassen (.ghos-input, .ghos-feld input,
   .ghos-select, .ghos-textarea) gewinnen über höhere Spezifität —
   die hier sind reine Defaults für nackte Tags.
   ──────────────────────────────────────────────────────────────────── */

.ghos-admin__inhalt input[type="text"],
.ghos-admin__inhalt input[type="email"],
.ghos-admin__inhalt input[type="password"],
.ghos-admin__inhalt input[type="number"],
.ghos-admin__inhalt input[type="search"],
.ghos-admin__inhalt input[type="tel"],
.ghos-admin__inhalt input[type="url"],
.ghos-admin__inhalt input[type="date"],
.ghos-admin__inhalt input[type="time"],
.ghos-admin__inhalt input[type="datetime-local"],
.ghos-admin__inhalt input[type="month"],
.ghos-admin__inhalt input[type="week"],
.ghos-admin__inhalt input:not([type]),
.ghos-admin__inhalt select,
.ghos-admin__inhalt textarea {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  padding: .5rem .7rem;
  border: 1px solid var(--ghos-trennlinie-kraeftig);
  border-radius: var(--ghos-radius-klein);
  background: #fff;
  color: var(--ghos-text);
  transition: border-color var(--ghos-uebergang-schnell),
              box-shadow var(--ghos-uebergang-schnell),
              background var(--ghos-uebergang-schnell);
  /* Browser-Defaults niederringen */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* <select> bekommt seinen Pfeil per Background-SVG zurück, weil
   appearance:none ihn killt. */
.ghos-admin__inhalt select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='2 4 6 8 10 4'/></svg>");
  background-repeat: no-repeat;
  background-position: right .65rem center;
  padding-right: 2rem;
  cursor: pointer;
}

.ghos-admin__inhalt textarea {
  min-height: 5em;
  resize: vertical;
  line-height: 1.55;
}

/* Disabled + Readonly haben einen leise getönten Hintergrund — sonst
   wirkt es als wäre das Feld editierbar. */
.ghos-admin__inhalt input[disabled],
.ghos-admin__inhalt input[readonly],
.ghos-admin__inhalt select[disabled],
.ghos-admin__inhalt textarea[disabled],
.ghos-admin__inhalt textarea[readonly] {
  background: var(--ghos-bg-zart);
  color: var(--ghos-text-zart);
  cursor: not-allowed;
  border-color: var(--ghos-trennlinie);
}
.ghos-admin__inhalt input[disabled]::placeholder,
.ghos-admin__inhalt textarea[disabled]::placeholder {
  color: var(--ghos-text-leise);
}

/* Placeholder dezent — Browser-Defaults sind oft zu dunkel-grau. */
.ghos-admin__inhalt input::placeholder,
.ghos-admin__inhalt textarea::placeholder {
  color: var(--ghos-text-leise);
  opacity: 1;
}

/* Number-Inputs: rechtsbündige Ziffern wirken in Steuersatz-Listen
   sauberer. tabular-nums verhindert Spalten-Hüpfen beim Tippen. */
.ghos-admin__inhalt input[type="number"] {
  font-variant-numeric: tabular-nums;
}

/* Schmale Number-Inputs (z.B. Prozent-Sätze) bekommen einen Default-
   max-width, damit ein "7" oder "19" nicht 100 % der Breite einnimmt. */
.ghos-admin__inhalt input[type="number"]:not([style*="width"]):not([style*="max-width"]) {
  max-width: 10rem;
}

/* Checkbox + Radio: bequemere Treffer-Fläche, Akzent-Farbe für
   den ausgewählten Zustand (statt System-Default-Blau). */
.ghos-admin__inhalt input[type="checkbox"],
.ghos-admin__inhalt input[type="radio"] {
  accent-color: var(--ghos-akzent);
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
}

/* <fieldset>/<legend>-Defaults — falls eine View ohne Klassen einen
   fieldset rendert (kommt selten vor, aber wenn, sah es nach 1990 aus). */
.ghos-admin__inhalt fieldset {
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius);
  padding: 1rem 1.25rem 1.25rem;
  margin: 0 0 1rem;
  background: var(--ghos-bg-karte);
}
.ghos-admin__inhalt legend {
  padding: 0 .5rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ghos-text-zart);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* <hr>-Default — manche Trenner sahen als nackter brauner Browser-
   HR aus den 90ern aus. */
.ghos-admin__inhalt hr {
  border: 0;
  border-top: 1px solid var(--ghos-trennlinie);
  margin: 1.5rem 0;
}

/* Labels ohne Klasse: zumindest font-weight + Spacing setzen. */
.ghos-admin__inhalt .ghos-form__feld > label:not([class]),
.ghos-admin__inhalt .ghos-feld > label:not([class]),
.ghos-admin__inhalt .ghos-formular__zeile > label:not([class]) {
  font-size: .9rem;
  font-weight: 500;
  color: var(--ghos-text);
  display: block;
  margin-bottom: .35rem;
}

/* <small> in einem Feld-Block ist immer der Hilfe-Text → leise Farbe. */
.ghos-admin__inhalt .ghos-form__feld > small,
.ghos-admin__inhalt .ghos-feld > small {
  font-size: .82rem;
  color: var(--ghos-text-zart);
  display: block;
  margin-top: .3rem;
  line-height: 1.45;
}

/* File-Upload <input type="file"> hat in jedem Browser eine andere
   System-Native-Optik. Wir lassen ihn nativ, geben ihm aber zumindest
   Padding/Spacing damit er sich ins Layout einreiht. */
.ghos-admin__inhalt input[type="file"] {
  font-size: .9rem;
  padding: .35rem 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  width: 100%;
}
/* v2.6.0 — Website-Verwaltung (os-suite-cms): versteckte Dateifelder des
   Bausteins (.cms-v-nur-sr) nicht auf volle Breite ziehen (390 px: Querscrollen). */
.ghos-admin__inhalt .cms-v input[type="file"].cms-v-nur-sr { width: 1px; padding: 0; }
.ghos-admin__inhalt input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: .85rem;
  padding: .4rem .8rem;
  border: 1px solid var(--ghos-trennlinie-kraeftig);
  border-radius: var(--ghos-radius-klein);
  background: var(--ghos-bg-karte);
  color: var(--ghos-text);
  cursor: pointer;
  margin-right: .75rem;
  transition: background var(--ghos-uebergang-schnell);
}
.ghos-admin__inhalt input[type="file"]::file-selector-button:hover {
  background: var(--ghos-bg-zart);
}

/* ════════════════════════════════════════════════════════════════════
   v1.56.0 — KI-KNOPF-REIHE über Form-Feldern
   ════════════════════════════════════════════════════════════════════
   Pattern: Über einem Textarea liegt eine Steuer-Reihe mit Intent-
   Select + Zusatz-Input + ✨-Knopf. Verwendet in der Anfrage-Antwort,
   später potenziell auch in Mail-Vorlagen oder Voucher-Texten.
   ──────────────────────────────────────────────────────────────────── */

.ghos-ki-knopf-reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  margin: 0 0 .4rem;
  flex-wrap: wrap;
}
.ghos-ki-knopf-reihe__steuerung {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.ghos-ki-knopf-reihe__steuerung .ghos-input,
.ghos-ki-knopf-reihe__steuerung .ghos-select {
  width: auto;
  min-width: 0;
  margin: 0;
}

/* Kompakte Varianten der Form-Bausteine — auch nutzbar in anderen
   Inline-Toolbars. */
.ghos-select--klein,
.ghos-input--klein {
  font-size: .85rem;
  padding: .35rem .55rem;
  border-radius: var(--ghos-radius-klein);
  border: 1px solid var(--ghos-trennlinie);
}
.ghos-select--klein {
  padding-right: 1.65rem;
}
.ghos-input--klein {
  min-width: 12rem;
}
@media (max-width: 720px) {
  .ghos-ki-knopf-reihe {
    flex-direction: column;
    align-items: stretch;
  }
  .ghos-ki-knopf-reihe__steuerung {
    margin-left: 0;
    width: 100%;
  }
  .ghos-ki-knopf-reihe__steuerung .ghos-input--klein {
    flex: 1;
    min-width: 0;
  }
}

/* Der ✨-Knopf bekommt einen ganz leichten Akzent — er soll auffindbar
   sein, aber nicht mit dem Haupt-CTA „Antwort senden" konkurrieren. */
.ghos-btn--zart[data-ki="anfrage-antwort"] {
  color: var(--ghos-akzent);
  border-color: var(--ghos-trennlinie);
}
.ghos-btn--zart[data-ki="anfrage-antwort"]:hover {
  background: var(--ghos-akzent-sehr-hell);
  border-color: var(--ghos-akzent);
  color: var(--ghos-akzent);
}
.ghos-btn--zart[data-ki="anfrage-antwort"][disabled] {
  opacity: .6;
  cursor: progress;
}

/* ─────────────────────────────────────────────────────────────────
   v1.57.1 — TOPBAR + HAUS-WECHSLER (auf Desktop sichtbar)
   ─────────────────────────────────────────────────────────────────
   Topbar sitzt im Grid-Layout über dem Content (rechts neben Sidebar).
   Sie wird in v1.57.1 auch auf Desktop sichtbar gemacht — vorher war
   sie `ghos-m-only-mobile`. Der Haus-Wechsler wandert aus der dunklen
   Sidebar in die helle Topbar; passt jetzt visuell besser ins Theme
   und ist als „globale Auswahl" UX-richtiger platziert.

   Layout-Strategie:
     - Topbar bleibt im DOM, ist Container für: Hamburger (mobile),
       Marken-Text (mobile), Spacer (flex), Haus-Wechsler (beide).
     - Auf Desktop: nur Wechsler sichtbar → wenn KEIN Wechsler (≤1 Haus
       oder System-Modus), kollabiert die Topbar visuell auf 0-Höhe
       per :empty-ähnlichem Trick. Wir nutzen min-height: 0 + padding:
       0 wenn kein Kind-Inhalt rendert.
     - Im Mandant-Modus mit 1 Haus auf Desktop bleibt die Topbar als
       schmaler unsichtbarer Streifen — kein visuelles Rauschen.
   ───────────────────────────────────────────────────────────────── */

/* Topbar — Override des bestehenden Block-Styles. Der ursprüngliche
   Topbar-Stil (~Z.1930) ist Mobile-First; wir nehmen ihn um zwei
   Eigenschaften zurück, damit Desktop nicht doppelt padding bekommt.

   v1.58.8 — Topbar-Placement laeuft jetzt ueber grid-template-areas
   in .ghos-admin (Z.169). Der frueher hier eingebaute Workaround
   `grid-column: 1 / -1` ist damit redundant und entfernt — die
   `grid-area: topbar` greift ohnehin. */
.ghos-admin__topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--ghos-hintergrund, #fafaf7);
  border-bottom: 1px solid var(--ghos-trennlinie, #e6e4dd);
  min-height: 56px;
}
.ghos-admin__topbar-spacer {
  flex: 1;
}

/* Mobile-Topbar-Marken-Text: zentriert (wie vorher) */
.ghos-admin__topbar-marke {
  font-weight: 600;
  color: var(--ghos-text, #1f2a37);
  font-size: 15px;
  line-height: 1.2;
  /* Auf Mobile sichtbar, auf Desktop versteckt via ghos-m-only-mobile */
}

/* Wechsler — kompakt, rechtsbündig, Topbar-Theme-konform */
.ghos-admin__haus-wechsler {
  display: flex;
  align-items: center;
  margin: 0;
}
.ghos-admin__haus-wechsler-select {
  padding: 6px 32px 6px 12px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ghos-text, #1f2a37);
  background-color: #fff;
  border: 1px solid var(--ghos-trennlinie-kraeftig, #cdc9bd);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%234b5563' stroke-width='1.5'%3E%3Cpolyline points='1 1 5 5 9 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  max-width: 220px;
}
.ghos-admin__haus-wechsler-select:hover {
  border-color: var(--ghos-akzent, #1f3a5f);
}
.ghos-admin__haus-wechsler-select:focus {
  outline: none;
  border-color: var(--ghos-akzent, #1f3a5f);
  box-shadow: 0 0 0 3px var(--ghos-akzent-sehr-hell, #e8eef7);
}

/* Wenn die Topbar auf Desktop ohne Wechsler dasteht (≤1 Haus oder
   System-Modus), wollen wir keinen sinnlosen Streifen — mit :has()
   kollabieren. Auf Mobile bleibt sie für Hamburger+Marke immer da. */
@media (min-width: 768px) {
  @supports selector(:has(*)) {
    .ghos-admin__topbar:not(:has(.ghos-admin__haus-wechsler)) {
      min-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      border-bottom-width: 0;
    }
  }
}

@media (max-width: 767px) {
  .ghos-admin__topbar {
    padding: 8px 14px;
  }
  .ghos-admin__haus-wechsler-select {
    /* iOS-Autozoom-Verhinderung: 16px Font im Select */
    font-size: 16px;
    padding: 8px 32px 8px 12px;
    max-width: 150px;
  }
  .ghos-admin__topbar-marke {
    /* Auf Mobile soll Marke nicht zwischen Hamburger und Wechsler
       quetschen, daher trunkieren wenn nötig */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50vw;
  }
}


/* ════════════════════════════════════════════════════════════════════
   v1.74.0 — FORM-LAYOUT-VEREINHEITLICHUNG
   ════════════════════════════════════════════════════════════════════
   Reagiert auf das Feedback "Felder flattern, kein Rhythmus, keine
   Struktur". Bisher hatten Formulare im Admin drei strukturelle
   Schwächen:

   1. Inputs nicht voll-breit in ihren Grid-Zellen (`width` Browser-
      default, `box-sizing` content-box). Resultat: gleiche Spalte,
      unterschiedlich breite Inputs je nach Browser-Defaults.
   2. <label>Vorname<input>...</label> hatte keine Block-Struktur —
      Label-Text rutschte vor den Input statt darüber zu sitzen.
   3. Sektionen nutzten inline-styles
      `display:grid;grid-template-columns:repeat(auto-fit,minmax(NNNpx,1fr))`
      mit pro Sektion unterschiedlichem NNN. Dadurch sprang die
      Spaltenzahl von Sektion zu Sektion.

   Diese Welle löst (1) und (2) global per CSS — alle 91 Admin-
   Formulare profitieren ohne Markup-Änderung. (3) bekommt eine
   saubere Alternative mit `.ghos-form-grid` + `.span-N`-Klassen
   (12-Spalten-System), und die wichtigsten Personal-Formulare
   werden im selben Release migriert.

   Scope ist konsequent `.ghos-admin__inhalt` — Login-Card, Public-
   Frontend und PWA bleiben unangetastet.
   ──────────────────────────────────────────────────────────────────── */

/* ── (1) Inputs/Selects/Textareas: voll-breit, konsistente Höhe ────── */
.ghos-admin__inhalt input[type="text"],
.ghos-admin__inhalt input[type="email"],
.ghos-admin__inhalt input[type="password"],
.ghos-admin__inhalt input[type="number"],
.ghos-admin__inhalt input[type="search"],
.ghos-admin__inhalt input[type="tel"],
.ghos-admin__inhalt input[type="url"],
.ghos-admin__inhalt input[type="date"],
.ghos-admin__inhalt input[type="time"],
.ghos-admin__inhalt input[type="datetime-local"],
.ghos-admin__inhalt input[type="month"],
.ghos-admin__inhalt input[type="week"],
.ghos-admin__inhalt input:not([type]),
.ghos-admin__inhalt select,
.ghos-admin__inhalt textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.5rem;          /* einheitliche Mindest-Höhe */
  line-height: 1.4;
  display: block;
}

/* Textareas: Mindesthöhe als Mehrzeilen-Hinweis, dann frei wachsend */
.ghos-admin__inhalt textarea {
  min-height: 5rem;
}

/* Number-Inputs: in der Regel kurze Zahlen, dürfen schmaler bleiben
   wenn sie eine explizite max-width im inline-style haben — width:100%
   überschreibt das nicht (Browser nimmt die kleinere). */

/* ── (2) <label> mit Input-Child wird zum Feld-Wrapper ────────────── */
/* `:has()` ist seit Chrome 105 / Safari 15.4 / Firefox 121 Standard.
   Browser ohne Support kriegen das alte Verhalten — kein Bruch. */
.ghos-admin__inhalt label:has(> input):not(:has(> input[type="checkbox"])):not(:has(> input[type="radio"])),
.ghos-admin__inhalt label:has(> select),
.ghos-admin__inhalt label:has(> textarea) {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ghos-text-zart);
  line-height: 1.35;
}

/* Checkbox/Radio-Labels bleiben inline (Label rechts vom Kontroll-Element) */
.ghos-admin__inhalt label:has(> input[type="checkbox"]),
.ghos-admin__inhalt label:has(> input[type="radio"]) {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  font-weight: normal;
  font-size: 1rem;
  color: var(--ghos-text);
  cursor: pointer;
}
.ghos-admin__inhalt label:has(> input[type="checkbox"]) > input,
.ghos-admin__inhalt label:has(> input[type="radio"]) > input {
  width: auto;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
}

/* Hilfetext direkt unter dem Feld (klein, leise) */
.ghos-admin__inhalt label .ghos-hilfe,
.ghos-admin__inhalt label small {
  font-weight: normal;
  font-size: .8rem;
  color: var(--ghos-text-zart);
  margin-top: -.1rem;
}

/* ── (3) Form-Grid 12-Spalten-System ─────────────────────────────── */
/* Saubere Alternative zu `style="display:grid;grid-template-columns:
   repeat(auto-fit,minmax(NNNpx,1fr));"`. Jede Sektion eines Formulars
   nutzt das gleiche Grid, einzelne Felder spannen über semantische
   Span-Klassen die jeweils nötige Spaltenzahl. */
.ghos-form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem .9rem;
  align-items: start;
}

/* Default: ein Element belegt die volle Breite */
.ghos-form-grid > * { grid-column: span 12; }

/* Explizite Spans */
.ghos-form-grid > .span-2  { grid-column: span 2;  }
.ghos-form-grid > .span-3  { grid-column: span 3;  }
.ghos-form-grid > .span-4  { grid-column: span 4;  }
.ghos-form-grid > .span-5  { grid-column: span 5;  }
.ghos-form-grid > .span-6  { grid-column: span 6;  }
.ghos-form-grid > .span-7  { grid-column: span 7;  }
.ghos-form-grid > .span-8  { grid-column: span 8;  }
.ghos-form-grid > .span-9  { grid-column: span 9;  }
.ghos-form-grid > .span-10 { grid-column: span 10; }
.ghos-form-grid > .span-12 { grid-column: span 12; }

/* Reihen-Umbruch erzwingen (unsichtbarer Spacer der die volle Reihe füllt) */
.ghos-form-grid > .span-break {
  grid-column: 1 / -1;
  height: 0;
  padding: 0;
  margin: 0;
}

/* Auf schmalen Bildschirmen kollabiert das Grid auf 2-spaltig,
   auf richtig schmalen Phones auf 1-spaltig */
@media (max-width: 900px) {
  .ghos-form-grid > .span-2,
  .ghos-form-grid > .span-3,
  .ghos-form-grid > .span-4,
  .ghos-form-grid > .span-5,
  .ghos-form-grid > .span-6 {
    grid-column: span 6;
  }
  .ghos-form-grid > .span-7,
  .ghos-form-grid > .span-8,
  .ghos-form-grid > .span-9,
  .ghos-form-grid > .span-10 {
    grid-column: span 12;
  }
}
@media (max-width: 560px) {
  .ghos-form-grid > * {
    grid-column: span 12;
  }
}

/* ── (4) Form-Section: konsistente Block-Architektur ──────────────── */
.ghos-admin__inhalt .ghos-block > h3:first-child,
.ghos-admin__inhalt .ghos-block > h4:first-child {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ghos-text);
  letter-spacing: .005em;
}

/* Form-Section-Stack: konsistenter Abstand zwischen Blöcken
   in einem Formular */
.ghos-admin__inhalt form > .ghos-block + .ghos-block,
.ghos-admin__inhalt form > section + section,
.ghos-admin__inhalt form > section.ghos-block + section.ghos-block {
  margin-top: 1.1rem;
}

/* Action-Bar am Form-Ende: dezent abgesetzt vom Inhalt */
.ghos-admin__inhalt form .ghos-form-aktionen {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ghos-trennlinie);
}

/* Pflicht-Marker im Label (siehe <span class="pflicht">*</span>) */
.ghos-admin__inhalt label .pflicht {
  color: #b91c1c;
  font-weight: 600;
  margin-left: .15em;
}