/*
 * DEPLA Theme Welle 2, Gruppe G2 Text (Besitz siehe docs/build/vertrag-welle-2.md)
 * Elemente: rsce_depla_heading, Core text, Core hyperlink (Variante depla_button),
 *           Core accordion (Variante depla, details/summary), Core image.
 * Doku und Messwerte: docs/build/elemente-g2.md. Nur Tokens aus tokens.css.
 */

/* ---------------------------------------------------------------------------
 * Ueberschrift (rsce_depla_heading)
 * Ebene ohne Groesse: Typografie des Tags aus base.css (inkl. Abstand unten).
 * Mit Groesse (lead-*, Klassen aus layout.css): Leadtext-Stufe, Abstand unten 0
 * wie die Legacy-Dachzeilen und Abschnittstitel; Abstaende dann per mb-*.
 * ------------------------------------------------------------------------ */

.c-heading {
  /* Legacy max_width 800 der Abschnittstitel (Messwert, kein Token) */
  --heading-narrow: 800px;
}

.c-heading--lead {
  margin-bottom: 0;
}

.c-heading--font-heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
}

.c-heading--font-body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
}

.c-heading--center {
  text-align: center;
  margin-inline: auto;
}

.c-heading--narrow {
  max-width: var(--heading-narrow);
}

/* Farbe des Elements vor der Abschnittsfarbe: layout.css setzt die Kinder der Farbklassen per :where()
 * (Spezifitaet 0,1,0), diese Datei laedt danach und gewinnt bei gleicher Spezifitaet. */
.c-heading--accent { color: var(--color-primary); }
.c-heading--white { color: var(--color-white); }
.c-heading--white-80 { color: var(--color-on-dark-strong); }

/* ---------------------------------------------------------------------------
 * Text (Core text, Klasse content-text)
 * Leadtext-Varianten (lead-* in cssID, Legacy text_extented): letzter Absatz ohne Abstand.
 * ------------------------------------------------------------------------ */

.content-text .rte :is(ul, ol) {
  padding-left: 26px;
}

/* Textfarbe des Elements (color-lightgray usw. am Text) setzt layout.css per :where(), kein eigener Workaround mehr
 * noetig (Welle 3, QA). */

/* strong/b fett: global in base.css (Welle 3, F1), der fruehere Workaround hier entfaellt */

.content-text .rte li {
  line-height: var(--lh-lead);
}

.content-text:is(.lead-xxs, .lead-xs, .lead-s, .lead-m, .lead-l) .rte > :last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Button (Core hyperlink, Variante content_element/hyperlink/depla_button)
 * Standard: Padding 12px 20px (ca. 57px hoch). btn-m (Legacy btn-size-medium): 8px 20px (ca. 49px).
 * Mobil bis 767px volle Breite wie live.
 * ------------------------------------------------------------------------ */

.c-button {
  display: inline-block;
  min-width: 140px;
  margin-bottom: var(--p-mb);
  padding: 12px 20px;
  border: 2px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: var(--fw-bold);
  /* live 28.8px wie der Fliesstext (Zeilenhoehe der Basisschrift, nicht der Buttonschrift) */
  line-height: calc(var(--fs-base) * var(--lh-base));
  text-align: center;
  transition: opacity var(--ease-fast);
}

.c-button:hover,
.c-button:focus-visible {
  opacity: var(--hover-opacity);
}

.btn-m .c-button {
  padding-block: 8px;
}

/* Abschnittsfarbe (.color-white a) darf die Buttonschrift nicht aendern */
.content-hyperlink .c-button {
  color: var(--color-white);
}

@media (max-width: 767px) {
  .c-button {
    display: block;
  }
}

/* ---------------------------------------------------------------------------
 * Akkordeon (Core accordion, Variante content_element/accordion/depla)
 * details/summary ohne JS. Messwerte Legacy style2: Toggler Open Sans 700 16px/30px,
 * Padding 16px 16px 16px 64px, Rahmen und Schatten, Icon 24px Kreis bei 20px,
 * offen orange mit weisser Schrift, Inhalt 25px oben und unten, 10px Abstand.
 * ------------------------------------------------------------------------ */

.c-accordion__item {
  margin-bottom: 10px;
}

.c-accordion__toggler {
  position: relative;
  display: block;
  padding: 16px 16px 16px 64px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-accordion);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 30px;
  list-style: none;
  cursor: pointer;
  transition: color var(--ease-base), background-color var(--ease-base);
}

.c-accordion__toggler::-webkit-details-marker {
  display: none;
}

.c-accordion__toggler:hover {
  color: var(--color-text-muted);
}

/* Titel im Toggler: Ebene fuer die Gliederung, Optik des Togglers */
.c-accordion__title {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* Icon: Kreis mit Plus (geschlossen) bzw. Minus (offen) */
.c-accordion__toggler::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 20px;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-circle);
  transform: translateY(-50%);
  background:
    linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat;
  color: var(--color-primary);
}

.c-accordion__item[open] > .c-accordion__toggler {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
}

.c-accordion__item[open] > .c-accordion__toggler::before {
  border-color: var(--color-white);
  color: var(--color-white);
  background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat;
}

.c-accordion__content {
  padding: 25px 0;
}

.c-accordion__content > :last-child,
.c-accordion__content > :last-child .rte > :last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Mobil: Leadtext-Stufe S bleibt live auf Desktopgroesse (26.67px), weil die Mobilregel
 * des Altsystems den Absatz nicht trifft. Sichtbares Verhalten hat Vorrang (ADR 0004 Punkt 9).
 * Betrifft Modelle (Unterzeile) und Digitale Welten (Einleitungstext).
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
  .c-heading.lead-s,
  .content-text.lead-s {
    font-size: var(--fs-lead-s);
  }
}