/**
 * @file css/redesign/header-footer.css - Redesign Welle R2a,
 *       ueberarbeitet in W4-1 (Farbe) und W4-10 (Anordnung)
 *
 * Kopfzone SCHWARZ (Referenzlogik mercedes-benz.de), Footer auf Ink.
 *
 * ------------------------------------------------------------------
 * W4-10: die Kopfzeile folgt jetzt auch im AUFBAU der Referenz
 * ------------------------------------------------------------------
 * Aus der Zeile "Logo links - Menue rechtsbuendig - Aktionen ganz
 * rechts" wird ein dreispaltiges Raster:
 *
 *   [ minmax(0,1fr) ]   [ auto ]   [ minmax(0,1fr) ]
 *    vier Navi-Punkte     Logo       Suche/Login/Burger
 *
 * Beide Aussenspuren sind gleich breit, deshalb steht die Mittelspur
 * exakt in der Mitte der Kopfzeile - das ist die Zentrierung, mehr
 * braucht es nicht. minmax(0, 1fr) statt 1fr, damit eine ueberbreite
 * Spur (z. B. wenn Inter nicht laedt und der Systemfont breiter baut)
 * die Mitte nicht verschiebt: die Spur bleibt stehen, im aeussersten
 * Fall ueberlappt Text das Logo, aber die Seite bekommt keinen
 * horizontalen Ueberlauf.
 *
 * Der Burger steht auf JEDER Breite. Er ist nach dem Umbau der einzige
 * Weg zu "Unternehmen" (im Offcanvas stehen weiterhin ALLE Punkte des
 * Hauptmenues) und traegt unterhalb von 992 px die gesamte Navigation.
 * Deshalb wird `.hamburger { display: none }` ab 992 px hier
 * zurueckgedreht.
 *
 * Der Platz in der linken Aussenspur - gerechnet, nicht geschaetzt,
 * aus fonts/Inter/latin.woff2, Instanz wght 500, 13 px:
 *   Produkte 56,4 + Technologie 77,2 + Branchen 59,6 +
 *   Innovationen 80,7                                  = 273,9 px Text
 *   + 4 x 2 x 6 px Innenabstand                        =  48,0 px
 *   + 4 x (12 px Chevron + 2 px Abstand)               =  56,0 px
 *                                                       -----------
 *   enger Satz (992-1199 px)                             377,9 px
 *
 *   dasselbe mit 12 px Innenabstand, 4 px Chevronabstand und
 *   2 px Listenabstand:
 *   weiter Satz (ab 1200 px)                             439,9 px
 *
 * Der Chevron ist fuer alle vier Punkte eingerechnet, obwohl heute nur
 * drei ein Dropdown tragen - "Innovationen" hat keine aktiven Kinder und
 * rendert als einfacher Link. Bewusst konservativ: bekommt der Punkt
 * spaeter Unterpunkte, stimmt die Rechnung weiter.
 *
 * Zur Verfuegung steht (Breite - 2 x --feb-gutter - Logo - 2 x 8 px
 * Spaltenabstand) / 2:
 *    992 px -> 403,2 px   gegen 377,9 px   ->  25,3 px Luft
 *   1200 px -> 503,1 px   gegen 439,9 px   ->  63,2 px Luft
 *   1440 px -> 598,3 px   gegen 439,9 px   -> 158,4 px Luft
 *
 * Die Leiste erscheint damit weiterhin ab 992 px - die Breakpoint-Frage
 * hat sich mit dem vierten statt fuenften Punkt erledigt. Mit den
 * urspruenglich fuenf Punkten (Automatisierung, 102,6 px) waeren es bei
 * 992 px 492,5 px gegen 403,2 px gewesen, also 89 px zu viel; der Punkt
 * ist auf Kundenwunsch (Anmerkung 5d998260) aus der Hauptnavigation
 * genommen und geht in die Branchenseite "Robotik & Automatisierung"
 * ueber.
 *
 * Der Header-CTA "Anfrage stellen" ist aus der Kopfzeile entfernt
 * (Kundenvorgabe). Die Regeln in Abschnitt 5 bleiben stehen, weil
 * .btn-white / .btn-outline-white im Header weiterhin auftreten koennen.
 *
 * ------------------------------------------------------------------
 * Aenderung gegenueber R2a
 * ------------------------------------------------------------------
 * R2a hatte den Header auf Weiss gestellt und dafuer rund 25 Regeln des
 * Kompilats ueberschrieben (Navigation, Chevrons, Icon-Buttons,
 * Hamburger, Utility-Leiste, Suchfeld, CTA). Der Auftraggeber hat die
 * Kopfzone auf Schwarz entschieden. Die R2a-Regeln bleiben stehen und
 * werden hier auf die dunkle Welt zurueckgedreht - es wird weiterhin
 * nichts entfernt, nur ueberschrieben.
 *
 * Flaechenstaffel der Kopfzone (Begruendung: --feb-ink auf --feb-black
 * ergibt nur 1,08:1 und bildet allein keine sichtbare Grenze):
 *   Kopfzeile + Utility     --feb-header-bg       #000000
 *   Megamenue / Suchpanel   --feb-header-panel    #0B0D0E  + Kante
 *   Hover im Panel          --feb-header-elevated #1F2326
 *   Panelkante              --feb-header-edge     #666C72  3,95:1
 *   dekorative Trennlinie   --feb-header-hairline #33383C  1,77:1
 *
 * Logo: images/febana-logo.svg ist eine reine Weiss-Wortmarke
 * (.st0 { fill:#fff }). R2a hatte den Filter auf `brightness(0)`
 * gestellt, um sie auf dem weissen Header schwarz zu faerben. Das wird
 * hier auf `brightness(0) invert(1)` zurueckgedreht - Weiss auf
 * Schwarz, 21:1. Der Filter erzwingt Weiss unabhaengig vom
 * SVG-Inhalt und bleibt deshalb bewusst gesetzt.
 *
 * Megamenue - Entscheidung: DUNKLES Panel, kein weisses.
 * Ein weisses Panel unter einer schwarzen Kopfzeile erzeugt beim
 * Aufklappen einen 19:1-Helligkeitssprung ueber die halbe Bildbreite;
 * die Referenz laesst ihre Flyouts genau deshalb in der Schwarzwelt und
 * traegt die Ebene ueber eine Kante statt ueber einen Flaechenwechsel.
 * Das Panel liegt daher auf --feb-header-panel (eine Stufe heller als
 * die Kopfzeile), bekommt eine 1px-Kante in --feb-header-edge und den
 * Overlay-Schatten. Das ist die ruhigere Loesung und haelt Header,
 * Megamenue, Offcanvas und Footer in einer Materialfamilie.
 *
 * Nicht angefasst, weil an anderer Stelle geregelt:
 *   - der z-index-Stapel (Header 50, Overlay 60, Offcanvas 70).
 *   - css/welle-0.css: `.brm-header__utility-inner > :only-child` und
 *     `.brm-offcanvas[aria-hidden="true"] { visibility:hidden }`.
 *   - Rangordnung, Masse und Typografie der Buttons: css/redesign/buttons.css.
 */

