/* styles-2k25.css
   Utility-Klassen + Scheme-Container mit Kaskaden-Variablen.

   VARIANTE B:
   - Die Scheme-Klassen selbst (.salto-regular-scheme, .partner-regular-scheme, …)
     sind der Scope.
   - .scheme-scope bleibt als Alias, ist aber nicht zwingend.
*/

/* ==========================
   Token-Utilities (generisch)
   ========================== */

/* Generische Helfer: nutzen die im Scope gesetzten Role-Variablen */
[class$="-headings"]   { color: var(--role-regular-headings); }
[class$="-background"] { background-color: var(--role-regular-background); }
[class$="-text"]       { color: var(--role-regular-text); }

/* ==========================
   Defaults für Container ohne explizites Scheme
   ========================== */
:root {
  --role-regular-headings: var(--salto-regular-headings);
  --role-regular-background: var(--salto-regular-background);
  --role-regular-text: var(--salto-regular-text);

  --role-btn-primary-bg: var(--role-regular-headings);
  --role-btn-primary-color: var(--color-light-text);
  --role-btn-primary-border: var(--role-regular-headings);
  --role-btn-primary-hover-bg: var(--salto-hover-bg);
  --role-btn-primary-active-bg: var(--salto-active-bg);

  --role-btn-secondary-bg: var(--color-light-bg);
  --role-btn-secondary-color: var(--role-regular-headings);
  --role-btn-secondary-border: var(--role-regular-headings);
  --role-btn-secondary-hover-border: var(--salto-secondary-hover-border);
  --role-btn-secondary-active-border: var(--salto-secondary-active-border);
}

/* ==========================
   SCHEME-SCOPE (Variante B)
   ========================== */

/* Alles, was ein "-scheme" im Klassennamen trägt, plus .scheme-scope */
.scheme-scope,
[class*="-scheme"] {
  background: var(--role-regular-background);
  color: var(--role-regular-text);
}

/* Links im Scheme */
.scheme-scope a,
[class*="-scheme"] a {
  color: var(--role-regular-headings);
  text-decoration: underline;
}
.scheme-scope a:hover,
.scheme-scope a:focus,
[class*="-scheme"] a:hover,
[class*="-scheme"] a:focus {
  color: var(--role-regular-headings);
}

