/* === BOOTSTRAP 5 OVERRIDES ===
   Globale Anpassungen für bootstrap_salto_2026.
   Manuell editierbar. Kein SCSS.

   HINWEIS: Artikel-spezifische Overrides (font-size 18px, body-font, headings,
   links, buttons, typography-Anwendung) sind in css/article-base.css ausgelagert
   und werden nur auf Artikel-Seiten geladen (Library: bootstrap_salto_2026/article).
   Beim Un-Fencing: article-base.css Inhalt hier wieder einführen.
*/

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Verhindert horizontales Scrollen durch überbreite Elemente (Embeds, Tabellen,
     floatende Elemente). clip statt hidden: erzeugt keinen Scroll-Container
     und bricht position:sticky (Header) nicht. */
  overflow-x: clip;
}

/* Bilder: responsive by default (BS5-Standard img-fluid-Verhalten) */
img {
  max-width: 100%;
  height: auto;
}

/* Icons / kleine SVG-Bilder: Größe beibehalten */
.salto-plus-icon {
  width: .7em;
  height: .7em;
  vertical-align: baseline;
}

/* Sticky-Sidebar-Offset — hält sticky Elemente unterhalb des fixed Headers.
   --header-height wird per JS (sticky-offset.js) gemessen und gesetzt. */
:root {
  --header-height: 80px;
}
.top-extra {
  top: var(--header-height) !important;
}

/* Z-Index: Header liegt über sticky Sidebar-Inhalten, Drupal-Toolbar liegt über allem */
.header-wrapper.sticky-top {
  z-index: 1021 !important;
}
#toolbar-bar,
#toolbar-administration {
  z-index: 1030 !important;
}

/* Admin-Menü (Drupal-Toolbar) nicht von unserer Theme-Typografie oder Asset-Injector-
   Farbregeln stylen lassen. Asset Injector hat 0-2-1 Spezifität mit !important;
   ID-Selektoren sind 1-0-0 → schlagen jeden Klassen-Selektor, auch mit !important. */
#toolbar-bar,
#toolbar-administration,
#toolbar-administration * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: normal;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
}
#toolbar-bar h1, #toolbar-bar h2, #toolbar-bar h3,
#toolbar-bar h4, #toolbar-bar h5, #toolbar-bar h6,
#toolbar-administration h1, #toolbar-administration h2, #toolbar-administration h3,
#toolbar-administration h4, #toolbar-administration h5, #toolbar-administration h6 {
  color: inherit !important;
}

/* Buttons: Versalien, Source Serif 4 Semibold – global */
.btn {
  font-family: var(--salto-font-serif);
  font-weight: var(--fw-semibold);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.btn-lg {
  font-size: var(--fs-btn-md);
  line-height: var(--lh-btn-md);
}
.btn-sm {
  font-size: var(--fs-btn-sm);
  line-height: var(--lh-btn-sm);
}
.btn:not(.btn-lg):not(.btn-sm) {
  font-size: var(--fs-btn-md);
  line-height: var(--lh-btn-md);
}

/* Horizontal Scroller (Views / Teaser-Rows) */
.horizontal-scroller {
  scroll-snap-type: x mandatory;
}
.horizontal-scroller > [class*="col-"] {
  scroll-snap-align: start;
}

/* Border-Style Helpers */
.border-dotted { border-style: dotted !important; }
.border-dashed  { border-style: dashed !important; }

.border-start.border-dotted { border-style: none !important; border-left-style: dotted !important; }
.border-start.border-dashed { border-style: none !important; border-left-style: dashed !important; }
.border-end.border-dotted   { border-style: none !important; border-right-style: dotted !important; }
.border-end.border-dashed   { border-style: none !important; border-right-style: dashed !important; }
.border-top.border-dotted   { border-style: none !important; border-top-style: dotted !important; }
.border-top.border-dashed   { border-style: none !important; border-top-style: dashed !important; }
.border-bottom.border-dotted { border-style: none !important; border-bottom-style: dotted !important; }
.border-bottom.border-dashed { border-style: none !important; border-bottom-style: dashed !important; }

/* Footer */
#block-bootstrap-salto-2026-footer .nav {
  justify-content: flex-end;
}

.footer-social-links {
  padding-right: 1rem;
}

