/* ============================================================================
   editorial.css — Layout-Pilot "Technisches Spritzgiessen" (Welle WL-1)
   ----------------------------------------------------------------------------
   Auftrag (Auftraggeber, 20.08.2026): "Die Mercedes-Benz-Seite lebt davon, dass
   Textelemente auch mal kleiner sind, dass es auch mal Vierspalter gibt. Die
   Typo ist insgesamt etwas kleiner, dafuer in der Farbe besser lesbar und nicht
   zu hellgrau."

   Diese Datei liefert dafuer eine EDITORIALE Zwischenstufe zwischen der
   Sektionstypografie aus base.css (H2 28-40 px, Fliesstext 16 px) und den
   Feintexten. Drei Stufen, konsequent durchgehalten:

     Stufe        Groesse   Farbe                Wo
     -----------  --------  -------------------  ---------------------------
     Editorial-   15 px     --feb-grey-800       ed_intro, ed_tabs,
     Fliesstext             (#1F2326, 16,1:1)    Text-Bild-Module
     Kleintext    14 px     --feb-grey-600       ed_columns, ed_table,
                            (#4C5257,  7,9:1)    FAQ-Antworten, Stat-Text
     Kicker/Kopf  12 px     --feb-grey-600       Kicker, Tabellenkopf

   "Nicht zu hellgrau" ist damit messbar erfuellt: der hellste hier benutzte
   Textwert ist grey-600 mit 7,92:1 auf Weiss und 7,25:1 auf grey-50 — beides
   AAA fuer Fliesstext. grey-400/300/500 kommen als Text NICHT vor; grey-200
   ausschliesslich als dekorative Haarlinie.

   Alle Werte kommen aus tokens.css. Kein Hex-Wert, kein Verlauf, kein Schatten.
   Radius 0 gilt nur fuer die echten Bedienelemente (Tab-Buttons,
   Akkordeon-Kopfzeilen); Text-Chips waeren Pills (.brm-pill) — auf dieser Seite
   kommt keiner vor.

   AUFBAU
     1  Gemeinsame Editorial-Ebene (.brm-ed)
     2  Kicker
     3  ed_intro    — Einordnung, asymmetrisch zweispaltig
     4  ed_columns  — randlose Spalten (der Vierspalter)
     5  ed_tabs     — Tabs, mobil horizontal scrollbar
     6  ed_table    — Anwendungstabelle, mobil gestapelt
     7  Editorial-Scope (body.brm-editorial) — Bestandsbundles (Text-Bild, Stats, FAQ)
     8  reduced-motion

   Abschnitt 7 ist bewusst auf body.brm-editorial geklammert. Er stilisiert
   Bestands-Bundles um (media_left/media_right, stats, accordion), die auf
   anderen Knoten unveraendert bleiben muessen, solange der Pilot nicht
   freigegeben ist. Zum Ausrollen auf weitere Technologieseiten genuegt es,
   die Selektorliste in Abschnitt 7 um die jeweiligen page-node-<nid> zu
   erweitern oder die Klammer ganz zu entfernen. Die Abschnitte 1-6 sind
   bundle-gebunden und damit ohne Aenderung uebertragbar.
   ========================================================================== */

/* ============================================================================
   1  Gemeinsame Editorial-Ebene
   ========================================================================== */

.brm-ed {
  /* Lokale Ableitungen; ausserhalb von .brm-ed aendert sich nichts. */
  --brm-ed-text: var(--feb-grey-800);
  --brm-ed-text-small: var(--feb-grey-600);
  --brm-ed-rule: var(--feb-border);
  --brm-ed-rule-strong: var(--feb-grey-400);
}

/* Editorialer Fliesstext: eine Stufe unter dem Standard-Fliesstext, dafuer
   mit mehr Zeilenabstand und knapperem Mass. */
.brm-ed .brm-ed-prose,
.brm-ed .brm-ed-prose p,
.brm-ed .brm-ed-prose li {
  font-family: var(--feb-t-font-text);
  font-size: 0.9375rem;   /* 15 px */
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--brm-ed-text);
}