/* ============================================================
   1. Header - Grundflaeche (Schwarz)
   ============================================================ */

.brm-header {
  background-color: var(--feb-header-bg);
  color: var(--feb-text-inverse);
  border-bottom: var(--feb-hairline-width) solid transparent;
  transition: background-color var(--feb-dur-base) var(--feb-ease),
              border-color var(--feb-dur-base) var(--feb-ease);
}

/* Gescrollt: Hairline statt Schlagschatten (Spezifikation 9.2). Auf
   Schwarz traegt die Kante erst ab --feb-header-hairline sichtbar. */
.brm-header__nav.is-scrolled {
  box-shadow: none;
}

.brm-header:has(.brm-header__nav.is-scrolled) {
  border-bottom-color: var(--feb-header-hairline);
}

/* ============================================================
   1b. Kopfzeile - dreispaltiges Raster (W4-10)

   Loest den provisorischen Ueberlaufschutz aus W4-1 ab. Dessen
   Befund a) (Header-CTA blieb unter 768 px stehen, weil eine
   Rang-Basisregel aus buttons.css `display:none` ausstach) ist mit dem
   Wegfall des Header-CTA gegenstandslos; Befund b) (Megamenue und CTA
   konkurrieren zwischen 992 und ~1246 px um denselben Platz) loest das
   Raster strukturell: die Leiste zeigt nur noch vier Punkte statt
   sechs, und der CTA ist weg.

   Der schmalere Aussenabstand (--feb-gutter statt fixer 2/4 rem) aus
   W4-1 bleibt - er ist Teil der Rechnung im Dateikopf.
   ============================================================ */

.brm-header__container {
  padding-inline: var(--feb-gutter);   /* 16 -> 48 px statt fix 32/64 px */
}

.brm-header__nav-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--feb-space-2);      /* 8 px, symmetrisch */
  /* Bezugsrahmen fuer Megamenue (Abschnitt 6) und Suchpanel
     (Abschnitt 5). .brm-header ist position:fixed, der Rahmen bleibt
     also innerhalb der Kopfzeile. */
  position: relative;
}

/* Feste Spalten: faellt eine Gruppe weg (leere Region) oder kommt eine
   dazu, bleibt die Mitte trotzdem die Mitte. */
.brm-header__menu {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  justify-content: flex-start;   /* war flex-end, als das Menue rechts stand */
  min-width: 0;
}

.brm-header__logo {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}

.brm-header__actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  gap: var(--feb-space-2);       /* war 1 rem - siehe Rechnung im Dateikopf */
}

