/* ============================================================================
   febana Redesign · Welle R2b — Button-/CTA-System
   ----------------------------------------------------------------------------
   Setzt Abschnitt 5 des Token-Vorschlags um: drei Raenge statt 13 CTA-Stile.

     Rang 1  Primary    gefuellte Akzentflaeche (--feb-accent) mit WEISSER Schrift
     Rang 2  Secondary  monochromes 1px-Outline, auf Dunkel automatisch weiss
     Rang 3  Tertiary   Textlink mit Chevron

   W4-1: Der Akzent ist von Cyan #00C0D8 auf ein knackiges Blau
   gewechselt und ist damit die EINZIGE Farbe im ganzen System - alles
   andere ist monochrom, die Kopfzone ist schwarz.

   W4-11: Der Akzent ist auf das Mercedes-Blau #006ABC gesetzt
   (Kundenvorgabe, ersetzt #0565F5). Die Beschriftung auf dem Akzent
   ist Weiss (5,54:1) statt Ink (3,51:1, unter AA); sie haengt
   durchgaengig an --feb-on-accent. Werte und Rechenweg stehen im
   Kopf von css/redesign/tokens.css - diese Datei fuehrt ausser der
   Geometrie keine eigenen Farbwerte.

   W4-11 zweitens: Der Innenabstand der drei Groessen waechst von
   20/28/36 auf 24/32/40 px (Kundenwunsch "insgesamt mehr Space"),
   mitwachsend ueber clamp() - unter rund 375 px Viewportbreite bleibt
   es bei den alten Werten, damit auf schmalen Geraeten kein Ueberlauf
   hinzukommt. Rechenweg und Messwerte stehen bei den Tokens in
   css/redesign/tokens.css; hier steht nur, welche Groesse welchen
   Token zieht.

   Voraussetzungen
     · css/redesign/tokens.css (Welle R2a) definiert alle --feb-*-Tokens.
     · Diese Datei laedt NACH style.min.css und welle-0.css.

   Zur Spezifitaet: die Inline-CTA-Sektionen (.final-cta, .feb-tech-link,
   .feb-app-preview-cta, .faq-more, .tags-list) bringen ihr CSS in
   <style>-Bloecken im <body> mit. Die stehen in der Dokumentreihenfolge NACH
   jedem Stylesheet aus dem <head>. Deshalb tragen die Regeln hier ein
   vorangestelltes `body ` — das hebt die Spezifitaet um genau einen
   Element-Selektor an und gewinnt damit gegen die gleichnamigen Inline-Regeln,
   ohne !important. Keine Regel dieser Datei benutzt !important.
   ============================================================================ */


/* ============================================================================
   1. KONTEXT-SCOPE — dunkle Flaechen
   ----------------------------------------------------------------------------
   Die Tokens werden ausschliesslich auf den Bedienelementen selbst umgesetzt,
   nicht auf den Containern. So bleibt der Wirkungsbereich dieser Datei exakt
   auf Buttons/CTAs begrenzt; Flaechen- und Textfarben der Sektionen gehoeren
   R2a bzw. den Folgewellen.
   ============================================================================ */

:is(
  .feb-on-dark,
  .feb-section--ink,
  .feb-section--dark,
  .brm-hero,
  .brm-header,
  .brm-footer,
  .brm-offcanvas,
  .final-cta,
  .feb-app-preview,
  .news-hero,
  .bg-dark,
  .bg-accent
) :is(
  .btn,
  .feb-btn,
  .feb-btn--tertiary,
  .cta-btn,
  .cta-link,
  .feb-app-preview-cta,
  .link-arrow,
  .brm-hero__link-secondary,
  .feb-tech-link,
  .fk-tlink,
  .faq-more a,
  .tags-list a,
  .field--type-link > a
) {
  --feb-text:           var(--feb-text-inverse);
  --feb-text-secondary: var(--feb-text-inverse-secondary);
  --feb-text-muted:     var(--feb-text-inverse-muted);
  --feb-surface:        var(--feb-ink);
  --feb-border:         var(--feb-border-inverse);
  --feb-border-strong:  var(--feb-border-inverse-strong);
  --feb-border-ink:     var(--feb-white);
  --feb-focus:          var(--feb-focus-inverse);
}