.brm-ed .brm-ed-prose {
  max-width: 60ch;
}

/* Drupal legt um jedes Textfeld noch einen .field__item-Wrapper. Ein
   Kindselektor auf .brm-ed-prose trifft deshalb nur diesen Wrapper und nie
   die Absaetze darin — die standen bis hierher ohne Abstand aufeinander.
   Beide Ebenen ansprechen loest das, ohne globale p-Margins einzufuehren. */
.brm-ed .brm-ed-prose > * + *,
.brm-ed .brm-ed-prose > .field__item > * + *,
.brm-ed .brm-ed-prose > .field > * + *,
.brm-ed .brm-ed-prose > .field .field__item > * + * {
  margin-top: var(--feb-space-4);
}

.brm-ed .brm-ed-prose ul,
.brm-ed .brm-ed-prose ol {
  padding-inline-start: 1.15em;
  margin-block: 0;
}

.brm-ed .brm-ed-prose li + li {
  margin-top: var(--feb-space-2);
}

.brm-ed .brm-ed-prose strong {
  font-weight: var(--feb-fw-semibold);
  color: var(--feb-text);
}

/* ============================================================================
   2  Kicker

   Kleine Auszeichnungszeile in Inter, nicht in Guton — Guton bleibt den
   Ueberschriften vorbehalten. Kein Kasten, kein Chip: ein schlichtes Wort,
   wie es die Design-Regel fuer nicht-interaktive Auszeichnungen vorsieht.
   ========================================================================== */

.brm-ed-kicker {
  display: block;
  margin: 0 0 var(--feb-space-3);
  font-family: var(--feb-t-font-text);
  font-size: 0.75rem;     /* 12 px */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brm-ed-text-small);
}

/* Sektions-Lead: base.css fuehrt ihn auf der Lead-Stufe (17-20 px). In den
   Editorial-Sektionen laeuft er eine Stufe darunter — sonst waere die Zeile
   ueber einem 14-px-Raster groesser als alles, was sie ankuendigt. */
.brm-ed .brm-section-header .field--name-field-lead,
.brm-ed .brm-section-header .field--name-field-lead > p {
  font-size: 0.9375rem;   /* 15 px */
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--brm-ed-text);
}

.brm-ed .brm-section-header {
  margin-bottom: var(--feb-space-7);
  max-width: 44rem;
}

/* ============================================================================
   3  ed_intro — Einordnung

   MB-Muster: links schmal Kicker + Ueberschrift, rechts breit der Text. Eine
   Haarlinie ueber dem Block setzt die Zaesur, ohne eine Flaeche zu brauchen.
   ========================================================================== */

.brm-ed-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--feb-space-5);
  border-top: var(--feb-hairline-width) solid var(--brm-ed-rule-strong);
  padding-top: var(--feb-space-6);
}

@media (min-width: 62rem) {
  .brm-ed-intro__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--feb-space-9);
    padding-top: var(--feb-space-7);
  }
}

.brm-ed-intro__title {
  margin: 0;
  font-family: var(--feb-t-font-title);
  /* Eine Stufe unter der Standard-H2 (28-40 px): der Einstieg soll ruhig
     einordnen, nicht die Seite anfuehren — das tut der Hero darueber. */
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);   /* 24 -> 32 px */
  font-weight: var(--feb-t-fw-title-mid);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--feb-text);
  text-wrap: balance;
}

/* Bewusst NICHT sticky: der Block ist kurz, ein mitlaufender Titel haette
   nichts zu begleiten — und sticky verschiebt die Zeile in Vollseiten-
   Renderings sichtbar nach unten. */
.brm-ed-intro__aside {
  align-self: start;
}

.brm-ed-intro__body {
  max-width: 62ch;
}

