/* === ARTICLE FULL === */

/*
  HINWEIS ABSTÄNDE: Figma nutzt ein 9px-Raster (9 / 18 / 27 / 54px).
  BS5-Standard (4/8/16/24/48px) weicht davon ab:
    Figma 27px → BS5 mb-4 (24px, −3px)
    Figma 18px → BS5 mb-3 (16px, −2px)
    Figma 9px  → BS5 mb-2  (8px, −1px)
    Figma 4.5px→ BS5 mb-1  (4px, −0.5px)
  Die Abweichungen sind gering und visuell kaum wahrnehmbar.
  Für präzise Werte: CSS-Variablen unten verwenden.
*/
.article-full {
  --a-gap-xl: 3.375rem;    /* 54px */
  --a-gap:    1.6875rem;   /* 27px — Figma Hauptabstand */
  --a-gap-sm: 1.125rem;    /* 18px — Figma Elementabstand */
  --a-gap-xs: 0.5625rem;   /* 9px  — Figma enger Abstand */
  --a-gap-2xs: 0.28125rem; /* 4.5px */
}



/* ================================================
   PRETITLE / DACHZEILE
   ================================================ */
[class*="scheme-"] .pretitle {
  color: var(--role-headings);
}
[class*="scheme-"] .pretitle a {
  color: inherit;
  text-decoration: underline;
}


/* ================================================
   TITLE
   ================================================ */
.article-full h1 {
  margin-bottom: 0;
}

/* Überschriften immer trennen – alle Breiten.
   Korrekte Wörterbücher über lang="{{ article_language }}" am <article>-Element. */
.article-full h1, .article-full h2, .article-full h3,
.article-full h4, .article-full h5, .article-full h6 {
  hyphens: auto;
}
/* h1-Farbe kommt via schemes.css ([class*="scheme-"] h1) */
/* a-Farbe kommt via schemes.css ([class*="scheme-"] a:not(.btn)) */
.article-full h1 a {
  text-decoration: none;
}


/* ================================================
   TEASER / VORSPANN
   Größe/Gewicht/Familie kommen von der BS5-Klasse .lead
   (in typography.css bereits identisch definiert) — hier nur Farbe.
   ================================================ */
[class*="scheme-"] .article-full .lead {
  color: var(--role-text);
}


/* ================================================
   BYLINE / AUTORENZEILE
   ================================================ */
.article-full .byline {
  font-family: var(--salto-font-serif);
}
[class*="scheme-"] .article-full .byline {
  color: var(--role-text);
}
/* Byline-Links (Autor-Name) erben von schemes.css a:not(.btn) */

/* Columnist-Avatar: Kreis mit Rollenfarbe als Border */
.article-full .byline .author-avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.article-full .byline .author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ================================================
   BYLINE-TRENNLINIE: via <hr class="salto-endline"> im Template + schemes.css
   ================================================ */


/* ================================================
   KOMMENTAR-BUBBLE
   ================================================ */
.cc-bubble {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .85rem;
  color: var(--community-base);
  white-space: nowrap;
}
.cc-number { font-weight: 600; }


/* ================================================
   ARTICLE NOTICE / DISCLAIMER-BANNER
   Für community, partner-content, partner-plus-content, advertorial.
   "Hinweis:"/"Avvertenza:" bewusst nicht fett (siehe article-notice.html.twig).
   ================================================ */
.article-notice {
  width: 100%;
  font-family: var(--salto-font-sans);
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
  font-weight: var(--fw-regular);
}


/* ================================================
   MAIN MEDIA
   ================================================ */
.article-full .main-media figure { margin: 0; }
.article-full .main-media img {
  display: block;
  width: 100%;
  height: auto;
}


/* ================================================
   BILDUNTERSCHRIFT (.salto-caption)
   Wird für Hauptbild (main-media) und Paragraph-Bilder verwendet.
   ================================================ */
.salto-caption {
  margin-top: 0.375rem;
  line-height: 1rem;
}
.salto-caption-text {
  font-family: var(--salto-font-serif);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--role-text);
}
.salto-caption-copyright {
  font-family: var(--salto-font-sans);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  font-style: normal;
  color: var(--role-text);
  opacity: 0.7;
}


/* BLOCKQUOTE: Primärfarbe der Rolle.
   Asset Injector "some_fixes_while_theme_transition_2k25" hat
   .paragraph blockquote p { color: var(--salto-primary) !important } = 0-1-2.
   .node--type-article-Prefix hebt uns auf 0-2-1/0-2-2 → schlägt 0-1-2. */
.node--type-article .paragraph blockquote,
.node--type-article .paragraph blockquote p {
  color: var(--role-headings) !important;
}


/* ================================================
   PARAGRAPHEN-ABSTÄNDE
   Figma: 27px Abstand zwischen Paragraph-Elementen
   → BS5 mb-4 (24px) wäre Alternative; hier exakt via CSS-Var
   ================================================ */