/* Unter 400 px wird die Rechnung knapp: bei 320 px bleiben neben dem
   96,3 px breiten Logo nur 87,8 px je Spur, die Aktionsgruppe misst mit
   8-px-Abstaenden aber 88,0 px. Die halbierten Abstaende geben 8 px
   zurueck (Spur 91,9 px gegen 84,0 px Gruppe). */
@media (max-width: 399.98px) {
  .brm-header__nav-inner {
    column-gap: var(--feb-space-1);   /* 4 px */
  }

  .brm-header__actions {
    gap: var(--feb-space-1);          /* 4 px */
  }
}

/* Der Burger bleibt auf jeder Breite stehen - er ist der einzige Weg zu
   "Unternehmen". Das Kompilat versteckt ihn ab 992 px (0,1,0); diese
   Regel hat (0,2,0) und gewinnt. */
@media (min-width: 992px) {
  .brm-header .brm-header__hamburger {
    display: flex;
  }
}

/* Der Sprachumschalter darf nie schieben: er ist der einzige Block der
   Utility-Leiste und wird von welle-0.css nach rechts gezogen. */
.brm-header__utility-inner {
  flex-wrap: wrap;
  min-width: 0;
}

.brm-header__utility nav.links,
.brm-header__utility ul.menu,
.brm-header__utility ul.nav,
.brm-header__utility ul.links {
  flex-wrap: wrap;
  min-width: 0;
}

/* ============================================================
   2. Utility-Leiste (oben, Sprachumschalter)
   Schwarz, Text in --feb-grey-400 (6,51:1), aktiv/hover Weiss.
   ============================================================ */

.brm-header__utility {
  background-color: var(--feb-header-bg);
  font-size: var(--feb-fs-eyebrow);
  color: var(--feb-grey-400);
  border-bottom: var(--feb-hairline-width) solid var(--feb-header-hairline);
}

.brm-header__utility a,
.brm-header__utility .nav-link {
  color: inherit;
}

.brm-header__utility a:hover,
.brm-header__utility a:focus,
.brm-header__utility .nav-link:hover,
.brm-header__utility .nav-link:focus {
  color: var(--feb-white);
}

/* Aktive Sprache monochrom hervorheben - nie ueber Farbe */
.brm-header__utility .nav-link.is-active,
.brm-header__utility a.is-active,
.brm-header__utility .is-active > a {
  color: var(--feb-white);
  font-weight: var(--feb-fw-semibold);
}

/* ============================================================
   3. Logo - Mitte der Kopfzeile, Weiss (21:1 auf Schwarz)

   Der Filter erzwingt Weiss unabhaengig vom SVG-Inhalt und bleibt
   deshalb bewusst gesetzt (Begruendung im Dateikopf).

   TAUSCH AUF DIE f-BILDMARKE: die Bildquelle steht an genau einer
   Stelle, in templates/layout/page.html.twig ({% set logo_src %}).
   Ist die neue Marke quadratisch statt 224:51, reicht es, die
   Hoehen unten stehen zu lassen - die Breite folgt ueber width:auto.
   Aendert sich dadurch die Rechnung im Dateikopf, dann zu Gunsten der
   Navigation: eine quadratische Marke ist bei 26 px Hoehe rund 26 px
   breit statt 114 px und gibt jeder Aussenspur ~44 px zurueck.
   ============================================================ */

.brm-header__logo img {
  filter: brightness(0) invert(1);
  /* 224,1 x 51,17 im viewBox -> 26 px hoch sind 113,9 px breit. */
  height: 1.625rem;   /* 26 px */
  width: auto;
  display: block;
}

@media (max-width: 767.98px) {
  .brm-header__logo img {
    height: 1.375rem; /* 22 px -> 96,3 px breit */
  }
}

/* ============================================================
   4. Hauptnavigation - vier kleine Punkte links (W4-10)

   Ruhend --feb-grey-300 (10,16:1), Hover/aktiv Weiss (21:1).
   Klein und ruhig wie in der Referenz: 13 px statt 15 px, Gewicht 500.
   Die Masse sind im Dateikopf durchgerechnet; wer sie aendert, rechnet
   dort nach.
   ============================================================ */

.brm-header__link,
.brm-header__trigger,
.brm-header__menu .nav-trigger {
  color: var(--feb-grey-300);
  font-size: var(--feb-fs-xs);        /* 13 px - war --feb-fs-btn (15 px) */
  font-weight: var(--feb-fw-medium);
  letter-spacing: 0;
  background-color: transparent;
  transition: color var(--feb-dur-base) var(--feb-ease);
}

/* 992-1199 px: der enge Satz aus der Rechnung (377,9 von 403,2 px). */
.brm-header__menu ul.brm-megamenu,
.brm-header__menu ul.menu,
.brm-header__menu ul.menu--main,
.brm-header__menu ul.nav,
.brm-header__menu ul.navbar-nav {
  gap: 0;
}

.brm-header__menu .nav-trigger {
  padding-inline: 0.375rem;             /* 6 px */
  gap: 0.125rem;                        /* 2 px zwischen Text und Chevron */
}

