/* === SALTO SCHEMES ===
   .scheme-{article-role} Klassen für bootstrap_salto_2026.
   Referenziert ausschließlich Tokens aus design-tokens.css (und damit colors.css).

   Verwendung im Template:
     <div class="scheme-editor">…</div>           → regular
     <div class="scheme-editor scheme-reverse-1">  → reverse-1
     <div class="scheme-editor scheme-reverse-2">  → reverse-2

   Verschachtelung:
     <div class="scheme-editor">
       <aside class="scheme-community">…</aside>   → lokales Override
     </div>
*/

/* ==========================
   Cascade-Variablen (aktive Rolle)
   Default-Werte = editor/salto
   ========================== */
:root {
  --role-headings:   var(--editor-regular-headings);
  --role-background: var(--editor-regular-background);
  --role-text:       var(--editor-regular-text);

  --role-btn-hover-bg:  var(--editor-hover-bg);
  --role-btn-active-bg: var(--editor-active-bg);
}

/* ==========================
   Scheme-Scope: Base-Styles
   ========================== */
[class*="scheme-"] {
  background-color: var(--role-background);
  color: var(--role-text);
}

[class*="scheme-"] a:not(.btn) {
  color: var(--role-headings);
  text-decoration: underline;
}
[class*="scheme-"] a:not(.btn):not(.glightbox):hover,
[class*="scheme-"] a:not(.btn):not(.glightbox):focus {
  color: var(--role-headings);
  opacity: 0.85;
}

[class*="scheme-"] h1,
[class*="scheme-"] h2,
[class*="scheme-"] h3,
[class*="scheme-"] h4,
[class*="scheme-"] h5,
[class*="scheme-"] h6,
[class*="scheme-"] .h1,
[class*="scheme-"] .h2,
[class*="scheme-"] .h3,
[class*="scheme-"] .h4,
[class*="scheme-"] .h5,
[class*="scheme-"] .h6,
[class*="scheme-"] blockquote,
[class*="scheme-"] .blockquote {
  color: var(--role-headings);
}

/* Bootstrap Buttons im Scheme */
[class*="scheme-"] .btn-primary {
  --bs-btn-bg:                 var(--role-headings);
  --bs-btn-border-color:       var(--role-headings);
  --bs-btn-color:              var(--text-on-dark);
  --bs-btn-hover-bg:           var(--role-btn-hover-bg);
  --bs-btn-hover-border-color: var(--role-btn-hover-bg);
  --bs-btn-active-bg:          var(--role-btn-active-bg);
  --bs-btn-active-border-color: var(--role-btn-active-bg);
}