/* Headings im Scheme = Headings-Farbe der Rolle */
.scheme-scope h1,
.scheme-scope h2,
.scheme-scope h3,
.scheme-scope h4,
.scheme-scope h5,
.scheme-scope h6,
.scheme-scope .h1,
.scheme-scope .h2,
.scheme-scope .h3,
.scheme-scope .h4,
.scheme-scope .h5,
.scheme-scope .h6,
[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 {
  color: var(--role-regular-headings);
}

/* Bootstrap Buttons innerhalb eines Schemas */
.scheme-scope .btn-primary,
[class*="-scheme"] .btn-primary {
  --bs-btn-bg: var(--role-btn-primary-bg);
  --bs-btn-border-color: var(--role-btn-primary-border);
  --bs-btn-color: var(--role-btn-primary-color);

  --bs-btn-hover-bg: var(--role-btn-primary-hover-bg);
  --bs-btn-hover-border-color: var(--role-btn-primary-hover-bg);
  --bs-btn-active-bg: var(--role-btn-primary-active-bg);
  --bs-btn-active-border-color: var(--role-btn-primary-active-bg);
}

.scheme-scope .btn-secondary,
[class*="-scheme"] .btn-secondary {
  --bs-btn-bg: var(--role-btn-secondary-bg);
  --bs-btn-border-color: var(--role-btn-secondary-border);
  --bs-btn-color: var(--role-btn-secondary-color);

  --bs-btn-hover-bg: var(--role-btn-secondary-bg);
  --bs-btn-hover-border-color: var(--role-btn-secondary-hover-border);
  --bs-btn-active-bg: var(--role-btn-secondary-bg);
  --bs-btn-active-border-color: var(--role-btn-secondary-active-border);
}

/* Spezieller role-primary-Button (falls im Einsatz) */
.scheme-scope .btn-role-primary,
[class*="-scheme"] .btn-role-primary {
  --bs-btn-bg: var(--role-regular-headings);
  --bs-btn-border-color: var(--role-regular-headings);
  --bs-btn-color: #fff;
  --_btn-accent: var(--role-regular-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) 82%, #000 18%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--_btn-accent) 82%, #000 18%);
}

/* ==========================
   Plyr-Player einfärben nach Scheme
   ========================== */

/* Hauptfarbe von Plyr = Headings-Farbe der Rolle */
.scheme-scope .plyr--full-ui,
[class*="-scheme"] .plyr--full-ui {
  --plyr-color-main: var(--role-regular-headings);
  --plyr-tooltip-background: var(--role-regular-headings);
  --plyr-tooltip-color: var(--color-light-text);
}

/* Play/Pause-Button etc. */
.scheme-scope .plyr__controls__item.plyr__control,
[class*="-scheme"] .plyr__controls__item.plyr__control {
  color: var(--role-regular-headings);
}

/* Play/Pause-Button Hover: BG = Headings, Icon/Text = salto-light */
.scheme-scope .plyr__controls__item.plyr__control:hover,
.scheme-scope .plyr__controls__item.plyr__control:focus,
[class*="-scheme"] .plyr__controls__item.plyr__control:hover,
[class*="-scheme"] .plyr__controls__item.plyr__control:focus {
  background-color: var(--role-regular-headings);
  color: var(--color-light-text); /* = „salto-light“ Text */
}

/* sicherstellen, dass das Icon die Textfarbe übernimmt */
.scheme-scope .plyr__controls__item.plyr__control svg,
[class*="-scheme"] .plyr__controls__item.plyr__control svg {
  fill: currentColor;
}

/* Tooltip: BG = Headings-Farbe, Text = „salto-light“ */
.scheme-scope .plyr__tooltip,
[class*="-scheme"] .plyr__tooltip {
  background-color: var(--role-regular-headings);
  color: var(--color-light-text);
}

/* Slider (Seek + Volume) – Farbe = Headings */
.scheme-scope input[type="range"][data-plyr],
[class*="-scheme"] input[type="range"][data-plyr] {
  color: var(--role-regular-headings);
}

/* Podcast-Player als „Pille“ (nur Audio) */
.podcast-player .plyr--full-ui.plyr--audio {
  border-radius: 9999px;        /* vorne & hinten komplett rund */
  overflow: hidden;             /* Ecken der inneren Elemente abschneiden */
}

/* Podcast-Player als „Pille“ (nur Audio) */
.podcast-player .plyr--full-ui.plyr--audio {
  border-radius: 9999px;        /* vorne & hinten komplett rund */
  overflow: hidden;             /* Ecken der inneren Elemente abschneiden */
}

/* falls nötig, damit die Controls die Rundung übernehmen */
.podcast-player .plyr--full-ui.plyr--audio .plyr__controls {
  border-radius: inherit;
}

/* ==========================
   SCHEME-DEFINITIONEN – SALTO
   ========================== */

.salto-regular-scheme {
  --role-regular-headings: var(--salto-regular-headings);
  --role-regular-background: var(--salto-regular-background);
  --role-regular-text: var(--salto-regular-text);

  --role-btn-primary-bg: var(--salto-regular-headings);
  --role-btn-primary-color: var(--color-light-text);
  --role-btn-primary-border: var(--salto-regular-headings);
  --role-btn-primary-hover-bg: var(--salto-hover-bg);
  --role-btn-primary-active-bg: var(--salto-active-bg);

  --role-btn-secondary-bg: var(--color-light-bg);
  --role-btn-secondary-color: var(--salto-regular-headings);
  --role-btn-secondary-border: var(--salto-secondary-border);
  --role-btn-secondary-hover-border: var(--salto-secondary-hover-border);
  --role-btn-secondary-active-border: var(--salto-secondary-active-border);
}

.salto-reverse-scheme {
  --role-regular-headings: var(--salto-reverse-headings);
  --role-regular-background: var(--salto-reverse-background);
  --role-regular-text: var(--salto-reverse-text); /* „salto-light“ */

  --role-btn-primary-bg: var(--salto-reverse-background);
  --role-btn-primary-color: var(--salto-reverse-text);
  --role-btn-primary-border: var(--salto-reverse-background);
  --role-btn-primary-hover-bg: var(--salto-hover-bg);
  --role-btn-primary-active-bg: var(--salto-active-bg);

  --role-btn-secondary-bg: var(--color-light-bg);
  --role-btn-secondary-color: var(--salto-regular-headings);
  --role-btn-secondary-border: var(--salto-secondary-border);
  --role-btn-secondary-hover-border: var(--salto-secondary-hover-border);
  --role-btn-secondary-active-border: var(--salto-secondary-active-border);
}

.salto-light-scheme {
  --role-regular-headings: var(--salto-light-headings);
  --role-regular-background: var(--salto-light-background);
  --role-regular-text: var(--salto-light-text); /* dark */

  --role-btn-primary-bg: var(--salto-light-headings);
  --role-btn-primary-color: var(--color-light-text);
  --role-btn-primary-border: var(--salto-light-headings);
  --role-btn-primary-hover-bg: var(--salto-hover-bg);
  --role-btn-primary-active-bg: var(--salto-active-bg);

  --role-btn-secondary-bg: var(--color-light-bg);
  --role-btn-secondary-color: var(--salto-regular-headings);
  --role-btn-secondary-border: var(--salto-secondary-border);
  --role-btn-secondary-hover-border: var(--salto-secondary-hover-border);
  --role-btn-secondary-active-border: var(--salto-secondary-active-border);
}

/* ==========================
   SCHEME-DEFINITIONEN – COMMUNITY
   ========================== */
.community-regular-scheme {
  --role-regular-headings: var(--community-regular-headings);
  --role-regular-background: var(--community-regular-background);
  --role-regular-text: var(--community-regular-text);

  --role-btn-primary-bg: var(--community-regular-headings);
  --role-btn-primary-color: var(--color-light-text);
  --role-btn-primary-border: var(--community-regular-headings);
  --role-btn-primary-hover-bg: var(--community-hover-bg);
  --role-btn-primary-active-bg: var(--community-active-bg);

  --role-btn-secondary-bg: var(--color-light-bg);
  --role-btn-secondary-color: var(--community-regular-headings);
  --role-btn-secondary-border: var(--community-regular-headings);
  --role-btn-secondary-hover-border: var(--community-hover-bg);
  --role-btn-secondary-active-border: var(--community-active-bg);
}

.community-reverse-scheme {
  --role-regular-headings: var(--community-reverse-headings);
  --role-regular-background: var(--community-reverse-background);
  --role-regular-text: var(--community-reverse-text); /* light */

  --role-btn-primary-bg: var(--community-reverse-background);
  --role-btn-primary-color: var(--community-reverse-text);
  --role-btn-primary-border: var(--community-reverse-background);
  --role-btn-primary-hover-bg: var(--community-hover-bg);
  --role-btn-primary-active-bg: var(--community-active-bg);

  --role-btn-secondary-bg: var(--color-light-bg);
  --role-btn-secondary-color: var(--community-regular-headings);
  --role-btn-secondary-border: var(--community-regular-headings);
  --role-btn-secondary-hover-border: var(--community-hover-bg);
  --role-btn-secondary-active-border: var(--community-active-bg);
}

.community-light-scheme {
  --role-regular-headings: var(--community-light-headings);
  --role-regular-background: var(--community-light-background);
  --role-regular-text: var(--community-light-text); /* dark */

  --role-btn-primary-bg: var(--community-light-headings);
  --role-btn-primary-color: var(--color-light-text);
  --role-btn-primary-border: var(--community-light-headings);
  --role-btn-primary-hover-bg: var(--community-hover-bg);
  --role-btn-primary-active-bg: var(--community-active-bg);

  --role-btn-secondary-bg: var(--color-light-bg);
  --role-btn-secondary-color: var(--community-regular-headings);
  --role-btn-secondary-border: var(--community-regular-headings);
  --role-btn-secondary-hover-border: var(--community-hover-bg);
  --role-btn-secondary-active-border: var(--community-active-bg);
}

/* ==========================
   SCHEME-DEFINITIONEN – PARTNER (Brand)
   ========================== */
.partner-regular-scheme {
  --role-regular-headings: var(--partner-regular-headings);
  --role-regular-background: var(--partner-regular-background);
  --role-regular-text: var(--partner-regular-text);

  --role-btn-primary-bg: var(--partner-regular-headings);
  --role-btn-primary-color: var(--color-light-text);
  --role-btn-primary-border: var(--partner-regular-headings);
  --role-btn-primary-hover-bg: var(--partner-hover-bg);
  --role-btn-primary-active-bg: var(--partner-active-bg);

  --role-btn-secondary-bg: var(--color-light-bg);
  --role-btn-secondary-color: var(--partner-regular-headings);
  --role-btn-secondary-border: var(--partner-regular-headings);
  --role-btn-secondary-hover-border: var(--partner-hover-bg);
  --role-btn-secondary-active-border: var(--partner-active-bg);
}

.partner-reverse-scheme {
  --role-regular-headings: var(--partner-reverse-headings);
  --role-regular-background: var(--partner-reverse-background);
  --role-regular-text: var(--partner-reverse-text); /* light */

  --role-btn-primary-bg: var(--partner-reverse-background);
  --role-btn-primary-color: var(--partner-reverse-text);
  --role-btn-primary-border: var(--partner-reverse-background);
  --role-btn-primary-hover-bg: var(--partner-hover-bg);
  --role-btn-primary-active-bg: var(--partner-active-bg);

  --role-btn-secondary-bg: var(--color-light-bg);
  --role-btn-secondary-color: var(--partner-regular-headings);
  --role-btn-secondary-border: var(--partner-regular-headings);
  --role-btn-secondary-hover-border: var(--partner-hover-bg);
  --role-btn-secondary-active-border: var(--partner-active-bg);
}

.partner-light-scheme {
  --role-regular-headings: var(--partner-light-headings);
  --role-regular-background: var(--partner-light-background);
  --role-regular-text: var(--partner-light-text); /* dark */

  --role-btn-primary-bg: var(--partner-light-headings);
  --role-btn-primary-color: var(--color-light-text);
  --role-btn-primary-border: var(--partner-light-headings);
  --role-btn-primary-hover-bg: var(--partner-hover-bg);
  --role-btn-primary-active-bg: var(--partner-active-bg);

  --role-btn-secondary-bg: var(--color-light-bg);
  --role-btn-secondary-color: var(--partner-regular-headings);
  --role-btn-secondary-border: var(--partner-regular-headings);
  --role-btn-secondary-hover-border: var(--partner-hover-bg);
  --role-btn-secondary-active-border: var(--partner-active-bg);
}

/* ==========================
   Beispiel: DOSSIER-Scheme (verkürzt)
   ========================== */
.dossier-regular-scheme {
  --role-regular-headings: var(--dossier-regular-headings);
  --role-regular-background: var(--dossier-regular-background);
  --role-regular-text: var(--dossier-regular-text);

  --role-btn-primary-bg: var(--dossier-regular-headings);
  --role-btn-primary-color: var(--color-light-text);
  --role-btn-primary-border: var(--dossier-regular-headings);
  --role-btn-primary-hover-bg: var(--dossier-hover-bg);
  --role-btn-primary-active-bg: var(--dossier-active-bg);
}

/* ==========================
   ARTICLE ROLE Schemes
   ========================== */

/* editor */
.editor-regular-scheme {
  --role-regular-headings: var(--editor-regular-headings);
  --role-regular-background: var(--editor-regular-background);
  --role-regular-text: var(--editor-regular-text);
}
.editor-reverse-scheme {
  --role-regular-headings: var(--editor-reverse-headings);
  --role-regular-background: var(--editor-reverse-background);
  --role-regular-text: var(--editor-reverse-text); /* light */
}
.editor-light-scheme {
  --role-regular-headings: var(--editor-light-headings);
  --role-regular-background: var(--editor-light-background);
  --role-regular-text: var(--editor-light-text);    /* dark */
}

/* columnist */
.columnist-regular-scheme {
  --role-regular-headings: var(--columnist-regular-headings);
  --role-regular-background: var(--columnist-regular-background);
  --role-regular-text: var(--columnist-regular-text);
}
.columnist-reverse-scheme {
  --role-regular-headings: var(--columnist-reverse-headings);
  --role-regular-background: var(--columnist-reverse-background);
  --role-regular-text: var(--columnist-reverse-text); /* light */
}
.columnist-light-scheme {
  --role-regular-headings: var(--columnist-light-headings);
  --role-regular-background: var(--columnist-light-background);
  --role-regular-text: var(--columnist-light-text);    /* dark */
}

/* community (Artikelrolle) */
.community-regular-scheme-article {
  --role-regular-headings: var(--community-regular-headings-article);
  --role-regular-background: var(--community-regular-background-article);
  --role-regular-text: var(--community-regular-text-article);
}
.community-reverse-scheme-article {
  --role-regular-headings: var(--community-reverse-headings-article);
  --role-regular-background: var(--community-reverse-background-article);
  --role-regular-text: var(--community-reverse-text-article); /* light */
}
.community-light-scheme-article {
  --role-regular-headings: var(--community-light-headings-article);
  --role-regular-background: var(--community-light-background-article);
  --role-regular-text: var(--community-light-text-article);     /* dark */
}

/* external */
.external-regular-scheme {
  --role-regular-headings: var(--external-regular-headings);
  --role-regular-background: var(--external-regular-background);
  --role-regular-text: var(--external-regular-text);
}
.external-reverse-scheme {
  --role-regular-headings: var(--external-reverse-headings);
  --role-regular-background: var(--external-reverse-background);
  --role-regular-text: var(--external-reverse-text); /* light */
}
.external-light-scheme {
  --role-regular-headings: var(--external-light-headings);
  --role-regular-background: var(--external-light-background);
  --role-regular-text: var(--external-light-text);   /* dark */
}

/* partner-content */
.partner-content-regular-scheme {
  --role-regular-headings: var(--partner-content-regular-headings);
  --role-regular-background: var(--partner-content-regular-background);
  --role-regular-text: var(--partner-content-regular-text);
}
.partner-content-reverse-scheme {
  --role-regular-headings: var(--partner-content-reverse-headings);
  --role-regular-background: var(--partner-content-reverse-background);
  --role-regular-text: var(--partner-content-reverse-text); /* light */
}
.partner-content-light-scheme {
  --role-regular-headings: var(--partner-content-light-headings);
  --role-regular-background: var(--partner-content-light-background);
  --role-regular-text: var(--partner-content-light-text);       /* dark */
}

/* partner-plus-content */
.partner-plus-content-regular-scheme {
  --role-regular-headings: var(--partner-plus-content-regular-headings);
  --role-regular-background: var(--partner-plus-content-regular-background);
  --role-regular-text: var(--partner-plus-content-regular-text);
}
.partner-plus-content-reverse-scheme {
  --role-regular-headings: var(--partner-plus-content-reverse-headings);
  --role-regular-background: var(--partner-plus-content-reverse-background);
  --role-regular-text: var(--partner-plus-content-reverse-text); /* light */
}
.partner-plus-content-light-scheme {
  --role-regular-headings: var(--partner-plus-content-light-headings);
  --role-regular-background: var(--partner-plus-content-light-background);
  --role-regular-text: var(--partner-plus-content-light-text);   /* dark */
}

/* advertorial */
.advertorial-regular-scheme {
  --role-regular-headings: var(--advertorial-regular-headings);
  --role-regular-background: var(--advertorial-regular-background);
  --role-regular-text: var(--advertorial-regular-text);
}
.advertorial-reverse-scheme {
  --role-regular-headings: var(--advertorial-reverse-headings);
  --role-regular-background: var(--advertorial-reverse-background);
  --role-regular-text: var(--advertorial-reverse-text); /* light */
}
.advertorial-light-scheme {
  --role-regular-headings: var(--advertorial-light-headings);
  --role-regular-background: var(--advertorial-light-background);
  --role-regular-text: var(--advertorial-light-text);   /* dark */
}

/* ==========================
   Body-Background je Artikelrolle (wie original)
   ========================== */
body.node--type-article.s2k25[class*="article-role-"] #main-wrapper {
  background: transparent !important;
}
body.node--type-article.s2k25.article-role-editor #main-wrapper {
  background-color: var(--editor-light-background) !important;
}
body.node--type-article.s2k25.article-role-columnist #main-wrapper {
  background-color: var(--columnist-light-background) !important;
}
body.node--type-article.s2k25.article-role-community #main-wrapper,
body.node--type-article.s2k25.article-role-community-salto-selection #main-wrapper {
  background-color: var(--community-light-background) !important;
}
body.node--type-article.s2k25.article-role-advertorial #main-wrapper {
  background-color: var(--advertorial-light-background) !important;
}
body.node--type-article.s2k25.article-role-external #main-wrapper {
  background-color: var(--external-light-background) !important;
}
body.node--type-article.s2k25.article-role-partner-content #main-wrapper {
  background-color: var(--partner-content-light-background) !important;
}
body.node--type-article.s2k25.article-role-partner-plus-content #main-wrapper {
  background-color: var(--partner-plus-content-light-background) !important;
}