/* Ab 1200 px darf die Leiste atmen (439,9 von 503,1 px). */
@media (min-width: 1200px) {
  .brm-header__menu ul.brm-megamenu,
  .brm-header__menu ul.menu,
  .brm-header__menu ul.menu--main,
  .brm-header__menu ul.nav,
  .brm-header__menu ul.navbar-nav {
    gap: 0.125rem;                      /* 2 px */
  }

  .brm-header__menu .nav-trigger {
    padding-inline: var(--feb-space-3); /* 12 px */
    gap: 0.25rem;                       /* 4 px */
  }
}

/* Der Chevron ist die einzige verbliebene Ikonografie der Leiste und
   traegt die Dropdown-Erwartung optisch mit (die maschinenlesbare
   Ansage macht aria-haspopup am <button>). 18 -> 12 px, damit die
   fuenf Punkte in die Aussenspur passen. */
.brm-header__menu .brm-header__chevron,
.brm-header .brm-header__chevron {
  width: 12px;
  height: 12px;
}

.brm-header__link:hover,
.brm-header__link:focus,
.nav-item:hover .brm-header__link,
.nav-item:focus-within .brm-header__link,
.brm-header__trigger:hover,
.brm-header__trigger:focus,
.nav-item:hover .brm-header__trigger,
.nav-item:focus-within .brm-header__trigger,
.brm-header__menu .nav-trigger:hover,
.brm-header__menu .nav-trigger:focus,
.brm-header__menu .nav-item:hover .nav-trigger,
.brm-header__menu .nav-item:focus-within .nav-trigger {
  color: var(--feb-white);
  background-color: transparent;
}

/* Konzept-Review M10: das Kompilat setzt hier `outline: 0`. Die
   Megamenue-Trigger sind <button> und das erste interaktive Element der
   Seite - bei Tastaturbedienung ging die Sichtbarkeit vollstaendig
   verloren. tokens.css setzt --feb-focus im Header-Scope auf Weiss. */
.brm-header__menu .nav-trigger:focus-visible,
.brm-header .nav-trigger:focus-visible,
.brm-header__link:focus-visible,
.brm-header__trigger:focus-visible {
  outline: var(--feb-focus-width) solid var(--feb-white);
  outline-offset: var(--feb-focus-offset);
  color: var(--feb-white);
}

.brm-header__chevron,
.brm-header__menu .brm-header__chevron {
  color: var(--feb-grey-400);
  opacity: 1;
}

.brm-header__menu .nav-item.has-dropdown:hover .brm-header__chevron,
.brm-header__menu .nav-item.has-dropdown:focus-within .brm-header__chevron {
  color: var(--feb-white);
  opacity: 1;
}

/* ============================================================
   5. Aktionsbereich rechts: Suche, Login, Burger (W4-10)

   Reihenfolge im DOM und im Fokus: Suche -> Login -> Burger.
   Alle drei Schaltflaechen bekommen ein 40x40-Ziel; vorher war der
   Suchknopf so gross wie sein 20-px-SVG (WCAG 2.5.8 verlangt 24 px).
   ============================================================ */

.brm-header__icon-btn,
.brm-header__actions a:not(.btn),
.brm-header__actions button:not(.btn):not(.brm-header__search-submit) {
  color: var(--feb-grey-300);
}

.brm-header__icon-btn {
  width: 2.5rem;
  height: 2.5rem;
  justify-content: center;
}

/* --- Portal-Login -------------------------------------------------
   Dezenter Icon+Text-Link in der Ruhefarbe der Navigation. Unter
   768 px wird nur das LABEL optisch ausgeblendet (nicht display:none),
   damit der zugaengliche Name des Links auf jeder Breite "Login"
   bleibt. Unter 576 px passt die Gruppe rechnerisch nicht mehr neben
   das mittige Logo (siehe Dateikopf); dort entfaellt der Link ganz und
   steht statt dessen im Fuss des Offcanvas.
   ------------------------------------------------------------------ */

/* Selektor bewusst mit `a` und dem Elternteil: das Kompilat setzt
   `.brm-header__actions a:not(.btn) { font-size: .875rem }` mit (0,2,1).
   `.brm-header__login` allein (0,1,0) verlaere gegen diese Regel und der
   Login stuende 14 px statt 13 px neben der 13-px-Navigation. */
.brm-header__actions a.brm-header__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;                 /* 6 px */
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--feb-space-2);
  font-size: var(--feb-fs-xs);   /* 13 px, wie die Navigationspunkte */
  font-weight: var(--feb-fw-medium);
  white-space: nowrap;
  text-decoration: none;
}

.brm-header__actions a.brm-header__login:focus-visible,
.brm-header__icon-btn:focus-visible,
.brm-header .hamburger:focus-visible {
  outline: var(--feb-focus-width) solid var(--feb-white);
  outline-offset: var(--feb-focus-offset);
  color: var(--feb-white);
}