.article-full .paragraph + .paragraph {
  margin-top: var(--a-gap);
}


/* ================================================
   PODCAST PLAYER
   Highlight-Farbe (Play-Button, Progress etc.) via schemes.css:
     [class*="scheme-"] .plyr--full-ui { --plyr-color-main: var(--role-headings); }
   Hier nur Layout-Anpassungen.
   ================================================ */
.podcast-player.is-locked .player-ui {
  position: relative;
  pointer-events: none;
  user-select: none;
}
.player-lock-badge {
  position: absolute;
  /* rechts über Play-Button: spacing(0.625rem) + play-button(2.8125rem) - halbe Badge-Breite */
  top: 0.2rem;
  left: 1.4rem;
  width: 1.75rem;    /* 28px – kleiner als Play-Button */
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  border-radius: 50%;
  pointer-events: none;
}
.filter-gray {
  filter: grayscale(1);
  opacity: .5;
}


/* ================================================
   SHARE BUTTON
   ================================================ */
.mirror {
  display: inline-block;
  transform: scaleX(-1);
}

.share-btn {
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--fw-regular);
}
.share-btn:hover,
.share-btn:focus {
  opacity: .7;
}

.share-dropdown {
  min-width: 11rem;
}
.share-dropdown a.dropdown-item,
.share-dropdown button.dropdown-item {
  font-size: .9rem;
  padding: .45rem .75rem;
  color: #212529;
  text-transform: none;
  letter-spacing: normal;
}
.share-dropdown a.dropdown-item:hover,
.share-dropdown a.dropdown-item:focus,
.share-dropdown button.dropdown-item:hover,
.share-dropdown button.dropdown-item:focus {
  background-color: #f0f0f0;
  color: var(--salto-base);
}
.share-dropdown .bi { width: 1.25rem; text-align: center; }


/* ================================================
   S+ SPERR-SCREEN (PAYWALL)
   IMMER SALTO-BLAU — rollenunabhängig (user-Anforderung).
   var(--salto-base) = #0D6EFD, definiert in colors.css.
   ================================================ */
.article-paragraphs.is-locked-preview { position: relative; }

.paragraphs-fade { position: relative; }
.paragraphs-fade::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 10rem;   /* höher = Fade beginnt früher (weiter oben im Text) */
  background: linear-gradient(to bottom, transparent, var(--role-background));
  pointer-events: none;
}

.preview-overlay { position: relative; z-index: 1; }

/* Breakout: Paywall-Overlay von col-6 auf col-8 ausdehnen (nur ≥ lg) */
@media (min-width: 992px) {
  .preview-overlay {
    width: 133.33%;       /* = 8/6 × 100% */
    margin-left: -16.67%; /* = -(8−6) / (2×6) × 100% */
  }
}

/* Login-Link ÜBER der blauen Box — nutzt Artikelfarben */
.overlay-login {
  color: var(--role-text);
  text-align: center;
  margin-bottom: .75rem;
}
.overlay-login a {
  color: var(--role-headings);
  font-weight: 600;
}

/* Immer blauer Außenrahmen */
.overlay-box {
  background-color: var(--salto-base);
  color: var(--text-on-dark);
  border-radius: 0;
  padding: 1.75rem 1.25rem 1.25rem;
}
.overlay-box a:not(.btn) { color: var(--text-on-dark); }

.overlay-splus-title {
  font-family: var(--salto-font-serif);
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: .125rem;
  text-align: center;
  color: var(--text-on-dark);
  margin-bottom: 1rem;
  line-height: 1.4;
}
.overlay-splus-title svg {
  width: 3rem;
  height: 3rem;
}
.overlay-subtitle {
  font-family: var(--salto-font-serif);
  font-weight: 600;
  text-align: center;
  color: var(--text-on-dark);
  margin-bottom: 1.5rem;
}

/* Weiße Angebots-Karte */
.overlay-offers {
  background-color: #fff;
  border-radius: .625rem;
  box-shadow: 0 2px 15px rgba(0,0,0,.07);
  padding: 1.5rem 1rem;
  margin-bottom: 1rem;
}
.offer-card { background-color: transparent; }

/* Preistext: immer Salto-Blau */
.offer-price {
  font-family: var(--salto-font-serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--salto-base);
  text-align: center;
  margin-bottom: .875rem;
}

/* Trennlinie */
.offer-divider {
  background-color: #CACACA;
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  margin: .25rem 0;
}
@media (max-width: 767px) {
  .offer-divider { width: 100%; height: 1px; margin: .5rem 0; }
}

