/* bluebox redesign tokens (WP 67 Phase A).
 *
 * Source of truth: docs/design/README.md §3 "Design
 * Tokens" + design-system.jsx::BB_TOKENS.
 *
 * Two themes: ``data-theme="light"`` (default) and
 * ``data-theme="dark"``. Toggle in BaseLayout.astro
 * via the existing theme-toggle button.
 *
 * The bb-* tokens are the **canonical** names from
 * the design handoff. The legacy --bg / --fg / --fg-
 * muted / --border / --badge-bg variables that the
 * existing pages already use are aliased to the new
 * tokens at the bottom so we can migrate page-by-
 * page without breaking what already ships.
 */

:root {
  /* Brand — theme-independent. */
  --bb-blue-primary: #086EE0;
  --bb-blue-hover: #0A7CF0;
  --bb-cyan: #08A8C8;
  --bb-navy: #02283C;
  --bb-blue-light: #86C7F2;
  --bb-cyan-light: #D7ECFA;
  /* Warmer Brand-Akzent (Diff-Bericht 08).
     Verwendung: Hero-Hervorhebung, Marken-
     Zeichen. NICHT fuer Buttons/Links —
     dafuer bleibt --bb-blue-primary. */
  --bb-warm: #C8431F;
  --bb-warm-soft: rgba(200, 67, 31, 0.10);

  /* Typography stacks. ``…Variable``-Familien
     kommen aus den selbst-gehosteten
     fontsource-Paketen (siehe BaseLayout-Import).
     Fallback-Stack greift, wenn die Schriften
     noch nicht geladen sind oder das Paket
     fehlt. */
  --bb-font-sans: "Inter Variable", "Inter",
    system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  --bb-font-serif: "Source Serif 4 Variable",
    "Source Serif 4", "Source Serif Pro",
    Georgia, serif;
  --bb-font-mono: "JetBrains Mono Variable",
    "JetBrains Mono", "SF Mono", Consolas,
    "Courier New", monospace;

  /* Type-Scale (WS2-2). 1.25er Modular-Scale auf
     16px-Basis — passt zum Lese-Komfort der Wiki-
     Korpus-Pages, ohne dass Display-Headings zu
     gross werden. Inline-CSS in Astro-Pages soll
     diese Tokens nutzen statt freier ``font-size``-
     Hex. */
  --bb-text-xs: 0.75rem;    /* 12px — Captions, Meta */
  --bb-text-sm: 0.875rem;   /* 14px — Sekundaer-Body */
  --bb-text-base: 1rem;     /* 16px — Body */
  --bb-text-md: 1.125rem;   /* 18px — Lead / Intro */
  --bb-text-lg: 1.25rem;    /* 20px — H3 / Subheading */
  --bb-text-xl: 1.5rem;     /* 24px — H2 */
  --bb-text-2xl: 2rem;      /* 32px — Page-Headings */
  --bb-text-3xl: 2.5rem;    /* 40px — Display / Hero */

  --bb-line-tight: 1.2;
  --bb-line-normal: 1.55;
  --bb-line-loose: 1.7;

  /* Radii. */
  --bb-radius-sm: 6px;
  --bb-radius-md: 10px;
  --bb-radius-lg: 14px;
  --bb-radius-xl: 20px;

  /* Motion (WS2-4). Drei Durations + zwei Easings,
     damit Hover/Focus/Open-Close-Animations einen
     einheitlichen Rhythmus haben. ``prefers-reduced-
     motion`` schaltet alles auf 0 ms (siehe unten). */
  --bb-duration-fast: 120ms;
  --bb-duration-normal: 200ms;
  --bb-duration-slow: 320ms;
  --bb-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --bb-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* Focus-Ring-Helfer als Variable: drei
     Eigenschaften, die jedes :focus-visible-Setup
     teilen soll. Nutzung: ``outline:
     var(--bb-focus-ring); outline-offset:
     var(--bb-focus-offset);``. */
  --bb-focus-ring: 3px solid var(--bb-focus);
  --bb-focus-offset: 2px;

  /* Content-Breiten (WS2-1).
     Ersetzen die früheren --max / --max-wide /
     --max-header Inline-Tokens aus BaseLayout. */
  --bb-content-max: 72ch;
  --bb-content-wide: 1100px;
  --bb-content-header: 1200px;

  /* M7 (Premium-Mobile): Safe-Area-Insets aus
     viewport-fit=cover. Browser ohne Notch
     liefern 0 — die Variable bleibt also auch auf
     Desktop sicher nutzbar. Komponenten greifen
     ueber ``var(--bb-safe-top, 0px)`` darauf zu. */
  --bb-safe-top: env(safe-area-inset-top, 0px);
  --bb-safe-bottom: env(safe-area-inset-bottom, 0px);
  --bb-safe-left: env(safe-area-inset-left, 0px);
  --bb-safe-right: env(safe-area-inset-right, 0px);

  /* M2 (Premium-Mobile): Touch-Target-Minimum.
     iOS HIG: 44pt, Android Material: 48dp.
     ``--bb-tap`` = 44px; Buttons + Selects auf
     Mobile bekommen min-height: var(--bb-tap). */
  --bb-tap: 44px;

  /* Spacing scale (for inline use in components). */
  --bb-space-1: 4px;
  --bb-space-2: 8px;
  --bb-space-3: 12px;
  --bb-space-4: 16px;
  --bb-space-5: 20px;
  --bb-space-6: 24px;
  --bb-space-8: 32px;
  --bb-space-10: 40px;
  --bb-space-14: 56px;
  --bb-space-18: 72px;
  --bb-space-24: 96px;
}