/* Helle Insel innerhalb eines dunklen Bandes — Tokens zuruecksetzen. */
:is(.feb-on-light, .bg-white, .bg-light) :is(.btn, .feb-btn, .feb-btn--tertiary, .link-arrow, .field--type-link > a) {
  --feb-text:           var(--feb-ink);
  --feb-text-secondary: var(--feb-grey-600);
  --feb-text-muted:     var(--feb-grey-500);
  --feb-surface:        var(--feb-white);
  --feb-border:         var(--feb-grey-200);
  --feb-border-strong:  var(--feb-grey-400);
  --feb-border-ink:     var(--feb-ink);
  --feb-focus:          var(--feb-ink);
}


/* ============================================================================
   2. BASIS — gemeinsame Geometrie aller gefuellten/umrandeten Buttons
   ============================================================================ */

body :is(
  .btn,
  .feb-btn,
  .final-cta .cta-btn,
  .feb-app-preview-cta,
  .faq-more a
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: var(--feb-control-h);          /* 48 px */
  min-height: var(--feb-control-h);
  padding-inline: var(--feb-btn-px);     /* 28 -> 32 px */
  padding-block: 0;
  border: var(--feb-hairline-width) solid transparent;
  border-radius: var(--feb-radius);      /* 0 */
  font-family: var(--feb-font-sans);
  font-size: var(--feb-fs-btn);          /* 15 px */
  font-weight: var(--feb-fw-semibold);   /* 600 */
  letter-spacing: var(--feb-ls-btn);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: none;                  /* raeumt die Theme-Versalien ab */
  white-space: nowrap;
  box-shadow: var(--feb-shadow-none);
  cursor: pointer;
  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);
}

/* Kein Verlauf, keine Erhebung, keine Verschiebung — Flaechenwechsel statt
   Transparenzabschwaechung (Zustandsmatrix 5.3). */
body :is(.btn, .feb-btn, .final-cta .cta-btn, .feb-app-preview-cta, .faq-more a):is(:hover, :focus, :active) {
  background-image: none;
  transform: none;
}

/* ---- Groessen: repariert die wirkungslosen .btn-lg / .btn-sm ---------------
   Bootstrap definiert sie nur ueber --bs-btn-*; die Theme-Basisregel
   ueberschreibt padding/font-size danach mit festen Werten, wodurch die
   Groessenklassen bisher folgenlos blieben (Review M3). Hier werden die
   Eigenschaften direkt gesetzt — 40 / 48 / 56 px laut Spec 5.2. ------------ */

body :is(.btn-sm, .btn-group-sm > .btn, .feb-btn--sm) {
  height: var(--feb-control-h-sm);       /* 40 px */
  min-height: var(--feb-control-h-sm);
  padding-inline: var(--feb-btn-px-sm);  /* 20 -> 24 px */
  font-size: var(--feb-fs-sm);           /* 14 px */
}

body :is(.btn-lg, .btn-group-lg > .btn, .feb-btn--lg) {
  height: var(--feb-control-h-lg);       /* 56 px */
  min-height: var(--feb-control-h-lg);
  padding-inline: var(--feb-btn-px-lg);  /* 36 -> 40 px */
  font-size: var(--feb-fs-body);         /* 16 px */
  min-width: 11rem;
}

/* Header-CTA ist per Definition sm - aber mit eigenem, engerem
   Innenabstand: die Kopfzone ist breitenkritisch, deshalb nimmt sie den
   Zuwachs aus W4-11 nicht mit (--feb-btn-px-header = unveraenderte
   20 px). Alles andere - Hoehe, Schriftgrad, Laufweite - bleibt am
   sm-Rang. */
body .brm-header__cta {
  height: var(--feb-control-h-sm);
  min-height: var(--feb-control-h-sm);
  padding: 0 var(--feb-btn-px-header);
  font-size: var(--feb-fs-sm);
  letter-spacing: var(--feb-ls-btn);
  text-transform: none;
}


/* ============================================================================
   3. RANG 1 — PRIMARY
   Akzentflaeche, weisse Schrift, 1px Rahmen in Flaechenfarbe (haelt die
   optische Achse zum danebenstehenden Outline-Button).
   Auf hellem wie auf dunklem Grund identisch: alle drei Akzentstufen
   liegen ueber 3:1 gegen --feb-ink und gegen Schwarz, die Flaeche bleibt
   also auch im Footer und in der schwarzen Kopfzone begrenzt (1.4.11).
   ============================================================================ */

