/* === PARAGRAPHS ===
   Abstände, Infobox, floating Elemente.
   Farben kommen immer via --role-* Tokens (scheme-{role} am Artikel-Wrapper).
*/

/* Letztes <p> in einem Paragraph: kein zusätzlicher Abstand nach unten
   (der äußere mb-4 der .paragraph regelt den Abstand zum nächsten Block). */
.paragraph p:last-child {
  margin-bottom: 0;
}
/* Infoboxen haben Bild + Body — p:last-child soll normalen Abstand behalten */
.paragraph--type--infobox p:last-child,
.floating-infobox-end p:last-child,
.floating-infobox-start p:last-child {
  margin-bottom: 1rem;
}

/* Infobox-Titel: einheitlich .h5 (siehe paragraph--infobox.html.twig
   und paragraph--text_infobox.html.twig) */
.paragraph--type--infobox h2.h5,
.paragraph--type--text-infobox h2.h5,
.floating-infobox-end h2.h5 {
  margin-bottom: .5rem;
}



/* ================================================
   INFOBOX (paragraph--infobox)
   Hintergrundfarbe = Rollenfarbe, volle Spaltenbreite.
   Kein mobile Full-Bleed-Hack nötig: Paragraph-Columns haben px-0.
   ================================================ */
.paragraph--type--infobox {
  background-color: var(--role-headings);
  color: var(--text-on-dark);
}
/* BG = var(--role-headings) → Text muss immer auf Dunkel bleiben.
   Asset Injector "community_highlight_fixes" hat 0-2-1 (Headings) und 0-3-1 (Links)
   mit !important und wird NACH dem Theme-CSS geladen (delta=18-Aggregate).
   Wir müssen diese Spezifität via compound .paragraph.paragraph--type--infobox
   übertreffen: 0-3-1 für Headings, 0-4-1 für Links. */
.node--type-article .paragraph.paragraph--type--infobox h1,
.node--type-article .paragraph.paragraph--type--infobox h2,
.node--type-article .paragraph.paragraph--type--infobox h3,
.node--type-article .paragraph.paragraph--type--infobox h4,
.node--type-article .paragraph.paragraph--type--infobox h5,
.node--type-article .paragraph.paragraph--type--infobox h6,
.node--type-article .paragraph.paragraph--type--infobox p,
.node--type-article .paragraph.paragraph--type--infobox a:not(.btn),
.node--type-article .paragraph.paragraph--type--infobox .salto-caption span {
  color: var(--text-on-dark) !important;
}
.node--type-article .paragraph.paragraph--type--infobox a:not(.glightbox):hover { opacity: .8; }
/* Bild in Infobox: kein Aufhellen beim Hover, egal von welcher CSS-Quelle */
.paragraph--type--infobox a.glightbox,
.paragraph--type--infobox a.glightbox:hover,
.paragraph--type--infobox a.glightbox:focus,
.floating-infobox-end a.glightbox,
.floating-infobox-end a.glightbox:hover,
.floating-infobox-start a.glightbox,
.floating-infobox-start a.glightbox:hover { opacity: 1 !important; }



/* ================================================
   FLOATING INFOBOX (paragraph--text-infobox)
   Schwimmt rechts neben dem Text; auf Mobile full-width.
   ================================================ */
.floating-infobox-end,
.floating-infobox-start {
  background-color: var(--role-headings);
  color: var(--text-on-dark);
  width: 50%;
}
/* Analog zu paragraph--type--infobox: compound selector schlägt Asset Injector.
   Floating: 0-4-1 für Headings, 0-5-1 für Links. */
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-end h1,
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-end h2,
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-end h3,
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-end h4,
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-end h5,
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-end h6,
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-end p,
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-end a:not(.btn),
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-end .salto-caption span,
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-start h1,
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-start h2,
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-start h3,
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-start h4,
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-start h5,
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-start h6,
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-start p,
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-start a:not(.btn),
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-start .salto-caption span {
  color: var(--text-on-dark) !important;
}
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-end a:not(.glightbox):hover,
.node--type-article .paragraph.paragraph--type--text-infobox .floating-infobox-start a:not(.glightbox):hover { opacity: .8; }

@media (max-width: 767.98px) {
  .floating-infobox-end,
  .floating-infobox-start {
    float: none !important;
    /* Breakout: Eltern-p-3 (1rem je Seite) überwinden → Rand-zu-Rand */
    width: calc(100% + 2rem);
    margin-left: -1rem !important;  /* überschreibt ms-3 + Elternpadding links */
    margin-right: -1rem !important; /* Elternpadding rechts */
  }
}


