/**
 * @file css/redesign/base.css - Redesign Welle R2a / Typo-Nachschaerfung W4-2
 *
 * Schrift-Balancing nach dem Vorbild mercedes-benz.de (Kundenanmerkung
 * 2a11d886) plus die vom Auftraggeber nachgereichte Titelschrift "Guton".
 *
 * ------------------------------------------------------------------
 * DAS PRINZIP (aus den Live-Messwerten von mercedes-benz.de abgeleitet,
 * $SP/umbau/mb-typo-messwerte.md)
 * ------------------------------------------------------------------
 * MB baut Hierarchie NICHT ueber Fette, sondern ueber
 *   (a) Groessensprung,
 *   (b) Schriftwechsel Titelschrift <-> Textschrift,
 *   (c) straffe Zeilenabstaende (1,05-1,25 im Headline-Bereich).
 * Gemessen (Workbench-Tokens, Mobile-Breakpoint):
 *   wb-heading-xl  40/48  400   MBCorpo Title   (h1 Stage)
 *   wb-heading-l   32/40  400   MBCorpo Title   (Sektion, margin-bottom 24)
 *   wb-heading-m   26/32  400   MBCorpo Title   (Kartentitel, mb 4)
 *   wb-text-l      16/24  400   MBCorpo Text    (Stage-Subline)
 *   wb-text-l-strong 16/24 700  MBCorpo Text    (Subheadline - klein+fett)
 *   wb-text-m      14/22  400   MBCorpo Text    (Fliesstext)
 *   wb-text-s      12/16  400   MBCorpo Text
 * Erst die KLEINE Auszeichnung laeuft fett, nie die Headline.
 * Desktop-Deckel der Titelschrift laut Workbench-Doku: 64 px,
 * durchgaengig Gewicht 400.
 *
 * Uebersetzung auf febana:
 *   Guton    = "MBCorpo Title"  -> Display, H1, alle grossen Sektions-H2
 *   Inter    = "MBCorpo Text"   -> H3 abwaerts, Kartentitel, Lead, Body,
 *                                  Menue, Buttons, Labels, Formulare
 * Guton laeuft in 400 (Display/H1) und 500 (H2). Kein Gewicht ueber 600
 * in der Titelschrift, keine Versalien ausser im Eyebrow.
 *
 * Optische Kompensation: Guton hat cap-height 0,630 em / x-height 0,477 em
 * (gemessen aus der TTF), Inter 0,727 / 0,546. Bei gleichem font-size
 * erscheint Guton also rund 13 % kleiner. Die Guton-Grade liegen deshalb
 * systematisch ~11 % ueber den MB-Messwerten - dadurch stimmt die
 * VERSALHOEHE mit MB ueberein, nicht die nackte px-Zahl.
 *
 * ------------------------------------------------------------------
 * TOKEN-NAMENSRAUM
 * ------------------------------------------------------------------
 * Die neue Skala steht bewusst unter --feb-t-* und nicht unter
 * --feb-fs-, --feb-lh-, --feb-ls-: css/redesign/tokens.css gehoert
 * W4-1, und Buttons/Header/Footer konsumieren die dortigen Werte. Ein
 * stilles Umdefinieren haette diese Arbeit mitgezogen. UEBERGABE an
 * W4-1: die --feb-t-*-Werte koennen 1:1 nach tokens.css wandern, die
 * --feb-fs-*-Tokens dann darauf mappen.
 *
 * Laedt nach css/redesign/tokens.css und ueberschreibt gezielt Regeln aus
 * css/style.min.css. Rein additiv.
 *
 * Bewusst NICHT enthalten (andere Zustaendigkeit):
 *   - Buttons/CTAs .............. css/redesign/buttons.css (W4-1)
 *   - Header/Footer/Megamenue ... css/redesign/header-footer.css (W4-1)
 *   - Bild/Video ................ css/redesign/media.css (W4-3)
 *   - Komponenten ............... css/redesign/components.css (W4-4)
 *   - Struktur/Markup ........... css/redesign/structure.css (W4-9)
 *   - Kennwerte (.stat-value, .feb-cert-stat-value): eigene Klasse,
 *     laut Auftrag ausdruecklich KEINE Ueberschrift.
 */

/* ============================================================
   0. Titelschrift Guton (self-hosted)

   Vier Schnitte liegen auf dem Server; deklariert werden drei:
     400 Regular  - Display/H1 (MB-Muster: grosse Headline in 400)
     500 Medium   - H2, optische Kompensation im mittleren Grad
     600 SemiBold - Sicherheitsnetz. Bestehende Inline-Sektionen
                    fordern teils font-weight 700; ohne einen realen
                    Schnitt >= 600 wuerde der Browser einen
                    Kunst-Fettschnitt aus dem Medium rechnen. Mit dem
                    600er greift die CSS-Font-Matching-Regel und waehlt
                    einen echten Schnitt. Guton-Bold.woff2 bleibt
                    ungenutzt und undeklariert.

   Pfad ist relativ zu DIESER Datei (css/redesign/) - deshalb ../../ .
   ============================================================ */