/* ============================================================================
   4  ed_columns — randlose Spalten (der Vierspalter)

   Keine Karte, kein Rahmen, kein Schatten: nur eine Haarlinie ueber jeder
   Spalte, 18 px Ueberschrift, 14 px Text. Umbruch 4 -> 2 -> 1.
   ========================================================================== */

.brm-ed-columns__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--feb-space-6) var(--feb-space-7);
}

@media (min-width: 40rem) {
  .brm-ed-columns__grid--2,
  .brm-ed-columns__grid--3,
  .brm-ed-columns__grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .brm-ed-columns__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .brm-ed-columns__grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.brm-ed-col {
  border-top: var(--feb-hairline-width) solid var(--brm-ed-rule-strong);
  padding-top: var(--feb-space-4);
}

.brm-ed-col__title {
  margin: 0 0 var(--feb-space-3);
  font-family: var(--feb-t-font-text);
  font-size: 1.125rem;    /* 18 px */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--feb-text);
  text-wrap: balance;
}

.brm-ed-col__text,
.brm-ed-col__text p,
.brm-ed-col__text li {
  font-family: var(--feb-t-font-text);
  font-size: 0.875rem;    /* 14 px */
  line-height: 1.65;
  color: var(--brm-ed-text-small);
}

.brm-ed-col__text > * {
  margin: 0;
}

.brm-ed-col__text > * + * {
  margin-top: var(--feb-space-3);
}

.brm-ed-col__link {
  margin: var(--feb-space-4) 0 0;
  font-size: 0.875rem;
}

/* ============================================================================
   5  ed_tabs

   Optik: eine Zeile Reiter ueber einer Haarlinie, aktiver Reiter durch eine
   2-px-Kante in Akzentblau markiert. Akzentblau ist hier zulaessig — es ist
   ein Aktiv-Zustand eines echten Bedienelements, keine Flaeche.

   Die Reiter sind echte <button>, also Radius 0 (Design-Regel). Verhalten und
   ARIA kommen vom Bootstrap-Tab-Plugin, siehe Template-Kommentar.
   ========================================================================== */

.brm-ed-tabs__bar {
  border-bottom: var(--feb-hairline-width) solid var(--brm-ed-rule-strong);
}

.brm-ed-tabs__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--feb-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  /* Die Leiste scrollt auf schmalen Viewports; die Scrollbar selbst wuerde
     die Kante doppeln, deshalb ausgeblendet. Der Scrollzustand bleibt ueber
     den angeschnittenen naechsten Reiter erkennbar. */
  scrollbar-width: none;
}

.brm-ed-tabs__list::-webkit-scrollbar {
  display: none;
}

.brm-ed-tabs__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.brm-ed-tabs__tab {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  margin: 0;
  padding: var(--feb-space-3) 0;
  min-height: 2.75rem;   /* 44 px Trefferflaeche */
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--feb-radius);
  font-family: var(--feb-t-font-text);
  font-size: 0.9375rem;  /* 15 px */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--brm-ed-text-small);
  cursor: pointer;
  transition: color var(--feb-dur-base) var(--feb-ease),
              border-color var(--feb-dur-base) var(--feb-ease);
}

.brm-ed-tabs__tab:hover {
  color: var(--feb-text);
  border-bottom-color: var(--brm-ed-rule-strong);
}

.brm-ed-tabs__tab.active,
.brm-ed-tabs__tab[aria-selected="true"] {
  color: var(--feb-text);
  border-bottom-color: var(--feb-accent);
}

.brm-ed-tabs__panels {
  padding-top: var(--feb-space-6);
}

.brm-ed .brm-ed-tabs__prose {
  max-width: 66ch;
}

/* Zweispaltig, sobald Platz ist: ein Tab-Inhalt aus zwei bis drei Absaetzen
   liest sich in zwei schmalen Spalten wie ein Zeitungsblock — genau der
   editoriale Eindruck, um den es geht. Listen bleiben einspaltig, weil sie
   sonst ueber die Spaltengrenze brechen. */
