/* === ARTIKEL-SEITEN BASIS-OVERRIDES ===
   Diese Datei wird NUR auf Artikel-Vollansichten geladen
   (via bootstrap_salto_2026/article library, angehängt in node--article--full.html.twig).

   TODO (Un-Fencing): Wenn alle Seitentypen refactored sind:
     1. Diese Datei in bootstrap-overrides.css / typography.css zurückführen
     2. article-Library in libraries.yml in global-Library zusammenführen
     3. {{ attach_library('bootstrap_salto_2026/article') }} aus node--article--full.html.twig entfernen
     4. Diese Datei löschen
*/


/* === GLOBALE BASIS: 1rem = 18px ===
   16px (Browser-Default) × 112.5% = 18px.
   Macht BS5-Spacer (p-*, m-*, gap-*, Grid-Gutter) und fs-1...fs-6
   exakt kompatibel mit Figmas 9px-Raster (9/18/27/54px).
   %-Wert statt fixer px, damit Browser-Zoom/A11y-Einstellungen
   weiter proportional skalieren. */
html {
  font-size: 112.5%; /* 16px * 1.125 = 18px */
}

/* Body-Schrift: Source Sans 3 (überschrieben durch typography.css body-Regel → Source Serif 4) */
body {
  font-family: var(--salto-font-sans);
}

/* Headings: immer fett */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
}

/* Globale Link-Styles */
a {
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover,
a:focus {
  text-decoration: none;
}

/* Buttons: Pill-Form + 2px Border */
.btn {
  border-width: 2px !important;
  border-radius: 999px !important;
}

/* Zoom-Icon (Vergrößern-Overlay auf Bildern): 50% weißer Kreis, bei Hover voll weiß */
.btn.zoom-icon {
  background: color-mix(in srgb, white 50%, transparent);
  color: #212529;
  box-shadow: 0 0 15px rgba(0,0,0,.1);
  border: none !important;
}
.glightbox:hover .btn.zoom-icon,
.btn.zoom-icon:hover {
  background: color-mix(in srgb, white 100%, transparent);
  color: #212529;
}

/* Anzahl-Badge Fotogalerie: salto-blau, weißer Text, kein Hover */
.paragraph--type--media-gallery .btn.number-items {
  background: var(--salto-base);
  color: #fff;
  pointer-events: none;
  border: none !important;
}

/* Runde Buttons: quadratisches Padding für echten Kreis */
.btn.rounded-circle {
  padding: var(--bs-btn-padding-y);
}
.btn.rounded-circle > * {
  width: 1rem;
  height: 1rem;
  display: block;
}


/* ================================================
   LINK UNDERLINES
   Prinzip: globaler Reset auf none (oben), gezielte Underlines
   dort wo inhaltlich sinnvoll.
   ================================================ */

/* Paragraphs / Fließtext: Links unterstrichen */
.text-formatted a,
.field--type-text-long a { text-decoration: underline; }

/* Headings im Fließtext nie unterstrichen */
.text-formatted h1 a, .text-formatted h2 a, .text-formatted h3 a,
.text-formatted h4 a, .text-formatted h5 a, .text-formatted h6 a { text-decoration: none; }

/* Autor-Links (Byline + Kommentare) immer unterstrichen */
.byline a,
.comment-author a { text-decoration: underline; }

/* Pretitle (Ressort-/Dossier-Link) unterstrichen */
.pretitle a { text-decoration: underline; }

/* Footer-Links unterstrichen */
.site-footer a { text-decoration: underline; }

/* Buttons niemals unterstrichen */
.btn,
a.btn { text-decoration: none !important; }


/* ================================================
   TYPOGRAPHY: Anwendung auf HTML-Elemente
   (Tokens/Variablen kommen aus typography.css, die global geladen wird)
   ================================================ */

/* Basis-Schrift: Source Serif 4 für Artikel-Fließtext */
body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}

/* Headings: Source Sans 3, fett */
h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-bold);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-bold);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  font-weight: var(--fw-bold);
}
h6, .h6 {
  font-family: var(--font-sans);
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
  font-weight: var(--fw-bold);
}

/* Lead / Vorspann */
.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-regular);
}

/* Dachzeile / Pretitle */
.pretitle {
  font-family: var(--font-serif);
  line-height: var(--lh-pretitle);
}

/* Blockquote / Zitat */
blockquote, .blockquote {
  font-family: var(--font-serif);
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  font-weight: var(--fw-semibold);
  font-style: italic;
  margin: 3rem;
}

/* UI-Text, Metadaten */
.text-small, small, .small {
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.semi-small {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  line-height: var(--lh-medium);
}

/* Bild-/Video-/Audiounterschriften */
figcaption {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* Buttons: Typografie → global in bootstrap-overrides.css */

/* fs-1...fs-6: fixiert auf unsere Heading-Tokens (BS5 liefert fs-1...fs-4 fluid) */
.fs-1 { font-size: var(--fs-h1) !important; }
.fs-2 { font-size: var(--fs-h2) !important; }
.fs-3 { font-size: var(--fs-h3) !important; }
.fs-4 { font-size: var(--fs-h4) !important; }
.fs-5 { font-size: var(--fs-h5) !important; }
.fs-6 { font-size: var(--fs-h6) !important; }


/* ================================================
   PODCAST-PLAYER
   ================================================ */

.podcast-player .plyr--full-ui.plyr--audio {
  border-radius: 9999px;
}
.podcast-player .plyr--full-ui.plyr--audio .plyr__controls {
  border-radius: inherit;
  padding-left: 0 !important;
  padding-right: 0 !important;
}