/* Light theme — default. */
:root,
:root[data-theme="light"] {
  --bb-bg: #FAFAF7;
  --bb-surface: #FFFFFF;
  --bb-surface-alt: #F2F2EE;
  --bb-border: #E3E3DC;
  --bb-border-strong: #CFCFC4;
  --bb-text: #0F1A24;
  --bb-text-muted: #5A6470;
  /* WCAG-AA-Fix: #8A93A0 auf --bb-bg (#FAFAF7) war nur
     2.9:1 (fällt AA für Normaltext durch). #666E79 ≈ 4.9:1
     — bleibt zwischen muted (#5A6470, 5.6:1) und dem alten
     subtle, jetzt aber lesbar. Dark-Theme (unverändert) ist
     auf dunklem BG nicht betroffen. */
  --bb-text-subtle: #666E79;
  --bb-accent-soft: rgba(8, 110, 224, 0.08);
  --bb-accent-text: #086EE0;
  --bb-cyan-soft: rgba(8, 168, 200, 0.10);
  --bb-focus: #b07300;
  --bb-danger: #b02424;
  --bb-danger-soft: rgba(176, 36, 36, 0.10);

  --bb-shadow-sm: 0 1px 2px rgba(2, 40, 60, 0.06);
  --bb-shadow-md:
    0 4px 12px rgba(2, 40, 60, 0.08),
    0 1px 2px rgba(2, 40, 60, 0.04);
  --bb-shadow-lg:
    0 12px 32px rgba(2, 40, 60, 0.12),
    0 2px 4px rgba(2, 40, 60, 0.06);
}

