/**
 * GruppenhausOS Portal — CMS-Block-Stylesheet (v0.4.0)
 *
 * Stylt die .ghos-*-Klassen, die der Lizenzserver-BlockRenderer erzeugt
 * (alle 18 statischen Block-Typen plus Akkordeon, Stats, Embed, Trenner).
 * Generic-Selektoren (body, html, *, p, a, code, h1-h6) sind entfernt
 * damit Portal-Basis-Layout intakt bleibt.
 *
 * Lade-Reihenfolge im Header:
 *   1. cms-blocks.css (diese Datei) — Standalone-CMS-Klassen
 *   2. portal.css                   — Portal-Branding-Override
 *
 * Portal-Branding-Variablen werden am Ende des :root-Blocks
 * überschrieben, damit Petrol/Gold/Inter/Playfair statt
 * Standalone-Anthrazit greift.
 */

:root {
  /* v0.6.1 — alle ghos-* Variablen auf Software-First-Tokens gemappt */
  --ghos-bg:                  #F7F4ED;
  --ghos-bg-karte:            #FFFFFF;
  --ghos-bg-zart:             #FAF8F1;
  --ghos-bg-tief:             #EFE9DA;
  --ghos-trennlinie:          #E3DED2;
  --ghos-trennlinie-kraeftig: #C7BFAA;
  --ghos-text:                #17202A;
  --ghos-text-zart:           #64717F;
  --ghos-text-leise:          #97A0AC;
  --ghos-akzent:              #183447;
  --ghos-akzent-hell:         #234760;
  --ghos-akzent-text:         #FFFFFF;
  --ghos-akzent-sehr-hell:    #E5ECF2;
  --ghos-gruen:               #2F7D4F;
  --ghos-gold:                #D6A43A;
  --ghos-gold-hell:           #E2B654;
  --ghos-erfolg-bg:           #E5F2EA;
  --ghos-erfolg-text:         #2F7D4F;
  --ghos-erfolg-rand:         #B9D4AD;
  --ghos-fehler-bg:           #FBEAEA;
  --ghos-fehler-text:         #B43A3A;
  --ghos-fehler-rand:         #F1B4B4;
  --ghos-warn-bg:             #FBF1DC;
  --ghos-warn-text:           #B57E1D;
  --ghos-warn-rand:           #ECD49A;
  --ghos-info-bg:             #E5ECF2;
  --ghos-info-text:           #183447;
  --ghos-info-rand:           #C1D0E6;
  --ghos-neutral-bg:          #EFE9DA;
  --ghos-neutral-text:        #64717F;
  --ghos-neutral-rand:        #D8D4C8;
  --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;
  --ghos-schatten-mini:  0 1px 2px rgba(16, 38, 53, .04);
  --ghos-schatten-1:     0 1px 3px rgba(16, 38, 53, .06), 0 1px 2px rgba(16, 38, 53, .03);
  --ghos-schatten-2:     0 4px 12px rgba(16, 38, 53, .08), 0 2px 4px rgba(16, 38, 53, .04);
  --ghos-schatten-fokus: 0 0 0 3px rgba(24, 52, 71, .15);
  --ghos-schatten-hover: 0 6px 20px rgba(16, 38, 53, .10);
  --ghos-uebergang-schnell: 120ms cubic-bezier(.4, 0, .2, 1);
  --ghos-uebergang:         180ms cubic-bezier(.4, 0, .2, 1);
  --ghos-font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ghos-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ghos-font-mono:    ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
}

/* ── Portal-Override: Standalone-CSS-Variablen mit Portal-Branding belegen ── */



.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;
}
.ghos-admin {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--ghos-sidebar-breite) 1fr;
}
.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;
  max-width: 1200px;
}
.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 {
    grid-template-columns: 1fr;
  }
  .ghos-admin__sidebar {
    padding: 1rem;
  }
  .ghos-admin__nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ghos-admin__inhalt {
    padding: 1rem;
  }
}
.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;
}
.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);
}
.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;
}
.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; }
.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);
}
.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;
}
.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;
}
.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;
}
.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);
}
.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);
}
.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;
}
.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;  
}
.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;
}
.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;
}
.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); }
}
.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; }
.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;
}
.ghos-badge--leise {
  background: #eee;
  color: #555;
  border-color: #ddd;
}
.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;
}
.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;
}
.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; }
.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; }
.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;
}
.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;
}
.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;
  
  position: relative;
}
.ghos-belegung-grid {
  display: grid;
  grid-template-columns: 200px repeat(var(--ghos-tage, 31), minmax(38px, 1fr));
  grid-auto-rows: 32px;
  position: relative;
  
  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;
  
  position: sticky;
  left: 0;
  z-index: 2;
}
.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 {
    
    grid-template-columns: 140px repeat(var(--ghos-tage, 31), minmax(28px, 1fr));
    min-width: max(100%, calc(140px + var(--ghos-tage, 31) * 28px));
  }
  .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; }
}
.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;
}
.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;
}
.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;
}
.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; }
.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);
}
.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;
}
.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;
}
.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; }
.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;
}
.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);
}
.ghos-btn--icon {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.ghos-btn--icon svg { width: 16px; height: 16px; }
.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;
}
.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); }
.ghos-list-view[data-aktiv="tabelle"] .ghos-list-view__karten,
.ghos-list-view[data-aktiv="karten"]  .ghos-list-view__tabelle {
  display: none;
}
.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;
}
.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;
  }
}
@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; }
}
.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; }
.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);
}
.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;
}
.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;
}
.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; }
.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; }
.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; }
@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; }
}
.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; } }
.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; }
.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; }
.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; }
.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;
}
.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; }
.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; }
.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;
}
.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; }
.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); }
.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; }
.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); }
.ghos-btn--gefahr { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.ghos-btn--gefahr:hover { background: #fecaca; }
.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;
  }
}
.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);
}
.ghos-haus-hero {
  display: grid;
  
  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;
}
.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);
}
.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;
  
  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); }
.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;
}
.ghos-medien-feld form { display: contents; }
.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; }
.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;
}
.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; }
.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;
}
.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);
}
.ghos-loesch-inline {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.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;
}
.ghos-btn--gefahr-zart.ghos-btn--icon-only {
  padding: .4rem;
}
.ghos-aktion-cluster {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: nowrap;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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; }
.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;
}
.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 {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0;
}
.se-feld__label {
  font-size: .9rem;
  font-weight: 500;
  color: var(--ghos-text);
}
.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%; }
}

.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;
}
.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; }
.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%);
  }
}
.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;
}
.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; }
.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;
}
.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; }
.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;
}
@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); }
}
.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; }
}
.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;
}
.ghos-admin__nav-gruppe .ghos-admin__nav-item--aktiv {
  background: rgba(255, 255, 255, .14);
}
.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;
}
.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);
}
.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; }
}
.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;
}
.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;
}
.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;
}
.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);
}
.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; }
.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; }
.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; }
@media (max-width: 1100px) {
  .ghos-blog-editor__layout { grid-template-columns: 1fr; }
  .ghos-blog-editor__sidebar { position: static; }
}
.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;
}
.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); }
.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;
}
.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;
}
.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; }
.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; }
.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); }
@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; }
}

/* ════════════════════════════════════════════════════════════════════════
 * BLOCK-KOMPONENTEN — angehängt an cms-blocks.css per Build-Schritt
 *
 * Vollständige Komponenten-Styles für alle 18 Block-Renderer-Klassen,
 * die im Lizenzserver/src/Services/Cms/Blocks/*.php erzeugt werden.
 * Vor v0.9.8 hieß die Konvention .cms-* — Renderer und Portal-CSS waren
 * auseinander. Ab v0.9.8 ist .ghos-* die einzige Konvention.
 *
 * Nutzt CSS-Custom-Properties aus dem Portal-:root (portal.css setzt
 * --c-petrol, --c-gold, etc.). Im Lizenzserver-Backoffice fehlen diese
 * Variablen — daher überall Fallback-Werte als zweites Argument.
 *
 * Lade-Reihenfolge:
 *   1. cms-blocks.css (diese Datei mit angehängten Komponenten)
 *   2. portal.css     (Portal-Branding-Override, optional)
 * ════════════════════════════════════════════════════════════════════════ */


/* ── Generisches Block-Padding für Section-Blöcke ─────────────────────── */
.ghos-cta, .ghos-hero, .ghos-pricing, .ghos-stats, .ghos-faq,
.ghos-features, .ghos-kacheln, .ghos-galerie, .ghos-testimonial,
.ghos-embed, .ghos-text, .ghos-bild, .ghos-trenner, .ghos-logos {
  margin: 0;
  padding: clamp(2.5rem, 6vw, 5rem) 1rem;
}
.ghos-cta__inner, .ghos-hero__inner, .ghos-pricing__inner,
.ghos-stats__inner, .ghos-faq__inner, .ghos-features__inner,
.ghos-kacheln__inner, .ghos-galerie__inner,
.ghos-testimonial__inner, .ghos-embed__inner, .ghos-text__inner,
.ghos-logos__inner {
  max-width: var(--container, 1180px);
  margin: 0 auto;
}


/* ── Hero ─────────────────────────────────────────────────────────────── */
.ghos-hero { position: relative; overflow: hidden; padding: 0; }
.ghos-hero__inner {
  position: relative; z-index: 2;
  padding: clamp(3rem, 8vw, 6rem) 1rem;
  max-width: var(--container, 1180px); margin: 0 auto;
}
.ghos-hero__bild {
  position: absolute; inset: 0; z-index: 1;
  background-size: cover; background-position: center;
}
.ghos-hero--overlay::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,41,59,0.45), rgba(20,41,59,0.85));
}
.ghos-hero__titel {
  font-family: var(--ghos-font);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1; margin: 0 0 1rem;
  color: #ffffff;
}
.ghos-hero__lede {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.55; margin: 0 0 1.5rem;
  color: #ffffff; max-width: 36em;
}
.ghos-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
/* Wenn kein Hintergrundbild gesetzt: hellen Petrol-Default zeigen */
.ghos-hero:not(.ghos-hero--overlay):not(.ghos-hero--software):not([class*="--cremig"]) {
  background: linear-gradient(135deg, var(--ghos-akzent), var(--ghos-akzent-hell));
}


/* ── CTA-Block ────────────────────────────────────────────────────────── */
.ghos-cta__inner { text-align: center; }
.ghos-cta__titel {
  font-family: var(--ghos-font);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin: 0 0 .75rem; line-height: 1.2;
  color: var(--ghos-akzent);
}
.ghos-cta__text {
  font-size: 1.1rem; line-height: 1.5;
  margin: 0 auto 1.5rem;
  color: var(--ghos-text-zart); max-width: 36em;
}
.ghos-cta--petrol { background: var(--ghos-akzent); }
.ghos-cta--petrol .ghos-cta__titel,
.ghos-cta--petrol .ghos-cta__text { color: #ffffff; }
.ghos-cta--gold { background: var(--ghos-gold); }
.ghos-cta--gold .ghos-cta__titel,
.ghos-cta--gold .ghos-cta__text { color: var(--ghos-akzent-hell); }


/* ── Buttons ──────────────────────────────────────────────────────────── */
.ghos-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .75rem 1.5rem;
  font: 600 1rem/1.2 var(--ghos-font);
  border-radius: var(--radius, 8px);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: all .15s;
}
.ghos-btn--primaer {
  background: var(--ghos-gold);
  color: var(--ghos-akzent-hell);
  border-color: var(--ghos-gold);
}
.ghos-btn--primaer:hover {
  background: var(--ghos-gold-hell);
  border-color: var(--ghos-gold-hell);
}
.ghos-btn--haupt {
  background: var(--ghos-akzent);
  color: #ffffff;
  border-color: var(--ghos-akzent);
}
.ghos-btn--haupt:hover {
  background: var(--ghos-akzent-hell);
  border-color: var(--ghos-akzent-hell);
}
.ghos-btn--text {
  background: transparent;
  color: var(--ghos-akzent);
  border-color: transparent;
  padding-inline: .25rem;
}
.ghos-btn--text:hover { color: var(--ghos-gold); }
.ghos-btn--block { display: flex; width: 100%; }


/* ── Pricing / Tier ───────────────────────────────────────────────────── */
.ghos-pricing__head { text-align: center; margin-bottom: 2.5rem; }
.ghos-pricing__titel {
  font-family: var(--ghos-font);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 .5rem; line-height: 1.15;
  color: var(--ghos-akzent);
}
.ghos-pricing__sub {
  font-size: 1.05rem; line-height: 1.5;
  color: var(--ghos-text-zart);
  margin: 0 auto; max-width: 36em;
}
.ghos-pricing__toggle, .ghos-pricing-toggle {
  display: inline-flex; gap: 0;
  margin: 1.5rem auto 0;
  background: var(--ghos-bg-tief);
  border-radius: 999px; padding: .25rem;
}
.ghos-pricing__toggle button, .ghos-pricing-toggle button {
  background: transparent; border: 0;
  padding: .5rem 1.25rem; border-radius: 999px;
  font: 500 .95rem var(--ghos-font);
  color: var(--ghos-text-zart);
  cursor: pointer; transition: all .15s;
}
.ghos-pricing__toggle button[aria-pressed="true"],
.ghos-pricing__toggle button.is-aktiv,
.ghos-pricing-toggle button[aria-pressed="true"],
.ghos-pricing-toggle button.is-aktiv {
  background: var(--ghos-akzent);
  color: #ffffff;
}
.ghos-pricing__grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}
.ghos-pricing--tiers-3 .ghos-pricing__grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.ghos-pricing--tiers-4 .ghos-pricing__grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ghos-pricing__hinweis {
  margin: 2rem auto 0; max-width: 46em; text-align: center;
  font-size: .92rem; color: var(--ghos-text-zart);
  line-height: 1.5;
}