@media (max-width: 767.98px) {
  .brm-header__login-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 575.98px) {
  .brm-header__actions a.brm-header__login {
    display: none;
  }
}

.brm-header__icon-btn:hover,
.brm-header__icon-btn:focus,
.brm-header__actions a:not(.btn):hover,
.brm-header__actions a:not(.btn):focus,
.brm-header__actions button:not(.btn):not(.brm-header__search-submit):hover,
.brm-header__actions button:not(.btn):not(.brm-header__search-submit):focus {
  color: var(--feb-white);
}

.hamburger span {
  background-color: var(--feb-white);
}

/* Suchpanel: dunkles Panel wie das Megamenue, sichtbare Kante statt
   weicher Schattenwolke. Der Overlay-Schatten ist laut Spezifikation 11
   fuer Dropdown/Modal/Offcanvas zulaessig und traegt hier die Ebene. */
.brm-header__search-panel {
  background-color: var(--feb-header-panel);
  border: var(--feb-hairline-width) solid var(--feb-header-edge);
  border-radius: var(--feb-radius);
  box-shadow: var(--feb-shadow-overlay);
}

/* W4-10: Das Panel haengt mit right:0 am Suchknopf und ist 20 rem breit.
   Bei 360 px steht der Knopf 296 px vom linken Rand - das Panel ragte
   also 24 px links aus dem Bild. Ein Ueberlauf nach links erzeugt zwar
   keine Bildlaufleiste, das Feld war dort aber angeschnitten. Unter
   768 px spannt es deshalb ueber die volle Container-Breite; Bezug ist
   .brm-header__nav-inner (Abschnitt 1b). */
@media (max-width: 767.98px) {
  .brm-header__search {
    position: static;
  }

  .brm-header__search-panel {
    left: var(--feb-gutter);
    right: var(--feb-gutter);
    width: auto;
  }
}

.brm-header__search-input {
  color: var(--feb-white);
  font-size: var(--feb-fs-sm);
}

.brm-header__search-panel .brm-header__search-input:focus {
  color: var(--feb-white);
}

.brm-header__search-input::-moz-placeholder { color: var(--feb-grey-400); }
.brm-header__search-input::placeholder      { color: var(--feb-grey-400); }

/* Suchen-Knopf: Weiss auf Ink (19,48:1). Bewusst NICHT der Akzent -
   der Akzent ist der Primaeraktion vorbehalten, die Suche ist eine
   Hilfsfunktion. */
.brm-header__search-submit {
  background-color: var(--feb-white);
  border: var(--feb-hairline-width) solid var(--feb-white);
  border-radius: var(--feb-radius);
  color: var(--feb-ink);
  font-size: var(--feb-fs-sm);
  font-weight: var(--feb-fw-semibold);
  transition: background-color var(--feb-dur-base) var(--feb-ease),
              border-color var(--feb-dur-base) var(--feb-ease),
              color var(--feb-dur-base) var(--feb-ease);
}

.brm-header__search-submit:hover,
.brm-header__search-submit:focus {
  background-color: var(--feb-grey-200);
  border-color: var(--feb-grey-200);
  color: var(--feb-ink);
}

/* Header-CTA: das Kompilat gibt ihm .btn-white, also weisse Flaeche mit
   hellem Rand. Auf Schwarz ist er als monochromer Outline in Weiss
   gefuehrt; Flaechenwechsel im Hover. Rangordnung und Masse kommen aus
   css/redesign/buttons.css, das diese Regel spiegelt. */
.brm-header .btn-white,
.brm-header__cta {
  background-color: transparent;
  border: var(--feb-hairline-width) solid var(--feb-white);
  border-radius: var(--feb-radius);
  color: var(--feb-white);
  transition: background-color var(--feb-dur-base) var(--feb-ease),
              border-color var(--feb-dur-base) var(--feb-ease),
              color var(--feb-dur-base) var(--feb-ease);
}

.brm-header .btn-white:hover,
.brm-header .btn-white:focus,
.brm-header__cta:hover,
.brm-header__cta:focus {
  background-color: var(--feb-white);
  border-color: var(--feb-white);
  color: var(--feb-ink);
}

/* .btn-outline-white traegt im Kompilat einen Rand aus rgba(255,255,255,.3)
   - 3,0:1 gegen Schwarz und damit an der Grenze. Auf volles Weiss gezogen. */
.brm-header .btn-outline-white {
  border-color: var(--feb-white);
  color: var(--feb-white);
}

.brm-header .btn-outline-white:hover,
.brm-header .btn-outline-white:focus {
  background-color: var(--feb-white);
  color: var(--feb-ink);
}

/* ============================================================
   6. Megamenue - dunkles Panel (Begruendung im Dateikopf)
   ============================================================ */