body :is(
  .btn-primary,
  .btn-white,
  .feb-btn--primary,
  .final-cta .cta-btn,
  .brm-footer__top .btn-primary
) {
  --bs-btn-color:                 var(--feb-on-accent);
  --bs-btn-bg:                    var(--feb-accent);
  --bs-btn-border-color:          var(--feb-accent);
  --bs-btn-hover-color:           var(--feb-on-accent);
  --bs-btn-hover-bg:              var(--feb-accent-hover);
  --bs-btn-hover-border-color:    var(--feb-accent-hover);
  --bs-btn-active-color:          var(--feb-on-accent);
  --bs-btn-active-bg:             var(--feb-accent-active);
  --bs-btn-active-border-color:   var(--feb-accent-active);
  --bs-btn-disabled-color:        var(--feb-grey-400);
  --bs-btn-disabled-bg:           var(--feb-grey-100);
  --bs-btn-disabled-border-color: var(--feb-grey-200);
  --bs-btn-focus-box-shadow:      none;
  background-color: var(--feb-accent);
  border-color:     var(--feb-accent);
  color:            var(--feb-on-accent);
}

body :is(.btn-primary, .btn-white, .feb-btn--primary, .final-cta .cta-btn, .brm-footer__top .btn-primary):is(:hover, :focus-visible) {
  background-color: var(--feb-accent-hover);
  border-color:     var(--feb-accent-hover);
  color:            var(--feb-on-accent);
}

body :is(.btn-primary, .btn-white, .feb-btn--primary, .final-cta .cta-btn, .brm-footer__top .btn-primary):active {
  background-color: var(--feb-accent-active);
  border-color:     var(--feb-accent-active);
  color:            var(--feb-on-accent);
}

/* Maus-Fokus ohne Hover faellt auf den Default zurueck — das Theme faerbte
   :focus bisher exakt wie :hover ein (Review M9). */
body :is(.btn-primary, .btn-white, .feb-btn--primary, .final-cta .cta-btn):focus:not(:hover):not(:focus-visible):not(:active) {
  background-color: var(--feb-accent);
  border-color:     var(--feb-accent);
  color:            var(--feb-on-accent);
}

body :is(.btn-primary, .btn-white, .feb-btn--primary, .final-cta .cta-btn):is(:disabled, .disabled, [aria-disabled="true"]) {
  background-color: var(--feb-grey-100);
  border-color:     var(--feb-grey-200);
  color:            var(--feb-grey-400);
  cursor: not-allowed;
  pointer-events: none;
}

body :is(.feb-on-dark, .feb-section--ink, .feb-section--dark, .brm-hero, .brm-footer, .brm-offcanvas, .final-cta, .feb-app-preview, .bg-dark, .bg-accent)
     :is(.btn-primary, .btn-white, .feb-btn--primary, .cta-btn):is(:disabled, .disabled, [aria-disabled="true"]) {
  background-color: var(--feb-grey-800);
  border-color:     var(--feb-grey-700);
  color:            var(--feb-grey-600);
}


/* ============================================================================
   3b. RANG 1 — die fuenf Content-Primaer-CTAs (Inventur W2c)
   ----------------------------------------------------------------------------
   Diese fuenf Knoepfe kommen nicht aus dem Theme, sondern aus <style>-Bloecken
   im Redaktionsinhalt. Sie standen alle auf Ink mit Weiss und einem
   translateY-Hover. Auftraggeberlinie "Akzent = Buttons": sie werden zu
   Rang 1. Der Ueberlaufsalat aus Groessen bleibt bewusst unberuehrt - hier
   steht ausschliesslich die Farblogik.

     .feb-final-system-cta-btn                (0,1,0)  Systemloesungen
     .faq-cta a.faq-cta-btn                   (0,2,1)  Haeufige Fragen
     .webform-button--submit                  (0,2,0)  Kontakt-Webform
     .fk-btn--primary                         (0,1,0)  Anfrage gesendet
     .final-cta .cta-btn                      (0,2,0)  -> steht bereits in 3.

   BEWUSST eine eigene Regel statt einer Erweiterung der Liste in Abschnitt 3:
   `.faq-cta a.faq-cta-btn` wuerde die Spezifitaet dieser Liste von (0,2,1)
   auf (0,2,2) heben. Dann schluege Rang 1 den Rang-2-Block in Abschnitt 4 -
   und `.btn-white` steht in beiden Listen. Der Header-CTA (.btn .btn-white
   .brm-header__cta) waere schlagartig eine Akzentflaeche. Getrennte Regel,
   getrennte Spezifitaet, keine Fernwirkung.
   ============================================================================ */