@font-face {
  font-family: "Guton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/Guton/Guton-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Guton";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../fonts/Guton/Guton-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Guton";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/Guton/Guton-SemiBold.woff2") format("woff2");
}

/* ============================================================
   1. Typo-Skala W4-2
   ============================================================ */

:root {
  /* -- Familien ------------------------------------------------ */
  --feb-t-font-title: "Guton", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --feb-t-font-text:  var(--feb-font-sans);

  /* -- Grade (Rampe 360 -> 1440 px Viewport) -------------------- */
  /* Guton-Grade. MB-Bezug jeweils in Klammern (Mobile -> Desktop). */
  --feb-t-fs-display: clamp(2.75rem,  2.1667rem + 2.5926vw, 4.5rem);   /* 44 -> 72  (MB 40 -> 64, +11 % Cap-Ausgleich) */
  --feb-t-fs-h1:      clamp(2.25rem,  1.8333rem + 1.8519vw, 3.5rem);   /* 36 -> 56  (MB-Stage eine Stufe unter Display) */
  --feb-t-fs-h2:      clamp(2rem,     1.625rem  + 1.6667vw, 3.125rem); /* 32 -> 50  (MB 32 -> 48) */
  /* Inter-Grade */
  --feb-t-fs-h3:      clamp(1.25rem,  1.1667rem + 0.3704vw, 1.5rem);   /* 20 -> 24  (MB Subheadline 20/28) */
  --feb-t-fs-card:    clamp(1.125rem, 1.0833rem + 0.1852vw, 1.25rem);  /* 18 -> 20  (Stufe unter der Subheadline) */
  --feb-t-fs-h4:      clamp(1.0625rem, 1.0208rem + 0.0926vw, 1.125rem);/* 17 -> 18 */
  --feb-t-fs-h5:      1rem;        /* 16 */
  --feb-t-fs-h6:      0.9375rem;   /* 15 */
  --feb-t-fs-lead:    clamp(1.0625rem, 1rem + 0.2778vw, 1.25rem);      /* 17 -> 20 */
  --feb-t-fs-body:    1rem;        /* 16 - bewusst ueber MB (14), s. Abweichungen */
  --feb-t-fs-sm:      0.875rem;    /* 14 */
  --feb-t-fs-xs:      0.8125rem;   /* 13 */
  --feb-t-fs-eyebrow: 0.8125rem;   /* 13 */

  /* -- Gewichte ------------------------------------------------- */
  --feb-t-fw-title:     400;  /* Display/H1 - MB laeuft hier in 400 */
  --feb-t-fw-title-mid: 500;  /* H2 - optischer Ausgleich im kleineren Grad */
  --feb-t-fw-sub:       600;  /* H3 abwaerts, Kartentitel, Eyebrow */
  --feb-t-fw-body:      400;

  /* -- Zeilenabstaende (MB: 1,05-1,25 im Headline-Bereich) ------ */
  --feb-t-lh-display: 1.06;
  --feb-t-lh-h1:      1.10;
  --feb-t-lh-h2:      1.18;   /* MB 1,25 mobil / ~1,15 Desktop */
  --feb-t-lh-h3:      1.30;   /* MB Subheadline 20/28 = 1,40 */
  --feb-t-lh-card:    1.30;
  --feb-t-lh-h4:      1.40;
  --feb-t-lh-lead:    1.55;   /* MB wb-text-l misst 16/24 = 1,50 */
  --feb-t-lh-body:    1.60;   /* MB wb-text-m 14/22 = 1,571 */
  --feb-t-lh-sm:      1.55;

  /* -- Laufweiten ----------------------------------------------- */
  /* MB misst "normal" - MBCorpo Title bringt die Display-Enge schon
     mit. Guton hat mit 0,172 em Seitenweiss am H eine breitere
     Grundspationierung; die kleinen negativen Werte holen genau das
     zurueck und sind kein "Trackingeffekt". */
  --feb-t-ls-display: -0.020em;
  --feb-t-ls-h1:      -0.018em;
  --feb-t-ls-h2:      -0.012em;
  --feb-t-ls-h3:      -0.010em;
  --feb-t-ls-card:    -0.010em;
  --feb-t-ls-h4:      -0.005em;
  --feb-t-ls-body:     0em;
  --feb-t-ls-eyebrow:  0.14em;

  /* -- Headline-Margins (MB: knapp; Luft kommt aus dem Sektions-
        padding, nicht aus den Ueberschriften) --------------------- */
  --feb-t-mb-h1:   clamp(1.5rem,  1.3333rem + 0.7407vw, 2rem);     /* 24 -> 32 */
  --feb-t-mb-h2:   clamp(1.25rem, 1.0833rem + 0.7407vw, 1.75rem);  /* 20 -> 28  (MB misst 24 mobil) */
  --feb-t-mb-h3:   0.75rem;  /* 12 */
  --feb-t-mb-h4:   0.75rem;  /* 12 */
  --feb-t-mb-h5:   0.5rem;   /* 8  */
}