/* Buttons: immer Salto-Blau */
.overlay-offers .btn {
  --bs-btn-bg:                  var(--salto-base);
  --bs-btn-border-color:        var(--salto-base);
  --bs-btn-color:               var(--text-on-dark);
  --bs-btn-hover-bg:            color-mix(in srgb, var(--salto-base) 85%, #000);
  --bs-btn-hover-border-color:  color-mix(in srgb, var(--salto-base) 85%, #000);
  --bs-btn-active-bg:           color-mix(in srgb, var(--salto-base) 78%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--salto-base) 78%, #000);
  font-family: var(--salto-font-serif);
  font-weight: 600;
  letter-spacing: .125rem;
  text-transform: uppercase;
}

/* "Vedi più offerte" — weiß, unterstrichen */
.more-offers a {
  color: var(--text-on-dark);
  text-decoration: underline;
  font-size: .9rem;
}
.more-offers a:hover,
.more-offers a:focus { opacity: .8; }


/* ================================================
   COMMENT SECTION
   .article-comments setzt scheme-community als Wrapper →
   --role-headings/text/background = community-Tokens (grün).
   Gilt unabhängig von der Artikelrolle des Parent-Artikels.
   ================================================ */

/* Kommentar-Textarea-Label ausblenden (via PHP nicht zuverlässig unterdrückbar) */
.article-comments .form-type-textarea > label,
#comment-reply-modal .form-type-textarea > label { display: none; }

/* Trennlinie beim letzten Kommentar aufheben (border-bottom via BS5-Utility) */
.article-comments .comment:last-of-type { border-bottom: none !important; }
.article-comments .comment--unpublished { opacity: .5; }

/* Avatar */
.article-comments .comment-avatar { display: inline-flex; }
.article-comments .comment-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--role-headings);
  object-fit: cover;
}
.article-comments .comment-avatar .field__label { display: none; }

/* Autorenname */
.article-comments .comment-author,
.article-comments .comment-author a:not(.btn) {
  color: var(--role-headings);
  font-family: var(--salto-font-serif);
  font-size: var(--fs-medium);
  font-weight: 600;
}

/* Datum */
.article-comments .comment-date {
  font-size: .85rem;
  color: var(--role-text);
  opacity: .65;
}

/* Kommentartext */
.article-comments .comment-body {
  font-family: var(--salto-font-serif);
  font-size: var(--fs-medium);
  line-height: var(--lh-medium);
  color: var(--role-text);
}

/* Verschachtelte Antworten: grüner Strich links */
.article-comments .indented {
  margin-left: .5rem !important;
  border-left: 2px solid var(--role-headings);
  padding-left: .75rem !important;
}

/* Links (Antworten, Melden, Permalink) — alle linksbündig nebeneinander */
.article-comments .comment-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.25rem;
}
.article-comments .comment-links ul.links {
  display: flex;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.article-comments .comment-links a,
.article-comments .comment-links ul.links a,
.article-comments .comment-links .ear-links a {
  font-size: 0.875rem;
  line-height: 1.8;
}

/* Comment Reply Modal */
#comment-reply-modal form {
  margin: 0;
}
#comment-reply-modal .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
#comment-reply-modal [type="submit"] {
  width: auto;
  padding-inline: 1rem;
}
#comment-reply-modal .comment-reply-cancel {
  margin-left: auto;
}

/* Bottom-Kommentarformular: Submit rechts, automatische Breite */
.article-comments .form-actions {
  display: flex;
  justify-content: flex-end;
}
.article-comments [type="submit"] {
  width: auto;
  padding-inline: 1rem;
}
#comment-reply-modal .comment-reply-loading {
  opacity: 0.5;
}

/* Kommentarformular: Format-Hinweise + Vorschau verstecken
   Zweifach abgesichert (PHP-seitig via hook_form_comment_form_alter + CSS) */
.article-comments .filter-guidelines,
.article-comments .filter-wrapper,
.article-comments .js-filter-wrapper,
.article-comments button#edit-preview,
#comment-reply-modal #edit-comment-body-0-format,
#comment-reply-modal .filter-guidelines,
#comment-reply-modal .filter-wrapper,
#comment-reply-modal .js-filter-wrapper,
#comment-reply-modal button#edit-preview { display: none !important; }

/* Submit-Button: btn + btn-role-primary via hook_form_comment_form_alter().
   Pillenform + Farbe kommen aus article-base.css (.btn) + schemes.css (.btn-role-primary). */

/* Entity-Abuse-Dialog: community-Farbe */
.ui-dialog button { background: var(--community-base) !important; }


/* ================================================
   TEASER HÖHE: h-100 durch Views-Wrapper durchreichen
   Alle drei Wrapper-Divs müssen height:100% haben damit
   h-100 auf dem <article> die volle Spalthöhe erreicht.
   ================================================ */
.teaser-view-slot .views-element-container,
.teaser-view-slot .view,
.teaser-view-slot .view-content { height: 100%; }
.ui-dialog-titlebar { background-color: var(--community-base); }

/* CTA free article: editor/external haben scheme-light ≈ weiß als Hintergrund
   (--neutral-light == Seiten-BG). Direkter Override nötig. */
.cta-free-article.scheme-editor,
.cta-free-article.scheme-external {
  background-color: var(--salto-medium) !important;
}