body :is(
  .feb-final-system-cta-btn,
  .faq-cta a.faq-cta-btn,
  .webform-button--submit,
  .fk-btn--primary
) {
  background-color: var(--feb-accent);
  border: var(--feb-hairline-width) solid var(--feb-accent);
  border-radius: var(--feb-radius);
  color: var(--feb-on-accent);
  box-shadow: var(--feb-shadow-none);
  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);
}

/* Flaechenwechsel statt Erhebung: die Inline-Bloecke fahren hier
   translateY(-1px/-2px) und eine Schattenwolke (Zustandsmatrix 5.3). */
body :is(.feb-final-system-cta-btn, .faq-cta a.faq-cta-btn, .webform-button--submit, .fk-btn--primary):is(:hover, :focus-visible) {
  background-color: var(--feb-accent-hover);
  border-color:     var(--feb-accent-hover);
  color:            var(--feb-on-accent);
  background-image: none;
  transform: none;
  box-shadow: var(--feb-shadow-none);
}

body :is(.feb-final-system-cta-btn, .faq-cta a.faq-cta-btn, .webform-button--submit, .fk-btn--primary):active {
  background-color: var(--feb-accent-active);
  border-color:     var(--feb-accent-active);
  color:            var(--feb-on-accent);
  transform: none;
  box-shadow: var(--feb-shadow-none);
}

body :is(.feb-final-system-cta-btn, .faq-cta a.faq-cta-btn, .webform-button--submit, .fk-btn--primary):focus-visible {
  outline: var(--feb-focus-width) solid var(--feb-focus);
  outline-offset: var(--feb-focus-offset);
}

body :is(.feb-final-system-cta-btn, .faq-cta a.faq-cta-btn, .webform-button--submit, .fk-btn--primary):is(:disabled, .disabled, [aria-disabled="true"]) {
  background-color: var(--feb-grey-100);
  border-color:     var(--feb-grey-200);
  color:            var(--feb-grey-400);
  cursor: not-allowed;
  pointer-events: none;
}


/* ============================================================================
   4. RANG 2 — SECONDARY (Outline, monochrom)
   Die Farbe kommt aus --feb-border-ink / --feb-text und kippt im dunklen
   Scope (Abschnitt 1) automatisch auf Weiss.
   ============================================================================ */

body :is(
  .btn-secondary,
  .btn-outline-primary,
  .btn-outline-secondary,
  .btn-outline-dark,
  .btn-outline-light,
  .btn-outline-white,
  .btn-dark,
  .btn-light,
  .feb-btn--secondary,
  .brm-header__cta,
  .brm-header .btn-white,
  .feb-app-preview-cta,
  .faq-more a,
  .brm-footer__top .btn-outline-white
) {
  --bs-btn-color:                 var(--feb-text);
  --bs-btn-bg:                    transparent;
  --bs-btn-border-color:          var(--feb-border-ink);
  --bs-btn-hover-color:           var(--feb-surface);
  --bs-btn-hover-bg:              var(--feb-text);
  --bs-btn-hover-border-color:    var(--feb-text);
  --bs-btn-active-color:          var(--feb-surface);
  --bs-btn-active-bg:             var(--feb-text);
  --bs-btn-active-border-color:   var(--feb-text);
  --bs-btn-disabled-color:        var(--feb-grey-300);
  --bs-btn-disabled-bg:           transparent;
  --bs-btn-disabled-border-color: var(--feb-grey-300);
  --bs-btn-focus-box-shadow:      none;
  background-color: transparent;
  border: var(--feb-hairline-width) solid var(--feb-border-ink);
  color: var(--feb-text);
}

/* Hover/Active = Flaechenwechsel. */
body :is(.btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light, .btn-outline-white, .btn-dark, .btn-light, .feb-btn--secondary, .brm-header__cta, .brm-header .btn-white, .feb-app-preview-cta, .faq-more a):is(:hover, :focus-visible) {
  background-color: var(--feb-text);
  border-color:     var(--feb-text);
  color:            var(--feb-surface);
}