.mega-dropdown {
  background-color: var(--feb-header-panel);
  color: var(--feb-white);
  border: var(--feb-hairline-width) solid var(--feb-header-edge);
  border-radius: var(--feb-radius);
  box-shadow: var(--feb-shadow-overlay);
}

/* --- Aufhaengung der Panels (W4-10) --------------------------------
   Solange das Menue rechtsbuendig stand, war jedes Panel am eigenen
   Eintrag zentriert (left:50%/translateX(-50%)); der erste Eintrag
   wurde links, der letzte rechts angeschlagen. Mit dem Menue GANZ
   LINKS bricht die Regel fuer den letzten Eintrag: "rechtsbuendig zum
   Eintrag" haette das bis zu 880 px breite Panel von Innovationen
   (rechte Kante bei rund 300 px) nach x = -580 px geschoben.

   Deshalb haengen jetzt alle Panels am Container statt am Eintrag -
   das ist zugleich die Anschlagkante der Referenz. .nav-item wird
   dafuer position:static, damit .brm-header__nav-inner der
   Bezugsrahmen ist. Bei left:--feb-gutter und max-width 880 px endet
   das Panel spaetestens bei 27,8 + 880 = 907,8 px, passt also ab 992 px
   immer ins Bild.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .brm-header__menu .nav-item {
    position: static;
  }

  .brm-header__menu .nav-item.has-dropdown > .mega-dropdown,
  .brm-header__menu .nav-item.has-dropdown:first-of-type > .mega-dropdown,
  .brm-header__menu .nav-item.has-dropdown:last-of-type > .mega-dropdown {
    left: var(--feb-gutter);
    right: auto;
    transform: translateY(0.5rem);
  }

  .brm-header__menu .nav-item.has-dropdown:hover > .mega-dropdown,
  .brm-header__menu .nav-item.has-dropdown:focus-within > .mega-dropdown,
  .brm-header__menu .nav-item.has-dropdown:first-of-type:hover > .mega-dropdown,
  .brm-header__menu .nav-item.has-dropdown:first-of-type:focus-within > .mega-dropdown,
  .brm-header__menu .nav-item.has-dropdown:last-of-type:hover > .mega-dropdown,
  .brm-header__menu .nav-item.has-dropdown:last-of-type:focus-within > .mega-dropdown {
    transform: translateY(0);
  }
}

.mega-heading {
  font-size: var(--feb-fs-eyebrow);
  font-weight: var(--feb-fw-semibold);
  letter-spacing: var(--feb-ls-eyebrow);
  color: var(--feb-grey-400);          /* 5,63:1 auf dem Panel */
}

.mega-heading a { color: inherit; }
.mega-heading a:hover,
.mega-heading a:focus { color: var(--feb-white); }

.mega-link { color: var(--feb-grey-200); }   /* 13,35:1 */

.mega-link:hover,
.mega-link:focus {
  background-color: var(--feb-header-elevated);
  color: var(--feb-white);
}

.mega-link strong { color: inherit; }
.mega-link small,
.mega-link .small { color: var(--feb-grey-400); }   /* 6,04:1 */

.mega-link:hover small,
.mega-link:focus small,
.mega-link:hover .small,
.mega-link:focus .small { color: var(--feb-grey-300); }

/* war var(--primary) - bleibt monochrom, eine Stufe leiser als der
   Linktext, damit die Ikonografie nicht mit ihm konkurriert */
.mega-icon { color: var(--feb-grey-400); }

.mega-side {
  background-color: var(--feb-grey-900);
  border-left: var(--feb-hairline-width) solid var(--feb-header-hairline);
}

.mega-side h4,
.mega-side .h4 { color: var(--feb-white); }
.mega-side p   { color: var(--feb-grey-300); }   /* 8,79:1 */

.mega-promo-label {
  font-size: var(--feb-fs-eyebrow);
  font-weight: var(--feb-fw-semibold);
  letter-spacing: var(--feb-ls-eyebrow);
  color: var(--feb-grey-400);
}

.mega-side .link-arrow { color: var(--feb-white); }

/* Trennlinien innerhalb des Panels */
.mega-group + .mega-group,
.mega-groups + .mega-side {
  border-color: var(--feb-header-hairline);
}

/* ============================================================
   7. Offcanvas - dunkel wie die uebrige Kopfzone (Spezifikation 9.2)

   Flaeche auf --feb-ink statt #111111. Alles, was bisher ueber
   var(--primary) eingefaerbt war, wuerde jetzt Ink auf Ink ergeben und
   ist deshalb auf die invertierte Textleiter umgestellt.
   ============================================================ */

.brm-offcanvas {
  background-color: var(--feb-ink);
  color: var(--feb-text-inverse);
}

.offcanvas-header { border-bottom: var(--feb-hairline-width) solid var(--feb-grey-700); }

/* W4-10: im Fuss stehen jetzt zwei Knoepfe untereinander - der
   Portal-Login (unter 576 px der einzige Weg dorthin) und der CTA, der
   die Kopfzeile verlassen hat. */