/* ============================================================
   2. Grundflaeche und Fliesstext
   ============================================================ */

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-body);
  font-weight: var(--feb-t-fw-body);
  line-height: var(--feb-t-lh-body);
  letter-spacing: var(--feb-t-ls-body);
  color: var(--feb-text);
  background-color: var(--feb-surface);
  /* Inter: offenes a/g, klare Ziffern */
  font-feature-settings: "cv05" 1, "ss01" 1;
  text-rendering: optimizeLegibility;
  scrollbar-color: var(--feb-grey-300) transparent;
}

::selection {
  background-color: var(--feb-ink);
  color: var(--feb-white);
}

.feb-on-dark ::selection,
.feb-section--ink ::selection,
.paragraph-section.bg-dark ::selection,
.brm-footer ::selection {
  background-color: var(--feb-white);
  color: var(--feb-ink);
}

/* ============================================================
   3. Ueberschriften h1-h6

   Das Kompilat staffelt h1-h6 ueber vier Media-Queries (768/992/1200/
   1400 px) bis hinauf zu h1 = 96 px. Weil diese Datei spaeter laedt und
   die Selektoren gleich spezifisch sind, gewinnen die folgenden Regeln
   unabhaengig vom Viewport - die fluide clamp()-Rampe ersetzt die
   Stufenschaltung.

   Absichtliche Abweichung zur Spezifikation: das dort vorgesehene
   max-width (20ch/24ch) wird NICHT auf die blanken Elemente h1/h2
   gelegt. Zahlreiche Inline-HTML-Sektionen zentrieren ihre eigenen
   Ueberschriften; ein Textmass auf dem Element wuerde sie aus der Mitte
   ruecken. Das Mass steht ueber die Opt-in-Klassen .feb-h1/.feb-h2/
   .feb-display zur Verfuegung.
   ============================================================ */

/* Farbe: inherit, NICHT var(--feb-text).

   Befund W4-3: eine harte Ueberschriftenfarbe schlaegt die Vererbung
   content-gebauter Dunkelsektionen. Auf /de/unternehmen/haeufige-fragen
   setzt `.faq-hero { color:#fff; background: Ink }` die Textfarbe am
   Container; die H1 traegt selbst keine Farbe. Eine Regel
   `h1 { color: var(--feb-text) }` zwang sie trotzdem auf Ink - Ink auf
   Ink, Kontrast 1,00:1, die Ueberschrift war unsichtbar.

   `inherit` loest beide Faelle ohne Ausnahmeliste:
     - auf Weiss erbt die Ueberschrift die Body-Farbe (= --feb-text = Ink),
     - in jedem Dunkelkontext die dort gesetzte helle Farbe, gleich ob
       der Kontext ueber den Token-Scope aus tokens.css (.bg-dark,
       .feb-on-dark, .brm-footer) oder ueber ein hartes color:#fff einer
       Inline-Sektion (.faq-hero, .final-cta) kommt.
   Die Theme-Klassen weiter unten (Sektionstitel, Kartentitel) behalten
   ihr explizites var(--feb-text): sie stehen ausschliesslich in
   Theme-Paragraphen, deren Dunkelvarianten der Token-Scope abdeckt. */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  color: inherit;
  text-wrap: balance;
}

/* -- Titelschrift-Ebene: Display, H1, H2 --------------------- */

h1, .h1 {
  font-family: var(--feb-t-font-title);
  font-size: var(--feb-t-fs-h1);
  font-weight: var(--feb-t-fw-title);
  line-height: var(--feb-t-lh-h1);
  letter-spacing: var(--feb-t-ls-h1);
  margin-bottom: var(--feb-t-mb-h1);
}

h2, .h2 {
  font-family: var(--feb-t-font-title);
  font-size: var(--feb-t-fs-h2);
  font-weight: var(--feb-t-fw-title-mid);
  line-height: var(--feb-t-lh-h2);
  letter-spacing: var(--feb-t-ls-h2);
  margin-bottom: var(--feb-t-mb-h2);
}

/* -- Textschrift-Ebene: H3 abwaerts (MB: klein + fett) ------- */

h3, .h3 {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-h3);
  font-weight: var(--feb-t-fw-sub);
  line-height: var(--feb-t-lh-h3);
  letter-spacing: var(--feb-t-ls-h3);
  margin-bottom: var(--feb-t-mb-h3);
}