/* ==========================
   Fonts on headings (Artikel)
   ========================== */
body.node--type-article.s2k25 h1,
body.node--type-article.s2k25 h2,
body.node--type-article.s2k25 h3,
body.node--type-article.s2k25 h4,
body.node--type-article.s2k25 h5,
body.node--type-article.s2k25 h6,
body.node--type-article.s2k25 .h1,
body.node--type-article.s2k25 .h2,
body.node--type-article.s2k25 .h3,
body.node--type-article.s2k25 .h4,
body.node--type-article.s2k25 .h5,
body.node--type-article.s2k25 .h6 {
  font-family: var(--salto-font-sans);
  font-weight: 700;
}

.font-salto-serif { font-family: var(--salto-font-serif); }
.font-salto-sans  { font-family: var(--salto-font-sans); }
.font-salto-music { font-family: var(--salto-font-music); }

/* ==========================
   Explizite Brand-Utilities (Overrides)
   ========================== */
/* SALTO */
.salto-regular-headings   { color: var(--salto-regular-headings); }
.salto-regular-background { background-color: var(--salto-regular-background); }
.salto-regular-text       { color: var(--salto-regular-text); }

.salto-reverse-headings   { color: var(--salto-reverse-headings); }
.salto-reverse-background { background-color: var(--salto-reverse-background); }
.salto-reverse-text       { color: var(--salto-reverse-text); }

.salto-light-headings     { color: var(--salto-light-headings); }
.salto-light-background   { background-color: var(--salto-light-background); }
.salto-light-text         { color: var(--salto-light-text); }

/* COMMUNITY */
.community-regular-headings   { color: var(--community-regular-headings); }
.community-regular-background { background-color: var(--community-regular-background); }
.community-regular-text       { color: var(--community-regular-text); }

/* PARTNER */
.partner-regular-headings   { color: var(--partner-regular-headings); }
.partner-regular-background { background-color: var(--partner-regular-background); }
.partner-regular-text       { color: var(--partner-regular-text); }

/* DOSSIER Beispiel */
.dossier-regular-headings   { color: var(--dossier-regular-headings); }
.dossier-regular-background { background-color: var(--dossier-regular-background); }
.dossier-regular-text       { color: var(--dossier-regular-text); }

/* usw. bei Bedarf für music/breaking/ads etc. */