/* Dark theme. */
:root[data-theme="dark"] {
  --bb-bg: #0A1420;
  --bb-surface: #10202F;
  --bb-surface-alt: #16293B;
  --bb-border: #22384E;
  --bb-border-strong: #2F4863;
  --bb-text: #EAF0F7;
  --bb-text-muted: #9AADBF;
  --bb-text-subtle: #6B7D8F;
  --bb-accent-soft: rgba(8, 110, 224, 0.15);
  --bb-accent-text: #86C7F2;
  --bb-cyan-soft: rgba(8, 168, 200, 0.18);
  --bb-focus: #f5b942;
  --bb-danger: #f08080;
  --bb-danger-soft: rgba(240, 128, 128, 0.18);

  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --bb-shadow-md:
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.3);
  --bb-shadow-lg:
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Honour OS preference in auto-mode.
 *
 * 2026-05-20: 3-state-Toggle (auto/light/dark).
 * Im Auto-Modus (Default) folgt das CSS dem
 * Browser/System-Setting via prefers-color-scheme.
 * Der Toggle-Click setzt data-theme explizit auf
 * "light" oder "dark" — dann gewinnt der eigene
 * Block (Spezifitaet 0,1,1) ueber den
 * Auto-Mode-Block.
 *
 * ``:root:not([data-theme])`` faengt den No-JS-Fall
 * + den allerersten Frame ab, bevor das
 * Inline-Script ``data-theme="auto"`` setzt.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  :root[data-theme="auto"] {
    --bb-bg: #0A1420;
    --bb-surface: #10202F;
    --bb-surface-alt: #16293B;
    --bb-border: #22384E;
    --bb-border-strong: #2F4863;
    --bb-text: #EAF0F7;
    --bb-text-muted: #9AADBF;
    --bb-text-subtle: #6B7D8F;
    --bb-accent-soft: rgba(8, 110, 224, 0.15);
    --bb-accent-text: #86C7F2;
    --bb-cyan-soft: rgba(8, 168, 200, 0.18);
    --bb-focus: #f5b942;
    --bb-danger: #f08080;
    --bb-danger-soft: rgba(240, 128, 128, 0.18);
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --bb-shadow-md:
      0 4px 12px rgba(0, 0, 0, 0.4),
      0 1px 2px rgba(0, 0, 0, 0.3);
    --bb-shadow-lg:
      0 12px 32px rgba(0, 0, 0, 0.5),
      0 2px 4px rgba(0, 0, 0, 0.3);
  }
}

/* WP 78: legacy alias layer entfernt — alle
 * Bestandsseiten verweisen jetzt direkt auf
 * bb-*-Tokens (siehe ``scripts/migrate_legacy_
 * tokens.py`` für die einmalige Umstellung).
 * Wenn eine Seite eine Token-Lücke aufweist,
 * gehört der Fix in ``--bb-*``-Namen, nicht in
 * eine neue Alias-Schicht. */

/* Global rule from §5 — never uppercase. */
.bb-no-caps,
[data-bb-uppercase="never"] {
  text-transform: none !important;
}

/* ---------------------------------------------------
 * Global component classes (mirrors of BB*.astro).
 *
 * Promoting them to theme.css lets JS-generated DOM
 * (library.astro creates Provider/OA pills via
 * document.createElement) reuse the same look
 * without re-implementing the styles inline.
 * ------------------------------------------------ */

.bb-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0 0.65em;
  font-family: var(--bb-font-sans);
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--bb-border);
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  height: 24px;
  font-size: 12px;
  background: var(--bb-surface-alt);
  color: var(--bb-text-muted);
}
.bb-pill--sm {
  height: 20px;
  font-size: 11px;
}
.bb-pill--accent {
  background: var(--bb-accent-soft);
  border-color: transparent;
  color: var(--bb-accent-text);
}
.bb-pill--cyan {
  background: var(--bb-cyan-soft);
  border-color: transparent;
  color: var(--bb-cyan);
}
.bb-pill--success {
  background: rgba(34, 139, 84, 0.10);
  border-color: transparent;
  color: #228b54;
}
.bb-pill--warning {
  background: rgba(204, 132, 0, 0.12);
  border-color: transparent;
  color: #b07300;
}
.bb-pill--danger {
  background: var(--bb-danger-soft);
  border-color: transparent;
  color: var(--bb-danger);
}
:root[data-theme="dark"] .bb-pill--success,
:root:not([data-theme="light"]) .bb-pill--success {
  color: #6ad19a;
}
:root[data-theme="dark"] .bb-pill--warning,
:root:not([data-theme="light"]) .bb-pill--warning {
  color: #e0b070;
}
a.bb-pill:hover {
  filter: brightness(0.96);
}

