/*! Luftschloss für Rails — generiert aus src/rails.css via scripts/build-rails.mjs.
 * NICHT von Hand editieren. Quellen: src/tokens.css, src/theme.css,
 * src/components/**.css, src/bootstrap-compat.css — dieselben Dateien
 * speisen auch styles.css (React/Storybook). Kein Preflight, keine Resets. */
/* ═══════════════════════════════════════════════════════════════════
   LUFTSCHLOSS RAILS-ENTRY  —  Quelle für dist/rails/luftschloss.css
   ───────────────────────────────────────────────────────────────────
   Ein Artefakt für Rails-Legacy-Bundles: Tokens + Theme-Variablen +
   Komponenten-Klassen + Bootstrap-Markup-Ergänzungen. Bewusst OHNE
   Tailwind, kein Preflight, keine Base-Resets, keine Utilities.
   Build: `npm run build:rails` (lokale CSS-Imports + Layer-Unwrapping +
   Guards in scripts/build-rails.mjs).

   Es gibt KEINE Rails-spezifischen Styles: dieselben Komponenten-
   Klassen-Dateien speisen auch styles.css (React/Storybook) — was im
   Storybook geändert wird, ist damit automatisch im Rails-Artefakt.
═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   LUFTSCHLOSS DESIGN TOKENS  —  Single Source of Truth (Runtime-Werte)
   ───────────────────────────────────────────────────────────────────
   Diese Datei enthält AUSSCHLIESSLICH CSS Custom Properties:
   Brand-Primitives, semantische Paletten, Light-/Dark-Mode-Mappings.
   Keine Element-Selektoren, keine Resets, keine Utilities.

   Konsumenten:
     - src/styles.css        →  importiert sie für Next/Storybook/Library
     - dist/tokens.css       →  Build-Artefakt für Rails-Legacy-Bundles
                                (siehe RAILS_MIGRATION.md, npm run build:tokens)

   Tailwind-Theme-Werte (Radii, Shadows, Motion, Typo-Skalen) liegen im
   Theme-Aliase in src/theme.css und werden direkt als normale Custom
   Properties ausgeliefert.
═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   FONT PRIMITIVES  —  kanonische Familiennamen (Single Source)
   Die Font-Stacks (--font-sans, --font-heading, --font-mono in
   theme.css) referenzieren diese Variablen. Die Font-DATEIEN lädt jede
   Plattform selbst (@font-face: Rails via fonts.scss, Storybook via
   preview-head.html, Next via next/font — next/font überschreibt die
   Namen elementweise mit seinen optimierten Familien). Die Namen hier
   nirgendwo sonst definieren.
═══════════════════════════════════════════════════════════════════ */
:root {
  --font-be-vietnam-pro: "Be Vietnam Pro";
  --font-ibm-plex-sans: "IBM Plex Sans";
  --font-ibm-plex-mono: "IBM Plex Mono";
}
/* ═══════════════════════════════════════════════════════════════════
   BRAND PALETTE  —  raw design tokens
   Source: verbindliche lima-city-Markenpalette (Stand v0.2.0)
═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Neutrals (10 steps) ── */
  /* Verwendung: Hintergründe, Surfaces, Borders, disabled States. */
  --lima-neutral-50:  #f4f5f6; /* fast weiß           */
  --lima-neutral-100: #eaebeb; /* sehr helle Fläche   */
  --lima-neutral-200: #d4d7d8; /* helle Fläche/Border */
  --lima-neutral-300: #b5b9ba; /* mittelhelle Fläche  */
  --lima-neutral-400: #889296; /* Placeholder-Text    */
  --lima-neutral-500: #60696c; /* Sekundärtext        */
  --lima-neutral-600: #4d5456; /* Disabled-Icon       */
  --lima-neutral-700: #3a3f41; /* Körpertext          */
  --lima-neutral-800: #2b2f30; /* starker Text        */
  --lima-neutral-900: #1d1f1f; /* fast schwarz        */

  /* ── Blues (Primary, full scale 50 – 1000) ── */
  --lima-blue-1000: #001d29; /* deepest navy */
  --lima-blue-900:  #003a52;
  --lima-blue-800:  #00577a;
  --lima-blue-700:  #0073a1;
  --lima-blue-600:  #0092cc;
  --lima-blue-500:  #05aeef;
  --lima-blue-400:  #23befa;
  --lima-blue-300:  #8fdfff;
  --lima-blue-200:  #d7f3fe;
  --lima-blue-100:  #f0fbff;
  --lima-blue-50:   #f7fdff;

  /* ── Green ── */
  --lima-green-700: #43882f;
  --lima-green-500: #6fbf4d;
  --lima-green-300: #bbeb98;
  --lima-green-100: #f6fded;

  /* ── Yellow & Red ── */
  --lima-yellow: #f5bd4b; /* nur Akzent/Warnton */
  --lima-red:    #c93d38; /* nur Danger/Fehler  */
}
/* ═══════════════════════════════════════════════════════════════════
   SEMANTIC PALETTES  —  Danger / Success / Warning / Info (50 – 900)
   WCAG AA verified: -700 passes 4.5:1 on -100, -50 AND on white
   Info = Petrol-Palette | Success = Green | Warning = Amber
═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Danger ── */
  --danger-50:  #fef8f5; /* near-white tint, page bg */
  --danger-100: #fdf2ec; /* surface bg               */
  --danger-200: #f9d5c8;
  --danger-300: #f3a796;
  --danger-400: #ee7a6d;
  --danger-500: #e15049;
  --danger-600: #c93d38;
  --danger-700: #a82e2c; /* text/icon */
  --danger-800: #872020;
  --danger-900: #701818;

  /* ── Success (anchored to Green) ── */
  --success-50:  #fbfef5; /* near-white tint */
  --success-100: #f6fded; /* surface bg      */
  --success-200: #dff9c8;
  --success-300: #bbeb98;
  --success-400: #97d773;
  --success-500: #6fbf4d;
  --success-600: #57a33d;
  --success-700: #357d2a; /* text/icon — AA-getunt (≥4.5:1 auf -100 & Weiß) */
  --success-800: #336e25;
  --success-900: #285b20;

  /* ── Warning (Amber) ── */
  --warning-50:  #fffdf5; /* near-white tint */
  --warning-100: #fffbeb; /* surface bg      */
  --warning-200: #fdf1c4;
  --warning-300: #fae293;
  --warning-400: #f8d270;
  --warning-500: #f5bd4b;
  --warning-600: #d19b3c;
  --warning-700: #946325; /* text/icon — AA-getunt (≥4.5:1 auf -100 & Weiß) */
  --warning-800: #8b5e22;
  --warning-900: #734919;

  /* ── Info (anchored to Blue) ── */
  --info-50:  #f7fdff; /* near-white tint */
  --info-100: #f0fbff; /* surface bg      */
  --info-200: #d7f3fe;
  --info-300: #8fdfff;
  --info-400: #23befa;
  --info-500: #05aeef;
  --info-600: #0092cc;
  --info-700: #0073a1; /* text/icon */
  --info-800: #00577a;
  --info-900: #003a52;
}
/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE  —  Neutral-first, Blue as accent
   Schichtung: white → neutral-50 → neutral-100 → neutral-200
               text: neutral-900 → neutral-700 → neutral-500
   Interaktion: lima-blue-700 (primary) · lima-blue-50 (hover tint)
═══════════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces — neutral base, ruhige Schichtung */
  --background:         #ffffff;   /* pure white */
  --foreground:         var(--lima-blue-1000);
  --card:               #ffffff;   /* white */
  --card-foreground:    var(--lima-blue-1000);
  --popover:            #ffffff;
  --popover-foreground: var(--lima-blue-1000);

  /* Primary — lima-blue-900: Akzent / Interaktion / CTA */
  --primary:            var(--lima-blue-900);
  --primary-foreground: #ffffff;

  /* Logo — eigener Token, NICHT --primary, entkoppelt das Logo von
     Primary-Adjustments. */
  --logo:               var(--lima-blue-900);

  /* Secondary — neutral-100: ruhige sekundäre Fläche */
  --secondary:            var(--lima-neutral-100);
  --secondary-foreground: var(--lima-neutral-800);

  /* Muted — neutral-50: Section-Fills, Table-Header */
  --muted:            var(--lima-neutral-50);
  --muted-foreground: var(--lima-neutral-600); /* Feedback 25.08.: eine Nuance dunkler — 500 war zu blass */

  /* Accent — blue-100: subtiler Hover-Hintergrund */
  --accent:            var(--lima-blue-100);
  --accent-foreground: var(--lima-blue-700);

  /* Destructive */
  --destructive:            var(--lima-red);
  --destructive-foreground: #ffffff;

  /* Borders & Inputs */
  --border: var(--lima-neutral-200);
  --input:  var(--lima-neutral-400);
  --ring:   var(--lima-blue-500);   /* Focus-Ring */

  /* Charts — Brand-Palette für Diagramme */
  --chart-1: var(--lima-blue-600);   /* lima-blue-600 */
  --chart-2: var(--lima-green-500);   /* lima-green-500 */
  --chart-3: var(--lima-yellow);   /* lima-yellow */
  --chart-4: var(--danger-500);   /* danger-500 */
  --chart-5: var(--lima-blue-900);   /* lima-blue-900 */

  /* Radius */
  --radius: 0.5rem;

  /* Shadows */
  --shadow-xs-val: 0 1px 2px 0 rgb(0 29 41 / 0.06);
  --shadow-sm-val: 0 1px 3px 0 rgb(0 29 41 / 0.10), 0 1px 2px -1px rgb(0 29 41 / 0.08);
  --shadow-md-val: 0 4px 8px -2px rgb(0 29 41 / 0.10), 0 2px 4px -2px rgb(0 29 41 / 0.08);
  --shadow-lg-val: 0 4px 4px 0 rgb(0 0 0 / 0.06), 0 12px 40px -8px rgb(0 29 41 / 0.12);
  --shadow-xl-val: 0 8px 32px -8px rgb(0 29 41 / 0.18);

  /* Sidebar — neutral-50 Fläche mit blue-900 Akzent */
  --sidebar:                    var(--lima-neutral-50);
  --sidebar-foreground:         var(--lima-blue-1000);
  --sidebar-primary:            var(--lima-blue-900);
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent:             var(--lima-blue-100);
  --sidebar-accent-foreground:  var(--lima-blue-700);
  --sidebar-border:             var(--lima-neutral-200);
  --sidebar-ring:               var(--lima-blue-500);
}
/* ═══════════════════════════════════════════════════════════════════
   DARK MODE  —  Neutral-first, Blue als Akzent (spiegelbildlich zum Light Mode)
   Flächen: near-black Neutral (chroma 0.010–0.018, hue 255) — kein Navy
   Text: lima-neutral-50 (hell, blau-getöntes Weiß)
   Interaktion: lima-blue-500 (heller als -700, für Kontrast auf dunkler Fläche)
═══════════════════════════════════════════════════════════════════ */
.dark {
  /* Surfaces — aufsteigende Helligkeit, neutral */
  --background:         #121416;   /* near-black neutral — tiefste Ebene */
  --foreground:         var(--lima-neutral-50);
  --card:               #1c1e20;   /* leicht gehobene Karte */
  --card-foreground:    var(--lima-neutral-50);
  --popover:            #1c1e20;
  --popover-foreground: var(--lima-neutral-50);

  /* Primary — lima-blue-400: hell genug für hohen Kontrast */
  --primary:            var(--lima-blue-400);
  --primary-foreground: var(--lima-blue-1000);

  /* Logo — im Dark-Mode weiß für Kontrast auf dunkler Surface. */
  --logo:               var(--lima-neutral-50);   /* = foreground */

  /* Secondary — dunkle neutrale Fläche */
  --secondary:            var(--lima-neutral-800);
  --secondary-foreground: var(--lima-neutral-200);

  /* Muted — Table-Header, Section-Fills */
  --muted:            var(--lima-neutral-900);
  --muted-foreground: var(--lima-neutral-300);

  /* Accent — subtile Hover-Fläche */
  --accent:            var(--lima-neutral-800);
  --accent-foreground: var(--lima-blue-300);

  /* Destructive — etwas heller im Dark Mode */
  --destructive:            #c5392f; /* AA-getunt — Weiß ≥4.5:1 */
  --destructive-foreground: #ffffff;

  /* Borders & Inputs */
  --border: #34383a;
  --input:  var(--lima-neutral-600);
  --ring:   var(--lima-blue-400);   /* Focus-Ring */

  /* Charts — mittlere Töne für Lesbarkeit auf dunklem Hintergrund */
  --chart-1: var(--lima-blue-400);
  --chart-2: var(--success-400);   /* = success-400 */
  --chart-3: var(--warning-400);   /* = warning-400 */
  --chart-4: var(--danger-400);   /* = danger-400 */
  --chart-5: var(--lima-blue-300);

  /* Shadows */
  --shadow-xs-val: 0 1px 2px 0 rgb(0 29 41 / 0.06);
  --shadow-sm-val: 0 1px 3px 0 rgb(0 29 41 / 0.10), 0 1px 2px -1px rgb(0 29 41 / 0.08);
  --shadow-md-val: 0 4px 8px -2px rgb(0 29 41 / 0.10), 0 2px 4px -2px rgb(0 29 41 / 0.08);
  --shadow-lg-val: 0 4px 4px 0 rgb(0 0 0 / 0.06), 0 12px 40px -8px rgb(0 29 41 / 0.12);
  --shadow-xl-val: 0 8px 32px -8px rgb(0 29 41 / 0.18);

  /* ── Semantic palettes — dark mode remapping ─────────────────────────────
     In dark mode the full 10-step scale is re-anchored so that token-level
     references (var(--success-100), var(--danger-700) …) automatically adapt.
     Surfaces: near-black with mild color tint  (L 0.15–0.27)
     Text/icon: bright enough for WCAG AA on those surfaces (L 0.75–0.84)
     Mapping concept:
       50  → barely-there tinted bg context
       100 → elevated dark surface  (≈ card L + colour)
       200 → subtle border
       300 → bright readable text (light-end of scale)
       400–600 → intermediate (rarely used directly)
       700 → text/icon  AA✅ on dark bg / dark surface
       800 → stronger foreground
       900 → near-white tinted foreground
  ────────────────────────────────────────────────────────────────────────── */
  --danger-50:  oklch(0.155 0.024 27);
  --danger-100: oklch(0.250 0.095 27);   /* surface bg — heller + satter für sichtbaren Pop auf Card */
  --danger-200: oklch(0.305 0.110 27);
  --danger-300: oklch(0.780 0.175 27);
  --danger-400: oklch(0.815 0.165 27);
  --danger-500: oklch(0.850 0.155 27);
  --danger-600: oklch(0.880 0.135 27);
  --danger-700: oklch(0.785 0.185 27);   /* text/icon — satte Lesbarkeit auf -100 */
  --danger-800: oklch(0.860 0.130 27);
  --danger-900: oklch(0.935 0.075 27);

  --success-50:  oklch(0.155 0.022 148);
  --success-100: oklch(0.250 0.088 148);
  --success-200: oklch(0.305 0.105 148);
  --success-300: oklch(0.790 0.150 148);
  --success-400: oklch(0.825 0.135 148);
  --success-500: oklch(0.860 0.120 148);
  --success-600: oklch(0.880 0.100 148);
  --success-700: oklch(0.795 0.158 148);
  --success-800: oklch(0.860 0.115 148);
  --success-900: oklch(0.935 0.070 148);

  --warning-50:  oklch(0.155 0.016 78);
  --warning-100: oklch(0.250 0.075 78);
  --warning-200: oklch(0.305 0.092 76);
  --warning-300: oklch(0.850 0.165 82);
  --warning-400: oklch(0.875 0.148 84);
  --warning-500: oklch(0.895 0.130 86);
  --warning-600: oklch(0.910 0.105 88);
  --warning-700: oklch(0.850 0.175 78);  /* text — gelb-orange, gut sichtbar auf -100 */
  --warning-800: oklch(0.892 0.130 84);
  --warning-900: oklch(0.948 0.078 90);

  --info-50:  oklch(0.155 0.018 218);
  --info-100: oklch(0.250 0.082 222);
  --info-200: oklch(0.305 0.098 220);
  --info-300: oklch(0.780 0.125 218);
  --info-400: oklch(0.815 0.112 218);
  --info-500: oklch(0.850 0.098 220);
  --info-600: oklch(0.878 0.078 220);
  --info-700: oklch(0.780 0.135 218);    /* text — petrol/cyan, satte Lesbarkeit */
  --info-800: oklch(0.852 0.092 220);
  --info-900: oklch(0.932 0.058 220);

  /* Sidebar — minimal dunkler als bg */
  --sidebar:                    #1a1c1e;
  --sidebar-foreground:         var(--lima-neutral-50);
  --sidebar-primary:            var(--lima-blue-400);
  --sidebar-primary-foreground: var(--lima-blue-1000);
  --sidebar-accent:             var(--lima-neutral-800);   /* = --secondary */
  --sidebar-accent-foreground:  var(--lima-blue-300);
  --sidebar-border:             #34383a;   /* = --border */
  --sidebar-ring:               var(--lima-blue-400);
}
/* ═══════════════════════════════════════════════════════════════════
   LUFTSCHLOSS THEME  —  Runtime-Theme + Layer-Architektur
   ───────────────────────────────────────────────────────────────────
   Enthält die @layer-Deklaration und die Runtime-Custom-Properties
   (Radii, Shadows, Motion, Typo-/Spacing-Skalen).
   Wird von src/styles.css (App/Storybook) UND src/rails.css (Rails-
   Artefakt) importiert. Es ist normales CSS und braucht keinen Tailwind-
   Compiler.
═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   RUNTIME THEME
   Alle von Komponenten verwendeten Aliase sind reguläre Custom
   Properties. Der letzte Tailwind-Stand ist separat eingefroren; neue
   Entwicklung verwendet diese Tokens über semantische CSS-Klassen.
═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Fonts ── */
  --font-sans:    var(--font-ibm-plex-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    var(--font-ibm-plex-mono), ui-monospace, "SFMono-Regular", monospace;
  --font-heading: var(--font-be-vietnam-pro), var(--font-ibm-plex-sans), sans-serif;

  /* ── Breakpoints ─────────────────────────────────────────────────────
     VERBINDLICHE SKALA. Sie ist identisch mit $grid-breakpoints aus
     Bootstrap 4.3.1 — der Skala, nach der das Grid der Rails-Anwendung
     tatsächlich umbricht. Zwei Skalen nebeneinander hatten zur Folge, dass
     `.col-lg-6` bei 992px umbrach, während Komponenten sich bis 1024px für
     „mobil" hielten.

     ACHTUNG: CSS-Custom-Properties funktionieren NICHT in Media-Query-
     Bedingungen — eine Media-Query-Bedingung mit var(--breakpoint-lg) ist
     wirkungslos.
     Die Variablen hier sind für Container-Queries, JavaScript und
     Dokumentation. In Media Queries steht der Literalwert in PIXEL — px und
     nicht rem, damit die Umbruchpunkte auch dann exakt mit dem
     Bootstrap-Grid zusammenfallen, wenn Nutzer ihre Schriftgröße ändern.

     Erlaubte Werte in Media Queries: 576px · 768px · 992px · 1200px · 1400px
     Durchgesetzt von scripts/ds-check.mjs (Regel 1D). */
  --breakpoint-sm:  576px;  /* Bootstrap sm */
  --breakpoint-md:  768px;  /* Bootstrap md */
  --breakpoint-lg:  992px;  /* Bootstrap lg */
  --breakpoint-xl: 1200px;  /* Bootstrap xl */
  --breakpoint-xxl: 1400px; /* DS-eigen — Bootstrap 4 hat keine fünfte Stufe */

  /* ── Fluid Typography (clamp: mobile 375px → desktop 1440px) ── */
  /* 2xs (10px) — Mini-Labels: Badge-Zähler, Code-Marker, KPI-Subscripts.
     Fix size (not fluid) because Display-Schriften so klein nicht skalieren sollten. */
  --font-size-2xs:  0.625rem;
  --font-size-xs:   clamp(0.6875rem, 0.65rem  + 0.2vw,  0.75rem);
  --font-size-sm:   clamp(0.75rem,   0.72rem  + 0.2vw,  0.875rem);
  /* Body: kräftigere Basis — floored bei 15px, erreicht 16px früher.
     Verhindert den „zu dünn/dezent"-Eindruck bei kleiner Viewport-Breite. */
  --font-size-base: clamp(0.9375rem, 0.9rem   + 0.25vw, 1rem);
  --font-size-lg:   clamp(1rem,      0.95rem  + 0.28vw, 1.125rem);
  --font-size-xl:   clamp(1.125rem,  1.05rem  + 0.4vw,  1.25rem);
  --font-size-2xl:  clamp(1.375rem,  1.2rem   + 0.75vw, 1.75rem);  /* h3 → 28px */
  --font-size-3xl:  clamp(1.625rem,  1.3rem   + 1.4vw,  2.25rem);  /* h2 → 36px */
  --font-size-4xl:  clamp(1.875rem,  1.4rem   + 2vw,    2.75rem);  /* h1 → 44px */
  --font-size-5xl:  clamp(2.25rem,   1.7rem   + 2.4vw,  3.25rem);  /* h1-groß → 52px */
  --font-size-6xl:  clamp(2.5rem,    1.7rem   + 3.4vw,  3.75rem);  /* Hero → 60px */
  /* Display — Marketing-Hero. Der harte Sprung Display↔Body erzeugt die
     visuelle Hierarchie. */
  --font-size-7xl:  clamp(3rem,      2rem     + 4.4vw,  4.5rem);   /* Display → 72px */
  --font-size-8xl:  clamp(3.5rem,    2.2rem   + 5.6vw,  5.5rem);   /* Display → 88px */
  --font-size-9xl:  clamp(4rem,      2.4rem   + 7vw,    6.75rem);  /* Display → 108px */

  /* ── Line Heights — VERHÄLTNISSE, nicht absolute Werte ──
     Absolute rem-Zeilenhöhen vertragen sich nicht mit fluider Typografie: eine
     per clamp() skalierende Schriftgröße mit fester rem-Zeilenhöhe verliert bei
     jeder Viewport-Breite ihre Proportion. Deshalb einheitenlose Faktoren.
     Die frühere Skala --line-height-4 … -10 (Tailwind-Erbe, absolute rem-Werte)
     hatte null Verwendung in Komponenten, Stories und Rails und ist entfallen. */
  --line-height-none:    1;      /* Zahlen, Icons, einzeilige Labels */
  --line-height-tight:   1.25;   /* große Headings */
  --line-height-snug:    1.375;  /* kleine Headings, kompakte Listen */
  --line-height-normal:  1.5;    /* Fließtext — Standard */
  --line-height-relaxed: 1.625;  /* Langtext, Artikel */

  /* ── Font Weights ──
     Aus der eingefrorenen Referenz übernommen: das neue System hatte gar keine
     Weight-Tokens, weshalb 30 Stellen im Komponenten-CSS die Zahl direkt
     hartkodiert hatten. */
  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ── Letter Spacing ──
     Feedback 25.08.2026: die Headlines liefen zu weit. Die Skala ist um eine
     Stufe enger gezogen — H1 sitzt jetzt auf -0.05em, alles darunter
     proportional. Große Schrift verträgt mehr negatives Tracking als kleine;
     deshalb wird nach unten hin gelockert, nicht linear skaliert. */
  --letter-spacing-tighter: -0.05em;  /* H1, Hero */
  --letter-spacing-tight:   -0.04em;  /* H2 */
  --letter-spacing-snug:    -0.03em;  /* H3, H4, Lead */
  --letter-spacing-normal:   0em;     /* Fließtext */
  --letter-spacing-wide:     0.05em;  /* Labels, Versalien */

  /* ── Textrollen für Bedienelemente ──
     Navigation, Menüs, Randspalten, Knopfbeschriftungen: alles derselbe
     Zweck — ein anklickbarer Text. Vor Runde 7 unterschieden sie sich
     ohne Grund: Schnitt 400, 500 und 600 nebeneinander, dazu zwei
     Zeilenhöhen, quer über Sidebar, Inhaltsverzeichnis, Klappmenü und
     Seitenkasten.

     Die Rolle steht jetzt an EINER Stelle. Komponenten greifen sie ab,
     statt Größe und Schnitt je Datei neu zu entscheiden.

       --text-ui-*        Standard — Navigationspunkte, Menüeinträge
       --text-ui-label-*  Überschrift einer Gruppe („Hilfethemen",
                          „Auf dieser Seite") — gleiche Größe, mehr Gewicht
       --text-ui-lg-*     eine Stufe größer, wo mehr Gewicht nötig ist */
  --text-ui-size:         var(--font-size-sm);
  --text-ui-weight:       var(--font-weight-medium);
  --text-ui-line:         var(--line-height-normal);
  --text-ui-tracking:     var(--letter-spacing-normal);

  --text-ui-label-size:   var(--font-size-sm);
  --text-ui-label-weight: var(--font-weight-semibold);
  --text-ui-label-line:   var(--line-height-normal);

  --text-ui-lg-size:      var(--font-size-base);
  --text-ui-lg-weight:    var(--font-weight-medium);
  --text-ui-lg-line:      var(--line-height-normal);

  /* ── Radius ── */
  /* Control-Radii — leicht abgerundete Form-Controls (lima-city CD). */
  --radius-control-sm: 0.125rem;
  --radius-control:    0.25rem;

  --radius-sm:  calc(var(--radius) * 0.6);
  --radius-md:  calc(var(--radius) * 0.8);
  --radius-lg:  var(--radius);
  --radius-xl:  calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);

  /* ── Fluid Spacing (semantic aliases) ──
     Component-internal spacing — bewusst NICHT fluid für kleine Werte
     (1–3), damit Komponenten konsistent aussehen. Größere Werte fluid
     für Layout-Atmung auf größeren Viewports. */
  --spacing-px:  1px;     /* Hairline-Borders, sehr dünne Trennlinien */
  --spacing-0_5: 0.125rem; /* 2px — Mikro-Padding für kompakte Triggers (Menubar, Tabs) */
  --spacing-1:   0.25rem;  /* 4px */
  --spacing-1_5: 0.375rem; /* 6px — halbe Stufe für feinere Spacing-Granularität */
  --spacing-2:   0.5rem;   /* 8px */
  --spacing-2_5: 0.625rem; /* 10px — z.B. negative Offsets für Connecting-Stems */
  --spacing-3:   0.75rem;  /* 12px */
  --spacing-3_5: 0.875rem; /* 14px — halbe Stufe zwischen 12 und 16 */
  --spacing-4:  clamp(0.875rem, 0.8rem  + 0.2vw,  1rem);
  --spacing-6:  clamp(1.25rem,  1.1rem  + 0.4vw,  1.5rem);
  --spacing-8:  clamp(1.5rem,   1.2rem  + 0.8vw,  2rem);
  --spacing-10: clamp(2rem,     1.5rem  + 1.2vw,  2.5rem);
  --spacing-12: clamp(2.25rem,  1.8rem  + 1.2vw,  3rem);
  --spacing-16: clamp(3rem,     2.2rem  + 2vw,    4rem);
  --spacing-20: clamp(3.5rem,   2.5rem  + 2.5vw,  5rem);
  --spacing-24: clamp(4rem,     3rem    + 2.5vw,  6rem);

  /* ── Section Spacing — fluide vertikale Rhythmik zwischen Page-Sections ──
     Verwendung: Außenpadding/-margins zwischen großen Page-Bereichen.
     Tailwind: py-section-sm, my-section-md, gap-section-lg, etc.
     Viewport: 375px → 1440px Range. */
  --spacing-section-sm: clamp(2rem,   1.5rem + 1.5vw, 3rem);     /*  32 →  48px */
  --spacing-section-md: clamp(3rem,   2rem   + 3vw,   5rem);     /*  48 →  80px */
  --spacing-section-lg: clamp(4rem,   2.5rem + 4.5vw, 7rem);     /*  64 → 112px */
  --spacing-section-xl: clamp(5rem,   3rem   + 6vw,   9rem);     /*  80 → 144px */

  /* ── Heading Rhythm — Margin oberhalb von Headings, proportional zur Schriftgröße ──
     Verwendung: mt-heading-1 ... mt-heading-4 für vertikale Rhythmik in
     Long-Form-Content. Skaliert mit dem Viewport, parallel zur Heading-Size. */
  --spacing-heading-1: clamp(2.5rem,  1.5rem   + 3vw,    4rem);     /* h1 — 40 →  64px */
  --spacing-heading-2: clamp(2rem,    1.25rem  + 2.25vw, 3rem);     /* h2 — 32 →  48px */
  --spacing-heading-3: clamp(1.5rem,  1rem     + 1.5vw,  2.25rem);  /* h3 — 24 →  36px */
  --spacing-heading-4: clamp(1.25rem, 0.875rem + 1.125vw, 1.75rem); /* h4 — 20 →  28px */

  /* ── Grid ──
     Rinnenabstand des Bootstrap-kompatiblen Rasters (.row/.col-*).
     30px ist der Bootstrap-4-Default; die Spalten teilen ihn je zur Hälfte
     als Innenabstand. Einziger gestaltbarer Wert am Raster. */
  --grid-gutter: 30px;

  /* ── Container Widths — fluide Max-Widths für Content-Bereiche ──
     Verwendung: max-w-container-md, max-w-container-lg etc.
     Plus prose-Variante mit Reading-optimierter Breite. */
  --container-xs:    clamp(20rem, 18rem + 4vw,  28rem);   /*  320 →  448px — Compact Forms */
  --container-sm:    clamp(28rem, 24rem + 8vw,  40rem);   /*  448 →  640px — Side Panels */
  --container-md:    clamp(40rem, 32rem + 16vw, 64rem);   /*  640 → 1024px — Standard Content */
  --container-lg:    clamp(64rem, 56rem + 16vw, 80rem);   /* 1024 → 1280px — Dashboards */
  --container-xl:    clamp(80rem, 72rem + 16vw, 96rem);   /* 1280 → 1536px — Full-Width Apps */
  --container-prose: clamp(40rem, 32rem + 16vw, 65ch);    /*  optimal reading width (~65 chars) */

  /* ── Icon Sizes — standalone + inline ──
     Standalone: feste rem-Größen für Sidebar-Nav, große CTAs, etc.
     Inline:    1em — skaliert mit umgebendem Text in Buttons/Labels.
     Verwendung: size-icon-md, w-icon-lg, oder direkt style={{ width: 'var(--size-icon-md)' }}. */
  --size-icon-2xs:    0.75rem;   /* 12px — Zeichen in Abzeichen und Chips */
  --size-icon-xs:     0.875rem;  /* 14px — sehr kompakte Inline-Indikatoren */
  --size-icon-sm:     1rem;      /* 16px — Standard-Inline-Icon */
  --size-icon-md:     1.25rem;   /* 20px — Buttons, Form-Inputs, Alerts */
  --size-icon-lg:     1.5rem;    /* 24px — Sidebar-Nav, Card-Header */
  --size-icon-xl:     2rem;      /* 32px — Hero-CTAs, Empty-States */
  --size-icon-inline: 1em;       /* skaliert mit Text — für Inline-Icons in Buttons/Labels */

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px 0 rgb(0 29 41 / 0.06);
  --shadow-sm: 0 1px 3px 0 rgb(0 29 41 / 0.10), 0 1px 2px -1px rgb(0 29 41 / 0.08);
  --shadow-md: 0 4px 8px -2px rgb(0 29 41 / 0.10), 0 2px 4px -2px rgb(0 29 41 / 0.08);
  --shadow-lg: 0 4px 4px 0 rgb(0 0 0 / 0.06), 0 12px 40px -8px rgb(0 29 41 / 0.12);
  --shadow-xl: 0 8px 32px -8px rgb(0 29 41 / 0.18);

  /* ── Motion tokens ── */
  --duration-micro:  120ms;   /* hover, active feedback */
  --duration-fast:   180ms;   /* state transitions: focus, toggle */
  --duration-normal: 260ms;   /* reveals, overlays, drawers */
  --duration-slow:   380ms;   /* complex entrances */

  --ease-out:       cubic-bezier(0.25, 1,    0.5,  1);    /* snappy deceleration */
  --ease-out-expo:  cubic-bezier(0.16, 1,    0.3,  1);    /* expo — for overlays */
  --ease-in-out:    cubic-bezier(0.4,  0,    0.2,  1);    /* material standard */
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);   /* springy — icons, badges */

  /* ── shadcn core token mappings ── */
  --color-background:          var(--background);
  --color-foreground:          var(--foreground);
  --color-logo:                var(--logo);
  --color-card:                var(--card);
  --color-card-foreground:     var(--card-foreground);
  --color-popover:             var(--popover);
  --color-popover-foreground:  var(--popover-foreground);
  --color-primary:             var(--primary);
  --color-primary-foreground:  var(--primary-foreground);
  --color-secondary:           var(--secondary);
  --color-secondary-foreground:var(--secondary-foreground);
  --color-muted:               var(--muted);
  --color-muted-foreground:    var(--muted-foreground);
  --color-accent:              var(--accent);
  --color-accent-foreground:   var(--accent-foreground);
  --color-destructive:         var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border:              var(--border);
  --color-input:               var(--input);
  --color-ring:                var(--ring);
  --color-chart-1:             var(--chart-1);
  --color-chart-2:             var(--chart-2);
  --color-chart-3:             var(--chart-3);
  --color-chart-4:             var(--chart-4);
  --color-chart-5:             var(--chart-5);
  --color-sidebar:                    var(--sidebar);
  --color-sidebar-foreground:         var(--sidebar-foreground);
  --color-sidebar-primary:            var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent:             var(--sidebar-accent);
  --color-sidebar-accent-foreground:  var(--sidebar-accent-foreground);
  --color-sidebar-border:             var(--sidebar-border);
  --color-sidebar-ring:               var(--sidebar-ring);

  /* ── Neutrals palette (bg-lima-neutral-200 …) — blue-tinted, low chroma ── */
  --color-lima-neutral-900: var(--lima-neutral-900);
  --color-lima-neutral-800: var(--lima-neutral-800);
  --color-lima-neutral-700: var(--lima-neutral-700);
  --color-lima-neutral-600: var(--lima-neutral-600);
  --color-lima-neutral-500: var(--lima-neutral-500);
  --color-lima-neutral-400: var(--lima-neutral-400);
  --color-lima-neutral-300: var(--lima-neutral-300);
  --color-lima-neutral-200: var(--lima-neutral-200);
  --color-lima-neutral-100: var(--lima-neutral-100);
  --color-lima-neutral-50:  var(--lima-neutral-50);

  /* ── Brand-Blue palette (bg-lima-blue-700, text-lima-blue-100 …) ── */
  --color-lima-blue-1000: var(--lima-blue-1000);
  --color-lima-blue-900:  var(--lima-blue-900);
  --color-lima-blue-800:  var(--lima-blue-800);
  --color-lima-blue-700:  var(--lima-blue-700);
  --color-lima-blue-600:  var(--lima-blue-600);
  --color-lima-blue-500:  var(--lima-blue-500);
  --color-lima-blue-400:  var(--lima-blue-400);
  --color-lima-blue-300:  var(--lima-blue-300);
  --color-lima-blue-200:  var(--lima-blue-200);
  --color-lima-blue-100:  var(--lima-blue-100);
  --color-lima-blue-50:   var(--lima-blue-50);

  /* ── Green, Yellow, Red palettes ── */
  --color-lima-green-700:  var(--lima-green-700);
  --color-lima-green-500:  var(--lima-green-500);
  --color-lima-green-300:  var(--lima-green-300);
  --color-lima-green-100:  var(--lima-green-100);
  --color-lima-yellow:     var(--lima-yellow);
  --color-lima-red:        var(--lima-red);

  /* ── Semantic palettes (danger / success / warning) ── */
  --color-danger-900:  var(--danger-900);
  --color-danger-800:  var(--danger-800);
  --color-danger-700:  var(--danger-700);
  --color-danger-600:  var(--danger-600);
  --color-danger-500:  var(--danger-500);
  --color-danger-400:  var(--danger-400);
  --color-danger-300:  var(--danger-300);
  --color-danger-200:  var(--danger-200);
  --color-danger-100:  var(--danger-100);
  --color-danger-50:   var(--danger-50);
  --color-success-900: var(--success-900);
  --color-success-800: var(--success-800);
  --color-success-700: var(--success-700);
  --color-success-600: var(--success-600);
  --color-success-500: var(--success-500);
  --color-success-400: var(--success-400);
  --color-success-300: var(--success-300);
  --color-success-200: var(--success-200);
  --color-success-100: var(--success-100);
  --color-success-50:  var(--success-50);
  --color-warning-900: var(--warning-900);
  --color-warning-800: var(--warning-800);
  --color-warning-700: var(--warning-700);
  --color-warning-600: var(--warning-600);
  --color-warning-500: var(--warning-500);
  --color-warning-400: var(--warning-400);
  --color-warning-300: var(--warning-300);
  --color-warning-200: var(--warning-200);
  --color-warning-100: var(--warning-100);
  --color-warning-50:  var(--warning-50);
  --color-info-900:    var(--info-900);
  --color-info-800:    var(--info-800);
  --color-info-700:    var(--info-700);
  --color-info-600:    var(--info-600);
  --color-info-500:    var(--info-500);
  --color-info-400:    var(--info-400);
  --color-info-300:    var(--info-300);
  --color-info-200:    var(--info-200);
  --color-info-100:    var(--info-100);
  --color-info-50:     var(--info-50);
}
/* ═══════════════════════════════════════════════════════════════════
   ALERT  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Öffentliche API: `.alert` + Varianten-Klasse; Kinder-Slots als
   `.alert-heading` (Bootstrap-kompatibler Name), `.alert-description`,
   `.alert-action`. alert.tsx rendert genau diese Klassen; Rails-Flash-
   Markup (`bootstrap_flash`) verwendet sie wörtlich.

   Layout: CSS-Grid — mit Icon (direktes <svg>-Kind) 2-spaltig, Icon
   spannt beide Zeilen (Title + Description).

   Varianten-Mapping (React-Prop → Klasse):
     default → (nur .alert)         destructive → alert-danger
     success/warning/info → alert-*
═══════════════════════════════════════════════════════════════════ */
.alert {
    /* Block als Default: Bootstrap-Flash-Markup hat lose Inline-Kinder
       (Text, <strong>, Dismiss-×) — Grid würde sie stapeln. */
    position: relative;
    display: block;
    width: 100%;
    padding: 0.5rem 0.625rem;              /* py-2 px-2.5 */
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--card);
    color: var(--card-foreground);
    font-size: var(--font-size-sm);
    /* line-height pinnen — Host-Seiten vererben sonst eigene Werte
       (Rails-Shell 1.6 vs. Tailwind-Base 1.5); Parity-Audit-Befund. */
    line-height: var(--line-height-normal);
    text-align: left;
  }
/* Strukturiertes Markup (Icon/Title/Description-Slots) → Grid-Layout */
.alert:has(> svg),
  .alert:has(> .alert-heading),
  .alert:has(> .alert-description) {
    display: grid;
    gap: 0.125rem;
  }
.alert:has(> svg) {
    grid-template-columns: auto 1fr;
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
  }
.alert > svg {
    grid-row: span 2;
    transform: translateY(0.125rem);
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    color: currentColor;
  }
/* Platz für die Action oben rechts (Dismiss-Button etc.) */
.alert:has(> .alert-action) {
    padding-right: 4.5rem;                 /* pr-18 */
  }
.alert-heading {
    margin: 0;
    grid-column-start: auto;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: inherit;
  }
.alert:has(> svg) > .alert-heading {
    grid-column-start: 2;
  }
.alert-description {
    font-size: var(--font-size-sm);
    color: var(--muted-foreground);
    text-wrap: balance;
  }
@media (min-width: 768px) {
    .alert-description {
      text-wrap: pretty;
    }
  }
.alert-description p:not(:last-child) {
    margin-bottom: 1rem;
  }
/* Inline-Links in Alerts: Variant-Farbe erben, nicht fett, unterstrichen */
.alert-heading a,
  .alert-description a {
    font-weight: var(--font-weight-normal) !important;
    color: currentColor !important;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
.alert-action {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
  }
/* ── Varianten ── */
/* Description nutzt 800er-Token (dunklere Variante) statt 700/80:
     700er mit /80-Opacity fällt unter WCAG AA (axe color-contrast). */
.alert-danger {
    background-color: var(--danger-100);
    border-color: var(--danger-200);
    color: var(--danger-700);
  }
.alert-danger > .alert-description {
    color: var(--danger-800);
  }
.alert-success {
    background-color: var(--success-100);
    border-color: var(--success-200);
    color: var(--success-700);
  }
.alert-success > .alert-description {
    color: var(--success-800);
  }
.alert-warning {
    background-color: var(--warning-100);
    border-color: var(--warning-200);
    color: var(--warning-700);
  }
.alert-warning > .alert-description {
    color: var(--warning-800);
  }
.alert-info {
    background-color: var(--info-100);
    border-color: var(--info-200);
    color: var(--info-700);
  }
.alert-info > .alert-description {
    color: var(--info-800);
  }
.alert-link {
    color: inherit;
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
/* ═══════════════════════════════════════════════════════════════════
   BADGE  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Öffentliche API: `.badge` + Varianten-Klasse. badge.tsx rendert genau
   diese Klassen; Rails-Haml/Bootstrap-Markup verwendet sie wörtlich
   (`<span class="badge badge-success">`). Styling NUR über Tokens.

   Varianten-Mapping (React-Prop → Klasse):
     default → badge-primary        destructive → badge-danger
     secondary → badge-secondary    success/warning/info → badge-*
     outline → badge-outline        ghost → badge-ghost
     link → badge-link
   Bootstrap-Zusatz (nur Markup-Kompat): badge-light, badge-dark
═══════════════════════════════════════════════════════════════════ */
.badge {
    display: inline-flex;
    height: 1.25rem;
    max-width: 14rem;
    width: -moz-fit-content;
    width: fit-content;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0.25rem; /* 4px zwischen Icon und Text */
    overflow: hidden;
    border-radius: 9999px;
    border: 1px solid transparent;
    /* Asymmetrisches Padding: Text-Seite (gegenüber Icon) bekommt mehr Atem
       zum Rand als die Icon-Seite. Icon-Seite kompensiert das visuelle Gewicht
       des Icons durch reduziertes Padding (s. :has(>svg)-Regeln unten). */
    padding: 0.125rem 0.625rem;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    vertical-align: middle;
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
    /* Default entspricht badge-primary — nacktes `.badge` in Bootstrap-
       Markup fällt damit nicht unsichtbar aus. */
    background-color: var(--primary);
    color: var(--primary-foreground);
  }
.badge:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
    outline: none;
  }
.badge[aria-invalid="true"] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
  }
.badge > svg {
    pointer-events: none;
    width: var(--size-icon-2xs);
    height: var(--size-icon-2xs);
  }
.badge > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
/* Icon-Seite bekommt reduziertes Padding (pl-1 / pr-1 statt pl-2 / pr-2)
     weil Icons visuell schwerer wirken als Text — sonst fühlt sich das Badge
     unsymmetrisch an. */
.badge:has(> svg:first-child) {
    padding-left: 0.25rem;
  }
.badge:has(> svg:last-child) {
    padding-right: 0.25rem;
  }
/* ── Varianten ── */
.badge-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
  }
a.badge-primary:hover {
    background-color: color-mix(in oklab, var(--primary) 90%, transparent);
  }
.badge-secondary {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
  }
a.badge-secondary:hover {
    background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
  }
.badge-outline {
    background-color: transparent;
    border-color: var(--border);
    color: var(--foreground);
  }
a.badge-outline:hover {
    background-color: var(--muted);
    color: var(--muted-foreground);
  }
.badge-ghost {
    background-color: transparent;
    color: var(--foreground);
  }
.badge-ghost:hover {
    background-color: var(--muted);
    color: var(--muted-foreground);
  }
.dark .badge-ghost:hover {
    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
  }
.badge-link {
    background-color: transparent;
    color: var(--primary);
    text-underline-offset: 4px;
  }
.badge-link:hover {
    text-decoration: underline;
  }
.badge-danger {
    background-color: var(--danger-100);
    color: var(--danger-700);
  }
a.badge-danger:hover {
    background-color: color-mix(in oklab, var(--danger-200) 60%, transparent);
  }
.badge-success {
    background-color: var(--success-100);
    color: var(--success-700);
  }
.badge-warning {
    background-color: var(--warning-100);
    color: var(--warning-700);
  }
.badge-info {
    background-color: var(--info-100);
    color: var(--info-700);
  }
/* Bootstrap-Markup-Kompat — additiv, keine React-Variante */
.badge-light {
    background-color: var(--muted);
    color: var(--muted-foreground);
  }
.badge-dark {
    background-color: var(--foreground);
    color: var(--background);
  }
/* ═══════════════════════════════════════════════════════════════════
   BUTTON  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Öffentliche API: `.btn` + Varianten-/Größen-Klasse. button.tsx rendert
   genau diese Klassen; Rails-Haml/Bootstrap-Markup verwendet sie wörtlich
   (`<button class="btn btn-primary">`). Stripe-orientiertes Design:
   abgerundetes Rechteck (radius-lg), dezente Tiefe, Icon inline.

   Varianten-Mapping (React-Prop → Klasse):
     default → btn-primary          destructive → btn-danger
     secondary → btn-secondary      success/warning/info → btn-*
     outline → btn-outline-secondary   ghost → btn-ghost
     link → btn-link
   Größen: default (h-9) | btn-sm | btn-xs | btn-lg |
           btn-icon | btn-icon-sm | btn-icon-xs | btn-icon-lg
   Bootstrap-Zusatz (nur Markup-Kompat): btn-outline-primary/-danger/
   -success/-warning/-info/-light/-dark, btn-light, btn-block, btn-group
═══════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    height: 2.25rem;                       /* h-9 */
    padding: 0 var(--spacing-4);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background-clip: padding-box;
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-none);
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    outline: none;
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.btn:hover {
    text-decoration: none;
  }
.btn:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
.btn:active {
    transform: scale(0.99);
  }
.btn[aria-invalid="true"] {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 30%, transparent);
  }
.btn:disabled,
  .btn.disabled {
    pointer-events: none;
    opacity: 0.5;
  }
.btn svg {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    flex-shrink: 0;
    pointer-events: none;
  }
/* Icon-Seite: leicht reduziertes Padding (has-[>svg]:px-3.5) */
.btn:has(> svg) {
    padding-left: var(--spacing-3_5);
    padding-right: var(--spacing-3_5);
  }
/* ── Varianten ── */
.btn-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
    box-shadow: var(--shadow-xs);
  }
.btn-primary:hover {
    background-color: color-mix(in oklab, var(--primary) 92%, transparent);
    color: var(--primary-foreground);
  }
.btn-primary:active {
    background-color: color-mix(in oklab, var(--primary) 85%, transparent);
  }
.btn-secondary {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
  }
.btn-secondary:hover {
    background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
    color: var(--secondary-foreground);
  }
.btn-secondary[aria-expanded="true"] {
    background-color: var(--secondary);
  }
.btn-danger {
    background-color: var(--destructive);
    color: var(--destructive-foreground);
    box-shadow: var(--shadow-xs);
  }
.btn-danger:hover {
    background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
    color: var(--destructive-foreground);
  }
.btn-success {
    background-color: var(--success-100);
    color: var(--success-700);
  }
.btn-success:hover {
    background-color: color-mix(in oklab, var(--success-200) 70%, transparent);
    color: var(--success-700);
  }
.btn-warning {
    background-color: var(--warning-100);
    color: var(--warning-700);
  }
.btn-warning:hover {
    background-color: color-mix(in oklab, var(--warning-200) 70%, transparent);
    color: var(--warning-700);
  }
.btn-info {
    background-color: var(--info-100);
    color: var(--info-700);
  }
.btn-info:hover {
    background-color: color-mix(in oklab, var(--info-200) 70%, transparent);
    color: var(--info-700);
  }
.btn-ghost {
    background-color: transparent;
    color: var(--foreground);
  }
.btn-ghost:hover,
  .btn-ghost[aria-expanded="true"] {
    background-color: var(--muted);
    color: var(--foreground);
  }
.btn-link {
    background-color: transparent;
    color: var(--primary);
    text-underline-offset: 4px;
  }
.btn-link:hover {
    color: var(--primary);
    text-decoration: underline;
  }
/* Outline — neutral (React-Variante "outline") */
.btn-outline-secondary,
  .btn-outline-light,
  .btn-outline-dark {
    border-color: var(--border);
    background-color: var(--background);
    color: var(--foreground);
    box-shadow: var(--shadow-xs);
  }
.btn-outline-secondary:hover,
  .btn-outline-secondary[aria-expanded="true"],
  .btn-outline-light:hover,
  .btn-outline-dark:hover {
    background-color: var(--muted);
    color: var(--foreground);
  }
.dark .btn-outline-secondary,
  .dark .btn-outline-light,
  .dark .btn-outline-dark {
    background-color: color-mix(in oklab, var(--input) 20%, transparent);
  }
.dark .btn-outline-secondary:hover,
  .dark .btn-outline-light:hover,
  .dark .btn-outline-dark:hover {
    background-color: color-mix(in oklab, var(--input) 40%, transparent);
  }
/* Outline — semantisch getönt (Bootstrap-Markup-Kompat, additiv) */
.btn-outline-primary {
    border-color: var(--primary);
    background-color: var(--background);
    color: var(--primary);
    box-shadow: var(--shadow-xs);
  }
.btn-outline-primary:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }
.btn-outline-danger {
    border-color: var(--danger-300);
    background-color: var(--background);
    color: var(--danger-700);
    box-shadow: var(--shadow-xs);
  }
.btn-outline-danger:hover {
    background-color: var(--danger-100);
    color: var(--danger-700);
  }
.btn-outline-success {
    border-color: var(--success-300);
    background-color: var(--background);
    color: var(--success-700);
    box-shadow: var(--shadow-xs);
  }
.btn-outline-success:hover {
    background-color: var(--success-100);
    color: var(--success-700);
  }
.btn-outline-warning {
    border-color: var(--warning-300);
    background-color: var(--background);
    color: var(--warning-700);
    box-shadow: var(--shadow-xs);
  }
.btn-outline-warning:hover {
    background-color: var(--warning-100);
    color: var(--warning-700);
  }
.btn-outline-info {
    border-color: var(--info-300);
    background-color: var(--background);
    color: var(--info-700);
    box-shadow: var(--shadow-xs);
  }
.btn-outline-info:hover {
    background-color: var(--info-100);
    color: var(--info-700);
  }
.btn-light {
    background-color: var(--muted);
    color: var(--foreground);
  }
.btn-light:hover {
    background-color: color-mix(in oklab, var(--muted) 80%, transparent);
    color: var(--foreground);
  }
/* ── Größen ── */
.btn-sm {
    height: 2rem;                          /* h-8 */
    padding: 0 var(--spacing-3);
    gap: var(--spacing-1_5);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
  }
.btn-sm:has(> svg) {
    padding-left: var(--spacing-2_5);
    padding-right: var(--spacing-2_5);
  }
.btn-sm svg {
    width: var(--size-icon-xs);
    height: var(--size-icon-xs);
  }
.btn-xs {
    height: 1.75rem;                       /* h-7 */
    padding: 0 var(--spacing-2_5);
    gap: var(--spacing-1);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
  }
.btn-xs:has(> svg) {
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
  }
.btn-xs svg {
    width: var(--size-icon-xs);
    height: var(--size-icon-xs);
  }
.btn-lg {
    height: 2.75rem;                       /* h-11 */
    padding: 0 var(--spacing-6);
  }
.btn-lg:has(> svg) {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
.btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
  }
.btn-icon-sm {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: var(--radius-md);
  }
.btn-icon-sm svg {
    width: var(--size-icon-xs);
    height: var(--size-icon-xs);
  }
.btn-icon-xs {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border-radius: var(--radius-md);
  }
.btn-icon-xs svg {
    width: var(--size-icon-xs);
    height: var(--size-icon-xs);
  }
.btn-icon-lg {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
  }
/* ── Bootstrap-Markup-Kompat: Block + Gruppe ── */
.btn-block {
    display: flex;
    width: 100%;
  }
.btn-group {
    display: inline-flex;
    vertical-align: middle;
  }
.btn-group > .btn:not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
.btn-group > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
/* ═══════════════════════════════════════════════════════════════════
   CARD  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Öffentliche API: `.card` + optionale Größen-Klasse `.card-sm`, dazu
   die Slot-Klassen der Kinder. card.tsx rendert genau diese Klassen;
   Rails-Haml/Bootstrap-Markup verwendet sie wörtlich
   (`<div class="card"><div class="card-body">…`).

   Slot-Mapping (React-Komponente → Klasse, Bootstrap-Kontrakt zuerst):
     Card            → card            (+ card-sm bei size="sm")
     CardHeader      → card-header
     CardContent     → card-body
     CardFooter      → card-footer
     CardTitle       → card-title
   DS-eigene Zusatz-Slots (additiv, kein Bootstrap-Pendant):
     CardDescription → card-description
     CardAction      → card-action

   Layout: Card selbst trägt nur vertikales Padding (py-4); Header/Body/
   Footer tragen das horizontale Padding — so bleiben volle Cover-Bilder
   (`img:first-child` / `img:last-child`) randlos möglich. `.card-sm`
   reduziert Gap/Padding durchgängig; die Größe wird zusätzlich zum
   `data-size`-Attribut als eigene Klasse am Root gespiegelt, damit die
   Kind-Slots sie hier über `.card-sm <slot>` (statt Attribut-Selektoren)
   adressieren können.
═══════════════════════════════════════════════════════════════════ */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--card);
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    font-size: var(--font-size-sm);
    /* line-height pinnen — Host-Seiten vererben sonst eigene Werte
       (Rails-Shell 1.6 vs. Tailwind-Base 1.5); Parity-Audit-Befund. */
    line-height: var(--line-height-normal);
    color: var(--card-foreground);
    /* ring-1 ring-foreground/10 — dezente Kontur statt harter Border */
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent);
  }
.card:has(> [data-slot="card-footer"]) {
    padding-bottom: 0;
  }
.card:has(> img:first-child) {
    padding-top: 0;
  }
.card > img:first-child {
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
  }
.card > img:last-child {
    border-bottom-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
  }
/* ── Größe: kompakt ── */
.card-sm {
    gap: var(--spacing-3);
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
  }
.card-sm:has(> [data-slot="card-footer"]) {
    padding-bottom: 0;
  }
/* ── Header ── */
.card-header {
    /* @container/card-header — richtet einen benannten Container-Query-
       Kontext ein; aktuell kein Kind mit @container-Query, aus Utility-
       Treue trotzdem gespiegelt. */
    container-type: inline-size;
    container-name: card-header;
    display: grid;
    grid-auto-rows: min-content;
    align-items: start;
    gap: var(--spacing-1);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
.card-sm .card-header {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
  }
.card-header:has(> [data-slot="card-action"]) {
    grid-template-columns: 1fr auto;
  }
.card-header:has(> [data-slot="card-description"]) {
    grid-template-rows: auto auto;
  }
/* Optionale Border-Utility direkt am Header (`.border-b`) — reserviert
     zusätzlichen Innenabstand, wenn eine Trennlinie gesetzt wird. */
.card-header.border-b {
    padding-bottom: var(--spacing-4);
  }
.card-sm .card-header.border-b {
    padding-bottom: var(--spacing-3);
  }
/* ── Title / Description / Action ── */
.card-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    line-height: var(--line-height-snug);                    /* leading-snug */
    font-weight: var(--font-weight-medium);
  }
.card-sm .card-title {
    font-size: var(--font-size-sm);
  }
.card-description {
    font-size: var(--font-size-sm);
    /* line-height pinnen — s.o., Parity-Audit. */
    line-height: var(--line-height-normal);
    color: var(--muted-foreground);
  }
.card-action {
    grid-column-start: 2;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: end;
  }
/* ── Body ── */
.card-body {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
.card-sm .card-body {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
  }
/* ── Footer ── */
.card-footer {
    display: flex;
    align-items: center;
    border-bottom-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
    border-top: 1px solid var(--border);
    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    padding: var(--spacing-4);
  }
.card-sm .card-footer {
    padding: var(--spacing-3);
  }
/* ═══════════════════════════════════════════════════════════════════
   GRID  —  Bootstrap-4-kompatibles Layout-Raster
   ───────────────────────────────────────────────────────────────────
   `.container`, `.container-fluid`, `.row` und `.col-*` sind laut
   RAILS_MIGRATION.md öffentliche API. Sie fehlten im Designsystem: Rails-
   Flächen bekamen sie aus dem eigenen Bootstrap, aber Flächen mit einem
   eigenen Stylesheet-Einstieg — die Hilfe, künftig Marketing — laden kein
   Bootstrap und hatten damit gar kein Raster.

   Diese Datei ist bewusst DECKUNGSGLEICH zu Bootstrap 4.3.1. Wo Bootstrap
   ohnehin geladen wird, ist sie wirkungsgleich; wo es fehlt, füllt sie die
   Lücke. Die Container-Maximalbreiten (540/720/960/1140) und die 12 Spalten
   sind Bootstrap-Konstanten und dürfen NICHT abweichen — sonst brechen
   bestehende Views an anderen Stellen um als bisher.

   Gestaltbar ist allein der Rinnenabstand: --grid-gutter.
═══════════════════════════════════════════════════════════════════ */
.container,
  .container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: calc(var(--grid-gutter) / 2);
    padding-left: calc(var(--grid-gutter) / 2);
  }
@media (min-width: 576px) {
    .container { max-width: 540px; }
  }
@media (min-width: 768px) {
    .container { max-width: 720px; }
  }
@media (min-width: 992px) {
    .container { max-width: 960px; }
  }
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
  }
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(var(--grid-gutter) / -2);
    margin-left: calc(var(--grid-gutter) / -2);
  }
.no-gutters {
    margin-right: 0;
    margin-left: 0;
  }
.no-gutters > .col,
  .no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
/* Basis für jede Spalte — Breite kommt aus den Stufenregeln darunter. */
.col,
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12,
  .col-auto,
  .col-sm,
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12,
  .col-sm-auto,
  .col-md,
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12,
  .col-md-auto,
  .col-lg,
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12,
  .col-lg-auto,
  .col-xl,
  .col-xl-1,
  .col-xl-2,
  .col-xl-3,
  .col-xl-4,
  .col-xl-5,
  .col-xl-6,
  .col-xl-7,
  .col-xl-8,
  .col-xl-9,
  .col-xl-10,
  .col-xl-11,
  .col-xl-12,
  .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: calc(var(--grid-gutter) / 2);
    padding-left: calc(var(--grid-gutter) / 2);
  }
.col { flex-basis: 0; flex-grow: 1; max-width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.offset-0 { margin-left: 0%; }
.offset-1 { margin-left: 8.333333%; }
.offset-2 { margin-left: 16.666667%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.333333%; }
.offset-5 { margin-left: 41.666667%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.333333%; }
.offset-8 { margin-left: 66.666667%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.333333%; }
.offset-11 { margin-left: 91.666667%; }
@media (min-width: 576px) {
    .col-sm { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
    .offset-sm-0 { margin-left: 0%; }
    .offset-sm-1 { margin-left: 8.333333%; }
    .offset-sm-2 { margin-left: 16.666667%; }
    .offset-sm-3 { margin-left: 25%; }
    .offset-sm-4 { margin-left: 33.333333%; }
    .offset-sm-5 { margin-left: 41.666667%; }
    .offset-sm-6 { margin-left: 50%; }
    .offset-sm-7 { margin-left: 58.333333%; }
    .offset-sm-8 { margin-left: 66.666667%; }
    .offset-sm-9 { margin-left: 75%; }
    .offset-sm-10 { margin-left: 83.333333%; }
    .offset-sm-11 { margin-left: 91.666667%; }
  }
@media (min-width: 768px) {
    .col-md { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
    .offset-md-0 { margin-left: 0%; }
    .offset-md-1 { margin-left: 8.333333%; }
    .offset-md-2 { margin-left: 16.666667%; }
    .offset-md-3 { margin-left: 25%; }
    .offset-md-4 { margin-left: 33.333333%; }
    .offset-md-5 { margin-left: 41.666667%; }
    .offset-md-6 { margin-left: 50%; }
    .offset-md-7 { margin-left: 58.333333%; }
    .offset-md-8 { margin-left: 66.666667%; }
    .offset-md-9 { margin-left: 75%; }
    .offset-md-10 { margin-left: 83.333333%; }
    .offset-md-11 { margin-left: 91.666667%; }
  }
@media (min-width: 992px) {
    .col-lg { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
    .offset-lg-0 { margin-left: 0%; }
    .offset-lg-1 { margin-left: 8.333333%; }
    .offset-lg-2 { margin-left: 16.666667%; }
    .offset-lg-3 { margin-left: 25%; }
    .offset-lg-4 { margin-left: 33.333333%; }
    .offset-lg-5 { margin-left: 41.666667%; }
    .offset-lg-6 { margin-left: 50%; }
    .offset-lg-7 { margin-left: 58.333333%; }
    .offset-lg-8 { margin-left: 66.666667%; }
    .offset-lg-9 { margin-left: 75%; }
    .offset-lg-10 { margin-left: 83.333333%; }
    .offset-lg-11 { margin-left: 91.666667%; }
  }
@media (min-width: 1200px) {
    .col-xl { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .col-xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
    .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
    .offset-xl-0 { margin-left: 0%; }
    .offset-xl-1 { margin-left: 8.333333%; }
    .offset-xl-2 { margin-left: 16.666667%; }
    .offset-xl-3 { margin-left: 25%; }
    .offset-xl-4 { margin-left: 33.333333%; }
    .offset-xl-5 { margin-left: 41.666667%; }
    .offset-xl-6 { margin-left: 50%; }
    .offset-xl-7 { margin-left: 58.333333%; }
    .offset-xl-8 { margin-left: 66.666667%; }
    .offset-xl-9 { margin-left: 75%; }
    .offset-xl-10 { margin-left: 83.333333%; }
    .offset-xl-11 { margin-left: 91.666667%; }
  }
/* ═══════════════════════════════════════════════════════════════════
   DROPDOWN  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Öffentliche API laut RAILS_MIGRATION.md: `.dropdown`, `.dropdown-menu`,
   `.dropdown-item`, dazu `.dropdown-toggle`, `.dropdown-divider`,
   `.dropdown-header`, `.dropdown-menu-right`.

   Diese Selektoren fehlten im Designsystem. Flächen mit eigenem
   Stylesheet-Einstieg (Hilfe, künftig Marketing) laden kein Bootstrap.

   ZUSTANDSSTEUERUNG bleibt bei Bootstrap: das JavaScript setzt `.show` auf
   `.dropdown-menu` beziehungsweise `.dropdown`. Diese Datei ändert daran
   nichts, sie liefert nur Positionierung und Optik — sonst würde die
   Interaktion an zwei Stellen definiert.

   Der React-Weg (`dropdown-menu.tsx`, base-ui) ist davon unberührt: er
   bringt eigene Zustandslogik mit und mappt auf dieselben Klassen.
═══════════════════════════════════════════════════════════════════ */
.dropdown,
  .dropup,
  .dropright,
  .dropleft {
    position: relative;
  }
.dropdown-toggle::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: var(--spacing-2);
    vertical-align: middle;
    border-top: 0.3em solid currentColor;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
  }
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    margin-top: var(--spacing-1);
    padding: var(--spacing-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--popover);
    background-clip: padding-box;
    box-shadow: var(--shadow-md);
    color: var(--popover-foreground);
    font-size: var(--font-size-sm);
    text-align: left;
    list-style: none;
  }
.dropdown-menu.show {
    display: block;
  }
.dropdown-menu-right {
    right: 0;
    left: auto;
  }
.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    border: 0;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--popover-foreground);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-snug);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition-property: color, background-color;
    transition-duration: var(--duration-micro);
    transition-timing-function: var(--ease-out);
  }
.dropdown-item:hover,
  .dropdown-item:focus {
    background-color: var(--accent);
    color: var(--accent-foreground);
    text-decoration: none;
  }
.dropdown-item:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
  }
.dropdown-item.active {
    background-color: var(--primary);
    color: var(--primary-foreground);
  }
.dropdown-item.disabled,
  .dropdown-item[aria-disabled="true"] {
    pointer-events: none;
    color: var(--muted-foreground);
    opacity: 0.6;
  }
.dropdown-divider {
    height: 0;
    margin: var(--spacing-1) 0;
    overflow: hidden;
    border-top: 1px solid var(--border);
  }
.dropdown-header {
    display: block;
    padding: var(--spacing-2) var(--spacing-3);
    margin-bottom: 0;
    color: var(--muted-foreground);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    white-space: nowrap;
  }
/* ═══════════════════════════════════════════════════════════════════
   FORM-CONTROL (Input + Textarea)  —  Komponenten-Klassen (Single
   Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Öffentliche API: `.form-control` (Bootstrap-Kontrakt). input.tsx UND
   textarea.tsx rendern genau diese Klasse; Rails-Haml/Bootstrap-Markup
   verwendet sie wörtlich (`<input class="form-control">`,
   `<textarea class="form-control">`, `<select class="form-control">`).
   Zustände: `:focus`/`:focus-visible` (React nutzt nur `:focus-visible`,
   Bootstrap-Markup hat kein JS-Polyfill dafür → beide Selektoren
   abgedeckt), `:disabled`/`[readonly]` (getrennte Regeln — `pointer-events:
   none` NUR bei `:disabled`, Quelle input.tsx `disabled:pointer-events-none`;
   `[readonly]` hat kein TSX-Pendant und bleibt fokus-/selektierbar, sonst
   wären `<input readonly>`/`<textarea readonly>` in React UND Rails
   unfokussierbar), `[aria-invalid="true"]` (React) sowie `.is-invalid`
   (Bootstrap-Markup-Kompat, additiv — gleiche Optik wie `aria-invalid`).

   `textarea.form-control` überschreibt die Input-spezifischen Werte
   (feste Höhe, striktere Transition-Liste, File-Button) mit den
   Textarea-Utilities aus textarea.tsx (auto-wachsende Höhe via
   `field-sizing: content`, `min-height`, eigene Transition-/Padding-
   Werte). Die Basis-Regeln (Border, Radius, Placeholder, Focus-Ring,
   Disabled-/Invalid-Optik, `md:`-Schriftgröße) sind für beide Elemente
   identisch und liegen deshalb in `.form-control`.

   Ersetzt die Handkopie von `.form-control` im „Forms"-Abschnitt von
   `bootstrap-compat.css` (Basis + Placeholder/Focus/Disabled/Invalid +
   `textarea.form-control`). `.form-control-sm`/`.form-control-lg`,
   `.form-group`, `.form-text`, `.invalid-feedback` sind davon NICHT
   betroffen und bleiben dort unverändert (kein TSX-Gegenstück).
═══════════════════════════════════════════════════════════════════ */
.form-control {
    display: block;                        /* Bootstrap-Markup: <select>/<input> ohne eigenes flex/block */
    width: 100%;                           /* w-full */
    min-width: 0;                          /* min-w-0 */
    height: 2.5rem;                        /* h-10 */
    padding: 0.5rem 0.75rem;               /* px-3 py-2 */
    border: 1px solid var(--input);
    border-radius: var(--radius-lg);
    background-color: transparent;
    /* font-family/line-height pinnen: Preflight liefert im React-Build
       `font-family: inherit; line-height: inherit` für Form-Elemente —
       Rails-Host ohne Preflight vererbt sonst abweichende UA-Defaults
       (Parity-Audit-Befund). */
    font-family: inherit;
    font-size: var(--font-size-base);      /* text-base */
    line-height: var(--line-height-normal);
    color: var(--foreground);
    outline: none;
    transition-property: color, border-color, box-shadow;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.form-control::file-selector-button {
    display: inline-flex;
    height: 1.75rem;                       /* file:h-7 */
    margin: 0;
    border: 0;                             /* file:border-0 */
    background-color: transparent;         /* file:bg-transparent */
    font-size: var(--font-size-sm);        /* file:text-sm */
    font-weight: var(--font-weight-medium);                      /* file:font-medium */
    color: var(--foreground);              /* file:text-foreground */
  }
.form-control::-moz-placeholder {
    color: var(--muted-foreground);
  }
.form-control::placeholder {
    color: var(--muted-foreground);
  }
.form-control:focus-visible,
  .form-control:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  }
.form-control:disabled {
    /* pointer-events: none nur für disabled (Quelle: input.tsx
       `disabled:pointer-events-none`) — NICHT für [readonly] mitgeben,
       sonst werden readonly-Felder unfokussierbar und ihr Text
       unselektierbar (Bootstrap-Markup UND React betroffen). */
    pointer-events: none;
    cursor: not-allowed;
    background-color: color-mix(in oklab, var(--input) 50%, transparent);
    opacity: 0.5;
  }
.form-control[readonly] {
    /* readonly hat kein TSX-Pendant (input.tsx kennt kein `readOnly:…`-
       Utility) — cursor/background/opacity bewusst mit :disabled geteilt
       (Disabled/Readonly-Optik vereinheitlicht). Das ersetzt den
       vorherigen bootstrap-compat-Wert `background-color: var(--muted)`
       (opak) durch eine transluzente `--input`-Mischung; visuell ruhiger
       und konsistent mit dem Disabled-Zustand, aber eine bewusste
       Abweichung von der alten Bootstrap-Optik für Rails-`[readonly]`. */
    cursor: not-allowed;
    background-color: color-mix(in oklab, var(--input) 50%, transparent);
    opacity: 0.5;
  }
.form-control[aria-invalid="true"],
  .form-control.is-invalid {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);
  }
@media (min-width: 768px) {
    .form-control {
      font-size: var(--font-size-sm);      /* md:text-sm */
    }
  }
.dark .form-control {
    background-color: color-mix(in oklab, var(--input) 30%, transparent);
  }
.dark .form-control:disabled,
  .dark .form-control[readonly] {
    background-color: color-mix(in oklab, var(--input) 80%, transparent);
  }
.dark .form-control[aria-invalid="true"],
  .dark .form-control.is-invalid {
    border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 40%, transparent);
  }
/* ── Textarea-Sonderregeln (textarea.tsx) ──
     Ersetzt die feste Input-Höhe durch autowachsenden Inhalt und
     überschreibt Padding/Transition/Disabled-Verhalten mit den
     abweichenden Textarea-Utilities. */
textarea.form-control {
    display: flex;                         /* flex */
    height: auto;
    min-height: 4rem;                      /* min-h-16 */
    field-sizing: content;                 /* field-sizing-content */
    padding: 0.5rem 0.625rem;              /* px-2.5 py-2 */
    /* transition-colors (kein explizites duration-[…]/ease-out wie bei
       Input) — Tailwind-Default-Timing, --ease-in-out trifft den
       Standard-Wert cubic-bezier(0.4, 0, 0.2, 1) exakt. */
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-in-out);
  }
textarea.form-control:disabled {
    /* Textarea hat kein disabled:pointer-events-none — Input-Wert wieder aufheben. */
    pointer-events: auto;
  }
/* ═══════════════════════════════════════════════════════════════════
   NAV / NAVBAR  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Öffentliche API laut RAILS_MIGRATION.md: `.nav`, `.nav-item`,
   `.nav-link`, `.nav-tabs`, `.nav-pills`, `.navbar`, `.navbar-brand`,
   `.navbar-nav`, `.navbar-toggler`.

   Diese Selektoren fehlten im Designsystem. Rails-Flächen mit eigenem
   Stylesheet-Einstieg (Hilfe, künftig Marketing) laden kein Bootstrap und
   hatten damit weder Navigation noch Tabs.

   STRUKTUR ist Bootstrap-4-kompatibel (gleiche Klassennamen, gleiche
   Verschachtelung, gleiche Zustände `.active`/`.disabled`).
   OPTIK kommt aus den Tokens — wie bei .btn und .card, nicht aus
   Bootstrap-Defaults. Das ist der Punkt, an dem visuelle Abnahme nötig ist.
═══════════════════════════════════════════════════════════════════ */
.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
.nav-item {
    display: flex;
  }
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--muted-foreground);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-none);
    text-decoration: none;
    white-space: nowrap;
    transition-property: color, background-color, border-color;
    transition-duration: var(--duration-micro);
    transition-timing-function: var(--ease-out);
  }
.nav-link:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }
.nav-link:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }
.nav-link.active {
    color: var(--foreground);
    font-weight: var(--font-weight-semibold);
  }
.nav-link.disabled,
  .nav-link[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.5;
  }
/* ── Tabs — Unterstrich statt Bootstrap-Kartenreiter ───────────────── */
.nav-tabs {
    gap: 0;
    border-bottom: 1px solid var(--border);
  }
.nav-tabs .nav-link {
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: var(--spacing-2) var(--spacing-4);
  }
.nav-tabs .nav-link:hover {
    background-color: transparent;
    border-bottom-color: var(--border);
    color: var(--foreground);
  }
.nav-tabs .nav-link.active {
    border-bottom-color: var(--primary);
    background-color: transparent;
    color: var(--foreground);
  }
/* ── Pills ─────────────────────────────────────────────────────────── */
.nav-pills .nav-link {
    border-radius: var(--radius-lg);
  }
.nav-pills .nav-link.active {
    background-color: var(--primary);
    color: var(--primary-foreground);
  }
.nav-fill .nav-item,
  .nav-fill .nav-link {
    flex: 1 1 auto;
    text-align: center;
  }
.nav-justified .nav-item,
  .nav-justified .nav-link {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
  }
/* ── Navbar ────────────────────────────────────────────────────────── */
.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding: var(--spacing-3) 0;
  }
.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--logo);
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-snug);
    text-decoration: none;
    white-space: nowrap;
  }
.navbar-brand:hover {
    text-decoration: none;
  }
.navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
.navbar-text {
    color: var(--muted-foreground);
    font-size: var(--font-size-sm);
  }
.navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--foreground);
    cursor: pointer;
  }
.navbar-toggler:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }
.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
  }
/* Ab md liegt die Navbar einzeilig — entspricht `.navbar-expand-md`,
     dem in Rails verbreiteten Standardfall. */
@media (min-width: 768px) {
    .navbar-expand-md {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
    .navbar-expand-md .navbar-nav {
      flex-direction: row;
      align-items: center;
    }
    .navbar-expand-md .navbar-toggler {
      display: none;
    }
    .navbar-expand-md .navbar-collapse {
      display: flex !important;
      flex-basis: auto;
    }
  }
@media (min-width: 992px) {
    .navbar-expand-lg {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
      flex-direction: row;
      align-items: center;
    }
    .navbar-expand-lg .navbar-toggler {
      display: none;
    }
    .navbar-expand-lg .navbar-collapse {
      display: flex !important;
      flex-basis: auto;
    }
  }
/* ═══════════════════════════════════════════════════════════════════
   LABEL  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Öffentliche API: `.form-label` (Bootstrap-5-Kontrakt). label.tsx
   rendert genau diese Klasse; Rails-Haml/Bootstrap-Markup verwendet sie
   wörtlich (`<label class="form-label">`).

   Zustände (kontextabhängig, nicht am Label selbst gesetzt):
     `.group[data-disabled="true"] .form-label`  — Label ist Teil einer
       Feld-Gruppe (z.B. `Field`/`Checkbox`-Wrapper), die als disabled
       markiert wurde (`group-data-[disabled=true]:…` in label.tsx).
     `.peer:disabled ~ .form-label`               — Label folgt direkt
       auf ein deaktiviertes Sibling-Control (`peer-disabled:…`).

   Ersetzt die Handkopie `.form-group > label, .form-label` im „Forms"-
   Abschnitt von `bootstrap-compat.css` — nur der `.form-label`-Teil.
   Der bare Selektor `.form-group > label` (Fallback für Labels ohne
   explizite Klasse) hat kein TSX-Gegenstück und bleibt dort bestehen.
═══════════════════════════════════════════════════════════════════ */
.form-label {
    display: flex;                         /* flex */
    align-items: center;                   /* items-center */
    gap: 0.5rem;                           /* gap-2 */
    font-size: var(--font-size-sm);        /* text-sm */
    line-height: var(--line-height-none);                        /* leading-none */
    font-weight: var(--font-weight-medium);                      /* font-medium */
    /* Keine eigene Textfarbe in label.tsx (kein `text-*`-Utility) —
       Label erbt die Vorder­grundfarbe vom umgebenden `body`/Rails-Host,
       wie im React-Build der globale `body { color: var(--foreground) }`
       aus styles.css greift. */
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;                     /* select-none */
  }
.group[data-disabled="true"] .form-label {
    pointer-events: none;
    opacity: 0.5;
  }
.peer:disabled ~ .form-label {
    cursor: not-allowed;
    opacity: 0.5;
  }
/* ═══════════════════════════════════════════════════════════════════
   MODAL  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Öffentliche Bootstrap-API für Rails:
     .modal .modal-dialog .modal-content
     .modal-header .modal-title .modal-body .modal-footer
     .modal-backdrop .modal-dialog-centered .modal-dialog-scrollable
     .modal-sm .modal-lg .modal-xl

   Reacts Dialog-Komponente verwendet dieselben visuellen Slots. Ihre
   Base-UI-Popup-Geometrie wird über die additive Adapterklasse
   `.dialog-content` abgebildet; Farbe, Fläche, Radius, Typografie und
   Teilbereiche bleiben identisch mit dem Bootstrap-Markup.
═══════════════════════════════════════════════════════════════════ */
/* ── Bootstrap-Root und Dialog-Geometrie ── */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
  }
.modal.show,
  .modal.d-block {
    display: block;
  }
.modal-open {
    overflow: hidden;
  }
.modal-dialog,
  .dialog-content {
    --modal-max-width: var(--container-sm);
  }
.modal-sm {
    --modal-max-width: var(--container-xs);
  }
.modal-lg {
    --modal-max-width: var(--container-md);
  }
.modal-xl {
    --modal-max-width: var(--container-lg);
  }
.modal-dialog {
    position: relative;
    width: calc(100% - (var(--spacing-4) * 2));
    max-width: var(--modal-max-width);
    margin: var(--spacing-4) auto;
    pointer-events: none;
  }
.modal-dialog-centered {
    display: flex;
    min-height: calc(100% - (var(--spacing-4) * 2));
    align-items: center;
  }
.modal-dialog-scrollable {
    display: flex;
    height: calc(100% - (var(--spacing-4) * 2));
  }
.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden;
  }
.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
  }
/* Bootstrap `.fade`/`.show`: ruhige Bewegung ohne Layout-Sprung. */
.modal.fade .modal-dialog {
    transform: translateY(calc(var(--spacing-2) * -1));
    transition: transform var(--duration-normal) var(--ease-out-expo);
  }
.modal.show .modal-dialog {
    transform: none;
  }
/* ── Gemeinsame visuelle Slots ── */
.modal-content {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    pointer-events: auto;
    border: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent);
    border-radius: var(--radius-xl);
    outline: 0;
    background-color: var(--background);
    background-clip: padding-box;
    box-shadow: var(--shadow-xl);
    color: var(--foreground);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
  }
.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--border);
  }
.modal-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-none);
    color: inherit;
  }
.modal-description {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--font-size-sm);
    text-wrap: balance;
  }
.modal-description a {
    color: currentColor;
    text-decoration: underline;
    text-underline-offset: var(--spacing-0_5);
  }
.modal-description a:hover {
    color: var(--foreground);
  }
.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--spacing-4);
    color: var(--foreground);
  }
.modal-body > :first-child {
    margin-top: 0;
  }
.modal-body > :last-child {
    margin-bottom: 0;
  }
.modal-footer {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
  }
.modal-header > .close,
  .modal-header > .btn-close {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font-family: inherit;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-none);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--duration-micro) var(--ease-out);
  }
.modal-header > .close:hover,
  .modal-header > .btn-close:hover {
    color: var(--foreground);
    opacity: 1;
  }
.modal-header > .close:focus-visible,
  .modal-header > .btn-close:focus-visible {
    border-radius: var(--radius-sm);
    outline: 2px solid var(--ring);
    outline-offset: var(--spacing-1);
  }
/* ── Backdrop, gemeinsam für Bootstrap und Base UI ── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    isolation: isolate;
    background-color: color-mix(in oklab, var(--lima-blue-1000) 90%, transparent);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
.modal-backdrop.show {
    opacity: 1;
  }
/* ── React-/Base-UI-Adapter ── */
.dialog-content {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1050;
    display: grid;
    width: calc(100% - (var(--spacing-4) * 2));
    max-width: var(--modal-max-width);
    transform: translate(-50%, -50%);
    gap: var(--spacing-4);
    padding: var(--spacing-4);
  }
.dialog-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-2);
    padding: 0;
    border-bottom: 0;
  }
.dialog-content:has(> .dialog-close) > .dialog-header {
    padding-right: var(--spacing-8);
  }
.dialog-footer {
    margin-right: calc(var(--spacing-4) * -1);
    margin-bottom: calc(var(--spacing-4) * -1);
    margin-left: calc(var(--spacing-4) * -1);
    flex-direction: column-reverse;
    align-items: stretch;
  }
.dialog-close {
    position: absolute;
    top: var(--spacing-2);
    right: var(--spacing-2);
  }
.dialog-content-command {
    top: 33.3333%;
    overflow: hidden;
    transform: translate(-50%, 0);
    padding: 0;
  }
.dialog-overlay[data-open] {
    animation: luftschloss-modal-backdrop-in var(--duration-fast) var(--ease-out) both;
  }
.dialog-overlay[data-closed] {
    animation: luftschloss-modal-backdrop-out var(--duration-fast) var(--ease-out) both;
  }
.dialog-content[data-open] {
    animation: luftschloss-modal-content-in var(--duration-fast) var(--ease-out-expo) both;
  }
.dialog-content[data-closed] {
    animation: luftschloss-modal-content-out var(--duration-fast) var(--ease-out) both;
  }
@media (min-width: 576px) {
    .modal-dialog {
      margin-top: var(--spacing-8);
      margin-bottom: var(--spacing-8);
    }
    .modal-dialog-centered {
      min-height: calc(100% - (var(--spacing-8) * 2));
    }
    .modal-dialog-scrollable {
      height: calc(100% - (var(--spacing-8) * 2));
    }
    .dialog-footer {
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
    }
    .modal-description {
      text-wrap: pretty;
    }
  }
@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog,
    .modal-backdrop,
    .dialog-overlay,
    .dialog-content {
      animation: none;
      transition: none;
    }
  }
@keyframes luftschloss-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes luftschloss-modal-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes luftschloss-modal-content-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes luftschloss-modal-content-out {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
}
/* ═══════════════════════════════════════════════════════════════════
   SHEET  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Die von einer Kante einfahrende Fläche: Verdunkelung plus Panel.
   React bindet sie an die Zustandslogik von base-ui, Rails schaltet
   `.is-open` — die Optik ist dieselbe.

   Vorher bezog die Komponente ihr Aussehen aus der eingefrorenen
   Tailwind-Referenz. Dadurch gab es sie in Rails schlicht nicht: der
   Menü-Knopf der Hilfe-Kopfzeile war verdrahtet, aber es existierte
   nichts, was er hätte öffnen können (Notion-Feedback Runde 7).

   Öffentliche API:

     .sheet-overlay     Verdunkelung (+ .is-open)
     .sheet-content     Panel — Kante über `data-side`
                        (right | left | top | bottom), Standard right
                        (+ .is-open)
     .sheet-header      Kopfbereich
     .sheet-footer      Fußbereich, wird nach unten geschoben
     .sheet-title       Überschrift
     .sheet-description Beschreibungstext

   Die Verdunkelung folgt der Overlay-Regel aus Runde V: schwarze
   Transparenz, KEIN Weichzeichner — der Inhalt darüber soll klar
   lesbar abgesetzt sein.
═══════════════════════════════════════════════════════════════════ */
.sheet-overlay {
    position: fixed;
    inset: 0;
    /* Gleiche Ebene und gleiche Farbe wie die Verdunkelung des Modals —
       zwei Overlay-Systeme mit verschiedenen z-Werten haben in Runde 3
       schon einmal dazu geführt, dass das Vollbild UNTER seinem eigenen
       Hintergrund lag. */
    z-index: 1040;
    background-color: color-mix(in oklab, var(--lima-blue-1000) 90%, transparent);
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.sheet-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }
.sheet-content {
    position: fixed;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    background-color: var(--background);
    background-clip: padding-box;
    color: var(--foreground);
    font-size: var(--font-size-sm);
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility, transform;
    transition-duration: var(--duration-normal);
    transition-timing-function: var(--ease-out-expo);
  }
/* ── Kanten ──
     Ohne Angabe fährt das Panel von rechts ein. Der Versatz im
     geschlossenen Zustand ist bewusst klein: die Fläche gleitet ein
     Stück und blendet dabei auf, statt über die halbe Breite zu fahren. */
.sheet-content,
  .sheet-content[data-side="right"] {
    inset-block: 0;
    right: 0;
    height: 100%;
    width: 75%;
    border-left: 1px solid var(--border);
    transform: translateX(2.5rem);
  }
.sheet-content[data-side="left"] {
    inset-block: 0;
    right: auto;
    left: 0;
    height: 100%;
    width: 75%;
    border-right: 1px solid var(--border);
    border-left: 0;
    transform: translateX(-2.5rem);
  }
.sheet-content[data-side="top"] {
    inset-inline: 0;
    top: 0;
    bottom: auto;
    height: auto;
    width: auto;
    border-bottom: 1px solid var(--border);
    border-left: 0;
    transform: translateY(-2.5rem);
  }
.sheet-content[data-side="bottom"] {
    inset-inline: 0;
    top: auto;
    bottom: 0;
    height: auto;
    width: auto;
    border-top: 1px solid var(--border);
    border-left: 0;
    transform: translateY(2.5rem);
  }
/* Der offene Zustand MUSS nach den Kanten stehen: `.sheet-content.is-open`
     und `.sheet-content[data-side="right"]` haben dieselbe Spezifität, es
     entscheidet die Reihenfolge. Stand er davor, behielt das Panel seinen
     Versatz und ragte über die Fensterkante hinaus. */
.sheet-content.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
@media (min-width: 576px) {
    .sheet-content[data-side="left"],
    .sheet-content,
    .sheet-content[data-side="right"] {
      max-width: 24rem;
    }
  }
.sheet-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-0_5);
    padding: var(--spacing-4);
  }
.sheet-footer {
    display: flex;
    margin-top: auto;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
  }
.sheet-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
  }
.sheet-description {
    font-size: var(--font-size-sm);
    color: var(--muted-foreground);
  }
/* Schließen-Knopf oben rechts im Panel. Der Knopf selbst ist ein
     `.btn.btn-ghost.btn-icon-sm` — hier nur seine Lage. */
.sheet-close-button {
    position: absolute;
    top: var(--spacing-3);
    right: var(--spacing-3);
  }
/* Solange ein Panel offen ist, scrollt der Hintergrund nicht mit. */
.sheet-open {
    overflow: hidden;
  }
@media (prefers-reduced-motion: reduce) {
    .sheet-overlay,
    .sheet-content {
      transition-duration: 1ms;
    }
    .sheet-content {
      transform: none;
    }
  }
/* ═══════════════════════════════════════════════════════════════════
   PAGINATION  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Bootstrap-Kontrakt: Wrapper (`<nav>`/`<ul>`) → `.pagination`, Eintrag
   (`<li>`) → `.page-item`, Link (`<a>`) → `.page-link`. pagination.tsx
   rendert genau diese Klassen; Rails-Haml/Kaminari-Markup verwendet sie
   wörtlich (`<ul class="pagination"><li class="page-item">
   <a class="page-link">…</a></li></ul>`) — `.pagination` funktioniert
   dabei sowohl auf dem `<nav>`-Wrapper (Zentrierung) als auch direkt
   auf dem `<ul>` (Reihen-Layout), Bootstrap-Markup ohne `<nav>` bleibt
   also gültig.

   PaginationLink rendert intern `<Button>` (`buttonVariants()`) — das
   liefert bereits `btn btn-ghost` bzw. `btn btn-outline-secondary`
   (aktiv) fürs komplette Farb-/Größen-/Fokus-Styling. `.page-link`
   selbst ERGÄNZT nur die pagination-spezifischen Zusatz-Utilities
   (Previous/Next-Innenabstand, „Zurück"/„Weiter"-Label-Sichtbarkeit) —
   keine Duplikate von `.btn`-Farben/Hover/Fokus.

   Aktiv-Zustand: `[aria-current="page"]` (von React `isActive` gesetzt)
   und `.page-item.active` (klassisches Kaminari/will_paginate-Markup,
   Klasse aufs `<li>` statt aufs `<a>`) sind gleichwertige Marker.
   Beides bindet sein Aussehen ausschließlich über die Button-Variante
   (`btn-outline-secondary` statt `btn-ghost`) — `.page-link` deklariert
   dafür bewusst nichts. Rails-Haml muss bei aktiven Items also neben
   `page-item active`/`aria-current="page"` zusätzlich `btn-outline-
   secondary` statt `btn-ghost` auf den Link setzen (siehe Styleguide).

   Öffentliche API:
     .pagination            nav-Wrapper (Zentrierung) UND ul-Liste (Layout)
     .page-item              <li> — reiner Bootstrap-Kontrakt-Marker
     .page-item.active       Bootstrap-Alias für aria-current="page"
     .page-link               <a> — pagination-spezifische Zusatz-Utilities
     .page-link-prev / .page-link-next   Icon-seitiges Padding (Previous/Next)
     .pagination-label        „Zurück"/„Weiter"-Text — erst ab sm sichtbar
     .pagination-ellipsis     „…"-Platzhalter zwischen Seiten
═══════════════════════════════════════════════════════════════════ */
/* ── Wrapper ── */
nav.pagination {
    margin-left: auto;
    margin-right: auto;                    /* mx-auto */
    display: flex;
    width: 100%;
    justify-content: center;
  }
ul.pagination {
    display: flex;
    align-items: center;
    gap: 0.125rem;                         /* gap-0.5 */
    /* Listen-Reset pinnen: Rails/Host-Seiten liefern kein Preflight —
       ein <ul> hätte sonst Browser-Default-Bullet/Margin/Padding.
       Parity-Regel. */
    margin: 0;
    padding: 0;
    list-style: none;
  }
/* .page-item trägt bewusst keine eigenen Deklarationen — reiner
     Bootstrap-Kontrakt-Marker, der Abstand kommt vom `gap` der Liste. */
/* ── Link ──
     Keine Basis-Deklarationen: Farbe/Größe/Fokus kommen vollständig aus
     der `.btn`/`.btn-ghost`/`.btn-outline-secondary`-Klasse, die
     buttonVariants() bzw. das Rails-Markup zusätzlich mitgibt. */
/* Previous/Next: Icon-seitiges Padding reduzieren (Icon rückt näher
     an den Rand, Text bekommt mehr Luft zur Mitte). */
.page-link-prev {
    padding-left: 0.375rem !important;     /* pl-1.5! */
  }
.page-link-next {
    padding-right: 0.375rem !important;    /* pr-1.5! */
  }
/* „Zurück"/„Weiter"-Beschriftung: auf schmalen Screens ausgeblendet,
     nur das Chevron-Icon bleibt sichtbar. */
.pagination-label {
    display: none;                         /* hidden */
  }
@media (min-width: 576px) {
    .pagination-label {
      display: block;                      /* sm:block */
    }
  }
/* ── Ellipsis ── */
.pagination-ellipsis {
    display: flex;
    width: 2rem;                           /* size-8 */
    height: 2rem;
    align-items: center;
    justify-content: center;
  }
.pagination-ellipsis svg:not([class*="size-"]) {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
  }
/* ═══════════════════════════════════════════════════════════════════
   PRIMITIVES  —  kleine, überall eingesetzte Bausteine
   ───────────────────────────────────────────────────────────────────
   Separator, Kbd, Skeleton, AspectRatio. Vier Komponenten mit je wenigen
   Regeln, die keine eigene Datei rechtfertigen, aber sehr viele Importeure
   haben (separator allein 26). Sie waren die letzten Bausteine, deren
   Optik noch aus der eingefrorenen Tailwind-Referenz kam.

   Öffentliche API: die Klassen unten. React mappt seine Props darauf,
   Rails kann sie wörtlich verwenden.
═══════════════════════════════════════════════════════════════════ */
/* ── Separator ──
     base-ui rendert data-orientation="horizontal|vertical". Die grosse
     Dimension ist Default (100 %), die kleine kommt aus der Orientierung. */
.separator {
    flex-shrink: 0;
    background-color: var(--border);
  }
.separator[data-orientation="horizontal"] {
    width: 100%;
    height: 1px;
  }
/* Bewusst KEINE height: Konsumenten geben die Hoehe vor (z. B. eine kurze
     Trennlinie zwischen Textelementen). `align-self: stretch` fuellt die
     Querachse nur dann, wenn niemand eine Hoehe gesetzt hat. Eine feste
     `height: 100%` hier wuerde jede Angabe des Konsumenten ueberschreiben —
     genau daran sind die vertikalen Trenner zuerst verschwunden. */
.separator[data-orientation="vertical"] {
    width: 1px;
    align-self: stretch;
  }
/* ── Kbd ──
     Gruppe mehrerer Tastenkappen; die Kappe selbst kommt aus dem
     Bootstrap-Vertrag beziehungsweise der Komponente. */
.kbd-group {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
  }
/* ── Skeleton ──
     Ladeplatzhalter. Nutzt lima-pulse aus dem Motion-Fundament — vorher
     kam die Animation aus der eingefrorenen Referenz. */
.skeleton {
    border-radius: var(--radius-md);
    background-color: var(--muted);
    animation: lima-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
/* ── AspectRatio ──
     Das Verhältnis kommt als --ratio per Inline-Style von der Komponente. */
.aspect-ratio-box {
    position: relative;
    aspect-ratio: var(--ratio);
  }
/* ═══════════════════════════════════════════════════════════════════
   PROGRESS  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Öffentliche API (progress.tsx rendert genau diese Klassen, Rails-
   Haml/Bootstrap-Markup verwendet `.progress` / `.progress-bar`
   wörtlich):

     .progress-root   Wrapper — Flex-Zeile aus Label/Value + Track,
                       bricht bei Platzmangel um (DS-Slot, additiv)
     .progress        Track — durchgehende Schiene (Bootstrap-Name)
     .progress-bar    Indicator — der gefüllte Balken (Bootstrap-Name)
     .progress-label  Beschriftung links (DS-Slot, additiv)
     .progress-value  Prozent-/Wertanzeige rechts (DS-Slot, additiv)

   Keine Varianten — Progress hat keine CVA-Prop-Mappings.

   Die Fill-Transition von `.progress-bar` liegt zentral in styles.css
   unter `[data-slot="progress-indicator"]` (greift attribut-basiert,
   unabhängig von der Klasse) — hier bewusst NICHT dupliziert.
═══════════════════════════════════════════════════════════════════ */
.progress-root {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;                          /* gap-3 */
  }
.progress {
    position: relative;
    display: flex;
    align-items: center;
    overflow-x: hidden;
    height: 0.25rem;                       /* h-1 */
    width: 100%;
    border-radius: 9999px;                 /* rounded-full */
    background-color: var(--muted);
  }
.progress-bar {
    height: 100%;
    background-color: var(--primary);
    /* Transition: siehe [data-slot="progress-indicator"] in styles.css —
       nicht hier duplizieren. */
  }
.progress-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    /* line-height pinnen — Host-Seiten vererben sonst eigene Werte
       (Rails-Shell 1.6 vs. Tailwind-Base 1.5); Parity-Audit-Befund. */
    line-height: var(--line-height-normal);
  }
.progress-value {
    margin-left: auto;                     /* ml-auto */
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
  }
/* ═══════════════════════════════════════════════════════════════════
   TABLE  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Öffentliche API: `.table-container` (Scroll-Wrapper-Div) + `.table`
   (Bootstrap-Kontrakt, sitzt auf dem `<table>`-Element). table.tsx
   rendert genau diese zwei Klassen; alle übrigen Sub-Slots (thead/
   tbody/tfoot/tr/th/td/caption) sind reine Element-Deskendenten-Regeln
   unter `.table` — KEINE eigenen Slot-Klassen, weil Bootstrap-Markup in
   Rails-Haml (`<table class="table">` mit nacktem `<thead>`/`<tr>`/
   `<th>`/`<td>`) dafür keine hat. TableHeader/Body/Footer/Row/Head/Cell/
   Caption in table.tsx tragen deshalb nur noch `cn(className)` — kein
   eigener Utility-String mehr; die gesamte Optik hängt an Tag + Ancestor
   `.table`.

   Struktur (Zeilen/Zellen 1:1 aus table.tsx portiert; `.table th` zusätzlich
   für Bootstrap-Kontrakt-Parität, siehe unten):
     .table th                     Basis-Zellenkontrakt für JEDE `<th>`, auch
                                    `<th scope="row">` im `<tbody>` — kommt in
                                    table.tsx/TableHead so nicht vor (React
                                    kennt kein Body-`<th>`), aber Bootstrap-
                                    Markup erlaubt es; ohne diese Regel bricht
                                    die Zellen-Parität zu `.table td`
     .table thead tr              Kopfzeilen-Trennlinie (TableHeader)
     .table thead th               Kopfzelle: Höhe/Padding/Schrift (TableHead)
     .table tbody tr:last-child    letzte Body-Zeile ohne Trennlinie (TableBody)
     .table tfoot                  Fußzeile: Trennlinie oben, getönter BG (TableFooter)
     .table tfoot > tr:last-child  letzte Fußzeile ohne Trennlinie (TableFooter)
     .table tr                     Basis-Zeile: Trennlinie, Hover, Selected (TableRow)
     .table td                     Zelle: Padding (TableCell)
     .table caption                Bildunterschrift, sitzt unten via `caption-bottom` (TableCaption)
   `[role=checkbox]`-Zellen (Head + Cell) verlieren ihr rechtes Padding,
   damit die Checkbox bündig am Rand sitzt.

   WICHTIG — Verhalten 1:1 aus TableRow übernommen: `.table tr` trägt den
   Hover-/Selected-Hintergrund UNBEDINGT (in table.tsx ist
   `hover:bg-muted/50` auf jeder Zeile immer aktiv, kein Opt-in). Die
   Bootstrap-Zusatzklasse `.table-hover` bleibt unten trotzdem erhalten
   (Markup-Kompat für bestehendes Rails-Haml, das sie bereits setzt) —
   sie ist dadurch aber redundant/no-op, weil der Hover-Zustand schon auf
   jeder `.table tr` liegt.

   Bootstrap-Zusatz (nur Markup-Kompat, Inhalt übernommen aus dem
   Table-Abschnitt von bootstrap-compat.css, der durch diese Datei
   ersetzt wird): `table-hover`, `table-striped`, `table-bordered`.
═══════════════════════════════════════════════════════════════════ */
/* ── Scroll-Wrapper (div um <table>, data-slot="table-container") ── */
.table-container {
    position: relative;
    width: 100%;
    overflow-x: auto;
  }
/* ── Tabelle ── */
.table {
    width: 100%;
    caption-side: bottom;                  /* caption-bottom */
    font-size: var(--font-size-sm);
    /* line-height/font-family/text-align/color pinnen — Host-Seiten
       (Rails-Shell ohne Tailwind-Preflight) vererben sonst andere Werte
       als der React-Build; Parity-Audit-Befund (analog button.css). */
    line-height: var(--line-height-normal);
    font-family: inherit;
    text-align: left;
    color: var(--foreground);
    /* Tailwind-Preflight setzt `table { border-collapse: collapse }`
       global im React-Build — Rails hat kein Preflight, deshalb hier
       explizit pinnen (sonst doppelte/verschobene Zellrahmen). */
    border-collapse: collapse;
  }
/* ── Zeilen (TableRow — gilt gleichermaßen für Kopf-, Body- und
     Fußzeilen, da table.tsx dieselbe Klasse auf jeder <tr> rendert) ── */
.table tr {
    border-bottom: 1px solid var(--border);
    transition-property: color, background-color, border-color;
    transition-duration: var(--duration-micro);
    transition-timing-function: var(--ease-out);
  }
.table tr:hover {
    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
  }
.table tr[data-state="selected"] {
    background-color: var(--muted);
  }
/* ── Zellen-Basis (gilt für JEDE `<th>` — auch `<th scope="row">` in
     `<tbody>`, wie Bootstrap-Markup es erlaubt. Ohne diese Basis-Regel
     fallen Body-`<th>`-Zellen auf Browser-Defaults zurück (fett,
     zentriert, ohne Padding) und brechen die Ausrichtung gegenüber den
     gepolsterten/linksbündigen `<td>`-Zellen. `.table thead th` unten
     überschreibt Höhe/Schriftgewicht für Kopfzellen weiterhin. ── */
.table th {
    padding: 0.5rem;                       /* p-2 */
    text-align: left;
    vertical-align: middle;
  }
/* ── Kopfbereich (TableHeader) ── */
.table thead tr {
    border-bottom: 1px solid var(--border);
  }
.table thead th {
    height: 2.5rem;                        /* h-10 */
    padding: 0 0.5rem;                     /* px-2 */
    text-align: left;
    vertical-align: middle;
    font-weight: var(--font-weight-medium);                      /* font-medium */
    white-space: nowrap;
    color: var(--foreground);
  }
.table thead th:has([role="checkbox"]) {
    padding-right: 0;
  }
/* ── Body (TableBody) ── */
.table tbody tr:last-child {
    border-bottom: 0;
  }
/* ── Fußbereich (TableFooter) ── */
.table tfoot {
    border-top: 1px solid var(--border);
    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    font-weight: var(--font-weight-medium);                      /* font-medium */
  }
.table tfoot > tr:last-child {
    border-bottom: 0;
  }
/* ── Zellen (TableCell) ── */
.table td {
    padding: 0.5rem;                       /* p-2 */
    vertical-align: middle;
    white-space: nowrap;
  }
.table td:has([role="checkbox"]) {
    padding-right: 0;
  }
/* ── Bildunterschrift (TableCaption) ── */
.table caption {
    margin-top: 1rem;                      /* mt-4 */
    font-size: var(--font-size-sm);
    color: var(--muted-foreground);
  }
/* ── Bootstrap-Markup-Kompat: Zusatzvarianten ──
     Übernommen aus bootstrap-compat.css (dort wird der Table-Abschnitt
     durch diese Datei ersetzt — siehe Banner oben). */
.table-hover tbody tr:hover {
    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
  }
.table-striped tbody tr:nth-of-type(odd) {
    background-color: color-mix(in oklab, var(--muted) 40%, transparent);
  }
.table-bordered th,
  .table-bordered td {
    border: 1px solid var(--border);
  }
/* ═══════════════════════════════════════════════════════════════════
   ANCHOR-HEADING  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Überschrift mit Deep-Link-Anker für die Docs. Die `id` wird zur
   Build-Zeit (React: rehype-slug, Rails: entsprechendes Slug-Helper)
   vergeben; beim Hover erscheint ein `#`-Link, mit dem sich der
   Abschnitt direkt verlinken lässt — diese IDs speisen zugleich die
   „Auf dieser Seite"-Navigation (siehe docs-toc.css).

   Öffentliche API (anchor-heading.tsx rendert genau diese Klassen,
   Rails-Haml verwendet sie wörtlich):

     .anchor-heading         h1–h4, Größen/Rhythmus über Element-
                              Selektoren h1.anchor-heading … h4.anchor-heading
     .anchor-heading-link    „#"-Deep-Link, sichtbar bei Hover/Focus
═══════════════════════════════════════════════════════════════════ */
.anchor-heading {
    font-family: var(--font-heading);
    scroll-margin-top: 6rem;               /* scroll-mt-24 */
  }
h1.anchor-heading {
    margin: 0 0 1rem;                      /* mt-0 mb-4 */
    font-size: var(--font-size-4xl);
    /* SemiBold ist der schwerste Schnitt der Marke — Hierarchie kommt aus
       Größe und Laufweite, nicht aus Gewicht. */
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);   /* tracking-tight */
    line-height: var(--line-height-tight);                     /* leading-tight */
  }
h2.anchor-heading {
    margin: 3rem 0 1rem;                   /* mt-12 mb-4 */
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);   /* tracking-tight */
    line-height: var(--line-height-snug);                    /* leading-snug */
  }
h3.anchor-heading {
    margin: 2.25rem 0 0.75rem;             /* mt-9 mb-3 */
    font-size: var(--font-size-xl);        /* text-xl */
    font-weight: var(--font-weight-semibold);                      /* font-semibold */
    letter-spacing: var(--letter-spacing-tight);   /* tracking-tight */
    line-height: var(--line-height-snug);                    /* leading-snug */
  }
h4.anchor-heading {
    margin: 1.75rem 0 0.5rem;              /* mt-7 mb-2 */
    font-size: var(--font-size-base);      /* text-base */
    font-weight: var(--font-weight-semibold);                      /* font-semibold */
    /* leading pinnen — kein explizites `leading-*` im Original, Host-
       Vererbung würde sonst divergieren (Parity-Audit). */
    line-height: var(--line-height-normal);
  }
.anchor-heading-link {
    display: inline-flex;
    margin-left: 0.5rem;                   /* ml-2 */
    transform: translateY(1px);            /* translate-y-px */
    color: var(--muted-foreground);
    /* pinnen — Host-<a> vererbt sonst ggf. Bootstrap-Underline (Parity-Audit) */
    text-decoration: none;
    opacity: 0;
    transition-property: opacity;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.anchor-heading-link svg {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
  }
.anchor-heading-link:hover {
    color: var(--primary);
  }
.anchor-heading-link:focus-visible {
    opacity: 1;
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
/* group-hover/heading — Link wird sichtbar sobald über die ganze
     Überschrift gehovert wird, nicht nur über den Link selbst. */
.anchor-heading:hover .anchor-heading-link {
    opacity: 1;
  }
/* ═══════════════════════════════════════════════════════════════════
   ANNOUNCEMENT-BAR  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Schmaler Hinweis-Streifen am Kopf der Docs (Webflow-Pattern): farbiger
   Bar mit Hinweistext, optionalem Folge-Link und Close-Button. Bei sehr
   langem Text läuft der Inhalt als endloses Marquee.

   Öffentliche API (announcement-bar.tsx rendert genau diese Klassen,
   Rails-Haml verwendet sie wörtlich — Überlauf-Erkennung/Dismiss-Storage
   liefert die jeweilige Plattform als JS):

     .announcement-bar          Wrapper (role="region"), farbiger Bar
     .announcement-bar-body     zentrierende Zeile um den Inhalt
       .is-marquee                 aktiviert `overflow: hidden` (Scroll-Clip)
     .announcement-bar-link     Inhalts-Zeile — <a>/<Link>/<span>-Fallback
       .is-marquee                 endloser Lauftext (scrollt via @keyframes
                                    lima-marquee aus styles.css — hier nur
                                    referenziert, NICHT dupliziert)
     .announcement-bar-message  Text-Slot (Children + optionales Pfeil-Icon);
                                 die Marquee-Loop-Kopie trägt zusätzlich
                                 `aria-hidden` (2. Kopie für nahtlosen Loop)
     .announcement-bar-icon     Pfeil-Icon im Message-Slot (nur ohne Marquee)
     .announcement-bar-close    Dismiss-Button oben rechts

   Kein Varianten-Mapping (keine CVA) — reine Struktur- + Zustandsklassen.
   `hover:underline` gilt nur für echte Links (Tag-Selektor `a.…`), nicht
   für den <span>-Fallback ohne `href` — treue Portierung des Originals.
═══════════════════════════════════════════════════════════════════ */
.announcement-bar {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0 1rem;                       /* px-4 */
  }
@media (min-width: 576px) {
    .announcement-bar {
      padding-left: 3rem;                  /* sm:px-12 */
      padding-right: 3rem;
    }
  }
.announcement-bar-body {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;                     /* py-2 */
    font-size: var(--font-size-sm);
    /* line-height pinnen: Host-Seiten (Rails-Shell 1.6, Storybook 1.5)
       vererben sonst unterschiedliche Werte — Parity-Audit-Befund. */
    line-height: var(--line-height-normal);
  }
.announcement-bar-body.is-marquee {
    overflow: hidden;
  }
.announcement-bar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;                           /* gap-2 */
    /* Ohne Tailwind-Preflight erbt ein Rails-`<a>` seine Bootstrap-
       Linkfarbe/Unterstreichung statt der umgebenden Bar-Farbe — explizit
       pinnen für Parity zwischen Storybook (Preflight aktiv) und Rails. */
    color: inherit;
    text-decoration: none;
  }
a.announcement-bar-link:hover {
    text-decoration: underline;
  }
.announcement-bar-link.is-marquee {
    display: flex;
    flex-shrink: 0;
    white-space: nowrap;
    /* Referenziert @keyframes lima-marquee aus styles.css — dort einmalig
       definiert, hier nur per Name verwendet (keine Duplikation). */
    animation: lima-marquee 25s linear infinite;
  }
.announcement-bar-message {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;                           /* gap-2 */
  }
/* Zweite Kopie (Marquee-Loop) trägt aria-hidden und bekommt Abstand
     zur ersten Kopie, damit der Loop nahtlos wirkt. */
.announcement-bar-message[aria-hidden] {
    padding-left: 3rem;                    /* pl-12 */
  }
.announcement-bar-icon {
    width: var(--size-icon-xs);
    height: var(--size-icon-xs);
    flex-shrink: 0;
    transition-property: transform;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.announcement-bar-link:hover .announcement-bar-icon {
    transform: translateX(0.125rem);       /* translate-x-0.5 */
  }
.announcement-bar-close {
    /* UA-Button-Reset (Rails hat kein Preflight) */
    font: inherit;
    color: inherit;
    background-color: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 0.5rem;                         /* right-2 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;                        /* size-7 */
    height: 1.75rem;
    transform: translateY(-50%);
    border: none;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
    cursor: pointer;
    transition-property: color, background-color;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.announcement-bar-close:hover {
    background-color: color-mix(in oklab, var(--primary-foreground) 10%, transparent);
    color: var(--primary-foreground);
  }
.announcement-bar-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary-foreground) 40%, transparent);
  }
.announcement-bar-close svg {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    flex-shrink: 0;
  }
/* ═══════════════════════════════════════════════════════════════════
   BACK-TO-TOP  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Floating-Button unten rechts. back-to-top.tsx rendert genau diese
   Klassen; Rails-Haml verwendet sie wörtlich. Sichtbarkeit (Scroll-
   Schwelle) liefert die jeweilige Plattform als JS über `.is-visible`.

   Öffentliche API:
     .back-to-top              Button — fixed, rund, Icon zentriert
     .back-to-top.is-visible   eingeblendet (sonst: unsichtbar, no-pointer)
═══════════════════════════════════════════════════════════════════ */
.back-to-top {
    position: fixed;
    bottom: 1rem;                          /* bottom-4 */
    right: 1rem;                           /* right-4 */
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;                         /* size-10 */
    height: 2.5rem;
    border: 1px solid var(--border);
    border-radius: 9999px;                 /* rounded-full */
    background-color: var(--background);
    color: var(--foreground);
    /* Font-Kontext pinnen: Icon-only Button, aber vom Host geerbte
       Werte (text-align, font-family) sollen die Form nicht verschieben
       — Parity-Audit-Befund. */
    font-family: inherit;
    text-align: center;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    outline: none;
    transition-property: opacity, transform, background-color;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
    /* Default: ausgeblendet, bis `.is-visible` gesetzt wird */
    pointer-events: none;
    transform: translateY(0.5rem);         /* translate-y-2 */
    opacity: 0;
  }
.back-to-top:hover {
    background-color: var(--muted);
  }
.back-to-top:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
.back-to-top.is-visible {
    pointer-events: auto;
    transform: translateY(0);
    opacity: 1;
  }
.back-to-top svg {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    flex-shrink: 0;
  }
/* ═══════════════════════════════════════════════════════════════════
   CALLOUT  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Hervorgehobener Hinweisblock für die Docs. Stripe-orientiert: ruhige,
   getönte Fläche mit Icon links, ohne Akzentkante.

   Öffentliche API (callout.tsx rendert genau diese Klassen, Rails-Haml
   verwendet sie wörtlich):

     .callout            Root — Block für Legacy-Markup; Flex-Row mit .callout-body
     .callout-note       Variante — neutraler Hinweis (Default)
     .callout-info       Variante — informativer Kontext
     .callout-tip        Variante — Empfehlung / Best Practice
     .callout-warning    Variante — Vorsicht, mögliche Stolperfalle
     .callout-caution    Variante — kritisch, Datenverlust/Fehler-Risiko
     .callout-title      optionale fette Überschrift (erstes Kind in .callout-body)
     .callout-body        Text-Wrapper (Titel + Kinder-Content)

   Bootstrap-/Legacy-Aliasse (additiv, ohne React-Variante):
     .callout-primary .callout-success .callout-danger
     `.callout-warning` und `.callout-info` werden von beiden APIs verwendet.

   Varianten-Mapping (React-Prop → Klasse): variant="note" → callout-note,
   "info" → callout-info, "tip" → callout-tip, "warning" → callout-warning,
   "caution" → callout-caution. Root trägt IMMER `.callout` + die Varianten-
   Klasse gemeinsam — Struktur (Größe, Radius, Icon-Maße) liegt in `.callout`,
   Farbe (Border/Fläche/Text/Icon-Ton) in der Varianten-Klasse.
═══════════════════════════════════════════════════════════════════ */
.callout {
    margin: 1.5rem 0;                      /* my-6 */
    position: relative;
    display: block;
    gap: 0.75rem;                          /* gap-3 */
    border-radius: var(--radius-lg);
    border-width: 1px;
    border-style: solid;
    padding: 0.875rem 1rem;                /* py-3.5 px-4 */
    font-size: var(--font-size-sm);
    /* line-height pinnen: Host-Seiten (Rails-Shell 1.6, Storybook 1.5)
       vererben sonst unterschiedliche Werte — Parity-Audit-Befund. */
    line-height: var(--line-height-normal);
    text-align: left;
  }
/* Die Docs-Komponente und Rails-Hilfe nutzen den strukturierten Body.
     Historisches Bootstrap-Markup hat dagegen direkte h4/p-Kinder und
     bleibt bewusst im normalen Blockfluss. */
.callout:has(> .callout-body) {
    display: flex;
  }
.callout > svg {
    margin-top: 0.125rem;                  /* mt-0.5 */
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    flex-shrink: 0;
  }
/* `color: currentColor` an Block-Kinder vererben — sonst überschreibt das
     mdx-components-Mapping (text-foreground) die Callout-Tönung und der
     Box-Look wirkt zweifarbig statt monochrom.
     Link-Styling (Notion-Feedback Runde V): Links erben die semantische
     Callout-Farbe (currentColor), normales Gewicht, NUR unterstrichen —
     niemals fett UND unterstrichen. */
.callout-body {
    min-width: 0;
    flex: 1 1 0%;
  }
.callout-body > :first-child {
    margin-top: 0;
  }
.callout-body > :last-child {
    margin-bottom: 0;
  }
.callout-body a,
  .callout > a:not(.close) {
    font-weight: var(--font-weight-normal) !important;
    color: currentColor !important;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
.callout-body code,
  .callout > code {
    color: currentColor;
  }
.callout-body p,
  .callout > p {
    margin: 0.5rem 0;                      /* my-2 */
    line-height: var(--line-height-relaxed);                    /* leading-relaxed */
    color: currentColor;
  }
.callout-body strong,
  .callout > strong {
    color: currentColor;
  }
.callout-body li {
    color: currentColor;
  }
.callout-title {
    margin-top: 0 !important;
    margin-bottom: 0.25rem !important;     /* mb-1 */
    font-family: var(--font-heading);
    font-weight: var(--font-weight-semibold);
  }
/* Legacy-Callout aus lima-rails: direkte Überschrift statt
     `.callout-body > .callout-title`. */
.callout > h4 {
    margin-top: 0;
    margin-bottom: var(--spacing-1);
    font-family: var(--font-heading);
    font-size: inherit;
    font-weight: var(--font-weight-semibold);
    line-height: inherit;
    color: currentColor;
  }
.callout > :last-child {
    margin-bottom: 0;
  }
/* ── Varianten ── */
.callout-note {
    border-color: var(--border);
    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    color: var(--foreground);
  }
.callout-note > svg {
    color: var(--muted-foreground);
  }
.callout-primary {
    border-color: var(--info-200);
    background-color: var(--accent);
    color: var(--accent-foreground);
  }
.callout-primary > svg {
    color: var(--primary);
  }
.callout-info {
    border-color: var(--info-200);
    background-color: color-mix(in oklab, var(--info-100) 60%, transparent);
    color: var(--info-800);
  }
.callout-info > svg {
    color: var(--info-700);
  }
.callout-tip,
  .callout-success {
    border-color: var(--success-200);
    background-color: color-mix(in oklab, var(--success-100) 60%, transparent);
    color: var(--success-800);
  }
.callout-tip > svg,
  .callout-success > svg {
    color: var(--success-700);
  }
.callout-warning {
    border-color: var(--warning-200);
    background-color: color-mix(in oklab, var(--warning-100) 60%, transparent);
    color: var(--warning-800);
  }
.callout-warning > svg {
    color: var(--warning-700);
  }
.callout-caution,
  .callout-danger {
    border-color: var(--danger-200);
    background-color: color-mix(in oklab, var(--danger-100) 60%, transparent);
    color: var(--danger-800);
  }
.callout-caution > svg,
  .callout-danger > svg {
    color: var(--danger-700);
  }
/* ═══════════════════════════════════════════════════════════════════
   CODE-BLOCK  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Darstellungs-Schicht für Codeblöcke in den Docs. Die eigentliche
   Syntax-Hervorhebung übernimmt `rehype-pretty-code` (Shiki) zur
   Build-Zeit — deren `[data-rehype-pretty-code-*]`-Selektoren liegen in
   styles.css und werden hier NICHT dupliziert. Diese Datei stylt nur
   den Rahmen: Figure-Container + Head-Bar (Titel/Sprache + Copy-Button)
   + scrollbaren `<pre>`-Bereich.

   Webflow-Pattern: jeder Codeblock trägt IMMER eine Head-Bar mit Titel
   (Fence-Meta `title="…"`) oder, als Fallback, dem Sprach-Tag. Der
   Copy-Button sitzt rechts in der Head-Bar.

   Öffentliche API (code-block.tsx rendert genau diese Klassen; Rails-
   Haml verwendet sie wörtlich):

     .code-block          <figure>-Container (+ .is-grouped innerhalb
                           von <CodeTabs> — kein eigener vertikaler
                           Außenabstand dort, der Tab-Wrapper übernimmt
                           den Abstand)
     .code-block-header   Head-Bar — Label links, Copy-Button rechts
     .code-block-title    Label-Span, wenn ein expliziter Titel vorliegt
                           (Fence-Meta `title="…"`)
     .code-block-lang     Label-Span, wenn kein Titel vorliegt — Fallback
                           auf Sprache (`data-language`) bzw. „code"
     .code-block-copy     Copy-Button (+ .is-copied für 2s nach Klick —
                           färbt das Check-Icon ein)
     .code-block-pre      scrollbarer `<pre>`-Bereich (Copy sitzt in der
                           Head-Bar, nicht mehr im `<pre>`)
═══════════════════════════════════════════════════════════════════ */
/* Codeblöcke sind IMMER dunkel — auch im Light Mode. Code liest sich auf
     dunklem Grund besser, und Entwickler erwarten es so. Deshalb kommen die
     Farben hier NICHT aus den Theme-Rollen (--background/--foreground),
     sondern direkt aus der Marken-Palette: die ist in beiden Modi gleich. */
.code-block {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--lima-blue-900);
    background-color: var(--lima-blue-1000);
    color: var(--lima-neutral-100);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    /* line-height + text-align pinnen: Host-Seiten (Rails-Shell vs.
       Tailwind-Base) vererben sonst unterschiedliche Werte —
       Parity-Audit-Befund (wie docs-toc.css / alert.css). */
    line-height: var(--line-height-normal);
    text-align: left;
    margin: 1.5rem 0;                        /* my-6 — Default außerhalb <CodeTabs> */
  }
/* Innerhalb <CodeTabs>: der Tab-Wrapper trägt bereits den Außenabstand,
     jeder einzelne Codeblock bleibt randlos. */
.code-block.is-grouped {
    margin: 0;
  }
.code-block-header {
    display: flex;
    height: 2.25rem;                         /* h-9 */
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;                            /* gap-3 */
    border-bottom: 1px solid var(--lima-blue-900);
    background-color: var(--lima-blue-900);
    padding: 0 0.75rem;                      /* px-3 */
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);                       /* text-xs Default-Zeilenhöhe pinnen */
    color: var(--lima-neutral-300);
  }
/* Label-Span — truncate. Titel und Sprach-Fallback sind visuell
     identisch, tragen aber getrennte Klassen als semantischer Hook
     (Rails-Haml kann Titel/Sprache ggf. separat markieren). */
.code-block-title,
  .code-block-lang {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/* Icon vor dem Sprachnamen — macht die Kopfzeile auf einen Blick als
     Codeblock lesbar, auch wenn der Sprachname unbekannt ist. */
.code-block-lang-icon {
    width: var(--size-icon-xs);
    height: var(--size-icon-xs);
    flex-shrink: 0;
  }
.code-block-copy {
    /* UA-Button-Reset (Rails hat kein Preflight) */
    font: inherit;
    color: inherit;
    background-color: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    width: 1.5rem;                           /* size-6 */
    height: 1.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--lima-neutral-300);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.code-block-copy:hover {
    background-color: var(--lima-blue-800);
    color: var(--lima-neutral-50);
  }
.code-block-copy:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); /* ring-3 ring-ring/40 */
  }
.code-block-copy svg {
    width: var(--size-icon-xs);
    height: var(--size-icon-xs);
  }
/* 2s-Bestätigung nach Klick — Check-Icon in Erfolgsfarbe (s. CodeBlockHeader) */
.code-block-copy.is-copied svg {
    /* Auf dunklem Grund braucht die Bestätigung einen hellen Grünton —
       success-700 ist für die helle Fläche gedacht und ginge hier unter. */
    color: var(--lima-green-300);
  }
/* Rails rendert beide Icons statisch ins Markup und blendet um; React
     tauscht sie zur Laufzeit. Beide Wege landen auf derselben Optik — ohne
     diese Regeln lägen in Rails zwei Icons übereinander. */
.code-block-copy-done {
    display: none;
  }
.code-block-copy.is-copied .code-block-copy-idle {
    display: none;
  }
.code-block-copy.is-copied .code-block-copy-done {
    display: inline-flex;
  }
.code-block-pre {
    /* Preflight-Ersatz: pre erbt sonst UA-monospace statt Token-Stack */
    font-family: var(--font-mono);
    overflow-x: auto;
    padding: 1rem 0;                         /* py-4 */
    line-height: var(--line-height-relaxed);                      /* leading-relaxed */
  }
/* Ohne Syntax-Hervorhebung tragen die Zeilen keinen eigenen Innenabstand:
     rehype-pretty-code setzt ihn in React je Zeile (`span[data-line]`), damit
     markierte Zeilen über die volle Breite hinterlegt werden können. Wo dieser
     Aufbau fehlt — etwa bei Rails' Redcarpet-Ausgabe — bringt `.is-plain` den
     Abstand am Block selbst mit. */
.code-block-pre.is-plain {
    padding-inline: 1rem;
  }
/* Preflight-Ersatz: Umgebungen mit eigener Inline-Code-Optik (Rails-Docs
     stylen `code` mit Fläche, Rahmen und Radius) würden diese auch INNERHALB
     des Blocks anwenden — dann liegt ein Kästchen im Kasten. */
.code-block-pre code {
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    font-size: inherit;
  }
/* ── Syntax-Hervorhebung ────────────────────────────────────────────
     Rails hebt mit CodeRay hervor (`css: :class`), React mit Shiki. Beide
     landen auf derselben dunklen Fläche, deshalb sind die Rollen hier
     einmal definiert.

     Die Zuordnung folgt der Erwartung aus VS Code — Schlüsselwörter blau,
     Zeichenketten lachs, Kommentare grün — die Werte kommen aber
     ausschließlich aus der Marken-Palette. Sie sind bewusst
     theme-unabhängig: der Block ist in beiden Modi dunkel. */
.code-block-pre .keyword,
  .code-block-pre .reserved,
  .code-block-pre .modifier {
    color: var(--lima-blue-300);
  }
.code-block-pre .string,
  .code-block-pre .string .content,
  .code-block-pre .regexp,
  .code-block-pre .char {
    color: var(--danger-300);
  }
.code-block-pre .comment,
  .code-block-pre .doctype {
    color: var(--lima-green-300);
  }
.code-block-pre .integer,
  .code-block-pre .float,
  .code-block-pre .octal,
  .code-block-pre .hex,
  .code-block-pre .symbol {
    color: var(--warning-300);
  }
.code-block-pre .constant,
  .code-block-pre .class,
  .code-block-pre .predefined-constant,
  .code-block-pre .predefined-type,
  .code-block-pre .tag {
    color: var(--lima-blue-200);
  }
.code-block-pre .function,
  .code-block-pre .method,
  .code-block-pre .attribute-name,
  .code-block-pre .key {
    color: var(--info-300);
  }
.code-block-pre .instance-variable,
  .code-block-pre .global-variable,
  .code-block-pre .variable {
    color: var(--lima-blue-400);
  }
.code-block-pre .delimiter,
  .code-block-pre .operator,
  .code-block-pre .punct {
    color: var(--lima-neutral-300);
  }
.code-block-pre .error {
    color: var(--danger-400);
  }
/* CodeRay umschließt seine Ausgabe zusätzlich; der Wrapper darf keine
     eigene Fläche mitbringen. */
.code-block-pre .CodeRay,
  .code-block-pre .CodeRay .code {
    background: transparent;
    color: inherit;
  }
/* ═══════════════════════════════════════════════════════════════════
   CODE TABS  —  Umschaltbare Gruppe mehrerer Codeblöcke
   ───────────────────────────────────────────────────────────────────
   Die Tab-Leiste liegt oberhalb der Blöcke; ein Wechsel tauscht den
   ganzen Block. Zustand kommt über `aria-selected`, nicht über eine
   zusätzliche Klasse — die ARIA-Angabe ist ohnehin Pflicht, eine zweite
   Quelle für denselben Zustand wäre eine Fehlerquelle.

   Verwandt mit `.nav-tabs` aus nav.css. Bewusst eigene Klassen: die
   Docs-Tabs nutzen `--accent-foreground` als Aktivfarbe, die
   Bootstrap-Tabs `--primary`. Zusammenlegen wäre eine Gestaltungs-
   entscheidung, keine Aufräumarbeit.
═══════════════════════════════════════════════════════════════════ */
.code-tabs {
    margin-block: var(--spacing-6);
  }
.code-tabs-list {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
  }
.code-tabs-tab {
    flex-shrink: 0;
    margin-bottom: -1px;
    padding: var(--spacing-2) var(--spacing-4);
    border: 0;
    border-bottom: 2px solid transparent;
    background-color: transparent;
    color: var(--muted-foreground);
    font-family: inherit;
    font-size: var(--font-size-sm);
    /* Zeilenhoehe explizit: sie bestimmt die Hoehe der Tab-Leiste. Ohne sie
       erbt der Button den Wert des Umfelds und die Leiste springt je nach
       Kontext. */
    line-height: var(--line-height-normal);
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    transition-property: color, background-color, border-color;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.code-tabs-tab:hover {
    color: var(--foreground);
  }
.code-tabs-tab:focus-visible {
    background-color: color-mix(in oklab, var(--muted) 40%, transparent);
  }
.code-tabs-tab[aria-selected="true"] {
    border-bottom-color: var(--accent-foreground);
    color: var(--accent-foreground);
    font-weight: var(--font-weight-medium);
  }
.code-tabs-panel {
    margin-top: var(--spacing-3);
  }
/* ═══════════════════════════════════════════════════════════════════
   DOCS APP SHELL — gemeinsame Klassen für React und Rails
   ───────────────────────────────────────────────────────────────────
   Diese Klassen ersetzen die Tailwind-Komposition der DocsAppShell.
   React und Rails verwenden dieselbe CSS-API; Bootstrap-kompatible
   Controls bleiben `.btn` + Variante/Größe.
═══════════════════════════════════════════════════════════════════ */
.docs-app-shell {
    /*
     * Rails hat keine MetaNav und damit nur den 3.5rem hohen Header im
     * Sticky-Stack. Storybook ergänzt darunter die 2.5rem hohe MetaNav.
     * Die Variable muss am Shell-Root definiert sein: das frühere
     * `:root:has([data-slot="docs-scope"])` existiert im Rails-DOM nicht.
     */
    --docs-stack-h: 3.5rem;

    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background-color: var(--background);
  }
.docs-app-shell:has(> .meta-nav) {
    --docs-stack-h: 6rem;
  }
.docs-header {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--border);
    background-color: var(--background);
  }
.docs-header-inner {
    display: flex;
    width: 100%;
    height: 3.5rem;
    max-width: 1600px;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
  }
.docs-header-brand {
    display: flex;
    align-items: center;
    justify-self: flex-start;
    gap: var(--spacing-3);
  }
.docs-brand-link {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    border-radius: var(--radius-sm);
    color: var(--logo);
    text-decoration: none;
    outline: none;
  }
.docs-brand-link:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
.docs-brand-logo {
    display: block;
    width: auto;
    height: 1.75rem;
    max-width: none;
    flex-shrink: 0;
    color: var(--logo);
  }
.docs-brand-logo > g:first-of-type {
    fill: currentColor;
  }
.docs-brand-logo > g:last-of-type {
    fill: var(--muted-foreground);
  }
.docs-header-search {
    display: none;
    width: calc(22.870125rem + 0.068333vw + 0.015625px);
    max-width: var(--container-md);
    min-width: 0;
    align-items: center;
    justify-self: center;
    gap: var(--spacing-1_5);
    transition: width var(--duration-fast) var(--ease-out);
  }
.docs-header-search:has(.docs-header-search-control:focus-within) {
    /* Ab lg bleibt neben Logo und Aktionen mindestens 20rem pro Seite.
       Auf breiteren Screens wächst die Gruppe um rund 7rem; das darin
       liegende Suchfeld und sein Ergebnis-Panel wachsen gemeinsam. */
    width: min(30rem, calc(100vw - 40rem));
  }
.docs-header-search-control {
    min-width: 0;
    flex: 1 1 0%;
  }
.docs-header-ask {
    flex-shrink: 0;
  }
.docs-header-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-self: flex-end;
    gap: var(--spacing-2);
    margin-left: auto;
  }
/* Mobil bleibt in der Kopfzeile nur, was dort hingehört: Umschalter und
     Menü. „Ressourcen" und der Aufruf zum Handeln stecken im Menü — sonst
     läuft die Zeile über die Fensterbreite hinaus und die ganze Seite
     scrollt horizontal. */
.docs-header-resource,
  .docs-header-cta {
    display: none;
  }
.docs-header-theme [data-theme-icon="sun"] {
    display: none;
  }
.dark .docs-header-theme [data-theme-icon="moon"] {
    display: none;
  }
.dark .docs-header-theme [data-theme-icon="sun"] {
    display: block;
  }
.docs-header-menu {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--foreground);
    cursor: pointer;
    outline: none;
    transition: color var(--duration-fast) var(--ease-out),
      background-color var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out);
  }
.docs-header-menu:hover {
    background-color: var(--muted);
  }
.docs-header-menu:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
.docs-header-menu svg {
    width: var(--size-icon-md);
    height: var(--size-icon-md);
  }
.docs-shell-body {
    display: flex;
    width: 100%;
    max-width: 1600px;
    flex: 1 1 0%;
    gap: 0;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
  }
.docs-shell-sidebar {
    display: none;
    width: 18rem;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
  }
.docs-shell-sidebar-scroll {
    position: sticky;
    top: var(--docs-stack-h, 3.5rem);
    height: calc(100svh - var(--docs-stack-h, 3.5rem));
    overflow-y: auto;
    padding: var(--spacing-8) var(--spacing-4) var(--spacing-8) var(--spacing-3);
  }
.docs-shell-main {
    display: flex;
    min-width: 0;
    flex: 1 1 0%;
    /* Der Abstand zum TOC muss dem Abstand zur Sidebar entsprechen, sonst
       sitzt die Textspalte sichtbar außermittig: links Shell-Abstand plus
       Innenabstand, rechts nur dieser Zwischenraum. */
    gap: var(--spacing-16);
    /* Feedback 25.08.: mehr Luft links und rechts um den Fließtext.
       Auf schmalen Geräten aber KEINE — dort addierte sich dieser
       Innenabstand auf den der Hülle, und der Fließtext stand 38 px vom
       Rand, während Kopf- und Fußbereich bei 14 px begannen. Die Kante
       ist jetzt über alle drei Bereiche dieselbe; ab der ersten Stufe,
       wo Platz da ist, kommt die Luft zurück. */
    padding-block: var(--spacing-8);
    padding-inline: 0;
  }
@media (min-width: 768px) {
    .docs-shell-main {
      padding-inline: var(--spacing-8);
    }
  }
.docs-shell-article {
    display: block;
    width: auto;
    max-width: none;
    min-width: 0;
    flex: 1 1 0%;
    margin: 0;
  }
.docs-shell-toc {
    position: sticky;
    top: var(--docs-stack-h, 3.5rem);
    display: none;
    /* Die Randspalte trägt mehr als das Inhaltsverzeichnis — darunter
       hängt der Kasten mit verwandten Artikeln. Ohne Abstand las sich
       beides als ein Block. Die Regel dafür lag im Seiten-Stylesheet
       hinter einem `:not(.docs-shell-toc)` und griff auf der Artikelseite
       deshalb nie (Notion-Feedback Runde 6). */
    flex-direction: column;
    gap: var(--spacing-12);
    width: 14rem;
    max-height: calc(100svh - var(--docs-stack-h, 3.5rem));
    flex-shrink: 0;
    align-self: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--spacing-2) 0;
  }
/* ── Randspalte, die nicht verschwinden darf ──────────────────────────
     Das Inhaltsverzeichnis eines Artikels ist unterhalb von xl entbehrlich
     — dort tritt das schwebende Dock an seine Stelle. Auf der Suchseite
     trägt dieselbe Spalte aber den Hinweis auf die KI-Hilfe, und der ist
     genau dann am nützlichsten, wenn die Suche nichts ergeben hat. Er darf
     nicht am Breakpoint verschwinden (Notion-Feedback Runde 10).

     Unterhalb von xl wandert die Spalte deshalb unter den Inhalt, statt
     ausgeblendet zu werden. In der Breite begrenzt: ein Kasten über die
     volle Spaltenbreite liest sich als Abschnitt, nicht als Randnotiz. */
.docs-shell-main:has(> .docs-shell-toc.is-persistent) {
    flex-direction: column;
  }
.docs-shell-toc.is-persistent {
    display: flex;
    position: static;
    width: 100%;
    max-width: 30rem;
    max-height: none;
    overflow: visible;
  }
@media (min-width: 1200px) {
    .docs-shell-main:has(> .docs-shell-toc.is-persistent) {
      flex-direction: row;
    }

    .docs-shell-toc.is-persistent {
      position: sticky;
      width: 14rem;
      max-width: none;
      max-height: calc(100svh - var(--docs-stack-h, 3.5rem));
      overflow-y: auto;
    }
  }
@media (min-width: 992px) {
    .docs-header {
      border-bottom-width: 0;
    }

    /*
     * Eine tatsächlich komponierte MetaNav zeichnet ihre eigene Kante.
     * Rails rendert diese Subnav noch nicht; dort ergänzt ein absoluter
     * 1px-Trenner dieselbe Optik, ohne den 56px-Header auf 57px zu erhöhen.
     */
    .docs-app-shell:not(:has(> .meta-nav)) .docs-header::after {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 1px;
      background-color: var(--border);
      content: "";
    }

    .docs-header-inner {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      padding-right: var(--spacing-8);
      padding-left: var(--spacing-8);
    }

    .docs-header-brand {
      padding-left: var(--spacing-3);
    }

    .docs-brand-logo {
      height: var(--spacing-6);
    }

    .docs-header-search {
      display: flex;
    }

    .docs-header-menu {
      display: none;
    }

    .docs-header-resource,
    .docs-header-cta {
      display: inline-flex;
    }

    .docs-shell-body {
      gap: var(--spacing-8);
      padding-right: var(--spacing-8);
      padding-left: var(--spacing-8);
    }

    .docs-shell-sidebar {
      display: block;
    }

    .docs-shell-sidebar-scroll {
      padding-top: var(--spacing-10);
    }

    .docs-shell-main {
      padding-top: var(--spacing-10);
      padding-bottom: var(--spacing-10);
    }
  }
@media (min-width: 1200px) {
    .docs-shell-toc {
      /* flex, nicht block — die Spalte staffelt Inhaltsverzeichnis und
         Kasten mit dem `gap` aus der Basis-Regel. */
      display: flex;
    }
  }
/* ═══ Mobiles Menü ═══════════════════════════════════════════════
     Der Drawer, den der Menü-Knopf der Topbar öffnet. Auf Mobil
     vollflächig, ab sm ein eingerückter Drawer. Zwei Ansichten im selben
     Panel: Navigation und Suche. */
.docs-menu {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
.docs-menu[data-side="right"] {
    width: 100%;
  }
@media (min-width: 576px) {
    .docs-menu[data-side="right"] {
      width: 24rem;
      max-width: 88vw;
    }
  }
.docs-menu-head {
    display: flex;
    height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--spacing-4);
    border-bottom: 1px solid var(--border);
  }
.docs-menu-brand {
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    outline: none;
  }
.docs-menu-brand:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
.docs-menu-logo {
    width: auto;
    height: 1.5rem;
    color: var(--primary);
  }
.dark .docs-menu-logo {
    color: var(--foreground);
  }
/* Quadratischer Icon-Knopf im Menü (Schließen, Zurück). */
.docs-menu-icon-button {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--foreground);
    cursor: pointer;
    outline: none;
    transition: background-color var(--duration-micro) var(--ease-out);
  }
.docs-menu-icon-button:hover {
    background-color: var(--muted);
  }
.docs-menu-icon-button:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
.docs-menu-icon-button svg {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
  }
.docs-menu-view {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
  }
/* Der Innenabstand sitzt an den Blöcken, NICHT am Scroll-Container:
     `.docs-menu-section` bringt ihn schon mit, und beides zusammen schob
     die Navigation 14 px nach rechts aus der Flucht mit dem Logo
     (Notion-Feedback Runde 9). */
.docs-menu-view-scroll {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding-block: var(--spacing-2) var(--spacing-6);
  }
/* ── Such-Ansicht des Menüs ──
     `.docs-menu-searchfield` ist im Original ein Element einer ZEILE und
     trägt deshalb `flex: 1`. In der Spalte der Such-Ansicht wuchs es damit
     auf die volle Höhe. Hier darf es nur so hoch sein wie es ist; der Platz
     gehört der Trefferliste. */
.docs-menu-view[data-view="search"] {
    min-height: 0;
    padding-inline: var(--spacing-4);
    padding-bottom: var(--spacing-2);
    gap: var(--spacing-3);
  }
.docs-menu-view[data-view="search"] .docs-menu-searchfield {
    flex: 0 0 auto;
  }
.docs-menu-view[data-view="search"] .docs-menu-search-head {
    padding: var(--spacing-2) 0 0;
  }
.docs-menu-view[data-view="search"] .docs-menu-results {
    padding-inline: 0;
  }
/* Während gesucht wird, tritt alles unterhalb der Trefferliste zurück:
     Sekundärliste UND Fußzeile.

     Der Suchknopf ist dort ohnehin überflüssig — das Feld steht oben. Und
     „Ask AI" saß bis Runde 9 als einziger Knopf am unteren Bildschirmrand
     und las sich damit wie „absenden", obwohl er etwas ganz anderes tut
     (Notion-Feedback Runde 10). Die Fläche gehört in dieser Ansicht den
     Treffern. Zurück führen der Pfeil oben und Escape.

     Beim Öffnen des Menüs stehen Suche und Ask AI unverändert nebeneinander. */
.docs-menu[data-view="search"] .docs-menu-bottom,
  .docs-menu[data-view="search"] .docs-menu-foot {
    display: none;
  }
/* Die Ansicht wechselt zwischen Navigation und Suche — beide liegen im
     Dokument, sichtbar ist immer genau eine. So braucht die Suche keinen
     Platz im Layout des Menüs. */
.docs-menu[data-view="search"] .docs-menu-view[data-view="nav"],
  .docs-menu[data-view="nav"] .docs-menu-view[data-view="search"] {
    display: none;
  }
/* ── Abschnitte im Menü ── */
.docs-menu-section + .docs-menu-section {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--border);
  }
.docs-menu-section-label {
    margin: 0 0 var(--spacing-2);
    font-family: var(--font-heading);
    font-size: var(--text-ui-label-size);
    font-weight: var(--text-ui-label-weight);
    line-height: var(--text-ui-label-line);
    color: var(--muted-foreground);
  }
/* ── Sekundärliste am unteren Menürand ──────────────────────────────
     „Jetzt loslegen", „lima-city besuchen" und „Ressourcen". Nebenwege,
     keine Handlungsaufforderungen — deshalb linksbündige Zeilen ohne
     Knopfoptik.

     Bis Runde 9 trug „Jetzt loslegen" hier eine getönte Fläche. Das ist
     genau die Auszeichnung, die in dieser Navigation den AKTIVEN Punkt
     markiert: die Zeile las sich, als stünde man gerade dort
     (Notion-Feedback Runde 10).

     Der Block ist verankert, er scrollt nicht mit der Navigation — diese
     Wege sind immer erreichbar, egal wie weit man in der Gliederung nach
     unten gewandert ist. */
.docs-menu-foot {
    flex-shrink: 0;
    /* Abstand nach oben zur Navigation, ohne Trennlinie: der Block gehört
       noch zum Menü, er ist nur nachrangig. Die Linie kommt erst unter
       der Fußzeile. */
    padding: var(--spacing-3) var(--spacing-4);
  }
.docs-menu-links {
    margin: 0;
    padding: 0;
    list-style: none;
  }
.docs-menu-link {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--spacing-2_5);
    /* UA-Button-Reset — der Ressourcen-Auslöser ist ein <button>. */
    border: 0;
    background-color: transparent;
    text-align: left;
    cursor: pointer;
    /* Innenabstand und Gegen-Versatz wie bei den Navigationspunkten: die
       Fläche liegt hinter dem Text, die TEXTKANTE steht in der Flucht mit
       dem Logo. */
    padding: var(--spacing-2) var(--spacing-3);
    margin-inline: calc(var(--spacing-3) * -1);
    border-radius: var(--radius-lg);
    color: color-mix(in oklab, var(--foreground) 80%, transparent);
    font-family: inherit;
    font-size: var(--text-ui-size);
    font-weight: var(--text-ui-weight);
    line-height: var(--text-ui-line);
    text-decoration: none;
    outline: none;
    transition-property: color, background-color;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.docs-menu-link:hover,
  .docs-menu-link:focus-visible {
    background-color: var(--muted);
    color: var(--foreground);
    text-decoration: none;
  }
.docs-menu-link:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
.docs-menu-link-icon {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    flex-shrink: 0;
    color: var(--muted-foreground);
    transition: color var(--duration-fast) var(--ease-out);
  }
.docs-menu-link:hover .docs-menu-link-icon,
  .docs-menu-link:focus-visible .docs-menu-link-icon {
    color: var(--accent-foreground);
  }
/* Die Marken-Signatur ist breiter als hoch. Sie bekommt dieselbe
     Zeilenhöhe wie die Icons daneben, aber ihre eigene Breite — sonst
     würde sie gestaucht. */
.docs-menu-link-mark {
    width: auto;
    height: var(--size-icon-sm);
  }
/* Der Name füllt die Zeile; der Ressourcen-Auslöser schiebt seinen
     Chevron dadurch an die rechte Kante. */
.docs-menu-link > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.docs-menu-resource {
    /* Der Auslöser sitzt in derselben Flucht wie die Zeilen darüber. */
    display: block;
  }
.docs-menu-search-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-1);
  }
.docs-menu-search-title {
    overflow: hidden;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/* Die Trefferliste selbst liegt in docs-search-overlay.css
     (.docs-search-list / -result / -title / -path / -empty). Hier standen
     bis Runde 9 eigene Klassen für dieselbe Sache — zwei Definitionen für
     eine Liste von Suchtreffern. Geblieben ist nur die Hülle: sie regelt,
     dass die Liste im Menü den Rest der Fläche füllt und scrollt. */
.docs-menu-results {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-2);
  }
.docs-menu-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-4) 0;
  }
.docs-menu-section {
    padding: var(--spacing-4) var(--spacing-4) 0;
  }
.docs-menu-section-trigger {
    width: 100%;
    justify-content: space-between;
    font-weight: var(--font-weight-medium);
  }
.docs-menu-section-caret {
    opacity: 0.6;
  }
.docs-menu-nav {
    padding: var(--spacing-6) var(--spacing-4) var(--spacing-3);
  }
/* Fußzeile des Menüs — Suche links, Ask AI rechts. */
.docs-menu-bottom {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4) var(--spacing-6);
    border-top: 1px solid var(--border);
  }
.docs-menu-searchfield {
    display: flex;
    height: 2.25rem;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: var(--spacing-2);
    padding-inline: var(--spacing-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    color: var(--muted-foreground);
    font-family: inherit;
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
    outline: none;
    transition-property: color, background-color;
    transition-duration: var(--duration-micro);
    transition-timing-function: var(--ease-out);
  }
button.docs-menu-searchfield:hover {
    background-color: var(--muted);
    color: var(--foreground);
  }
.docs-menu-searchfield:focus-within,
  .docs-menu-searchfield:focus-visible {
    background-color: var(--background);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
.docs-menu-searchfield > svg {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    flex-shrink: 0;
  }
.docs-menu-searchfield > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.docs-menu-searchfield-input {
    min-width: 0;
    flex: 1;
    border: 0;
    background-color: transparent;
    color: var(--foreground);
    font-family: inherit;
    font-size: var(--font-size-sm);
    outline: none;
  }
.docs-menu-searchfield-input::-moz-placeholder {
    color: var(--muted-foreground);
  }
.docs-menu-searchfield-input::placeholder {
    color: var(--muted-foreground);
  }
/* Ressourcen-Menü der Topbar. */
.docs-header-resource-menu {
    width: 14rem;
  }
/* Back-to-Top rueckt ueber das floatende TOC-Dock, solange dieses sichtbar
     ist. Dock: 48 px hoch, 1.25 rem vom Rand — plus 0.5 rem Abstand.
     Ab xl verschwindet das Dock, der Knopf faellt auf seine Normalposition
     aus back-to-top.css zurueck. */
.back-to-top-above-dock {
    bottom: 4.75rem;
  }
@media (min-width: 1200px) {
    .back-to-top-above-dock {
      bottom: 1rem;
    }
  }
/* DocsAppFooter — dieselbe kompakte Legal-Zeile für React und Rails. */
.docs-footer {
    width: 100%;
    margin: 0;
    border-top: 1px solid var(--border);
    background-color: var(--background);
  }
.docs-footer-inner {
    display: flex;
    width: 100%;
    max-width: 1600px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    -moz-column-gap: var(--spacing-6);
         column-gap: var(--spacing-6);
    row-gap: var(--spacing-2);
    margin: 0 auto;
    padding: 1.25rem var(--spacing-4);
    color: var(--muted-foreground);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
  }
.docs-footer-copyright {
    margin: 0;
  }
.docs-footer-nav {
    display: block;
  }
.docs-footer-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }
.docs-footer-link {
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
    outline: none;
    transition: color var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out);
  }
.docs-footer-link:hover,
  .docs-footer-link:focus-visible {
    color: var(--foreground);
    text-decoration: none;
  }
.docs-footer-link:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
@media (min-width: 992px) {
    .docs-footer-inner {
      padding-right: var(--spacing-8);
      padding-left: 2.75rem;
    }
  }
/* ═══════════════════════════════════════════════════════════════════
   DOCS-ARTICLE-CARD  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Ein verlinkter Artikel als Karte: Zeichen, Titel, optional ein
   Anrisstext. Vorbild ist das Karten-Raster auf developers.webflow.com
   (Notion-Feedback Runde 6).

   Warum überhaupt eine Karte: auf der Bereichsseite standen die
   verlinkten Artikel als nackte Textzeilen in zwei Spalten. Sie waren
   weder als anklickbar zu erkennen noch voneinander abgegrenzt — zwei
   umbrechende Titel nebeneinander lasen sich als ein Absatz.

   Öffentliche API (docs-article-card.tsx rendert genau diese Klassen,
   Rails-Haml verwendet sie wörtlich):

     .docs-card-grid            Raster, bricht selbständig um
     .docs-article-card         die Karte (ein <a>)
     .docs-article-card-icon    gerahmtes Zeichen links
     .docs-article-card-body    Titel + Anrisstext
     .docs-article-card-title   Titel
     .docs-article-card-text    Anrisstext (optional)
═══════════════════════════════════════════════════════════════════ */
.docs-card-grid {
    display: grid;
    /* Bricht nach Platz um, nicht nach fester Spaltenzahl — dieselbe
       Regel wie beim Themen-Raster der Einstiegsseite. */
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--spacing-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
.docs-article-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    height: 100%;
    padding: var(--spacing-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--background);
    color: inherit;
    text-decoration: none;
    transition-property: border-color, box-shadow, transform;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.docs-article-card:hover,
  .docs-article-card:focus-visible {
    border-color: var(--ring);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transform: translateY(-1px);
  }
/* Gerahmtes Zeichen wie bei Webflow: der Rahmen trennt es vom Titel und
     gibt der Karte einen festen Anfang, auch wenn der Titel umbricht. */
.docs-article-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--size-icon-xl);
    height: var(--size-icon-xl);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--background);
    color: var(--accent-foreground);
    transition-property: border-color, color;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.docs-article-card-icon svg {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
  }
.docs-article-card:hover .docs-article-card-icon,
  .docs-article-card:focus-visible .docs-article-card-icon {
    border-color: var(--ring);
    color: var(--accent-foreground);
  }
.docs-article-card-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--spacing-1);
  }
.docs-article-card-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-snug);
    color: var(--foreground);
  }
.docs-article-card:hover .docs-article-card-title,
  .docs-article-card:focus-visible .docs-article-card-title {
    color: var(--accent-foreground);
  }
/* Der Anrisstext ist eine Zugabe, kein Titel — er darf gekürzt werden,
     damit alle Karten einer Reihe gleich hoch bleiben. */
.docs-article-card-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--muted-foreground);
  }
/* ── Als Trefferliste ────────────────────────────────────────────────
     Suchtreffer stehen untereinander, nicht im Raster: sie sind eine
     Rangfolge. Ein Raster würde behaupten, sie seien gleichwertig, und
     die Lesereihenfolge über Zeilen brechen (Notion-Feedback Runde 10). */
.docs-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
/* In der Liste darf der Anriss mehr zeigen — es gibt keine Nachbarkarte,
     zu der die Höhe passen müsste. */
.docs-card-list .docs-article-card-text {
    -webkit-line-clamp: 3;
  }
/* Woher der Treffer stammt. Steht ÜBER dem Titel: erst der Ort, dann
     die Sache — so liest man eine Trefferliste. */
.docs-article-card-path {
    display: block;
    overflow: hidden;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--muted-foreground);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/* Die Fundstelle im Anriss. Getönte Fläche statt Fettung: der Anriss ist
     Fließtext, und ein fetter Einschub darin liest sich als Überschrift.
     Die Rolle `--accent` kippt mit dem Modus — die Marken-Palette nicht. */
.docs-article-card-text mark {
    padding: 0 0.125em;
    border-radius: var(--radius-sm);
    background-color: var(--accent);
    color: var(--accent-foreground);
    font-weight: var(--font-weight-medium);
  }
/* ═══════════════════════════════════════════════════════════════════
   DOCS-DROPDOWN  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Das Klappmenü in der Kopfzeile („Ressourcen"): ein Auslöser, darunter
   eine einspaltige Liste aus Zeichen und Beschriftung. Vorbild ist das
   Resources-Menü auf developers.webflow.com (Notion-Feedback Runde 6).

   Der Name `.docs-menu` war bereits vergeben — er gehört dem mobilen
   Drawer in docs-app-shell.css. Zwei Komponenten unter einem Namen hätten
   sich gegenseitig überschrieben.

   Warum nicht `.dropdown` aus dem Bootstrap-Vertrag: dessen Zustand wird
   von Bootstrap-JavaScript gesetzt, das die Hilfe-Oberfläche nicht lädt.
   Die Optik hier hängt am Auslöser (`aria-expanded`) — eine Quelle, die
   ohnehin für die Zugänglichkeit gebraucht wird. Die Bootstrap-Klassen
   bleiben davon unberührt und weiterhin nutzbar.

   Öffentliche API (docs-dropdown.tsx rendert genau diese Klassen, Rails-Haml
   verwendet sie wörtlich):

     .docs-dropdown           Hülle (position: relative)
     .docs-dropdown-trigger   Auslöser — trägt aria-expanded
     .docs-dropdown-caret     Zeichen im Auslöser, dreht beim Öffnen
     .docs-dropdown-panel     die Liste
     .docs-dropdown-item      ein Eintrag
     .docs-dropdown-icon      Zeichen im Eintrag
═══════════════════════════════════════════════════════════════════ */
.docs-dropdown {
    position: relative;
  }
.docs-dropdown-caret {
    width: var(--size-icon-xs);
    height: var(--size-icon-xs);
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-out);
  }
.docs-dropdown-trigger[aria-expanded="true"] .docs-dropdown-caret {
    transform: rotate(180deg);
  }
.docs-dropdown-panel {
    position: absolute;
    top: calc(100% + var(--spacing-1));
    right: 0;
    z-index: 1000;
    display: none;
    min-width: 14rem;
    margin: 0;
    padding: var(--spacing-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--popover);
    box-shadow: var(--shadow-md);
    list-style: none;
  }
.docs-dropdown-trigger[aria-expanded="true"] + .docs-dropdown-panel {
    display: block;
  }
/* ── Nach oben öffnend ──
     Am unteren Menürand ist unterhalb des Auslösers kein Platz; der Raum
     liegt darüber (Notion-Feedback Runde 10). Das Panel nimmt dort die
     volle Breite seines Blocks statt einer Mindestbreite — es steht in
     einer Spalte, nicht in einer Werkzeugleiste. */
.docs-dropdown.is-up > .docs-dropdown-panel {
    top: auto;
    bottom: calc(100% + var(--spacing-1));
    right: 0;
    left: 0;
    /* Sieben Einträge passen auf ein Telefon nicht immer über den
       Auslöser. Was nicht passt, scrollt im Panel — nicht in der Seite. */
    max-height: min(20rem, 50svh);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
.docs-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2_5);
    padding: var(--spacing-2) var(--spacing-2_5);
    border-radius: var(--radius-md);
    font-size: var(--text-ui-size);
    font-weight: var(--text-ui-weight);
    line-height: var(--text-ui-line);
    color: var(--popover-foreground);
    text-decoration: none;
    white-space: nowrap;
    transition-property: color, background-color;
    transition-duration: var(--duration-micro);
    transition-timing-function: var(--ease-out);
  }
.docs-dropdown-item:hover,
  .docs-dropdown-item:focus-visible {
    background-color: var(--muted);
    color: var(--accent-foreground);
    text-decoration: none;
  }
.docs-dropdown-icon {
    flex-shrink: 0;
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    color: var(--muted-foreground);
    transition: color var(--duration-micro) var(--ease-out);
  }
.docs-dropdown-item:hover .docs-dropdown-icon,
  .docs-dropdown-item:focus-visible .docs-dropdown-icon {
    color: var(--accent-foreground);
  }
/* ═══════════════════════════════════════════════════════════════════
   DOCS-NAV  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Sidebar-Navigation der Docs (Webflow-Pattern): gruppierte Links,
   Gruppen optional collapsible (Chevron-Toggle), Items optional
   verschachtelt (Sub-Items), externe Links mit Icon. Das Collapsible-
   Verhalten (open/close, Scroll-Spy o.ä.) bleibt in docs-nav.tsx — hier
   nur das Styling.

   Öffentliche API (docs-nav.tsx rendert genau diese Klassen, Rails-Haml
   verwendet sie wörtlich):

     .docs-nav                    nav-Wrapper (aria-label kommt aus dem
                                   Markup) — keine eigenen Properties,
                                   alle Kinder pinnen ihre Typografie
                                   selbst (Parity-Regel)
     .docs-nav-group              eine Gruppe (Label + Items)
     .docs-nav-group-label        Typografie des Gruppen-Labels — auf
                                   <p> (nicht collapsible) UND auf dem
                                   <span> im Toggle-Button (collapsible).
                                   Der vertikale Abstand (mb-2) ist NUR
                                   im <p>-Fall Teil dieser Klasse; im
                                   Toggle-Fall trägt der Button selbst
                                   den Abstand (.docs-nav-group-toggle),
                                   der Margin auf dem <span> wird dort
                                   zurückgesetzt (siehe unten, Blocker-Fix
                                   Review-Runde).
     .docs-nav-group-toggle       Button-Variante der Gruppe (collapsible)
                                   (+ .is-bleed, siehe unten)
     .docs-nav-group-toggle-icon  Chevron im Toggle (+ .is-open)
     .docs-nav-items              Top-Level <ul>
     .docs-nav-item                <li> — strukturell, keine eigenen
                                   Properties (list-style erbt von der
                                   jeweiligen <ul>)
     .docs-nav-link                Item-Link, Basis
                                   (+ .is-active, + .is-bleed)
     .docs-nav-sub-link             Modifier für eingerückte Items
                                   (depth ≥ 1) — zusammen mit
                                   .docs-nav-link (+ .is-sub für depth ≥ 2,
                                   noch tiefere Einrückung)
     .docs-nav-sub-items            verschachtelte <ul> für Children
     .docs-nav-external              Modifier für externe Links (flex-Layout
                                   für Label + Icon)
     .docs-nav-external-label         Titel-<span> im externen Link (truncate)
     .docs-nav-external-icon          ExternalLink-Icon

   Bleed-Pattern (Notion-Feedback Runde VI, `bleed`-Prop in docs-nav.tsx):
   Desktop-Sidebar (`bleed=true`, Default) — der Hover-/Active-Hintergrund
   von Gruppen-Toggle und Item-Links soll 12px nach LINKS über die
   Text-Bündigkeits-Linie hinausragen (Webflow-Look: der Text startet exakt
   auf der Linksbündigkeits-Linie von Logo/MetaNav, aber die Klick-/
   Hover-Fläche frisst sich in den linken Gutter). Dafür bekommen Toggle
   und Link zusätzlich `.is-bleed`: negativer linker Margin + Breite über
   100% hinaus, damit die rechte Kante gleich bleibt. Im Mobile-Drawer
   (`bleed=false`) bleiben Toggle/Link bündig mit dem Dropdown — dort wird
   `.is-bleed` nicht gesetzt, die Basis-Breite ist `100%` ohne Versatz.
═══════════════════════════════════════════════════════════════════ */
.docs-nav {
    /* Root-Scope-Selector für Rails-Haml-Targeting — keine eigenen
       Properties, jedes Kind pinnt Font/Line-Height/Farbe selbst. */
  }
/* ── Gruppe ── */
.docs-nav-group {
    margin-bottom: var(--spacing-6);
  }
/* Aufklappbare Themen stehen dicht beieinander — sie sind EINE Liste,
     keine getrennten Gruppen. Mit dem großen Gruppenabstand trieben die
     zugeklappten Themen weit auseinander und der Zusammenhang ging
     verloren. Der große Abstand bleibt dort, wo eine Überschrift wirklich
     einen neuen Block eröffnet („Hilfethemen", „Ressourcen"). */
.docs-nav-group:has(> .docs-nav-group-toggle) {
    margin-bottom: var(--spacing-0_5);
  }
.docs-nav-group:last-child {
    margin-bottom: 0;
  }
/* Gruppen-Label-Typografie — gemeinsam für <p> (nicht collapsible) und
     <span> im Toggle-Button (collapsible). margin-bottom (mb-2) ist Teil
     dieser Klasse, weil das im nicht-collapsible <p>-Fall die einzige
     Quelle des Abstands ist. Im Toggle-Fall ist der <span> aber ein
     Flex-Item von .docs-nav-group-toggle (display:flex) — ein Flex-Item
     wird NICHT blockifiziert wie ein normales inline-Element, sein
     vertikaler Margin wird also NICHT ignoriert. Ohne Gegenmaßnahme
     würde das die Flex-Line-Cross-Size um die 0.5rem-Margin-Box
     vergrößern und das Label bei align-items:center sichtbar über dem
     Chevron versetzen (Review-Blocker). Der Toggle-Button trägt seinen
     mb-2-Abstand bereits selbst (siehe .docs-nav-group-toggle unten) —
     das Original gab dem <span> nie einen eigenen Margin. Deshalb wird
     der Margin für den Toggle-Fall unten explizit auf 0 zurückgesetzt. */
.docs-nav-group-label {
    margin: 0 0 var(--spacing-2);          /* nur <p>-Fall */
    font-family: var(--font-heading);
    /* Gruppen-Überschrift: gemeinsame Textrolle für Bedienelemente. */
    font-size: var(--text-ui-label-size);
    line-height: var(--text-ui-label-line);
    font-weight: var(--text-ui-label-weight);
    color: var(--foreground);
  }
/* ── Gruppen-Toggle (collapsible) ── */
.docs-nav-group-toggle {
    /* UA-Button-Reset (Rails hat kein Preflight) */
    font: inherit;
    color: inherit;
    background-color: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    margin: 0 0 var(--spacing-0_5);
    width: 100%;                           /* bleed=false */
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-lg);
    text-align: left;
    transition-property: color, background-color;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
/* Label-<span> ist im Toggle ein Flex-Item — Margin auf Flex-Items wird
     NICHT ignoriert (anders als bei inline-Elementen). Der Button trägt
     seinen mb-2-Abstand bereits selbst (oben); ohne dieses Reset würde
     der Toggle um zusätzliche 0.5rem wachsen und das Label gegenüber dem
     Chevron nach oben versetzen (Review-Blocker, Parity-Fix). */
.docs-nav-group-toggle > .docs-nav-group-label {
    margin: 0;
  }
.docs-nav-group-toggle:hover {
    background-color: color-mix(in oklab, var(--muted) 60%, transparent); /* hover:bg-muted/60 */
  }
.docs-nav-group-toggle.is-bleed {
    margin-left: calc(var(--spacing-3) * -1);
    width: calc(100% + var(--spacing-3));
  }
/* Der Toggle ist zugleich der Einstieg in sein Thema. Führt er auf die
     gerade gelesene Seite, trägt er dieselbe Auszeichnung wie ein aktiver
     Eintrag — sonst hätte die Seite keinen Ort in der Navigation. */
.docs-nav-group-toggle.is-active {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }
.docs-nav-group-toggle.is-active .docs-nav-group-label {
    color: var(--accent-foreground);
  }
.docs-nav-group-toggle.is-active .docs-nav-group-toggle-icon {
    color: currentColor;
  }
.docs-nav-group-toggle-icon {
    display: block;
    width: var(--size-icon-xs);
    height: var(--size-icon-xs);
    flex-shrink: 0;
    color: var(--muted-foreground);
    transform-origin: 50% 50%;
    transition-property: transform;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.docs-nav-group-toggle-icon.is-open {
    transform: rotate(180deg);
  }
/* Rails legt das SVG in einen Span mit derselben Komponentenklasse,
     React setzt die Klasse direkt auf das SVG. In beiden Varianten muss
     die sichtbare Form exakt die Box ausfüllen, damit die Drehachse nicht
     von der Inline-Baseline nach links/unten verschoben wird. */
.docs-nav-group-toggle-icon > svg {
    display: block;
    width: 100%;
    height: 100%;
  }
/* ── Items ── */
.docs-nav-items {
    margin: 0;                             /* Parity: kein Preflight in Rails */
    padding: 0;
    list-style: none;
  }
.docs-nav-items > li + li {
    margin-top: var(--spacing-0_5);
  }
.docs-nav-item {
    /* strukturell — list-style/margin kommen von der jeweiligen <ul>,
       keine eigenen Properties nötig. */
  }
/* ── Item-Link ── */
/* Die linke Kante der Navigation ist IMMER der Text. Die Fläche für Hover
     und Aktiv liegt dahinter und greift über den Text hinaus, statt ihn
     einzurücken — deshalb der negative Außenabstand in Höhe des
     Innenabstands. Ohne das springt die Textkante beim Bewegen der Maus. */
.docs-nav-link {
    display: block;
    border-radius: var(--radius-lg);
    padding: var(--spacing-1_5) var(--spacing-3);
    margin-inline: calc(var(--spacing-3) * -1); /* hebt das Padding wieder auf */
    font-size: var(--text-ui-size);
    font-weight: var(--text-ui-weight);
    line-height: var(--text-ui-line);
    letter-spacing: var(--text-ui-tracking);
    color: color-mix(in oklab, var(--foreground) 80%, transparent); /* text-foreground/80 */
    text-decoration: none;                 /* Parity: kein Preflight-Anchor-Reset in Rails */
    transition-property: color, background-color;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.docs-nav-link:hover {
    background-color: var(--muted);
    color: var(--foreground);
  }
.docs-nav-link.is-bleed {
    margin-left: calc(var(--spacing-3) * -1);
    width: calc(100% + var(--spacing-3));
  }
.docs-nav-link.is-active {
    background-color: var(--accent);
    font-weight: var(--font-weight-medium);                      /* font-medium */
    color: var(--accent-foreground);
  }
.docs-nav-link.is-active:hover {
    /* Aktive Items ändern sich beim Hover nicht (im Original gibt es für
       aktive Links keine hover:-Utilities). */
    background-color: var(--accent);
    color: var(--accent-foreground);
  }
/* ── Verschachtelung ────────────────────────────────────────────────
     Die Einrückung ist gerechnet, nicht aufgezählt: jede Ebene rückt um
     eine Stufe ein, egal wie tief der Baum wird. Die Tiefe kommt als
     `--docs-nav-depth` vom Markup (React setzt sie im style-Attribut,
     Rails schreibt dieselbe Angabe). Vorher gab es genau zwei feste
     Stufen — eine dritte Ebene wäre stillschweigend auf der zweiten
     liegengeblieben. */
/* Eingerückte Punkte greifen NICHT nach links über die Führungslinie.
     Ihre Fläche beginnt genau an der Linie — so wie bei Webflow, wo die
     Linie die linke Kante der Kind-Reihe markiert. Vorher trugen sie
     dasselbe Bleed-Muster wie die oberste Ebene und schoben ihre Hover-
     Fläche über den Strich (Notion-Feedback Runde 7). */
.docs-nav-sub-link {
    --docs-nav-depth: 1;
    /* Die Fläche beginnt eine Haaresbreite RECHTS der Linie. Läge sie
       genau darauf, würde sie die Linie beim Überfahren zudecken — und
       genau das war der Befund. */
    margin-left: calc((var(--docs-nav-depth) - 1) * var(--spacing-4) + var(--spacing-1));
    width: calc(100% + var(--spacing-3) - (var(--docs-nav-depth) - 1) * var(--spacing-4) - var(--spacing-1));
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
  }
/* Das Bleed-Muster gilt nur für die oberste Ebene. */
.docs-nav-link.docs-nav-sub-link.is-bleed {
    margin-left: calc((var(--docs-nav-depth) - 1) * var(--spacing-4) + var(--spacing-1));
  }
.docs-nav-sub-items {
    margin: var(--spacing-0_5) 0 0;
    padding: 0;
    list-style: none;
  }
.docs-nav-sub-items > li + li {
    margin-top: var(--spacing-0_5);
  }
/* Führungslinie an eingerückten Listen: sie zeigt, wozu die Punkte
     gehören. Ohne sie schwebt eine tiefe Ebene ohne erkennbaren Bezug —
     und je mehr Ebenen dazukommen, desto weniger trägt Einrückung allein.
     Die Linie sitzt zwischen der Textkante der Elternebene und der der
     Kinder. */
.docs-nav-items.is-nested,
  .docs-nav-sub-items.is-nested {
    position: relative;
  }
.docs-nav-items.is-nested::before,
  .docs-nav-sub-items.is-nested::before {
    content: "";
    position: absolute;
    inset-block: 0;
    /* Auf der linken Kante der Kind-Reihen, nicht daneben. */
    left: calc((var(--docs-nav-depth, 1) - 1) * var(--spacing-4));
    width: 1px;
    background-color: var(--border);
  }
/* ── Externer Link ── */
.docs-nav-external {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;                           /* gap-2 */
  }
.docs-nav-external-label {
    overflow: hidden;                      /* truncate */
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.docs-nav-external-icon {
    width: var(--size-icon-xs);
    height: var(--size-icon-xs);
    flex-shrink: 0;
    color: var(--muted-foreground);
  }
/* Zustand aus aria-expanded ableiten. React setzt zusätzlich `.is-open`;
     Rails kommt ohne zweite Zustandsquelle aus, weil die ARIA-Angabe für die
     Zugänglichkeit ohnehin Pflicht ist. */
.docs-nav-group-toggle[aria-expanded="true"] .docs-nav-group-toggle-icon {
    transform: rotate(180deg);
  }
/* Rücksprung zur Übersicht. Steht über der Kapitel-Navigation, sobald man
     sich in einem Kapitel befindet — der Weg zurück muss sichtbar sein, sonst
     ist die Kapitelansicht eine Sackgasse. */
.docs-nav-back {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    /* Der Rücksprung gehört nicht zur Kapitel-Navigation, er steht davor.
       Der Abstand muss das zeigen — vorher klebte er am Kapitelnamen und
       las sich wie dessen erste Zeile. */
    margin-bottom: var(--spacing-8);
    color: var(--muted-foreground);
    font-size: var(--text-ui-size);
    font-weight: var(--text-ui-weight);
    line-height: var(--text-ui-line);
    text-decoration: none;
    transition: color var(--duration-micro) var(--ease-out);
  }
.docs-nav-back:hover {
    color: var(--foreground);
    text-decoration: none;
  }
.docs-nav-back svg {
    width: var(--size-icon-xs);
    height: var(--size-icon-xs);
    flex-shrink: 0;
  }
/* Kapitel-Überschrift der aktuellen Ansicht. Reine Typografie: der Weg
     auf die Kapitelübersicht steht als eigener Punkt darunter. Runde 6
     hatte beides zusammengelegt — der Aktiv-Zustand saß dann auf einer
     Überschrift, wo man ihn nicht erwartet (Feedback Runde 7). */
.docs-nav-chapter {
    display: block;
    margin: 0 0 var(--spacing-2);
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-snug);
    color: var(--foreground);
  }
/* Die Übersichts-Zeile steht etwas abgesetzt von den Themen darunter. */
.docs-nav-overview {
    margin-bottom: var(--spacing-4);
  }
/* ── Kapitel-Einstiege mit Icon (Übersichts-Zustand) ──────────────────
     Diese Punkte tragen ein Icon und heben sich dadurch schon ausreichend
     ab. Sie bekommen deshalb KEINE Hover-Fläche — sonst konkurrieren zwei
     Auszeichnungen miteinander. Beim Überfahren färbt sich der Text. */
.docs-nav-topic {
    display: flex;
    align-items: center;
    gap: var(--spacing-2_5);
    padding-block: var(--spacing-1_5);
    color: color-mix(in oklab, var(--foreground) 80%, transparent);
    font-size: var(--text-ui-size);
    font-weight: var(--text-ui-weight);
    line-height: var(--text-ui-line);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }
.docs-nav-topic:hover,
  .docs-nav-topic:focus-visible {
    color: var(--accent-foreground);
    text-decoration: none;
  }
.docs-nav-topic:hover .docs-nav-topic-icon,
  .docs-nav-topic:focus-visible .docs-nav-topic-icon {
    color: var(--accent-foreground);
  }
.docs-nav-topic-icon {
    flex-shrink: 0;
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    color: var(--accent-foreground);
    transition: color var(--duration-fast) var(--ease-out);
  }
/* Kein Navigationspunkt läuft über zwei Zeilen hinaus. Was länger ist,
     endet mit Auslassungszeichen; der vollständige Titel steht im
     title-Attribut und erscheint beim Verweilen.
     Die Begrenzung sitzt auf dem inneren <span>, NICHT auf dem Link:
     `overflow: hidden` schneidet an der Polsterkante ab, nicht am Text.
     Lag die Regel auf dem gepolsterten Link, ragte der Kopf der dritten
     Zeile sichtbar in den unteren Innenabstand. */
.docs-nav-label,
  .docs-nav-topic > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
/* Zurück-Knopf mit gerahmtem Pfeil. */
.docs-nav-back {
    gap: var(--spacing-2_5);
  }
.docs-nav-back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 24px — der Rücksprung ist ein Nebenweg, kein Hauptelement. Er saß
       vorher als 32px-Kasten schwerer in der Spalte als die Punkte, um die
       es eigentlich geht (Feedback Runde 7). */
    width: var(--size-icon-lg);
    height: var(--size-icon-lg);
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--background);
    transition: border-color var(--duration-micro) var(--ease-out);
  }
.docs-nav-back:hover .docs-nav-back-icon {
    border-color: var(--ring);
  }
/* ═══════════════════════════════════════════════════════════════════
   DOCS-PAGER  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Zurück/Weiter-Navigation am Artikelende. docs-pager.tsx rendert genau
   diese Klassen; Rails-Haml verwendet sie wörtlich.

   Öffentliche API:
     .docs-pager           nav-Wrapper (mt-12, Trennlinie oben)
       .is-single           Modifier — nur EIN Link vorhanden (erster/
                             letzter Artikel): volle Breite statt
                             2-Spalten-Grid
     .docs-pager-link      einzelner Link-Card (+ Richtungs-Modifier)
       .is-prev              Icon links, linksbündiger Text
       .is-next               Icon rechts, rechtsbündiger Text, Grid-
                              Spalte 2 (außer bei .is-single)
     .docs-pager-label      Eyebrow „Zurück"/„Weiter" + Pfeil-Icon
     .docs-pager-title      Artikel-Titel des Ziel-Links

   Layout: gestapelt (< sm) als flex-col-reverse — „Weiter" (im DOM
   zuletzt) liegt oben, „Zurück" darunter, weil Nutzer meist zum
   nächsten Artikel wollen. Ab sm: klassisches 2-Spalten-Grid
   (Zurück links, Weiter rechts).
═══════════════════════════════════════════════════════════════════ */
.docs-pager {
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;                             /* gap-4 */
    margin-top: 3rem;                      /* mt-12 */
    padding-top: 1.5rem;                   /* pt-6 */
    border-top: 1px solid var(--border);
    /* text-align/line-height pinnen: Host-Seiten (Rails-Shell vs.
       Storybook) vererben sonst unterschiedliche Werte — Parity-Audit-
       Befund (wie alert.css/docs-toc.css). */
    text-align: left;
    line-height: var(--line-height-normal);
  }
@media (min-width: 576px) {
    .docs-pager {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
/* Nur ein Link vorhanden → volle Breite, immer 1 Spalte */
.docs-pager.is-single {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
.docs-pager-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;                          /* gap-1 */
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--card);
    padding: 0.75rem 1rem;                 /* py-3 px-4 */
    text-decoration: none;
    transition-property: color, background-color, border-color;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.docs-pager-link:hover {
    border-color: color-mix(in oklab, var(--primary) 40%, transparent);
    background-color: var(--muted);
  }
.docs-pager-link.is-next {
    text-align: right;
  }
/* Weiter-Link rückt in Spalte 2 — außer bei .is-single (dort gibt es
     ohnehin nur eine Spalte). */
@media (min-width: 576px) {
    .docs-pager:not(.is-single) .docs-pager-link.is-next {
      grid-column-start: 2;
    }
  }
.docs-pager-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;                          /* gap-1 */
    font-size: var(--font-size-xs);
    color: var(--muted-foreground);
  }
.docs-pager-link.is-next .docs-pager-label {
    justify-content: flex-end;
  }
.docs-pager-label svg {
    width: var(--size-icon-xs);
    height: var(--size-icon-xs);
    flex-shrink: 0;
  }
.docs-pager-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
  }
.docs-pager-link:hover .docs-pager-title {
    color: var(--primary);
  }
/* ═══════════════════════════════════════════════════════════════════
   DOCS-ASK-PANEL  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Der Hinweis auf die KI-Hilfe in der rechten Randspalte der
   Suchergebnisse (Notion-Feedback Runde 10).

   Warum er genau dort steht: Wer sucht und nicht sofort findet, hat eine
   Frage, die sich schlecht in Suchwörter fassen lässt — das ist der
   Moment, in dem eine Frage in eigenen Worten weiterhilft. Auf der
   Artikelseite wäre derselbe Kasten Beiwerk; dort steht das
   Inhaltsverzeichnis.

   Er ist bewusst KEIN vollflächiger Werbeblock: dieselbe Rahmung und
   Breite wie „Verwandte Artikel" daneben (docs-side-panel.css), damit die
   Randspalte eine Spalte bleibt und nicht zwei Gestaltungen trägt.

   Öffentliche API:

     .docs-ask-panel         der Kasten
     .docs-ask-panel-icon    Zeichen über der Überschrift
     .docs-ask-panel-title   Überschrift
     .docs-ask-panel-text    zwei Zeilen Einordnung
     .docs-ask-panel-action  der Knopf, der die KI-Hilfe öffnet
═══════════════════════════════════════════════════════════════════ */
.docs-ask-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--muted);
  }
.docs-ask-panel-icon {
    display: inline-flex;
    width: var(--size-icon-xl);
    height: var(--size-icon-xl);
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--background);
    color: var(--accent-foreground);
  }
.docs-ask-panel-icon svg {
    width: var(--size-icon-md);
    height: var(--size-icon-md);
  }
.docs-ask-panel-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-snug);
    color: var(--foreground);
  }
.docs-ask-panel-text {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--muted-foreground);
  }
.docs-ask-panel-action {
    margin-top: var(--spacing-1);
  }
/* ═══════════════════════════════════════════════════════════════════
   DOCS-SWITCHER  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Der Bereichswechsler am Kopf der Navigation. Er trägt den Namen des
   Bereichs, in dem man gerade liest, und öffnet ein Panel mit allen
   Bereichen — ein Klick wechselt direkt hinüber.

   Warum er drei Dinge ersetzt (Notion-Feedback Runde 10):
   Vorher standen übereinander „Zurück", der Bereichsname als reine
   Überschrift und ein Punkt „Übersicht". Drei Zeilen für eine einzige
   Frage — „wo bin ich, und wie komme ich woandershin?". Der Weg führte
   dabei immer über die Startseite zurück. Der Wechsler beantwortet die
   Frage in einer Zeile und macht den Umweg überflüssig.

   Die Bereichsübersicht selbst steht deshalb NICHT mehr als Punkt in der
   Liste. Sie bleibt der Einstieg eines Bereichs und ist über den Wechsler
   und über die Brotkrumen erreichbar — aufgeführt werden muss sie nicht.

   Vorbild ist der Bereichswechsler auf developers.webflow.com. Dort liegt
   er nur im mobilen Menü; hier trägt ihn auch die Seitenspalte, weil das
   Problem am großen Bildschirm dasselbe ist.

   Öffentliche API (Rails-Haml verwendet diese Klassen wörtlich):

     .docs-switcher            Hülle (position: relative)
     .docs-switcher-trigger    Auslöser — trägt aria-expanded
     .docs-switcher-mark       gerahmtes Zeichen im Auslöser
     .docs-switcher-caret      Doppelpfeil rechts
     .docs-switcher-panel      das Panel
     .docs-switcher-label      Gruppenüberschrift im Panel
     .docs-switcher-list       Liste der Bereiche
     .docs-switcher-item       ein Bereich (Zeichen + Titel + Beschreibung)
     .docs-switcher-item-icon / -body / -title / -text
     .is-current               der Bereich, in dem man gerade steht
═══════════════════════════════════════════════════════════════════ */
.docs-switcher {
    position: relative;
    /* Der Wechsler steht über der Navigation, nicht in ihr. Der Abstand
       muss das zeigen — er ist eine Ebene höher als die Punkte darunter. */
    margin-right: var(--spacing-2);
    margin-bottom: var(--spacing-6);
  }
/* ── Auslöser ──
     Getönte Zeile mit gerahmtem Zeichen links und Doppelpfeil rechts. Der
     Doppelpfeil (statt eines Chevrons nach unten) sagt „hier wird etwas
     ausgetauscht", nicht „hier klappt etwas auf" — der Unterschied trägt
     die ganze Bedeutung dieses Elements. */
.docs-switcher-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--spacing-2_5);
    /* UA-Button-Reset (Rails hat kein Preflight) */
    margin: 0;
    padding: var(--spacing-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--muted);
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: var(--text-ui-size);
    font-weight: var(--font-weight-medium);
    line-height: var(--text-ui-line);
    text-align: left;
    cursor: pointer;
    outline: none;
    transition-property: border-color, background-color;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.docs-switcher-trigger:hover {
    border-color: var(--ring);
    background-color: var(--accent);
    color: var(--accent-foreground);
  }
.docs-switcher-trigger:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
.docs-switcher-mark {
    display: inline-flex;
    width: var(--size-icon-xl);
    height: var(--size-icon-xl);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--background);
    color: var(--accent-foreground);
  }
.docs-switcher-mark svg {
    width: var(--size-icon-md);
    height: var(--size-icon-md);
  }
/* Der Name füllt die Zeile und endet bei Bedarf mit Auslassungszeichen —
     ein Bereichsname darf die Zeile nicht sprengen. */
.docs-switcher-name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.docs-switcher-caret {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    flex-shrink: 0;
    color: var(--muted-foreground);
  }
.docs-switcher-trigger:hover .docs-switcher-caret {
    color: currentColor;
  }
/* ── Panel ──
     Es legt sich über die Navigation, statt sie nach unten zu schieben:
     ein Wechsel ist ein kurzer Zwischenschritt, danach ist die Liste
     wieder da, wo sie war. */
.docs-switcher-panel {
    position: absolute;
    top: calc(100% + var(--spacing-1));
    right: 0;
    left: 0;
    z-index: 1000;
    display: none;
    max-height: min(32rem, 70svh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--spacing-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--popover);
    box-shadow: var(--shadow-md);
  }
.docs-switcher-trigger[aria-expanded="true"] + .docs-switcher-panel {
    display: block;
  }
.docs-switcher-label {
    margin: var(--spacing-4) 0 var(--spacing-2) var(--spacing-2);
    font-family: var(--font-heading);
    font-size: var(--text-ui-label-size);
    font-weight: var(--text-ui-label-weight);
    line-height: var(--text-ui-label-line);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
.docs-switcher-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
.docs-switcher-list > li + li {
    margin-top: var(--spacing-1);
  }
/* Ein Eintrag trägt Zeichen, Titel und eine Zeile Beschreibung — genug,
     um ohne Vorwissen zu entscheiden, ob der Bereich der richtige ist. */
.docs-switcher-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2_5);
    padding: var(--spacing-2_5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--popover-foreground);
    text-decoration: none;
    transition-property: border-color, background-color, color;
    transition-duration: var(--duration-micro);
    transition-timing-function: var(--ease-out);
  }
.docs-switcher-item:hover,
  .docs-switcher-item:focus-visible {
    border-color: var(--ring);
    background-color: var(--muted);
    color: var(--accent-foreground);
    text-decoration: none;
  }
.docs-switcher-item.is-current {
    border-color: var(--border);
    background-color: var(--accent);
    color: var(--accent-foreground);
  }
.docs-switcher-item-icon {
    width: var(--size-icon-lg);
    height: var(--size-icon-lg);
    flex-shrink: 0;
    color: var(--accent-foreground);
  }
.docs-switcher-item-body {
    min-width: 0;
  }
.docs-switcher-item-title {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-ui-size);
    font-weight: var(--font-weight-medium);
    line-height: var(--text-ui-line);
    color: inherit;
  }
/* Die Beschreibung bleibt bei zwei Zeilen — sie ordnet ein, sie erzählt
     nicht. Ohne Begrenzung wird aus der Liste eine Textwand. */
.docs-switcher-item-text {
    display: -webkit-box;
    margin: var(--spacing-0_5) 0 0;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--muted-foreground);
  }
.docs-switcher-item:hover .docs-switcher-item-text,
  .docs-switcher-item.is-current .docs-switcher-item-text {
    color: inherit;
  }
/* ── Im mobilen Menü ──
     Dort öffnet das Panel nach unten wie in der Seitenspalte; Platz ist
     genug, weil der Wechsler ganz oben steht. */
.docs-menu .docs-switcher {
    margin-bottom: var(--spacing-4);
  }
/* ═══════════════════════════════════════════════════════════════════
   DOCS-SIDE-PANEL  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Der gerahmte Kasten in der rechten Randspalte: eine Überschrift und
   darunter eine Liste verwandter Ziele, jedes mit Zeichen.

   Er trägt zwei Fälle, die vorher zwei fast gleiche Definitionen in einem
   Seiten-Stylesheet waren — „Verwandte Artikel" auf der Artikelseite und
   „Weitere Themen" auf der Bereichsseite. Sie unterschieden sich in
   Schriftstärke, Farbe, Zeilenzahl und Hover-Verhalten, ohne dass es dafür
   einen Grund gab (Notion-Feedback Runde 6: „vereinheitlichen").

   Öffentliche API (docs-side-panel.tsx rendert genau diese Klassen,
   Rails-Haml verwendet sie wörtlich):

     .docs-side-panel          Kasten
     .docs-side-panel-title    Überschrift — Sentence-Case, NIE Versalien
     .docs-side-panel-list     <ul>
     .docs-side-panel-item     <li>
     .docs-side-panel-link     Eintrag
     .docs-side-panel-icon     Zeichen vor dem Titel

   Wie in der Navigation ist die linke Kante der TEXT beziehungsweise das
   Zeichen: die Hover-Fläche greift darum herum, statt den Text einzurücken.
═══════════════════════════════════════════════════════════════════ */
.docs-side-panel {
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    background-color: var(--muted);
  }
.docs-side-panel-title {
    margin: 0 0 var(--spacing-3);
    font-family: var(--font-heading);
    font-size: var(--text-ui-label-size);
    line-height: var(--text-ui-label-line);
    font-weight: var(--text-ui-label-weight);
    color: var(--foreground);
  }
.docs-side-panel-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
.docs-side-panel-item {
    margin: 0;
  }
.docs-side-panel-link {
    display: flex;
    /* Oben ausgerichtet, weil Artikeltitel umbrechen dürfen — bei
       zentrierter Ausrichtung rutscht das Zeichen sonst in die Mitte des
       Textblocks und verliert seinen Bezug zur ersten Zeile. */
    align-items: flex-start;
    gap: var(--spacing-2_5);
    padding: var(--spacing-1_5) var(--spacing-2);
    margin-inline: calc(var(--spacing-2) * -1);
    border-radius: var(--radius-md);
    font-size: var(--text-ui-size);
    font-weight: var(--text-ui-weight);
    line-height: var(--text-ui-line);
    color: var(--foreground);
    text-decoration: none;
    transition-property: color, background-color;
    transition-duration: var(--duration-micro);
    transition-timing-function: var(--ease-out);
  }
.docs-side-panel-link:hover,
  .docs-side-panel-link:focus-visible {
    background-color: var(--background);
    color: var(--accent-foreground);
    text-decoration: none;
  }
.docs-side-panel-icon {
    flex-shrink: 0;
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    /* Auf die erste Textzeile ausgerichtet: die Zeilenhöhe ist größer als
       das Zeichen, ohne Versatz säße es minimal zu hoch. */
    margin-top: calc((1lh - var(--spacing-4)) / 2);
    color: var(--accent-foreground);
    transition: color var(--duration-micro) var(--ease-out);
  }
.docs-side-panel-link:hover .docs-side-panel-icon,
  .docs-side-panel-link:focus-visible .docs-side-panel-icon {
    color: var(--accent-foreground);
  }
/* Kein Eintrag läuft über zwei Zeilen hinaus. Was länger ist, endet mit
     Auslassungszeichen; der vollständige Titel steht im title-Attribut. */
.docs-side-panel-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
/* DocsSearch — derselbe sichtbare Trigger als React-Button oder Rails-Form. */
.docs-search-form {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    margin: 0;
  }
.docs-search {
    display: flex;
    width: 100%;
    height: 2.25rem;
    min-width: 0;
    min-height: 0;
    align-items: center;
    gap: var(--spacing-2);
    padding: 0 var(--spacing-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    color: var(--muted-foreground);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    text-align: center;
    outline: none;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
      background-color var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out);
  }
.docs-search:hover {
    background-color: var(--muted);
    color: var(--foreground);
  }
.docs-search:focus-visible,
  .docs-search:focus-within {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
.docs-search-icon {
    display: block;
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    flex-shrink: 0;
    fill: currentColor;
  }
.docs-search-label,
  .docs-search-input {
    min-width: 0;
    flex: 1 1 0%;
    overflow: hidden;
    color: inherit;
    font: inherit;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.docs-search-input {
    width: 100%;
    height: auto;
    field-sizing: content;
    padding: 0;
    border: 0;
    background: transparent;
    outline: none;
  }
.docs-search-input::-moz-placeholder {
    color: inherit;
    opacity: 1;
  }
.docs-search-input::placeholder {
    color: inherit;
    opacity: 1;
  }
.docs-search-hint {
    display: none;
    flex-shrink: 0;
    padding: var(--spacing-0_5) var(--spacing-1_5);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background-color: var(--background);
    color: var(--muted-foreground);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
  }
@media (min-width: 576px) {
    .docs-search-hint {
      display: inline;
    }
  }
/* ── Suchergebnis-Eintrag ──
     Titel plus optionale, einzeilig gekappte Beschreibung. Ersetzt die
     letzten Utility-Ketten in docs-search.tsx. */
.docs-search-result {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--spacing-0_5);
  }
.docs-search-result-title {
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
  }
.docs-search-result-description {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--font-size-xs);
    color: var(--muted-foreground);
  }
/* ═══════════════════════════════════════════════════════════════════
   DOCS PROSE  —  Regeln für Fließtext-Inhalt in den Docs
   ───────────────────────────────────────────────────────────────────
   Bausteine, die im Artikelinhalt entstehen und keine eigene Komponente
   sind: Überschriften, Trennlinien, Tabellenrahmen.

   Die Überschriften lagen bis Runde 7 in der Rails-Sass, mit festen
   Pixelwerten je Stelle: 40px auf der Einstiegsseite, 36px im Artikel,
   24/19/16 für die Ebenen darunter. Dadurch gab es zwei verschiedene
   „größte Überschrift", keine davon skalierte mit dem Fenster, und die
   Buchstabenabstände folgten keiner erkennbaren Regel. Jetzt liegen sie
   hier, an der Skala, und gelten für React wie Rails.

   Die Regel dahinter:

     Stufe   Größe               Laufweite   Schnitt
     ─────────────────────────────────────────────────────
     h1      --font-size-4xl     tighter     semibold (600)
     h2      --font-size-2xl     tight       semibold
     h3      --font-size-xl      snug        semibold
     h4      --font-size-lg      snug        semibold

   Die Laufweite hängt an der GRÖSSE, nicht an der Ebene: was optisch
   gleich groß ist, läuft gleich eng.

   SemiBold ist der schwerste Schnitt — das ist eine gesetzte Regel der
   Marke, nicht ein Versehen. Hierarchie entsteht über Größe und Laufweite,
   nicht über Gewicht.

   Öffentliche API:
     .docs-prose-h1 … -h4  Überschriften-Stufen (auch als Element-Regel
                           innerhalb von .docs-prose-body)
     .docs-prose-lead      Vorspann unter der Überschrift
     .docs-table-scroll    Rahmen um eine Tabelle; macht sie horizontal
                           scrollbar, statt die Textspalte zu sprengen
═══════════════════════════════════════════════════════════════════ */
/* ── Überschriften ── */
.docs-prose-h1,
  .docs-prose-h2,
  .docs-prose-h3,
  .docs-prose-h4 {
    font-family: var(--font-heading);
    color: var(--foreground);
    text-wrap: balance;
  }
.docs-prose-h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tighter);
  }
.docs-prose-h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-tight);
  }
.docs-prose-h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-snug);
  }
.docs-prose-h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-snug);
  }
/* Vorspann: größer als Fließtext, aber ohne Überschriften-Gewicht. */
.docs-prose-lead {
    max-width: 45rem;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-snug);
    color: var(--muted-foreground);
  }
/* Eine breite Tabelle darf die Lesespalte nicht dehnen. Der Rahmen
     übernimmt das Scrollen; die Tabelle selbst bleibt eine echte Tabelle
     und nimmt die volle Breite ein — sonst verteilen sich die Spalten
     nicht gleichmäßig.

     `max-width: 100%` allein am <table> reichte nicht: mit
     `display: block` verliert es das Tabellen-Layout, mit
     `width: max-content` schneidet es Inhalt ab. Deshalb der Wrapper. */
.docs-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    /* Scroll-Container brauchen einen Fokus-Stopp, damit die Tabelle auch
       per Tastatur scrollbar ist. */
    scrollbar-width: thin;
  }
.docs-table-scroll:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }
.docs-table-scroll > table {
    width: 100%;
    /* `auto` verteilt nach Inhalt und lässt lange Zellen umbrechen; erst
       wenn selbst das nicht mehr passt, greift das Scrollen des Rahmens. */
    table-layout: auto;
  }
.docs-table-scroll > table th,
  .docs-table-scroll > table td {
    /* Lange Werte (URLs, Pfade) brechen um, statt die Spalte aufzublähen. */
    overflow-wrap: break-word;
  }
/* ═══════════════════════════════════════════════════════════════════
   DOCS TOC FLOATING  —  „Auf dieser Seite" als Dock für Tablet/Mobil
   ───────────────────────────────────────────────────────────────────
   Ein zusammenhängender Container, unten verankert. Die Liste wächst
   nach oben über die Bar (grid-template-rows 0fr → 1fr), sie ist kein
   abgesetztes Popover.

   Zustände kommen als data-Attribute vom Bauteil:
     data-hidden   letzte ~8 % der Seite erreicht — Dock fährt weg
     data-open     Panel ausgeklappt

   Ab xl (1200 px) ausgeblendet: dort zeigt die Shell den regulären
   TOC-Seitenstreifen. Der Wert MUSS mit dem Umbruch in
   docs-app-shell.css zusammenfallen, sonst gibt es eine Breite, in der
   entweder beide oder keiner sichtbar ist.
═══════════════════════════════════════════════════════════════════ */
.docs-toc-floating {
    position: fixed;
    right: 0;
    bottom: 1.25rem;
    left: 0;
    z-index: 20;
    display: flex;
    justify-content: center;
    padding-inline: var(--spacing-4);
    transform: translateY(0);
    opacity: 1;
    transition-property: transform, opacity;
    transition-duration: var(--duration-normal);
    transition-timing-function: var(--ease-out);
  }
.docs-toc-floating[data-hidden] {
    transform: translateY(6rem);
    opacity: 0;
    pointer-events: none;
  }
@media (min-width: 1200px) {
    .docs-toc-floating {
      display: none;
    }
  }
.docs-toc-floating-card {
    width: 100%;
    max-width: var(--container-xs);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background-color: var(--background);
    box-shadow: var(--shadow-lg);
  }
/* Panel — 0fr → 1fr ist animierbar, height:auto nicht. Öffnen laeuft in
     normaler Dauer, Schliessen schneller: Zuklappen darf zackiger sein. */
.docs-toc-floating-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition-property: grid-template-rows;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.docs-toc-floating-panel[data-open] {
    grid-template-rows: 1fr;
    transition-duration: var(--duration-normal);
  }
.docs-toc-floating-panel-clip {
    overflow: hidden;
  }
/* Bewusst keine Trennlinie zur Bar — sie zerschneidet den Wachs-Effekt. */
.docs-toc-floating-list {
    max-height: min(60vh, 420px);
    overflow-y: auto;
    padding: var(--spacing-3) var(--spacing-4) var(--spacing-1);
  }
.docs-toc-floating-toggle {
    display: flex;
    width: 100%;
    height: 3rem;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--spacing-4);
    border: 0;
    background-color: transparent;
    color: var(--foreground);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    outline: none;
    transition-property: color, background-color;
    transition-duration: var(--duration-micro);
    transition-timing-function: var(--ease-out);
  }
.docs-toc-floating-toggle:hover {
    background-color: color-mix(in oklab, var(--muted) 60%, transparent);
  }
.docs-toc-floating-toggle:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
/* Icon-Stapel: list-dashes (zu) und X (offen) liegen uebereinander und
     blenden gegeneinander — kein harter Wechsel. */
.docs-toc-floating-icon {
    position: relative;
    display: inline-flex;
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
  }
.docs-toc-floating-icon > svg {
    position: absolute;
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    transition: opacity var(--duration-fast) var(--ease-out);
  }
/* Der Zustand steht bereits in aria-expanded am Button — keine zweite
     Quelle fuer dieselbe Information. */
.docs-toc-floating-icon-closed { opacity: 1 }
.docs-toc-floating-icon-open   { opacity: 0 }
.docs-toc-floating-toggle[aria-expanded="true"] .docs-toc-floating-icon-closed { opacity: 0 }
.docs-toc-floating-toggle[aria-expanded="true"] .docs-toc-floating-icon-open   { opacity: 1 }
/* ═══════════════════════════════════════════════════════════════════
   DOCS-SEARCH-OVERLAY  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Die Vorschlagsliste, die beim Tippen unter dem Suchfeld erscheint —
   Muster wie bei GitHub: das Feld bleibt stehen, darunter legt sich eine
   Liste mit Treffern über die Seite.

   Warum überhaupt: die Suche sprang bisher erst beim Absenden auf eine
   Ergebnisseite. Wer nur wissen wollte, ob es einen Artikel gibt, musste
   die Seite wechseln. Die Vorschläge kommen aus einem kleinen Index, der
   einmal geladen und clientseitig gefiltert wird — sie erscheinen ohne
   Anfrage und auch dann, wenn die Volltextsuche gerade nicht erreichbar
   ist (Notion-Feedback Runde 8).

   Öffentliche API:

     .docs-search-shell     Hülle um Feld + Vorschläge (position: relative)
     .docs-search-panel     die Liste (+ .is-open)
     .docs-search-hint-row  Kopfzeile der Liste — Anzahl, Tastaturhinweis
     .docs-search-group     Abschnitt der Liste (Bereiche / Artikel)
     .docs-search-result    ein Treffer (+ .is-highlighted für Tastatur)
     .docs-search-result-title  Titel, Treffer hervorgehoben (<mark>)
     .docs-search-result-path   Herkunft — Bereich › Thema
     .docs-search-empty     Text, wenn nichts passt
     .docs-search-all       letzte Zeile: Volltextsuche starten
═══════════════════════════════════════════════════════════════════ */
.docs-search-shell {
    position: relative;
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
  }
.docs-search-panel {
    position: absolute;
    top: calc(100% + var(--spacing-2));
    right: 0;
    left: 0;
    z-index: 1030;
    display: none;
    max-height: min(28rem, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--spacing-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--popover);
    box-shadow: var(--shadow-lg);
    color: var(--popover-foreground);
  }
.docs-search-panel.is-open {
    display: block;
  }
.docs-search-hint-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-2) var(--spacing-2);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
    color: var(--muted-foreground);
  }
.docs-search-group + .docs-search-group {
    margin-top: var(--spacing-2);
    padding-top: var(--spacing-2);
    border-top: 1px solid var(--border);
  }
.docs-search-group-label {
    margin: 0 0 var(--spacing-1);
    padding-inline: var(--spacing-2);
    font-family: var(--font-heading);
    font-size: var(--text-ui-label-size);
    font-weight: var(--text-ui-label-weight);
    line-height: var(--text-ui-label-line);
    color: var(--muted-foreground);
  }
.docs-search-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
.docs-search-result {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-0_5);
    padding: var(--spacing-2) var(--spacing-2_5);
    border-radius: var(--radius-md);
    color: var(--foreground);
    text-decoration: none;
    transition-property: background-color, color;
    transition-duration: var(--duration-micro);
    transition-timing-function: var(--ease-out);
  }
/* Maus und Tastatur führen zum selben Bild: `.is-highlighted` setzt das
     JS beim Blättern mit den Pfeiltasten. Ohne das müsste man raten,
     welcher Treffer die Eingabetaste bekommt. */
.docs-search-result:hover,
  .docs-search-result:focus-visible,
  .docs-search-result.is-highlighted {
    background-color: var(--accent);
    color: var(--accent-foreground);
    text-decoration: none;
  }
.docs-search-result-title {
    font-size: var(--text-ui-size);
    font-weight: var(--text-ui-weight);
    line-height: var(--text-ui-line);
  }
/* Der Treffer im Titel wird hervorgehoben, nicht eingefärbt — eine
     zweite Farbe neben dem Aktiv-Zustand würde konkurrieren. */
.docs-search-result-title mark {
    background-color: transparent;
    color: inherit;
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
  }
.docs-search-result-path {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
    color: var(--muted-foreground);
  }
.docs-search-result:hover .docs-search-result-path,
  .docs-search-result.is-highlighted .docs-search-result-path {
    color: inherit;
  }
.docs-search-empty {
    padding: var(--spacing-4) var(--spacing-2_5);
    font-size: var(--text-ui-size);
    line-height: var(--text-ui-line);
    color: var(--muted-foreground);
  }
.docs-search-all {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-2_5);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-size: var(--text-ui-size);
    font-weight: var(--text-ui-weight);
    color: var(--accent-foreground);
    text-decoration: none;
  }
.docs-search-all:hover,
  .docs-search-all:focus-visible,
  .docs-search-all.is-highlighted {
    background-color: var(--accent);
    text-decoration: none;
  }
.docs-search-all svg {
    width: var(--size-icon-xs);
    height: var(--size-icon-xs);
    flex-shrink: 0;
  }
/* Im mobilen Menü füllt die Liste den verfügbaren Platz, statt als
     schmales Kästchen über dem Feld zu schweben. */
.docs-menu .docs-search-panel {
    position: static;
    max-height: none;
    margin-top: var(--spacing-2);
    box-shadow: none;
  }
/* Solange Vorschläge stehen, tritt „Ask AI" zurück — sonst rutscht der
     Knopf unter die Liste und steht dort ohne Bezug. Wer sucht, sucht. */
.docs-menu-search:has(.docs-search-panel.is-open) .docs-menu-ask {
    display: none;
  }
/* ═══════════════════════════════════════════════════════════════════
   DOCS-TOC  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   „Auf dieser Seite"-Navigation im Webflow-Pattern: durchgehende
   2px-Schiene (Track) + smooth bewegter 2px-Marker neben der Liste.

   Öffentliche API (docs-toc.tsx rendert genau diese Klassen, Rails-Haml
   verwendet sie wörtlich — Scroll-Spy/Marker-Positionierung liefert die
   jeweilige Plattform als JS):

     .docs-toc          nav-Wrapper
     .docs-toc-title    Überschrift — Sentence-Case, NIE Versalien
     .docs-toc-body     relativer Wrapper um Track/Marker/Liste
     .docs-toc-track    durchgehende Schiene
     .docs-toc-marker   aktiver Indikator (+ .is-visible; top/height via JS)
     .docs-toc-list     <ul>
     .docs-toc-item     <li> (+ .is-current — Scroll-Spy)
     .docs-toc-sublist  verschachtelte <ul> einer tieferen Ebene
     .docs-toc-link     Eintrag (+ .is-active). Die Gliederungstiefe steht
                        als `--docs-toc-depth` im style-Attribut; die
                        Einrückung ist daraus gerechnet, nicht aufgezählt.
═══════════════════════════════════════════════════════════════════ */
.docs-toc {
    /* Gemeinsame Textrolle für Bedienelemente — dieselbe wie Navigation,
       Klappmenü und Seitenkasten. Die Zeilenhöhe ist bewusst gepinnt:
       Host-Seiten (Rails-Shell 1.6, Storybook 1.5) vererben sonst
       unterschiedliche Werte (Parity-Audit-Befund). */
    font-size: var(--text-ui-size);
    font-weight: var(--text-ui-weight);
    line-height: var(--text-ui-line);
  }
.docs-toc-title {
    /* Die Überschrift sitzt auf derselben Textkante wie die Punkte
       darunter — sonst steht sie auf der Schiene statt neben ihr. */
    margin: 0 0 var(--spacing-3);
    padding-left: var(--spacing-4);
    font-family: var(--font-heading);
    font-size: var(--text-ui-label-size);
    font-weight: var(--text-ui-label-weight);
    line-height: var(--text-ui-label-line);
    color: var(--muted-foreground);
  }
.docs-toc-body {
    position: relative;
  }
.docs-toc-track {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--spacing-0_5);
    background-color: var(--border);
  }
/* Der Indikator fährt über `transform`, nicht über `top`/`height`.
     Beides sind Layout-Eigenschaften: der Browser müsste 250 ms lang in
     jedem Bild neu rechnen und zeichnen. Als Verschiebung und Streckung
     läuft dieselbe Bewegung auf dem Compositor.

     Grundhöhe ist 1 px, gestreckt wird über `scaleY` — der Balken ist
     einfarbig und hat keine Rundung, ihm passiert dabei nichts. Position
     und Streckung setzt das JS der jeweiligen Plattform. */
.docs-toc-marker {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--spacing-0_5);
    height: 1px;
    transform-origin: 0 0;
    transform: translateY(0) scaleY(0);
    background-color: color-mix(in oklab, var(--accent-foreground) 40%, transparent);
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: var(--duration-normal);
    transition-timing-function: var(--ease-out);
  }
.docs-toc-marker.is-visible {
    opacity: 1;
  }
.docs-toc-list {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
  }
.docs-toc-list > li + li {
    margin-top: var(--spacing-1);
  }
.docs-toc-link {
    display: block;
    /* Einrückung je Gliederungsebene — gerechnet, nicht aufgezählt.
       `--docs-toc-depth` kommt aus dem Markup (Rails-Helper und React
       setzen dieselbe Angabe); ohne Angabe ist es die oberste Ebene. */
    padding: var(--spacing-1) 0 var(--spacing-1)
      calc(var(--spacing-4) + var(--docs-toc-depth, 0) * var(--spacing-3));
    color: var(--muted-foreground);
    text-decoration: none;
    transition-property: color;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.docs-toc-link:hover {
    color: var(--foreground);
  }
/* Eine Überschrift darf Code enthalten — im Artikel ist das richtig.
     Im Inhaltsverzeichnis nicht: dort wechselt der Eintrag dann mitten im
     Satz auf Schreibmaschinenschrift und fällt aus der Liste heraus. Die
     Randspalte ist eine Übersicht, keine Wiedergabe der Auszeichnung
     (Notion-Feedback Runde 7). Der Artikel selbst bleibt unberührt. */
.docs-toc-link code,
  .docs-toc-link kbd,
  .docs-toc-link samp {
    all: unset;
    font: inherit;
    color: inherit;
  }
.docs-toc-link.is-active {
    font-weight: var(--font-weight-semibold);
    color: var(--accent-foreground);
  }
/* Unterpunkte sind eingeklappt, solange man nicht bei ihrem Abschnitt ist.
     Bei langen Artikeln war die vollständige Liste unübersichtlich; der
     Leser braucht die Feingliederung erst dort, wo er gerade steht. Die
     Regel gilt für jede Ebene gleichermaßen — sie fragt nur nach dem
     direkten Elternpunkt, nicht nach der Tiefe. */
/* Das Auf- und Zuklappen liegt auf einer Hülle um die Liste, nicht auf
     der Liste selbst. Grund: `grid-template-rows: 0fr` beschreibt genau
     EINE Spur. Lag die Regel auf der Liste, waren deren <li> die Zeilen —
     eingeklappt wurde dann nur der erste Unterpunkt, alle weiteren blieben
     stehen. Mit der Hülle gibt es immer genau ein Kind, also genau eine
     Spur, und die Liste klappt als Ganzes — unabhängig davon, wie viele
     Punkte sie trägt. */
.docs-toc-subwrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-normal) var(--ease-out);
  }
.docs-toc-subwrap > .docs-toc-sublist {
    overflow: hidden;
    min-height: 0;
  }
.docs-toc-sublist {
    margin: 0;
    padding: 0;
    list-style: none;
  }
/* Aufgeklappt, wenn der zugehörige Oberpunkt aktiv ist oder den gelesenen
     Abschnitt enthält. `.is-current` setzt der Scroll-Spy. */
.docs-toc-item:has(> .docs-toc-link.is-active) > .docs-toc-subwrap,
  .docs-toc-item.is-current > .docs-toc-subwrap {
    grid-template-rows: 1fr;
  }
/* Ohne Bewegungswunsch keine Bewegung — nur die Sichtbarkeit ändert sich. */
@media (prefers-reduced-motion: reduce) {
    .docs-toc-subwrap {
      transition: none;
    }
  }
/* ═══════════════════════════════════════════════════════════════════
   DOCS-TOPIC-CARD  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Die große Themenkarte der Docs-Einstiegsseite: Zeichen, Titel,
   Beschreibung, Anzahl der Artikel.

   Bis Runde 7 lag sie mit festen Pixelwerten in der Rails-Sass. Titel und
   Zähler folgten dabei keiner Skala: 18px ohne Laufweitenregel, der
   Zähler 12px als beiläufiger Text.

   Öffentliche API:

     .docs-card-rail        Reihe der Karten — Raster, das ab einer
                            Mindestbreite umbricht; auf schmalen Geräten
                            eine wischbare Spur (siehe unten)
     .docs-topic-card       die Karte (ein <a>)
     .docs-topic-card-icon  Zeichen oben
     .docs-topic-card-title Titel
     .docs-topic-card-text  Beschreibung
     .docs-topic-card-count Anzahl als gerahmtes Abzeichen
═══════════════════════════════════════════════════════════════════ */
/* ── Reihe ──
     Auf schmalen Geräten standen die Karten als hohe Blöcke untereinander;
     bis zum vierten musste man weit scrollen. Dort ist die Reihe jetzt
     eine wischbare Spur — eine Karte breit, die nächste lugt hervor, damit
     erkennbar ist, dass es weitergeht. Ab der ersten Stufe mit Platz wird
     daraus wieder ein Raster (Notion-Feedback Runde 7). */
.docs-card-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: var(--spacing-4);
    margin: 0;
    /* Die Spur läuft rechts aus dem Bild, statt vor dem Rand zu enden.
       Vorher schnitt der Innenabstand der Hülle die nächste Karte ab —
       das las sich wie ein Fehler im Layout, nicht wie „hier geht es
       weiter" (Notion-Feedback Runde 10). Der Versatz ist exakt der
       Innenabstand der Hülle (`.docs-shell-body`), damit die Spur an der
       Bildschirmkante endet und keinen Seitenüberlauf erzeugt.
       Die linke Kante bleibt unangetastet: die erste Karte steht in der
       Flucht mit Überschrift und Fließtext. */
    margin-right: calc(var(--spacing-4) * -1);
    padding: 0 0 var(--spacing-3);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    overscroll-behavior-x: contain;
    /* Die native Leiste ist ausgeblendet, weil sie das Ziel verfehlt: auf
       macOS ist sie eine Overlay-Leiste, die keinen Platz belegt und nur
       WÄHREND des Scrollens erscheint — sie kann also nicht zeigen, dass
       es überhaupt etwas zu scrollen gibt. Auf Windows wiederum belegt sie
       Platz und sieht auf jedem Rechner anders aus.

       An ihre Stelle tritt ein eigener Anzeiger (siehe unten), der immer
       sichtbar ist und auf jeder Plattform gleich aussieht. */
    scrollbar-width: none;
  }
.docs-card-rail::-webkit-scrollbar {
    display: none;
  }
.docs-card-rail > * {
    scroll-snap-align: start;
  }
@media (min-width: 576px) {
    .docs-card-rail {
      grid-auto-columns: 46%;
    }
  }
/* ── Anzeiger und Bedienelemente ──
     Eine Zeile unter der Spur: links zeigt ein Balken, wie weit die Spur
     reicht und wo man darin steht; rechts stehen zwei Knöpfe. Wischen ist
     auf einem Telefon selbstverständlich, mit der Maus auf einem schmalen
     Fenster nicht (Notion-Feedback Runde 10).

     Beides verschwindet, sobald das Raster greift — dort gibt es keine
     Richtung, in die man schieben könnte. */
.docs-card-rail-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-top: var(--spacing-3);
  }
.docs-card-rail-progress {
    position: relative;
    min-width: 0;
    flex: 1;
    height: 0.25rem;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--muted);
  }
/* Breite und Position kommen als Prozentwerte aus dem Markup — das JS
     setzt sie, die Gestalt steht hier. `transform` statt `left`: die
     Bewegung soll nicht bei jedem Bildlauf ein Layout auslösen. */
.docs-card-rail-progress-thumb {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: var(--docs-rail-thumb-width, 40%);
    border-radius: var(--radius-xl);
    background-color: var(--muted-foreground);
    transform: translateX(var(--docs-rail-thumb-offset, 0));
    transition: transform var(--duration-fast) var(--ease-out);
  }
.docs-card-rail-buttons {
    display: flex;
    flex-shrink: 0;
    gap: var(--spacing-2);
  }
.docs-card-rail-button {
    display: inline-flex;
    width: var(--size-icon-xl);
    height: var(--size-icon-xl);
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background-color: var(--background);
    color: var(--muted-foreground);
    cursor: pointer;
    outline: none;
    transition-property: border-color, color, background-color, opacity;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.docs-card-rail-button svg {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
  }
.docs-card-rail-button:hover:not(:disabled) {
    border-color: var(--ring);
    background-color: var(--muted);
    color: var(--accent-foreground);
  }
.docs-card-rail-button:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
/* Am Anfang und am Ende der Spur tritt der jeweilige Knopf zurück,
     statt zu verschwinden — eine Reihe, die die Breite wechselt, zappelt. */
.docs-card-rail-button:disabled {
    opacity: 0.4;
    cursor: default;
  }
/* Ab hier ist Platz für ein echtes Raster: kein Wischen mehr, die Karten
     brechen nach Anzahl um. Vier Spalten, wo es aufgeht — darunter so
     viele, wie die Mindestbreite zulässt. */
@media (min-width: 992px) {
    .docs-card-rail {
      grid-auto-flow: row;
      grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
      grid-auto-columns: auto;
      /* Kein Wischen mehr — also auch kein Überstand und keine Leiste. */
      margin-right: 0;
      padding-bottom: 0;
      overflow-x: visible;
      scroll-snap-type: none;
    }
    .docs-card-rail-controls {
      display: none;
    }
  }
@media (min-width: 1400px) {
    .docs-card-rail {
      grid-template-columns: repeat(4, 1fr);
    }
  }
/* ── Karte ── */
.docs-topic-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--background);
    color: inherit;
    text-decoration: none;
    transition-property: border-color, box-shadow, transform;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.docs-topic-card:hover,
  .docs-topic-card:focus-visible {
    border-color: var(--ring);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transform: translateY(-1px);
  }
.docs-topic-card-icon {
    /* Duotone braucht Fläche, um zu wirken — bei kleinerem Maß verpufft
       der Zweiton. */
    width: var(--size-icon-xl);
    height: var(--size-icon-xl);
    margin-bottom: var(--spacing-2);
    color: var(--accent-foreground);
  }
/* Titel auf der Stufe h3 der Docs-Skala: gleiche Größe, gleiche
     Laufweite wie eine h3 im Artikel. */
.docs-topic-card-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-snug);
    color: var(--foreground);
  }
.docs-topic-card:hover .docs-topic-card-title,
  .docs-topic-card:focus-visible .docs-topic-card-title {
    color: var(--accent-foreground);
  }
.docs-topic-card-text {
    margin: 0;
    flex: 1;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--muted-foreground);
  }
/* Die Anzahl ist eine Angabe, kein Beiwerk — sie bekommt einen Rahmen
     und steht auf eigener Zeile. */
.docs-topic-card-count {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    margin-top: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-2_5);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background-color: var(--muted);
    /* Eine Stufe über der Beschreibung — sonst liest sich die Angabe wie
       eine Fußnote und der Rahmen wirkt grundlos. */
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--foreground);
    /* Die Ziffern zählen hoch; ohne feste Ziffernbreite zappelt das
       Abzeichen dabei. */
    font-variant-numeric: tabular-nums;
    transition-property: border-color, background-color, color;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.docs-topic-card:hover .docs-topic-card-count,
  .docs-topic-card:focus-visible .docs-topic-card-count {
    border-color: var(--ring);
    background-color: var(--background);
    color: var(--accent-foreground);
  }
/* ═══════════════════════════════════════════════════════════════════
   QUICK FUNCTIONS  —  „Seite kopieren"-Menü am Artikelkopf
   ───────────────────────────────────────────────────────────────────
   Ein Button öffnet ein Menü mit Aktionen zum aktuellen Artikel.
   Trigger und Menü kommen aus Button beziehungsweise Dropdown; hier
   stehen nur die Ergänzungen, die diese Komponente ausmachen.
═══════════════════════════════════════════════════════════════════ */
/* Bestätigungs-Häkchen nach dem Kopieren. */
.quick-functions-confirm {
    color: var(--success-700);
  }
/* Aufklapp-Pfeil im Trigger — kleiner und zurückgenommen, damit er
     das Icon links nicht konkurriert. */
.quick-functions-caret {
    margin-left: var(--spacing-1);
    width: var(--size-icon-xs);
    height: var(--size-icon-xs);
    opacity: 0.6;
  }
.quick-functions-menu {
    width: 16rem;
  }
/* Menüeintrag mit zweizeiliger Beschriftung. */
.quick-functions-entry {
    display: flex;
    flex-direction: column;
  }
.quick-functions-entry-hint {
    font-size: var(--font-size-xs);
    color: var(--muted-foreground);
  }
/* ═══════════════════════════════════════════════════════════════════
   FAQ  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Sammlung aufklappbarer Frage-Antwort-Blöcke auf nativem `<details>`/
   `<summary>`-HTML — voll barrierefrei, ohne Client-State. Die
   Single-Open-Gruppierung liefert der `name`-Attribut-Mechanismus der
   jeweiligen Plattform (React: geteilter `name` via Context, Rails-Haml:
   geteilter `name` pro `<details>`-Gruppe) — reines HTML-Verhalten,
   kein CSS.

   Öffentliche API (faq.tsx rendert genau diese Klassen, Rails-Haml
   verwendet sie wörtlich):

     .faq              Wrapper — Divider zwischen Items, Card-Rahmen
     .faq-item         <details>-Element (offen/zu über natives `open`)
     .faq-question     <summary> — Zeile mit Frage + Chevron-Icon
     .faq-answer       Antwort-Body (nur sichtbar wenn `.faq-item[open]`)
═══════════════════════════════════════════════════════════════════ */
.faq {
    margin: 2rem 0;                        /* my-8 */
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--card);
  }
/* divide-y divide-border — Trennlinie zwischen aufeinanderfolgenden Items */
.faq > .faq-item + .faq-item {
    border-top: 1px solid var(--border);
  }
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;                          /* gap-3 */
    padding: 0.875rem 1rem;                /* px-4 py-3.5 */
    cursor: pointer;
    list-style: none;
    /* Host-Seiten vererben sonst abweichende Werte — Parity-Regel. */
    font-family: inherit;
    text-align: left;
    line-height: var(--line-height-normal);
    transition-property: background-color;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.faq-question::-webkit-details-marker {
    display: none;
  }
.faq-question:hover {
    background-color: color-mix(in oklab, var(--muted) 40%, transparent);
  }
/* Fragetext — <span> in der Summary-Zeile */
.faq-question > span {
    font-family: var(--font-heading);
    font-size: var(--font-size-base);      /* text-base */
    font-weight: var(--font-weight-semibold);
    color: var(--foreground);
  }
/* Chevron-Icon — <svg> in der Summary-Zeile */
.faq-question > svg {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    flex-shrink: 0;
    color: var(--muted-foreground);
    transition-property: transform;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
/* group-open/faq:rotate-180 — <details open> dreht das Chevron-Icon */
.faq-item[open] .faq-question > svg {
    transform: rotate(180deg);
  }
.faq-answer {
    border-top: 1px solid var(--border);
    padding: 1rem;                         /* px-4 py-4 */
    color: var(--foreground);
  }
.faq-answer > :first-child {
    margin-top: 0;
  }
.faq-answer > :last-child {
    margin-bottom: 0;
  }
.faq-answer p {
    margin: 0.5rem 0;                      /* my-2 */
    line-height: var(--line-height-relaxed);                    /* leading-relaxed */
  }
/* ═══════════════════════════════════════════════════════════════════
   FEEDBACK-PROMPT  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   „War diese Seite hilfreich?"-Karte am Artikelende. Zwei Zustände als
   eigenständiges Markup (Frage vs. Bestätigung nach dem Klick) — der
   Wechsel passiert komplett im TSX-State, nicht per CSS-Toggle.
   feedback-prompt.tsx rendert genau diese Klassen, Rails-Haml verwendet
   sie wörtlich.

   Öffentliche API:

     .feedback-prompt            Root-Karte — Frage-Zustand ist der
                                  Default (ohne Zusatzklasse)
     .feedback-prompt-confirm    Zusatzklasse am Root im Bestätigungs-
                                  Zustand (immer zusammen mit
                                  `.feedback-prompt`, wie `.alert.alert-
                                  success`) — dichteres gap, success-
                                  getönte Fläche. Icon + Texte darin
                                  werden strukturell adressiert, keine
                                  eigenen Klassen nötig:
                                    `.feedback-prompt-confirm > svg`
                                    `.feedback-prompt-confirm > p:first-of-type`  (Dank-Überschrift)
                                    `.feedback-prompt-confirm > p:last-of-type`   (Begründungstext)
     .feedback-prompt-question   Überschrift im Frage-Zustand („War
                                  diese Seite hilfreich?") — teilt sich
                                  die Typografie mit der Dank-Überschrift
                                  oben
     .feedback-prompt-actions    Button-Reihe im Frage-Zustand

   Buttons darin nutzen `.btn` `.btn-outline-secondary` `.btn-sm` via
   `buttonVariants` aus button.css — hier nicht dupliziert.
═══════════════════════════════════════════════════════════════════ */
/* Bewusst OHNE Karte: eine umrandete, zentrierte Box zieht am Artikelende
     mehr Aufmerksamkeit auf sich als die Frage verdient. Vorbild ist die
     zurückgenommene, linksbündige Zeile bei Webflow — sie steht in der
     Leserichtung und unterbricht den Textfluss nicht. */
.feedback-prompt {
    margin: 2rem 0;                        /* my-8 */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-3);
    text-align: left;
  }
.feedback-prompt.feedback-prompt-confirm {
    gap: var(--spacing-2);
  }
.feedback-prompt-confirm > svg {
    width: var(--size-icon-lg);
    height: var(--size-icon-lg);
    color: var(--success-700);
  }
/* Überschrift — Frage- UND Dank-Zustand teilen sich diese Typografie. */
.feedback-prompt-question,
  .feedback-prompt-confirm > p:first-of-type {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    /* line-height pinnen — Parity-Audit-Regel. */
    line-height: var(--line-height-normal);
    color: var(--muted-foreground);
  }
.feedback-prompt-confirm > p:last-of-type {
    margin: 0;
    font-size: var(--font-size-sm);
    /* line-height pinnen — Parity-Audit-Regel. */
    line-height: var(--line-height-normal);
    color: var(--muted-foreground);
  }
.feedback-prompt-actions {
    display: flex;
    gap: var(--spacing-2);
  }
/* ═══════════════════════════════════════════════════════════════════
   LIGHTBOX IMAGE  —  Artikelbild mit Vollbildansicht
   ───────────────────────────────────────────────────────────────────
   Das Vollbild liegt auf einem dunklen Backdrop (aus dem Dialog-Overlay).
   Bedienelemente darauf sind bewusst FEST weiß und nicht an --foreground
   gebunden: sie liegen immer auf dem abgedunkelten Bild, nie auf der
   Seitenfläche. Ein Theme-Wechsel darf sie nicht umfärben, sonst werden
   sie im Light Mode unlesbar.
═══════════════════════════════════════════════════════════════════ */
/* ── Bild im Artikel ── */
.lightbox-thumb {
    margin-block: var(--spacing-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: zoom-in;
    transition: box-shadow var(--duration-fast) var(--ease-out);
  }
.lightbox-thumb:hover {
    box-shadow: var(--shadow-md);
  }
/* ── Vollbild ── */
.lightbox-popup {
    position: fixed;
    inset: 0;
    /* Muss ÜBER dem Backdrop liegen. Der Backdrop ist `.modal-backdrop`
       (z-index 1040) — mit dem früheren Wert 50 lag das Vollbild darunter
       und war weder klickbar noch sichtbar. Gleiche Ebene wie `.modal`. */
    z-index: 1050;
    display: flex;
    flex-direction: column;
    outline: none;
  }
.lightbox-close {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    z-index: 20;
  }
.lightbox-counter {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 20;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: rgb(255 255 255 / 0.7);
  }
/* Bühne: das Bild öffnet in Originalverhältnis, so groß wie möglich mit
     Rand ringsum. Bei Zoom > 100 % läuft es sauber scrollbar über. */
.lightbox-stage {
    display: flex;
    flex: 1;
    overflow: auto;
    padding: var(--spacing-6);
  }
@media (min-width: 576px) {
    .lightbox-stage {
      padding: var(--spacing-12);
    }
  }
/* flex-shrink: 0 ist wesentlich — sonst staucht das Flexlayout die
     gezoomte Breite wieder auf Containerbreite und Zoom bleibt wirkungslos. */
.lightbox-figure {
    display: block;
    margin: auto;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    -o-object-fit: contain;
       object-fit: contain;
    transition: width var(--duration-fast) var(--ease-out);
  }
.lightbox-figure[data-fit] {
    max-width: 100%;
    max-height: 100%;
  }
.lightbox-nav {
    position: absolute;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
  }
.lightbox-nav-prev { left: var(--spacing-4) }
.lightbox-nav-next { right: var(--spacing-4) }
.lightbox-nav:disabled { opacity: 0.3 }
/* ── Untere Leiste ── */
.lightbox-toolbar {
    position: absolute;
    right: 0;
    bottom: 1.25rem;
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
    padding-inline: var(--spacing-4);
    pointer-events: none;
  }
.lightbox-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-1_5);
    border: 1px solid rgb(255 255 255 / 0.15);
    border-radius: 9999px;
    background-color: rgb(0 0 0 / 0.6);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    pointer-events: auto;
  }
.lightbox-zoom-value {
    min-width: 2.5rem;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: rgb(255 255 255 / 0.8);
    text-align: center;
  }
.lightbox-divider {
    width: 1px;
    height: var(--size-icon-sm);
    margin-inline: var(--spacing-0_5);
    background-color: rgb(255 255 255 / 0.15);
  }
.lightbox-caption {
    max-width: min(42rem, 100%);
    overflow: hidden;
    color: rgb(255 255 255 / 0.9);
    font-size: var(--font-size-sm);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
  }
.lightbox-caption-standalone {
    position: absolute;
    right: 0;
    bottom: 1.25rem;
    left: 0;
    z-index: 10;
    margin-inline: auto;
    padding-inline: var(--spacing-4);
  }
/* Bedienknöpfe auf dem Backdrop — Ghost-Button in Weiß. */
.lightbox-control {
    color: #fff;
  }
.lightbox-control:hover:not(:disabled) {
    background-color: rgb(255 255 255 / 0.1);
    color: #fff;
  }
.lightbox-control:disabled {
    opacity: 0.4;
  }
/* ═══════════════════════════════════════════════════════════════════
   META-NAV  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Tab-Leiste mit thematischen Reitern (Webflow-Pattern), sticky unter
   der Topbar. meta-nav.tsx rendert genau diese Klassen; Rails-Haml
   verwendet sie wörtlich — Aktiv-Erkennung (aktueller Pfad) liefert die
   jeweilige Plattform.

   Aktiv-Markierung erfolgt über einen blauen Unterstrich unter dem TEXT
   — nicht unter dem ganzen Tab-Click-Target. Deshalb trägt NICHT der
   Link, sondern ein innerer Span den Unterstrich („Word-Underline",
   Webflow-Vorbild, Notion-Feedback Runde VI): der Link liefert nur
   Höhe + Klick-Target (kein Padding-Left, damit der erste Tab nicht vom
   Logo wegrückt), der Span darunter trägt `border-bottom` + Farbe.

   Linksbündigkeit (Runde VI): der erste Reiter teilt seine X-Position
   mit dem Logo darüber und den Sidebar-Items darunter — via `lg:pl-11`
   (44px) am Listen-Container, statt Padding am ersten Link.

   Öffentliche API:
     .meta-nav             nav-Wrapper (sticky, hidden bis lg:block)
     .meta-nav-list        Flex-Container der Reiter (scrollt horizontal)
     .meta-nav-item        einzelner Reiter-Link — nur Klick-Target
     .meta-nav-item-label  Text-Span im Link — trägt Unterstrich + Farbe
       .is-active            aktiver Reiter (blauer Unterstrich, fett)
═══════════════════════════════════════════════════════════════════ */
.meta-nav {
    position: sticky;
    top: 3.5rem;                           /* top-14 */
    z-index: 20;
    display: none;                         /* hidden — erst ab lg sichtbar */
    border-bottom: 1px solid var(--border);
    background-color: var(--background);
  }
@media (min-width: 992px) {
    .meta-nav {
      display: block;                      /* lg:block */
    }
  }
.meta-nav-list {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    max-width: 1600px;
    align-items: center;
    gap: 1.5rem;                           /* gap-6 */
    overflow-x: auto;
    padding: 0 1rem;                       /* px-4 */
  }
@media (min-width: 992px) {
    .meta-nav-list {
      /* Asymmetrisches Padding: pl-11 (44px) statt px-8, damit der erste
         Tab-Text exakt auf der gleichen X-Linie sitzt wie das Logo
         darüber und der Sidebar-Item-Text darunter. */
      padding-left: 2.75rem;               /* lg:pl-11 */
      padding-right: 2rem;                 /* lg:pr-8 */
    }
  }
.meta-nav-item {
    display: flex;
    height: 2.5rem;                        /* h-10 */
    flex-shrink: 0;
    align-items: center;
    /* Preflight-Parity: Browser-UA-Stylesheet würde <a> sonst
       unterstreichen — Rails hat kein Preflight, das das zurücksetzt. */
    text-decoration: none;
    outline: none;
  }
.meta-nav-item:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); /* ring-3 ring-ring/40 */
  }
.meta-nav-item-label {
    display: flex;
    height: 2.5rem;                        /* h-10 */
    align-items: center;
    margin-bottom: -1px;                   /* -mb-px — Linie überdeckt die Border-Bottom-Linie des Nav */
    border-bottom: 2px solid transparent;  /* border-b-2, Farbe via Zustand */
    font-size: var(--font-size-sm);
    /* line-height pinnen: Host-Seiten (Rails-Shell vs. Storybook)
       vererben sonst unterschiedliche Werte — Parity-Audit-Regel. */
    line-height: var(--line-height-normal);
    white-space: nowrap;
    color: var(--muted-foreground);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
.meta-nav-item-label:hover {
    color: var(--foreground);
  }
.meta-nav-item-label.is-active {
    border-bottom-color: var(--accent-foreground);
    font-weight: var(--font-weight-medium);                      /* font-medium */
    color: var(--accent-foreground);
  }
/* ═══════════════════════════════════════════════════════════════════
   STEPS  —  Komponenten-Klassen (Single Source für React + Rails)
   ───────────────────────────────────────────────────────────────────
   Nummerierte Anleitungs-Liste (Webflow-Pattern). Jeder Schritt bekommt
   automatisch seine laufende Nummer in einem kleinen, leicht umrandeten
   Chip links neben dem Titel; optional ersetzt ein Icon die Nummer.

   Öffentliche API (steps.tsx rendert genau diese Klassen, Rails-Haml
   verwendet sie wörtlich — die laufende Nummer liefert die jeweilige
   Plattform, React über Context, Rails über Loop-Index):

     .steps          Wrapper — vertikaler Rhythmus zwischen den Schritten
     .step           ein Schritt — Marker + Content nebeneinander
     .step-marker    Nummern-/Icon-Chip (quadratisch, umrandet)
     .step-content   rechte Spalte — Titel + Body
     .step-title     Überschrift des Schritts (optional)
     .step-body      Fließtext-Wrapper — äußere Abstände neutralisiert,
                      Absätze bekommen vertikalen Rhythmus
═══════════════════════════════════════════════════════════════════ */
.steps {
    margin: 1.5rem 0;                      /* my-6 */
  }
.steps > * + * {
    margin-top: 1.75rem;                   /* space-y-7 */
  }
.step {
    display: flex;
    gap: 1rem;                             /* gap-4 */
  }
.step-marker {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.75rem;                        /* size-7 */
    height: 1.75rem;
    margin-top: 0.125rem;                  /* mt-0.5 */
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: color-mix(in oklab, var(--muted) 40%, transparent);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    /* line-height pinnen: Host-Seiten (Rails-Shell, Storybook) vererben
       sonst unterschiedliche Werte — Parity-Audit-Regel. text-xs-Default. */
    line-height: var(--line-height-snug);
    color: var(--muted-foreground);
  }
.step-marker svg {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    flex-shrink: 0;
  }
.step-content {
    min-width: 0;                          /* min-w-0 */
    flex: 1 1 0%;                          /* flex-1 */
  }
.step-title {
    margin-top: 0 !important;              /* !mt-0 */
    margin-bottom: 0.5rem !important;      /* !mb-2 */
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);                      /* font-semibold */
    /* line-height pinnen (text-base-Default) — Parity-Audit-Regel. */
    line-height: var(--line-height-normal);
    color: var(--foreground);
  }
/* Fließtext-Wrapper: äußere Ränder des ersten/letzten Kindes
     neutralisieren, Absätze bekommen eigenen vertikalen Rhythmus. */
.step-body > :first-child {
    margin-top: 0;
  }
.step-body > :last-child {
    margin-bottom: 0;
  }
.step-body p {
    margin: 0.5rem 0;                      /* my-2 */
    line-height: var(--line-height-relaxed);                    /* leading-relaxed */
  }
/* ═══════════════════════════════════════════════════════════════════
   STYLED VIDEO  —  Videoplayer mit eigenen Bedienelementen
   ───────────────────────────────────────────────────────────────────
   Eigene Controls statt der Browser-Leiste, damit der Player zur
   Token-Welt passt. Die untere Leiste blendet auf Hover ein; solange
   pausiert ist, liegt ein zentraler Abspielknopf über dem Bild.
═══════════════════════════════════════════════════════════════════ */
.styled-video {
    position: relative;
    margin-block: var(--spacing-6);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--foreground);
  }
.styled-video-media {
    display: block;
    width: 100%;
  }
/* ── Zentraler Abspielknopf (nur im Pausenzustand) ── */
.styled-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background-color: rgb(0 0 0 / 0.3);
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
/* Groesse fluid aus der Spacing-Skala: auf schmalen Viewports kleiner,
     damit die Scheibe das Bild nicht dominiert. Entspricht dem Verhalten
     vor der Uebersetzung. */
.styled-video-overlay-disc {
    display: flex;
    width: var(--spacing-16);
    height: var(--spacing-16);
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: color-mix(in oklab, var(--background) 95%, transparent);
    color: var(--foreground);
    box-shadow: var(--shadow-lg);
    transition: transform var(--duration-fast) var(--ease-out);
  }
.styled-video:hover .styled-video-overlay-disc {
    transform: scale(1.05);
  }
/* Eigenes Dreieck statt Icon-Font: der Schwerpunkt eines Dreiecks liegt
     bei 1/3 der Breite, ein geometrisch zentriertes Play-Icon wirkt daher
     nach links versetzt. Der Pfad ist so gelegt, dass der Schwerpunkt auf
     der Mitte sitzt. */
.styled-video-overlay-disc > svg {
    width: var(--size-icon-lg);
    height: var(--size-icon-lg);
    fill: currentColor;
  }
/* ── Untere Leiste ── */
.styled-video-bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    /* Verlauf auf reinem Schwarz — ein blau getönter Fade stiche gegen das
       Bild ab. */
    background-image: linear-gradient(to top, rgb(0 0 0 / 0.8), transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
.styled-video:hover .styled-video-bar,
  .styled-video:focus-within .styled-video-bar {
    opacity: 1;
    pointer-events: auto;
  }
.styled-video-button {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--background);
    cursor: pointer;
    transition: background-color var(--duration-micro) var(--ease-out);
  }
.styled-video-button:hover {
    background-color: color-mix(in oklab, var(--background) 10%, transparent);
  }
.styled-video-button > svg {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
  }
.styled-video-progress {
    height: 0.25rem;
    flex: 1;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border-radius: 9999px;
    background-color: color-mix(in oklab, var(--background) 30%, transparent);
    accent-color: var(--primary);
    cursor: pointer;
  }
.styled-video-progress::-webkit-slider-thumb {
    width: 0.75rem;
    height: 0.75rem;
    -webkit-appearance: none;
            appearance: none;
    border-radius: 9999px;
    background-color: var(--background);
  }
.styled-video-time {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: color-mix(in oklab, var(--background) 85%, transparent);
  }
/* ═══════════════════════════════════════════════════════════════════
   LUFTSCHLOSS BOOTSTRAP-COMPAT  —  Bootstrap-Markup-Ergänzungen
   ───────────────────────────────────────────────────────────────────
   Ergänzt die Komponenten-Klassen (button.css, badge.css, alert.css —
   dort liegen .btn, .badge, .alert als Single Source für React UND
   Rails) um Selektoren, die NUR in Bootstrap-Markup vorkommen, sowie
   um Komponenten, die noch nicht auf die Klassen-API umgestellt sind.

   Regeln:
     - Ausschließlich Token-Referenzen (var(--…)) — keine Hex-Werte.
     - Keine globalen Element-Selektoren, keine Resets, keine Utilities.
     - In Bundles MIT echtem Bootstrap: NACH bootstrap.css laden.

   Migrationspfad: Sobald eine Komponente auf Komponenten-Klassen
   umgestellt ist (CVA → Klassen-Mapping + eigene .css-Datei), wandert
   ihr Abschnitt von hier in die Komponenten-Datei. Noch offen:
   Dropdown, Nav/Navbar. (Card/Forms/Table/Modal/Pagination/Progress
   sind migriert — siehe components/ui/*.css.)
═══════════════════════════════════════════════════════════════════ */
/* ═══ Bootstrap-Markup-Ergänzungen zu den Komponenten-Klassen ═══════
   Flash-Messages aus `bootstrap_flash` stapeln sich — Bootstrap-Markup
   erwartet den Abstand am Alert selbst. Die React-Komponente setzt
   keinen Margin (Spacing kommt dort vom Layout). */
.alert {
  margin-bottom: 1rem;
}
/* Dismiss-Button (Bootstrap 4 `.close`, Bootstrap 5 `.btn-close`) */
.alert .close,
.alert .btn-close {
  float: right;
  margin-left: 0.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--duration-micro) var(--ease-out);
}
.alert .close:hover,
.alert .btn-close:hover {
  opacity: 1;
}
/* ═══ Card — Bootstrap-Markup-Ergänzung ═════════════════════════════
   Die Card-Komponente liegt in components/ui/card.css (Single Source).
   Hier nur Bootstrap-Klassen ohne React-Pendant. */
.card-subtitle,
.card-text:last-child {
  margin-bottom: 0;
}
/* ═══ Forms ═════════════════════════════════════════════════════════
   Spiegel von src/components/ui/input.tsx / label.tsx. */
/* .form-control (Basis, Focus, Disabled, is-invalid, textarea) liegt in
   components/ui/input.css (Single Source). Hier nur Bootstrap-Größen. */
.form-control-sm {
  height: 2rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}
.form-control-lg {
  height: 3rem;
  padding: 0.625rem 1rem;
}
.form-group {
  margin-bottom: 1rem;
}
.form-group > label:not(.form-label) {
  display: inline-block;
  margin-bottom: 0.375rem;
  color: var(--foreground);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1;
}
.form-text {
  display: block;
  margin-top: 0.375rem;
  color: var(--muted-foreground);
  font-size: var(--font-size-xs);
}
.invalid-feedback {
  display: block;
  margin-top: 0.375rem;
  color: var(--danger-700);
  font-size: var(--font-size-xs);
}
/* Checkboxen / Radios — native Controls via accent-color tokenisiert */
.form-check {
  position: relative;
  display: block;
  padding-left: 1.5rem;
}
.form-check-input {
  position: absolute;
  margin-top: 0.25rem;
  margin-left: -1.5rem;
  accent-color: var(--primary);
}
.form-check-input:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.form-check-label {
  font-size: var(--font-size-sm);
}
.form-check-inline {
  display: inline-flex;
  align-items: center;
  margin-right: 1rem;
}
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 0.5rem;
}
.form-inline .form-group {
  margin-bottom: 0;
}
/* Input-Group — Prefix/Suffix am Feld */
.input-group {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control {
  flex: 1 1 auto;
  width: 1%;
}
.input-group > .form-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group-text {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  background-color: var(--muted);
  color: var(--muted-foreground);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
.input-group-prepend {
  display: flex;
  margin-right: -1px;
}
.input-group-append {
  display: flex;
  margin-left: -1px;
}
.input-group-prepend .input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group-append .input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* ═══ Text-Utilities (minimal) ══════════════════════════════════════
   !important, weil Bootstrap .text-muted selbst mit !important setzt —
   sonst verliert die Token-Farbe in Bundles mit echtem Bootstrap. */
.text-muted {
  color: var(--muted-foreground) !important;
}
@charset "UTF-8";
/*
 * Hilfe-Bundle — Pilot für den Luftschloss-Visual-Refresh
 * (design-system/RAILS_MIGRATION.md).
 *
 * `luftschloss` = design-system/dist/rails/luftschloss.css (via Asset-Pfad,
 * siehe config/initializers/assets.rb — kein Kopierschritt): Design-Tokens +
 * Komponenten-Klassen (.btn, .badge, .alert, .docs-toc-*, …). Dieselben
 * Quelldateien speisen das Storybook — was dort geändert wird, ist nach
 * `npm run build:rails` (in design-system/) automatisch hier.
 *
 * Der volle Designsystem-Build (components.css) darf hier NICHT rein:
 * er enthält Tailwind-Preflight/Utilities und zerschießt die geteilten
 * Bootstrap-Partials (Footer, Flash, Cookie-Banner).
 *

 */
/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url(/assets/fontawesome-webfont-ba552005a69e0718f70d36e302a2e4acecd2b78f75c3f3400cc89e363333959b.eot);
  src: url(/assets/fontawesome-webfont-ba552005a69e0718f70d36e302a2e4acecd2b78f75c3f3400cc89e363333959b.eot?#iefix) format("embedded-opentype"), url(/assets/fontawesome-webfont-ac74cbb8412a5dfe1d390d4cab45d2cd8ff2c8cbdb4028fdbd722b8000ab02a2.woff2) format("woff2"), url(/assets/fontawesome-webfont-2b3f99652c9934733b3a1d60ff063a614b9fbba7eb1475db8efedfff13f5b90f.woff) format("woff"), url(/assets/fontawesome-webfont-8a491d6a4f6495c578d1baf5c7a36d996b14c00c53b0381321d8f200e93fa758.ttf) format("truetype"), url(/assets/fontawesome-webfont-aa6363535bf716097069828f865d2520f7ef4e0f74cae6364f761dad9f4e47c8.svg#fontawesomeregular) format("svg");
  font-weight: normal;
  font-style: normal;
}

/* line 19, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* makes the font 33% larger relative to the icon container */
/* line 28, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}

/* line 33, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-2x {
  font-size: 2em;
}

/* line 36, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-3x {
  font-size: 3em;
}

/* line 39, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-4x {
  font-size: 4em;
}

/* line 42, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-5x {
  font-size: 5em;
}

/* line 45, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-fw {
  width: 1.28571429em;
  text-align: center;
}

/* line 49, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-ul {
  padding-left: 0;
  margin-left: 2.14285714em;
  list-style-type: none;
}

/* line 54, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-ul > li {
  position: relative;
}

/* line 57, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-li {
  position: absolute;
  left: -2.14285714em;
  width: 2.14285714em;
  top: 0.14285714em;
  text-align: center;
}

/* line 64, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-li.fa-lg {
  left: -1.85714286em;
}

/* line 67, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-border {
  padding: .2em .25em .15em;
  border: solid 0.08em #eeeeee;
  border-radius: .1em;
}

/* line 72, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-pull-left {
  float: left;
}

/* line 75, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-pull-right {
  float: right;
}

/* line 78, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa.fa-pull-left {
  margin-right: .3em;
}

/* line 81, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa.fa-pull-right {
  margin-left: .3em;
}

/* Deprecated as of 4.4.0 */
/* line 85, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.pull-right {
  float: right;
}

/* line 88, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.pull-left {
  float: left;
}

/* line 91, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa.pull-left {
  margin-right: .3em;
}

/* line 94, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa.pull-right {
  margin-left: .3em;
}

/* line 97, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-spin {
  animation: fa-spin 2s infinite linear;
}

/* line 101, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-pulse {
  animation: fa-spin 1s infinite steps(8);
}

@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

/* line 125, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  transform: rotate(90deg);
}

/* line 131, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  transform: rotate(180deg);
}

/* line 137, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  transform: rotate(270deg);
}

/* line 143, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  transform: scale(-1, 1);
}

/* line 149, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  transform: scale(1, -1);
}

/* line 155, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}

/* line 162, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}

/* line 170, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

/* line 177, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-stack-1x {
  line-height: inherit;
}

/* line 180, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-stack-2x {
  font-size: 2em;
}

/* line 183, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-inverse {
  color: #ffffff;
}

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
/* line 188, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-glass:before {
  content: "\f000";
}

/* line 191, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-music:before {
  content: "\f001";
}

/* line 194, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-search:before {
  content: "\f002";
}

/* line 197, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-envelope-o:before {
  content: "\f003";
}

/* line 200, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-heart:before {
  content: "\f004";
}

/* line 203, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-star:before {
  content: "\f005";
}

/* line 206, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-star-o:before {
  content: "\f006";
}

/* line 209, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-user:before {
  content: "\f007";
}

/* line 212, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-film:before {
  content: "\f008";
}

/* line 215, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-th-large:before {
  content: "\f009";
}

/* line 218, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-th:before {
  content: "\f00a";
}

/* line 221, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-th-list:before {
  content: "\f00b";
}

/* line 224, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-check:before {
  content: "\f00c";
}

/* line 227, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-remove:before,
.fa-close:before,
.fa-times:before {
  content: "\f00d";
}

/* line 232, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-search-plus:before {
  content: "\f00e";
}

/* line 235, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-search-minus:before {
  content: "\f010";
}

/* line 238, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-power-off:before {
  content: "\f011";
}

/* line 241, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-signal:before {
  content: "\f012";
}

/* line 244, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-gear:before,
.fa-cog:before {
  content: "\f013";
}

/* line 248, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-trash-o:before {
  content: "\f014";
}

/* line 251, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-home:before {
  content: "\f015";
}

/* line 254, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-file-o:before {
  content: "\f016";
}

/* line 257, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-clock-o:before {
  content: "\f017";
}

/* line 260, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-road:before {
  content: "\f018";
}

/* line 263, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-download:before {
  content: "\f019";
}

/* line 266, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-arrow-circle-o-down:before {
  content: "\f01a";
}

/* line 269, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-arrow-circle-o-up:before {
  content: "\f01b";
}

/* line 272, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-inbox:before {
  content: "\f01c";
}

/* line 275, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-play-circle-o:before {
  content: "\f01d";
}

/* line 278, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-rotate-right:before,
.fa-repeat:before {
  content: "\f01e";
}

/* line 282, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-refresh:before {
  content: "\f021";
}

/* line 285, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-list-alt:before {
  content: "\f022";
}

/* line 288, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-lock:before {
  content: "\f023";
}

/* line 291, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-flag:before {
  content: "\f024";
}

/* line 294, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-headphones:before {
  content: "\f025";
}

/* line 297, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-volume-off:before {
  content: "\f026";
}

/* line 300, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-volume-down:before {
  content: "\f027";
}

/* line 303, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-volume-up:before {
  content: "\f028";
}

/* line 306, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-qrcode:before {
  content: "\f029";
}

/* line 309, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-barcode:before {
  content: "\f02a";
}

/* line 312, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-tag:before {
  content: "\f02b";
}

/* line 315, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-tags:before {
  content: "\f02c";
}

/* line 318, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-book:before {
  content: "\f02d";
}

/* line 321, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bookmark:before {
  content: "\f02e";
}

/* line 324, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-print:before {
  content: "\f02f";
}

/* line 327, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-camera:before {
  content: "\f030";
}

/* line 330, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-font:before {
  content: "\f031";
}

/* line 333, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bold:before {
  content: "\f032";
}

/* line 336, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-italic:before {
  content: "\f033";
}

/* line 339, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-text-height:before {
  content: "\f034";
}

/* line 342, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-text-width:before {
  content: "\f035";
}

/* line 345, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-align-left:before {
  content: "\f036";
}

/* line 348, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-align-center:before {
  content: "\f037";
}

/* line 351, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-align-right:before {
  content: "\f038";
}

/* line 354, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-align-justify:before {
  content: "\f039";
}

/* line 357, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-list:before {
  content: "\f03a";
}

/* line 360, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-dedent:before,
.fa-outdent:before {
  content: "\f03b";
}

/* line 364, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-indent:before {
  content: "\f03c";
}

/* line 367, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-video-camera:before {
  content: "\f03d";
}

/* line 370, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
  content: "\f03e";
}

/* line 375, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-pencil:before {
  content: "\f040";
}

/* line 378, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-map-marker:before {
  content: "\f041";
}

/* line 381, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-adjust:before {
  content: "\f042";
}

/* line 384, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-tint:before {
  content: "\f043";
}

/* line 387, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-edit:before,
.fa-pencil-square-o:before {
  content: "\f044";
}

/* line 391, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-share-square-o:before {
  content: "\f045";
}

/* line 394, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-check-square-o:before {
  content: "\f046";
}

/* line 397, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-arrows:before {
  content: "\f047";
}

/* line 400, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-step-backward:before {
  content: "\f048";
}

/* line 403, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-fast-backward:before {
  content: "\f049";
}

/* line 406, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-backward:before {
  content: "\f04a";
}

/* line 409, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-play:before {
  content: "\f04b";
}

/* line 412, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-pause:before {
  content: "\f04c";
}

/* line 415, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-stop:before {
  content: "\f04d";
}

/* line 418, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-forward:before {
  content: "\f04e";
}

/* line 421, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-fast-forward:before {
  content: "\f050";
}

/* line 424, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-step-forward:before {
  content: "\f051";
}

/* line 427, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-eject:before {
  content: "\f052";
}

/* line 430, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-chevron-left:before {
  content: "\f053";
}

/* line 433, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-chevron-right:before {
  content: "\f054";
}

/* line 436, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-plus-circle:before {
  content: "\f055";
}

/* line 439, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-minus-circle:before {
  content: "\f056";
}

/* line 442, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-times-circle:before {
  content: "\f057";
}

/* line 445, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-check-circle:before {
  content: "\f058";
}

/* line 448, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-question-circle:before {
  content: "\f059";
}

/* line 451, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-info-circle:before {
  content: "\f05a";
}

/* line 454, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-crosshairs:before {
  content: "\f05b";
}

/* line 457, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-times-circle-o:before {
  content: "\f05c";
}

/* line 460, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-check-circle-o:before {
  content: "\f05d";
}

/* line 463, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-ban:before {
  content: "\f05e";
}

/* line 466, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-arrow-left:before {
  content: "\f060";
}

/* line 469, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-arrow-right:before {
  content: "\f061";
}

/* line 472, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-arrow-up:before {
  content: "\f062";
}

/* line 475, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-arrow-down:before {
  content: "\f063";
}

/* line 478, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-mail-forward:before,
.fa-share:before {
  content: "\f064";
}

/* line 482, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-expand:before {
  content: "\f065";
}

/* line 485, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-compress:before {
  content: "\f066";
}

/* line 488, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-plus:before {
  content: "\f067";
}

/* line 491, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-minus:before {
  content: "\f068";
}

/* line 494, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-asterisk:before {
  content: "\f069";
}

/* line 497, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-exclamation-circle:before {
  content: "\f06a";
}

/* line 500, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-gift:before {
  content: "\f06b";
}

/* line 503, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-leaf:before {
  content: "\f06c";
}

/* line 506, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-fire:before {
  content: "\f06d";
}

/* line 509, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-eye:before {
  content: "\f06e";
}

/* line 512, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-eye-slash:before {
  content: "\f070";
}

/* line 515, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-warning:before,
.fa-exclamation-triangle:before {
  content: "\f071";
}

/* line 519, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-plane:before {
  content: "\f072";
}

/* line 522, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-calendar:before {
  content: "\f073";
}

/* line 525, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-random:before {
  content: "\f074";
}

/* line 528, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-comment:before {
  content: "\f075";
}

/* line 531, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-magnet:before {
  content: "\f076";
}

/* line 534, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-chevron-up:before {
  content: "\f077";
}

/* line 537, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-chevron-down:before {
  content: "\f078";
}

/* line 540, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-retweet:before {
  content: "\f079";
}

/* line 543, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-shopping-cart:before {
  content: "\f07a";
}

/* line 546, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-folder:before {
  content: "\f07b";
}

/* line 549, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-folder-open:before {
  content: "\f07c";
}

/* line 552, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-arrows-v:before {
  content: "\f07d";
}

/* line 555, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-arrows-h:before {
  content: "\f07e";
}

/* line 558, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bar-chart-o:before,
.fa-bar-chart:before {
  content: "\f080";
}

/* line 562, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-twitter-square:before {
  content: "\f081";
}

/* line 565, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-facebook-square:before {
  content: "\f082";
}

/* line 568, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-camera-retro:before {
  content: "\f083";
}

/* line 571, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-key:before {
  content: "\f084";
}

/* line 574, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-gears:before,
.fa-cogs:before {
  content: "\f085";
}

/* line 578, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-comments:before {
  content: "\f086";
}

/* line 581, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-thumbs-o-up:before {
  content: "\f087";
}

/* line 584, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-thumbs-o-down:before {
  content: "\f088";
}

/* line 587, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-star-half:before {
  content: "\f089";
}

/* line 590, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-heart-o:before {
  content: "\f08a";
}

/* line 593, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-sign-out:before {
  content: "\f08b";
}

/* line 596, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-linkedin-square:before {
  content: "\f08c";
}

/* line 599, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-thumb-tack:before {
  content: "\f08d";
}

/* line 602, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-external-link:before {
  content: "\f08e";
}

/* line 605, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-sign-in:before {
  content: "\f090";
}

/* line 608, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-trophy:before {
  content: "\f091";
}

/* line 611, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-github-square:before {
  content: "\f092";
}

/* line 614, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-upload:before {
  content: "\f093";
}

/* line 617, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-lemon-o:before {
  content: "\f094";
}

/* line 620, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-phone:before {
  content: "\f095";
}

/* line 623, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-square-o:before {
  content: "\f096";
}

/* line 626, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bookmark-o:before {
  content: "\f097";
}

/* line 629, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-phone-square:before {
  content: "\f098";
}

/* line 632, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-twitter:before {
  content: "\f099";
}

/* line 635, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-facebook-f:before,
.fa-facebook:before {
  content: "\f09a";
}

/* line 639, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-github:before {
  content: "\f09b";
}

/* line 642, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-unlock:before {
  content: "\f09c";
}

/* line 645, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-credit-card:before {
  content: "\f09d";
}

/* line 648, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-feed:before,
.fa-rss:before {
  content: "\f09e";
}

/* line 652, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hdd-o:before {
  content: "\f0a0";
}

/* line 655, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bullhorn:before {
  content: "\f0a1";
}

/* line 658, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bell:before {
  content: "\f0f3";
}

/* line 661, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-certificate:before {
  content: "\f0a3";
}

/* line 664, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hand-o-right:before {
  content: "\f0a4";
}

/* line 667, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hand-o-left:before {
  content: "\f0a5";
}

/* line 670, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hand-o-up:before {
  content: "\f0a6";
}

/* line 673, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hand-o-down:before {
  content: "\f0a7";
}

/* line 676, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-arrow-circle-left:before {
  content: "\f0a8";
}

/* line 679, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-arrow-circle-right:before {
  content: "\f0a9";
}

/* line 682, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-arrow-circle-up:before {
  content: "\f0aa";
}

/* line 685, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-arrow-circle-down:before {
  content: "\f0ab";
}

/* line 688, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-globe:before {
  content: "\f0ac";
}

/* line 691, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-wrench:before {
  content: "\f0ad";
}

/* line 694, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-tasks:before {
  content: "\f0ae";
}

/* line 697, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-filter:before {
  content: "\f0b0";
}

/* line 700, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-briefcase:before {
  content: "\f0b1";
}

/* line 703, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-arrows-alt:before {
  content: "\f0b2";
}

/* line 706, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-group:before,
.fa-users:before {
  content: "\f0c0";
}

/* line 710, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-chain:before,
.fa-link:before {
  content: "\f0c1";
}

/* line 714, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cloud:before {
  content: "\f0c2";
}

/* line 717, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-flask:before {
  content: "\f0c3";
}

/* line 720, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cut:before,
.fa-scissors:before {
  content: "\f0c4";
}

/* line 724, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-copy:before,
.fa-files-o:before {
  content: "\f0c5";
}

/* line 728, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-paperclip:before {
  content: "\f0c6";
}

/* line 731, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-save:before,
.fa-floppy-o:before {
  content: "\f0c7";
}

/* line 735, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-square:before {
  content: "\f0c8";
}

/* line 738, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  content: "\f0c9";
}

/* line 743, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-list-ul:before {
  content: "\f0ca";
}

/* line 746, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-list-ol:before {
  content: "\f0cb";
}

/* line 749, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-strikethrough:before {
  content: "\f0cc";
}

/* line 752, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-underline:before {
  content: "\f0cd";
}

/* line 755, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-table:before {
  content: "\f0ce";
}

/* line 758, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-magic:before {
  content: "\f0d0";
}

/* line 761, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-truck:before {
  content: "\f0d1";
}

/* line 764, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-pinterest:before {
  content: "\f0d2";
}

/* line 767, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-pinterest-square:before {
  content: "\f0d3";
}

/* line 770, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-google-plus-square:before {
  content: "\f0d4";
}

/* line 773, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-google-plus:before {
  content: "\f0d5";
}

/* line 776, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-money:before {
  content: "\f0d6";
}

/* line 779, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-caret-down:before {
  content: "\f0d7";
}

/* line 782, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-caret-up:before {
  content: "\f0d8";
}

/* line 785, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-caret-left:before {
  content: "\f0d9";
}

/* line 788, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-caret-right:before {
  content: "\f0da";
}

/* line 791, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-columns:before {
  content: "\f0db";
}

/* line 794, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-unsorted:before,
.fa-sort:before {
  content: "\f0dc";
}

/* line 798, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-sort-down:before,
.fa-sort-desc:before {
  content: "\f0dd";
}

/* line 802, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-sort-up:before,
.fa-sort-asc:before {
  content: "\f0de";
}

/* line 806, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-envelope:before {
  content: "\f0e0";
}

/* line 809, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-linkedin:before {
  content: "\f0e1";
}

/* line 812, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-rotate-left:before,
.fa-undo:before {
  content: "\f0e2";
}

/* line 816, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-legal:before,
.fa-gavel:before {
  content: "\f0e3";
}

/* line 820, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-dashboard:before,
.fa-tachometer:before {
  content: "\f0e4";
}

/* line 824, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-comment-o:before {
  content: "\f0e5";
}

/* line 827, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-comments-o:before {
  content: "\f0e6";
}

/* line 830, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-flash:before,
.fa-bolt:before {
  content: "\f0e7";
}

/* line 834, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-sitemap:before {
  content: "\f0e8";
}

/* line 837, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-umbrella:before {
  content: "\f0e9";
}

/* line 840, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-paste:before,
.fa-clipboard:before {
  content: "\f0ea";
}

/* line 844, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-lightbulb-o:before {
  content: "\f0eb";
}

/* line 847, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-exchange:before {
  content: "\f0ec";
}

/* line 850, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cloud-download:before {
  content: "\f0ed";
}

/* line 853, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cloud-upload:before {
  content: "\f0ee";
}

/* line 856, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-user-md:before {
  content: "\f0f0";
}

/* line 859, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-stethoscope:before {
  content: "\f0f1";
}

/* line 862, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-suitcase:before {
  content: "\f0f2";
}

/* line 865, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bell-o:before {
  content: "\f0a2";
}

/* line 868, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-coffee:before {
  content: "\f0f4";
}

/* line 871, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cutlery:before {
  content: "\f0f5";
}

/* line 874, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-file-text-o:before {
  content: "\f0f6";
}

/* line 877, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-building-o:before {
  content: "\f0f7";
}

/* line 880, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hospital-o:before {
  content: "\f0f8";
}

/* line 883, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-ambulance:before {
  content: "\f0f9";
}

/* line 886, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-medkit:before {
  content: "\f0fa";
}

/* line 889, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-fighter-jet:before {
  content: "\f0fb";
}

/* line 892, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-beer:before {
  content: "\f0fc";
}

/* line 895, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-h-square:before {
  content: "\f0fd";
}

/* line 898, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-plus-square:before {
  content: "\f0fe";
}

/* line 901, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-angle-double-left:before {
  content: "\f100";
}

/* line 904, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-angle-double-right:before {
  content: "\f101";
}

/* line 907, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-angle-double-up:before {
  content: "\f102";
}

/* line 910, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-angle-double-down:before {
  content: "\f103";
}

/* line 913, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-angle-left:before {
  content: "\f104";
}

/* line 916, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-angle-right:before {
  content: "\f105";
}

/* line 919, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-angle-up:before {
  content: "\f106";
}

/* line 922, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-angle-down:before {
  content: "\f107";
}

/* line 925, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-desktop:before {
  content: "\f108";
}

/* line 928, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-laptop:before {
  content: "\f109";
}

/* line 931, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-tablet:before {
  content: "\f10a";
}

/* line 934, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-mobile-phone:before,
.fa-mobile:before {
  content: "\f10b";
}

/* line 938, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-circle-o:before {
  content: "\f10c";
}

/* line 941, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-quote-left:before {
  content: "\f10d";
}

/* line 944, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-quote-right:before {
  content: "\f10e";
}

/* line 947, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-spinner:before {
  content: "\f110";
}

/* line 950, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-circle:before {
  content: "\f111";
}

/* line 953, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-mail-reply:before,
.fa-reply:before {
  content: "\f112";
}

/* line 957, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-github-alt:before {
  content: "\f113";
}

/* line 960, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-folder-o:before {
  content: "\f114";
}

/* line 963, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-folder-open-o:before {
  content: "\f115";
}

/* line 966, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-smile-o:before {
  content: "\f118";
}

/* line 969, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-frown-o:before {
  content: "\f119";
}

/* line 972, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-meh-o:before {
  content: "\f11a";
}

/* line 975, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-gamepad:before {
  content: "\f11b";
}

/* line 978, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-keyboard-o:before {
  content: "\f11c";
}

/* line 981, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-flag-o:before {
  content: "\f11d";
}

/* line 984, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-flag-checkered:before {
  content: "\f11e";
}

/* line 987, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-terminal:before {
  content: "\f120";
}

/* line 990, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-code:before {
  content: "\f121";
}

/* line 993, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-mail-reply-all:before,
.fa-reply-all:before {
  content: "\f122";
}

/* line 997, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: "\f123";
}

/* line 1002, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-location-arrow:before {
  content: "\f124";
}

/* line 1005, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-crop:before {
  content: "\f125";
}

/* line 1008, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-code-fork:before {
  content: "\f126";
}

/* line 1011, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-unlink:before,
.fa-chain-broken:before {
  content: "\f127";
}

/* line 1015, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-question:before {
  content: "\f128";
}

/* line 1018, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-info:before {
  content: "\f129";
}

/* line 1021, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-exclamation:before {
  content: "\f12a";
}

/* line 1024, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-superscript:before {
  content: "\f12b";
}

/* line 1027, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-subscript:before {
  content: "\f12c";
}

/* line 1030, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-eraser:before {
  content: "\f12d";
}

/* line 1033, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-puzzle-piece:before {
  content: "\f12e";
}

/* line 1036, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-microphone:before {
  content: "\f130";
}

/* line 1039, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-microphone-slash:before {
  content: "\f131";
}

/* line 1042, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-shield:before {
  content: "\f132";
}

/* line 1045, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-calendar-o:before {
  content: "\f133";
}

/* line 1048, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-fire-extinguisher:before {
  content: "\f134";
}

/* line 1051, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-rocket:before {
  content: "\f135";
}

/* line 1054, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-maxcdn:before {
  content: "\f136";
}

/* line 1057, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-chevron-circle-left:before {
  content: "\f137";
}

/* line 1060, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-chevron-circle-right:before {
  content: "\f138";
}

/* line 1063, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-chevron-circle-up:before {
  content: "\f139";
}

/* line 1066, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-chevron-circle-down:before {
  content: "\f13a";
}

/* line 1069, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-html5:before {
  content: "\f13b";
}

/* line 1072, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-css3:before {
  content: "\f13c";
}

/* line 1075, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-anchor:before {
  content: "\f13d";
}

/* line 1078, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-unlock-alt:before {
  content: "\f13e";
}

/* line 1081, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bullseye:before {
  content: "\f140";
}

/* line 1084, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-ellipsis-h:before {
  content: "\f141";
}

/* line 1087, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-ellipsis-v:before {
  content: "\f142";
}

/* line 1090, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-rss-square:before {
  content: "\f143";
}

/* line 1093, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-play-circle:before {
  content: "\f144";
}

/* line 1096, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-ticket:before {
  content: "\f145";
}

/* line 1099, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-minus-square:before {
  content: "\f146";
}

/* line 1102, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-minus-square-o:before {
  content: "\f147";
}

/* line 1105, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-level-up:before {
  content: "\f148";
}

/* line 1108, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-level-down:before {
  content: "\f149";
}

/* line 1111, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-check-square:before {
  content: "\f14a";
}

/* line 1114, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-pencil-square:before {
  content: "\f14b";
}

/* line 1117, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-external-link-square:before {
  content: "\f14c";
}

/* line 1120, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-share-square:before {
  content: "\f14d";
}

/* line 1123, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-compass:before {
  content: "\f14e";
}

/* line 1126, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: "\f150";
}

/* line 1130, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: "\f151";
}

/* line 1134, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: "\f152";
}

/* line 1138, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-euro:before,
.fa-eur:before {
  content: "\f153";
}

/* line 1142, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-gbp:before {
  content: "\f154";
}

/* line 1145, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-dollar:before,
.fa-usd:before {
  content: "\f155";
}

/* line 1149, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-rupee:before,
.fa-inr:before {
  content: "\f156";
}

/* line 1153, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: "\f157";
}

/* line 1159, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: "\f158";
}

/* line 1164, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-won:before,
.fa-krw:before {
  content: "\f159";
}

/* line 1168, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bitcoin:before,
.fa-btc:before {
  content: "\f15a";
}

/* line 1172, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-file:before {
  content: "\f15b";
}

/* line 1175, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-file-text:before {
  content: "\f15c";
}

/* line 1178, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-sort-alpha-asc:before {
  content: "\f15d";
}

/* line 1181, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-sort-alpha-desc:before {
  content: "\f15e";
}

/* line 1184, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-sort-amount-asc:before {
  content: "\f160";
}

/* line 1187, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-sort-amount-desc:before {
  content: "\f161";
}

/* line 1190, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-sort-numeric-asc:before {
  content: "\f162";
}

/* line 1193, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-sort-numeric-desc:before {
  content: "\f163";
}

/* line 1196, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-thumbs-up:before {
  content: "\f164";
}

/* line 1199, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-thumbs-down:before {
  content: "\f165";
}

/* line 1202, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-youtube-square:before {
  content: "\f166";
}

/* line 1205, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-youtube:before {
  content: "\f167";
}

/* line 1208, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-xing:before {
  content: "\f168";
}

/* line 1211, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-xing-square:before {
  content: "\f169";
}

/* line 1214, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-youtube-play:before {
  content: "\f16a";
}

/* line 1217, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-dropbox:before {
  content: "\f16b";
}

/* line 1220, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-stack-overflow:before {
  content: "\f16c";
}

/* line 1223, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-instagram:before {
  content: "\f16d";
}

/* line 1226, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-flickr:before {
  content: "\f16e";
}

/* line 1229, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-adn:before {
  content: "\f170";
}

/* line 1232, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bitbucket:before {
  content: "\f171";
}

/* line 1235, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bitbucket-square:before {
  content: "\f172";
}

/* line 1238, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-tumblr:before {
  content: "\f173";
}

/* line 1241, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-tumblr-square:before {
  content: "\f174";
}

/* line 1244, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-long-arrow-down:before {
  content: "\f175";
}

/* line 1247, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-long-arrow-up:before {
  content: "\f176";
}

/* line 1250, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-long-arrow-left:before {
  content: "\f177";
}

/* line 1253, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-long-arrow-right:before {
  content: "\f178";
}

/* line 1256, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-apple:before {
  content: "\f179";
}

/* line 1259, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-windows:before {
  content: "\f17a";
}

/* line 1262, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-android:before {
  content: "\f17b";
}

/* line 1265, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-linux:before {
  content: "\f17c";
}

/* line 1268, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-dribbble:before {
  content: "\f17d";
}

/* line 1271, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-skype:before {
  content: "\f17e";
}

/* line 1274, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-foursquare:before {
  content: "\f180";
}

/* line 1277, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-trello:before {
  content: "\f181";
}

/* line 1280, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-female:before {
  content: "\f182";
}

/* line 1283, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-male:before {
  content: "\f183";
}

/* line 1286, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-gittip:before,
.fa-gratipay:before {
  content: "\f184";
}

/* line 1290, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-sun-o:before {
  content: "\f185";
}

/* line 1293, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-moon-o:before {
  content: "\f186";
}

/* line 1296, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-archive:before {
  content: "\f187";
}

/* line 1299, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bug:before {
  content: "\f188";
}

/* line 1302, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-vk:before {
  content: "\f189";
}

/* line 1305, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-weibo:before {
  content: "\f18a";
}

/* line 1308, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-renren:before {
  content: "\f18b";
}

/* line 1311, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-pagelines:before {
  content: "\f18c";
}

/* line 1314, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-stack-exchange:before {
  content: "\f18d";
}

/* line 1317, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-arrow-circle-o-right:before {
  content: "\f18e";
}

/* line 1320, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-arrow-circle-o-left:before {
  content: "\f190";
}

/* line 1323, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: "\f191";
}

/* line 1327, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-dot-circle-o:before {
  content: "\f192";
}

/* line 1330, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-wheelchair:before {
  content: "\f193";
}

/* line 1333, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-vimeo-square:before {
  content: "\f194";
}

/* line 1336, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-turkish-lira:before,
.fa-try:before {
  content: "\f195";
}

/* line 1340, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-plus-square-o:before {
  content: "\f196";
}

/* line 1343, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-space-shuttle:before {
  content: "\f197";
}

/* line 1346, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-slack:before {
  content: "\f198";
}

/* line 1349, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-envelope-square:before {
  content: "\f199";
}

/* line 1352, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-wordpress:before {
  content: "\f19a";
}

/* line 1355, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-openid:before {
  content: "\f19b";
}

/* line 1358, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-institution:before,
.fa-bank:before,
.fa-university:before {
  content: "\f19c";
}

/* line 1363, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-mortar-board:before,
.fa-graduation-cap:before {
  content: "\f19d";
}

/* line 1367, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-yahoo:before {
  content: "\f19e";
}

/* line 1370, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-google:before {
  content: "\f1a0";
}

/* line 1373, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-reddit:before {
  content: "\f1a1";
}

/* line 1376, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-reddit-square:before {
  content: "\f1a2";
}

/* line 1379, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-stumbleupon-circle:before {
  content: "\f1a3";
}

/* line 1382, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-stumbleupon:before {
  content: "\f1a4";
}

/* line 1385, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-delicious:before {
  content: "\f1a5";
}

/* line 1388, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-digg:before {
  content: "\f1a6";
}

/* line 1391, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-pied-piper-pp:before {
  content: "\f1a7";
}

/* line 1394, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-pied-piper-alt:before {
  content: "\f1a8";
}

/* line 1397, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-drupal:before {
  content: "\f1a9";
}

/* line 1400, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-joomla:before {
  content: "\f1aa";
}

/* line 1403, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-language:before {
  content: "\f1ab";
}

/* line 1406, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-fax:before {
  content: "\f1ac";
}

/* line 1409, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-building:before {
  content: "\f1ad";
}

/* line 1412, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-child:before {
  content: "\f1ae";
}

/* line 1415, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-paw:before {
  content: "\f1b0";
}

/* line 1418, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-spoon:before {
  content: "\f1b1";
}

/* line 1421, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cube:before {
  content: "\f1b2";
}

/* line 1424, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cubes:before {
  content: "\f1b3";
}

/* line 1427, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-behance:before {
  content: "\f1b4";
}

/* line 1430, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-behance-square:before {
  content: "\f1b5";
}

/* line 1433, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-steam:before {
  content: "\f1b6";
}

/* line 1436, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-steam-square:before {
  content: "\f1b7";
}

/* line 1439, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-recycle:before {
  content: "\f1b8";
}

/* line 1442, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-automobile:before,
.fa-car:before {
  content: "\f1b9";
}

/* line 1446, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cab:before,
.fa-taxi:before {
  content: "\f1ba";
}

/* line 1450, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-tree:before {
  content: "\f1bb";
}

/* line 1453, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-spotify:before {
  content: "\f1bc";
}

/* line 1456, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-deviantart:before {
  content: "\f1bd";
}

/* line 1459, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-soundcloud:before {
  content: "\f1be";
}

/* line 1462, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-database:before {
  content: "\f1c0";
}

/* line 1465, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-file-pdf-o:before {
  content: "\f1c1";
}

/* line 1468, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-file-word-o:before {
  content: "\f1c2";
}

/* line 1471, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-file-excel-o:before {
  content: "\f1c3";
}

/* line 1474, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-file-powerpoint-o:before {
  content: "\f1c4";
}

/* line 1477, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
  content: "\f1c5";
}

/* line 1482, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-file-zip-o:before,
.fa-file-archive-o:before {
  content: "\f1c6";
}

/* line 1486, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-file-sound-o:before,
.fa-file-audio-o:before {
  content: "\f1c7";
}

/* line 1490, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-file-movie-o:before,
.fa-file-video-o:before {
  content: "\f1c8";
}

/* line 1494, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-file-code-o:before {
  content: "\f1c9";
}

/* line 1497, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-vine:before {
  content: "\f1ca";
}

/* line 1500, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-codepen:before {
  content: "\f1cb";
}

/* line 1503, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-jsfiddle:before {
  content: "\f1cc";
}

/* line 1506, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
  content: "\f1cd";
}

/* line 1513, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-circle-o-notch:before {
  content: "\f1ce";
}

/* line 1516, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-ra:before,
.fa-resistance:before,
.fa-rebel:before {
  content: "\f1d0";
}

/* line 1521, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-ge:before,
.fa-empire:before {
  content: "\f1d1";
}

/* line 1525, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-git-square:before {
  content: "\f1d2";
}

/* line 1528, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-git:before {
  content: "\f1d3";
}

/* line 1531, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-y-combinator-square:before,
.fa-yc-square:before,
.fa-hacker-news:before {
  content: "\f1d4";
}

/* line 1536, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-tencent-weibo:before {
  content: "\f1d5";
}

/* line 1539, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-qq:before {
  content: "\f1d6";
}

/* line 1542, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-wechat:before,
.fa-weixin:before {
  content: "\f1d7";
}

/* line 1546, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-send:before,
.fa-paper-plane:before {
  content: "\f1d8";
}

/* line 1550, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-send-o:before,
.fa-paper-plane-o:before {
  content: "\f1d9";
}

/* line 1554, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-history:before {
  content: "\f1da";
}

/* line 1557, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-circle-thin:before {
  content: "\f1db";
}

/* line 1560, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-header:before {
  content: "\f1dc";
}

/* line 1563, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-paragraph:before {
  content: "\f1dd";
}

/* line 1566, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-sliders:before {
  content: "\f1de";
}

/* line 1569, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-share-alt:before {
  content: "\f1e0";
}

/* line 1572, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-share-alt-square:before {
  content: "\f1e1";
}

/* line 1575, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bomb:before {
  content: "\f1e2";
}

/* line 1578, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-soccer-ball-o:before,
.fa-futbol-o:before {
  content: "\f1e3";
}

/* line 1582, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-tty:before {
  content: "\f1e4";
}

/* line 1585, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-binoculars:before {
  content: "\f1e5";
}

/* line 1588, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-plug:before {
  content: "\f1e6";
}

/* line 1591, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-slideshare:before {
  content: "\f1e7";
}

/* line 1594, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-twitch:before {
  content: "\f1e8";
}

/* line 1597, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-yelp:before {
  content: "\f1e9";
}

/* line 1600, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-newspaper-o:before {
  content: "\f1ea";
}

/* line 1603, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-wifi:before {
  content: "\f1eb";
}

/* line 1606, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-calculator:before {
  content: "\f1ec";
}

/* line 1609, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-paypal:before {
  content: "\f1ed";
}

/* line 1612, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-google-wallet:before {
  content: "\f1ee";
}

/* line 1615, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cc-visa:before {
  content: "\f1f0";
}

/* line 1618, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cc-mastercard:before {
  content: "\f1f1";
}

/* line 1621, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cc-discover:before {
  content: "\f1f2";
}

/* line 1624, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cc-amex:before {
  content: "\f1f3";
}

/* line 1627, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cc-paypal:before {
  content: "\f1f4";
}

/* line 1630, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cc-stripe:before {
  content: "\f1f5";
}

/* line 1633, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bell-slash:before {
  content: "\f1f6";
}

/* line 1636, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bell-slash-o:before {
  content: "\f1f7";
}

/* line 1639, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-trash:before {
  content: "\f1f8";
}

/* line 1642, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-copyright:before {
  content: "\f1f9";
}

/* line 1645, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-at:before {
  content: "\f1fa";
}

/* line 1648, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-eyedropper:before {
  content: "\f1fb";
}

/* line 1651, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-paint-brush:before {
  content: "\f1fc";
}

/* line 1654, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-birthday-cake:before {
  content: "\f1fd";
}

/* line 1657, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-area-chart:before {
  content: "\f1fe";
}

/* line 1660, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-pie-chart:before {
  content: "\f200";
}

/* line 1663, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-line-chart:before {
  content: "\f201";
}

/* line 1666, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-lastfm:before {
  content: "\f202";
}

/* line 1669, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-lastfm-square:before {
  content: "\f203";
}

/* line 1672, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-toggle-off:before {
  content: "\f204";
}

/* line 1675, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-toggle-on:before {
  content: "\f205";
}

/* line 1678, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bicycle:before {
  content: "\f206";
}

/* line 1681, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bus:before {
  content: "\f207";
}

/* line 1684, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-ioxhost:before {
  content: "\f208";
}

/* line 1687, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-angellist:before {
  content: "\f209";
}

/* line 1690, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cc:before {
  content: "\f20a";
}

/* line 1693, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-shekel:before,
.fa-sheqel:before,
.fa-ils:before {
  content: "\f20b";
}

/* line 1698, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-meanpath:before {
  content: "\f20c";
}

/* line 1701, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-buysellads:before {
  content: "\f20d";
}

/* line 1704, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-connectdevelop:before {
  content: "\f20e";
}

/* line 1707, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-dashcube:before {
  content: "\f210";
}

/* line 1710, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-forumbee:before {
  content: "\f211";
}

/* line 1713, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-leanpub:before {
  content: "\f212";
}

/* line 1716, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-sellsy:before {
  content: "\f213";
}

/* line 1719, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-shirtsinbulk:before {
  content: "\f214";
}

/* line 1722, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-simplybuilt:before {
  content: "\f215";
}

/* line 1725, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-skyatlas:before {
  content: "\f216";
}

/* line 1728, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cart-plus:before {
  content: "\f217";
}

/* line 1731, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cart-arrow-down:before {
  content: "\f218";
}

/* line 1734, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-diamond:before {
  content: "\f219";
}

/* line 1737, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-ship:before {
  content: "\f21a";
}

/* line 1740, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-user-secret:before {
  content: "\f21b";
}

/* line 1743, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-motorcycle:before {
  content: "\f21c";
}

/* line 1746, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-street-view:before {
  content: "\f21d";
}

/* line 1749, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-heartbeat:before {
  content: "\f21e";
}

/* line 1752, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-venus:before {
  content: "\f221";
}

/* line 1755, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-mars:before {
  content: "\f222";
}

/* line 1758, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-mercury:before {
  content: "\f223";
}

/* line 1761, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-intersex:before,
.fa-transgender:before {
  content: "\f224";
}

/* line 1765, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-transgender-alt:before {
  content: "\f225";
}

/* line 1768, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-venus-double:before {
  content: "\f226";
}

/* line 1771, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-mars-double:before {
  content: "\f227";
}

/* line 1774, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-venus-mars:before {
  content: "\f228";
}

/* line 1777, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-mars-stroke:before {
  content: "\f229";
}

/* line 1780, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-mars-stroke-v:before {
  content: "\f22a";
}

/* line 1783, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-mars-stroke-h:before {
  content: "\f22b";
}

/* line 1786, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-neuter:before {
  content: "\f22c";
}

/* line 1789, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-genderless:before {
  content: "\f22d";
}

/* line 1792, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-facebook-official:before {
  content: "\f230";
}

/* line 1795, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-pinterest-p:before {
  content: "\f231";
}

/* line 1798, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-whatsapp:before {
  content: "\f232";
}

/* line 1801, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-server:before {
  content: "\f233";
}

/* line 1804, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-user-plus:before {
  content: "\f234";
}

/* line 1807, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-user-times:before {
  content: "\f235";
}

/* line 1810, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hotel:before,
.fa-bed:before {
  content: "\f236";
}

/* line 1814, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-viacoin:before {
  content: "\f237";
}

/* line 1817, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-train:before {
  content: "\f238";
}

/* line 1820, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-subway:before {
  content: "\f239";
}

/* line 1823, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-medium:before {
  content: "\f23a";
}

/* line 1826, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-yc:before,
.fa-y-combinator:before {
  content: "\f23b";
}

/* line 1830, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-optin-monster:before {
  content: "\f23c";
}

/* line 1833, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-opencart:before {
  content: "\f23d";
}

/* line 1836, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-expeditedssl:before {
  content: "\f23e";
}

/* line 1839, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-battery-4:before,
.fa-battery:before,
.fa-battery-full:before {
  content: "\f240";
}

/* line 1844, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-battery-3:before,
.fa-battery-three-quarters:before {
  content: "\f241";
}

/* line 1848, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-battery-2:before,
.fa-battery-half:before {
  content: "\f242";
}

/* line 1852, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-battery-1:before,
.fa-battery-quarter:before {
  content: "\f243";
}

/* line 1856, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-battery-0:before,
.fa-battery-empty:before {
  content: "\f244";
}

/* line 1860, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-mouse-pointer:before {
  content: "\f245";
}

/* line 1863, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-i-cursor:before {
  content: "\f246";
}

/* line 1866, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-object-group:before {
  content: "\f247";
}

/* line 1869, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-object-ungroup:before {
  content: "\f248";
}

/* line 1872, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-sticky-note:before {
  content: "\f249";
}

/* line 1875, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-sticky-note-o:before {
  content: "\f24a";
}

/* line 1878, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cc-jcb:before {
  content: "\f24b";
}

/* line 1881, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-cc-diners-club:before {
  content: "\f24c";
}

/* line 1884, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-clone:before {
  content: "\f24d";
}

/* line 1887, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-balance-scale:before {
  content: "\f24e";
}

/* line 1890, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hourglass-o:before {
  content: "\f250";
}

/* line 1893, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hourglass-1:before,
.fa-hourglass-start:before {
  content: "\f251";
}

/* line 1897, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hourglass-2:before,
.fa-hourglass-half:before {
  content: "\f252";
}

/* line 1901, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hourglass-3:before,
.fa-hourglass-end:before {
  content: "\f253";
}

/* line 1905, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hourglass:before {
  content: "\f254";
}

/* line 1908, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hand-grab-o:before,
.fa-hand-rock-o:before {
  content: "\f255";
}

/* line 1912, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hand-stop-o:before,
.fa-hand-paper-o:before {
  content: "\f256";
}

/* line 1916, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hand-scissors-o:before {
  content: "\f257";
}

/* line 1919, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hand-lizard-o:before {
  content: "\f258";
}

/* line 1922, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hand-spock-o:before {
  content: "\f259";
}

/* line 1925, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hand-pointer-o:before {
  content: "\f25a";
}

/* line 1928, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hand-peace-o:before {
  content: "\f25b";
}

/* line 1931, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-trademark:before {
  content: "\f25c";
}

/* line 1934, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-registered:before {
  content: "\f25d";
}

/* line 1937, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-creative-commons:before {
  content: "\f25e";
}

/* line 1940, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-gg:before {
  content: "\f260";
}

/* line 1943, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-gg-circle:before {
  content: "\f261";
}

/* line 1946, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-tripadvisor:before {
  content: "\f262";
}

/* line 1949, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-odnoklassniki:before {
  content: "\f263";
}

/* line 1952, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-odnoklassniki-square:before {
  content: "\f264";
}

/* line 1955, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-get-pocket:before {
  content: "\f265";
}

/* line 1958, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-wikipedia-w:before {
  content: "\f266";
}

/* line 1961, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-safari:before {
  content: "\f267";
}

/* line 1964, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-chrome:before {
  content: "\f268";
}

/* line 1967, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-firefox:before {
  content: "\f269";
}

/* line 1970, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-opera:before {
  content: "\f26a";
}

/* line 1973, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-internet-explorer:before {
  content: "\f26b";
}

/* line 1976, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-tv:before,
.fa-television:before {
  content: "\f26c";
}

/* line 1980, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-contao:before {
  content: "\f26d";
}

/* line 1983, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-500px:before {
  content: "\f26e";
}

/* line 1986, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-amazon:before {
  content: "\f270";
}

/* line 1989, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-calendar-plus-o:before {
  content: "\f271";
}

/* line 1992, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-calendar-minus-o:before {
  content: "\f272";
}

/* line 1995, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-calendar-times-o:before {
  content: "\f273";
}

/* line 1998, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-calendar-check-o:before {
  content: "\f274";
}

/* line 2001, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-industry:before {
  content: "\f275";
}

/* line 2004, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-map-pin:before {
  content: "\f276";
}

/* line 2007, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-map-signs:before {
  content: "\f277";
}

/* line 2010, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-map-o:before {
  content: "\f278";
}

/* line 2013, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-map:before {
  content: "\f279";
}

/* line 2016, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-commenting:before {
  content: "\f27a";
}

/* line 2019, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-commenting-o:before {
  content: "\f27b";
}

/* line 2022, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-houzz:before {
  content: "\f27c";
}

/* line 2025, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-vimeo:before {
  content: "\f27d";
}

/* line 2028, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-black-tie:before {
  content: "\f27e";
}

/* line 2031, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-fonticons:before {
  content: "\f280";
}

/* line 2034, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-reddit-alien:before {
  content: "\f281";
}

/* line 2037, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-edge:before {
  content: "\f282";
}

/* line 2040, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-credit-card-alt:before {
  content: "\f283";
}

/* line 2043, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-codiepie:before {
  content: "\f284";
}

/* line 2046, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-modx:before {
  content: "\f285";
}

/* line 2049, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-fort-awesome:before {
  content: "\f286";
}

/* line 2052, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-usb:before {
  content: "\f287";
}

/* line 2055, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-product-hunt:before {
  content: "\f288";
}

/* line 2058, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-mixcloud:before {
  content: "\f289";
}

/* line 2061, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-scribd:before {
  content: "\f28a";
}

/* line 2064, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-pause-circle:before {
  content: "\f28b";
}

/* line 2067, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-pause-circle-o:before {
  content: "\f28c";
}

/* line 2070, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-stop-circle:before {
  content: "\f28d";
}

/* line 2073, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-stop-circle-o:before {
  content: "\f28e";
}

/* line 2076, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-shopping-bag:before {
  content: "\f290";
}

/* line 2079, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-shopping-basket:before {
  content: "\f291";
}

/* line 2082, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-hashtag:before {
  content: "\f292";
}

/* line 2085, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bluetooth:before {
  content: "\f293";
}

/* line 2088, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bluetooth-b:before {
  content: "\f294";
}

/* line 2091, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-percent:before {
  content: "\f295";
}

/* line 2094, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-gitlab:before {
  content: "\f296";
}

/* line 2097, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-wpbeginner:before {
  content: "\f297";
}

/* line 2100, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-wpforms:before {
  content: "\f298";
}

/* line 2103, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-envira:before {
  content: "\f299";
}

/* line 2106, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-universal-access:before {
  content: "\f29a";
}

/* line 2109, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-wheelchair-alt:before {
  content: "\f29b";
}

/* line 2112, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-question-circle-o:before {
  content: "\f29c";
}

/* line 2115, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-blind:before {
  content: "\f29d";
}

/* line 2118, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-audio-description:before {
  content: "\f29e";
}

/* line 2121, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-volume-control-phone:before {
  content: "\f2a0";
}

/* line 2124, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-braille:before {
  content: "\f2a1";
}

/* line 2127, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-assistive-listening-systems:before {
  content: "\f2a2";
}

/* line 2130, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-asl-interpreting:before,
.fa-american-sign-language-interpreting:before {
  content: "\f2a3";
}

/* line 2134, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-deafness:before,
.fa-hard-of-hearing:before,
.fa-deaf:before {
  content: "\f2a4";
}

/* line 2139, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-glide:before {
  content: "\f2a5";
}

/* line 2142, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-glide-g:before {
  content: "\f2a6";
}

/* line 2145, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-signing:before,
.fa-sign-language:before {
  content: "\f2a7";
}

/* line 2149, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-low-vision:before {
  content: "\f2a8";
}

/* line 2152, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-viadeo:before {
  content: "\f2a9";
}

/* line 2155, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-viadeo-square:before {
  content: "\f2aa";
}

/* line 2158, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-snapchat:before {
  content: "\f2ab";
}

/* line 2161, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-snapchat-ghost:before {
  content: "\f2ac";
}

/* line 2164, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-snapchat-square:before {
  content: "\f2ad";
}

/* line 2167, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-pied-piper:before {
  content: "\f2ae";
}

/* line 2170, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-first-order:before {
  content: "\f2b0";
}

/* line 2173, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-yoast:before {
  content: "\f2b1";
}

/* line 2176, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-themeisle:before {
  content: "\f2b2";
}

/* line 2179, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-google-plus-circle:before,
.fa-google-plus-official:before {
  content: "\f2b3";
}

/* line 2183, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-fa:before,
.fa-font-awesome:before {
  content: "\f2b4";
}

/* line 2187, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-handshake-o:before {
  content: "\f2b5";
}

/* line 2190, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-envelope-open:before {
  content: "\f2b6";
}

/* line 2193, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-envelope-open-o:before {
  content: "\f2b7";
}

/* line 2196, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-linode:before {
  content: "\f2b8";
}

/* line 2199, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-address-book:before {
  content: "\f2b9";
}

/* line 2202, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-address-book-o:before {
  content: "\f2ba";
}

/* line 2205, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-vcard:before,
.fa-address-card:before {
  content: "\f2bb";
}

/* line 2209, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-vcard-o:before,
.fa-address-card-o:before {
  content: "\f2bc";
}

/* line 2213, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-user-circle:before {
  content: "\f2bd";
}

/* line 2216, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-user-circle-o:before {
  content: "\f2be";
}

/* line 2219, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-user-o:before {
  content: "\f2c0";
}

/* line 2222, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-id-badge:before {
  content: "\f2c1";
}

/* line 2225, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-drivers-license:before,
.fa-id-card:before {
  content: "\f2c2";
}

/* line 2229, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-drivers-license-o:before,
.fa-id-card-o:before {
  content: "\f2c3";
}

/* line 2233, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-quora:before {
  content: "\f2c4";
}

/* line 2236, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-free-code-camp:before {
  content: "\f2c5";
}

/* line 2239, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-telegram:before {
  content: "\f2c6";
}

/* line 2242, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-thermometer-4:before,
.fa-thermometer:before,
.fa-thermometer-full:before {
  content: "\f2c7";
}

/* line 2247, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-thermometer-3:before,
.fa-thermometer-three-quarters:before {
  content: "\f2c8";
}

/* line 2251, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-thermometer-2:before,
.fa-thermometer-half:before {
  content: "\f2c9";
}

/* line 2255, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-thermometer-1:before,
.fa-thermometer-quarter:before {
  content: "\f2ca";
}

/* line 2259, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-thermometer-0:before,
.fa-thermometer-empty:before {
  content: "\f2cb";
}

/* line 2263, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-shower:before {
  content: "\f2cc";
}

/* line 2266, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bathtub:before,
.fa-s15:before,
.fa-bath:before {
  content: "\f2cd";
}

/* line 2271, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-podcast:before {
  content: "\f2ce";
}

/* line 2274, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-window-maximize:before {
  content: "\f2d0";
}

/* line 2277, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-window-minimize:before {
  content: "\f2d1";
}

/* line 2280, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-window-restore:before {
  content: "\f2d2";
}

/* line 2283, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-times-rectangle:before,
.fa-window-close:before {
  content: "\f2d3";
}

/* line 2287, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-times-rectangle-o:before,
.fa-window-close-o:before {
  content: "\f2d4";
}

/* line 2291, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-bandcamp:before {
  content: "\f2d5";
}

/* line 2294, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-grav:before {
  content: "\f2d6";
}

/* line 2297, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-etsy:before {
  content: "\f2d7";
}

/* line 2300, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-imdb:before {
  content: "\f2d8";
}

/* line 2303, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-ravelry:before {
  content: "\f2d9";
}

/* line 2306, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-eercast:before {
  content: "\f2da";
}

/* line 2309, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-microchip:before {
  content: "\f2db";
}

/* line 2312, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-snowflake-o:before {
  content: "\f2dc";
}

/* line 2315, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-superpowers:before {
  content: "\f2dd";
}

/* line 2318, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-wpexplorer:before {
  content: "\f2de";
}

/* line 2321, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.fa-meetup:before {
  content: "\f2e0";
}

/* line 2324, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* line 2334, ../../shared/vendor/bundle/ruby/3.0.0/gems/font-awesome-rails-4.7.0.8/app/assets/stylesheets/font-awesome.css.erb */
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local(""), url(/assets/lato-v23-latin-300-d0fc37d2edbe5495ffb103aa51e720a95cb65e4edbf46490c261d86ec5032783.woff2) format("woff2"), url(/assets/lato-v23-latin-300-628ff5cd1f4e683bf5b07f4d85c4b7a62b62064d74c83a0314817690a14f863f.woff) format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lato-300italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: local(""), url(/assets/lato-v23-latin-300italic-1836268af0d687755a1dfa6305f7fa21ee541794e9922c20227feeef37d8ad05.woff2) format("woff2"), url(/assets/lato-v23-latin-300italic-2287e1ab48df88be7100fef24f0022820069519da8e8dbcdca0a3c42a53eb6f0.woff) format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local(""), url(/assets/lato-v23-latin-regular-f336c4167ce4b4c4d0964e7c255738f6fd1d6e9b3e3fd1a83ac3da5d02d9f24e.woff2) format("woff2"), url(/assets/lato-v23-latin-regular-d7e307b564f79b980058270eb2f9fc9584af54b06d38c24066153358746f31e8.woff) format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lato-italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local(""), url(/assets/lato-v23-latin-italic-942c1b08a77806d309ceb0748a0a5944680030bbcdace2d65492e6e069707ae7.woff2) format("woff2"), url(/assets/lato-v23-latin-italic-5681a58d43c2ca49395f82fe4944afc2d3baa33c80575d54367d946962e3ad23.woff) format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local(""), url(/assets/lato-v23-latin-700-3a707af503e34be1b9ec6596537c750f4a16b8aa9b281a5ceae2907a55490abf.woff2) format("woff2"), url(/assets/lato-v23-latin-700-ab8645dbaebf7f418355c567119de979534647c312adac639b098944da808dd7.woff) format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* permanent-marker-regular - latin */
@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/permanent-marker-v16-latin-regular-661d05290503f218a6c340b10fda241692ff9798a63bebf0d0c405d48e9c92a2.eot);
  /* IE9 Compat Modes */
  src: local(""), url(/assets/permanent-marker-v16-latin-regular-661d05290503f218a6c340b10fda241692ff9798a63bebf0d0c405d48e9c92a2.eot?#iefix) format("embedded-opentype"), url(/assets/permanent-marker-v16-latin-regular-36fe776191da747a61d671d27700a260b5e23a8364aeb02b30fc1981f86f94e8.woff2) format("woff2"), url(/assets/permanent-marker-v16-latin-regular-860d2241b186f5fa07cb23130c1371a31dd2410861f4cb7a993a49f13fe3b5a3.woff) format("woff"), url(/assets/permanent-marker-v16-latin-regular-89c5e46beb6c014d7c2161895e9b76149a8d5439e8faf47debf34057188dbff5.ttf) format("truetype"), url(/assets/permanent-marker-v16-latin-regular-c64f0c7951750c7c483420b5c1a7c31bd97d2744a9422a98bee48edc22a62eab.svg#PermanentMarker) format("svg");
  /* Legacy iOS */
}

@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(""), url(/assets/be-vietnam-pro-v12-500-87d42d4f852d32633aab2d110fa501c362fdb93ed787576e29481c2b1e8b7874.ttf) format("truetype");
}

@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local(""), url(/assets/be-vietnam-pro-v12-600-d262b0bf035ad461335ddc494063142db83a64f7590fcedba6b1c18c93fefd8e.ttf) format("truetype");
}

@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(""), url(/assets/be-vietnam-pro-v12-700-6f807585326d30145df300ddcd26642cfef76beda62e65dbb862ca193d3e2f63.ttf) format("truetype");
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url(/assets/ibm-plex-sans-v23-400-13dd9e187bec9a1f472a2477e6b3be14ebaba317996b698a9043e25618d09fbc.ttf) format("truetype");
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(""), url(/assets/ibm-plex-sans-v23-500-ff2d5d3218626e471f959e9e38669db2ca43d9ece332f24526b63283f2e2ae05.ttf) format("truetype");
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local(""), url(/assets/ibm-plex-sans-v23-600-a2b2931694d8829f667b4221894546c2637654711801c2819e20fc69fae4a4cb.ttf) format("truetype");
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url(/assets/ibm-plex-mono-v20-400-15ce8f5fb7b4c55f6190964adddbd27459512b496558c8d78d75cd89a59ee1f3.ttf) format("truetype");
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local(""), url(/assets/ibm-plex-mono-v20-600-5cd5fea3c6535b932474582405fe1122e28f5b24e016a395dc10cbe23eed0da1.ttf) format("truetype");
}

@keyframes spinner-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* line 21, app/assets/stylesheets/shared/spinner.sass */
.css-spinloader {
  display: block;
  width: 16px;
  height: 16px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-left-width: 0;
  border-top-color: currentColor;
  /* Chrome, Opera 15+, Safari 5+*/
  animation: spinner-spin 2s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera*/
}

/* line 35, app/assets/stylesheets/shared/spinner.sass */
.css-spinloader.fullpage-spinner {
  width: 64px;
  height: 64px;
  border-top-width: 4px;
  margin: 0 auto;
}

/* line 41, app/assets/stylesheets/shared/spinner.sass */
.css-spinloader.inline {
  display: inline-block;
  margin-left: 0;
  margin-right: 0.25rem;
}

/* line 47, app/assets/stylesheets/shared/spinner.sass */
span.css-spinloader {
  display: inline-block;
}

/* line 50, app/assets/stylesheets/shared/spinner.sass */
.inline-spinner span.css-spinloader {
  position: absolute;
}

/* line 53, app/assets/stylesheets/shared/spinner.sass */
.inline-spinner span.text {
  margin-left: 24px;
}

/* line 1, app/assets/stylesheets/sass/_cookie_banner.scss */
#cookie-banner {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  max-width: 62rem;
  padding: 1.75rem;
  background-color: #ffffff;
  color: #1f1f1f;
  border-radius: 0.75rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
  z-index: 1080;
  line-height: 1.5;
  gap: 1.25rem;
}

/* line 19, app/assets/stylesheets/sass/_cookie_banner.scss */
#cookie-banner.cookie-banner--visible {
  display: flex;
  flex-direction: column;
}

/* line 24, app/assets/stylesheets/sass/_cookie_banner.scss */
#cookie-banner .cookie-banner__copy {
  font-size: 1rem;
}

/* line 26, app/assets/stylesheets/sass/_cookie_banner.scss */
#cookie-banner .cookie-banner__copy strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

/* line 32, app/assets/stylesheets/sass/_cookie_banner.scss */
#cookie-banner .cookie-banner__copy p {
  margin: 0;
}

/* line 36, app/assets/stylesheets/sass/_cookie_banner.scss */
#cookie-banner .cookie-banner__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
  align-items: stretch;
}

/* line 44, app/assets/stylesheets/sass/_cookie_banner.scss */
#cookie-banner .cookie-banner__button {
  width: 100%;
}

@media (min-width: 768px) {
  /* line 49, app/assets/stylesheets/sass/_cookie_banner.scss */
  #cookie-banner.cookie-banner--visible {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  /* line 55, app/assets/stylesheets/sass/_cookie_banner.scss */
  #cookie-banner .cookie-banner__copy {
    flex: 1;
    margin-right: 1.5rem;
  }
  /* line 60, app/assets/stylesheets/sass/_cookie_banner.scss */
  #cookie-banner .cookie-banner__actions {
    flex-direction: row;
    align-items: center;
    margin-top: 0;
    justify-content: flex-end;
    gap: 1rem;
  }
  /* line 68, app/assets/stylesheets/sass/_cookie_banner.scss */
  #cookie-banner .cookie-banner__button {
    width: auto;
  }
}

@media (min-width: 992px) {
  /* line 74, app/assets/stylesheets/sass/_cookie_banner.scss */
  #cookie-banner {
    bottom: 2.5rem;
    padding: 2rem;
  }
}

@media (min-width: 1400px) {
  /* line 81, app/assets/stylesheets/sass/_cookie_banner.scss */
  #cookie-banner {
    width: calc(100% - 4rem);
    max-width: 68rem;
    gap: 1.5rem;
  }
  /* line 87, app/assets/stylesheets/sass/_cookie_banner.scss */
  #cookie-banner .cookie-banner__copy {
    font-size: 1.05rem;
  }
  /* line 91, app/assets/stylesheets/sass/_cookie_banner.scss */
  #cookie-banner .cookie-banner__actions {
    gap: 1.25rem;
  }
}

/* line 45, app/assets/stylesheets/sass/help_docs.sass */
body:where(.help-docs) a {
  color: inherit;
}

/* line 59, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-hero__title, .help-docs-article__title {
  font-family: var(--font-heading);
  color: var(--foreground);
  text-wrap: balance;
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tighter);
}

/* line 68, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-faq__title, .help-docs-main .help_markdown h2 {
  font-family: var(--font-heading);
  color: var(--foreground);
  text-wrap: balance;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
}

/* line 77, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown h3 {
  font-family: var(--font-heading);
  color: var(--foreground);
  text-wrap: balance;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-snug);
}

/* line 86, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown h4 {
  font-family: var(--font-heading);
  color: var(--foreground);
  text-wrap: balance;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-snug);
}

/* line 95, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-hero__lead, .help-docs-article__lead {
  max-width: 45rem;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-snug);
  color: var(--muted-foreground);
}

/* line 102, app/assets/stylesheets/sass/help_docs.sass */
.help-docs hr {
  height: 0;
  margin: var(--spacing-10) 0;
  border: 0;
  border-top: 1px solid var(--border);
}

/* line 109, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

/* line 122, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs .content-area,
body.help-docs .content-container {
  all: unset;
}

/* line 126, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs *,
body.help-docs *::before,
body.help-docs *::after {
  box-sizing: border-box;
}

/* line 131, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs img {
  max-width: 100%;
  height: auto;
}

/* line 135, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs .d-none {
  display: none !important;
}

/* line 138, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* line 149, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* line 155, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs .row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* line 160, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs .col-md-3,
body.help-docs .col-md-4,
body.help-docs .col-md-6,
body.help-docs .col-lg-4 {
  min-width: 0;
  flex: 1 1 0;
}

/* line 167, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs .offset-md-2 {
  margin-left: 0;
}

/* line 170, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs .mt-4 {
  margin-top: 1.5rem;
}

/* line 173, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs .mr-1 {
  margin-right: 0.25rem;
}

/* line 180, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs .justify-content-center {
  justify-content: center;
}

/* line 184, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-header:not(.docs-header) {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

/* line 192, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 448px) minmax(0, 1fr);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 56px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}

/* line 204, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-header__brand {
  display: flex;
  align-items: center;
  justify-self: start;
  gap: 12px;
  min-width: 0;
  padding-left: 12px;
}

/* line 212, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-header__search {
  display: flex;
  width: 100%;
  max-width: 448px;
  min-width: 0;
  gap: 6px;
  justify-content: center;
  align-items: center;
  justify-self: center;
}

/* line 222, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-header__actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
  min-width: 0;
}

/* line 229, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-header__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-foreground);
  padding: 0 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}

/* line 244, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-header__link:hover {
  color: var(--foreground);
  background: var(--muted);
  text-decoration: none;
}

/* line 249, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  background: var(--foreground);
  color: var(--background) !important;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

/* line 266, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-header__btn:hover {
  background: var(--muted-foreground);
  text-decoration: none;
}

/* line 270, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-header__btn i {
  font-size: 11px;
}

/* line 274, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai {
  position: fixed;
  inset: 0 0 0 auto;
  height: 100%;
  height: 100dvh;
  z-index: 70;
  width: 420px;
  max-width: 100vw;
  background: var(--background);
  border-left: 1px solid var(--border);
  box-shadow: -16px 0 36px color-mix(in oklab, var(--lima-blue-1000) 8%, transparent);
  transform: translateX(100%);
  transition: transform 0.2s ease, width 0.2s ease;
  display: flex;
  color: var(--foreground);
}

/* line 291, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-ai-open .help-ask-ai {
  transform: translateX(0);
}

/* line 294, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-ai-expanded .help-ask-ai {
  width: 40vw;
}

/* line 297, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  min-height: 0;
}

/* line 303, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 96%, transparent);
}

/* line 312, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__selector {
  flex: 1;
  min-width: 0;
}

/* line 316, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--foreground);
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* line 327, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__select:focus {
  outline: none;
  border-color: var(--ring);
  background: var(--background);
}

/* line 332, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* line 337, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* line 352, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__icon-btn svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  flex-shrink: 0;
}

/* line 357, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__icon-btn:hover {
  color: var(--foreground);
  background: var(--muted);
  border-color: var(--border);
}

/* line 362, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__messages {
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px;
  background: linear-gradient(180deg, var(--muted) 0%, var(--background) 120px);
}

/* line 368, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  padding: 18px;
  font-size: 13px;
  color: var(--muted-foreground);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* line 380, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__empty strong {
  font-size: 15px;
  color: var(--foreground);
}

/* line 384, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__message {
  margin-bottom: 14px;
}

/* line 387, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__message--user {
  display: flex;
  justify-content: flex-end;
}

/* line 391, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__message--assistant, .help-ask-ai__message--guardrail, .help-ask-ai__message--error {
  display: flex;
  justify-content: flex-start;
}

/* line 397, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__bubble {
  max-width: 88%;
  padding: 11px 13px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

/* line 405, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__bubble p:last-child {
  margin-bottom: 0;
}

/* line 408, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__bubble a {
  color: var(--accent-foreground);
}

/* line 411, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__message--user .help-ask-ai__bubble {
  color: var(--background);
  background: var(--foreground);
}

/* line 415, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__message--assistant .help-ask-ai__bubble {
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border);
}

/* line 420, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__bubble--loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-foreground);
}

/* line 426, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__bubble--loading .css-spinloader {
  flex: 0 0 auto;
}

/* line 429, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__message--error .help-ask-ai__bubble {
  color: var(--warning-800);
  background: var(--warning-100);
  border: 1px solid var(--warning-200);
}

/* line 434, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__message--guardrail .help-ask-ai__bubble, .help-ask-ai__message--assistant .help-ask-ai__bubble--guardrail, .help-ask-ai__bubble--guardrail {
  color: var(--destructive);
  background: transparent;
  border: 0;
  border-left: 3px solid var(--destructive);
  border-radius: 0;
  padding: 2px 0 2px 12px;
}

/* line 444, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__message--guardrail .help-ask-ai__bubble a, .help-ask-ai__message--assistant .help-ask-ai__bubble--guardrail a, .help-ask-ai__bubble--guardrail a {
  color: var(--destructive);
}

/* line 447, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__sources {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* line 455, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__sources a {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--accent-foreground);
  text-decoration: none;
}

/* line 461, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__sources a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* line 465, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__composer {
  position: relative;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--background);
}

/* line 471, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__textarea {
  display: block;
  width: 100%;
  min-height: 78px;
  max-height: 180px;
  resize: vertical;
  padding: 10px 68px 10px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--foreground);
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* line 486, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__textarea:focus {
  outline: none;
  background: var(--background);
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 12%, transparent);
}

/* line 492, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__send {
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 36px;
  padding: 0;
  color: var(--background);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  background: var(--accent-foreground);
  border: 1px solid var(--accent-foreground);
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* line 513, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__send:hover {
  background: var(--primary);
}

/* line 516, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__send:disabled {
  cursor: wait;
  opacity: 0.7;
}

/* line 520, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__send i {
  line-height: 1;
}

/* line 523, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__send-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* line 528, app/assets/stylesheets/sass/help_docs.sass */
.help-ask-ai__spinner {
  margin: 0;
}

@media (max-width: 991.98px) {
  /* line 532, app/assets/stylesheets/sass/help_docs.sass */
  .help-ask-ai {
    width: 100vw;
    max-width: 100vw;
  }
  /* line 536, app/assets/stylesheets/sass/help_docs.sass */
  .help-docs-ai-expanded .help-ask-ai {
    width: 100vw;
  }
}

/* line 540, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-shell:not(.docs-shell-body) {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 40px;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
}

/* line 549, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-content:not(.docs-shell-article) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 40px;
  max-width: 1200px;
  width: 100%;
  margin: 0;
}

/* line 557, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-content:not(.docs-shell-article):not(:has(.help-docs-aside)) {
  grid-template-columns: minmax(0, 1fr);
}

/* line 561, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-sidebar:not(.docs-shell-sidebar) {
  position: sticky;
  top: 56px;
  align-self: start;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 32px 16px 64px 12px;
  border-right: 1px solid var(--border);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* line 572, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-sidebar:not(.docs-shell-sidebar)::-webkit-scrollbar {
  width: 6px;
}

/* line 574, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-sidebar:not(.docs-shell-sidebar)::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* line 577, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-sidebar:not(.docs-shell-sidebar)::-webkit-scrollbar-track {
  background: transparent;
}

/* line 581, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-sidebar__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-right: 8px;
}

/* line 588, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-nav__group {
  margin: 0 0 28px;
}

/* line 591, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-nav__group:last-child {
  margin-bottom: 0;
}

/* line 594, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-nav__group-label {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground);
}

/* line 603, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-nav__group-label--link {
  margin-left: -12px;
  width: calc(100% + 12px);
  padding: 4px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

/* line 611, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-nav__group-label--link:hover, .help-docs-nav__group-label--link.is-active {
  background: var(--muted);
  color: var(--foreground);
  text-decoration: none;
}

/* line 617, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-nav__items {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* line 622, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-nav__item {
  margin: 0;
}

/* line 625, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-nav__link {
  display: block;
  width: calc(100% + 12px);
  margin-left: -12px;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--muted-foreground);
  text-decoration: none;
  border-radius: var(--radius);
  line-height: 1.35;
  transition: color 0.15s, background 0.15s;
}

/* line 639, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-nav__link:hover {
  background: var(--muted);
  color: var(--foreground);
  text-decoration: none;
}

/* line 644, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-nav__link.is-active {
  background: var(--accent);
  color: var(--primary);
  font-weight: 500;
}

/* line 649, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-nav__link--depth-1 {
  padding-left: 28px;
}

/* line 652, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-nav__sub-heading {
  margin: 10px 0 2px;
}

/* line 655, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-nav__sub-label {
  display: block;
  padding: 0 0 0 16px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted-foreground);
}

/* line 665, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main:not(.docs-shell-main) {
  padding: 40px 0 96px;
  min-width: 0;
}

/* line 672, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-article__title {
  margin: var(--spacing-2) 0 var(--spacing-8);
}

/* line 676, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-article__lead {
  margin: calc(var(--spacing-4) * -1) 0 var(--spacing-8);
}

/* line 685, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-search-refine {
  max-width: 32rem;
  margin: 0 0 var(--spacing-10);
}

/* line 691, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-pagination {
  margin-top: var(--spacing-8);
}

/* line 694, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  background: transparent;
  padding: 0;
  margin: 0 0 16px;
  font-size: 13px;
}

/* line 705, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-breadcrumb .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--muted-foreground);
}

/* line 711, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-breadcrumb .breadcrumb-item a {
  color: var(--muted-foreground);
  text-decoration: none;
}

/* line 715, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-breadcrumb .breadcrumb-item a:hover {
  color: var(--foreground);
  text-decoration: none;
}

/* line 719, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-breadcrumb .breadcrumb-item.active {
  color: var(--muted-foreground);
}

/* line 722, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  margin-right: 6px;
  color: var(--muted-foreground);
}

/* line 728, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--foreground);
}

/* line 734, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown h2, .help-docs-main .help_markdown h3, .help-docs-main .help_markdown h4 {
  margin-top: var(--spacing-10);
  margin-bottom: var(--spacing-3);
}

/* line 738, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown h2 {
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--border);
}

/* line 750, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown a {
  color: var(--accent-foreground);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--ring) 35%, var(--border));
}

/* line 755, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown a:hover {
  color: var(--primary);
  border-bottom-color: var(--ring);
}

/* line 762, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown code:not(.code-block-pre code) {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 2px 6px;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--foreground);
}

/* line 775, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown pre:not(.code-block-pre) {
  background: var(--lima-blue-1000);
  border: none;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 1.5rem 0;
  overflow-x: auto;
}

/* line 783, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown pre:not(.code-block-pre) code {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--lima-neutral-50);
  font-size: 13.5px;
  width: auto;
  display: block;
}

/* line 792, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* line 803, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown table {
  width: 100%;
  margin: 1.5rem 0;
  border: 1px solid var(--border, var(--border));
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  background: var(--background, var(--background));
  color: var(--foreground, var(--foreground));
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

/* line 816, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown thead {
  background: var(--muted, var(--muted));
}

/* line 819, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown tr {
  transition: background-color 0.12s ease;
}

/* line 823, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown tr:not(:last-child) th,
.help-docs-main .help_markdown tr:not(:last-child) td {
  border-bottom: 1px solid var(--border, var(--border));
}

/* line 827, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown tbody tr:hover {
  background: var(--muted, var(--muted));
}

/* line 830, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown th,
.help-docs-main .help_markdown td {
  padding: 10px 12px;
  vertical-align: top;
}

/* line 835, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown th:not(:last-child),
.help-docs-main .help_markdown td:not(:last-child) {
  border-right: 1px solid var(--border, var(--border));
}

/* line 839, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown th {
  color: var(--foreground);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
}

/* line 847, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown td {
  color: var(--muted-foreground, var(--muted-foreground));
}

/* line 850, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-main .help_markdown td code {
  white-space: nowrap;
}

/* line 854, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-aside:not(.docs-shell-toc) {
  position: sticky;
  top: 56px;
  align-self: start;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 40px 0 64px 8px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

/* line 872, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-hero {
  padding: 48px 0 32px;
  text-align: left;
}

/* line 878, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-hero__title {
  margin: 0 0 var(--spacing-3);
}

/* line 882, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-hero__lead {
  margin: 0;
}

/* line 887, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-article__lead {
  font-size: 16px;
  color: var(--muted-foreground);
  line-height: 1.6;
  max-width: 720px;
  margin: -16px 0 32px;
}

/* line 894, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-subsection {
  margin: 0 0 40px;
}

/* line 897, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-subsection__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 22px;
  color: var(--foreground);
  margin: 0 0 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* line 906, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-subsection__description {
  font-size: 14px;
  color: var(--muted-foreground);
  margin: 0 0 16px;
}

/* line 913, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-nav__sub-heading.is-active .help-docs-nav__sub-label {
  color: var(--primary);
}

@media (max-width: 991.98px) {
  /* line 918, app/assets/stylesheets/sass/help_docs.sass */
  .help-docs-content {
    grid-template-columns: minmax(0, 1fr);
  }
  /* line 921, app/assets/stylesheets/sass/help_docs.sass */
  .help-docs-aside {
    display: none;
  }
  /* line 924, app/assets/stylesheets/sass/help_docs.sass */
  .help-docs-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

/* line 928, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs > footer:not(.docs-footer) {
  margin-top: 48px;
  border-top: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
}

/* line 934, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs > footer:not(.docs-footer) .container {
  padding-top: 40px;
  padding-bottom: 56px;
}

/* line 938, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs > footer:not(.docs-footer) .row {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.8fr) minmax(180px, 0.9fr);
  gap: 40px;
}

/* line 943, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs > footer:not(.docs-footer) ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* line 948, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs > footer:not(.docs-footer) a {
  color: var(--muted-foreground);
  text-decoration: none;
}

/* line 952, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs > footer:not(.docs-footer) a:hover {
  color: var(--primary);
  text-decoration: none;
}

/* line 956, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs > footer:not(.docs-footer) .footer-logo {
  display: inline-block;
  margin-bottom: 24px;
}

/* line 960, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs > footer:not(.docs-footer) .footer-logo img {
  width: 150px;
  max-width: 150px;
  height: auto;
}

/* line 965, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs > footer:not(.docs-footer) .social-icons {
  display: flex;
  gap: 10px;
}

/* line 969, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs > footer:not(.docs-footer) .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  font-size: 17px;
}

/* line 981, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs > footer:not(.docs-footer) .footer-navigation h3 {
  margin: 0 0 12px;
  color: var(--foreground);
  font-family: var(--font-heading);
  font-size: 15px;
}

/* line 987, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs > footer:not(.docs-footer) .footer-navigation ul {
  -moz-columns: 2;
       columns: 2;
  -moz-column-gap: 28px;
       column-gap: 28px;
}

/* line 991, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs > footer:not(.docs-footer) .footer-navigation li {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  margin-bottom: 7px;
}

/* line 995, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs > footer:not(.docs-footer) .footer-contacts-item {
  margin-bottom: 16px;
}

/* line 998, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs > footer:not(.docs-footer) strong {
  display: block;
  color: var(--foreground);
  font-weight: 600;
}

/* line 1003, app/assets/stylesheets/sass/help_docs.sass */
body.help-docs > footer:not(.docs-footer) .whatsapp-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  vertical-align: middle;
}

/* line 1010, app/assets/stylesheets/sass/help_docs.sass */
.help_footer {
  margin-top: 48px;
}

/* line 1017, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8);
  margin-top: var(--spacing-10);
}

@media (min-width: 768px) {
  /* line 1017, app/assets/stylesheets/sass/help_docs.sass */
  .help-docs-contact {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-12);
  }
}

/* line 1027, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-contact__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-3);
}

/* line 1033, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-contact__col + .help-docs-contact__col {
  border-top: 1px solid var(--border);
  padding-top: var(--spacing-8);
}

@media (min-width: 768px) {
  /* line 1033, app/assets/stylesheets/sass/help_docs.sass */
  .help-docs-contact__col + .help-docs-contact__col {
    border-top: 0;
    border-left: 1px solid var(--border);
    padding-top: 0;
    padding-left: var(--spacing-12);
  }
}

/* line 1043, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-contact__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-snug);
  color: var(--foreground);
}

/* line 1051, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-contact__text {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--muted-foreground);
}

/* line 1059, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-contact__hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-1) var(--spacing-4);
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}

/* line 1067, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-contact__hours dt {
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
}

/* line 1071, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-contact__hours dd {
  margin: 0;
  color: var(--muted-foreground);
}

/* line 1076, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-contact__phone {
  margin-top: var(--spacing-3);
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-snug);
  color: var(--accent-foreground);
  text-decoration: none;
}

/* line 1085, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-contact__phone:hover {
  color: var(--primary);
  text-decoration: none;
}

/* line 1089, app/assets/stylesheets/sass/help_docs.sass */
.help-question-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}

/* line 1096, app/assets/stylesheets/sass/help_docs.sass */
.help-question-list li {
  margin: 0;
}

/* line 1099, app/assets/stylesheets/sass/help_docs.sass */
.help-question-list li > a {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* line 1109, app/assets/stylesheets/sass/help_docs.sass */
.help-question-list li > a:hover {
  border-color: color-mix(in oklab, var(--ring) 35%, var(--border));
  box-shadow: 0 4px 16px color-mix(in oklab, var(--lima-blue-500) 8%, transparent);
  text-decoration: none;
}

/* line 1114, app/assets/stylesheets/sass/help_docs.sass */
.help-question-list li h3 {
  margin: 0 0 4px;
  color: var(--foreground);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
}

/* line 1121, app/assets/stylesheets/sass/help_docs.sass */
.help-question-list li p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.5;
}

/* line 1127, app/assets/stylesheets/sass/help_docs.sass */
.row-more-help {
  margin-top: 32px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
}

/* line 1134, app/assets/stylesheets/sass/help_docs.sass */
.row-more-help h4 {
  margin: 0 0 8px;
  color: var(--foreground);
  font-family: var(--font-heading);
  font-size: 16px;
}

/* line 1140, app/assets/stylesheets/sass/help_docs.sass */
.row-more-help p {
  margin: 0;
  color: var(--muted-foreground);
}

/* line 1144, app/assets/stylesheets/sass/help_docs.sass */
.row-more-help a {
  color: var(--accent-foreground);
  text-decoration: none;
}

/* line 1148, app/assets/stylesheets/sass/help_docs.sass */
.row-more-help a:hover {
  color: var(--primary);
  text-decoration: underline;
}

@media (max-width: 767.98px) {
  /* line 1153, app/assets/stylesheets/sass/help_docs.sass */
  .help-docs-shell:not(.docs-shell-body) {
    grid-template-columns: minmax(0, 1fr);
  }
  /* line 1156, app/assets/stylesheets/sass/help_docs.sass */
  .help-docs-sidebar:not(.docs-shell-sidebar) {
    display: none;
  }
  /* line 1159, app/assets/stylesheets/sass/help_docs.sass */
  .help-docs-header__inner {
    gap: 16px;
    padding: 0 16px;
  }
}

/* line 1167, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-faq {
  margin: var(--spacing-16) 0 0;
}

/* line 1170, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-faq__title {
  margin: 0 0 var(--spacing-6);
}

/* line 1174, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-faq__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
  color: var(--accent-foreground);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

/* line 1186, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-faq__link svg {
  width: var(--size-icon-xs);
  height: var(--size-icon-xs);
  transition: transform var(--duration-fast) var(--ease-out);
}

/* line 1191, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-faq__link:hover {
  color: var(--foreground);
  text-decoration: none;
}

/* line 1195, app/assets/stylesheets/sass/help_docs.sass */
.help-docs-faq__link:hover svg {
  transform: translateX(2px);
}