body :is(.btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light, .btn-outline-white, .btn-dark, .btn-light, .feb-btn--secondary, .brm-header__cta, .brm-header .btn-white, .feb-app-preview-cta, .faq-more a):focus:not(:hover):not(:focus-visible):not(:active) {
  background-color: transparent;
  border-color:     var(--feb-border-ink);
  color:            var(--feb-text);
}

/* Active auf hellem Grund */
body :is(.btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light, .btn-outline-white, .btn-dark, .btn-light, .feb-btn--secondary, .brm-header__cta, .brm-header .btn-white, .feb-app-preview-cta, .faq-more a):active {
  background-color: var(--feb-grey-800);
  border-color:     var(--feb-grey-800);
  color:            var(--feb-white);
}

/* Active auf dunklem Grund */
body :is(.feb-on-dark, .feb-section--ink, .feb-section--dark, .brm-hero, .brm-footer, .brm-offcanvas, .final-cta, .feb-app-preview, .bg-dark, .bg-accent)
     :is(.btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light, .btn-outline-white, .btn-dark, .btn-light, .feb-btn--secondary, .feb-app-preview-cta):active {
  background-color: var(--feb-grey-100);
  border-color:     var(--feb-grey-100);
  color:            var(--feb-ink);
}

body :is(.btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light, .btn-outline-white, .btn-dark, .btn-light, .feb-btn--secondary, .brm-header__cta, .feb-app-preview-cta, .faq-more a):is(:disabled, .disabled, [aria-disabled="true"]) {
  background-color: transparent;
  border-color: var(--feb-grey-300);
  color:        var(--feb-grey-300);
  cursor: not-allowed;
  pointer-events: none;
}

body :is(.feb-on-dark, .feb-section--ink, .feb-section--dark, .brm-hero, .brm-footer, .brm-offcanvas, .final-cta, .feb-app-preview, .bg-dark, .bg-accent)
     :is(.btn-secondary, .btn-outline-white, .btn-outline-light, .feb-btn--secondary, .feb-app-preview-cta):is(:disabled, .disabled, [aria-disabled="true"]) {
  border-color: var(--feb-grey-600);
  color:        var(--feb-grey-600);
}

/* Der Header-CTA ist im Kompilat `.btn .btn-white`. R2a hatte ihn hier auf
   die helle Welt gezwungen, weil der Header damals weiss war. Seit W4-1 ist
   die Kopfzone schwarz und .brm-header steht in der Dunkelliste aus
   Abschnitt 1 — die Tokens kippen also von selbst. Die Werte stehen
   trotzdem explizit da, damit die Absicht dokumentiert bleibt: weisser
   Outline auf Schwarz (21:1), Flaechenwechsel im Hover. */
body .brm-header__cta,
body .brm-header .btn-white {
  --feb-border-ink: var(--feb-white);
  --feb-text:       var(--feb-white);
  --feb-surface:    var(--feb-ink);
  --feb-focus:      var(--feb-white);
}

/* ----------------------------------------------------------------------------
   REGRESSION AUS R2b, hier repariert (Befund W4-1, im Browser gemessen)

   Das Kompilat blendet den Header-CTA unter 768 px aus:
       .brm-header__cta { display: none }                       (0,1,0)
       @media (min-width:768px) { … { display: inline-block } } (0,1,0)
   Die Basisregel in Abschnitt 2 dieser Datei setzt aber
       body :is(.btn, .feb-btn, .final-cta .cta-btn, …) { display: inline-flex }
   und hat wegen `.final-cta .cta-btn` im :is() die Spezifitaet (0,2,1).
   Damit gewann sie gegen beide Theme-Regeln — der 170 px breite Knopf wurde
   auf JEDER Breite gerendert. Da .brm-header__actions und .brm-header__logo
   flex-shrink:0 tragen, schob er die Aktionsgruppe bei 360 px 75 px ueber
   den rechten Rand hinaus (Screenshot w2-zwischenstand-mobil).

   Gemessen nach der Reparatur (documentElement.clientWidth vs.
   .brm-header__actions.right):
       360 px  -16    500 px  -18    700 px  -22    768 px  -23
       900 px  -26    992 px  -16   1024 px  -28   1200 px  -32
      1320 px  -34   1440 px  -57      -> kein Ueberlauf mehr, auf keiner Breite
   body.scrollWidth entspricht auf allen genannten Breiten der Viewportbreite.
   ---------------------------------------------------------------------------- */