.bb-mono-id {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 0.55em;
  font-family: var(--bb-font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--bb-radius-sm);
  border: 1px solid var(--bb-border);
  background: var(--bb-surface-alt);
  color: var(--bb-text-muted);
  text-decoration: none;
  text-transform: none;
}
.bb-mono-id--accent {
  background: var(--bb-accent-soft);
  border-color: transparent;
  color: var(--bb-accent-text);
}
a.bb-mono-id:hover {
  filter: brightness(0.96);
}

/*
 * ADR-0086 Phase CC — Tech-IDs auf öffentlichen Seiten
 * ausblenden. Slugs / Document-IDs / Concept-IDs sind
 * für Datenpflege wichtig (admin-Pages), für Lesende
 * aber nur visuelles Rauschen. Auf body.bb-public-page
 * versteckt; auf body.bb-admin-page sichtbar.
 *
 * Ausnahme: ``.bb-mono-id--always`` zeigt sich überall
 * (z. B. wenn der Wert im Lese-Kontext relevant ist).
 */
body.bb-public-page .bb-mono-id:not(.bb-mono-id--always),
body.bb-public-page .bb-slug:not(.bb-mono-id--always) {
  display: none;
}

/*
 * Definition-list-Zeilen mit ID-Werten lassen wir auf
 * öffentlichen Seiten ebenfalls weg — auf
 * <dt>Document-ID</dt><dd><span class="bb-mono-id">…
 * </dd>-Pattern wird der ganze Block versteckt.
 */
body.bb-public-page .bb-tech-row {
  display: none;
}

/* WS2-4 — reduced-motion honour. Setzt alle drei
   Motion-Durations auf 0, damit Komponenten, die
   die Tokens nutzen, automatisch
   prefers-reduced-motion respektieren. Inline-
   ``transition``-Regeln mit fixen Millisekunden
   profitieren davon nicht — die werden im
   WS6/WS8-Sweep migriert. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bb-duration-fast: 0ms;
    --bb-duration-normal: 0ms;
    --bb-duration-slow: 0ms;
  }
  .bb-skeleton,
  .bb-pulse {
    animation: none;
  }
}

/* WS9 — Delight & Personality. Drei utility-
   Klassen, die quer ueber Pages eingesetzt
   werden koennen. */

/* 1) Loading-Skeleton — die kanonische Definition von
   ``.bb-skeleton`` / ``--row`` / ``@keyframes
   bb-skeleton-shimmer`` steht weiter unten im
   „(d) Skeleton-Loader"-Block. Der frühere zweite
   Satz hier war überschriebenes Dead-CSS (und
   ``--line`` wird nirgends im Markup genutzt) —
   entfernt zur DRY. */

/* 2) Phase-/Status-Uebergangs-Pulse — kurzer
   visueller Hinweis, dass sich etwas geaendert
   hat. JS toggelt die Klasse fuer 600ms. */
.bb-pulse {
  animation: bb-pulse 600ms var(--bb-ease-emphasized) 1;
}
@keyframes bb-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--bb-accent-soft);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px var(--bb-accent-soft);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(8, 110, 224, 0);
    transform: scale(1);
  }
}

/* 3) Slide-Up — fuer Sticky-Tray und
   Success-Cards, damit sie eingeflogen kommen
   statt einfach zu erscheinen. */