h4, .h4 {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-h4);
  font-weight: var(--feb-t-fw-sub);
  line-height: var(--feb-t-lh-h4);
  letter-spacing: var(--feb-t-ls-h4);
  margin-bottom: var(--feb-t-mb-h4);
}

h5, .h5 {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-h5);
  font-weight: var(--feb-t-fw-sub);
  line-height: var(--feb-t-lh-h4);
  letter-spacing: 0;
  margin-bottom: var(--feb-t-mb-h5);
}

h6, .h6 {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-h6);
  font-weight: var(--feb-t-fw-sub);
  line-height: var(--feb-t-lh-h4);
  letter-spacing: 0.005em;
  margin-bottom: var(--feb-t-mb-h5);
}

/* Kleine h2 aus dem Bestand bleiben in der Textschrift.
   .fk-person h2 (Kontaktseite) traegt per Inline-<style> 20 px - in
   Guton waere das ein Titelgrad ohne Titelfunktion. */
body .fk-person h2 {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-h3);
  font-weight: var(--feb-t-fw-sub);
  line-height: var(--feb-t-lh-h3);
  letter-spacing: var(--feb-t-ls-h3);
  margin: 0 0 var(--feb-t-mb-h3);
}

/* GUARDRAIL: Menue- und Navigationsueberschriften bleiben in der
   Textschrift. Drupal gibt Menue-Bloecke als <h2 id="block-..."> aus
   (Haupt- und Fussnavigation); ohne diese Regel zoege die h2-Stufe
   oben die Titelschrift in die Navigation. Gesetzt wird ausschliesslich
   die Familie - Grad, Farbe und Versalien bleiben bei W4-1
   (header-footer.css laedt spaeter). */
nav.block-menu > h2,
nav.block-menu > .h2,
nav.menu--main > h2,
nav.menu--main > .h2,
.brm-header h2,
.brm-header .h2,
.offcanvas h2,
.offcanvas .h2 {
  font-family: var(--feb-t-font-text);
}

/* Opt-in-Klassen mit Textmass, fuer neue Komponenten (R3) */
.feb-h1 {
  font-family: var(--feb-t-font-title);
  font-size: var(--feb-t-fs-h1);
  font-weight: var(--feb-t-fw-title);
  line-height: var(--feb-t-lh-h1);
  letter-spacing: var(--feb-t-ls-h1);
  max-width: var(--feb-measure-head);
}

.feb-h2 {
  font-family: var(--feb-t-font-title);
  font-size: var(--feb-t-fs-h2);
  font-weight: var(--feb-t-fw-title-mid);
  line-height: var(--feb-t-lh-h2);
  letter-spacing: var(--feb-t-ls-h2);
  max-width: 24ch;
}

.feb-h3 {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-h3);
  font-weight: var(--feb-t-fw-sub);
  line-height: var(--feb-t-lh-h3);
  letter-spacing: var(--feb-t-ls-h3);
}

.feb-h4 {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-h4);
  font-weight: var(--feb-t-fw-sub);
  line-height: var(--feb-t-lh-h4);
  letter-spacing: var(--feb-t-ls-h4);
}

.feb-h5 { font-family: var(--feb-t-font-text); font-size: var(--feb-t-fs-h5); font-weight: var(--feb-t-fw-sub); line-height: var(--feb-t-lh-h4); }
.feb-h6 { font-family: var(--feb-t-font-text); font-size: var(--feb-t-fs-h6); font-weight: var(--feb-t-fw-sub); line-height: var(--feb-t-lh-h4); }

.feb-display {
  font-family: var(--feb-t-font-title);
  font-size: var(--feb-t-fs-display);
  font-weight: var(--feb-t-fw-title);
  line-height: var(--feb-t-lh-display);
  letter-spacing: var(--feb-t-ls-display);
  max-width: var(--feb-measure-head);
  text-wrap: balance;
}

/* ============================================================
   4. Hero (Display-Grad)

   .brm-hero__title fuhr clamp(36 -> 72 px) in Gewicht 600 mit
   -0.04em. Das ist die "fette grosse Headline", die MB gerade nicht
   macht. Neu: Guton 400 auf der Display-Rampe.
   ============================================================ */

.brm-hero__title,
h1.brm-hero__title {
  font-family: var(--feb-t-font-title);
  font-size: var(--feb-t-fs-display);
  font-weight: var(--feb-t-fw-title);
  line-height: var(--feb-t-lh-display);
  letter-spacing: var(--feb-t-ls-display);
  margin: 0;
  text-wrap: balance;
}

.brm-hero__lead,
.brm-hero__lead p {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-lead);
  font-weight: var(--feb-t-fw-body);
  line-height: var(--feb-t-lh-lead);
  letter-spacing: -0.005em;
}

.brm-hero__lead {
  margin-top: var(--feb-space-5);
  max-width: var(--feb-measure-lead);
}

