/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — components/divider.css
   Version: 0.1.1 · Build: 2026-09-13 · Benötigt: tokens.css, base.css
   VENDORED — READ-ONLY.
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-divider {
  border: 0;
  border-top: 1px solid var(--bh-border-subtle);
  margin: var(--bh-space-4) 0;
}
/* IN EINEM BEHÄLTER, DER SCHON TRENNT, hat die Linie keinen eigenen Rand.
   Sonst steht sie doppelt getrennt da: 16px gap plus 16px Rand, oben wie
   unten (DESIGN.md §0c). Belegt in admin.php, zweimal in einem .bh-form.

   Warum eine Liste und kein allgemeiner Selektor: CSS kann nicht fragen,
   ob der Elternteil einen gap setzt. Die Liste nennt deshalb die
   DS-Behälter, die es tun — wer einen eigenen baut, nimmt margin-block: 0
   selbst dazu. Das ist die ehrlichere Lücke: sichtbar statt stillschweigend.

   :where() hält die Spezifität bei null, damit --tight und --loose
   weiterhin gewinnen, wenn jemand sie ausdrücklich setzt. */
:where(.bh-form, .bh-formpage, .bh-stack, .bh-list, .bh-section, .bh-overview,
       .bh-props, .bh-tabs__panel) > .bh-divider {
  margin-block: 0;
}

.bh-divider--tight { margin: var(--bh-space-2) 0; }
.bh-divider--loose { margin: var(--bh-space-5) 0; }

.bh-divider--vertical {
  border-top: 0;
  border-left: 1px solid var(--bh-border-subtle);
  margin: 0 var(--bh-space-3);
  align-self: stretch;
  min-height: var(--bh-space-4);
}

/* Beschrifteter Trenner — trägt den Datumstrenner im Verlauf des
   Detail-Patterns. Gedämpft und zentriert. */
.bh-divider--labeled {
  display: flex;
  align-items: center;
  gap: var(--bh-space-3);
  border: 0;
  color: var(--bh-text-muted);
  font-size: var(--bh-text-xs);
  font-weight: var(--bh-weight-medium);
}
.bh-divider--labeled::before,
.bh-divider--labeled::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--bh-border-subtle);
}