@media (min-width: 62rem) {
  .brm-ed .brm-ed-tabs__prose {
    max-width: none;
    columns: 2;
    column-gap: var(--feb-space-9);
  }

  .brm-ed-tabs__prose > * {
    break-inside: avoid;
  }

  .brm-ed-tabs__prose > *:first-child {
    margin-top: 0;
  }
}

/* ============================================================================
   6  ed_table — Anwendungstabelle

   14 px, Haarlinien statt Rahmen, keine Zebra-Flaeche. Der Spaltenkopf laeuft
   als 12-px-Versalzeile mit Sperrung — dieselbe Stufe wie der Kicker, damit
   die Seite nicht eine dritte Auszeichnungsgroesse bekommt.
   ========================================================================== */

.brm-ed-table__wrap {
  overflow-x: auto;
}

/* bootstrap_barrio bringt eine eigene, sehr alte Tabellenoptik mit
   (components/table.css): graue Zeilenflaeche, dunkelgraue Kopfzellen mit
   weisser Schrift, weisse 1-px-Rahmen um jede Zelle, 10 px Aussenabstand.
   Die Selektoren dort sind Element-Selektoren (tr, table tr th), also
   schwaecher als die Klassen hier — sie muessen aber ausdruecklich
   zurueckgesetzt werden, weil sie Eigenschaften setzen, die diese Datei
   sonst gar nicht anfasst. */
.brm-ed-table__table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  background: transparent;
  font-family: var(--feb-t-font-text);
  font-size: 0.875rem;   /* 14 px */
  line-height: 1.6;
}

.brm-ed-table__table tr,
.brm-ed-table__table thead tr,
.brm-ed-table__table th,
.brm-ed-table__table td {
  background: transparent;
  border: 0;
}

.brm-ed-table__th {
  text-align: start;
  vertical-align: bottom;
  padding: 0 var(--feb-space-5) var(--feb-space-3) 0;
  font-size: 0.75rem;    /* 12 px */
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brm-ed-text-small);
  border-bottom: var(--feb-hairline-width) solid var(--brm-ed-rule-strong);
}

/* font-size steht hier ausdruecklich, obwohl die Tabelle sie schon setzt:
   style.css fuehrt "table, th, td { font-size: ... }" als ELEMENT-Regel und
   dreht sie ab 992 px auf 18 px, ab 1400 px auf 20 px hoch. Vererbung von der
   <table> verliert gegen eine direkte Regel auf td/th — die Zellen liefen
   dadurch auf 20 px statt auf den vorgesehenen 14. */
.brm-ed-table__rowhead,
.brm-ed-table__cell {
  text-align: start;
  vertical-align: top;
  padding: var(--feb-space-4) var(--feb-space-5) var(--feb-space-4) 0;
  font-size: 0.875rem;   /* 14 px */
  line-height: 1.6;
  border-bottom: var(--feb-hairline-width) solid var(--brm-ed-rule);
}

.brm-ed-table__rowhead {
  font-weight: 600;
  color: var(--feb-text);
  width: 28%;
}

.brm-ed-table__cell {
  font-weight: 400;
  color: var(--brm-ed-text-small);
}

.brm-ed-table__th:last-child,
.brm-ed-table__cell:last-child {
  padding-inline-end: 0;
}

/* Mobil: gestapelte Bloecke statt Querscrollen. Der Spaltenname kommt aus
   data-col, deshalb traegt ihn das Template zusaetzlich als Attribut. */
@media (max-width: 47.99rem) {
  .brm-ed-table__table,
  .brm-ed-table__table tbody,
  .brm-ed-table__row,
  .brm-ed-table__rowhead,
  .brm-ed-table__cell {
    display: block;
    width: auto;
  }

  .brm-ed-table__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .brm-ed-table__row {
    border-top: var(--feb-hairline-width) solid var(--brm-ed-rule-strong);
    padding-block: var(--feb-space-4);
  }

  .brm-ed-table__row:first-child {
    border-top: 0;
  }

  .brm-ed-table__rowhead,
  .brm-ed-table__cell {
    padding: 0;
    border-bottom: 0;
  }

  .brm-ed-table__rowhead {
    font-size: 1rem;
    margin-bottom: var(--feb-space-3);
  }

  .brm-ed-table__cell + .brm-ed-table__cell,
  .brm-ed-table__rowhead + .brm-ed-table__cell {
    margin-top: var(--feb-space-3);
  }

  .brm-ed-table__cell::before {
    content: attr(data-col);
    display: block;
    margin-bottom: var(--feb-space-1);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brm-ed-text-small);
  }
}