body .brm-header .brm-header__cta {
  display: none;
}

@media (min-width: 768px) {
  body .brm-header .brm-header__cta {
    display: inline-flex;
  }
}

/* Verbotene Statusfarben im Frontend auf Secondary zurueckfuehren (Spec 5.1). */
body :is(.btn-success, .btn-info, .btn-warning, .btn-outline-success, .btn-outline-info, .btn-outline-warning) {
  --bs-btn-bg:                 transparent;
  --bs-btn-border-color:       var(--feb-border-ink);
  --bs-btn-color:              var(--feb-text);
  --bs-btn-hover-bg:           var(--feb-text);
  --bs-btn-hover-border-color: var(--feb-text);
  --bs-btn-hover-color:        var(--feb-surface);
  background-color: transparent;
  border: var(--feb-hairline-width) solid var(--feb-border-ink);
  color: var(--feb-text);
}


/* ============================================================================
   5. RANG 3 — TERTIARY / Pfeil-Link
   Vereinheitlicht die fuenf vorgefundenen Pfeil-Link-Varianten:
     .link-arrow (+ --light)         · CSS-Pfeil ::after
     .brm-hero__link-secondary       · CSS-Pfeil ::after
     .feb-tech-link                  · Markup-Pfeil <span>&rarr;</span>
     .final-cta .cta-link            · Pfeilzeichen direkt im Linktext
     .fk-tlink                       · Pfeilzeichen direkt im Linktext

   `:not(.brm-card__link):not(.brm-feature-card__link):not(.paragraph-slider__link)`
   haelt die Karten-WRAPPER (ein <div class="… link-arrow">, in dem der echte
   Link steckt) aus der Regel heraus — sie duerfen weder Chevron noch
   inline-flex bekommen.
   ============================================================================ */

body :is(
  .feb-btn--tertiary,
  .link-arrow,
  .brm-hero__link-secondary,
  .feb-tech-link,
  .fk-tlink,
  .final-cta .cta-link,
  .brm-feature-card__link.link-arrow .field--type-link > a,
  .brm-card__link.link-arrow .field--type-link > a,
  .paragraph-slider__link.link-arrow .field--type-link > a
):not(.brm-card__link):not(.brm-feature-card__link):not(.paragraph-slider__link) {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  height: auto;
  min-height: 0;
  padding: 0.25rem 0;
  border: 0;
  border-radius: var(--feb-radius);
  background: none;
  color: var(--feb-text);
  font-family: var(--feb-font-sans);
  font-size: var(--feb-fs-btn);
  font-weight: var(--feb-fw-semibold);
  letter-spacing: var(--feb-ls-btn);
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  box-shadow: inset 0 -1px 0 0 transparent;
  transition: box-shadow var(--feb-dur-base) var(--feb-ease),
              color      var(--feb-dur-base) var(--feb-ease);
}

/* Chevron statt Textpfeil — dort, wo der Pfeil aus dem CSS kommt. */
body :is(
  .feb-btn--tertiary,
  .link-arrow,
  .brm-hero__link-secondary,
  .brm-feature-card__link.link-arrow .field--type-link > a,
  .brm-card__link.link-arrow .field--type-link > a,
  .paragraph-slider__link.link-arrow .field--type-link > a
):not(.brm-card__link):not(.brm-feature-card__link):not(.paragraph-slider__link)::after {
  content: "";
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform           var(--feb-dur-base) var(--feb-ease),
              margin-inline-start var(--feb-dur-base) var(--feb-ease);
}

/* Chevron dort, wo der Pfeil als <span> im Markup steht. */
body :is(.feb-tech-link, .feb-app-preview-cta, .faq-more a) > span,
body :is(.feb-tech-link, .feb-app-preview-cta, .faq-more a) > span[aria-hidden="true"] {
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 0.5rem;
  height: 0.5rem;
  font-size: 0;
  line-height: 0;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform           var(--feb-dur-base) var(--feb-ease),
              margin-inline-start var(--feb-dur-base) var(--feb-ease);
}