.bb-slide-up {
  animation: bb-slide-up var(--bb-duration-normal)
    var(--bb-ease-standard) 1;
}
@keyframes bb-slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------
 * M2 (Premium-Mobile): Touch-Target-Hygiene.
 *
 * Auf Mobile (<= 900 px) bekommen alle interaktiven
 * Elemente min-height var(--bb-tap) = 44px — Apple-
 * HIG-Minimum. Padding sorgt fuer den Tap-Komfort,
 * ohne dass das visuelle Element selbst groesser
 * wird (man kann auch um den sichtbaren Rand drum
 * herum tappen).
 *
 * Selektiv per Klasse statt globale ``button``-Regel,
 * damit Mini-Buttons im Inhalt (Icon-Toggles) ihre
 * eigene Compact-Variante behalten koennen, wenn
 * sie ``data-tap-compact`` markieren.
 * ------------------------------------------------ */
@media (max-width: 900px) {
  .btn,
  .bb-btn,
  .inbox-btn,
  button.bb-confirm__btn,
  .admin-sidebar__link,
  .admin-sidebar-toggle,
  /* Header-Toggles auf den projekt-eigenen 44px-Tap-
     Standard heben (waren 36/32px; WCAG-AA ok, aber unter
     --bb-tap). Nur min-height = vertikaler Tap-Bereich,
     kein Layout-Risiko; volle 44x44 (min-width) ggf. als
     Preview-Follow-up. */
  .theme-toggle,
  .locale-toggle,
  .bb-confirm__btn {
    min-height: var(--bb-tap);
  }
  /* Form-Controls: Select/Input nehmen den Tap auf
     den ganzen Bereich, nicht nur auf den Pfeil. */
  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
  select,
  textarea {
    min-height: var(--bb-tap);
    font-size: 16px; /* iOS-Zoom verhindern */
  }
  /* Checkbox + Radio: Tap-Bereich vergroessern,
     ohne die visuelle Box zu skalieren — der
     Container/Label uebernimmt den Tap. */
  label.bb-tap-row,
  label:has(> input[type='checkbox']),
  label:has(> input[type='radio']) {
    min-height: var(--bb-tap);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  /* Opt-Out fuer Mini-Buttons (z. B. Inline-Delete
     in einer dichten Liste). */
  [data-tap-compact] {
    min-height: 0;
  }
}

/* ---------------------------------------------------
 * M4 (Premium-Mobile): Card-System mit Tiefe.
 *
 * Auf Mobile bekommen alle Karten-Container weichere
 * Radius + Box-Shadow statt 1-px-Border. Wirkt
 * App-naeher als die scharfen Linien des Desktop-
 * Layouts. Desktop bleibt unveraendert (≥ 901 px).
 *
 * Greift fuer alles, was sich als Card praesentiert:
 *   - .bb-card (allgemein)
 *   - .admin-sidebar (auf Mobile als Sheet)
 *   - .inbox-toolbar (Filter-Card)
 *   - .inbox-tocv-modal__panel (Modal-Inhalt)
 *   - .dlg-page, .fb-page-Hauptcards (Forms)
 * ------------------------------------------------ */
@media (max-width: 900px) {
  .bb-card,
  .inbox-toolbar,
  .dossiers__card,
  .seminar__card,
  .fb-card,
  .dlg-card {
    border: 0;
    border-radius: 14px;
    box-shadow:
      0 1px 3px rgba(20, 14, 8, 0.08),
      0 2px 12px rgba(20, 14, 8, 0.04);
  }
  /* Active-State: Karten reagieren auf Tap mit
     leichtem Scale + Shadow-Reduce. Haptisches
     Aequivalent. */
  .bb-card[role='button']:active,
  .bb-card.is-tappable:active {
    transform: scale(0.985);
    box-shadow:
      0 1px 2px rgba(20, 14, 8, 0.06),
      0 1px 4px rgba(20, 14, 8, 0.03);
  }
}

/* M5 (Premium-Mobile): Pull-to-Refresh-Indikator.
   Floatet als kleine Pille oben — translateY wird
   vom JS gesetzt. Spinner dreht sich nur, solange
   der Aktualisierungs-Callback laeuft. */
.bb-ptr-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--bb-surface);
  box-shadow:
    0 1px 3px rgba(20, 14, 8, 0.1),
    0 2px 12px rgba(20, 14, 8, 0.06);
  font-size: 0.82rem;
  color: var(--bb-text-muted);
  pointer-events: none;
  z-index: 60;
  opacity: 0;
  transition: opacity var(--bb-duration-fast) var(--bb-ease-standard);
}
.bb-ptr-indicator__spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--bb-border);
  border-top-color: var(--bb-blue-primary);
}
.bb-ptr-indicator--armed .bb-ptr-indicator__spinner {
  border-top-color: var(--bb-warm);
}
.bb-ptr-indicator--armed {
  color: var(--bb-text);
}
.bb-ptr-indicator__spinner {
  animation: bb-ptr-spin 0.9s linear infinite paused;
}
.bb-ptr-indicator--armed .bb-ptr-indicator__spinner,
.bb-ptr-indicator[style*='transform'] .bb-ptr-indicator__spinner {
  animation-play-state: running;
}
@keyframes bb-ptr-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bb-ptr-indicator__spinner { animation: none; }
}