.footer-social-links a {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.footer-social-links .bi {
  font-size: 2rem;
}

/* Kein Padding auf .section (Drupal-Wrapper) — Abstände via innere Grid-Klassen.
   #main hat bereits p-0 im Template.
   main wird NICHT genullt: es ist col-12 in der äußeren Row, Bootstrap-Gutters müssen greifen. */
.section { padding: 0; }


/* ================================================
   RESPONSIVE HEADING-SIZE UTILITIES
   Muster: .h-{size} und .h-{breakpoint}-{size}
   Wirken nur auf font-size, nicht auf Gewicht/Familie.
   Nutzen die --fs-h* Tokens aus typography.css.
   Beispiel: class="h-4 h-md-1" → h4-Größe mobil, h1-Größe ab md.
   ================================================ */

/* Basisklassen (keine Breakpoint-Einschränkung) */
.h-1 { font-size: var(--fs-h1) !important; }
.h-2 { font-size: var(--fs-h2) !important; }
.h-3 { font-size: var(--fs-h3) !important; }
.h-4 { font-size: var(--fs-h4) !important; }
.h-5 { font-size: var(--fs-h5) !important; }
.h-6 { font-size: var(--fs-h6) !important; }

/* sm ≥576px */
@media (min-width: 576px) {
  .h-sm-1 { font-size: var(--fs-h1) !important; }
  .h-sm-2 { font-size: var(--fs-h2) !important; }
  .h-sm-3 { font-size: var(--fs-h3) !important; }
  .h-sm-4 { font-size: var(--fs-h4) !important; }
  .h-sm-5 { font-size: var(--fs-h5) !important; }
  .h-sm-6 { font-size: var(--fs-h6) !important; }
}

/* md ≥768px */
@media (min-width: 768px) {
  .h-md-1 { font-size: var(--fs-h1) !important; }
  .h-md-2 { font-size: var(--fs-h2) !important; }
  .h-md-3 { font-size: var(--fs-h3) !important; }
  .h-md-4 { font-size: var(--fs-h4) !important; }
  .h-md-5 { font-size: var(--fs-h5) !important; }
  .h-md-6 { font-size: var(--fs-h6) !important; }
}

/* lg ≥992px */
@media (min-width: 992px) {
  .h-lg-1 { font-size: var(--fs-h1) !important; }
  .h-lg-2 { font-size: var(--fs-h2) !important; }
  .h-lg-3 { font-size: var(--fs-h3) !important; }
  .h-lg-4 { font-size: var(--fs-h4) !important; }
  .h-lg-5 { font-size: var(--fs-h5) !important; }
  .h-lg-6 { font-size: var(--fs-h6) !important; }
}

/* xl ≥1200px */
@media (min-width: 1200px) {
  .h-xl-1 { font-size: var(--fs-h1) !important; }
  .h-xl-2 { font-size: var(--fs-h2) !important; }
  .h-xl-3 { font-size: var(--fs-h3) !important; }
  .h-xl-4 { font-size: var(--fs-h4) !important; }
  .h-xl-5 { font-size: var(--fs-h5) !important; }
  .h-xl-6 { font-size: var(--fs-h6) !important; }
}

/* xxl ≥1400px */
@media (min-width: 1400px) {
  .h-xxl-1 { font-size: var(--fs-h1) !important; }
  .h-xxl-2 { font-size: var(--fs-h2) !important; }
  .h-xxl-3 { font-size: var(--fs-h3) !important; }
  .h-xxl-4 { font-size: var(--fs-h4) !important; }
  .h-xxl-5 { font-size: var(--fs-h5) !important; }
  .h-xxl-6 { font-size: var(--fs-h6) !important; }
}


/* ================================================
   HYPHENATION UTILITIES
   Muster: .hyphens-{value} und .hyphens-{breakpoint}-{value}
   Werte: auto | none | manual
   Hinweis: hyphens:auto benötigt das lang-Attribut am <html>-Element.
   ================================================ */

.hyphens-auto   { hyphens: auto; }
.hyphens-none   { hyphens: none; }
.hyphens-manual { hyphens: manual; }

@media (min-width: 576px) {
  .hyphens-sm-auto   { hyphens: auto; }
  .hyphens-sm-none   { hyphens: none; }
  .hyphens-sm-manual { hyphens: manual; }
}
@media (min-width: 768px) {
  .hyphens-md-auto   { hyphens: auto; }
  .hyphens-md-none   { hyphens: none; }
  .hyphens-md-manual { hyphens: manual; }
}
@media (min-width: 992px) {
  .hyphens-lg-auto   { hyphens: auto; }
  .hyphens-lg-none   { hyphens: none; }
  .hyphens-lg-manual { hyphens: manual; }
}
@media (min-width: 1200px) {
  .hyphens-xl-auto   { hyphens: auto; }
  .hyphens-xl-none   { hyphens: none; }
  .hyphens-xl-manual { hyphens: manual; }
}
@media (min-width: 1400px) {
  .hyphens-xxl-auto   { hyphens: auto; }
  .hyphens-xxl-none   { hyphens: none; }
  .hyphens-xxl-manual { hyphens: manual; }
}


/* Layout Builder: Blöcke in LB-Regionen werden gestapelt — h-100 würde die gesamte
   Regionshöhe beanspruchen. Hier auf auto setzen; interne h-100 (z.B. in Collection-
   Rows / teaser-view-slot) bleiben unberührt, weil sie kein direktes Kind sind. */
.layout__region > .block {
  height: auto !important;
}

/* fw-black, ls-1…ls-5 sind in design-tokens.css (global verfügbar) */