/* Hover: Unterlinie 1 px + Chevron 4 px weiter. Kein gap-Wachstum,
   kein Farbwechsel — die Linie traegt den Zustand. */
body :is(.feb-btn--tertiary, .link-arrow, .brm-hero__link-secondary, .feb-tech-link, .fk-tlink, .final-cta .cta-link,
         .brm-feature-card__link.link-arrow .field--type-link > a):not(.brm-feature-card__link):is(:hover, :focus-visible) {
  gap: 0.625rem;
  color: var(--feb-text);
  box-shadow: inset 0 -1px 0 0 currentColor;
}

body :is(.feb-btn--tertiary, .link-arrow, .brm-hero__link-secondary, .final-cta .cta-link, .fk-tlink, .feb-tech-link,
         .brm-feature-card__link.link-arrow .field--type-link > a):not(.brm-feature-card__link):active {
  box-shadow: inset 0 -2px 0 0 currentColor;
}

body :is(.feb-btn--tertiary, .link-arrow, .brm-hero__link-secondary,
         .brm-feature-card__link.link-arrow .field--type-link > a):not(.brm-feature-card__link):is(:hover, :focus-visible)::after {
  margin-inline-start: 4px;
  transform: rotate(45deg);
}

/* Der Kartenlink traegt den Hover am umgebenden <a>. */
body .brm-feature-card:hover .brm-feature-card__link.link-arrow .field--type-link > a::after {
  margin-inline-start: 4px;
}

body :is(.feb-tech-link, .feb-app-preview-cta, .faq-more a):is(:hover, :focus-visible) > span,
body .feb-tech-card:hover .feb-tech-link > span,
body .feb-tech-card:focus-within .feb-tech-link > span {
  margin-inline-start: 4px;
  transform: rotate(45deg);
}

body .feb-tech-card:hover .feb-tech-link,
body .feb-tech-card:focus-within .feb-tech-link {
  box-shadow: inset 0 -1px 0 0 currentColor;
}