.offcanvas-footer {
  border-top: var(--feb-hairline-width) solid var(--feb-grey-700);
  display: grid;
  gap: var(--feb-space-2);
}

.offcanvas-title {
  font-size: var(--feb-fs-eyebrow);
  letter-spacing: var(--feb-ls-eyebrow);
  color: var(--feb-grey-400);
}

.offcanvas-close { color: var(--feb-grey-300); }
.offcanvas-close:hover,
.offcanvas-close:focus { color: var(--feb-white); }

.offcanvas-body { scrollbar-color: var(--feb-grey-700) transparent; }

.offcanvas-item { border-bottom: var(--feb-hairline-width) solid var(--feb-grey-800); }

.offcanvas-trigger {
  font-size: var(--feb-fs-btn);
  font-weight: var(--feb-fw-medium);
  color: var(--feb-grey-200);
}

.offcanvas-trigger:hover,
.offcanvas-trigger:focus-visible { color: var(--feb-white); }

.offcanvas-chevron { opacity: 0.7; }

.offcanvas-group-heading {
  font-size: var(--feb-fs-eyebrow);
  letter-spacing: var(--feb-ls-eyebrow);
  color: var(--feb-grey-400);
}

.offcanvas-link { color: var(--feb-grey-300); }

.offcanvas-link:hover,
.offcanvas-link:focus-visible {
  color: var(--feb-white);
  background-color: var(--feb-grey-900);
}

.offcanvas-icon { color: var(--feb-grey-400); }

.offcanvas-extra {
  background-color: var(--feb-grey-900);
  border: var(--feb-hairline-width) solid var(--feb-grey-700);
}

.offcanvas-extra h4,
.offcanvas-extra .h4 { color: var(--feb-white); }
.offcanvas-extra p   { color: var(--feb-grey-400); }