/* ============================================================
   5. Div-basierte Ueberschriften des Themes

   Die Sektionsueberschriften werden vom Twig-Template als <div
   class="field--name-field-headline"> ausgegeben, in zwei Templates
   zusaetzlich als <h2 class="brm-section-header__title">. Beide sahen
   bisher unterschiedlich aus (das Feld clamp(30-48 px)/600/-0.04em,
   der h2 die generische h2-Staffel bis 60 px). Sie werden hier auf
   dieselbe H2-Stufe gezogen - inklusive Guton, denn genau diese
   Zeilen sind die vom Auftraggeber benannten grossen Sektionstitel
   ("Praezise Komponenten und Baugruppen", "Mehr als ein Zulieferer",
   "Fertigungstiefe fuer praezise Produkte", ...).

   Der strukturelle Fix - div zu echtem <h2> - ist ein Twig-Thema und
   gehoert zu W4-9, nicht in diese Datei.
   ============================================================ */

.brm-section-header {
  margin-bottom: var(--feb-space-8);
  max-width: 46rem;
}

@media (min-width: 768px) {
  .brm-section-header {
    margin-bottom: var(--feb-space-9);
  }
}

.brm-section-header .field--name-field-headline,
.brm-section-header .field--name-field-title,
.brm-section-header__title,
.brm-section-header > h2,
.paragraph-media-side__headline,
.paragraph-type--media-top .paragraph-media-top__text .brm-section-header .field--name-field-headline,
.paragraph-type--cta-banner .brm-section-header--centered .field--name-field-headline,
.paragraph-type--cta-banner .brm-section-header--center .field--name-field-headline {
  font-family: var(--feb-t-font-title);
  font-size: var(--feb-t-fs-h2);
  font-weight: var(--feb-t-fw-title-mid);
  line-height: var(--feb-t-lh-h2);
  letter-spacing: var(--feb-t-ls-h2);
  color: var(--feb-text);
  margin: 0;
  text-wrap: balance;
}

/* Nur DIREKTE Absaetze. Wichtig: einzelne Vibecode-Sektionen sind
   komplett in ein field_lead einredigiert (z. B. der Personenblock auf
   /de/kontakt). Ein Nachfahren-Selektor `... .field--name-field-lead p`
   hat dort jeden verschachtelten Absatz auf Lead-Groesse gezogen und
   dabei sogar gezielte Regeln geschlagen (0,2,1 gegen 0,1,1). */
.brm-section-header .field--name-field-lead,
.brm-section-header .field--name-field-lead > p,
.brm-section-header .field--name-field-lead > .field__item > p {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-lead);
  font-weight: var(--feb-t-fw-body);
  line-height: var(--feb-t-lh-lead);
  letter-spacing: -0.005em;
  color: var(--feb-text-secondary);
}

/* MB-Rhythmus: Headline -> 16 px -> Lead. Das Kompilat fuhr 12 px. */
.brm-section-header .field--name-field-lead {
  max-width: var(--feb-measure-lead);
  margin: var(--feb-space-4) 0 0;
}

.brm-section-header--center .field--name-field-lead,
.brm-section-header--centered .field--name-field-lead {
  margin-inline: auto;
}

/* ============================================================
   6. Kartentitel - eine Stufe, ueberall

   Bestand: .brm-feature-card__title 17 px, .brm-card__title 18 px,
   .paragraph-slider__title 20 px, .paragraph-text-three-col__col-title
   20 px, .feb-tech-card h3 19 px/700, .fk-teaser h3 19 px. Sechs
   Groessen fuer dieselbe Rolle - genau das Balancing-Problem aus der
   Kundenanmerkung.

   Neu: eine Stufe (18 -> 20 px, Inter 600). Titelschrift bleibt hier
   bewusst aussen vor: MB setzt Kartentitel zwar in der Titelschrift,
   aber auf grossflaechigen Kampagnenkacheln (26/32 px). febana zeigt
   drei bis sechs Karten pro Reihe; in diesem Grad traegt die
   Textschrift die Lesbarkeit besser.
   ============================================================ */

.brm-card__title,
.brm-feature-card__title,
.feb-tech-card__title,
.paragraph-slider__title,
.paragraph-type--slider .paragraph-slider__title,
.paragraph-type--text-three-col .paragraph-text-three-col__col-title,
.paragraph-type--cards-2plus1 .brm-card--compact .brm-card__title {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-card);
  font-weight: var(--feb-t-fw-sub);
  line-height: var(--feb-t-lh-card);
  letter-spacing: var(--feb-t-ls-card);
  color: var(--feb-text);
  margin: 0 0 var(--feb-t-mb-h3);
}

.brm-card__title:last-child,
.brm-feature-card__title:last-child {
  margin-bottom: 0;
}

/* Die Feature-Karte kapselt ihren Titel in ein Feld-Div; die
   Schriftwerte muessen dort nicht erneut gesetzt werden, aber der
   Margin des inneren Divs wuerde doppeln. */