body :is(.feb-btn--tertiary, .link-arrow, .brm-hero__link-secondary, .feb-tech-link, .fk-tlink, .final-cta .cta-link):is(:disabled, .disabled, [aria-disabled="true"]) {
  color: var(--feb-grey-300);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* Pfeil-Links in hellen CTA-Bannern: das Theme zwang sie per (0,4,0)-Regel
   auf das alte Primaerblau. */
body :is(.paragraph-type--cta-banner, .brm-cta-image):not(.bg-accent):not(.bg-dark) .link-arrow--light {
  color: var(--feb-ink);
}
body :is(.paragraph-type--cta-banner, .brm-cta-image):not(.bg-accent):not(.bg-dark) .link-arrow--light:is(:hover, :focus-visible) {
  color: var(--feb-ink);
  box-shadow: inset 0 -1px 0 0 currentColor;
}

/* .link-arrow--light haengt am Token statt an hartem #fff. */
body .link-arrow--light,
body .link-arrow--light:is(:hover, :focus, :focus-visible) {
  color: var(--feb-text);
}


/* ============================================================================
   6. TAG-CHIPS — monochrom statt blau gefuellt
   .tags-list a war in der Inventur der dritte „blaue Primaerbutton".
   Layout (Grid, min-height) bleibt unangetastet, nur die Farblogik wechselt.
   ============================================================================ */

body .tags-list a {
  background-color: transparent;
  border: 0;
  border-radius: var(--feb-radius);
  box-shadow: inset 0 0 0 var(--feb-hairline-width) var(--feb-border-strong);
  color: var(--feb-text);
  font-family: var(--feb-font-sans);
  font-size: var(--feb-fs-sm);
  font-weight: var(--feb-fw-medium);
  letter-spacing: var(--feb-ls-sm);
  text-decoration: none;
  text-transform: none;
  transition: background-color var(--feb-dur-base) var(--feb-ease),
              box-shadow       var(--feb-dur-base) var(--feb-ease),
              color            var(--feb-dur-base) var(--feb-ease);
}

body .tags-list a:is(:hover, :focus-visible) {
  background-color: var(--feb-ink);
  box-shadow: inset 0 0 0 var(--feb-hairline-width) var(--feb-ink);
  color: var(--feb-white);
}

body .tags-list a:active {
  background-color: var(--feb-grey-800);
  box-shadow: inset 0 0 0 var(--feb-hairline-width) var(--feb-grey-800);
  color: var(--feb-white);
}

/* Ueberlaufschutz. Der <style>-Block der Sektion faehrt bis 520 px
   `white-space: nowrap` in einem Raster aus `repeat(3, 1fr)`. `1fr` ist
   `minmax(auto, 1fr)` — die Spur kann also nicht unter die Mindestbreite
   des laengsten Chips ("Robotik & Automatisierung") fallen und das Raster
   reisst zwischen 521 px und rund 580 px ueber den rechten Rand. Die Chips
   sind Flex-Boxen mit zentrierter Ausrichtung und min-height 44 px, ein
   zweizeiliger Chip sieht dort korrekt aus. `body ` hebt die Spezifitaet
   gegen den spaeter im Dokument stehenden <style>-Block. */
@media (max-width: 767.98px) {
  body .tags-list   { min-width: 0; }
  body .tags-list a { white-space: normal; min-width: 0; }
}


/* ============================================================================
   7. FOKUS — monochromer Ring, nie Akzent. Der Akzent kaeme mit 5,02:1
   gegen Weiss durch, bleibt aber der Primaerflaeche vorbehalten; der
   monochrome Ring kippt ueber --feb-focus automatisch auf Weiss, sobald
   er in der schwarzen Kopfzone oder auf einer dunklen Sektion sitzt.
   ============================================================================ */

body :is(
  .btn,
  .feb-btn,
  .feb-btn--tertiary,
  .cta-btn,
  .cta-link,
  .feb-app-preview-cta,
  .link-arrow,
  .brm-hero__link-secondary,
  .feb-tech-link,
  .fk-tlink,
  .faq-more a,
  .tags-list a,
  .brm-feature-card__link.link-arrow .field--type-link > a
):focus-visible {
  outline: var(--feb-focus-width) solid var(--feb-focus);
  outline-offset: var(--feb-focus-offset);
}

/* Bootstrap-Ring abschalten — die Outline uebernimmt. */
body :is(.btn, .feb-btn, .feb-app-preview-cta, .faq-more a):is(:focus, :focus-visible) {
  box-shadow: none;
}

/* Kartenlinks tragen den Fokus am umgebenden <a>. */
body .feb-tech-card:focus-visible,
body .brm-feature-card:focus-visible {
  outline: var(--feb-focus-width) solid var(--feb-focus);
  outline-offset: var(--feb-focus-offset);
}


/* ============================================================================
   8. BUTTONGRUPPEN — eine Primaeraktion, Sekundaeraktion rechts daneben
   ============================================================================ */

body :is(
  .feb-btn-group,
  .brm-hero__actions,
  .brm-cta-row,
  .final-cta-actions,
  .paragraph-cta-banner__actions,
  .footer-banner__actions-row
) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--feb-space-3);               /* 12 px — md-Gruppe */
}

body :is(.brm-hero__actions, .brm-cta-row, .final-cta-actions) {
  gap: var(--feb-space-4);               /* 16 px — lg-Gruppe */
}

body .brm-hero__actions {
  margin-top: var(--feb-space-7);
}

@media (max-width: 575.98px) {
  body :is(.feb-btn-group, .brm-hero__actions, .brm-cta-row, .final-cta-actions) {
    flex-direction: column;
    align-items: stretch;
  }
  body :is(.feb-btn-group, .brm-hero__actions, .brm-cta-row, .final-cta-actions) > :is(.btn, .feb-btn, .cta-btn) {
    width: 100%;
  }
}


/* ============================================================================
   9. BEWEGUNG
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  body :is(
    .btn,
    .feb-btn,
    .feb-btn--tertiary,
    .cta-btn,
    .cta-link,
    .feb-app-preview-cta,
    .link-arrow,
    .brm-hero__link-secondary,
    .feb-tech-link,
    .fk-tlink,
    .faq-more a,
    .tags-list a,
    .brm-feature-card__link.link-arrow .field--type-link > a
  ),
  body :is(.feb-btn--tertiary, .link-arrow, .brm-hero__link-secondary)::after,
  body :is(.feb-tech-link, .feb-app-preview-cta, .faq-more a) > span {
    transition: none;
  }
}