[class*="scheme-"] .btn-role-primary {
  --bs-btn-bg:                  var(--role-headings);
  --bs-btn-border-color:        var(--role-headings);
  --bs-btn-color:               var(--text-on-dark);
  --bs-btn-hover-color:         var(--text-on-dark);
  --bs-btn-active-color:        var(--text-on-dark);
  --_btn-accent:                var(--role-headings);
  --bs-btn-hover-bg:            color-mix(in srgb, var(--_btn-accent) 88%, #000 12%);
  --bs-btn-hover-border-color:  color-mix(in srgb, var(--_btn-accent) 88%, #000 12%);
  --bs-btn-active-bg:           color-mix(in srgb, var(--_btn-accent) 80%, #000 20%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--_btn-accent) 80%, #000 20%);
}

[class*="scheme-"] .btn-outline-role {
  --bs-btn-bg:                  transparent;
  --bs-btn-border-color:        var(--role-headings);
  --bs-btn-color:               var(--role-headings);
  --bs-btn-hover-bg:            var(--role-headings);
  --bs-btn-hover-border-color:  var(--role-headings);
  --bs-btn-hover-color:         var(--text-on-dark);
  --bs-btn-active-bg:           color-mix(in srgb, var(--role-headings) 88%, #000 12%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--role-headings) 88%, #000 12%);
  --bs-btn-active-color:        var(--text-on-dark);
}

/* Plyr-Player im Scheme */
[class*="scheme-"] .plyr--full-ui {
  --plyr-color-main:                  var(--role-headings);
  --plyr-range-fill-background:       var(--role-headings);
  --plyr-range-thumb-background:      var(--role-headings);
  --plyr-range-thumb-shadow:          none;
  --plyr-audio-controls-background:   transparent;
  --plyr-tooltip-background:          var(--role-headings);
  --plyr-tooltip-color:               var(--text-on-dark);
}

/* Alle Control-Buttons (mute, settings, play, …) in Rollenfarbe */
[class*="scheme-"] .plyr__control {
  color: var(--role-headings);
  background: transparent;
}

/* Play-Button: 40px Kreis, Rollenfarbe, weißes Icon */
[class*="scheme-"] .plyr__control[data-plyr="play"] {
  background-color: var(--role-headings);
  color: var(--text-on-dark);
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
/* Reverse-Kontext (Audio-Paragraph invertiert): weißer Kreis, Rollenfarbe-Icon.
   --role-accent bleibt in allen reverse-Varianten die Original-Rollenfarbe. */
[class*="scheme-"].scheme-reverse-1 .plyr__control[data-plyr="play"],
[class*="scheme-"] .scheme-reverse-1 .plyr__control[data-plyr="play"] {
  background-color: var(--text-on-dark);
  color: var(--role-accent);
}

/* Play-Dreieck optisch im Kreis zentrieren (icon--not-pressed = Stopp-Zustand) */
[class*="scheme-"] .plyr__control[data-plyr="play"] svg.icon--not-pressed {
  position: relative;
  left: 6px;
}
/* Pause-Icon: weniger Versatz als Dreieck (icon--pressed = Lauf-Zustand) */
[class*="scheme-"] .plyr__control[data-plyr="play"] svg.icon--pressed {
  position: relative;
  left: 4px;
}

/* Progress-Container: Abstand vom Play-Button */
[class*="scheme-"] .plyr__controls__item.plyr__progress__container {
  padding-left: 1rem !important;
}

/* Hover/Focus: Scheme-konforme Abdunklung (wie btn-primary) */
[class*="scheme-"] .plyr__control:hover,
[class*="scheme-"] .plyr__control:focus {
  background-color: var(--role-btn-hover-bg);
  color: var(--text-on-dark);
}

[class*="scheme-"] .plyr__time {
  color: var(--role-headings);
  font-family: var(--salto-font-sans);
}

[class*="scheme-"] .plyr__tooltip {
  background-color: var(--role-headings);
  color: var(--text-on-dark);
  font-family: var(--salto-font-sans);
}
[class*="scheme-"].scheme-reverse-1 .plyr__tooltip,
[class*="scheme-"] .scheme-reverse-1 .plyr__tooltip {
  background-color: var(--text-on-dark);
  color: var(--role-accent);
}

/* Lock-Badge: Rollenfarbe, rechts über Play-Button */
[class*="scheme-"] .player-lock-badge {
  background-color: var(--role-headings);
  color: var(--text-on-dark);
}


/* Utility: heading/text color follow the active scheme */
[class*="scheme-"] .heading   { color: var(--role-headings); }
[class*="scheme-"] a.heading  { color: var(--role-headings); text-decoration: none; }
[class*="scheme-"] a.heading:hover,
[class*="scheme-"] a.heading:focus { opacity: 0.85; }
[class*="scheme-"] .text      { color: var(--role-text); }

/* HR: Farbe aus dem aktiven Scheme */
[class*="scheme-"] hr {
  color: var(--role-headings);   /* BS5: border-top-color via color */
  opacity: .25;
}
[class*="scheme-"] hr.salto-endline-short,
[class*="scheme-"] hr.salto-endline-long {
  height: 2px;
  border: 0;
  opacity: 1;
  background-color: var(--role-headings);
}
[class*="scheme-"] hr.salto-endline-short { width: 60px; }
[class*="scheme-"] hr.salto-endline-long  { width: 180px; }


/* ==========================
   --role-accent: stabiler Akzent-Token — ändert sich NICHT in reverse-Varianten.
   Damit können Elemente innerhalb eines reversed Scheme gezielt die Rollenfarbe
   als Hintergrund oder Text nutzen (z.B. Buttons in der weißen Paywall-Karte).
   ========================== */
.scheme-editor,
.scheme-editor.scheme-reverse-1,
.scheme-editor.scheme-reverse-2,
.scheme-editor.scheme-reverse-3 { --role-accent: var(--editor-regular-headings); }

.scheme-columnist,
.scheme-columnist.scheme-reverse-1,
.scheme-columnist.scheme-reverse-2,
.scheme-columnist.scheme-reverse-3 { --role-accent: var(--columnist-regular-headings); }

.scheme-community,
.scheme-community.scheme-reverse-1,
.scheme-community.scheme-reverse-2,
.scheme-community.scheme-reverse-3 { --role-accent: var(--community-article-regular-headings); }

.scheme-community-salto-selection,
.scheme-community-salto-selection.scheme-reverse-1,
.scheme-community-salto-selection.scheme-reverse-2,
.scheme-community-salto-selection.scheme-reverse-3 { --role-accent: var(--community-salto-selection-regular-headings); }

.scheme-external,
.scheme-external.scheme-reverse-1,
.scheme-external.scheme-reverse-2,
.scheme-external.scheme-reverse-3 { --role-accent: var(--external-regular-headings); }

.scheme-partner-content,
.scheme-partner-content.scheme-reverse-1,
.scheme-partner-content.scheme-reverse-2,
.scheme-partner-content.scheme-reverse-3 { --role-accent: var(--partner-content-regular-headings); }

.scheme-partner-plus-content,
.scheme-partner-plus-content.scheme-reverse-1,
.scheme-partner-plus-content.scheme-reverse-2,
.scheme-partner-plus-content.scheme-reverse-3 { --role-accent: var(--partner-plus-content-regular-headings); }

.scheme-advertorial,
.scheme-advertorial.scheme-reverse-1,
.scheme-advertorial.scheme-reverse-2,
.scheme-advertorial.scheme-reverse-3 { --role-accent: var(--advertorial-regular-headings); }


/* ==========================
   Utility-Klassen: gezieltes Farb-Override im Scheme-Kontext
   ========================== */
[class*="scheme-"] .text-role          { color: var(--role-text)       !important; }
[class*="scheme-"] .text-role-headings { color: var(--role-headings)    !important; }
[class*="scheme-"] .text-role-accent   { color: var(--role-accent)      !important; }
[class*="scheme-"] .text-on-dark       { color: var(--text-on-dark)     !important; }

[class*="scheme-"] .bg-role            { background-color: var(--role-background) !important; }
[class*="scheme-"] .bg-role-accent     { background-color: var(--role-accent) !important; color: var(--text-on-dark) !important; }
[class*="scheme-"] .bg-transparent-scheme { background-color: transparent !important; }

/* Auf dem Scheme-Element selbst: Hintergrundfarbe des Schemes neutralisieren */
[class*="scheme-"].no-scheme-bg { background-color: transparent !important; }

[class*="scheme-"] .border-role-accent { border-color: var(--role-accent) !important; }
[class*="scheme-"] .border-role-headings { border-color: var(--role-headings) !important; }


/* ==========================
   EDITOR
   ========================== */
.scheme-editor {
  --role-headings:   var(--editor-regular-headings);
  --role-background: var(--editor-regular-background);
  --role-text:       var(--editor-regular-text);
  --role-btn-hover-bg:  var(--editor-hover-bg);
  --role-btn-active-bg: var(--editor-active-bg);
}
.scheme-editor.scheme-light {
  --role-headings:   var(--editor-light-headings);
  --role-background: var(--editor-light-background);
  --role-text:       var(--editor-light-text);
}
.scheme-editor.scheme-medium {
  --role-headings:   var(--editor-medium-headings);
  --role-background: var(--editor-medium-background);
  --role-text:       var(--editor-medium-text);
}
.scheme-editor.scheme-reverse-1 {
  --role-headings:   var(--editor-reverse-1-headings);
  --role-background: var(--editor-reverse-1-background);
  --role-text:       var(--editor-reverse-1-text);
}
.scheme-editor.scheme-reverse-2 {
  --role-headings:   var(--editor-reverse-2-headings);
  --role-background: var(--editor-reverse-2-background);
  --role-text:       var(--editor-reverse-2-text);
}
.scheme-editor.scheme-reverse-3 {
  --role-headings:   var(--editor-reverse-3-headings);
  --role-background: var(--editor-reverse-3-background);
  --role-text:       var(--editor-reverse-3-text);
}


/* ==========================
   COLUMNIST
   ========================== */
.scheme-columnist {
  --role-headings:   var(--columnist-regular-headings);
  --role-background: var(--columnist-regular-background);
  --role-text:       var(--columnist-regular-text);
  --role-btn-hover-bg:  var(--columnist-hover-bg);
  --role-btn-active-bg: var(--columnist-active-bg);
}
.scheme-columnist.scheme-light {
  --role-headings:   var(--columnist-light-headings);
  --role-background: var(--columnist-light-background);
  --role-text:       var(--columnist-light-text);
}
.scheme-columnist.scheme-medium {
  --role-headings:   var(--columnist-medium-headings);
  --role-background: var(--columnist-medium-background);
  --role-text:       var(--columnist-medium-text);
}
.scheme-columnist.scheme-reverse-1 {
  --role-headings:   var(--columnist-reverse-1-headings);
  --role-background: var(--columnist-reverse-1-background);
  --role-text:       var(--columnist-reverse-1-text);
}
.scheme-columnist.scheme-reverse-2 {
  --role-headings:   var(--columnist-reverse-2-headings);
  --role-background: var(--columnist-reverse-2-background);
  --role-text:       var(--columnist-reverse-2-text);
}
.scheme-columnist.scheme-reverse-3 {
  --role-headings:   var(--columnist-reverse-3-headings);
  --role-background: var(--columnist-reverse-3-background);
  --role-text:       var(--columnist-reverse-3-text);
}


/* ==========================
   COMMUNITY
   ========================== */
.scheme-community {
  --role-headings:   var(--community-article-regular-headings);
  --role-background: var(--community-article-regular-background);
  --role-text:       var(--community-article-regular-text);
  --role-btn-hover-bg:  var(--community-article-hover-bg);
  --role-btn-active-bg: var(--community-article-active-bg);
}
.scheme-community.scheme-light {
  --role-headings:   var(--community-article-light-headings);
  --role-background: var(--community-article-light-background);
  --role-text:       var(--community-article-light-text);
}
.scheme-community.scheme-medium {
  --role-headings:   var(--community-article-medium-headings);
  --role-background: var(--community-article-medium-background);
  --role-text:       var(--community-article-medium-text);
}
.scheme-community.scheme-reverse-1 {
  --role-headings:   var(--community-article-reverse-1-headings);
  --role-background: var(--community-article-reverse-1-background);
  --role-text:       var(--community-article-reverse-1-text);
}
.scheme-community.scheme-reverse-2 {
  --role-headings:   var(--community-article-reverse-2-headings);
  --role-background: var(--community-article-reverse-2-background);
  --role-text:       var(--community-article-reverse-2-text);
}
.scheme-community.scheme-reverse-3 {
  --role-headings:   var(--community-article-reverse-3-headings);
  --role-background: var(--community-article-reverse-3-background);
  --role-text:       var(--community-article-reverse-3-text);
}


/* ==========================
   COMMUNITY-SALTO-SELECTION (= Community-Grün, identisch mit community)
   ========================== */
.scheme-community-salto-selection {
  --role-headings:   var(--community-salto-selection-regular-headings);
  --role-background: var(--community-salto-selection-regular-background);
  --role-text:       var(--community-salto-selection-regular-text);
  --role-btn-hover-bg:  var(--community-salto-selection-hover-bg);
  --role-btn-active-bg: var(--community-salto-selection-active-bg);
}
.scheme-community-salto-selection.scheme-light {
  --role-headings:   var(--community-salto-selection-light-headings);
  --role-background: var(--community-salto-selection-light-background);
  --role-text:       var(--community-salto-selection-light-text);
}
.scheme-community-salto-selection.scheme-medium {
  --role-headings:   var(--community-salto-selection-medium-headings);
  --role-background: var(--community-salto-selection-medium-background);
  --role-text:       var(--community-salto-selection-medium-text);
}
.scheme-community-salto-selection.scheme-reverse-1 {
  --role-headings:   var(--community-salto-selection-reverse-1-headings);
  --role-background: var(--community-salto-selection-reverse-1-background);
  --role-text:       var(--community-salto-selection-reverse-1-text);
}
.scheme-community-salto-selection.scheme-reverse-2 {
  --role-headings:   var(--community-salto-selection-reverse-2-headings);
  --role-background: var(--community-salto-selection-reverse-2-background);
  --role-text:       var(--community-salto-selection-reverse-2-text);
}
.scheme-community-salto-selection.scheme-reverse-3 {
  --role-headings:   var(--community-salto-selection-reverse-3-headings);
  --role-background: var(--community-salto-selection-reverse-3-background);
  --role-text:       var(--community-salto-selection-reverse-3-text);
}


/* ==========================
   EXTERNAL
   ========================== */
.scheme-external {
  --role-headings:   var(--external-regular-headings);
  --role-background: var(--external-regular-background);
  --role-text:       var(--external-regular-text);
  --role-btn-hover-bg:  var(--external-hover-bg);
  --role-btn-active-bg: var(--external-active-bg);
}
.scheme-external.scheme-light {
  --role-headings:   var(--external-light-headings);
  --role-background: var(--external-light-background);
  --role-text:       var(--external-light-text);
}
.scheme-external.scheme-medium {
  --role-headings:   var(--external-medium-headings);
  --role-background: var(--external-medium-background);
  --role-text:       var(--external-medium-text);
}
.scheme-external.scheme-reverse-1 {
  --role-headings:   var(--external-reverse-1-headings);
  --role-background: var(--external-reverse-1-background);
  --role-text:       var(--external-reverse-1-text);
}
.scheme-external.scheme-reverse-2 {
  --role-headings:   var(--external-reverse-2-headings);
  --role-background: var(--external-reverse-2-background);
  --role-text:       var(--external-reverse-2-text);
}
.scheme-external.scheme-reverse-3 {
  --role-headings:   var(--external-reverse-3-headings);
  --role-background: var(--external-reverse-3-background);
  --role-text:       var(--external-reverse-3-text);
}


/* ==========================
   PARTNER-CONTENT
   ========================== */
.scheme-partner-content {
  --role-headings:   var(--partner-content-regular-headings);
  --role-background: var(--partner-content-regular-background);
  --role-text:       var(--partner-content-regular-text);
  --role-btn-hover-bg:  var(--partner-content-hover-bg);
  --role-btn-active-bg: var(--partner-content-active-bg);
}
.scheme-partner-content.scheme-light {
  --role-headings:   var(--partner-content-light-headings);
  --role-background: var(--partner-content-light-background);
  --role-text:       var(--partner-content-light-text);
}
.scheme-partner-content.scheme-medium {
  --role-headings:   var(--partner-content-medium-headings);
  --role-background: var(--partner-content-medium-background);
  --role-text:       var(--partner-content-medium-text);
}
.scheme-partner-content.scheme-reverse-1 {
  --role-headings:   var(--partner-content-reverse-1-headings);
  --role-background: var(--partner-content-reverse-1-background);
  --role-text:       var(--partner-content-reverse-1-text);
}
.scheme-partner-content.scheme-reverse-2 {
  --role-headings:   var(--partner-content-reverse-2-headings);
  --role-background: var(--partner-content-reverse-2-background);
  --role-text:       var(--partner-content-reverse-2-text);
}
.scheme-partner-content.scheme-reverse-3 {
  --role-headings:   var(--partner-content-reverse-3-headings);
  --role-background: var(--partner-content-reverse-3-background);
  --role-text:       var(--partner-content-reverse-3-text);
}


/* ==========================
   PARTNER-PLUS-CONTENT
   ========================== */
.scheme-partner-plus-content {
  --role-headings:   var(--partner-plus-content-regular-headings);
  --role-background: var(--partner-plus-content-regular-background);
  --role-text:       var(--partner-plus-content-regular-text);
  --role-btn-hover-bg:  var(--partner-plus-content-hover-bg);
  --role-btn-active-bg: var(--partner-plus-content-active-bg);
}
.scheme-partner-plus-content.scheme-light {
  --role-headings:   var(--partner-plus-content-light-headings);
  --role-background: var(--partner-plus-content-light-background);
  --role-text:       var(--partner-plus-content-light-text);
}
.scheme-partner-plus-content.scheme-medium {
  --role-headings:   var(--partner-plus-content-medium-headings);
  --role-background: var(--partner-plus-content-medium-background);
  --role-text:       var(--partner-plus-content-medium-text);
}
.scheme-partner-plus-content.scheme-reverse-1 {
  --role-headings:   var(--partner-plus-content-reverse-1-headings);
  --role-background: var(--partner-plus-content-reverse-1-background);
  --role-text:       var(--partner-plus-content-reverse-1-text);
}
.scheme-partner-plus-content.scheme-reverse-2 {
  --role-headings:   var(--partner-plus-content-reverse-2-headings);
  --role-background: var(--partner-plus-content-reverse-2-background);
  --role-text:       var(--partner-plus-content-reverse-2-text);
}
.scheme-partner-plus-content.scheme-reverse-3 {
  --role-headings:   var(--partner-plus-content-reverse-3-headings);
  --role-background: var(--partner-plus-content-reverse-3-background);
  --role-text:       var(--partner-plus-content-reverse-3-text);
}


/* ==========================
   ADVERTORIAL
   ========================== */
.scheme-advertorial {
  --role-headings:   var(--advertorial-regular-headings);
  --role-background: var(--advertorial-regular-background);
  --role-text:       var(--advertorial-regular-text);
  --role-btn-hover-bg:  var(--advertorial-hover-bg);
  --role-btn-active-bg: var(--advertorial-active-bg);
}
.scheme-advertorial.scheme-light {
  --role-headings:   var(--advertorial-light-headings);
  --role-background: var(--advertorial-light-background);
  --role-text:       var(--advertorial-light-text);
}
.scheme-advertorial.scheme-medium {
  --role-headings:   var(--advertorial-medium-headings);
  --role-background: var(--advertorial-medium-background);
  --role-text:       var(--advertorial-medium-text);
}
.scheme-advertorial.scheme-reverse-1 {
  --role-headings:   var(--advertorial-reverse-1-headings);
  --role-background: var(--advertorial-reverse-1-background);
  --role-text:       var(--advertorial-reverse-1-text);
}
.scheme-advertorial.scheme-reverse-2 {
  --role-headings:   var(--advertorial-reverse-2-headings);
  --role-background: var(--advertorial-reverse-2-background);
  --role-text:       var(--advertorial-reverse-2-text);
}
.scheme-advertorial.scheme-reverse-3 {
  --role-headings:   var(--advertorial-reverse-3-headings);
  --role-background: var(--advertorial-reverse-3-background);
  --role-text:       var(--advertorial-reverse-3-text);
}


/* Infobox-Farben: → paragraphs.css (vollständige Abdeckung h1–h6 + a + p + !important) */


/* ==========================
   Body-Background für Artikel-Seiten
   body.scheme-{role} wird via preprocess_html injiziert.
   Eine Regel reicht – --role-background ist bereits per Scheme gesetzt.
   ========================== */
body.node--type-article[class*="scheme-"] #main-wrapper {
  background-color: var(--role-background);
}


/* ==========================
   HR + salto-endline: Rollenfarbe als Linienfarbe
   ========================== */
[class*="scheme-"] hr,
[class*="scheme-"] .salto-endline-short,
[class*="scheme-"] .salto-endline-long {
  border-color: var(--role-headings);
  opacity: 1;
}

/* ==========================
   VIS Mehr-laden Button: folgt dem Rollen-Scheme des umgebenden Containers
   ========================== */
[class*="scheme-"] .vis-load-more.btn-primary {
  --bs-btn-bg:           var(--role-headings);
  --bs-btn-border-color: var(--role-headings);
  --bs-btn-hover-bg:     var(--role-headings);
  --bs-btn-hover-border-color: var(--role-headings);
  --bs-btn-active-bg:    var(--role-headings);
  color: var(--text-on-dark);
}