.offcanvas-extra a {
  color: var(--feb-white);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.offcanvas-overlay { background-color: rgba(0, 0, 0, 0.6); }

/* ============================================================
   8. Footer - Anthrazit (Spezifikation 9.3)

   Flaeche --feb-ink statt der Navy #13192E, Text Weiss,
   Zwischenueberschriften in --feb-grey-300, Links --feb-grey-200 mit
   Hover auf Weiss, Trennlinien --feb-grey-700, Rechtszeile 13 px in
   --feb-grey-400 (6,04:1). Kein Akzent im Footer.

   Die Linkregeln des Kompilats stehen mit `!important` und bis zu
   (0,4,3) Spezifitaet. Die folgenden Regeln spiegeln diese Selektoren,
   damit sie ueber die Quellreihenfolge gewinnen.
   ============================================================ */

.brm-footer {
  background-color: var(--feb-ink);
  color: var(--feb-text-inverse);
  /* Sektionen tragen ihren Weissraum jetzt selbst als padding-block */
  margin-top: 0;
}

.brm-footer__top,
.brm-footer__main,
.brm-footer__bottom {
  background-color: var(--feb-ink);
}

.brm-footer__bottom {
  border-top: var(--feb-hairline-width) solid var(--feb-grey-700);
}

.brm-footer h1, .brm-footer .h1,
.brm-footer h2, .brm-footer .h2,
.brm-footer h3, .brm-footer .h3,
.brm-footer h4, .brm-footer .h4,
.brm-footer h5, .brm-footer .h5,
.brm-footer h6, .brm-footer .h6 {
  font-size: var(--feb-fs-h6);
  font-weight: var(--feb-fw-semibold);
  line-height: var(--feb-lh-tight);
  letter-spacing: var(--feb-ls-eyebrow);
  text-transform: uppercase;
  color: var(--feb-grey-300);
  margin-bottom: var(--feb-space-4);
}

/* Spaltenueberschriften: das Kompilat setzt hier `color:#fff !important` */
.brm-footer__main nav.block-menu > h2,
.brm-footer__main nav.block-menu > .h2,
.brm-footer__main nav.menu--main > h2,
.brm-footer__main nav.menu--main > .h2,
.brm-footer__main > .region-footer-main > nav > h2,
.brm-footer__main > .region-footer-main > nav > .h2,
.brm-footer__main .footer-heading {
  font-size: var(--feb-fs-h6);
  font-weight: var(--feb-fw-semibold);
  letter-spacing: var(--feb-ls-eyebrow);
  text-transform: uppercase;
  color: var(--feb-grey-300) !important;
}

/* Menuelinks: 13,35:1 im Ruhezustand, 19,48:1 im Hover */
.brm-footer__main nav.block-menu ul.nav:not(.contextual-links) a,
.brm-footer__main nav.block-menu ul.menu a,
.brm-footer__main nav.block-menu ul.navbar-nav a,
.brm-footer__main nav.block-menu > ul a,
.brm-footer__main nav.menu--main ul.nav:not(.contextual-links) a,
.brm-footer__main nav.menu--main ul.menu a,
.brm-footer__main nav.menu--main ul.navbar-nav a,
.brm-footer__main nav.menu--main > ul a {
  color: var(--feb-grey-200) !important;
  font-size: var(--feb-fs-sm);
}

.brm-footer__main nav.block-menu ul.nav:not(.contextual-links) a:hover,
.brm-footer__main nav.block-menu ul.nav:not(.contextual-links) a:focus,
.brm-footer__main nav.block-menu ul.menu a:hover,
.brm-footer__main nav.block-menu ul.menu a:focus,
.brm-footer__main nav.block-menu ul.navbar-nav a:hover,
.brm-footer__main nav.block-menu ul.navbar-nav a:focus,
.brm-footer__main nav.block-menu > ul a:hover,
.brm-footer__main nav.block-menu > ul a:focus,
.brm-footer__main nav.menu--main ul.nav:not(.contextual-links) a:hover,
.brm-footer__main nav.menu--main ul.nav:not(.contextual-links) a:focus,
.brm-footer__main nav.menu--main ul.menu a:hover,
.brm-footer__main nav.menu--main ul.menu a:focus,
.brm-footer__main nav.menu--main ul.navbar-nav a:hover,
.brm-footer__main nav.menu--main ul.navbar-nav a:focus,
.brm-footer__main nav.menu--main > ul a:hover,
.brm-footer__main nav.menu--main > ul a:focus {
  color: var(--feb-white) !important;
}

.brm-footer__main p {
  font-size: var(--feb-fs-sm);
  line-height: var(--feb-lh-tight);
  color: var(--feb-grey-300);
}

.brm-footer__main .block-content-basic a {
  font-size: var(--feb-fs-sm);
  color: var(--feb-grey-200);
}

.brm-footer__main .block-content-basic a:hover,
.brm-footer__main .block-content-basic a:focus {
  color: var(--feb-white);
}

/* Footer-Logo bleibt Weiss: die SVG-Wortmarke ist selbst weiss, der
   Filter erzwingt das unabhaengig vom Dateiinhalt. Seit W4-1 traegt der
   Header denselben Filter - Kopf und Fuss zeigen dieselbe Marke. */
.brm-footer__main .footer-brand__logo {
  filter: brightness(0) invert(1);
}

/* Social-Icons: Rand mit 3,67:1 gegen die Anthrazitflaeche, damit die
   Bedienelement-Begrenzung WCAG 1.4.11 erfuellt (bisher 1,30:1). */
.brm-footer__main .footer-brand__social a {
  border: var(--feb-hairline-width) solid var(--feb-border-inverse-strong);
  color: var(--feb-grey-200);
  border-radius: var(--feb-radius);
  transition: border-color var(--feb-dur-base) var(--feb-ease),
              color var(--feb-dur-base) var(--feb-ease),
              background-color var(--feb-dur-base) var(--feb-ease);
}

.brm-footer__main .footer-brand__social a:hover,
.brm-footer__main .footer-brand__social a:focus {
  border-color: var(--feb-white);
  background-color: var(--feb-white);
  color: var(--feb-ink);
}

.brm-footer__main .footer-contact__badges span {
  border: var(--feb-hairline-width) solid var(--feb-border-inverse-strong);
  border-radius: var(--feb-radius);
  font-size: var(--feb-fs-xs);
  color: var(--feb-grey-300);
}

/* Rechtszeile */
.brm-footer__bottom > .region-footer-bottom {
  font-size: var(--feb-fs-xs);
  color: var(--feb-grey-400);
}

.brm-footer__bottom nav a,
.brm-footer__bottom ul.menu a {
  color: var(--feb-grey-400);
  text-decoration: none;
}

.brm-footer__bottom nav a:hover,
.brm-footer__bottom nav a:focus,
.brm-footer__bottom ul.menu a:hover,
.brm-footer__bottom ul.menu a:focus {
  color: var(--feb-white);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Fokus auf dunkler Flaeche: tokens.css setzt in diesem Scope
   --feb-focus auf Weiss, der Ring aus base.css invertiert damit
   automatisch (19,48:1). Hier nur die Stellen, an denen das Kompilat
   eigene Fokusregeln mitbringt. */
.brm-footer a:focus-visible,
.brm-footer button:focus-visible,
.brm-offcanvas a:focus-visible,
.brm-offcanvas button:focus-visible {
  outline: var(--feb-focus-width) solid var(--feb-white);
  outline-offset: var(--feb-focus-offset);
}

/* Hinweis fuer R2b: .brm-footer__top ist im gesamten Frontend nicht
   gerendert (toter Code, Konzept-Review N3). Die dortigen Regeln
   `.brm-footer__top .btn-primary { background-color: var(--primary) }`
   ueberschreiben mit (0,2,0) jede Buttondefinition aus buttons.css.
   Bewusst nicht angefasst, damit die Buttonrangordnung an einer Stelle
   bleibt - beim Aktivieren des CTA-Bandes dort mitziehen. */