.ghos-tier {
  position: relative; display: flex; flex-direction: column;
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--radius-lg, 14px);
  padding: 2rem 1.5rem;
  transition: border-color .2s;
}
.ghos-tier:hover { border-color: var(--ghos-trennlinie); }
.ghos-tier--hervorgehoben {
  border-color: var(--ghos-gold);
  border-width: 2px;
  box-shadow: 0 6px 24px -8px rgba(212,160,42,0.35);
}
.ghos-tier__badge {
  position: absolute; top: -.75rem; left: 50%;
  transform: translateX(-50%);
  background: var(--ghos-gold);
  color: var(--ghos-akzent-hell);
  padding: .25rem .9rem; border-radius: 999px;
  font: 600 .8rem var(--ghos-font);
  letter-spacing: .03em; text-transform: uppercase;
  white-space: nowrap;
}
.ghos-tier__badge--neutral {
  background: var(--ghos-akzent);
  color: #ffffff;
}
.ghos-tier__name {
  font-family: var(--ghos-font);
  font-size: 1.6rem; margin: 0 0 .25rem;
  color: var(--ghos-akzent);
}
.ghos-tier__untertitel {
  font-size: .95rem; color: var(--ghos-text-zart);
  margin: 0 0 1rem;
}
.ghos-tier__preise { margin: 0 0 .25rem; }
.ghos-tier__preis {
  display: flex; align-items: baseline; gap: .25rem;
  font-family: var(--ghos-font);
}
.ghos-tier__preis-betrag {
  font-size: 2.4rem; font-weight: 700;
  color: var(--ghos-akzent);
}
.ghos-tier__preis-zeit {
  font-size: 1rem; color: var(--ghos-text-zart);
  font-family: var(--ghos-font);
}
.ghos-tier__streich {
  font-size: .9rem; color: var(--ghos-text-zart);
  text-decoration: line-through;
  margin: 0 0 .5rem;
}
.ghos-tier__setup {
  font-size: .9rem; color: var(--ghos-text-zart);
  margin: 0 0 1rem;
}
.ghos-tier__setup-label { font-weight: 600; color: var(--ghos-text); }
.ghos-tier__beschreibung {
  font-size: .95rem; line-height: 1.55;
  color: var(--ghos-text);
  margin: 0 0 1rem;
}
.ghos-tier__inkl {
  margin: 0 0 1rem;
  padding: .65rem .85rem;
  background: var(--ghos-bg-tief);
  border-radius: var(--radius, 8px);
  font-size: .9rem;
}
.ghos-tier__inkl-label { font-weight: 600; }
.ghos-tier__features {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  font-size: .95rem; line-height: 1.55;
}
.ghos-tier__features li {
  padding: .35rem 0 .35rem 1.5rem;
  position: relative;
}
.ghos-tier__features li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--ghos-gold);
  font-weight: 700;
}
/* "geplant" als Suffix "(geplant)" wird vom Renderer als
   .ghos-tier__feature--geplant markiert */
.ghos-tier__features li.ghos-tier__feature--geplant {
  color: var(--ghos-text-zart);
}
.ghos-tier__features li.ghos-tier__feature--geplant::before {
  content: "⏳"; color: var(--ghos-text-zart);
  font-size: .85em;
}
.ghos-tier__features li.ghos-tier__feature--geplant .ghos-tier__feature-badge {
  display: inline-block;
  margin-left: .5rem; padding: 0 .5rem;
  background: var(--ghos-warn-bg);
  color: var(--ghos-warn-text);
  border-radius: 999px;
  font: 600 .7rem var(--ghos-font);
  letter-spacing: .03em; text-transform: uppercase;
  vertical-align: 1px;
}
.ghos-tier .ghos-btn { margin-top: auto; }
.ghos-tier--live { /* Marker für PaketeLiveBlock-Live-Daten */ }


/* ── Stats ────────────────────────────────────────────────────────────── */
.ghos-stats__inner { text-align: center; }
.ghos-stats__titel {
  font-family: var(--ghos-font);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 2rem; color: var(--ghos-akzent);
}
.ghos-stats__grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.ghos-stats--anzahl-2 .ghos-stats__grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 720px; margin: 0 auto;
}
.ghos-stats--anzahl-3 .ghos-stats__grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 900px; margin: 0 auto;
}
.ghos-stats--anzahl-4 .ghos-stats__grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* .ghos-stat ist im cms-blocks.css aus dem Standalone-Erbe schon
   vorhanden (mit anderer Optik für Backoffice-Dashboards). Wir
   überschreiben gezielt nur im Block-Kontext, damit Backoffice-
   Stats weiterhin so aussehen wie sie sollen. */
.ghos-stats .ghos-stat {
  display: flex; flex-direction: column; align-items: center;
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--radius-lg, 14px);
  padding: 1.5rem 1rem; gap: .25rem;
  text-align: center;
}
.ghos-stats .ghos-stat__wert {
  font-family: var(--ghos-font);
  font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700;
  color: var(--ghos-akzent); line-height: 1;
}
.ghos-stats .ghos-stat__label {
  font-size: .95rem; font-weight: 600;
  color: var(--ghos-text); margin-top: .35rem;
}
.ghos-stats .ghos-stat__hinweis {
  font-size: .85rem; color: var(--ghos-text-zart);
}


/* ── FAQ ──────────────────────────────────────────────────────────────── */
.ghos-faq__head { text-align: center; margin-bottom: 2rem; }
.ghos-faq__inner { max-width: 780px; }
.ghos-faq__liste {
  display: flex; flex-direction: column; gap: .5rem;
}
.ghos-faq__item {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--radius, 8px);
  padding: 0;
  overflow: hidden;
}
.ghos-faq__item summary {
  display: block; cursor: pointer;
  padding: 1rem 3rem 1rem 1.25rem;
  font-weight: 600;
  color: var(--ghos-akzent);
  list-style: none; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.ghos-faq__item summary::-webkit-details-marker { display: none; }
.ghos-faq__item summary::after {
  content: "+"; position: absolute;
  right: 1.25rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem; line-height: 1;
  color: var(--ghos-text-zart);
  transition: transform .15s;
}
.ghos-faq__item[open] summary::after { content: "−"; }
.ghos-faq__antwort {
  padding: 0 1.25rem 1rem;
  line-height: 1.55;
  color: var(--ghos-text);
}


/* ── Features (3-spalt mit Icon) ──────────────────────────────────────── */
.ghos-features__head { text-align: center; margin-bottom: 2.5rem; }
.ghos-features__titel {
  font-family: var(--ghos-font);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 .5rem; color: var(--ghos-akzent);
}
.ghos-features__sub {
  font-size: 1.05rem; color: var(--ghos-text-zart);
  max-width: 36em; margin: 0 auto;
}
.ghos-features__grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ghos-features--spalten-2 .ghos-features__grid { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.ghos-features--spalten-4 .ghos-features__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ghos-feature { padding: 1rem; }
.ghos-feature__icon {
  font-size: 2rem; margin-bottom: .75rem;
  line-height: 1;
}
.ghos-feature__titel {
  font-family: var(--ghos-font);
  font-size: 1.25rem; margin: 0 0 .5rem;
  color: var(--ghos-akzent);
}
.ghos-feature__text {
  font-size: 1rem; line-height: 1.55;
  color: var(--ghos-text);
}


/* ── Kacheln ──────────────────────────────────────────────────────────── */
.ghos-kacheln__titel {
  font-family: var(--ghos-font);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 1.5rem; text-align: center;
  color: var(--ghos-akzent);
}
.ghos-kacheln__grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ghos-kacheln--spalten-2 .ghos-kacheln__grid { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.ghos-kacheln--spalten-4 .ghos-kacheln__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ghos-kachel {
  display: flex; flex-direction: column;
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--radius-lg, 14px); overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.ghos-kachel:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(20,41,59,0.2);
}
.ghos-kachel__bild {
  aspect-ratio: 16/10; object-fit: cover; width: 100%;
  display: block; background: var(--ghos-bg-tief);
}
.ghos-kachel__inhalt {
  padding: 1.25rem; flex: 1;
  display: flex; flex-direction: column;
}
.ghos-kachel__inhalt h3, .ghos-kachel__inhalt h4 {
  font-family: var(--ghos-font);
  margin: 0 0 .5rem;
  color: var(--ghos-akzent);
}
.ghos-kachel__inhalt p {
  margin: 0 0 1rem;
  color: var(--ghos-text);
  line-height: 1.55;
}
.ghos-kachel__cta { margin-top: auto; padding-top: .5rem; }


/* ── Galerie ──────────────────────────────────────────────────────────── */
.ghos-galerie__titel {
  font-family: var(--ghos-font);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 1.5rem; text-align: center;
  color: var(--ghos-akzent);
}
.ghos-galerie__grid {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.ghos-galerie--spalten-2 .ghos-galerie__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ghos-galerie--spalten-3 .ghos-galerie__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ghos-galerie--spalten-4 .ghos-galerie__grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ghos-galerie--spalten-6 .ghos-galerie__grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.ghos-galerie__item {
  display: block;
  border-radius: var(--radius, 8px);
  overflow: hidden;
  background: var(--ghos-bg-tief);
}
.ghos-galerie__item img {
  width: 100%; height: 100%; aspect-ratio: 4/3;
  object-fit: cover; display: block;
  transition: transform .3s;
}
.ghos-galerie__item:hover img { transform: scale(1.04); }


/* ── Bild (einzelnes Bild) ────────────────────────────────────────────── */
.ghos-bild { padding: clamp(1.5rem, 4vw, 3rem) 1rem; }
.ghos-bild__rahmen {
  max-width: var(--container, 1180px); margin: 0 auto;
  border-radius: var(--radius-lg, 14px); overflow: hidden;
}
.ghos-bild--breit .ghos-bild__rahmen { max-width: 100%; border-radius: 0; }
.ghos-bild--schmal .ghos-bild__rahmen { max-width: 720px; }
.ghos-bild__rahmen img {
  width: 100%; height: auto; display: block;
}
.ghos-bild__link { display: block; }
.ghos-bild__caption {
  margin-top: .5rem; text-align: center;
  font-size: .9rem; color: var(--ghos-text-zart);
  font-style: italic;
}


/* ── Embed (Video / iFrame) ───────────────────────────────────────────── */
.ghos-embed__titel {
  font-family: var(--ghos-font);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  margin: 0 0 1rem; text-align: center;
  color: var(--ghos-akzent);
}
.ghos-embed__rahmen {
  position: relative; width: 100%;
  aspect-ratio: 16/9;
  background: var(--ghos-bg-tief);
  border-radius: var(--radius-lg, 14px); overflow: hidden;
}
.ghos-embed__rahmen iframe,
.ghos-embed__rahmen video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.ghos-embed__caption {
  margin-top: .75rem; text-align: center;
  font-size: .9rem; color: var(--ghos-text-zart);
  font-style: italic;
}


/* ── Trenner ──────────────────────────────────────────────────────────── */
.ghos-trenner {
  padding: 1.5rem 1rem;
  display: flex; justify-content: center;
}
.ghos-trenner::after {
  content: ""; display: block;
  width: 100%; max-width: 720px; height: 1px;
  background: var(--ghos-trennlinie);
}
.ghos-trenner--zart::after { opacity: .5; }
.ghos-trenner--gold::after { background: var(--ghos-gold); height: 2px; max-width: 60px; }
.ghos-trenner--leer::after { background: transparent; }
.ghos-trenner--breit::after { max-width: 100%; }
.ghos-trenner--xl { padding: 3rem 1rem; }


/* ── Text-Block ───────────────────────────────────────────────────────── */
.ghos-text { padding: clamp(1.5rem, 4vw, 3rem) 1rem; }
.ghos-text__inner { max-width: 720px; }
.ghos-text--breit .ghos-text__inner { max-width: var(--container, 1180px); }
.ghos-text__inhalt {
  font-size: 1.05rem; line-height: 1.65;
  color: var(--ghos-text);
}
.ghos-text__inhalt h2 {
  font-family: var(--ghos-font);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 2rem 0 .75rem; line-height: 1.2;
  color: var(--ghos-akzent);
}
.ghos-text__inhalt h3 {
  font-family: var(--ghos-font);
  font-size: 1.35rem; margin: 1.5rem 0 .5rem;
  color: var(--ghos-akzent);
}
.ghos-text__inhalt p { margin: 0 0 1rem; }
.ghos-text__inhalt ul, .ghos-text__inhalt ol { margin: 0 0 1rem 1.5rem; padding: 0; }
.ghos-text__inhalt li { margin-bottom: .35rem; }
.ghos-text__inhalt a {
  color: var(--ghos-akzent); text-decoration: underline;
  text-decoration-color: var(--ghos-gold);
  text-underline-offset: 3px;
}
.ghos-text__inhalt a:hover { color: var(--ghos-gold); }
.ghos-text__inhalt blockquote {
  margin: 1.5rem 0; padding: 1rem 1.25rem;
  border-left: 3px solid var(--ghos-gold);
  background: var(--ghos-bg-tief);
  font-style: italic;
}


/* ── Testimonial ──────────────────────────────────────────────────────── */
.ghos-testimonial__titel {
  font-family: var(--ghos-font);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 2rem; text-align: center;
  color: var(--ghos-akzent);
}
.ghos-testimonial__items {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.ghos-testimonial--einzeln .ghos-testimonial__items {
  grid-template-columns: 1fr; max-width: 720px; margin: 0 auto;
}
.ghos-testimonial__item {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--radius-lg, 14px);
  padding: 1.5rem;
  display: flex; flex-direction: column;
  gap: 1rem;
}
.ghos-testimonial__zitat {
  font-family: var(--ghos-font);
  font-size: 1.1rem; line-height: 1.5;
  color: var(--ghos-text);
  position: relative; padding-left: 1.25rem;
}
.ghos-testimonial__zitat::before {
  content: "„"; position: absolute;
  left: -.25rem; top: -.5rem;
  font-size: 2.5rem; line-height: 1;
  color: var(--ghos-gold);
}
.ghos-testimonial__autor {
  display: flex; align-items: center; gap: .75rem;
  margin-top: auto;
}
.ghos-testimonial__avatar {
  width: 44px; height: 44px;
  border-radius: 50%; object-fit: cover;
  background: var(--ghos-bg-tief);
}
.ghos-testimonial__rolle {
  font-size: .9rem; color: var(--ghos-text-zart);
}


/* ── Logo Wall ────────────────────────────────────────────────────────── */
.ghos-logos__titel {
  font-family: var(--ghos-font);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  margin: 0 0 1.5rem; text-align: center;
  color: var(--ghos-akzent);
}
.ghos-logos__grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 2rem;
}
.ghos-logo {
  flex: 0 0 auto;
  max-width: 140px; max-height: 60px;
  display: block; opacity: .8;
  transition: opacity .15s;
}
.ghos-logo:hover { opacity: 1; }
.ghos-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.ghos-logos--graustufen .ghos-logo {
  filter: grayscale(1); opacity: .7;
}
.ghos-logos--graustufen .ghos-logo:hover {
  filter: grayscale(0); opacity: 1;
}


/* ── Portal-Stub & Block-Fehler/Warnung ───────────────────────────────── */
.ghos-portal-block {
  padding: 1.5rem;
  background: var(--ghos-bg-tief);
  border-radius: var(--radius, 8px);
  border: 1px dashed var(--ghos-trennlinie);
  text-align: center;
  color: var(--ghos-text-zart);
}
.ghos-block-fehler {
  padding: 1rem 1.25rem;
  background: var(--ghos-fehler-bg);
  color: var(--ghos-fehler-text);
  border-left: 3px solid var(--ghos-fehler-text);
  border-radius: var(--radius, 8px);
  font: 500 .92rem var(--ghos-font);
}
.ghos-block-warnung {
  padding: 1rem 1.25rem;
  background: var(--ghos-warn-bg);
  color: var(--ghos-warn-text);
  border-left: 3px solid var(--ghos-warn-text);
  border-radius: var(--radius, 8px);
  font: 500 .92rem var(--ghos-font);
}


/* ── Block-Preview (nur Backoffice — neutrales Theme) ─────────────────── */
.ghos-block-preview {
  background: var(--ghos-bg-tief);
  border: 1px dashed var(--ghos-trennlinie);
  border-radius: var(--radius, 8px);
  padding: 1rem;
  font-size: .9rem; line-height: 1.5;
  color: var(--ghos-text-zart);
}
.ghos-block-preview__zeile {
  display: flex; align-items: center;
  gap: .5rem; margin-bottom: .35rem;
}
.ghos-block-preview__zeile:last-child { margin-bottom: 0; }
.ghos-block-preview__chip {
  display: inline-block;
  padding: .15rem .55rem;
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: 999px;
  font: 500 .8rem var(--ghos-font);
  color: var(--ghos-text);
}
.ghos-block-preview__hinweis {
  margin-top: .5rem;
  font-size: .85rem; font-style: italic;
  color: var(--ghos-text-zart);
}
.ghos-block-preview__empty {
  font-style: italic;
  color: var(--ghos-text-zart);
}


/* ── Mobile Anpassungen ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .ghos-tier { padding: 1.5rem 1.25rem; }
  .ghos-tier__name { font-size: 1.4rem; }
  .ghos-tier__preis-betrag { font-size: 2rem; }
  .ghos-pricing__grid { grid-template-columns: 1fr; }
  .ghos-pricing--tiers-3 .ghos-pricing__grid,
  .ghos-pricing--tiers-4 .ghos-pricing__grid { grid-template-columns: 1fr; }
  .ghos-stats__grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .ghos-features__grid { grid-template-columns: 1fr; }
  .ghos-features--spalten-2 .ghos-features__grid,
  .ghos-features--spalten-4 .ghos-features__grid { grid-template-columns: 1fr; }
  .ghos-kacheln__grid { grid-template-columns: 1fr; }
  .ghos-kacheln--spalten-2 .ghos-kacheln__grid,
  .ghos-kacheln--spalten-4 .ghos-kacheln__grid { grid-template-columns: 1fr; }
  .ghos-testimonial__items { grid-template-columns: 1fr; }
  .ghos-logos__grid { gap: 1.25rem; }
  .ghos-logo { max-width: 110px; max-height: 50px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * BOOKING-STYLE SUCH-LAYOUT + KARTEN  (v0.7.0)
 *
 * Komplett-Refaktor der Suche/Filter-Block-Darstellung und der haus_karte
 * im Booking-Stil. Überschreibt frühere Definitionen aus portal.css —
 * diese Regeln kommen am Ende der Cascade.
 *
 * Layout-Übersicht:
 *   1. .ghos-suchbar           Pill-förmige Such-Bar (Wohin / Personen / Suchen)
 *   2. .ghos-quick-filter      Horizontale Filter-Chip-Reihe oben
 *   3. .ghos-result-bar        Treffer-Zähler + Sortier-Dropdown
 *   4. .suche-ergebnisse       Bestehender Grid-Container (Sidebar + Liste)
 *   5. .haus-karte             Karte im Booking-Stil, ersetzt die alte Variante
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Such-Bar oben ─────────────────────────────────────────────────── */
.ghos-suchbar {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: 999px;
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 0;
  padding: 4px;
  margin: 0 0 1rem;
  align-items: stretch;
}
.ghos-suchbar__feld {
  padding: .55rem 1.1rem;
  border-right: 1px solid var(--ghos-trennlinie);
  cursor: pointer;
  position: relative;
}
.ghos-suchbar__feld:last-of-type { border-right: 0; }
.ghos-suchbar__label {
  display: block;
  font-size: .7rem;
  color: var(--ghos-text-zart);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}
.ghos-suchbar__wert {
  display: block;
  font-size: .95rem;
  color: var(--ghos-text);
  margin-top: 2px;
  font-weight: 500;
}
.ghos-suchbar__wert.is-leer { color: var(--ghos-text-leise); font-weight: 400; }
.ghos-suchbar__feld input,
.ghos-suchbar__feld select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--ghos-text);
  padding: 1.2rem 1.1rem .25rem;
  appearance: none;
  cursor: pointer;
}
/* v0.11.2: Placeholder ausblenden — der ghos-suchbar__wert-Span darüber
   übernimmt die Anzeige. Im Focus zeigen wir den Placeholder dezent als
   Hinweis-Text, weil das input dann den Wert-Span verdeckt (Cursor sichtbar). */
