/*
 * Hilpert One v7.58.5 – Globales Spacing-System
 * Ziel: Inhalte dürfen in keinem Modul optisch aneinanderkleben.
 * Die Regeln sind bewusst additiv und greifen vor allem an semantischen
 * Übergängen: Überschrift -> Text, Text -> Aktion, Inhalt -> Aktionsgruppe.
 */
:root{
  --ho-space-0:0;
  --ho-space-1:4px;
  --ho-space-2:8px;
  --ho-space-3:12px;
  --ho-space-4:16px;
  --ho-space-5:20px;
  --ho-space-6:24px;
  --ho-space-8:32px;
  --ho-gap-inline:10px;
  --ho-gap-content:12px;
  --ho-gap-block:16px;
  --ho-gap-section:24px;
}

/* Lesbarkeit: Fließtext darf nicht an der nächsten Zeile / Komponente kleben. */
:where(main,.modal-backdrop,.side-drawer,.login-card) :where(p,.muted,small,[class*="-subline"],[class*="-description"],[class*="-hint"],[class*="-copy"]){
  line-height:1.45;
}

/* Überschrift -> erklärender Text */
:where(main,.modal-backdrop,.side-drawer,.login-card)
:where(h1,h2,h3,h4)
+ :where(p,.muted,[class*="-subline"],[class*="-description"]){
  margin-top:var(--ho-space-2);
}

/* Eyebrow / Bereichslabel -> Überschrift */
:where(main,.modal-backdrop,.side-drawer,.login-card)
.eyebrow + :where(h1,h2,h3,h4){
  margin-top:var(--ho-space-1);
}

/* Text -> direkt folgende Aktion */
:where(main,.modal-backdrop,.side-drawer,.login-card)
:where(p,.muted,[class*="-subline"],[class*="-description"],[class*="-hint"])
+ :where(button,.primary,.secondary,.danger,.success,.ho-button,[class$="-button"]){
  margin-top:var(--ho-space-3);
}

/* Text / Inhalt -> Aktionsgruppe. Funktioniert modulübergreifend mit den
   bereits verwendeten *-actions-Klassen, ohne deren Layoutart zu ändern. */
:where(main,.modal-backdrop,.side-drawer,.login-card)
:where(p,.muted,[class*="-subline"],[class*="-description"],[class*="-hint"],ul,ol)
+ :where([class$="-actions"],[class*="-actions "]){
  margin-top:var(--ho-space-3);
}

/* Aktionsgruppen erhalten einen verlässlichen Innenabstand. gap wirkt nur,
   wenn die Gruppe bereits Flex/Grid ist und verändert Block-Container nicht. */
:where(main,.modal-backdrop,.side-drawer,.login-card)
:where([class$="-actions"],[class*="-actions "]){
  gap:var(--ho-gap-inline);
}

/* Standard-Seitenköpfe, die vertikal aufgebaut sind: nach dem Text genügend
   Luft vor der Aktion. Spezielle horizontale Kopfkomponenten bleiben unberührt. */
.page-heading:not(.document-page-heading):not(.key-page-heading):not(.device-page-heading):not(.customer-page-heading):not(.service-page-heading)
> :where([class$="-actions"],[class*="-actions "]){
  margin-top:var(--ho-space-3);
}

/* Allgemeine Flow-Abstände für Karten/Boxen, wenn Text unmittelbar vor
   Formularen, Toolbars oder Status-/Aktionsblöcken steht. */
:where(.ho-card,.admin-card,.item-card,.info-box,.hero-panel,.page-heading,[class$="-panel"],[class*="-panel "])
> :where(p,.muted,[class*="-description"],[class*="-subline"])
+ :where(form,.form-stack,.toolbar,[class$="-toolbar"],[class$="-actions"],[class*="-actions "]){
  margin-top:var(--ho-space-3);
}

/* Formulare: Labels, Hilfetexte und Fehlermeldungen erhalten Luft zu
   nachfolgenden Bedienelementen, ohne vorhandene Grid-/Flexlayouts umzubauen. */
:where(form,.form-stack,[class$="-form"],[class*="-form "])
:where(.error-text,[class$="-error"],[class*="-error "])
+ :where(button,.primary,.secondary,.danger,.success,.ho-button,[class$="-actions"]){
  margin-top:var(--ho-space-3);
}

/* Optischer Mindestabstand bei typischen Abschnittsübergängen. */
:where(.section-title,.academy-section-head,[class$="-section-head"],[class*="-section-head "]){
  column-gap:var(--ho-gap-block);
  row-gap:var(--ho-space-2);
}

/* Utilities für alle neuen/überarbeiteten Module. */
.ho-flow-xs > * + *{margin-top:var(--ho-space-1)!important}
.ho-flow-sm > * + *{margin-top:var(--ho-space-2)!important}
.ho-flow > * + *{margin-top:var(--ho-space-3)!important}
.ho-flow-lg > * + *{margin-top:var(--ho-space-4)!important}
.ho-section-flow > * + *{margin-top:var(--ho-gap-section)!important}
.ho-cluster{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ho-gap-inline)}
.ho-stack-global{display:flex;flex-direction:column;gap:var(--ho-gap-block)}

@media(max-width:720px){
  :root{
    --ho-gap-inline:8px;
    --ho-gap-content:10px;
    --ho-gap-block:14px;
    --ho-gap-section:20px;
  }
}