/* ---------------------------------------------------
 * M8 (Premium-Mobile): Mikro-Polish.
 *
 * Lauter kleine Details, die zusammen das App-
 * Gefuehl machen. Bewusst nicht in den
 * Komponenten-Style-Bloecken, weil sie quer durch
 * die ganze UI greifen.
 * ------------------------------------------------ */

/* (a) Smooth-Scroll fuer Anchor-Jumps —
   pruefen + nicht erzwingen, wenn der User
   reduced-motion bevorzugt. */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* (b) Tap-Scale Feedback fuer ALLE Buttons + Links
   auf Touch-Geraeten. ``:active`` reicht — Browser
   feuern den State waehrend des Taps. Wir wenden
   den Effekt nur in der mobilen Bandbreite und nur
   wo nicht ``data-no-tap-fx`` opt-out gesetzt ist. */
@media (max-width: 900px) and (hover: none) {
  .btn:not([data-no-tap-fx]):active,
  .bb-btn:not([data-no-tap-fx]):active,
  .inbox-btn:not([data-no-tap-fx]):active,
  .admin-sidebar__link:not([data-no-tap-fx]):active,
  a.bb-tap-fx:active,
  button:not([data-no-tap-fx]):not(:disabled):active {
    transform: scale(0.97);
    transition: transform 80ms var(--bb-ease-standard);
  }
}

/* (c) Focus-Ring nur bei :focus-visible — d. h.
   beim Tab-Navigieren, nicht beim Tap. iOS legt
   sonst um jeden getappten Button einen blauen
   Ring, der hartnaeckig stehen bleibt. */
:focus:not(:focus-visible) {
  outline: none;
}

/* (d) Skeleton-Loader mit Shimmer statt grauem
   Static-Block. ``.bb-skeleton`` + Varianten
   bekommen einen Diagonal-Gradient, der von links
   nach rechts wandert. */
.bb-skeleton {
  display: block;
  background:
    linear-gradient(
      90deg,
      var(--bb-surface-alt) 0%,
      color-mix(in srgb, var(--bb-surface-alt) 60%, var(--bb-surface)) 50%,
      var(--bb-surface-alt) 100%
    );
  background-size: 200% 100%;
  animation: bb-skeleton-shimmer 1.4s linear infinite;
  border-radius: var(--bb-radius-sm);
  min-height: 12px;
}
.bb-skeleton--row {
  height: 18px;
  margin: 0.4rem 0;
  width: 100%;
}
.bb-skeleton--circle {
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
@keyframes bb-skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-skeleton { animation: none; }
}

/* (e) Tap-Highlight-Color (iOS-Safari) — der
   default-grau ist hassig. Wir nutzen unseren
   Akzent in 12 %. */
html {
  -webkit-tap-highlight-color:
    color-mix(in srgb, var(--bb-blue-primary) 12%, transparent);
}