.ghos-suchbar__feld input::placeholder,
.ghos-suchbar__feld select::placeholder {
  opacity: 0;
}
.ghos-suchbar__feld input:focus::placeholder,
.ghos-suchbar__feld select:focus::placeholder {
  opacity: .45;
  color: var(--ghos-text-leise);
}
/* v0.11.4 — Umgekehrte Richtung: sobald das Input einen Wert hat oder
   fokussiert ist, muss der ghos-suchbar__wert-Span versteckt werden,
   sonst überlagern sich Input-Text und Span-Text. visibility:hidden
   statt display:none, damit die Layout-Höhe des Containers stabil
   bleibt — das absolut positionierte Input nutzt den Platz weiter.
   `:has()` ist ab Chrome 105 / Safari 15.4 / Firefox 121 verfügbar
   (kompletter Mainstream-Support). */
.ghos-suchbar__feld:has(input:not(:placeholder-shown)) .ghos-suchbar__wert,
.ghos-suchbar__feld:has(input:focus) .ghos-suchbar__wert,
.ghos-suchbar__feld:has(select:focus) .ghos-suchbar__wert {
  visibility: hidden;
}
.ghos-suchbar__feld input:focus,
.ghos-suchbar__feld select:focus { outline: 2px solid var(--ghos-akzent); outline-offset: 0; border-radius: 999px; }
.ghos-suchbar__submit {
  background: var(--ghos-akzent);
  color: var(--ghos-akzent-text);
  border: 0;
  border-radius: 999px;
  padding: 0 1.25rem;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease;
}
.ghos-suchbar__submit:hover { background: var(--ghos-akzent-hell); }
.ghos-suchbar__submit svg { flex: 0 0 16px; }

@media (max-width: 720px) {
  .ghos-suchbar {
    grid-template-columns: 1fr;
    border-radius: var(--ghos-radius);
    padding: .5rem;
  }
  .ghos-suchbar__feld {
    border-right: 0;
    border-bottom: 1px solid var(--ghos-trennlinie);
    padding: .55rem .75rem;
    border-radius: 0;
  }
  .ghos-suchbar__feld:last-of-type { border-bottom: 0; }
  .ghos-suchbar__submit {
    border-radius: var(--ghos-radius-klein, 8px);
    width: 100%;
    justify-content: center;
    padding: .8rem;
  }
}

/* ── 2. Quick-Filter-Chips ────────────────────────────────────────────── */
.ghos-quick-filter {
  display: flex;
  gap: .375rem;
  padding: 0;
  margin: 0 0 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.ghos-quick-filter::-webkit-scrollbar { height: 4px; }
.ghos-quick-filter__chip {
  font-size: .82rem;
  padding: .42rem .85rem;
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: 999px;
  white-space: nowrap;
  color: var(--ghos-text);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ghos-quick-filter__chip:hover {
  border-color: var(--ghos-trennlinie-kraeftig);
  color: var(--ghos-text);
}
.ghos-quick-filter__chip.is-aktiv {
  background: var(--ghos-akzent);
  color: var(--ghos-akzent-text);
  border-color: var(--ghos-akzent);
}
.ghos-quick-filter__chip.is-aktiv:hover { background: var(--ghos-akzent-hell); }

/* ── 3. Result-Bar (Zähler + Sortierung) ──────────────────────────────── */
.ghos-result-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 0 0 .75rem;
  flex-wrap: wrap;
}
.ghos-result-bar__count { font-size: .9rem; color: var(--ghos-text-zart); }
.ghos-result-bar__count strong { color: var(--ghos-text); font-weight: 500; }
.ghos-result-bar__sort {
  font-size: .85rem;
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-klein, 8px);
  padding: .35rem .75rem;
  color: var(--ghos-text);
  cursor: pointer;
}

/* ── 4. Karten-Grid: ein wenig kompakter als vorher ──────────────────── */
.haus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* ── 5. KARTE selbst — Booking-Style ─────────────────────────────────── */
.haus-karte.haus-karte--booking {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  position: relative;
}
.haus-karte.haus-karte--booking:hover {
  transform: translateY(-2px);
  border-color: var(--ghos-trennlinie-kraeftig);
  box-shadow: 0 4px 16px rgba(23, 32, 42, 0.06);
}

/* ── 5.1 Hero-Bereich ─────────────────────────────────────────────────── */
.haus-karte.haus-karte--booking .haus-karte__bild {
  position: relative;
  display: block;
  height: 180px;
  overflow: hidden;
  background: var(--ghos-bg-tief);
  text-decoration: none;
}
.haus-karte.haus-karte--booking .haus-karte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.haus-karte.haus-karte--booking:hover .haus-karte__bild img { transform: scale(1.05); }