.brm-feature-card__title .field--name-field-title,
.brm-card__title .field--name-field-title {
  margin: 0;
}

/* Die Feature-Kachel in cards-2plus1 ist grossflaechig - sie darf
   eine Stufe hoeher stehen, bleibt aber in der Textschrift. */
.paragraph-type--cards-2plus1 .brm-card--feature .brm-card__title {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-h3);
  font-weight: var(--feb-t-fw-sub);
  line-height: var(--feb-t-lh-h3);
  letter-spacing: var(--feb-t-ls-h3);
}

/* Kartentext auf die Small-Stufe - vorher .9375rem/1.6, jetzt
   14 px/1,55 wie MBs ruhiger Kleintext. */
.brm-feature-card__text,
.brm-card__text {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-sm);
  line-height: var(--feb-t-lh-sm);
}

/* Akkordeon-Kopf ist funktional eine Subheadline. */
.paragraph-accordion__list .accordion-button {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-h4);
  font-weight: var(--feb-t-fw-sub);
  line-height: var(--feb-t-lh-h4);
  letter-spacing: var(--feb-t-ls-h4);
}

/* ============================================================
   7. Lead, Fliesstext, Feintext, Eyebrow
   ============================================================ */

.lead,
.feb-lead {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-lead);
  font-weight: var(--feb-t-fw-body);
  line-height: var(--feb-t-lh-lead);
  letter-spacing: -0.005em;
  color: var(--feb-text-secondary);
}

.feb-lead {
  max-width: var(--feb-measure-lead);
}

.feb-eyebrow {
  display: block;
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-eyebrow);
  font-weight: var(--feb-t-fw-sub);
  line-height: 1.3;
  letter-spacing: var(--feb-t-ls-eyebrow);
  text-transform: uppercase;
  color: var(--feb-text-muted);
  margin-bottom: var(--feb-t-mb-h3);
}

.feb-on-dark .feb-eyebrow { color: var(--feb-text-inverse-muted, var(--feb-grey-300)); }

.feb-small { font-family: var(--feb-t-font-text); font-size: var(--feb-t-fs-sm); line-height: var(--feb-t-lh-sm); letter-spacing: var(--feb-ls-sm); color: var(--feb-text-muted); }
.feb-meta  { font-family: var(--feb-t-font-text); font-size: var(--feb-t-fs-xs); font-weight: var(--feb-fw-medium); line-height: 1.5; letter-spacing: 0.01em; color: var(--feb-text-muted); }
.feb-num   { font-variant-numeric: tabular-nums lining-nums; }
.feb-tech  { font-family: var(--feb-font-mono); font-size: var(--feb-t-fs-sm); letter-spacing: 0; }

/* Fliesstext: 16 px, 68ch. Das Kompilat fuhr 18 px ohne Mass fuer
   .paragraph-type--text-single - bei 1300 px Containerbreite rund 137
   Zeichen pro Zeile. Das Mass wird hier zurueckgeholt; nur die ohnehin
   schmalen Split-/Media-Spalten behalten max-width: none. */
.brm-prose,
.feb-prose {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-body);
  line-height: var(--feb-t-lh-body);
  letter-spacing: var(--feb-t-ls-body);
  color: var(--feb-text);
  max-width: var(--feb-measure);
}

.paragraph-type--text-single .brm-prose {
  max-width: var(--feb-measure);
}

.paragraph-type--text-single.paragraph-section--align-center .brm-prose {
  margin-inline: auto;
}

.brm-prose > * + *,
.feb-prose > * + * {
  margin-top: var(--feb-space-4);
}

/* Ueberschriften im Fliesstext tragen bewusst KEINE eigene Farbregel
   mehr: sie erben von .brm-prose (dort var(--feb-text)) und laufen damit
   in jedem Kontext richtig mit - siehe Begruendung bei h1-h6.
   Sie ruecken aber naeher an den folgenden Absatz und weiter vom
   vorigen weg - MBs knapper Rhythmus. */
.brm-prose > * + h2,
.brm-prose > * + h3,
.brm-prose > * + h4,
.feb-prose > * + h2,
.feb-prose > * + h3,
.feb-prose > * + h4 {
  margin-top: var(--feb-space-7);
}

.brm-prose blockquote {
  border-left: var(--feb-hairline-width) solid var(--feb-border-ink);
  color: var(--feb-text-secondary);
  font-style: normal;
}

.brm-prose code,
.brm-prose pre {
  background-color: var(--feb-grey-100);
  border-radius: var(--feb-radius);
  font-size: 0.9375em;
}

hr {
  border: 0;
  border-top: var(--feb-hairline-width) solid var(--feb-border);
  opacity: 1;
}