/* ============================================================================
   7  Pilot-Scope Node 93 — Bestands-Bundles auf die Editorial-Stufe ziehen

   Diese Regeln greifen ausschliesslich auf /de/technologie/technisches-
   spritzgiessen. Sie betreffen Bundles, die auf anderen Knoten unveraendert
   bleiben muessen, solange der Pilot nicht freigegeben ist.
   ========================================================================== */

/* --- 7.1  Text-Bild-Module: Bild 7/12, Text 5/12 ---------------------------
   Bestand ist 1fr 1fr. Das MB-Muster gibt dem Bild mehr Raum als dem Text und
   laesst den Text dadurch als Beischrift wirken. Beide Varianten bekommen das
   BILD auf 7/12 — bei media_right steht das Bild in der zweiten Spalte. */
@media (min-width: 62rem) {
  body.brm-editorial .paragraph-media-side--media-left .paragraph-media-side__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--feb-space-8);
  }

  body.brm-editorial .paragraph-media-side--media-right .paragraph-media-side__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--feb-space-8);
  }
}

/* Ueberschrift eine Stufe kleiner, Fliesstext auf die Editorial-Stufe. */
body.brm-editorial .paragraph-media-side__headline {
  font-family: var(--feb-t-font-title);
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);   /* 24 -> 32 px */
  font-weight: var(--feb-t-fw-title-mid);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-block-end: var(--feb-space-4);
  text-wrap: balance;
}

body.brm-editorial .paragraph-media-side__body .brm-prose,
body.brm-editorial .paragraph-media-side__body .brm-prose p,
body.brm-editorial .paragraph-media-side__body .brm-prose li {
  font-size: 0.9375rem;   /* 15 px */
  line-height: 1.7;
  color: var(--feb-grey-800);
}

/* Derselbe Absatzabstands-Fix wie in Abschnitt 1, hier fuer die
   Bestands-Prosabloecke dieser Seite. Der fehlende Abstand zwischen zwei
   Absaetzen in einem .brm-prose ist ein THEME-WEITES Thema (jeder mehrteilige
   Fliesstext im Bestand ist betroffen) — UEBERGABE Chefarchitekt. */
body.brm-editorial .brm-prose > .field__item > * + *,
body.brm-editorial .brm-prose > .field > * + *,
body.brm-editorial .brm-prose > .field .field__item > * + * {
  margin-top: var(--feb-space-4);
}

/* --- 7.2  Zweispaltiger Textblock (text_two_col) -------------------------- */
body.brm-editorial .paragraph-type--text-two-col .brm-prose,
body.brm-editorial .paragraph-type--text-two-col .brm-prose p,
body.brm-editorial .paragraph-type--text-two-col .brm-prose li {
  font-size: 0.9375rem;   /* 15 px */
  line-height: 1.7;
  color: var(--feb-grey-800);
}

/* --- 7.3  Prozess-Stats: Beschreibungstext auf Kleintext ------------------ */
body.brm-editorial .paragraph-type--stats .paragraph-stats__desc,
body.brm-editorial .paragraph-type--stats .paragraph-stats__desc p {
  font-size: 0.875rem;    /* 14 px */
  line-height: 1.65;
  color: var(--feb-grey-600);
}