/* ================================================
   FLOATING BILDER (image-text-portrait / landscape)
   Definierte Breite damit img width:100% korrekt greift;
   auf Mobile kein Float, volle Breite.
   Bei 992–1200px sind 40% zu eng (kleines Wort-Wrap-Fenster) → volle Breite.
   ================================================ */
.floating-image-start,
.floating-image-end {
  width: 40%;
  position: relative;
}

@media (max-width: 767px) {
  .floating-image-start,
  .floating-image-end {
    float: none !important;
    width: 100%;
    margin-inline: 0 !important;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .floating-image-start,
  .floating-image-end {
    float: none !important;
    width: 100%;
    margin-inline: 0 !important;
  }
}


/* Alle Medien-Figures (Paragraphs): Bild immer volle Containerbreite. */
.salto-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* DOCUMENT: Formatter-Output enthält img ohne w-100 — hier erzwingen. */
.paragraph--type--document img {
  width: 100%;
  height: auto;
  display: block;
}

/* DOCUMENT (paragraph--document): Markup wird direkt im Template gebaut
   (paragraph--document.html.twig), img hat dort bereits class="w-100".
   HINWEIS: Drupals auto-generierte PDF-Vorschau ist nur 180×180px (Quelldatei) —
   volle Breite hilft gegen "zu klein", behebt aber keine Bildschärfe/Auflösung;
   das wäre nur über die PDF-Thumbnail-Generierung (Backend/Modul) lösbar.

   Hover-Verhalten: Vorschaubild bleibt voll opak (kein opacity-Dimmen vom
   schemes.css-Link-Hover-Reset). Nur das PDF-Icon wird voll opak (wie Zoom-Icons). */
[class*="scheme-"] .paragraph--type--document a:hover,
[class*="scheme-"] .paragraph--type--document a:focus {
  opacity: 1 !important;
}
.paragraph--type--document:hover .btn.zoom-icon {
  background: color-mix(in srgb, white 100%, transparent);
}


/* ================================================
   GLIGHTBOX: Hintergrund schwarz, Text weiß.
   "clean"-Skin hat background:#fff und color:#000 auf der Description —
   beides überschreiben, damit Caption auf schwarzem Overlay lesbar ist.
   ================================================ */
.glightbox-container {
  background: #000;
}
.glightbox-clean .gslide-description {
  background: #000 !important;
}
.glightbox-clean .gslide-title,
.glightbox-clean .gslide-desc,
.glightbox-clean .gslide-desc p,
.gslide-title,
.gslide-description,
.gslide-desc,
.gslide-description p {
  color: #fff !important;
}
/* Leerzeichen zwischen Caption und Copyright — nur wenn Caption-Span vorausgeht.
   + -Selektor greift in figcaptions UND im Glightbox-Overlay (CSS wirkt auf gerenderted HTML). */
.salto-caption-text + .salto-caption-copyright::before,
.salto-caption-pretext + .salto-caption-copyright::before {
  content: "\0020";
}


/* Captions in Glightbox: Farbe weiß, font-family via .font-salto-* Utility-Klassen im Template */
.glightbox-container .salto-caption-text {
  font-style: italic !important;
  color: #fff !important;
}
.glightbox-container .salto-caption-pretext {
  font-style: normal !important;
  color: #fff !important;
  opacity: 1 !important;
}
.glightbox-container .salto-caption-copyright {
  font-style: normal !important;
  color: #fff !important;
  opacity: 1 !important;
}


/* more_articles: keine Unterstreichung, S+-Icon etwas größer als im Artikel-Titel */
.paragraph--type--more-articles a:not(.btn) { text-decoration: none; }
.paragraph--type--more-articles .salto-plus-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}


/* ================================================
   CLEARFIX: Float-Elemente werden von Paragraphen
   korrekt umschlossen.
   ================================================ */
.paragraph--type--text-infobox,
.paragraph--type--image-text-portrait,
.paragraph--type--image-text-landscape,
.paragraph--type--text-image-portrait,
.paragraph--type--text-image-landscape {
  overflow: hidden;
}


/* === LIVETICKER ===
   HR-Separator: zentriert, 100px, Farbe aus aktiver Scheme-Rolle. */
.view-liveticker hr {
  width: 100px;
  margin: auto;
  margin-bottom: 1rem;
  border-color: var(--role-headings);
}