/* ── 5.2 Placeholder (Hero ohne Bild, je Stufe anderer Farbverlauf) ──── */
.haus-karte__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  gap: .5rem;
}
.haus-karte__placeholder svg { width: 56px; height: 56px; opacity: .55; }
.haus-karte__placeholder-label {
  font-size: .82rem;
  letter-spacing: .02em;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  font-weight: 500;
}
.haus-karte__placeholder--kunde {
  background: linear-gradient(135deg, #234760 0%, #183447 100%);
}
.haus-karte__placeholder--anzeige {
  background: linear-gradient(135deg, #2F7D4F 0%, #1E5736 100%);
}
.haus-karte__placeholder--grundeintrag {
  background: linear-gradient(135deg, #C7BFAA 0%, #968A6E 100%);
}

/* ── 5.3 Stufen-Badge oben rechts ─────────────────────────────────────── */
.haus-karte__stufe {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ghos-text);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .01em;
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.haus-karte__stufe--kunde        { color: #183447; }
.haus-karte__stufe--anzeige      { color: #1E5736; }
.haus-karte__stufe--grundeintrag { color: #6B5F40; }

/* ── 5.4 Beliebt-Pill oben links ──────────────────────────────────────── */
.haus-karte__beliebt-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--ghos-gold);
  color: #2C1F00;
  font-size: .72rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

/* ── 5.5 Anwesen-Zähler unten links ──────────────────────────────────── */
.haus-karte.haus-karte--booking .haus-karte__count {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #FFFFFF;
  font-size: .72rem;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ── 5.6 Inhalt unter dem Hero ────────────────────────────────────────── */
.haus-karte.haus-karte--booking .haus-karte__inhalt {
  padding: .9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .55rem;
}

.haus-karte__kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
}
.haus-karte__kopf-text { min-width: 0; flex: 1; }
.haus-karte.haus-karte--booking .haus-karte__name {
  font-size: 1.02rem;
  margin: 0 0 .15rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  font-weight: 500;
}
.haus-karte.haus-karte--booking .haus-karte__name a {
  color: var(--ghos-text);
  text-decoration: none;
}
.haus-karte.haus-karte--booking .haus-karte__name a:hover { color: var(--ghos-akzent); }
.haus-karte.haus-karte--booking .haus-karte__ort {
  font-size: .82rem;
  color: var(--ghos-text-zart);
  display: flex;
  align-items: center;
  gap: .3rem;
  margin: 0;
}
.haus-karte__verband {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  color: var(--ghos-gruen, #2F7D4F);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
}
/* v0.14.0 — drei Verband-Pill-Farbvarianten auf der Karte.
   Default-Klasse (.haus-karte__verband) behält den VDS-Grünton aus
   Kompatibilitäts-Gründen. Spezifischere Modifier überschreiben. */
.haus-karte__verband--vds                  { color: #2F7D4F; }
.haus-karte__verband--naturfreunde         { color: #BE3A3A; }
.haus-karte__verband--himmlische-herbergen { color: #2D4A77; }
/* Bei „Himmlische Herbergen" wird das Label lang (20 Zeichen); auf
   schmalen Karten ggf. mit Ellipsis abschneiden statt umbrechen. */
.haus-karte__verband--himmlische-herbergen {
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 5.7 Fakten-Liste mit Inline-Icons ───────────────────────────────── */
.haus-karte.haus-karte--booking .haus-karte__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .85rem;
  color: var(--ghos-text);
}
.haus-karte.haus-karte--booking .haus-karte__fakten li {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--ghos-text-zart);
}
.haus-karte.haus-karte--booking .haus-karte__fakten li strong {
  color: var(--ghos-text);
  font-weight: 500;
}
.haus-karte.haus-karte--booking .haus-karte__fakten svg { color: var(--ghos-text-zart); }

/* ── 5.8 Tags ─────────────────────────────────────────────────────────── */
.haus-karte.haus-karte--booking .haus-karte__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.haus-karte.haus-karte--booking .haus-karte__tags li {
  font-size: .7rem;
  padding: 3px 8px;
  background: var(--ghos-bg);
  color: var(--ghos-text-zart);
  border-radius: 4px;
  border: 0;
  text-transform: none;
  letter-spacing: 0;
}
.haus-karte__tag--mehr {
  font-weight: 500;
  color: var(--ghos-akzent) !important;
  background: var(--ghos-akzent-sehr-hell, #E5ECF2) !important;
}

/* ── 5.9 Fuß mit Trust-Microcopy + CTA ───────────────────────────────── */
.haus-karte__fuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: .65rem;
  border-top: 1px solid var(--ghos-trennlinie);
}
.haus-karte__trust {
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.haus-karte__trust.is-positiv { color: var(--ghos-gruen, #2F7D4F); }
.haus-karte__trust.is-hinweis { color: var(--ghos-text-leise); font-weight: 400; }
.haus-karte.haus-karte--booking .haus-karte__cta {
  background: var(--ghos-akzent);
  color: var(--ghos-akzent-text);
  font-size: .82rem;
  font-weight: 500;
  padding: .55rem .9rem;
  border-radius: var(--ghos-radius-klein, 8px);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: background .15s ease, transform .15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.haus-karte.haus-karte--booking .haus-karte__cta:hover {
  background: var(--ghos-akzent-hell);
  transform: translateX(2px);
}

/* Bei Grundeinträgen ist der CTA weniger laut — Outline-Variante */
.haus-karte--grundeintrag .haus-karte__cta {
  background: transparent !important;
  color: var(--ghos-akzent) !important;
  border: 1px solid var(--ghos-akzent);
}
.haus-karte--grundeintrag .haus-karte__cta:hover {
  background: var(--ghos-akzent) !important;
  color: var(--ghos-akzent-text) !important;
}

/* ── 5.10 Reduzierte Bewegung respektieren ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .haus-karte.haus-karte--booking,
  .haus-karte.haus-karte--booking .haus-karte__bild img,
  .haus-karte.haus-karte--booking .haus-karte__cta {
    transition: none;
  }
  .haus-karte.haus-karte--booking:hover { transform: none; }
  .haus-karte.haus-karte--booking:hover .haus-karte__bild img { transform: none; }
  .haus-karte.haus-karte--booking .haus-karte__cta:hover { transform: none; }
}

/* ── 5.11 Mobile-Anpassung ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .haus-grid { grid-template-columns: 1fr; }
  .haus-karte.haus-karte--booking .haus-karte__bild { height: 160px; }
  .haus-karte.haus-karte--booking .haus-karte__inhalt { padding: .85rem .9rem .9rem; }
}

/* Kopf-Block über Sidebar+Liste hinweg (Booking-Style Such-Bar) */
.suche-ergebnisse__layout > .suche-ergebnisse__kopf {
  grid-column: 1 / -1;
  margin-bottom: .5rem;
}
@media (max-width: 720px) {
  .suche-ergebnisse__layout > .suche-ergebnisse__kopf { margin-bottom: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * CLAIM + DSGVO PUBLIC-SEITEN  (v0.8.0 — Welle A.3)
 *
 *   /haus/{slug}/uebernehmen          → claim_seite.php
 *   /haus/{slug}/uebernehmen + Token  → Drei-Wege-Page (Software / Anzeige / Löschen)
 *   /haus/{slug}/loeschen-anfordern   → dsgvo_seite.php
 *
 * Stil: Booking-Niveau, dieselbe gediegene CI wie Suche und Detail.
 * ═══════════════════════════════════════════════════════════════════════════ */

.claim-seite {
  background: var(--ghos-bg);
  min-height: 70vh;
  padding: 2rem 0 4rem;
}
.claim-seite__container {
  max-width: 880px;
  margin: 0 auto;
}

/* ── Hero pro Stufe ─────────────────────────────────────────────────── */
.claim-seite__hero {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.claim-seite__hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 6px;
  height: 100%;
  background: var(--ghos-text-leise);
}
.claim-seite__hero--kunde::before        { background: #183447; }
.claim-seite__hero--anzeige::before      { background: #2F7D4F; }
.claim-seite__hero--grundeintrag::before { background: #C7BFAA; }

.claim-seite__stufe {
  display: inline-block;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ghos-text-zart);
  margin-bottom: .35rem;
}
.claim-seite__titel {
  font-size: 1.6rem;
  margin: 0 0 .25rem;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--ghos-text);
  line-height: 1.2;
}
.claim-seite__ort {
  font-size: .92rem;
  color: var(--ghos-text-zart);
  margin: 0;
  display: flex;
  align-items: center;
  gap: .35rem;
}

/* ── Flash-Meldungen ─────────────────────────────────────────────────── */
.claim-flash {
  padding: .75rem 1rem;
  border-radius: var(--ghos-radius-klein, 8px);
  margin-bottom: 1rem;
  font-size: .92rem;
}
.claim-flash--ok {
  background: var(--ghos-erfolg-bg, #E5F2EA);
  color: var(--ghos-erfolg-text, #2F7D4F);
  border: 1px solid var(--ghos-erfolg-rand, #B9D4AD);
}
.claim-flash--fehler {
  background: var(--ghos-fehler-bg, #FBEAEA);
  color: #B23A3A;
  border: 1px solid #ECCBCB;
}

/* ── Intro-Block ─────────────────────────────────────────────────────── */
.claim-seite__intro {
  margin: 1.5rem 0 1rem;
}
.claim-seite__intro h2 {
  font-size: 1.2rem;
  margin: 0 0 .5rem;
  font-weight: 500;
}
.claim-seite__intro p {
  font-size: 1rem;
  color: var(--ghos-text-zart);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0;
}

/* ── Conversion-Köder „X Anfragen warten" ─────────────────────────── */
.claim-anfragen-koeder {
  background: var(--ghos-akzent-sehr-hell, #E5ECF2);
  border: 1px solid #B6C9D8;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.claim-anfragen-koeder__icon {
  color: var(--ghos-akzent);
  flex-shrink: 0;
}
.claim-anfragen-koeder__text strong {
  display: block;
  font-size: 1rem;
  color: var(--ghos-akzent);
  font-weight: 500;
  margin-bottom: .15rem;
}
.claim-anfragen-koeder__text p {
  margin: 0;
  font-size: .87rem;
  color: var(--ghos-text-zart);
  line-height: 1.4;
}

/* ── Brief-Code-Eingabe ─────────────────────────────────────────────── */
.claim-codeform {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: 14px;
  padding: 1.25rem;
  margin: 1.5rem 0;
}
.claim-codeform__label {
  display: block;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ghos-text);
  margin-bottom: .4rem;
}
.claim-codeform__feld {
  display: flex;
  gap: .5rem;
  align-items: stretch;
}
.claim-codeform__feld input {
  flex: 1;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .65rem .85rem;
  border: 1px solid var(--ghos-trennlinie-kraeftig);
  border-radius: var(--ghos-radius-klein, 8px);
  background: var(--ghos-bg-zart);
  color: var(--ghos-text);
}
.claim-codeform__feld input:focus {
  outline: 2px solid var(--ghos-akzent);
  outline-offset: 0;
  border-color: var(--ghos-akzent);
}
.claim-codeform__fehler {
  color: #B23A3A;
  font-size: .85rem;
  margin: .5rem 0 0;
}
.claim-codeform__hinweis {
  font-size: .82rem;
  color: var(--ghos-text-leise);
  margin: .65rem 0 0;
  line-height: 1.45;
}
.claim-codeform__hinweis code {
  font-family: 'Menlo', 'Consolas', monospace;
  background: var(--ghos-bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .82rem;
}

/* ── FAQ-Aufklapper ─────────────────────────────────────────────────── */
.claim-seite__faq {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  background: var(--ghos-bg-zart);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: var(--ghos-radius-klein, 8px);
}
.claim-seite__faq summary {
  font-size: .92rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--ghos-text);
}
.claim-seite__faq p {
  margin: .65rem 0 0;
  font-size: .87rem;
  color: var(--ghos-text-zart);
  line-height: 1.55;
}

/* ── Drei-Wege-Cards ────────────────────────────────────────────────── */
.claim-wege {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1rem 0 0;
}
@media (min-width: 720px) {
  .claim-wege { grid-template-columns: 1.2fr 1fr 1fr; }
}

.claim-weg {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  position: relative;
  transition: border-color .15s ease, transform .15s ease;
}
.claim-weg:hover { border-color: var(--ghos-trennlinie-kraeftig); }
.claim-weg--empfehlung {
  border-color: var(--ghos-akzent);
  border-width: 2px;
  padding: 1.2rem;
}
.claim-weg--leise {
  background: var(--ghos-bg-zart);
}

.claim-weg__badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--ghos-akzent);
  color: var(--ghos-akzent-text);
  font-size: .72rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.claim-weg__icon {
  color: var(--ghos-akzent);
  margin-bottom: .25rem;
}
.claim-weg--leise .claim-weg__icon { color: var(--ghos-text-leise); }
.claim-weg h3 {
  font-size: 1.15rem;
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.claim-weg p {
  font-size: .92rem;
  color: var(--ghos-text-zart);
  line-height: 1.5;
  margin: 0;
}
.claim-weg__features {
  list-style: none;
  padding: 0;
  margin: .35rem 0 .25rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.claim-weg__features li {
  font-size: .85rem;
  color: var(--ghos-text);
  position: relative;
  padding-left: 1.2rem;
  line-height: 1.45;
}
.claim-weg__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--ghos-gruen, #2F7D4F);
  border-bottom: 2px solid var(--ghos-gruen, #2F7D4F);
  transform: rotate(-45deg);
}
.claim-weg form { margin-top: auto; padding-top: .5rem; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.claim-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.1rem;
  border-radius: var(--ghos-radius-klein, 8px);
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
  font-family: inherit;
  line-height: 1.2;
}
.claim-btn--primaer {
  background: var(--ghos-akzent);
  color: var(--ghos-akzent-text);
  border-color: var(--ghos-akzent);
}
.claim-btn--primaer:hover {
  background: var(--ghos-akzent-hell);
  border-color: var(--ghos-akzent-hell);
  transform: translateY(-1px);
}
.claim-btn--sekundaer {
  background: transparent;
  color: var(--ghos-akzent);
  border-color: var(--ghos-akzent);
}
.claim-btn--sekundaer:hover {
  background: var(--ghos-akzent-sehr-hell, #E5ECF2);
}
.claim-btn--gefahr {
  background: transparent;
  color: #B23A3A;
  border-color: #DEB6B6;
}
.claim-btn--gefahr:hover {
  background: var(--ghos-fehler-bg, #FBEAEA);
  border-color: #B23A3A;
}
.claim-btn--gross {
  padding: .85rem 1.4rem;
  font-size: 1rem;
  width: 100%;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .claim-btn { transition: none; }
  .claim-btn:hover { transform: none; }
}

/* ═════ DANKE-SEITE ═════ */
.claim-danke__container {
  max-width: 560px;
  text-align: center;
  padding-top: 2rem;
}
.claim-danke__icon {
  color: var(--ghos-gruen, #2F7D4F);
  margin: 0 auto 1rem;
  width: 56px;
  height: 56px;
  background: var(--ghos-erfolg-bg, #E5F2EA);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.claim-body--danke .claim-danke__icon { /* gleicher Stil */ }
.claim-danke__titel {
  font-size: 1.45rem;
  margin: 0 0 .85rem;
  font-weight: 500;
}
.claim-danke__text {
  font-size: 1rem;
  color: var(--ghos-text-zart);
  line-height: 1.6;
  max-width: 50ch;
  margin: 0 auto 1.5rem;
}
.claim-danke__text strong { color: var(--ghos-text); font-weight: 500; }
.claim-danke__zwischen {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: 12px;
  padding: 1.25rem;
  margin: 1rem 0 1.5rem;
}
.claim-danke__zwischen p {
  margin: 0 0 .75rem;
  color: var(--ghos-text-zart);
  font-size: .92rem;
}
.claim-danke__zurueck {
  margin-top: 1.5rem;
  font-size: .9rem;
}
.claim-danke__zurueck a {
  color: var(--ghos-text-zart);
  text-decoration: underline;
}

/* ═════ DSGVO-SEITE ═════ */
.dsgvo-seite__container { max-width: 720px; }
.dsgvo-seite__hero h1 {
  font-size: 1.6rem;
  margin: 0 0 .5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.dsgvo-seite__lead {
  font-size: 1rem;
  color: var(--ghos-text-zart);
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 0 1.5rem;
}
.dsgvo-seite__hinweis {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.dsgvo-seite__hinweis h2 {
  font-size: 1.05rem;
  margin: 0 0 .5rem;
  font-weight: 500;
}
.dsgvo-seite__hinweis p {
  font-size: .92rem;
  color: var(--ghos-text-zart);
  line-height: 1.55;
  margin: 0 0 .85rem;
}
.dsgvo-seite__hinweis code {
  font-family: 'Menlo', 'Consolas', monospace;
  background: var(--ghos-bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .85em;
}
.dsgvo-seite__trenner {
  border: 0;
  border-top: 1px solid var(--ghos-trennlinie);
  margin: 2rem 0 1.5rem;
}
.dsgvo-seite__formular-block h2 {
  font-size: 1.15rem;
  margin: 0 0 .5rem;
  font-weight: 500;
}
.dsgvo-seite__formular-block > p {
  font-size: .92rem;
  color: var(--ghos-text-zart);
  line-height: 1.55;
  margin: 0 0 1.5rem;
}

.dsgvo-formular {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: 12px;
  padding: 1.5rem;
}
.dsgvo-feld {
  margin-bottom: 1.25rem;
}
.dsgvo-feld:last-of-type { margin-bottom: 1.5rem; }
.dsgvo-feld label {
  display: block;
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: .35rem;
  color: var(--ghos-text);
}
.dsgvo-pflicht { color: #B23A3A; }
.dsgvo-feld input[type="email"],
.dsgvo-feld input[type="text"],
.dsgvo-feld select,
.dsgvo-feld textarea {
  width: 100%;
  padding: .6rem .85rem;
  border: 1px solid var(--ghos-trennlinie-kraeftig);
  border-radius: var(--ghos-radius-klein, 8px);
  background: var(--ghos-bg-zart);
  color: var(--ghos-text);
  font-size: .95rem;
  font-family: inherit;
}
.dsgvo-feld input:focus,
.dsgvo-feld select:focus,
.dsgvo-feld textarea:focus {
  outline: 2px solid var(--ghos-akzent);
  outline-offset: 0;
  border-color: var(--ghos-akzent);
}
.dsgvo-feld textarea { resize: vertical; min-height: 80px; }
.dsgvo-feld small {
  display: block;
  font-size: .78rem;
  color: var(--ghos-text-leise);
  margin-top: .3rem;
}
.dsgvo-feld--datenschutz {
  border-top: 1px solid var(--ghos-trennlinie);
  padding-top: 1rem;
  margin-top: 1rem;
}
.dsgvo-datenschutz {
  font-size: .78rem;
  color: var(--ghos-text-zart);
  line-height: 1.5;
  margin: 0;
}
.dsgvo-datenschutz a { color: var(--ghos-akzent); }


/* ═══════════════════════════════════════════════════════════════════════════
 * DETAIL-SEITE BOOKING-STYLE  (v0.9.0 — Welle B.2)
 *
 * Blöcke der Haus-Detail-Seite (`/haus/{slug}`):
 *   - .haus-hero--booking            Hero mit großem Bild + Overlay-Inhalt
 *   - .haus-fakten-cards             Kompakte Card-Grid für Kennzahlen
 *   - .haus-ausstattung-pills        Tag-Pills mit Inline-Icons
 *   - .haus-anfrage-card--booking    Anfrage-CTA-Card mit Trust-Microcopy
 *   - .haus-anfrage-fab              Floating Action Button (mobile + desktop)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── HERO ──────────────────────────────────────────────────────────────── */
.haus-hero.haus-hero--booking {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ghos-bg-tief, #1A2530);
  color: #FFFFFF;
}
.haus-hero--booking .haus-hero__bild {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  z-index: 1;
}
.haus-hero--booking .haus-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}
.haus-hero--booking .haus-hero__placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
}
.haus-hero--booking .haus-hero__placeholder svg { width: 140px; height: 140px; }
.haus-hero--booking .haus-hero__placeholder--kunde        { background: linear-gradient(135deg, #234760 0%, #183447 100%); }
.haus-hero--booking .haus-hero__placeholder--anzeige      { background: linear-gradient(135deg, #2F7D4F 0%, #1E5736 100%); }
.haus-hero--booking .haus-hero__placeholder--grundeintrag { background: linear-gradient(135deg, #C7BFAA 0%, #968A6E 100%); }

.haus-hero--booking .haus-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 1.75rem 1rem 1.5rem;
}

.haus-hero--booking .haus-hero__breadcrumb {
  font-size: .82rem;
  color: rgba(255,255,255,0.75);
  margin: 0 0 .85rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}
.haus-hero--booking .haus-hero__breadcrumb a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
}
.haus-hero--booking .haus-hero__breadcrumb a:hover { color: #FFFFFF; text-decoration: underline; }
.haus-hero--booking .haus-hero__breadcrumb span[aria-hidden] { opacity: .6; }
.haus-hero--booking .haus-hero__breadcrumb span:last-child {
  color: rgba(255,255,255,0.95);
}

.haus-hero--booking .haus-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 .85rem;
}
.haus-hero--booking .haus-hero__stufe,
.haus-hero--booking .haus-hero__verband,
.haus-hero--booking .haus-hero__premium-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ghos-text);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .01em;
  padding: 4px 11px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.haus-hero--booking .haus-hero__stufe--kunde        { color: #183447; }
.haus-hero--booking .haus-hero__stufe--anzeige      { color: #1E5736; }
.haus-hero--booking .haus-hero__stufe--grundeintrag { color: #6B5F40; }
/* v0.14.0 — drei Verband-Pill-Varianten. Default-Klasse (.haus-hero__verband)
   bleibt aus Backward-Compat-Gründen mit dem alten Grünton. Die spezifischeren
   Modifier überschreiben die Farbe je Verband. */
.haus-hero--booking .haus-hero__verband                       { color: #2F7D4F; }
.haus-hero--booking .haus-hero__verband--vds                  { color: #2F7D4F; } /* VDS-Grün, wie bisher */
.haus-hero--booking .haus-hero__verband--naturfreunde         { color: #BE3A3A; } /* Naturfreunde-Rot (Sonnen-Logo) */
.haus-hero--booking .haus-hero__verband--himmlische-herbergen { color: #2D4A77; } /* Evangelisch-Blau */
.haus-hero--booking .haus-hero__premium-pill {
  background: var(--ghos-gold, #D6A43A);
  color: #2C1F00;
}

.haus-hero--booking .haus-hero__titel {
  font-size: 2.1rem;
  margin: 0 0 .5rem;
  color: #FFFFFF;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.haus-hero--booking .haus-hero__ort {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .98rem;
  color: rgba(255,255,255,0.92);
  margin: 0 0 1.25rem;
}

.haus-hero--booking .haus-hero__leiste {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: .85rem;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.haus-hero--booking .haus-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(255,255,255,0.95);
}
.haus-hero--booking .haus-hero__chips li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .9rem;
  font-weight: 500;
}
.haus-hero--booking .haus-hero__chips svg { color: rgba(255,255,255,0.7); }

.haus-hero--booking .haus-hero__cta {
  background: var(--ghos-akzent, #183447);
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.15);
  font-size: .95rem;
  font-weight: 500;
  padding: .75rem 1.4rem;
  border-radius: var(--ghos-radius-klein, 8px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: background .15s ease, transform .15s ease;
  font-family: inherit;
}
.haus-hero--booking .haus-hero__cta:hover {
  background: var(--ghos-akzent-hell, #234760);
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  .haus-hero.haus-hero--booking { min-height: 280px; }
  .haus-hero--booking .haus-hero__titel { font-size: 1.55rem; }
  .haus-hero--booking .haus-hero__leiste { flex-direction: column; align-items: stretch; }
  .haus-hero--booking .haus-hero__cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .haus-hero--booking .haus-hero__cta { transition: none; }
  .haus-hero--booking .haus-hero__cta:hover { transform: none; }
}

/* ── FAKTEN-CARDS ─────────────────────────────────────────────────────── */
.haus-block-section.haus-block-section--fakten { padding: 1.5rem 0 0; }
.haus-fakten-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.haus-fakten-cards__item {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  text-align: left;
  transition: border-color .15s ease;
}
.haus-fakten-cards__item:hover { border-color: var(--ghos-trennlinie-kraeftig); }
.haus-fakten-cards__icon {
  color: var(--ghos-akzent);
  margin-bottom: .15rem;
}
.haus-fakten-cards__label {
  font-size: .72rem;
  color: var(--ghos-text-zart);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 500;
}
.haus-fakten-cards__wert {
  font-size: 1.05rem;
  color: var(--ghos-text);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ── AUSSTATTUNG-PILLS ────────────────────────────────────────────────── */
.haus-ausstattung-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.haus-ausstattung-pills__item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .87rem;
  padding: .42rem .85rem;
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-trennlinie);
  border-radius: 999px;
  color: var(--ghos-text);
}
.haus-ausstattung-pills__item svg { color: var(--ghos-akzent); flex-shrink: 0; }

/* ── BUCHUNGS-CARD ONLINE-BUCHEN (v0.13.1 B.2) ───────────────────────────
 *
 *  Primärer CTA wenn portal_haus.online_buchbar = 1 (mind. eine Unter-
 *  kunft buchbar). Leitet zum Standalone-Wizard. Größer und dominanter
 *  als die Anfrage-Card, mit Live-Verfügbarkeits-Pill und Sekundär-Link
 *  „E-Mail-Anfrage stattdessen". */
.haus-buchung-card {
  background: var(--ghos-akzent);
  color: var(--ghos-akzent-text);
  border-radius: 16px;
  padding: 1.75rem 1.75rem 1.5rem;
  margin: 0 auto 1.25rem;
  max-width: 640px;
  box-shadow: 0 10px 30px rgba(23, 32, 42, .14);
  position: relative;
  overflow: hidden;
}
.haus-buchung-card::before {
  /* Akzent-Glanz oben rechts */
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(214, 164, 58, .25), transparent 70%);
  pointer-events: none;
}
.haus-buchung-card__kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.haus-buchung-card__titel {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--ghos-akzent-text);
  letter-spacing: -.01em;
}
.haus-buchung-card__live {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--ghos-akzent-sehr-hell);
  background: rgba(255, 255, 255, .08);
  padding: .3rem .7rem;
  border-radius: 999px;
  font-weight: 500;
}
.haus-buchung-card__live-puls {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
  animation: haus-buchung-puls 2s ease-out infinite;
}
@keyframes haus-buchung-puls {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); }
  70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* Status-Varianten (v0.13.2 B.3): vom Frontend-JS gesetzt, sobald die
 * Verfügbarkeits-Antwort vom Standalone da ist */
.haus-buchung-card__live--verfuegbar .haus-buchung-card__live-puls {
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
  animation: haus-buchung-puls 2s ease-out infinite;
}
.haus-buchung-card__live--teilweise .haus-buchung-card__live-puls {
  background: #fbbf24;
  box-shadow: 0 0 0 0 rgba(251, 191, 36, .6);
  animation: haus-buchung-puls-warn 2s ease-out infinite;
}
.haus-buchung-card__live--nicht .haus-buchung-card__live-puls {
  background: #f87171;
  box-shadow: 0 0 0 0 rgba(248, 113, 113, .6);
  animation: none; /* statisch — kein „aktiv"-Signal bei nicht verfügbar */
}
@keyframes haus-buchung-puls-warn {
  0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, .6); }
  70%  { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}
.haus-buchung-card__lede {
  margin: 0 0 1.1rem;
  color: var(--ghos-akzent-sehr-hell);
  font-size: 1rem;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}
.haus-buchung-card__features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  position: relative;
  z-index: 1;
}
.haus-buchung-card__features li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .92rem;
  color: var(--ghos-akzent-text);
  line-height: 1.45;
}
.haus-buchung-card__features li svg {
  color: var(--ghos-gold-hell);
  margin-top: .15rem;
  flex-shrink: 0;
}
.haus-buchung-card__hinweis-li {
  font-size: .82rem !important;
  color: var(--ghos-akzent-sehr-hell) !important;
  font-style: italic;
}
.haus-buchung-card__hinweis-li svg {
  color: var(--ghos-akzent-sehr-hell) !important;
}
.haus-buchung-card__cta {
  /* Override für Buchungs-Card: heller Button auf dunklem Hintergrund */
  background: var(--ghos-gold) !important;
  color: var(--ghos-akzent) !important;
  font-size: 1.05rem !important;
  padding: .95rem 1.5rem !important;
  font-weight: 600 !important;
  position: relative;
  z-index: 1;
  transition: transform .12s, background .12s, box-shadow .12s;
}
.haus-buchung-card__cta:hover {
  background: var(--ghos-gold-hell) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(23, 32, 42, .15);
}
.haus-buchung-card__sekundaer {
  margin: 1rem 0 0;
  font-size: .85rem;
  color: var(--ghos-akzent-sehr-hell);
  text-align: center;
  position: relative;
  z-index: 1;
}
.haus-buchung-card__anfrage-link {
  background: none;
  border: none;
  color: var(--ghos-gold-hell);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  margin-left: .25rem;
}
.haus-buchung-card__anfrage-link:hover {
  color: var(--ghos-gold);
}
@media (max-width: 540px) {
  .haus-buchung-card {
    padding: 1.4rem 1.25rem 1.25rem;
    border-radius: 14px;
  }
  .haus-buchung-card__titel { font-size: 1.35rem; }
  .haus-buchung-card__lede  { font-size: .95rem; }
  .haus-buchung-card__cta   { font-size: 1rem !important; padding: .85rem 1.25rem !important; }
}

/* FAB im Buchungs-Modus: Gold-Akzent statt Standard-Primary */
.haus-anfrage-fab--buchung {
  background: var(--ghos-gold);
  color: var(--ghos-akzent);
}
.haus-anfrage-fab--buchung:hover {
  background: var(--ghos-gold-hell);
}

/* ── ANFRAGE-CARD BOOKING-STYLE ──────────────────────────────────────── */
.haus-anfrage-card.haus-anfrage-card--booking {
  background: var(--ghos-bg-karte);
  border: 1px solid var(--ghos-akzent);
  border-radius: 14px;
  padding: 1.5rem;
  margin: 0 auto;
  max-width: 600px;
  box-shadow: 0 4px 20px rgba(23, 32, 42, 0.06);
}
.haus-anfrage-card--booking .haus-anfrage-card__kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .35rem;
  flex-wrap: wrap;
}
.haus-anfrage-card--booking .haus-anfrage-card__kopf h2 {
  font-size: 1.25rem;
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.haus-anfrage-card__trust {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  font-weight: 500;
  color: var(--ghos-gruen, #2F7D4F);
  background: var(--ghos-erfolg-bg, #E5F2EA);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  margin-top: 4px;
}
.haus-anfrage-card--booking .haus-anfrage-card__lede {
  font-size: .92rem;
  color: var(--ghos-text-zart);
  margin: 0 0 1rem;
  line-height: 1.55;
}
.haus-anfrage-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.haus-anfrage-card__features li {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  font-size: .87rem;
  color: var(--ghos-text);
  line-height: 1.4;
}
.haus-anfrage-card__features svg {
  color: var(--ghos-gruen, #2F7D4F);
  flex-shrink: 0;
  margin-top: 3px;
}
.haus-anfrage-card__cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.haus-anfrage-card--booking .haus-anfrage-card__hinweis {
  background: var(--ghos-akzent-sehr-hell, #E5ECF2);
  color: var(--ghos-akzent);
  font-size: .82rem;
  padding: .65rem .85rem;
  border-radius: 8px;
  margin: 1rem 0 0;
  line-height: 1.45;
}

/* Grundeintrag-Variante (Anfrage nicht möglich) */
.haus-anfrage-card--grundeintrag {
  background: var(--ghos-bg-zart);
  border: 1px dashed var(--ghos-trennlinie-kraeftig);
  border-radius: 14px;
  padding: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.haus-anfrage-card--grundeintrag h2 {
  font-size: 1.15rem;
  margin: 0 0 .65rem;
  color: var(--ghos-text-zart);
  font-weight: 500;
}
.haus-anfrage-card--grundeintrag p {
  color: var(--ghos-text-zart);
  font-size: .92rem;
  line-height: 1.55;
  margin: 0 0 .85rem;
}
.haus-anfrage-card--grundeintrag p:last-child { margin: 0; font-size: .85rem; }
.haus-anfrage-card--grundeintrag a { color: var(--ghos-akzent); font-weight: 500; }

/* ── FLOATING ACTION BUTTON ──────────────────────────────────────────── */
.haus-anfrage-fab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  background: var(--ghos-akzent, #183447);
  color: #FFFFFF;
  border: 0;
  padding: .8rem 1.2rem;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  box-shadow: 0 6px 24px rgba(23, 32, 42, 0.25);
  transition: transform .18s ease, background .15s ease, box-shadow .18s ease;
}
.haus-anfrage-fab:hover {
  background: var(--ghos-akzent-hell, #234760);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(23, 32, 42, 0.32);
}
.haus-anfrage-fab svg { flex-shrink: 0; }
.haus-anfrage-fab__label { white-space: nowrap; }

/* FAB unsichtbar wenn Modal offen (Modal hat `hidden=false`) */
body:has(.anfrage-modal:not([hidden])) .haus-anfrage-fab { display: none; }

/* Auf Mobile: nur Icon (Label weg) */
@media (max-width: 480px) {
  .haus-anfrage-fab {
    padding: .9rem;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    justify-content: center;
  }
  .haus-anfrage-fab__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .haus-anfrage-fab { transition: none; }
  .haus-anfrage-fab:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
 *  HAUS-DETAIL · BOOKING-STYLE · WELLE B.2b (Portal v0.10.0)
 *  ─────────────────────────────────────────────────────────
 *  Galerie als Hero-Grid (1 großes Bild + 2×2 kleine), Lightbox-Modal.
 *  Adresse-Karte als 2-Spalter (Adresse links, Karte rechts) mit
 *  Custom Marine-Pin und Aktions-Pills (Route, OSM-Link).
 *
 *  Klassen:
 *    .haus-galerie--booking            — Galerie-Section im Booking-Stil
 *    .haus-galerie__grid               — Hero-Grid (1+4 Bilder)
 *    .haus-galerie__hero               — großes Hero-Bild links
 *    .haus-galerie__neben              — Container für 4 kleine rechts
 *    .haus-galerie__klein              — kleines Bild
 *    .haus-galerie__klein--mehr        — letztes mit „+N weitere"-Overlay
 *    .haus-galerie__mehr-overlay       — schwarzer Overlay mit Text
 *    .haus-galerie__alle-anzeigen      — Pill-Button „Alle Bilder ansehen"
 *
 *    .galerie-lightbox                 — Fullscreen-Modal
 *    .galerie-lightbox__bild           — Aktuelles Bild
 *    .galerie-lightbox__nav            — Pfeil-Knöpfe (links/rechts)
 *    .galerie-lightbox__zaehler        — „3 / 12"-Anzeige
 *    .galerie-lightbox__schliessen     — X-Knopf oben rechts
 *
 *    .haus-adresse-card--booking       — Adresse+Karte-Card
 *    .haus-minikarte--booking          — gestylter Leaflet-Container
 *    .haus-karte-pin                   — Custom DivIcon (Marine SVG)
 *    .haus-karte-popup-wrap            — Leaflet-Popup-Override
 *    .haus-adresse-aktionen__pill      — Pill-Link (Route, OSM)
 * ──────────────────────────────────────────────────────────────────────── */

/* ── GALERIE: Booking-Hero-Grid ─────────────────────────────────────── */

.haus-galerie--booking {
  margin: 1.5rem 0 0;
  padding: 0;
}
.haus-galerie--booking .haus-galerie__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 540px;
}
.haus-galerie__hero,
.haus-galerie__klein {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: var(--ghos-flaeche-sanft, #F3EFE6);
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 0;
}
.haus-galerie__hero img,
.haus-galerie__klein img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.haus-galerie__hero:hover img,
.haus-galerie__klein:hover img {
  transform: scale(1.03);
}
.haus-galerie__hero:focus-visible,
.haus-galerie__klein:focus-visible {
  outline: 3px solid var(--ghos-akzent, #183447);
  outline-offset: -3px;
}
.haus-galerie__neben {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}
.haus-galerie__klein--mehr .haus-galerie__mehr-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 32, 42, 0.55);
  pointer-events: none;
}
.haus-galerie__mehr-text {
  color: #FFFFFF;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
}
.haus-galerie__alle-anzeigen {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .9rem 0 0;
  padding: .55rem 1rem;
  background: #FFFFFF;
  color: var(--ghos-akzent, #183447);
  border: 1.5px solid var(--ghos-akzent, #183447);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.haus-galerie__alle-anzeigen:hover {
  background: var(--ghos-akzent, #183447);
  color: #FFFFFF;
}
.haus-galerie__alle-anzeigen svg { flex-shrink: 0; }

/* Galerie Mobile: stack zu 1 Spalte, kleine Bilder verschwinden,
 * der "Alle anzeigen"-Knopf bleibt als CTA */
@media (max-width: 640px) {
  .haus-galerie--booking .haus-galerie__grid {
    grid-template-columns: 1fr;
    aspect-ratio: 4 / 3;
    max-height: none;
  }
  .haus-galerie__neben { display: none; }
}

/* ── GALERIE-LIGHTBOX ───────────────────────────────────────────────── */

.galerie-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 20, 28, 0.95);
  padding: 4rem 1rem 1rem;
  /* Wenn hidden: display:none via [hidden] */
}
.galerie-lightbox[hidden] { display: none; }
.galerie-lightbox__bild-wrapper {
  flex: 1;
  max-width: 1400px;
  max-height: calc(100vh - 6rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .5rem;
}
.galerie-lightbox__bild {
  max-width: 100%;
  max-height: calc(100vh - 6rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.galerie-lightbox__schliessen,
.galerie-lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border: 0;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.galerie-lightbox__schliessen:hover,
.galerie-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}
.galerie-lightbox__schliessen {
  top: 1rem;
  right: 1rem;
}
.galerie-lightbox__nav--vorige  { left: 1rem; }
.galerie-lightbox__nav--naechste { right: 1rem; }
.galerie-lightbox__zaehler {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  padding: .35rem .9rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .02em;
}
.galerie-lightbox__nav:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.galerie-lightbox__nav:disabled:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: none;
}
@media (max-width: 600px) {
  .galerie-lightbox { padding: 3rem .5rem .5rem; }
  .galerie-lightbox__schliessen,
  .galerie-lightbox__nav { width: 38px; height: 38px; }
  .galerie-lightbox__nav--vorige  { left: .5rem; }
  .galerie-lightbox__nav--naechste { right: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .haus-galerie__hero img,
  .haus-galerie__klein img,
  .galerie-lightbox__schliessen,
  .galerie-lightbox__nav { transition: none; }
  .haus-galerie__hero:hover img,
  .haus-galerie__klein:hover img,
  .galerie-lightbox__schliessen:hover,
  .galerie-lightbox__nav:hover { transform: none; }
}

/* ── ADRESSE-KARTE: Booking-Card-Layout ─────────────────────────────── */

.haus-adresse-section {
  margin: 2rem 0;
}
.haus-adresse-card--booking {
  background: #FFFFFF;
  border: 1px solid var(--ghos-rand-sanft, #E4DCC8);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(23, 32, 42, 0.04);
}
.haus-adresse-card__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
}
.haus-adresse-card__kopf h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ghos-text, #1A1A1A);
}
.haus-adresse-card__ort {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  color: var(--ghos-text-leise, #6B6B6B);
}
.haus-adresse-card__ort svg { color: var(--ghos-akzent, #183447); flex-shrink: 0; }

.haus-adresse-card__inhalt {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 1.5rem;
  align-items: start;
}
.haus-adresse-card__text address {
  font-style: normal;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ghos-text, #1A1A1A);
  margin: 0 0 1rem;
}
.haus-adresse-card__text address strong {
  font-weight: 600;
  font-size: 1rem;
}

.haus-adresse-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.haus-adresse-aktionen__pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .85rem;
  background: var(--ghos-flaeche-sanft, #F3EFE6);
  color: var(--ghos-akzent, #183447);
  border-radius: 999px;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.haus-adresse-aktionen__pill:hover {
  background: #FFFFFF;
  border-color: var(--ghos-akzent, #183447);
  text-decoration: none;
}
.haus-adresse-aktionen__pill svg { flex-shrink: 0; }

/* Karten-Container */
.haus-adresse-card__karte {
  position: relative;
}
.haus-minikarte--booking {
  width: 100%;
  height: 320px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--ghos-rand-sanft, #E4DCC8);
  background: var(--ghos-flaeche-sanft, #F3EFE6);
}
.haus-minikarte__noscript {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1rem;
  text-align: center;
  color: var(--ghos-text-leise, #6B6B6B);
  font-size: .9rem;
}
.haus-minikarte__noscript a {
  margin-top: .5rem;
  color: var(--ghos-akzent, #183447);
}

/* Custom Marine-Pin (Leaflet DivIcon-Wrapper) */
.haus-karte-pin {
  background: transparent !important;
  border: 0 !important;
}
.haus-karte-pin svg {
  width: 32px;
  height: 42px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Leaflet-Popup im Booking-Stil */
.leaflet-popup.haus-karte-popup-wrap .leaflet-popup-content-wrapper {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(23, 32, 42, 0.15);
  padding: .35rem .25rem;
}
.leaflet-popup.haus-karte-popup-wrap .leaflet-popup-content {
  margin: .55rem .85rem;
  font-size: .88rem;
  line-height: 1.4;
}
.leaflet-popup.haus-karte-popup-wrap .haus-karte-popup strong {
  display: block;
  color: var(--ghos-akzent, #183447);
  font-size: .95rem;
  margin-bottom: .15rem;
}
.leaflet-popup.haus-karte-popup-wrap .haus-karte-popup span {
  color: var(--ghos-text-leise, #6B6B6B);
  font-size: .82rem;
}
.leaflet-popup.haus-karte-popup-wrap .leaflet-popup-tip {
  box-shadow: 0 4px 16px rgba(23, 32, 42, 0.1);
}

/* Adresse-Card Mobile: gestackt */
@media (max-width: 768px) {
  .haus-adresse-card--booking { padding: 1.25rem; }
  .haus-adresse-card__inhalt {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .haus-minikarte--booking { height: 260px; }
}
@media (max-width: 480px) {
  .haus-adresse-card--booking { padding: 1rem; }
  .haus-minikarte--booking { height: 220px; }
  .haus-adresse-aktionen { flex-direction: column; align-items: stretch; }
  .haus-adresse-aktionen__pill { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════════
 *  ANFRAGE-MODAL · MULTI-STEP-WIZARD · WELLE B.3 (Portal v0.11.0)
 *  ───────────────────────────────────────────────────────────
 *  3-Step-Wizard (Wann → Wer → Kontakt) im Anfrage-Modal.
 *  Progressive Enhancement: ohne JS bleibt die Form als Single-Page-Form
 *  (alle Schritte sichtbar). JS setzt .is-aktiviert auf das Form-Element,
 *  und die [data-step]-Fieldsets werden über das hidden-Attribut gesteuert.
 *
 *  Klassen:
 *    .anfrage-progress             — Progress-Container (oben im Modal)
 *    .anfrage-progress__schritte   — <ol> mit 3 Schritt-Items
 *    .anfrage-progress__schritt    — einzelner Schritt-Eintrag
 *    .anfrage-progress__nummer     — Kreis mit 1/2/3
 *    .anfrage-progress__label      — „Wann"/„Wer"/„Kontakt"
 *    .anfrage-progress__balken     — Fortschrittsbalken (33/66/100%)
 *
 *    .anfrage-step                 — Fieldset pro Step
 *    .anfrage-step__legende        — Step-Titel
 *    .anfrage-step__lede           — Erklärtext unter dem Titel
 *
 *    .anfrage-quickpicks           — Datum-Schnellauswahl-Container
 *    .anfrage-quickpick            — Pill-Button für Datum-Preset
 *
 *    .anfrage-summary              — Übersichts-Box auf Step 3
 *    .anfrage-summary__liste       — Definition List mit Anreise/Abreise/…
 *    .anfrage-summary__bearbeiten  — „← Daten ändern"-Link
 *
 *    .anfrage-aktionen--multistep  — Zurück/Weiter/Senden/Abbrechen-Reihe
 * ──────────────────────────────────────────────────────────────────────── */

/* ── Progress-Bar oben im Modal ───────────────────────────────────── */

.anfrage-progress {
  margin: 0 0 1.25rem;
  padding: 0 .25rem;
}
.anfrage-progress[hidden] { display: none; }

.anfrage-progress__schritte {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  list-style: none;
  margin: 0 0 .75rem;
  padding: 0;
  gap: .5rem;
  counter-reset: progress;
}
.anfrage-progress__schritt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  flex: 1;
  min-width: 0;
  cursor: default;
  color: var(--ghos-text-leise, #6B6B6B);
  transition: color .15s ease;
}
.anfrage-progress__schritt.is-aktiv,
.anfrage-progress__schritt.is-erledigt {
  color: var(--ghos-akzent, #183447);
}
.anfrage-progress__schritt.is-erledigt {
  cursor: pointer;
}
.anfrage-progress__schritt.is-erledigt:hover {
  color: var(--ghos-akzent-hell, #234760);
}
.anfrage-progress__nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ghos-flaeche-sanft, #F3EFE6);
  color: var(--ghos-text-leise, #6B6B6B);
  border: 1.5px solid transparent;
  font-size: .85rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.anfrage-progress__schritt.is-aktiv .anfrage-progress__nummer {
  background: var(--ghos-akzent, #183447);
  color: #FFFFFF;
  border-color: var(--ghos-akzent, #183447);
}
.anfrage-progress__schritt.is-erledigt .anfrage-progress__nummer {
  background: #FFFFFF;
  color: var(--ghos-akzent, #183447);
  border-color: var(--ghos-akzent, #183447);
}
/* Häkchen-Icon für erledigte Schritte */
.anfrage-progress__schritt.is-erledigt .anfrage-progress__nummer {
  position: relative;
  font-size: 0;
}
.anfrage-progress__schritt.is-erledigt .anfrage-progress__nummer::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--ghos-akzent, #183447);
  border-bottom: 2px solid var(--ghos-akzent, #183447);
  transform: rotate(-45deg) translateY(-1px);
}
.anfrage-progress__label {
  font-size: .78rem;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.anfrage-progress__balken {
  height: 4px;
  background: var(--ghos-flaeche-sanft, #F3EFE6);
  border-radius: 2px;
  overflow: hidden;
}
.anfrage-progress__balken-fuell {
  height: 100%;
  background: linear-gradient(90deg, var(--ghos-akzent, #183447) 0%, var(--ghos-akzent-hell, #234760) 100%);
  border-radius: 2px;
  transition: width .3s ease;
}

/* ── Step-Fieldset (Single-Step-Anzeige wenn JS aktiv) ────────────── */

.anfrage-form[data-multistep] .anfrage-step {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}
.anfrage-form[data-multistep] .anfrage-step[hidden] { display: none; }

.anfrage-step__legende {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ghos-text, #1A1A1A);
  margin: 0 0 .25rem;
  padding: 0;
}
.anfrage-step__lede {
  font-size: .9rem;
  color: var(--ghos-text-leise, #6B6B6B);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

/* Wenn JS NICHT aktiv ist (data-multistep ohne is-aktiviert):
 * alle Steps sichtbar als gewöhnliche Sektionen, ohne Progress, ohne Nav */
.anfrage-form[data-multistep]:not(.is-aktiviert) .anfrage-step {
  margin: 0 0 1.5rem;
}
.anfrage-form[data-multistep]:not(.is-aktiviert) [data-anfrage-zurueck],
.anfrage-form[data-multistep]:not(.is-aktiviert) [data-anfrage-weiter],
.anfrage-form[data-multistep]:not(.is-aktiviert) [data-anfrage-summary] {
  display: none !important;
}
.anfrage-form[data-multistep]:not(.is-aktiviert) [data-anfrage-senden] {
  display: inline-flex !important;
}

/* ── Quick-Picks (Datum-Schnellauswahl) ────────────────────────────── */

.anfrage-quickpicks {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .85rem;
}
.anfrage-quickpick {
  display: inline-flex;
  align-items: center;
  padding: .45rem .85rem;
  background: var(--ghos-flaeche-sanft, #F3EFE6);
  color: var(--ghos-akzent, #183447);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.anfrage-quickpick:hover {
  background: #FFFFFF;
  border-color: var(--ghos-akzent, #183447);
}
.anfrage-quickpick.is-gewaehlt {
  background: var(--ghos-akzent, #183447);
  color: #FFFFFF;
  border-color: var(--ghos-akzent, #183447);
}

/* ── Summary-Box auf Step 3 ───────────────────────────────────────── */

.anfrage-summary {
  background: var(--ghos-flaeche-sanft, #F3EFE6);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 0 0 1.25rem;
  border: 1px solid var(--ghos-rand-sanft, #E4DCC8);
}
.anfrage-summary[hidden] { display: none; }
.anfrage-summary__titel {
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ghos-text-leise, #6B6B6B);
  margin: 0 0 .6rem;
}
.anfrage-summary__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .6rem .9rem;
  margin: 0 0 .75rem;
}
.anfrage-summary__liste > div {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.anfrage-summary__liste dt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ghos-text-leise, #6B6B6B);
  font-weight: 500;
  margin: 0;
}
.anfrage-summary__liste dd {
  font-size: .92rem;
  color: var(--ghos-text, #1A1A1A);
  font-weight: 500;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.anfrage-summary__bearbeiten {
  background: transparent;
  border: 0;
  color: var(--ghos-akzent, #183447);
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.anfrage-summary__bearbeiten:hover {
  color: var(--ghos-akzent-hell, #234760);
}

/* ── Aktionen-Reihe (Zurück/Weiter/Senden/Abbrechen) ──────────────── */

.anfrage-aktionen--multistep {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ghos-rand-sanft, #E4DCC8);
}
.anfrage-aktionen--multistep [data-anfrage-zurueck],
.anfrage-aktionen--multistep [data-anfrage-weiter],
.anfrage-aktionen--multistep [data-anfrage-senden] {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.anfrage-aktionen--multistep [data-anfrage-zurueck] {
  /* Zurück links, in Text-Stil */
  margin-right: auto;
}
.anfrage-aktionen--multistep [data-anfrage-zurueck][hidden],
.anfrage-aktionen--multistep [data-anfrage-weiter][hidden],
.anfrage-aktionen--multistep [data-anfrage-senden][hidden] {
  display: none;
}
.anfrage-aktionen__abbrechen {
  /* Abbrechen ganz rechts oder als Letztes, ohne margin-left:auto wenn Zurück da */
  font-size: .85rem;
}

/* ── Fehler-Highlight für ungültige Felder ────────────────────────── */

.anfrage-form .feld input.is-fehler,
.anfrage-form .feld select.is-fehler,
.anfrage-form .feld textarea.is-fehler {
  border-color: #B23A48;
  box-shadow: 0 0 0 3px rgba(178, 58, 72, 0.12);
  outline: none;
}

/* ── Mobile: Progress kompakter, Aktionen vollbreit ───────────────── */

@media (max-width: 480px) {
  .anfrage-progress__schritte { gap: .25rem; }
  .anfrage-progress__nummer { width: 24px; height: 24px; font-size: .78rem; }
  .anfrage-progress__label { font-size: .72rem; }
  .anfrage-step__legende { font-size: 1rem; }

  .anfrage-aktionen--multistep {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
  .anfrage-aktionen--multistep [data-anfrage-zurueck] {
    order: 3;
    margin-right: 0;
    justify-content: center;
  }
  .anfrage-aktionen--multistep [data-anfrage-weiter],
  .anfrage-aktionen--multistep [data-anfrage-senden] {
    order: 1;
    width: 100%;
    justify-content: center;
  }
  .anfrage-aktionen__abbrechen {
    order: 4;
    width: 100%;
    text-align: center;
  }

  .anfrage-summary__liste {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anfrage-progress__balken-fuell,
  .anfrage-progress__nummer,
  .anfrage-progress__schritt,
  .anfrage-quickpick { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
 *  ANFRAGE-MODAL · A11y-LIVE-REGION (Mini-Welle B.3a, v0.11.1)
 *  ─────────────────────────────────────────────────────────────
 *  Live-Region unter der Progress-Bar. Optisch unsichtbar, aber für
 *  Screen-Reader erreichbar — sie hören die Step-Wechsel-Ansage
 *  („Schritt 2 von 3: Wer kommt mit?") als aria-live=polite.
 * ──────────────────────────────────────────────────────────────────────── */

.anfrage-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
 *  v0.12.0 — Vervollständigung Anfrage-Modal + Häuser-Karten + Honeypot
 *
 *  Diese Klassen waren im View-Markup vorhanden, aber ohne CSS-Definition:
 *    - Anfrage-Modal selbst: Overlay-Position, Backdrop, Content-Box,
 *      X-Schließen-Button, Hinweistext fehlten komplett. Folge: Das Modal
 *      rendete als unstyled Inline-Block im Body-Fluss, alle Felder roh
 *      und (sicherheitskritisch!) der Honeypot „Webseite (bitte freilassen)"
 *      war für ehrliche User sichtbar.
 *    - Häuser-Karten (.unterkunft-karte*) auf der Haus-Detailseite waren
 *      völlig ungestylt — keine Bild-Layout, keine Karte, nur rohe <ul>.
 *
 *  Modal-Buttons wurden zusätzlich im Markup von btn/btn--* auf das
 *  bestehende ghos-btn/ghos-btn--*-System umgestellt (waren als
 *  `class="btn btn--primaer"` vorhanden, das CSS für die btn-Familie
 *  fehlte komplett — ghos-btn ist die kanonische Variante im Portal).
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Anfrage-Modal: Overlay-Container ─────────────────────────────────── */
.anfrage-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
/* HTML5-`hidden`-Attribut überschreiben (sonst gewinnt unser display:flex) */
.anfrage-modal[hidden] { display: none; }

/* Backdrop hinter dem Modal */
.anfrage-modal__hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(16, 38, 53, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Modal-Content-Box (Card) */
.anfrage-modal__inhalt {
  position: relative;
  z-index: 1;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  max-width: 38rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem 2.25rem;
}
@media (max-width: 600px) {
  .anfrage-modal { padding: 0; }
  .anfrage-modal__inhalt {
    border-radius: 0;
    max-height: 100vh;
    padding: 1.5rem 1.25rem 2rem;
  }
}
.anfrage-modal__inhalt h2 {
  margin: 0 0 .5rem;
  font-size: 1.45rem;
  color: var(--color-text);
}

/* X-Schließen-Button oben rechts */
.anfrage-modal__schliessen {
  position: absolute;
  top: .85rem;
  right: .85rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .12s, border-color .12s, transform .12s;
}
.anfrage-modal__schliessen:hover {
  background: var(--color-bg);
  border-color: var(--color-border-strong);
  transform: scale(1.05);
}

/* „Pflichtfelder mit *" o.ä. Hinweistext unter dem Titel */
.anfrage-modal__hinweis {
  font-size: .85rem;
  color: var(--color-muted);
  margin: 0 0 1.25rem;
}

/* ─── Recall-Banner: Kontakt-Daten vom letzten Mal (v0.12.2 K.2) ──────────
 *
 *  Zeigt JS, wenn localStorage 'ghos.anfrage.kontakt.v1' geladen wurde
 *  und Step 3 vorausgefüllt ist. Dezent, ein gedämpftes Beige mit
 *  Check-Icon links und "Vergessen"-Button rechts. */
.anfrage-kontakt-recall {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem .9rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  color: var(--color-muted);
  margin: 0 0 1.25rem;
}
.anfrage-kontakt-recall[hidden] { display: none; }
.anfrage-kontakt-recall__icon {
  flex: 0 0 auto;
  color: var(--color-success);
}
.anfrage-kontakt-recall__text {
  flex: 1;
  line-height: 1.35;
}
.anfrage-kontakt-recall__vergessen {
  flex: 0 0 auto;
  font-size: .8rem;
  padding: .25rem .55rem;
}
@media (max-width: 460px) {
  .anfrage-kontakt-recall {
    flex-wrap: wrap;
    gap: .5rem;
  }
  .anfrage-kontakt-recall__text { flex-basis: calc(100% - 28px); }
}

/* ─── Inline-Fehler unter dem Formular (v0.12.3 K.3) ──────────────────────
 *
 *  Wenn der fetch-Submit ablehnt (Backend liefert {ok:false, message:…})
 *  oder bei Netzwerk-Fehler, blendet sich diese Zeile unter den Aktionen
 *  ein. Live-Region für Screen-Reader. */
.anfrage-fehler {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin-top: 1rem;
  padding: .7rem .9rem;
  background: var(--color-error-bg);
  color: var(--color-error);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  line-height: 1.4;
}
.anfrage-fehler[hidden] { display: none; }
.anfrage-fehler svg { flex: 0 0 auto; margin-top: .1rem; }
.anfrage-fehler__text { flex: 1; }

/* ─── Erfolgs-View (v0.12.3 K.3) ──────────────────────────────────────────
 *
 *  Inline-Bestätigung statt Hard-Redirect nach Submit. Form versteckt
 *  sich, dieser Block wird sichtbar. Zentriert, großes Häkchen, klare
 *  Folge-Aktionen. */
.anfrage-erfolg {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0 .5rem;
  animation: anfrageErfolgEinblenden .35s ease-out;
}
.anfrage-erfolg[hidden] { display: none; }
.anfrage-erfolg__icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--color-success-bg);
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.anfrage-erfolg__titel {
  margin: 0 0 .5rem;
  font-size: 1.35rem;
  color: var(--color-text);
}
.anfrage-erfolg__text {
  margin: 0 0 1.5rem;
  color: var(--color-muted);
  font-size: .95rem;
  line-height: 1.5;
  max-width: 26rem;
}
.anfrage-erfolg__text strong {
  color: var(--color-text);
  font-weight: 600;
}
.anfrage-erfolg__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  align-items: center;
}
@media (max-width: 460px) {
  .anfrage-erfolg__aktionen {
    flex-direction: column;
    width: 100%;
  }
  .anfrage-erfolg__aktionen > * { width: 100%; }
}
@keyframes anfrageErfolgEinblenden {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Wenn Erfolg sichtbar ist, soll der Hinweistext oben verschwinden
 * (Pflichtfelder mit *) und das Recall-Banner ausblenden. Wir nutzen
 * eine State-Klasse statt :has(), damit auch ältere Browser greifen. */
.anfrage-modal.is-erfolg .anfrage-modal__hinweis,
.anfrage-modal.is-erfolg .anfrage-kontakt-recall,
.anfrage-modal.is-erfolg .anfrage-progress,
.anfrage-modal.is-erfolg .anfrage-form {
  display: none !important;
}

/* ─── Honeypot: sicherheitskritisch unsichtbar machen ──────────────────────
 *
 *  Vorher sichtbar als „Webseite (bitte freilassen)" im UI. Bots füllen
 *  das Feld aus, der Backend-Validator verwirft solche Submissions. Wenn
 *  es sichtbar ist, füllen ehrliche User es manchmal aus Verwirrung aus
 *  und werden fälschlich als Bot eingestuft. Wir nutzen Off-Screen-
 *  Positioning statt display:none, weil manche Bots display:none-Felder
 *  erkennen und überspringen. */
.anfrage-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ─── Grid für die Datums-Inputs in Step 1 ─────────────────────────────── */
.anfrage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: .75rem 0;
}
@media (max-width: 480px) {
  .anfrage-grid { grid-template-columns: 1fr; }
}

/* Voll-Breiten-Feld innerhalb des Grids (z.B. Nachrichten-Textarea) */
.feld--voll {
  grid-column: 1 / -1;
}

/* Falls .feld noch keine Basis-Definition hatte (nur is-fehler-Modifier):
   Form-Feld als Label-oben/Input-unten-Spalte. Wir scopen vorsichtig auf
   anfrage-form, um nicht ungewollt andere .feld-Vorkommen zu überschreiben. */
.anfrage-form .feld {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.anfrage-form .feld > label {
  font-size: .85rem;
  color: var(--color-muted);
  font-weight: 500;
}
.anfrage-form .feld input:not([type="checkbox"]):not([type="radio"]),
.anfrage-form .feld select,
.anfrage-form .feld textarea {
  font: inherit;
  font-size: .95rem;
  padding: .65rem .8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.anfrage-form .feld input:focus,
.anfrage-form .feld select:focus,
.anfrage-form .feld textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}


/* ════════════════════════════════════════════════════════════════════════════
 *  Häuser-Liste auf der Haus-Detailseite (Block „Unsere Häuser")
 *  Klassen: unterkuenfte-block, unterkuenfte-liste, unterkunft-karte*
 * ════════════════════════════════════════════════════════════════════════════ */

.unterkuenfte-block { margin: 2rem 0; }

.unterkuenfte-block__intro {
  color: var(--color-muted);
  font-size: 1rem;
  margin: 0 0 1.5rem;
  max-width: 60ch;
}

/* Karten-Grid statt ul-Bullets */
.unterkuenfte-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1.5rem;
}

.unterkunft-karte {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s, transform .15s;
}
.unterkunft-karte:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.unterkunft-karte__bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.unterkunft-karte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.unterkunft-karte__bild--platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--color-muted);
  opacity: .55;
  background: var(--color-bg-alt);
}

.unterkunft-karte__inhalt {
  padding: 1.25rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex: 1;
}

.unterkunft-karte__name {
  font-size: 1.15rem;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.25;
}

.unterkunft-karte__fakten {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  font-size: .9rem;
  color: var(--color-muted);
}
.unterkunft-karte__fakten li {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.unterkunft-karte__fakten strong {
  color: var(--color-text);
  font-weight: 600;
}

.unterkunft-karte__kurz {
  margin: 0;
  font-size: .95rem;
  color: var(--color-text);
  line-height: 1.5;
}

.unterkunft-karte__minigalerie {
  list-style: none;
  padding: 0;
  margin: .25rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.unterkunft-karte__minigalerie li {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
}
.unterkunft-karte__minigalerie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Section-Modifier für den Anfrage-Block (Spacing) */
.haus-block-section--anfrage {
  padding: 2.5rem 0;
}

/* ════════════════════════════════════════════════════════════════════════
 * v0.15.0 — Karten-Marker farblich nach Verband
 *
 * Die Pin-Farbe wird im SVG-Fill direkt im JS gesetzt (karte.js und die
 * Inline-Mini-Karte in PortalBlockRenderer::rendereHausAdresseKarte()).
 * Diese CSS-Regeln dienen als optische Konsistenz-Klammer:
 *   - leichter Hover-Lift für alle Verband-Pins
 *   - Popup-Pill-Farben passend zu den Pin-Farben
 *
 * Werte-Konvention: portal_haus.verband ∈
 *   {vds, naturfreunde, himmlische_herbergen}
 * ════════════════════════════════════════════════════════════════════════ */

/* Pin-Modifier — eigentlicher Fill kommt aus dem SVG, hier nur Mikro-UX */
.haus-karte-pin {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
  transition: transform .15s ease-out, filter .15s ease-out;
}
.haus-karte-pin:hover,
.haus-karte-pin:focus {
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35));
}

/* Cluster-Color-Mix: Cluster bleiben Leaflet-Default-Blau — das ist OK,
 * weil Cluster auf hohem Zoom-Out gemischte Verbände abbilden. Erst beim
 * Aufklappen werden die Verband-Farben sichtbar. */

/* ─── Popup-Verband-Pill (kompakt, oben rechts unter dem Logo) ─────────── */
.popup-haus .popup-verband {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: .35rem;
  color: #fff;
  background: #183447; /* Default */
}
.popup-haus .popup-verband--vds                  { background: #2F7D4F; }
.popup-haus .popup-verband--naturfreunde         { background: #BE3A3A; }
.popup-haus .popup-verband--himmlische-herbergen { background: #2D4A77; }

/* Popup-Wrap: leichter Schatten für mehr Tiefe */
.karte-popup-wrap .leaflet-popup-content-wrapper {
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}

/* ════════════════════════════════════════════════════════════════════════
 * v0.16.0 — Verband-Pills als Filter-Links
 *
 * Hero, Karten-Card und Karten-Popup rendern die Verband-Pill jetzt als
 * <a href="/suche?verband=<key>">. Dieser Block definiert das Hover-
 * Verhalten und stellt sicher, dass die a-Variante optisch identisch
 * zur span-Variante ist (kein Underline-Default, keine Farb-Drift).
 *
 * Modifier-Suffix --link wird vom Renderer nur auf die a-Variante
 * gesetzt — span-Pills bleiben unverändert für Häuser ohne klickbaren
 * Filter (Fallback-Pfad).
 * ════════════════════════════════════════════════════════════════════════ */

/* ─── Hero-Pill als Link ─────────────────────────────────────────────── */
.haus-hero--booking .haus-hero__verband--link {
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease-out, transform .15s ease-out;
}
.haus-hero--booking .haus-hero__verband--link:hover,
.haus-hero--booking .haus-hero__verband--link:focus-visible {
  background: #FFFFFF;
  transform: translateY(-1px);
  text-decoration: none;
}
.haus-hero--booking .haus-hero__verband--link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ─── Karten-Card-Pill als Link ──────────────────────────────────────── */
a.haus-karte__verband--link {
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s ease-out, text-decoration-color .15s ease-out;
}
a.haus-karte__verband--link:hover,
a.haus-karte__verband--link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  opacity: .85;
}
a.haus-karte__verband--link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Popup-Pill als Link (auf der Karte) ────────────────────────────── */
.popup-haus a.popup-verband--link {
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease-out, transform .15s ease-out;
}
.popup-haus a.popup-verband--link:hover,
.popup-haus a.popup-verband--link:focus-visible {
  filter: brightness(1.1);
  transform: translateY(-1px);
  text-decoration: none;
}
.popup-haus a.popup-verband--link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
 * v0.17.0 — Verband-Statistik (Stub-Block `verband_stats`)
 *
 * Trust-Element für die Startseite: drei farbige Verband-Karten mit
 * Häuserzahl, plus Gesamtsumme. Jede Karte verlinkt zur gefilterten
 * Suche /suche?verband=<key>.
 *
 * Mobile: 1-Spalten-Stapel.
 * Desktop: 3-Spalten-Grid mit gleicher Höhe.
 *
 * Farbpalette identisch zu Pin- und Pill-Farben (cms-blocks.css ab
 * v0.14.0): #2F7D4F (VDS), #BE3A3A (NF), #2D4A77 (HH).
 * ════════════════════════════════════════════════════════════════════════ */

.verband-stats {
  padding: 3rem 0;
  background: var(--ghos-bg-zart, #FAF8EC);
}
.verband-stats__titel {
  font-size: 1.85rem;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: .25rem 0 .5rem;
  color: var(--ghos-text);
}
.verband-stats__lede {
  font-size: 1.05rem;
  color: var(--ghos-text-zart);
  max-width: 56ch;
  margin: 0 0 2rem;
  line-height: 1.55;
}

/* ─── Grid ──────────────────────────────────────────────────────────── */
.verband-stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0;
  margin: 0 0 1.5rem;
  list-style: none;
}
@media (min-width: 720px) {
  .verband-stats__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

/* ─── Karte ─────────────────────────────────────────────────────────── */
.verband-stats__karte {
  position: relative;
  background: #FFFFFF;
  border-radius: 12px;
  border-top: 4px solid var(--karte-farbe, #183447);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  overflow: hidden;
  transition: transform .18s ease-out, box-shadow .18s ease-out;
}
.verband-stats__karte:hover,
.verband-stats__karte:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .10);
}

/* Verband-spezifische Farbe als CSS-Variable, die der Top-Border und das
 * Icon erben. CSS-Modifier-Klassen kommen aus verband_pill_daten().klasse */
.verband-stats__karte--vds                  { --karte-farbe: #2F7D4F; }
.verband-stats__karte--naturfreunde         { --karte-farbe: #BE3A3A; }
.verband-stats__karte--himmlische-herbergen { --karte-farbe: #2D4A77; }

.verband-stats__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  padding: 1.4rem 1.3rem 1.5rem;
  color: inherit;
  text-decoration: none;
}
.verband-stats__link:focus-visible {
  outline: 2px solid var(--karte-farbe);
  outline-offset: -2px;
  border-radius: 12px;
}

.verband-stats__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--karte-farbe) 12%, transparent);
  color: var(--karte-farbe);
  margin: 0 0 .65rem;
}
/* Fallback für Browser ohne color-mix() (Safari < 16.4) */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .verband-stats__karte--vds                  .verband-stats__icon { background: rgba(47,125,79,0.12); }
  .verband-stats__karte--naturfreunde         .verband-stats__icon { background: rgba(190,58,58,0.12); }
  .verband-stats__karte--himmlische-herbergen .verband-stats__icon { background: rgba(45,74,119,0.12); }
}

.verband-stats__zahl {
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--karte-farbe);
  font-variant-numeric: tabular-nums;
}
.verband-stats__label {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ghos-text-zart);
  margin-top: .1rem;
}
.verband-stats__verband {
  margin-top: .9rem;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ghos-text);
  line-height: 1.3;
}

/* ─── Summen-Zeile ──────────────────────────────────────────────────── */
.verband-stats__summe {
  font-size: 1rem;
  color: var(--ghos-text-zart);
  text-align: center;
  margin: 0 0 1.5rem;
}
.verband-stats__summe strong {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ghos-text);
  font-variant-numeric: tabular-nums;
}

/* ─── Optionaler CTA ────────────────────────────────────────────────── */
.verband-stats__cta {
  text-align: center;
}


/* ════════════════════════════════════════════════════════════════════════
 * v0.18.0 — Live-Anfragen-Stats (Trust-Element)
 *
 * Eigenständiger CMS-Stub-Block `live_anfragen_stats`, der die Anzahl
 * Anfragen der letzten N Tage anzeigt. Single-Card-Layout, große Zahl,
 * subtiler Pulse-Indikator als „live"-Signal.
 *
 * Designprinzipien:
 *   - Single Card, zentriert. Kontrast zur 3-Card-Grid-Optik von
 *     verband-stats — JR kann beide Blocks direkt untereinander
 *     einsetzen, ohne dass es aussieht wie eine Wiederholung.
 *   - Akzent-Farbe ist --ghos-akzent (Petrol), nicht Verbandsfarbe —
 *     bewusst neutral, damit der Block thematisch unabhängig wirkt.
 *   - Pulse-Animation ist subtil, ein langsam atmender Punkt. Bei
 *     prefers-reduced-motion: statisch ohne Animation.
 *   - tabular-nums für die Zahl, damit Live-Updates nicht springen.
 * ════════════════════════════════════════════════════════════════════════ */

.live-anfragen-stats {
  padding: 3rem 0;
  background: var(--ghos-bg, #F7F4ED);
}

.live-anfragen-stats__karte {
  position: relative;
  background: #FFFFFF;
  border-radius: 14px;
  border-top: 4px solid var(--ghos-akzent, #183447);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  padding: 2rem 1.6rem 2.2rem;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}

/* ─── Pulse-Indikator („live"-Signal) ────────────────────────────────── */
.live-anfragen-stats__pulse {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ghos-akzent, #183447) 8%, transparent);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ghos-akzent, #183447);
  margin-bottom: 1.1rem;
}
/* Fallback für Browser ohne color-mix (Safari < 16.4) */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .live-anfragen-stats__pulse {
    background: rgba(24, 52, 71, 0.08);
  }
}

.live-anfragen-stats__pulse-punkt {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ghos-gruen, #2F7D4F);
  box-shadow: 0 0 0 0 var(--ghos-gruen, #2F7D4F);
  animation: live-anfragen-stats-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes live-anfragen-stats-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 125, 79, .55); }
  50%      { box-shadow: 0 0 0 8px rgba(47, 125, 79, 0); }
}

/* A11y: bei reduce-motion keine Animation */
@media (prefers-reduced-motion: reduce) {
  .live-anfragen-stats__pulse-punkt {
    animation: none;
  }
}

.live-anfragen-stats__kicker {
  /* override .ghos-kicker — der globale Kicker hat eigenes Padding,
   * hier ist alles bereits im Pulse-Container ausgerichtet */
  display: inline;
}

/* ─── Zahl + Titel-Zeile ─────────────────────────────────────────────── */
.live-anfragen-stats__zahl-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin-bottom: 1rem;
}

.live-anfragen-stats__zahl {
  font-size: 4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ghos-akzent, #183447);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) {
  .live-anfragen-stats__zahl {
    font-size: 5rem;
  }
}

.live-anfragen-stats__titel {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ghos-text, #17202A);
  line-height: 1.4;
  max-width: 36ch;
}

.live-anfragen-stats__lede {
  font-size: 1rem;
  color: var(--ghos-text-zart, #64717F);
  max-width: 52ch;
  margin: 0 auto 1.4rem;
  line-height: 1.55;
}

.live-anfragen-stats__cta {
  text-align: center;
  margin-top: .25rem;
}