/* ============================================================
   8. Harte Grade aus den Content-Inline-<style>-Bloecken

   Auf /de, /en und /de/kontakt liefern Vibecode-Sektionen eigene
   <style>-Bloecke aus. Die stehen im <body> und gewinnen damit
   Reihenfolge UND meist Spezifitaet gegen eine nackte Elementregel.
   Deshalb hier derselbe Kniff wie in buttons.css: ein vorangestelltes
   `body ` hebt die Spezifitaet um genau einen Elementselektor an und
   gewinnt gegen die gleichnamige Inline-Regel.

   Keine DB-Edits in dieser Welle - die Bloecke selbst bleiben
   unangetastet (UEBERGABE: R2c/W4-9).
   ============================================================ */

/* Grosse Inline-Headlines -> Titelschrift, Display-Rampe.
   Bestand: 700/-0.045em/1.1 bzw. 700/-0.04em/1.05 - beides "fett
   und eng", das Gegenteil des MB-Musters. */
body .feb-app-preview h2,
body .final-cta h2,
body .faq-hero h1 {
  font-family: var(--feb-t-font-title);
  font-size: var(--feb-t-fs-display);
  font-weight: var(--feb-t-fw-title);
  line-height: var(--feb-t-lh-display);
  letter-spacing: var(--feb-t-ls-display);
  margin: 0 0 var(--feb-t-mb-h1);
  text-wrap: balance;
}

/* Deren Sublines -> Lead-Stufe. Bestand 18 px/1,75 bzw. 19 px/1,8;
   1,8 ist fuer eine Subline unruhig weit. .feb-tech-header > p trug
   gar keinen eigenen Grad und lief auf Body-Groesse. */
body .feb-app-preview-subtitle,
body .final-cta .cta-desc,
body .faq-hero p,
body .feb-tech-header > p {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-lead);
  font-weight: var(--feb-t-fw-body);
  line-height: var(--feb-t-lh-lead);
  letter-spacing: -0.005em;
}

/* Auszeichnungszeilen -> eine Eyebrow-Stufe statt drei.
   Bestand: 13/700/0.14em, 13/700/0.14em, 12/500/0.12em. */
body .feb-app-preview-label,
body .final-cta-label,
body .faq-hero-label,
body .tags-header {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-eyebrow);
  font-weight: var(--feb-t-fw-sub);
  line-height: 1.3;
  letter-spacing: var(--feb-t-ls-eyebrow);
  text-transform: uppercase;
}

/* Inline-Kartentitel -> dieselbe Kartenstufe wie die Theme-Karten.
   Bestand: 19 px/700/-0.025em bzw. 19 px/400. */
body .feb-tech-card h3,
body .fk-teaser h3 {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-card);
  font-weight: var(--feb-t-fw-sub);
  line-height: var(--feb-t-lh-card);
  letter-spacing: var(--feb-t-ls-card);
  margin: 0 0 var(--feb-t-mb-h3);
}

body .feb-tech-card p,
body .fk-teaser p {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-sm);
  line-height: var(--feb-t-lh-sm);
}

/* Feature-Zeilen der App-Preview: die <strong>-Zeile ist eine
   Mini-Subheadline. 650 ist kein Inter-Schnitt (wird gerundet). */
body .feb-app-preview-feature-text {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-sm);
  line-height: var(--feb-t-lh-sm);
}

body .feb-app-preview-feature-text strong {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-h6);
  font-weight: var(--feb-t-fw-sub);
  line-height: var(--feb-t-lh-card);
  letter-spacing: -0.005em;
}

/* Zertifikatsliste und Kontakt-Personenblock auf die Feintextstufe. */
body .feb-cert-list li,
body .feb-cert-stat-label,
body .fk-prole,
body .fk-quote {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-sm);
  line-height: var(--feb-t-lh-sm);
}

body .feb-cert-list strong,
body .fk-pname {
  font-family: var(--feb-t-font-text);
  font-size: var(--feb-t-fs-card);
  font-weight: var(--feb-t-fw-sub);
  line-height: var(--feb-t-lh-card);
  letter-spacing: -0.005em;
}

/* ============================================================
   9. Links

   Monochrom. Die Auszeichnung traegt die Unterlinie, nicht die Farbe -
   ein Kernpunkt der neuen Sprache.
   ============================================================ */

.brm-prose a,
.feb-prose a {
  color: var(--feb-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--feb-grey-400);
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--feb-dur-fast) var(--feb-ease),
              text-decoration-thickness var(--feb-dur-fast) var(--feb-ease);
}