/* --- 7.4  FAQ-Akkordeon auf grauem Grund ----------------------------------
   Das Bestands-Bundle "accordion" hat als einziges der hier benutzten Bundles
   KEIN field_background — die Flaechenfarbe laesst sich also nicht wie sonst
   ueber den Bestandsmechanismus (.bg-light) setzen. Sie kommt deshalb hier,
   mit demselben Token, das .bg-light benutzt (--feb-grey-50). Sauberer waere
   ein field_background am Bundle accordion; das ist eine Aenderung an einem
   gemeinsam genutzten Bundle und liegt ausserhalb dieses Reviers
   (UEBERGABE Chefarchitekt).

   Der Rest sind Typo und Chevron.

   Die Kopfzeilen sind echte <button> und bleiben deshalb eckig (Radius 0) und
   ohne Rahmen — genau der Fall, den die Design-Regel fuer Radius 0 vorsieht.
   Das Chevron ist ein eigenes Inline-SVG als data-URI in --feb-ink; das
   Bootstrap-Standardicon traegt eine eigene Farbe und passt nicht zur
   monochromen Ebene. Bootstrap dreht es beim Oeffnen um 180 Grad. */
body.brm-editorial .paragraph-type--accordion {
  background-color: var(--feb-grey-50);
}

body.brm-editorial .paragraph-type--accordion .paragraph-accordion__list {
  --bs-accordion-border-color: var(--feb-grey-200);
  --bs-accordion-bg: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23131619' stroke-width='1.5'%3e%3cpath d='M2.5 5.5 8 11l5.5-5.5'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23131619' stroke-width='1.5'%3e%3cpath d='M2.5 5.5 8 11l5.5-5.5'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-width: 1rem;
}

body.brm-editorial .paragraph-type--accordion .accordion-button {
  font-family: var(--feb-t-font-text);
  font-size: 1.0625rem;   /* 17 px statt 18 */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--feb-text);
  padding-block: var(--feb-space-4);
  padding-inline: 0;
  border-radius: var(--feb-radius);
  background: transparent;
  box-shadow: none;
}

body.brm-editorial .paragraph-type--accordion .accordion-button:not(.collapsed) {
  color: var(--feb-text);
  background: transparent;
  box-shadow: none;
}

body.brm-editorial .paragraph-type--accordion .accordion-body,
body.brm-editorial .paragraph-type--accordion .accordion-body p,
body.brm-editorial .paragraph-type--accordion .accordion-body li {
  font-size: 0.875rem;    /* 14 px */
  line-height: 1.7;
  color: var(--feb-grey-600);
}

body.brm-editorial .paragraph-type--accordion .accordion-body {
  padding-inline: 0;
  padding-block: 0 var(--feb-space-5);
  max-width: 68ch;
}

/* --- 7.4b  Sektionsueberschriften eine Stufe kleiner -----------------------
   base.css fuehrt die Sektions-H2 auf 28-40 px. Auf dieser Seite laufen sie
   eine Stufe darunter (26-36 px), damit die Ueberschriften nicht doppelt so
   gross sind wie das 14-18-px-Raster, das sie ankuendigen. Guton, Gewicht und
   Laufweite bleiben unveraendert — nur der Grad wandert. */
body.brm-editorial .brm-section-header .field--name-field-headline,
body.brm-editorial .brm-section-header__title {
  font-size: clamp(1.625rem, 1.25rem + 1.3vw, 2.25rem);   /* 26 -> 36 px */
}

/* --- 7.5  Sektionsrhythmus -------------------------------------------------
   Die Seite traegt nach dem Umbau mehr Sektionen als vorher. Damit sie nicht
   laenger wird als noetig, laufen die reinen Textsektionen im knapperen
   Sektionsmass; Bild- und Flaechensektionen behalten das volle. */
body.brm-editorial .paragraph-type--ed-intro,
body.brm-editorial .paragraph-type--ed-columns,
body.brm-editorial .paragraph-type--ed-table,
body.brm-editorial .paragraph-type--text-two-col {
  padding-block: var(--feb-section-y-tight);
}

/* ============================================================================
   8  reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .brm-ed-tabs__tab {
    transition: none;
  }

  .brm-ed-tabs__list {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
}