/* ============================================================================
   WT-5  polish.css  —  Mikro-Interaktionen (Hover/Fokus/Transitions)
                        und Box-vs-Pill-Regel site-weit
   ----------------------------------------------------------------------------
   Laedt als LETZTE Redesign-Datei. Rein additiv, klassenbasiert.
   Nur Tokens var(--feb-*), keine Farb-Hexwerte. reduced-motion-sicher.
   Akzent #006ABC bleibt der Primaeraktion vorbehalten — hier ausschliesslich
   monochrome Zustaende (Ink/Hairline).
   ============================================================================ */

:root {
  /* Pill-Radius fuer nicht-interaktive Text-Tags. --feb-radius und
     --feb-radius-full sind systemweit auf 0 gezwungen (Buttons/Boxen bleiben
     eckig). Text-Tags brauchen den vollen Radius wieder —
     Kundenfeedback 20260820-e8e4c0a4. Kein Hexwert, nur eine Laenge. */
  --feb-pill: 999px;
}

/* ============================================================================
   A  MIKRO-INTERAKTIONEN  (dezent, MB-Anmutung: ruhig, praezise, kein Zappeln)
   ============================================================================ */

/* --- A1  Karten-Hover -------------------------------------------------------
   Bestand (css/style.css): .brm-card border 1px, :hover translateY(-2px) +
   border-color-Wechsel + Bildzoom scale(1.03). Wird respektiert; hier nur die
   Uebergangskurve auf die Projekt-Tokens vereinheitlicht und eine haarfeine,
   monochrome „Weiter"-Andeutung ergaenzt. Kein zusaetzliches Anheben,
   kein Schatten. */
.brm-card {
  transition: border-color var(--feb-dur-base) var(--feb-ease),
              transform    var(--feb-dur-base) var(--feb-ease);
}

/* Der ganze Titel ist ein stretched-link — auf Karten-Hover/-Fokus schiebt
   sich eine 1px-Unterkante unter den Titel (dieselbe Idiomatik wie die
   .link-arrow-Unterlinie in buttons.css). currentColor = Ink, kein Akzent. */
.brm-card__title-link {
  box-shadow: inset 0 0 0 0 currentColor;
  transition: box-shadow var(--feb-dur-base) var(--feb-ease);
}
.brm-card:hover .brm-card__title-link,
.brm-card:focus-within .brm-card__title-link {
  box-shadow: inset 0 -1px 0 0 currentColor;
}

/* Feature-Karten: der Pfeil-Nudge (4px) feuerte im Bestand nur auf :hover.
   Tastatur-Paritaet ergaenzen, damit der Fokus dieselbe ruhige Bewegung
   traegt. Selektor spiegelt exakt die Bestandsregel in buttons.css. */
body .brm-feature-card:focus-within .brm-feature-card__link.link-arrow .field--type-link > a::after {
  margin-inline-start: 4px;
}

/* --- A2  Fokus: ein einziger, ruhiger, monochromer Ring --------------------
   base.css traegt den :focus-visible-Ring bereits fuer a/button/input/select/
   textarea/summary/[tabindex]/[contenteditable]; buttons.css fuer .btn & Co.
   Hier ein Sicherheitsnetz mit denselben Tokens fuer Karten-Wrapper,
   Rollen-Elemente, Tag-Chips und die neuen Pills — damit kein interaktives
   Element ohne den gemeinsamen Ring bleibt. Kein outline:none ohne Ersatz. */
body :is(
  [role="button"],
  [role="link"],
  [role="tab"],
  [role="menuitem"],
  .brm-card,
  .brm-feature-card,
  .feb-tech-card,
  .brm-card__title-link,
  .brm-pill,
  .tags-list a
):focus-visible {
  outline: var(--feb-focus-width) solid var(--feb-focus);
  outline-offset: var(--feb-focus-offset);
  box-shadow: none;
}

/* --- A3  Transitions --------------------------------------------------------
   Kurze, konsistente Kurve fuer die hier neu eingefuehrten Zustaende. Die
   Tag-Chips bringen ihre Transition bereits tokenisiert mit (buttons.css);
   die Pill-Utility erhaelt dieselbe Kurve fuer den Fall interaktiver Nutzung.
   Ein globaler Seiten-Einblende-Fade wird bewusst NICHT ergaenzt: das Theme
   besitzt bereits das JS-gestuetzte .reveal-System (Progressive Enhancement,
   reduced-motion-sicher); ein zusaetzlicher CSS-Body-Fade barg FOUC-Risiko. */
.brm-pill {
  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);
}

/* ============================================================================
   B  BOX-vs-PILL  (Kundenfeedback 20260820-e8e4c0a4, verbindliche Design-Regel)
   ----------------------------------------------------------------------------
   Radius 0 (eckig) ist ausschliesslich echten Buttons/Aktionen vorbehalten.
   Nicht-interaktive Text-Tags/Chips/Badges/Labels werden voll abgerundete
   Pills (border-radius: var(--feb-pill)) oder bleiben schlichte Woerter ohne
   Kasten. Echte Buttons (.btn, Submit, CTA, Auswahlflaechen) bleiben eckig und
   werden hier NICHT angefasst.
   ============================================================================ */

/* Wiederverwendbare Utility. */
.brm-pill {
  border-radius: var(--feb-pill);
}

/* Kategorie-/Branchen-Tag-Chips (.tags-list a).
   Bestand: eckige Hairline-Box (Radius 0) mit Hover-Fill. Es sind Tag-Chips
   (Kategorie-Navigation), keine Buttons/CTAs/Submit/Auswahlflaechen — daher
   Pill. Layout (Grid, min-height 44px, Hairline, Hover-Fill) bleibt vollstaendig
   unangetastet; nur der Radius wechselt. Der inset-Hairline folgt dem Radius.
   Specificity 0-1-2 = wie buttons.css; polish laedt zuletzt und gewinnt. */
body .tags-list a {
  border-radius: var(--feb-pill);
}

/* Text-Badge (.fk-badge).
   War in der Vorlage bereits eine Pill (border-radius:999px) und wurde von
   structure.css unter der alten Radius-0-Spezifikation auf eckig gezwungen.
   Die Kundenregel stellt die Pill wieder her. Nicht-interaktiver Text-Badge. */
body .fk-badge {
  border-radius: var(--feb-pill);
}

/* ============================================================================
   A4  reduced-motion — alle hier neu eingefuehrten Bewegungen abschalten
   base.css neutralisiert Transitions global unter reduce; hier zusaetzlich
   explizit fuer die WT-5-Regeln (defensiv, falls die globale Regel entfaellt).
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .brm-card,
  .brm-card__title-link,
  .brm-pill,
  body .tags-list a {
    transition: none;
  }
  .brm-card:hover .brm-card__title-link,
  .brm-card:focus-within .brm-card__title-link {
    box-shadow: none;
  }
  body .brm-feature-card:focus-within .brm-feature-card__link.link-arrow .field--type-link > a::after {
    margin-inline-start: 0;
  }
}