.brm-prose a:hover,
.brm-prose a:focus,
.feb-prose a:hover,
.feb-prose a:focus {
  color: var(--feb-text);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* Auf dunkler Flaeche traegt der Link Weiss */
.paragraph-section.bg-dark .brm-prose a,
.paragraph-section.bg-accent .brm-prose a,
.feb-on-dark .brm-prose a,
.feb-on-dark .feb-prose a {
  color: var(--feb-text);
  text-decoration-color: var(--feb-grey-500);
}

/* ============================================================
   10. Fokus - ein einziger, monochromer Ring

   Bisher existierten vier verschiedene Fokus-Sprachen und im Header
   ein `outline: 0`. Der Ring ist bewusst nie in der Akzentfarbe:
   Cyan auf Weiss ergibt 2,20:1 und verfehlt die 3:1 aus WCAG 2.4.11.
   Ink auf Weiss liefert 19,48:1, Weiss auf Ink ebenso.
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[contenteditable]:focus-visible {
  outline: var(--feb-focus-width) solid var(--feb-focus);
  outline-offset: var(--feb-focus-offset);
  box-shadow: none;
}

/* Bootstrap-Ring stilllegen, damit nicht zwei Indikatoren konkurrieren */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: none;
}

/* ============================================================
   11. Sektionsrhythmus

   Das Theme mischte margin-block (normale Sektion) und padding-block
   (bg-light/bg-dark/bg-accent). Zwischen einer normalen und einer
   Flaechen-Sektion addierten sich 100 px Margin und 100 px Padding zu
   200 px, waehrend zwei normale Sektionen auf 100 px kollabierten -
   der Abstand hing also davon ab, ob die Nachbarsektion einen
   Hintergrund hat.

   Fix: konsequent padding-block, margin-block: 0. Damit gibt es keinen
   Margin-Collapse mehr und jede Sektionsgrenze traegt denselben
   Weissraum, unabhaengig von der Flaeche. Das ist die Voraussetzung
   dafuer, dass die Headline-Margins knapp bleiben duerfen (MB-Muster:
   Luft kommt aus dem Sektionspadding).

   .paragraph-section--full (der Hero) bleibt ausgenommen: er bringt sein
   Innenmass selbst mit und soll randlos sitzen.
   ============================================================ */

.paragraph-section {
  margin-block: 0;
  padding-block: var(--feb-section-y);
}

.paragraph-section.bg-light,
.paragraph-section.bg-dark,
.paragraph-section.bg-accent {
  margin-block: 0;
  padding-block: var(--feb-section-y);
}

.paragraph-section--full,
.paragraph-section--full.bg-light,
.paragraph-section--full.bg-dark,
.paragraph-section--full.bg-accent {
  margin-block: 0;
  padding-block: 0;
}

.paragraph-section.bg-light  { background-color: var(--feb-grey-50); }
.paragraph-section.bg-dark   { background-color: var(--feb-ink); color: var(--feb-text); }
.paragraph-section.bg-accent { background-color: var(--feb-ink); color: var(--feb-text); }

.paragraph-section.bg-dark .brm-section-header .field--name-field-headline,
.paragraph-section.bg-accent .brm-section-header .field--name-field-headline,
.paragraph-section.bg-dark .brm-section-header__title,
.paragraph-section.bg-accent .brm-section-header__title {
  color: var(--feb-text);
}

.paragraph-section.bg-dark .brm-section-header .field--name-field-lead,
.paragraph-section.bg-accent .brm-section-header .field--name-field-lead,
.paragraph-section.bg-dark .brm-section-header .field--name-field-lead > p,
.paragraph-section.bg-accent .brm-section-header .field--name-field-lead > p {
  color: var(--feb-text-secondary);
}

/* Sektions-Utilities fuer neue Komponenten */
.feb-section {
  padding-block: var(--feb-section-y);
  background-color: var(--feb-surface);
  color: var(--feb-text);
}
.feb-section--tight { padding-block: var(--feb-section-y-tight); }
.feb-section--loose { padding-block: var(--feb-section-y-loose); }
.feb-section--muted { background-color: var(--feb-grey-50); }
.feb-section--ink   { padding-block: var(--feb-section-y-loose); }

.feb-section__inner {
  max-width: var(--feb-container-max);
  margin-inline: auto;
  padding-inline: var(--feb-gutter);
}

/* ============================================================
   12. .reveal - Transform-Sprung beheben

   Im Kompilat stehen drei Regeln in dieser Reihenfolge:
     .reveal          { opacity: 0; transform: translateY(2rem); transition: ... }
     .reveal.revealed { opacity: 1; transform: translateY(0) }
     .reveal          { opacity: 1 }          <- spaeterer Patch
   Der Patch hebt nur die Opacity auf, nicht den Transform. Jede
   .reveal-Sektion stand dadurch dauerhaft 32 px zu tief und sprang beim
   Scroll-Trigger sichtbar nach oben - der vertikale Abstand vor einer
   .reveal-Sektion war systematisch 32 px groesser als vor einer normalen.

   Da die Opacity-Haelfte der Animation im Kompilat bereits stillgelegt
   ist und hier nichts entfernt werden darf, wird der Effekt vollstaendig
   neutralisiert statt halb repariert.
   ============================================================ */

.reveal,
.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* ============================================================
   13. Bewegung reduzieren
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}