/**
 * =============================================================================
 * SEEDFINITY DESIGN SYSTEM - sf.css
 * =============================================================================
 * Core Design System für das gesamte Seedfinity Ökosystem
 * Spotify-inspiriertes Dark Theme
 * 
 * SOT (Source of Truth) für:
 * - JTL Shop (dev + prod)
 * - Network Backend
 * - Widgets / Embeds
 * - Zukünftige Apps
 * 
 * URL: https://net.seedfinity.com/assets/css/sf.css
 * Präfix: sfb- (seedfinity-brand)
 * =============================================================================
 */

/* =============================================================================
   VENDOR IMPORTS
   ============================================================================= */

@import url("https://net.seedfinity.com/assets/vendor/bootstrap-icons-1.13.1.css");


/* =============================================================================
   ICON FALLBACK
   Zeigt ein sichtbares Fallback-Quadrat wenn ein Icon-Font nicht geladen
   werden konnte (.bi-* und .sfi-*). Die Bootstrap-Icons CSS überschreibt
   content mit dem korrekten Unicode-Codepoint wenn sie lädt.
   ============================================================================= */

[class^="bi-"]::before,
[class*=" bi-"]::before,
[class^="sfi-"]::before,
[class*=" sfi-"]::before {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
}


/* =============================================================================
   FONT DEFINITIONS (mit IE-Support)
   ============================================================================= */

@font-face {
    font-family: 'Gotham';
    font-display: swap;
    font-style: normal;
    font-weight: 300;
    src: url("https://net.seedfinity.com/assets/fonts/gotham/GothamLight.eot");
    src: url("https://net.seedfinity.com/assets/fonts/gotham/GothamLight.eot?#iefix") format("embedded-opentype"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamLight.woff2") format("woff2"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamLight.woff") format("woff"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamLight.ttf") format("truetype"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamLight.svg#GothamBook") format("svg");
}

@font-face {
    font-family: 'Gotham';
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: url("https://net.seedfinity.com/assets/fonts/gotham/GothamBook.eot");
    src: url("https://net.seedfinity.com/assets/fonts/gotham/GothamBook.eot?#iefix") format("embedded-opentype"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamBook.woff2") format("woff2"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamBook.woff") format("woff"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamBook.ttf") format("truetype"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamBook.svg#GothamBook") format("svg");
}

@font-face {
    font-family: 'Gotham';
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    src: url("https://net.seedfinity.com/assets/fonts/gotham/GothamMedium.eot");
    src: url("https://net.seedfinity.com/assets/fonts/gotham/GothamMedium.eot?#iefix") format("embedded-opentype"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamMedium.woff2") format("woff2"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamMedium.woff") format("woff"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamMedium.ttf") format("truetype"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamMedium.svg#GothamBook") format("svg");
}

@font-face {
    font-family: 'Gotham';
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    src: url("https://net.seedfinity.com/assets/fonts/gotham/GothamBold.eot");
    src: url("https://net.seedfinity.com/assets/fonts/gotham/GothamBold.eot?#iefix") format("embedded-opentype"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamBold2.woff2") format("woff2"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamBold.woff") format("woff"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamBold.ttf") format("truetype"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamBold.svg#Gotham-Bold") format("svg");
}

@font-face {
    font-family: 'Gotham';
    font-display: swap;
    font-style: normal;
    font-weight: 900;
    src: url("https://net.seedfinity.com/assets/fonts/gotham/GothamBlack.eot");
    src: url("https://net.seedfinity.com/assets/fonts/gotham/GothamBlack.eot?#iefix") format("embedded-opentype"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamBlack.woff2") format("woff2"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamBlack.woff") format("woff"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamBlack.ttf") format("truetype"),
        url("https://net.seedfinity.com/assets/fonts/gotham/GothamBlack.svg#Gotham-Black") format("svg");
}


/* =============================================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================================= */

:root {
    /* =========================================================================
       COLORS - Brand
       =========================================================================
       @desc: Primäre Markenfarbe für Seedfinity (Orange)
       @usage: CTAs, Buttons, Links, Focus-States, Badges, Preise
       @light: Bleibt gleich
       @dark: Bleibt gleich
       ========================================================================= */
    --sfb-color-primary-base: #FF9900;
    --sfb-color-primary: var(--sfb-color-primary-base);
    --sfb-color-primary-rgb: 255, 153, 0;
    --sfb-color-primary-hover: #FFB033;
    --sfb-color-primary-active: #E68A00;
    --sfb-color-primary-light: #FFD084;
    --sfb-color-primary-alpha-50: rgba(255, 153, 0, 0.5);
    --sfb-color-primary-alpha-20: rgba(255, 153, 0, 0.2);
    --sfb-color-primary-alpha-10: rgba(255, 153, 0, 0.1);
    --sfb-color-primary-alpha-05: rgba(255, 153, 0, 0.05);

    /* @desc: Sekundäre Akzentfarbe (Cyan) - aktuell Reserve
       @usage: Links, Info-States, Hervorhebungen (zukünftig) */
    --sfb-color-secondary-base: #00CEFF;
    --sfb-color-secondary: var(--sfb-color-secondary-base);
    --sfb-color-secondary-hover: #33D8FF;
    --sfb-color-secondary-active: #00B8E6;
    --sfb-color-secondary-alpha-50: rgba(0, 206, 255, 0.5);
    --sfb-color-secondary-alpha-20: rgba(0, 206, 255, 0.2);
    --sfb-color-secondary-alpha-10: rgba(0, 206, 255, 0.1);

    /* =========================================================================
       COLORS - Semantic
       =========================================================================
       @desc: Status- und Feedback-Farben
       ========================================================================= */

    /* @desc: Erfolg, Bestätigung, positive Aktionen
       @usage: Toast-Success, "In Warenkorb", Checkmarks, "Neu"-Badge */
    --sfb-color-success-base: #22C55E;
    --sfb-color-success: var(--sfb-color-success-base);
    --sfb-color-success-hover: #16A34A;
    --sfb-color-success-light: #4ADE80;
    --sfb-color-success-alpha-50: rgba(34, 197, 94, 0.5);
    --sfb-color-success-alpha-20: rgba(34, 197, 94, 0.2);
    --sfb-color-success-alpha-10: rgba(34, 197, 94, 0.1);

    /* @desc: Fehler, destruktive Aktionen
       @usage: Error-Messages, Löschen-Buttons, Validierungsfehler */
    --sfb-color-danger-base: #E91429;
    --sfb-color-danger: var(--sfb-color-danger-base);
    --sfb-color-danger-hover: #DC2626;
    --sfb-color-danger-light: #F87171;
    --sfb-color-danger-alpha-50: rgba(233, 20, 41, 0.5);
    --sfb-color-danger-alpha-20: rgba(233, 20, 41, 0.2);
    --sfb-color-danger-alpha-10: rgba(233, 20, 41, 0.1);

    /* @desc: Warnung, Hinweise die Aufmerksamkeit brauchen
       @usage: Niedriger Bestand, Preisänderung, Wichtige Hinweise */
    --sfb-color-warning-base: #FFA42B;
    --sfb-color-warning: var(--sfb-color-warning-base);
    --sfb-color-warning-hover: #F59E0B;
    --sfb-color-warning-light: #FCD34D;
    --sfb-color-warning-alpha-50: rgba(255, 164, 43, 0.5);
    --sfb-color-warning-alpha-20: rgba(255, 164, 43, 0.2);
    --sfb-color-warning-alpha-10: rgba(255, 164, 43, 0.1);

    /* @desc: Neutrale Information
       @usage: Tooltips, Hilfe-Texte, Info-Badges */
    --sfb-color-info-base: #3B82F6;
    --sfb-color-info: var(--sfb-color-info-base);
    --sfb-color-info-hover: #2563EB;
    --sfb-color-info-light: #60A5FA;
    --sfb-color-info-alpha-50: rgba(59, 130, 246, 0.5);
    --sfb-color-info-alpha-20: rgba(59, 130, 246, 0.2);
    --sfb-color-info-alpha-10: rgba(59, 130, 246, 0.1);

    /* =========================================================================
       COLORS - Status (System Health, Uptime Monitoring)
       =========================================================================
       @desc: Status-Farben für System-Monitoring und Uptime-Indikatoren
       @usage: Dashboard-Dots, Status-Badges, API-Health-Checks
       ========================================================================= */
    --sfb-color-status-operational: #2dd4bf;
    /* Tailwind Teal-400 */
    --sfb-color-status-degraded: #fbbf24;
    /* Tailwind Amber-400 */
    --sfb-color-status-down: #fb7185;
    /* Tailwind Rose-400 */

    /* =========================================================================
       COLORS - Strain Types (Cannabis-spezifisch)
       =========================================================================
       @desc: Genetik-Kategorien für Cannabis-Sorten
       @usage: Strain-Badges, Kategorie-Markierung, Filter
       ========================================================================= */

    /* @desc: Indica-Sorten (entspannend, körperlich) */
    --sfb-color-indica-base: #9B59B6;
    --sfb-color-indica: var(--sfb-color-indica-base);
    --sfb-color-indica-hover: #8E44AD;
    --sfb-color-indica-alpha-20: rgba(155, 89, 182, 0.2);

    /* @desc: Sativa-Sorten (energetisch, mental) */
    --sfb-color-sativa-base: #27AE60;
    --sfb-color-sativa: var(--sfb-color-sativa-base);
    --sfb-color-sativa-hover: #229954;
    --sfb-color-sativa-alpha-20: rgba(39, 174, 96, 0.2);

    /* @desc: Hybrid-Sorten (Mischung) */
    --sfb-color-hybrid-base: #3498DB;
    --sfb-color-hybrid: var(--sfb-color-hybrid-base);
    --sfb-color-hybrid-hover: #2980B9;
    --sfb-color-hybrid-alpha-20: rgba(52, 152, 219, 0.2);

    /* @desc: CBD-Produkte */
    --sfb-color-cbd-base: #16A085;
    --sfb-color-cbd: var(--sfb-color-cbd-base);
    --sfb-color-cbd-hover: #138D75;
    --sfb-color-cbd-alpha-20: rgba(22, 160, 133, 0.2);

    /* @desc: Hoher THC-Gehalt Markierung (>25%) */
    --sfb-color-thc-high-base: #E74C3C;
    --sfb-color-thc-high: var(--sfb-color-thc-high-base);
    --sfb-color-thc-high-hover: #C0392B;
    --sfb-color-thc-high-alpha-20: rgba(231, 76, 60, 0.2);

    /* =========================================================================
       COLORS - Seed Types (Feminized/Regular/Auto)
       =========================================================================
       @desc: Samen-Kategorie Farben
       @usage: Produkt-Badges, Filter, Kategorien
       ========================================================================= */

    /* @desc: Feminisierte Samen (Pink) */
    --sfb-color-feminized-base: #EC4899;
    --sfb-color-feminized: var(--sfb-color-feminized-base);
    --sfb-color-feminized-hover: #DB2777;
    --sfb-color-feminized-alpha-20: rgba(236, 72, 153, 0.2);

    /* @desc: Reguläre Samen (Hellblau) */
    --sfb-color-regular-base: #38BDF8;
    --sfb-color-regular: var(--sfb-color-regular-base);
    --sfb-color-regular-hover: #0EA5E9;
    --sfb-color-regular-alpha-20: rgba(56, 189, 248, 0.2);

    /* @desc: Autoflowering (Violett) */
    --sfb-color-autoflower-base: #A855F7;
    --sfb-color-autoflower: var(--sfb-color-autoflower-base);
    --sfb-color-autoflower-hover: #9333EA;
    --sfb-color-autoflower-alpha-20: rgba(168, 85, 247, 0.2);

    /* @desc: Fast Version (Gelb) */
    --sfb-color-fast-base: #FACC15;
    --sfb-color-fast: var(--sfb-color-fast-base);
    --sfb-color-fast-hover: #EAB308;
    --sfb-color-fast-alpha-20: rgba(250, 204, 21, 0.2);

    /* =========================================================================
       COLORS - Aroma Wheel (Terpene/Aromen)
       =========================================================================
       @desc: Cannabis Terpen-Kategorien für Aroma-Wheel
       @usage: Aroma-Tags, Filter, Wheel-Segmente, Flavor-Badges
       
       ⚠️ SOURCE OF TRUTH: storage/devDatabase/flavors.json
       ⚠️ REFERENZ: assets/js/embeds/demo-4.js (Aroma-Wheel POC)
       
       Diese Farben sind radial harmonisiert und bereits abgestimmt.
       Bei Aroma-Fragen IMMER den Aroma-Wheel POC heranziehen!
       (Hunderte Stunden Arbeit stecken darin)
       ========================================================================= */

    /* Level 1 - Hauptkategorien (4) */
    --sfb-color-aroma-suess-base: #7B6CD8;
    --sfb-color-aroma-suess: var(--sfb-color-aroma-suess-base);

    --sfb-color-aroma-herb-base: #86CC8A;
    --sfb-color-aroma-herb: var(--sfb-color-aroma-herb-base);

    --sfb-color-aroma-sauer-base: #FAE364;
    --sfb-color-aroma-sauer: var(--sfb-color-aroma-sauer-base);

    --sfb-color-aroma-wuerzig-base: #DC465F;
    --sfb-color-aroma-wuerzig: var(--sfb-color-aroma-wuerzig-base);

    /* Level 2 - Unterkategorien (9) */
    --sfb-color-aroma-blumig-base: #DA5BCE;
    --sfb-color-aroma-blumig: var(--sfb-color-aroma-blumig-base);

    --sfb-color-aroma-hergestellt-base: #628DE8;
    --sfb-color-aroma-hergestellt: var(--sfb-color-aroma-hergestellt-base);

    --sfb-color-aroma-mineralisch-base: #57B9DB;
    --sfb-color-aroma-mineralisch: var(--sfb-color-aroma-mineralisch-base);

    --sfb-color-aroma-aetherisch-base: #47B8BF;
    --sfb-color-aroma-aetherisch: var(--sfb-color-aroma-aetherisch-base);

    --sfb-color-aroma-nussig-base: #9CCF73;
    --sfb-color-aroma-nussig: var(--sfb-color-aroma-nussig-base);

    --sfb-color-aroma-pflanzlich-base: #B7D157;
    --sfb-color-aroma-pflanzlich: var(--sfb-color-aroma-pflanzlich-base);

    --sfb-color-aroma-mikrobiologisch-base: #D6D24F;
    --sfb-color-aroma-mikrobiologisch: var(--sfb-color-aroma-mikrobiologisch-base);

    --sfb-color-aroma-milchig-base: #F7AF5A;
    --sfb-color-aroma-milchig: var(--sfb-color-aroma-milchig-base);

    --sfb-color-aroma-stechend-base: #F27E5B;
    --sfb-color-aroma-stechend: var(--sfb-color-aroma-stechend-base);

    /* =========================================================================
       COLORS - Badge Colors (Shop-spezifisch)
       =========================================================================
       @desc: Spezielle Badge-Farben für Shop-Elemente
       @usage: Produktkarten, Listing-Badges
       ========================================================================= */

    /* @desc: Bestseller-Badge (Gold) */
    --sfb-color-badge-bestseller-base: #FFD700;
    --sfb-color-badge-bestseller: var(--sfb-color-badge-bestseller-base);

    /* @desc: Vorbestellung (Violett) */
    --sfb-color-badge-preorder-base: #8B5CF6;
    --sfb-color-badge-preorder: var(--sfb-color-badge-preorder-base);

    /* @desc: Limitiert (Rot) */
    --sfb-color-badge-limited-base: #EF4444;
    --sfb-color-badge-limited: var(--sfb-color-badge-limited-base);

    /* @desc: Exklusiv (Amber) */
    --sfb-color-badge-exclusive-base: #F59E0B;
    --sfb-color-badge-exclusive: var(--sfb-color-badge-exclusive-base);

    /* Aliase auf Semantic Colors */
    --sfb-color-badge-sale: var(--sfb-color-primary);
    --sfb-color-badge-new: var(--sfb-color-success);
    --sfb-color-badge-outofstock: #6B7280;

    /* =========================================================================
       COLORS - Cover Gradients (Hintergründe)
       =========================================================================
       @desc: Vordefinierte Verläufe für Cover, Hero-Sections, Kategorie-BGs
       @usage: Strainlist-Cover, Kategorie-Hintergründe, Hero-Sections
       ========================================================================= */

    --sfb-gradient-sunset: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    --sfb-gradient-ocean: linear-gradient(135deg, #0077B6 0%, #00B4D8 100%);
    --sfb-gradient-forest: linear-gradient(135deg, #2D6A4F 0%, #40916C 100%);
    --sfb-gradient-midnight: linear-gradient(135deg, #1A1A2E 0%, #16213E 100%);
    --sfb-gradient-aurora: linear-gradient(135deg, #7B2CBF 0%, #9D4EDD 100%);
    --sfb-gradient-haze: linear-gradient(135deg, #F72585 0%, #B5179E 100%);
    --sfb-gradient-lemon: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);
    --sfb-gradient-berry: linear-gradient(135deg, #6A0572 0%, #AB83A1 100%);
    --sfb-gradient-earth: linear-gradient(135deg, #6B4423 0%, #8B6914 100%);
    --sfb-gradient-frost: linear-gradient(135deg, #A9D6E5 0%, #CAF0F8 100%);

    /* =========================================================================
       COLORS - Grayscale (Dark Mode - Default)
       =========================================================================
       @desc: Graustufen für Dark Mode (Default Theme)
       @usage: Hintergründe, Borders, Text-Abstufungen
       ========================================================================= */

    /* Absolute Werte */
    --sfb-white: #FFFFFF;
    --sfb-black: #000000;

    /* Graustufen */
    --sfb-gray-950: #000000;
    --sfb-gray-900: #0A0A0A;
    --sfb-gray-850: #121212;
    --sfb-gray-800: #181818;
    --sfb-gray-750: #1A1A1A;
    --sfb-gray-700: #282828;
    --sfb-gray-600: #3A3A3A;
    --sfb-gray-500: #4D4D4D;
    --sfb-gray-400: #6A6A6A;
    --sfb-gray-300: #A7A7A7;
    --sfb-gray-200: #B3B3B3;
    --sfb-gray-100: #E5E5E5;
    --sfb-gray-50: #FFFFFF;

    /* =========================================================================
       COLORS - Backgrounds (Spotify-Style)
       ========================================================================= */
    --sfb-color-background-base: #000000;
    --sfb-color-background-elevated: #121212;
    --sfb-color-background-elevated-hover: #1a1a1a;
    --sfb-color-background-highlight: #1a1a1a;
    --sfb-color-background-card: #181818;
    --sfb-color-background-card-hover: #282828;
    --sfb-color-background-tinted: rgba(255, 255, 255, 0.05);
    --sfb-color-background-tinted-hover: rgba(255, 255, 255, 0.1);
    --sfb-color-background-overlay: rgba(0, 0, 0, 0.7);

    /* Embed-spezifische Backgrounds */
    --sfb-color-background-embed: #111420;
    /* Embed Container BG (leicht bläulich-dunkel) */
    --sfb-color-background-deep: #0b1120;
    /* Noch tieferer BG (Dashboard Cards) */

    /* Tailwind-kompatible Grays (für Migration von TW-basierten Komponenten) */
    --sfb-tw-gray-800: #1f2937;
    /* Tailwind Gray-800 */
    --sfb-tw-gray-200: #e5e7eb;
    /* Tailwind Gray-200 */

    /* Gradient Backgrounds */
    --sfb-gradient-background: linear-gradient(180deg, #000000 0%, #000614 100%);
    --sfb-gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    --sfb-gradient-primary: linear-gradient(135deg, var(--sfb-color-primary) 0%, var(--sfb-color-primary-light) 100%);

    /* =========================================================================
       COLORS - Text
       ========================================================================= */
    --sfb-color-text-base: #FFFFFF;
    --sfb-color-text-subdued: #A7A7A7;
    --sfb-color-text-muted: #6A6A6A;
    --sfb-color-text-disabled: #4D4D4D;
    --sfb-color-text-bright: #FFFFFF;
    --sfb-color-text-on-primary: #000000;

    /* Link Colors */
    --sfb-color-link: #2563eb;
    /* Tailwind Blue-600 */
    --sfb-color-link-hover: #1d4ed8;
    /* Tailwind Blue-700 */
    --sfb-color-link-light: #93c5fd;
    /* Tailwind Blue-300 (für Dark BG) */

    /* =========================================================================
       COLORS - Borders
       ========================================================================= */
    --sfb-color-border-base: #282828;
    --sfb-color-border-subtle: #1f1f1f;
    --sfb-color-border-focus: var(--sfb-color-primary);

    /* =========================================================================
       SEMANTIC ALIASES (Kurzformen für häufige Verwendung)
       ========================================================================= */
    /* Text */
    --sfb-color-text: var(--sfb-color-text-base);

    /* Borders */
    --sfb-color-border: var(--sfb-color-border-base);

    /* Backgrounds / Surfaces (Dark Theme) */
    --sfb-color-bg: #000000;
    --sfb-color-bg-elevated: #121212;
    --sfb-color-surface: #181818;
    --sfb-color-surface-alt: #282828;
    --sfb-color-surface-hover: #2a2a2a;

    /* Radius default */
    --sfb-radius: var(--sfb-radius-md);

    /* Font shorthand */
    --sfb-font-mono: var(--sfb-font-family-mono);

    /* =========================================================================
       TYPOGRAPHY
       ========================================================================= */
    --sfb-font-family-base: 'Gotham', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
    --sfb-font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', monospace;

    /* Font Sizes */
    --sfb-font-size-xxs: 0.625rem;
    /* 10px */
    --sfb-font-size-xs: 0.75rem;
    /* 12px */
    --sfb-font-size-sm: 0.875rem;
    /* 14px */
    --sfb-font-size-base: 1rem;
    /* 16px */
    --sfb-font-size-lg: 1.125rem;
    /* 18px */
    --sfb-font-size-xl: 1.25rem;
    /* 20px */
    --sfb-font-size-2xl: 1.5rem;
    /* 24px */
    --sfb-font-size-3xl: 1.8rem;
    /* 28px */
    --sfb-font-size-4xl: 2.5rem;
    /* 40px */
    --sfb-font-size-5xl: 3rem;
    /* 48px */
    --sfb-font-size-6xl: 4rem;
    /* 64px */

    /* Font Weights */
    --sfb-font-weight-light: 300;
    --sfb-font-weight-normal: 400;
    --sfb-font-weight-medium: 500;
    --sfb-font-weight-semibold: 600;
    --sfb-font-weight-bold: 700;
    --sfb-font-weight-black: 900;

    /* Line Heights */
    --sfb-line-height-none: 1;
    --sfb-line-height-tight: 1.2;
    --sfb-line-height-snug: 1.35;
    --sfb-line-height-base: 1.5;
    --sfb-line-height-relaxed: 1.75;
    --sfb-line-height-loose: 2;

    /* Letter Spacing */
    --sfb-letter-spacing-tight: -0.02em;
    --sfb-letter-spacing-normal: 0;
    --sfb-letter-spacing-wide: 0.02em;
    --sfb-letter-spacing-wider: 0.05em;
    --sfb-letter-spacing-widest: 0.1em;

    /* =========================================================================
       SPACING
       ========================================================================= */
    --sfb-spacing-0: 0;
    --sfb-spacing-px: 1px;
    --sfb-spacing-0-5: 0.125rem;
    /* 2px */
    --sfb-spacing-1: 0.25rem;
    /* 4px */
    --sfb-spacing-1-5: 0.375rem;
    /* 6px */
    --sfb-spacing-2: 0.5rem;
    /* 8px */
    --sfb-spacing-2-5: 0.625rem;
    /* 10px */
    --sfb-spacing-3: 0.75rem;
    /* 12px */
    --sfb-spacing-3-5: 0.875rem;
    /* 14px */
    --sfb-spacing-4: 1rem;
    /* 16px */
    --sfb-spacing-5: 1.25rem;
    /* 20px */
    --sfb-spacing-6: 1.5rem;
    /* 24px */
    --sfb-spacing-7: 1.75rem;
    /* 28px */
    --sfb-spacing-8: 2rem;
    /* 32px */
    --sfb-spacing-9: 2.25rem;
    /* 36px */
    --sfb-spacing-10: 2.5rem;
    /* 40px */
    --sfb-spacing-12: 3rem;
    /* 48px */
    --sfb-spacing-14: 3.5rem;
    /* 56px */
    --sfb-spacing-16: 4rem;
    /* 64px */
    --sfb-spacing-20: 5rem;
    /* 80px */
    --sfb-spacing-24: 6rem;
    /* 96px */
    --sfb-spacing-32: 8rem;
    /* 128px */

    /* Semantic Spacing Aliases (analog to radius-sm/md/lg) */
    --sfb-spacing-xs: var(--sfb-spacing-1);
    /* 4px */
    --sfb-spacing-sm: var(--sfb-spacing-2);
    /* 8px */
    --sfb-spacing-md: var(--sfb-spacing-4);
    /* 16px */
    --sfb-spacing-lg: var(--sfb-spacing-6);
    /* 24px */
    --sfb-spacing-xl: var(--sfb-spacing-8);
    /* 32px */
    --sfb-spacing-2xl: var(--sfb-spacing-12);
    /* 48px */

    /* =========================================================================
       BORDER RADIUS
       ========================================================================= */
    --sfb-radius-none: 0;
    --sfb-radius-xs: 2px;
    --sfb-radius-sm: 4px;
    --sfb-radius-md: 6px;
    --sfb-radius-lg: 8px;
    --sfb-radius-xl: 12px;
    --sfb-radius-2xl: 16px;
    --sfb-radius-3xl: 24px;
    --sfb-radius-full: 9999px;

    /* =========================================================================
       SHADOWS
       ========================================================================= */
    --sfb-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --sfb-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --sfb-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --sfb-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --sfb-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.6);
    --sfb-shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.7);
    --sfb-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.5);
    --sfb-shadow-card-hover: 0 16px 32px rgba(0, 0, 0, 0.6);
    --sfb-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    --sfb-shadow-glow-primary: 0 0 20px var(--sfb-color-primary-alpha-50);
    --sfb-shadow-glow-secondary: 0 0 20px var(--sfb-color-secondary-alpha-50);

    /* =========================================================================
       TRANSITIONS
       ========================================================================= */
    --sfb-transition-fast: 150ms ease-out;
    --sfb-transition-base: 250ms ease-out;
    --sfb-transition-slow: 350ms ease-out;
    --sfb-transition-slower: 500ms ease-out;
    --sfb-transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --sfb-transition-spring: 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* =========================================================================
       Z-INDEX
       ========================================================================= */
    --sfb-z-behind: -1;
    --sfb-z-base: 0;
    --sfb-z-dropdown: 1000;
    --sfb-z-sticky: 1020;
    --sfb-z-fixed: 1030;
    --sfb-z-modal-backdrop: 1040;
    --sfb-z-modal: 1050;
    --sfb-z-popover: 1060;
    --sfb-z-tooltip: 1070;
    --sfb-z-toast: 1080;
    --sfb-z-max: 9999;

    /* =========================================================================
       SIZES & DIMENSIONS
       ========================================================================= */
    --sfb-touch-target-min: 44px;
    --sfb-touch-target-comfortable: 48px;

    --sfb-container-sm: 540px;
    --sfb-container-md: 720px;
    --sfb-container-lg: 960px;
    --sfb-container-xl: 1140px;
    --sfb-container-xxl: 1320px;

    --sfb-header-height-mobile: 56px;
    --sfb-header-height-desktop: 64px;
    --sfb-bottom-nav-height: 64px;

    /* =========================================================================
       SCROLLBAR
       ========================================================================= */
    --sfb-scrollbar-size: 8px;
    --sfb-scrollbar-size-thin: 4px;
    --sfb-scrollbar-thumb: #646464;
    --sfb-scrollbar-thumb-hover: #808080;
    --sfb-scrollbar-track: transparent;

    /* =========================================================================
       LEGACY ALIASES (für Backwards-Compatibility im Network Backend)
       Nach Migration entfernen!
       ========================================================================= */
    --primary: var(--sfb-color-primary);
    --primary-light: var(--sfb-color-primary-light);
    --primary-a-50: var(--sfb-color-primary-alpha-50);
    --secondary: var(--sfb-color-secondary);
    --secondary-a-50: var(--sfb-color-secondary-alpha-50);
    --bg: var(--sfb-gradient-background);
    --bg0: var(--sfb-color-background-base);
    --bg1: var(--sfb-color-background-base);
    --bg-elevated: var(--sfb-color-background-elevated);
    --bg-elevated-soft: var(--sfb-color-background-elevated);
    --text: var(--sfb-color-text-base);
    --text-muted: var(--sfb-color-text-subdued);
    --border-subtle: var(--sfb-color-border-subtle);
    --danger: var(--sfb-color-danger);
    --success: var(--sfb-color-success);
    --warning: var(--sfb-color-warning);
    --radius-xl: var(--sfb-radius-xl);
    --radius-lg: var(--sfb-radius-lg);
    --radius-md: var(--sfb-radius-md);
    --radius-sm: var(--sfb-radius-sm);
    --radius-xs: var(--sfb-radius-xs);
    --font-sans: var(--sfb-font-family-base);
    --font-mono: var(--sfb-font-family-mono);
    --transition-fast: var(--sfb-transition-fast);
    --shadow-soft: var(--sfb-shadow-lg);
    --header: var(--sfb-color-background-base);
    --background: var(--sfb-color-background-card);
    --error-color: var(--sfb-color-danger);
    --sb-track-color: #171717;
    --sb-thumb-color: var(--sfb-color-primary);
    --sb-size: 5px;
}


/* =============================================================================
   LIGHT MODE (optional)
   ============================================================================= */

:root[data-theme="light"] {
    --sfb-gradient-background: #f9fafb;
    --sfb-color-background-elevated: #ffffff;
    --sfb-color-background-elevated-hover: #f3f4f6;
    --sfb-color-text-base: #1f2937;
    --sfb-color-text-subdued: #6b7280;
    --sfb-color-border-subtle: #e5e7eb;
    --sfb-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.08);
}


/* =============================================================================
   BASE RESET & GLOBAL STYLES
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--sfb-color-background-base);
    background: var(--sfb-gradient-background);
    background-image:
        radial-gradient(65vw 50vw at 19% 13%, rgb(66 48 136 / 14%), transparent 55%),
        radial-gradient(90vw 40vw at 90% 100%, rgba(51, 214, 255, 0.04), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1)),
        linear-gradient(180deg, rgba(7, 10, 16, .85), rgba(10, 16, 32, .92));
    background-attachment: fixed;
    font-family: var(--sfb-font-family-base);
    font-size: var(--sfb-font-size-base);
    font-weight: var(--sfb-font-weight-normal);
    line-height: var(--sfb-line-height-base);
    color: var(--sfb-color-text-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

code {
    font-family: var(--sfb-font-family-mono);
}


/* =============================================================================
   TYPOGRAPHY BASE
   ============================================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: var(--sfb-spacing-4);
    font-weight: var(--sfb-font-weight-bold);
    line-height: var(--sfb-line-height-tight);
    color: var(--sfb-color-text-base);
    text-wrap-style: pretty;
    overflow-wrap: anywhere;
}

h1 {
    font-size: var(--sfb-font-size-4xl);
    letter-spacing: var(--sfb-letter-spacing-tight);
}

h2 {
    font-size: var(--sfb-font-size-3xl);
    letter-spacing: var(--sfb-letter-spacing-tight);
}

h3 {
    font-size: var(--sfb-font-size-2xl);
}

h4 {
    font-size: var(--sfb-font-size-xl);
}

h5 {
    font-size: var(--sfb-font-size-lg);
}

h6 {
    font-size: var(--sfb-font-size-base);
}

p {
    margin-top: 0;
    margin-bottom: var(--sfb-spacing-4);
    line-height: var(--sfb-line-height-base);
}

a {
    color: var(--sfb-color-text-base);
    text-decoration: none;
    transition: color var(--sfb-transition-fast);
}

a:hover {
    color: var(--sfb-color-primary);
}

strong,
b {
    font-weight: var(--sfb-font-weight-bold);
}

small {
    font-size: var(--sfb-font-size-sm);
}


/* =============================================================================
   SCROLLBAR STYLING
   ============================================================================= */

*::-webkit-scrollbar {
    width: var(--sfb-scrollbar-size);
    height: var(--sfb-scrollbar-size);
}

*::-webkit-scrollbar-track {
    background: var(--sfb-scrollbar-track);
    border-radius: var(--sfb-radius-sm);
}

*::-webkit-scrollbar-thumb {
    background: var(--sfb-scrollbar-thumb);
    border-radius: var(--sfb-radius-sm);
    transition: background var(--sfb-transition-fast);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--sfb-scrollbar-thumb-hover);
}

.sfb-scrollbar-thin::-webkit-scrollbar {
    width: var(--sfb-scrollbar-size-thin);
    height: var(--sfb-scrollbar-size-thin);
}

@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--sfb-scrollbar-thumb) var(--sfb-scrollbar-track);
    }
}


/* =============================================================================
   SELECTION STYLING
   ============================================================================= */

::selection {
    background: var(--sfb-color-primary-alpha-50);
    color: var(--sfb-color-text-base);
}

::-moz-selection {
    background: var(--sfb-color-primary-alpha-50);
    color: var(--sfb-color-text-base);
}


/* =============================================================================
   FOCUS STATES (Accessibility)
   ============================================================================= */

:focus-visible {
    outline: 2px solid var(--sfb-color-primary);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}


/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

/* Text Colors */
.sfb-text-primary {
    color: var(--sfb-color-primary);
}

.sfb-text-secondary {
    color: var(--sfb-color-secondary);
}

.sfb-text-subdued {
    color: var(--sfb-color-text-subdued);
}

.sfb-text-muted {
    color: var(--sfb-color-text-muted);
}

.sfb-text-success {
    color: var(--sfb-color-success);
}

.sfb-text-danger {
    color: var(--sfb-color-danger);
}

.sfb-text-warning {
    color: var(--sfb-color-warning);
}

.sfb-text-info {
    color: var(--sfb-color-info);
}

/* Text Alignment */
.sfb-text-center {
    text-align: center;
}

.sfb-text-start {
    text-align: left;
}

.sfb-text-end {
    text-align: right;
}

/* Text Decoration */
.sfb-no-underline {
    text-decoration: none;
}

/* Width */
.sfb-w-100 {
    width: 100%;
}

.sfb-w-auto {
    width: auto;
}

/* Background Colors */
.sfb-bg-base {
    background-color: var(--sfb-color-background-base);
}

.sfb-bg-elevated {
    background-color: var(--sfb-color-background-elevated);
}

.sfb-bg-card {
    background-color: var(--sfb-color-background-card);
}

.sfb-bg-primary {
    background-color: var(--sfb-color-primary);
}

.sfb-bg-tinted {
    background-color: var(--sfb-color-background-tinted);
}

/* Font Sizes */
.sfb-text-xxs {
    font-size: var(--sfb-font-size-xxs);
}

.sfb-text-xs {
    font-size: var(--sfb-font-size-xs);
}

.sfb-text-sm {
    font-size: var(--sfb-font-size-sm);
}

.sfb-text-base {
    font-size: var(--sfb-font-size-base);
}

.sfb-text-lg {
    font-size: var(--sfb-font-size-lg);
}

.sfb-text-xl {
    font-size: var(--sfb-font-size-xl);
}

.sfb-text-2xl {
    font-size: var(--sfb-font-size-2xl);
}

.sfb-text-3xl {
    font-size: var(--sfb-font-size-3xl);
}

.sfb-text-4xl {
    font-size: var(--sfb-font-size-4xl);
}

/* Font Weights */
.sfb-font-light {
    font-weight: var(--sfb-font-weight-light);
}

.sfb-font-normal {
    font-weight: var(--sfb-font-weight-normal);
}

.sfb-font-medium {
    font-weight: var(--sfb-font-weight-medium);
}

.sfb-font-bold {
    font-weight: var(--sfb-font-weight-bold);
}

.sfb-font-black {
    font-weight: var(--sfb-font-weight-black);
}

/* Border Radius */
.sfb-rounded-none {
    border-radius: var(--sfb-radius-none);
}

.sfb-rounded-sm {
    border-radius: var(--sfb-radius-sm);
}

.sfb-rounded {
    border-radius: var(--sfb-radius-md);
}

.sfb-rounded-lg {
    border-radius: var(--sfb-radius-lg);
}

.sfb-rounded-xl {
    border-radius: var(--sfb-radius-xl);
}

.sfb-rounded-2xl {
    border-radius: var(--sfb-radius-2xl);
}

.sfb-rounded-full {
    border-radius: var(--sfb-radius-full);
}

/* Shadows */
.sfb-shadow-sm {
    box-shadow: var(--sfb-shadow-sm);
}

.sfb-shadow {
    box-shadow: var(--sfb-shadow-md);
}

.sfb-shadow-lg {
    box-shadow: var(--sfb-shadow-lg);
}

.sfb-shadow-xl {
    box-shadow: var(--sfb-shadow-xl);
}

.sfb-shadow-card {
    box-shadow: var(--sfb-shadow-card);
}

/* Transitions */
.sfb-transition {
    transition: var(--sfb-transition-all) var(--sfb-transition-base);
}

.sfb-transition-fast {
    transition: var(--sfb-transition-all) var(--sfb-transition-fast);
}

.sfb-transition-slow {
    transition: var(--sfb-transition-all) var(--sfb-transition-slow);
}

/* Display */
.sfb-hidden {
    display: none;
}

.sfb-block {
    display: block;
}

.sfb-inline-block {
    display: inline-block;
}

.sfb-flex {
    display: flex;
}

.sfb-inline-flex {
    display: inline-flex;
}

.sfb-grid {
    display: grid;
}

/* Flexbox */
.sfb-flex-row {
    flex-direction: row;
}

.sfb-flex-col {
    flex-direction: column;
}

.sfb-flex-wrap {
    flex-wrap: wrap;
}

.sfb-items-start {
    align-items: flex-start;
}

.sfb-items-center {
    align-items: center;
}

.sfb-items-end {
    align-items: flex-end;
}

.sfb-justify-start {
    justify-content: flex-start;
}

.sfb-justify-center {
    justify-content: center;
}

.sfb-justify-end {
    justify-content: flex-end;
}

.sfb-justify-between {
    justify-content: space-between;
}

.sfb-gap-1 {
    gap: var(--sfb-spacing-1);
}

.sfb-gap-2 {
    gap: var(--sfb-spacing-2);
}

.sfb-gap-3 {
    gap: var(--sfb-spacing-3);
}

.sfb-gap-4 {
    gap: var(--sfb-spacing-4);
}

.sfb-gap-6 {
    gap: var(--sfb-spacing-6);
}

.sfb-gap-8 {
    gap: var(--sfb-spacing-8);
}


/* =============================================================================
   COMPONENT BASE STYLES
   ============================================================================= */

/* Button Base */
.sfb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sfb-spacing-2);
    min-height: var(--sfb-touch-target-min);
    padding: var(--sfb-spacing-3) var(--sfb-spacing-6);
    font-family: var(--sfb-font-family-base);
    font-size: var(--sfb-font-size-sm);
    font-weight: var(--sfb-font-weight-bold);
    line-height: var(--sfb-line-height-none);
    text-decoration: none;
    border: none;
    border-radius: var(--sfb-radius-full);
    cursor: pointer;
    transition: all var(--sfb-transition-fast);
    user-select: none;
    -webkit-user-select: none;
}

.sfb-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Button Primary */
.sfb-btn-primary {
    background-color: var(--sfb-color-primary);
    color: var(--sfb-color-text-on-primary);
}

.sfb-btn-primary:hover:not(:disabled) {
    background-color: var(--sfb-color-primary-hover);
    transform: scale(1.02);
}

.sfb-btn-primary:active:not(:disabled) {
    background-color: var(--sfb-color-primary-active);
    transform: scale(0.98);
}

/* Button Ghost */
.sfb-btn-ghost {
    background-color: transparent;
    color: var(--sfb-color-text-base);
}

.sfb-btn-ghost:hover:not(:disabled) {
    background-color: var(--sfb-color-background-tinted-hover);
}

/* Generic button (legacy) - nicht für sfb-btn! 
button:not(.sfb-btn, .color-swatch) {
    background: var(--sfb-color-primary);
    border: none;
    color: var(--sfb-color-text-on-primary);
    padding: var(--sfb-spacing-2) var(--sfb-spacing-3);
    font-size: var(--sfb-font-size-sm);
    border-radius: var(--sfb-radius-xs);
    text-transform: uppercase;
    font-family: var(--sfb-font-family-base);
    font-weight: var(--sfb-font-weight-bold);
    cursor: pointer;
    transition: filter var(--sfb-transition-fast);
    white-space: nowrap;
}

button:not(.sfb-btn):hover {
    filter: brightness(1.1);
}

button:not(.sfb-btn).disabled,
button:not(.sfb-btn):disabled {
    opacity: 0.2;
}
*/
/* Card Base */
.sfb-card {
    background-color: var(--sfb-color-background-card);
    border-radius: var(--sfb-radius-lg);
    padding: var(--sfb-spacing-4);
    transition: background-color var(--sfb-transition-base),
        transform var(--sfb-transition-base),
        box-shadow var(--sfb-transition-base);
}

.sfb-card:hover {
    background-color: var(--sfb-color-background-card-hover);
}

.sfb-card-interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--sfb-shadow-card-hover);
}


/* =============================================================================
   BUTTON VARIANTS
   ============================================================================= */

/* Button Secondary */
.sfb-btn-secondary {
    background-color: var(--sfb-color-background-tinted);
    color: var(--sfb-color-text-base);
    border: 1px solid var(--sfb-color-border-subtle);
}

.sfb-btn-secondary:hover:not(:disabled) {
    background-color: var(--sfb-color-background-tinted-hover);
    border-color: var(--sfb-color-border-base);
}

/* Button Outline */
.sfb-btn-outline {
    background-color: transparent;
    color: var(--sfb-color-primary);
    border: 1px solid var(--sfb-color-primary);
}

.sfb-btn-outline:hover:not(:disabled) {
    background-color: var(--sfb-color-primary-alpha-10);
}

/* Button Danger */
.sfb-btn-danger {
    background-color: var(--sfb-color-danger);
    color: var(--sfb-white);
}

.sfb-btn-danger:hover:not(:disabled) {
    background-color: var(--sfb-color-danger-hover);
    transform: scale(1.02);
}

/* Button Success */
.sfb-btn-success {
    background-color: var(--sfb-color-success);
    color: var(--sfb-color-text-on-primary);
}

.sfb-btn-success:hover:not(:disabled) {
    background-color: var(--sfb-color-success-hover);
    transform: scale(1.02);
}

/* Button Warning */
.sfb-btn-warning {
    background-color: var(--sfb-color-warning);
    color: var(--sfb-color-text-on-primary);
}

.sfb-btn-warning:hover:not(:disabled) {
    background-color: var(--sfb-color-warning-hover);
    transform: scale(1.02);
}

/* Button Sizes - überschreibt Base min-height */
button.sfb-btn.sfb-btn-sm,
.sfb-btn.sfb-btn-sm {
    min-height: 32px !important;
    height: 32px;
    padding: var(--sfb-spacing-1) var(--sfb-spacing-3) !important;
    font-size: var(--sfb-font-size-xs);
}

button.sfb-btn.sfb-btn-lg,
.sfb-btn.sfb-btn-lg {
    min-height: 52px !important;
    height: auto;
    padding: var(--sfb-spacing-4) var(--sfb-spacing-8) !important;
    font-size: var(--sfb-font-size-lg);
}

/* Button Icon-Only */
.sfb-btn-icon {
    padding: var(--sfb-spacing-2);
    min-width: var(--sfb-touch-target-min);
    aspect-ratio: 1;
}

.sfb-btn-icon.sfb-btn-sm {
    min-width: 32px;
    min-height: 32px;
}


/* =============================================================================
   FORM ELEMENTS
   ============================================================================= */

/* Input Base */
.sfb-input {
    display: block;
    width: 100%;
    min-height: var(--sfb-touch-target-min);
    padding: var(--sfb-spacing-3) var(--sfb-spacing-4);
    font-family: var(--sfb-font-family-base);
    font-size: var(--sfb-font-size-sm);
    color: var(--sfb-color-text-base);
    background-color: var(--sfb-color-background-elevated);
    border: 1px solid var(--sfb-color-border-subtle);
    border-radius: var(--sfb-radius-sm);
    transition: border-color var(--sfb-transition-fast),
        box-shadow var(--sfb-transition-fast),
        background-color var(--sfb-transition-fast);
}

.sfb-input::placeholder {
    color: var(--sfb-color-text-muted);
}

.sfb-input:hover:not(:disabled) {
    border-color: var(--sfb-color-border-base);
    background-color: var(--sfb-color-background-elevated-hover);
}

.sfb-input:focus {
    outline: none;
    border-color: var(--sfb-color-primary);
    box-shadow: 0 0 0 3px var(--sfb-color-primary-alpha-20);
}

.sfb-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Textarea */
.sfb-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Select */
.sfb-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sfb-spacing-3) center;
    background-size: 12px;
    padding-right: var(--sfb-spacing-8);
    line-height: 1.4;
    cursor: pointer;
}

/* Select option & optgroup - Dark Mode Fix */
.sfb-select option {
    background-color: var(--sfb-gray-800);
    color: var(--sfb-color-text-base);
    padding: var(--sfb-spacing-2) var(--sfb-spacing-3);
}

.sfb-select option:hover,
.sfb-select option:focus,
.sfb-select option:checked {
    background-color: var(--sfb-color-primary);
    color: var(--sfb-white);
}

.sfb-select option:disabled {
    color: var(--sfb-color-text-muted);
    background-color: var(--sfb-gray-800);
}

.sfb-select optgroup {
    background-color: var(--sfb-gray-900);
    color: var(--sfb-color-text-subdued);
    font-weight: 600;
    font-style: normal;
    padding: var(--sfb-spacing-2) 0;
}

.sfb-select optgroup option {
    font-weight: 400;
    padding-left: var(--sfb-spacing-4);
}

/* Select size variants */
.sfb-select--sm {
    min-height: 32px;
    padding: var(--sfb-spacing-1) var(--sfb-spacing-3);
    padding-right: var(--sfb-spacing-7);
    font-size: var(--sfb-font-size-xs);
}

.sfb-select--lg {
    min-height: 48px;
    padding: var(--sfb-spacing-3) var(--sfb-spacing-4);
    padding-right: var(--sfb-spacing-9);
    font-size: var(--sfb-font-size-base);
}

/* =============================================================================
   TOGGLE (Checkbox als iOS-Style Slider)
   ============================================================================= */

.sfb-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sfb-spacing-3);
    cursor: pointer;
    user-select: none;
}

.sfb-toggle input {
    appearance: none;
    position: relative;
    width: 44px;
    height: 24px;
    background-color: var(--sfb-gray-600);
    border-radius: var(--sfb-radius-full);
    cursor: pointer;
    transition: background-color var(--sfb-transition-fast);
    flex-shrink: 0;
}

/* Toggle Knob */
.sfb-toggle input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: var(--sfb-white);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform var(--sfb-transition-fast);
}

/* Toggle ON State */
.sfb-toggle input:checked {
    background-color: var(--sfb-color-primary);
}

.sfb-toggle input:checked::after {
    transform: translateX(20px);
}

/* Toggle Focus */
.sfb-toggle input:focus-visible {
    outline: 2px solid var(--sfb-color-primary);
    outline-offset: 2px;
}

/* Toggle Disabled */
.sfb-toggle input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Toggle Label Text */
.sfb-toggle-label {
    font-size: var(--sfb-font-size-sm);
    color: var(--sfb-color-text-base);
}

/* Toggle Small Variant */
.sfb-toggle-sm input {
    width: 36px;
    height: 20px;
}

.sfb-toggle-sm input::after {
    width: 16px;
    height: 16px;
}

.sfb-toggle-sm input:checked::after {
    transform: translateX(16px);
}


/* =============================================================================
   RADIO (Standard Radio Buttons)
   ============================================================================= */

.sfb-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--sfb-spacing-2);
    cursor: pointer;
    user-select: none;
}

.sfb-radio input {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--sfb-color-border-base);
    border-radius: 50%;
    background-color: var(--sfb-color-background-elevated);
    transition: all var(--sfb-transition-fast);
    cursor: pointer;
    flex-shrink: 0;
}

.sfb-radio input:checked {
    border-color: var(--sfb-color-primary);
    background-color: var(--sfb-color-background-elevated);
}

.sfb-radio input:checked::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: 3px;
    background-color: var(--sfb-color-primary);
    border-radius: 50%;
}

.sfb-radio input:focus-visible {
    outline: 2px solid var(--sfb-color-primary);
    outline-offset: 2px;
}


/* =============================================================================
   BUTTON GROUP (Segmented Control / Radio Alternative)
   ============================================================================= */

.sfb-button-group {
    display: inline-flex;
    background-color: var(--sfb-color-background-tinted);
    border-radius: var(--sfb-radius-full);
    padding: 3px;
}

.sfb-button-group input[type="radio"] {
    appearance: none;
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sfb-button-group label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sfb-spacing-2) var(--sfb-spacing-4);
    font-size: var(--sfb-font-size-sm);
    font-weight: var(--sfb-font-weight-medium);
    color: var(--sfb-color-text-subdued);
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--sfb-transition-fast);
    position: relative;
    white-space: nowrap;
    margin: 0;
}

/* Trennlinie zwischen Segmenten */
.sfb-button-group label:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background-color: var(--sfb-color-border-subtle);
}

/* Hover */
.sfb-button-group label:hover {
    color: var(--sfb-color-text-base);
}

/* Active/Checked State */
.sfb-button-group input[type="radio"]:checked+label {
    background-color: var(--sfb-color-primary);
    color: var(--sfb-color-text-on-primary);
    border-radius: var(--sfb-radius-full);
    box-shadow: var(--sfb-shadow-sm);
}

/* Remove separator when adjacent to checked */
.sfb-button-group input[type="radio"]:checked+label::after,
.sfb-button-group input[type="radio"]:checked+label+input+label::before {
    display: none;
}

/* Focus */
.sfb-button-group input[type="radio"]:focus-visible+label {
    outline: 2px solid var(--sfb-color-primary);
    outline-offset: 2px;
}

/* Button Group Sizes */
.sfb-button-group-sm label {
    padding: var(--sfb-spacing-1) var(--sfb-spacing-3);
    font-size: var(--sfb-font-size-xs);
}

.sfb-button-group-lg label {
    padding: var(--sfb-spacing-3) var(--sfb-spacing-6);
    font-size: var(--sfb-font-size-base);
}

/* Form Group */
.sfb-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sfb-spacing-2);
}

/* Label */
.sfb-label {
    font-size: var(--sfb-font-size-sm);
    font-weight: var(--sfb-font-weight-medium);
    color: var(--sfb-color-text-base);
}

.sfb-label-required::after {
    content: " *";
    color: var(--sfb-color-danger);
}

/* Helper Text */
.sfb-helper {
    font-size: var(--sfb-font-size-xs);
    color: var(--sfb-color-text-muted);
}

/* Error State */
.sfb-input-error {
    border-color: var(--sfb-color-danger);
}

.sfb-input-error:focus {
    box-shadow: 0 0 0 3px var(--sfb-color-danger-alpha-20);
}

.sfb-error-message {
    font-size: var(--sfb-font-size-xs);
    color: var(--sfb-color-danger);
}


/* =============================================================================
   BADGES & TAGS
   ============================================================================= */

/* Badge Base */
.sfb-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sfb-spacing-1);
    padding: var(--sfb-spacing-1) var(--sfb-spacing-2);
    font-size: var(--sfb-font-size-xxs);
    font-weight: var(--sfb-font-weight-bold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: var(--sfb-radius-xs);
    white-space: nowrap;
}

/* Badge Variants */
.sfb-badge-primary {
    background-color: var(--sfb-color-primary);
    color: var(--sfb-color-text-on-primary);
}

.sfb-badge-secondary {
    background-color: var(--sfb-color-background-tinted);
    color: var(--sfb-color-text-subdued);
    border: 1px solid var(--sfb-color-border-subtle);
}

.sfb-badge-success {
    background-color: var(--sfb-color-success-alpha-20);
    color: var(--sfb-color-success);
}

.sfb-badge-danger {
    background-color: var(--sfb-color-danger-alpha-20);
    color: var(--sfb-color-danger);
}

.sfb-badge-warning {
    background-color: var(--sfb-color-warning-alpha-20);
    color: var(--sfb-color-warning);
}

.sfb-badge-info {
    background-color: var(--sfb-color-info-alpha-20);
    color: var(--sfb-color-info);
}

/* Shop-specific Badges */
.sfb-badge-bestseller {
    background-color: var(--sfb-color-badge-bestseller);
    color: var(--sfb-gray-900);
    font-weight: var(--sfb-font-weight-black);
}

.sfb-badge-preorder {
    background-color: var(--sfb-color-badge-preorder);
    color: var(--sfb-white);
}

.sfb-badge-limited {
    background-color: var(--sfb-color-badge-limited);
    color: var(--sfb-white);
}

.sfb-badge-exclusive {
    background-color: var(--sfb-color-badge-exclusive);
    color: var(--sfb-black);
}

.sfb-badge-new {
    background-color: var(--sfb-color-success);
    color: var(--sfb-color-text-on-primary);
}

/* Strain Type Badges */
.sfb-badge-indica {
    background-color: var(--sfb-color-indica-alpha-20);
    color: var(--sfb-color-indica);
}

.sfb-badge-sativa {
    background-color: var(--sfb-color-sativa-alpha-20);
    color: var(--sfb-color-sativa);
}

.sfb-badge-hybrid {
    background-color: var(--sfb-color-hybrid-alpha-20);
    color: var(--sfb-color-hybrid);
}

/* Seed Type Badges */
.sfb-badge-feminized {
    background-color: var(--sfb-color-feminized-alpha-20);
    color: var(--sfb-color-feminized);
}

.sfb-badge-regular {
    background-color: var(--sfb-color-regular-alpha-20);
    color: var(--sfb-color-regular);
}

.sfb-badge-autoflower {
    background-color: var(--sfb-color-autoflower-alpha-20);
    color: var(--sfb-color-autoflower);
}

/* Tag (larger, interactive) */
.sfb-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--sfb-spacing-2);
    padding: var(--sfb-spacing-2) var(--sfb-spacing-3);
    font-size: var(--sfb-font-size-xs);
    font-weight: var(--sfb-font-weight-medium);
    background-color: var(--sfb-color-background-tinted);
    border: 1px solid var(--sfb-color-border-subtle);
    border-radius: var(--sfb-radius-full);
    cursor: pointer;
    transition: all var(--sfb-transition-fast);
}

.sfb-tag:has(.sfb-tag-remove) {
    padding-right: var(--sfb-spacing-2);
}

.sfb-tag:hover {
    background-color: var(--sfb-color-background-tinted-hover);
    border-color: var(--sfb-color-border-base);
}

.sfb-tag.active {
    background-color: var(--sfb-color-primary);
    border-color: var(--sfb-color-primary);
    color: var(--sfb-color-text-on-primary);
}

.sfb-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--sfb-transition-fast),
        background-color var(--sfb-transition-fast);
}

.sfb-tag-remove:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
}

.sfb-tag.active .sfb-tag-remove:hover {
    background-color: rgba(0, 0, 0, 0.1);
}


/* =============================================================================
   TABLES
   ============================================================================= */

.sfb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sfb-font-size-sm);
}

.sfb-table th,
.sfb-table td {
    padding: var(--sfb-spacing-3) var(--sfb-spacing-4);
    text-align: left;
    border-bottom: 1px solid var(--sfb-color-border-subtle);
}

.sfb-table th {
    font-weight: var(--sfb-font-weight-bold);
    color: var(--sfb-color-text-subdued);
    background-color: var(--sfb-color-background-elevated);
    text-transform: uppercase;
    font-size: var(--sfb-font-size-xs);
    letter-spacing: 0.05em;
}

.sfb-table tbody tr:hover {
    background-color: var(--sfb-color-background-tinted);
}

.sfb-table-striped tbody tr:nth-child(even) {
    background-color: var(--sfb-color-background-tinted);
}

/* Responsive Table */
.sfb-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* =============================================================================
   WIDGET CONTAINER
   ============================================================================= */

.sfb-widget {
    font-family: var(--sfb-font-family-base);
    color: var(--sfb-color-text-base);
}


/* =============================================================================
   RESPONSIVE HELPERS
   ============================================================================= */

@media (max-width: 575px) {
    .sfb-hide-xs {
        display: none !important;
    }
}

@media (min-width: 576px) {
    .sfb-show-sm {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .sfb-hide-md-up {
        display: none !important;
    }

    .sfb-show-md {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .sfb-hide-lg-up {
        display: none !important;
    }

    .sfb-show-lg {
        display: block !important;
    }
}

@media (max-width: 991px) {
    .sfb-hide-below-lg {
        display: none !important;
    }
}


/* =============================================================================
   ANIMATIONS
   ============================================================================= */

@keyframes sfb-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes sfb-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sfb-scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes sfb-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes sfb-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.sfb-animate-fade-in {
    animation: sfb-fade-in var(--sfb-transition-base) ease-out;
}

.sfb-animate-fade-in-up {
    animation: sfb-fade-in-up var(--sfb-transition-base) ease-out;
}

.sfb-animate-scale-in {
    animation: sfb-scale-in var(--sfb-transition-base) ease-out;
}

.sfb-animate-pulse {
    animation: sfb-pulse 2s ease-in-out infinite;
}

.sfb-animate-spin {
    animation: sfb-spin 1s linear infinite;
}


/* =============================================================================
   LIGHT MODE THEME
   =============================================================================
   Aktivierung via [data-theme="light"] auf <html> oder <body>
   Alle Farben werden hier für Light Mode überschrieben
   ============================================================================= */

[data-theme="light"] {
    /* Grayscale - Invertiert für Light Mode */
    --sfb-gray-950: #FFFFFF;
    --sfb-gray-900: #F5F5F5;
    --sfb-gray-850: #EBEBEB;
    --sfb-gray-800: #E0E0E0;
    --sfb-gray-750: #D5D5D5;
    --sfb-gray-700: #C0C0C0;
    --sfb-gray-600: #9E9E9E;
    --sfb-gray-500: #757575;
    --sfb-gray-400: #616161;
    --sfb-gray-300: #424242;
    --sfb-gray-200: #212121;
    --sfb-gray-100: #121212;
    --sfb-gray-50: #000000;

    /* Backgrounds */
    --sfb-color-background-base: #FFFFFF;
    --sfb-color-background-elevated: #F5F5F5;
    --sfb-color-background-elevated-hover: #EBEBEB;
    --sfb-color-background-highlight: #EBEBEB;
    --sfb-color-background-card: #FFFFFF;
    --sfb-color-background-card-hover: #F5F5F5;
    --sfb-color-background-tinted: rgba(0, 0, 0, 0.03);
    --sfb-color-background-tinted-hover: rgba(0, 0, 0, 0.06);
    --sfb-color-background-overlay: rgba(0, 0, 0, 0.5);

    /* Gradient Backgrounds */
    --sfb-gradient-background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
    --sfb-gradient-card: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.04) 100%);

    /* Text */
    --sfb-color-text-base: #121212;
    --sfb-color-text-subdued: #424242;
    --sfb-color-text-muted: #616161;
    --sfb-color-text-disabled: #9E9E9E;
    --sfb-color-text-bright: #000000;
    --sfb-color-text-on-primary: #FFFFFF;

    /* Borders */
    --sfb-color-border-base: #E0E0E0;
    --sfb-color-border-subtle: #EBEBEB;

    /* Shadows - Mehr Tiefe für Light Mode */
    --sfb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --sfb-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --sfb-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --sfb-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
}


/* =============================================================================
   LAYOUT UTILITIES (Bootstrap-Kompatibel mit sfb-* Prefix)
   =============================================================================
   Migriert aus __network.css via migrate-bootstrap-to-sfb.js
   Datum: 2026-02-06T01:40:12.529Z
   ============================================================================= */





:root {
    --gutter-x: 1.5rem;
    --gutter-y: 0;
}


/* ====================== BOOTSTRAP ====================== */
/* =========== CONTAINER =========== */
@media {

    .sfb-container,
    .sfb-container-fluid,
    .sfb-container-xxl,
    .sfb-container-xl,
    .sfb-container-lg,
    .sfb-container-md,
    .sfb-container-sm {
        width: 100%;
        padding-right: calc(var(--gutter-x) * 0.5);
        padding-left: calc(var(--gutter-x) * 0.5);
        margin-right: auto;
        margin-left: auto;
    }
}

/* sm */
@media (min-width: 576px) {

    .sfb-container-sm,
    .sfb-container {
        max-width: 540px;
    }
}

/* md */
@media (min-width: 768px) {

    .sfb-container-md,
    .sfb-container-sm,
    .sfb-container {
        max-width: 720px;
    }
}

/* lg */
@media (min-width: 992px) {

    .sfb-container-lg,
    .sfb-container-md,
    .sfb-container-sm,
    .sfb-container {
        max-width: 960px;
    }
}

/* xl */
@media (min-width: 1200px) {

    .sfb-container-xl,
    .sfb-container-lg,
    .sfb-container-md,
    .sfb-container-sm,
    .sfb-container {
        max-width: 1140px;
    }
}

/* xxl */
@media (min-width: 1400px) {

    .sfb-container-xxl,
    .sfb-container-xl,
    .sfb-container-lg,
    .sfb-container-md,
    .sfb-container-sm,
    .sfb-container {
        max-width: 1320px;
    }
}

/* ========= CONTAINER END ========= */

/* ============= GRID ============== */
@media {
    .sfb-row {
        --gutter-x: 1.5rem;
        --gutter-y: 0;
        display: flex;
        flex-wrap: wrap;
        margin-top: calc(-1 * var(--gutter-y));
        margin-right: calc(-0.5 * var(--gutter-x));
        margin-left: calc(-0.5 * var(--gutter-x));
    }

    .sfb-row>* {
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        padding-right: calc(var(--gutter-x) * 0.5);
        padding-left: calc(var(--gutter-x) * 0.5);
        margin-top: var(--gutter-y);
    }

    .sfb-col {
        flex: 1 0 0%;
    }

    .sfb-row-cols-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .sfb-row-cols-1>* {
        flex: 0 0 auto;
        width: 100%;
    }

    .sfb-row-cols-2>* {
        flex: 0 0 auto;
        width: 50%;
    }

    .sfb-row-cols-3>* {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .sfb-row-cols-4>* {
        flex: 0 0 auto;
        width: 25%;
    }

    .sfb-row-cols-5>* {
        flex: 0 0 auto;
        width: 20%;
    }

    .sfb-row-cols-6>* {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .sfb-col-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .sfb-col-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .sfb-col-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .sfb-col-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .sfb-col-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .sfb-col-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .sfb-col-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .sfb-col-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .sfb-col-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .sfb-col-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .sfb-col-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .sfb-col-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .sfb-col-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .sfb-offset-1 {
        margin-left: 8.33333333%;
    }

    .sfb-offset-2 {
        margin-left: 16.66666667%;
    }

    .sfb-offset-3 {
        margin-left: 25%;
    }

    .sfb-offset-4 {
        margin-left: 33.33333333%;
    }

    .sfb-offset-5 {
        margin-left: 41.66666667%;
    }

    .sfb-offset-6 {
        margin-left: 50%;
    }

    .sfb-offset-7 {
        margin-left: 58.33333333%;
    }

    .sfb-offset-8 {
        margin-left: 66.66666667%;
    }

    .sfb-offset-9 {
        margin-left: 75%;
    }

    .sfb-offset-10 {
        margin-left: 83.33333333%;
    }

    .sfb-offset-11 {
        margin-left: 91.66666667%;
    }

    .sfb-g-0,
    .sfb-gx-0 {
        --gutter-x: 0;
    }

    .sfb-g-0,
    .sfb-gy-0 {
        --gutter-y: 0;
    }

    .sfb-g-1,
    .sfb-gx-1 {
        --gutter-x: 0.25rem;
    }

    .sfb-g-1,
    .sfb-gy-1 {
        --gutter-y: 0.25rem;
    }

    .sfb-g-2,
    .sfb-gx-2 {
        --gutter-x: 0.5rem;
    }

    .sfb-g-2,
    .sfb-gy-2 {
        --gutter-y: 0.5rem;
    }

    .sfb-g-3,
    .sfb-gx-3 {
        --gutter-x: 1rem;
    }

    .sfb-g-3,
    .sfb-gy-3 {
        --gutter-y: 1rem;
    }

    .sfb-g-4,
    .sfb-gx-4 {
        --gutter-x: 1.5rem;
    }

    .sfb-g-4,
    .sfb-gy-4 {
        --gutter-y: 1.5rem;
    }

    .sfb-g-5,
    .sfb-gx-5 {
        --gutter-x: 3rem;
    }

    .sfb-g-5,
    .sfb-gy-5 {
        --gutter-y: 3rem;
    }
}

/* sm */
@media (min-width: 576px) {
    .sfb-col-sm {
        flex: 1 0 0%;
    }

    .sfb-row-cols-sm-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .sfb-row-cols-sm-1>* {
        flex: 0 0 auto;
        width: 100%;
    }

    .sfb-row-cols-sm-2>* {
        flex: 0 0 auto;
        width: 50%;
    }

    .sfb-row-cols-sm-3>* {

        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .sfb-row-cols-sm-4>* {
        flex: 0 0 auto;
        width: 25%;
    }

    .sfb-row-cols-sm-5>* {
        flex: 0 0 auto;
        width: 20%;
    }

    .sfb-row-cols-sm-6>* {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .sfb-col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .sfb-col-sm-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .sfb-col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .sfb-col-sm-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .sfb-col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .sfb-col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .sfb-col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .sfb-col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .sfb-col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .sfb-col-sm-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .sfb-col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .sfb-col-sm-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .sfb-col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .sfb-offset-sm-0 {
        margin-left: 0;
    }

    .sfb-offset-sm-1 {
        margin-left: 8.33333333%;
    }

    .sfb-offset-sm-2 {
        margin-left: 16.66666667%;
    }

    .sfb-offset-sm-3 {
        margin-left: 25%;
    }

    .sfb-offset-sm-4 {
        margin-left: 33.33333333%;
    }

    .sfb-offset-sm-5 {
        margin-left: 41.66666667%;
    }

    .sfb-offset-sm-6 {
        margin-left: 50%;
    }

    .sfb-offset-sm-7 {
        margin-left: 58.33333333%;
    }

    .sfb-offset-sm-8 {
        margin-left: 66.66666667%;
    }

    .sfb-offset-sm-9 {
        margin-left: 75%;
    }

    .sfb-offset-sm-10 {
        margin-left: 83.33333333%;
    }

    .sfb-offset-sm-11 {
        margin-left: 91.66666667%;
    }

    .g-sm-0,
    .sfb-gx-sm-0 {
        --gutter-x: 0;
    }

    .g-sm-0,
    .sfb-gy-sm-0 {
        --gutter-y: 0;
    }

    .g-sm-1,
    .sfb-gx-sm-1 {
        --gutter-x: 0.25rem;
    }

    .g-sm-1,
    .sfb-gy-sm-1 {
        --gutter-y: 0.25rem;
    }

    .g-sm-2,
    .sfb-gx-sm-2 {
        --gutter-x: 0.5rem;
    }

    .g-sm-2,
    .sfb-gy-sm-2 {
        --gutter-y: 0.5rem;
    }

    .g-sm-3,
    .sfb-gx-sm-3 {
        --gutter-x: 1rem;
    }

    .g-sm-3,
    .sfb-gy-sm-3 {
        --gutter-y: 1rem;
    }

    .g-sm-4,
    .sfb-gx-sm-4 {
        --gutter-x: 1.5rem;
    }

    .g-sm-4,
    .sfb-gy-sm-4 {
        --gutter-y: 1.5rem;
    }

    .g-sm-5,
    .sfb-gx-sm-5 {
        --gutter-x: 3rem;
    }

    .g-sm-5,
    .sfb-gy-sm-5 {
        --gutter-y: 3rem;
    }
}

/* md */
@media (min-width: 768px) {
    .sfb-col-md {
        flex: 1 0 0%;
    }

    .sfb-row-cols-md-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .sfb-row-cols-md-1>* {
        flex: 0 0 auto;
        width: 100%;
    }

    .sfb-row-cols-md-2>* {
        flex: 0 0 auto;
        width: 50%;
    }

    .sfb-row-cols-md-3>* {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .sfb-row-cols-md-4>* {
        flex: 0 0 auto;
        width: 25%;
    }

    .sfb-row-cols-md-5>* {
        flex: 0 0 auto;
        width: 20%;
    }

    .sfb-row-cols-md-6>* {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .sfb-col-md-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .sfb-col-md-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .sfb-col-md-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .sfb-col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .sfb-col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .sfb-col-md-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .sfb-col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .sfb-col-md-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .sfb-col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .sfb-col-md-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .sfb-col-md-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .sfb-col-md-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .sfb-col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .sfb-offset-md-0 {
        margin-left: 0;
    }

    .sfb-offset-md-1 {
        margin-left: 8.33333333%;
    }

    .sfb-offset-md-2 {
        margin-left: 16.66666667%;
    }

    .sfb-offset-md-3 {
        margin-left: 25%;
    }

    .sfb-offset-md-4 {
        margin-left: 33.33333333%;
    }

    .sfb-offset-md-5 {
        margin-left: 41.66666667%;
    }

    .sfb-offset-md-6 {
        margin-left: 50%;
    }

    .sfb-offset-md-7 {
        margin-left: 58.33333333%;
    }

    .sfb-offset-md-8 {
        margin-left: 66.66666667%;
    }

    .sfb-offset-md-9 {
        margin-left: 75%;
    }

    .sfb-offset-md-10 {
        margin-left: 83.33333333%;
    }

    .sfb-offset-md-11 {
        margin-left: 91.66666667%;
    }

    .g-md-0,
    .sfb-gx-md-0 {
        --gutter-x: 0;
    }

    .g-md-0,
    .sfb-gy-md-0 {
        --gutter-y: 0;
    }

    .g-md-1,
    .sfb-gx-md-1 {
        --gutter-x: 0.25rem;
    }

    .g-md-1,
    .sfb-gy-md-1 {
        --gutter-y: 0.25rem;
    }

    .g-md-2,
    .sfb-gx-md-2 {
        --gutter-x: 0.5rem;
    }

    .g-md-2,
    .sfb-gy-md-2 {
        --gutter-y: 0.5rem;
    }

    .g-md-3,
    .sfb-gx-md-3 {
        --gutter-x: 1rem;
    }

    .g-md-3,
    .sfb-gy-md-3 {
        --gutter-y: 1rem;
    }

    .g-md-4,
    .sfb-gx-md-4 {
        --gutter-x: 1.5rem;
    }

    .g-md-4,
    .sfb-gy-md-4 {
        --gutter-y: 1.5rem;
    }

    .g-md-5,
    .sfb-gx-md-5 {
        --gutter-x: 3rem;
    }

    .g-md-5,
    .sfb-gy-md-5 {
        --gutter-y: 3rem;
    }
}

/* lg */
@media (min-width: 992px) {
    .sfb-col-lg {
        flex: 1 0 0%;
    }

    .sfb-row-cols-lg-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .sfb-row-cols-lg-1>* {
        flex: 0 0 auto;
        width: 100%;
    }

    .sfb-row-cols-lg-2>* {
        flex: 0 0 auto;
        width: 50%;
    }

    .sfb-row-cols-lg-3>* {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .sfb-row-cols-lg-4>* {
        flex: 0 0 auto;
        width: 25%;
    }

    .sfb-row-cols-lg-5>* {
        flex: 0 0 auto;
        width: 20%;
    }

    .sfb-row-cols-lg-6>* {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .sfb-col-lg-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .sfb-col-lg-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .sfb-col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .sfb-col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .sfb-col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .sfb-col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .sfb-col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .sfb-col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .sfb-col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .sfb-col-lg-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .sfb-col-lg-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .sfb-col-lg-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .sfb-col-lg-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .sfb-offset-lg-0 {
        margin-left: 0;
    }

    .sfb-offset-lg-1 {
        margin-left: 8.33333333%;
    }

    .sfb-offset-lg-2 {
        margin-left: 16.66666667%;
    }

    .sfb-offset-lg-3 {
        margin-left: 25%;
    }

    .sfb-offset-lg-4 {
        margin-left: 33.33333333%;
    }

    .sfb-offset-lg-5 {
        margin-left: 41.66666667%;
    }

    .sfb-offset-lg-6 {
        margin-left: 50%;
    }

    .sfb-offset-lg-7 {
        margin-left: 58.33333333%;
    }

    .sfb-offset-lg-8 {
        margin-left: 66.66666667%;
    }

    .sfb-offset-lg-9 {
        margin-left: 75%;
    }

    .sfb-offset-lg-10 {
        margin-left: 83.33333333%;
    }

    .sfb-offset-lg-11 {
        margin-left: 91.66666667%;
    }

    .g-lg-0,
    .sfb-gx-lg-0 {
        --gutter-x: 0;
    }

    .g-lg-0,
    .sfb-gy-lg-0 {
        --gutter-y: 0;
    }

    .g-lg-1,
    .sfb-gx-lg-1 {
        --gutter-x: 0.25rem;
    }

    .g-lg-1,
    .sfb-gy-lg-1 {
        --gutter-y: 0.25rem;
    }

    .g-lg-2,
    .sfb-gx-lg-2 {
        --gutter-x: 0.5rem;
    }

    .g-lg-2,
    .sfb-gy-lg-2 {
        --gutter-y: 0.5rem;
    }

    .g-lg-3,
    .sfb-gx-lg-3 {
        --gutter-x: 1rem;
    }

    .g-lg-3,
    .sfb-gy-lg-3 {
        --gutter-y: 1rem;
    }

    .g-lg-4,
    .sfb-gx-lg-4 {
        --gutter-x: 1.5rem;
    }

    .g-lg-4,
    .sfb-gy-lg-4 {
        --gutter-y: 1.5rem;
    }

    .g-lg-5,
    .sfb-gx-lg-5 {
        --gutter-x: 3rem;
    }

    .g-lg-5,
    .sfb-gy-lg-5 {
        --gutter-y: 3rem;
    }
}

/* xl */
@media (min-width: 1200px) {
    .sfb-col-xl {
        flex: 1 0 0%;
    }

    .sfb-row-cols-xl-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .sfb-row-cols-xl-1>* {
        flex: 0 0 auto;
        width: 100%;
    }

    .sfb-row-cols-xl-2>* {
        flex: 0 0 auto;
        width: 50%;
    }

    .sfb-row-cols-xl-3>* {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .sfb-row-cols-xl-4>* {
        flex: 0 0 auto;
        width: 25%;
    }

    .sfb-row-cols-xl-5>* {
        flex: 0 0 auto;
        width: 20%;
    }

    .sfb-row-cols-xl-6>* {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .sfb-col-xl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .sfb-col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .sfb-col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .sfb-col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .sfb-col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .sfb-col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .sfb-col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .sfb-col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .sfb-col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .sfb-col-xl-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .sfb-col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .sfb-col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .sfb-col-xl-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .sfb-offset-xl-0 {
        margin-left: 0;
    }

    .sfb-offset-xl-1 {
        margin-left: 8.33333333%;
    }

    .sfb-offset-xl-2 {
        margin-left: 16.66666667%;
    }

    .sfb-offset-xl-3 {
        margin-left: 25%;
    }

    .sfb-offset-xl-4 {
        margin-left: 33.33333333%;
    }

    .sfb-offset-xl-5 {
        margin-left: 41.66666667%;
    }

    .sfb-offset-xl-6 {
        margin-left: 50%;
    }

    .sfb-offset-xl-7 {
        margin-left: 58.33333333%;
    }

    .sfb-offset-xl-8 {
        margin-left: 66.66666667%;
    }

    .sfb-offset-xl-9 {
        margin-left: 75%;
    }

    .sfb-offset-xl-10 {
        margin-left: 83.33333333%;
    }

    .sfb-offset-xl-11 {
        margin-left: 91.66666667%;
    }

    .g-xl-0,
    .sfb-gx-xl-0 {
        --gutter-x: 0;
    }

    .g-xl-0,
    .sfb-gy-xl-0 {
        --gutter-y: 0;
    }

    .g-xl-1,
    .sfb-gx-xl-1 {
        --gutter-x: 0.25rem;
    }

    .g-xl-1,
    .sfb-gy-xl-1 {
        --gutter-y: 0.25rem;
    }

    .g-xl-2,
    .sfb-gx-xl-2 {
        --gutter-x: 0.5rem;
    }

    .g-xl-2,
    .sfb-gy-xl-2 {
        --gutter-y: 0.5rem;
    }

    .g-xl-3,
    .sfb-gx-xl-3 {
        --gutter-x: 1rem;
    }

    .g-xl-3,
    .sfb-gy-xl-3 {
        --gutter-y: 1rem;
    }

    .g-xl-4,
    .sfb-gx-xl-4 {
        --gutter-x: 1.5rem;
    }

    .g-xl-4,
    .sfb-gy-xl-4 {
        --gutter-y: 1.5rem;
    }

    .g-xl-5,
    .sfb-gx-xl-5 {
        --gutter-x: 3rem;
    }

    .g-xl-5,
    .sfb-gy-xl-5 {
        --gutter-y: 3rem;
    }
}

/* xxl */
@media (min-width: 1400px) {
    .sfb-col-xxl {
        flex: 1 0 0%;
    }

    .sfb-row-cols-xxl-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .sfb-row-cols-xxl-1>* {
        flex: 0 0 auto;
        width: 100%;
    }

    .sfb-row-cols-xxl-2>* {
        flex: 0 0 auto;
        width: 50%;
    }

    .sfb-row-cols-xxl-3>* {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .sfb-row-cols-xxl-4>* {
        flex: 0 0 auto;
        width: 25%;
    }

    .sfb-row-cols-xxl-5>* {
        flex: 0 0 auto;
        width: 20%;
    }

    .sfb-row-cols-xxl-6>* {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .sfb-col-xxl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .sfb-col-xxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .sfb-col-xxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .sfb-col-xxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .sfb-col-xxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .sfb-col-xxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .sfb-col-xxl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .sfb-col-xxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .sfb-col-xxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .sfb-col-xxl-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .sfb-col-xxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .sfb-col-xxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .sfb-col-xxl-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .sfb-offset-xxl-0 {
        margin-left: 0;
    }

    .sfb-offset-xxl-1 {
        margin-left: 8.33333333%;
    }

    .sfb-offset-xxl-2 {
        margin-left: 16.66666667%;
    }

    .sfb-offset-xxl-3 {
        margin-left: 25%;
    }

    .sfb-offset-xxl-4 {
        margin-left: 33.33333333%;
    }

    .sfb-offset-xxl-5 {
        margin-left: 41.66666667%;
    }

    .sfb-offset-xxl-6 {

        margin-left: 50%;
    }

    .sfb-offset-xxl-7 {
        margin-left: 58.33333333%;
    }

    .sfb-offset-xxl-8 {
        margin-left: 66.66666667%;
    }

    .sfb-offset-xxl-9 {
        margin-left: 75%;
    }

    .sfb-offset-xxl-10 {
        margin-left: 83.33333333%;
    }

    .sfb-offset-xxl-11 {
        margin-left: 91.66666667%;
    }

    .g-xxl-0,
    .sfb-gx-xxl-0 {
        --gutter-x: 0;
    }

    .g-xxl-0,
    .sfb-gy-xxl-0 {
        --gutter-y: 0;
    }

    .g-xxl-1,
    .sfb-gx-xxl-1 {
        --gutter-x: 0.25rem;
    }

    .g-xxl-1,
    .sfb-gy-xxl-1 {
        --gutter-y: 0.25rem;
    }

    .g-xxl-2,
    .sfb-gx-xxl-2 {
        --gutter-x: 0.5rem;
    }

    .g-xxl-2,
    .sfb-gy-xxl-2 {
        --gutter-y: 0.5rem;
    }

    .g-xxl-3,
    .sfb-gx-xxl-3 {
        --gutter-x: 1rem;
    }

    .g-xxl-3,
    .sfb-gy-xxl-3 {
        --gutter-y: 1rem;
    }

    .g-xxl-4,
    .sfb-gx-xxl-4 {
        --gutter-x: 1.5rem;
    }

    .g-xxl-4,
    .sfb-gy-xxl-4 {
        --gutter-y: 1.5rem;
    }

    .g-xxl-5,
    .sfb-gx-xxl-5 {
        --gutter-x: 3rem;
    }

    .g-xxl-5,
    .sfb-gy-xxl-5 {
        --gutter-y: 3rem;
    }
}

/* =========== GRID END ============ */

/* ======== FLEX-DIRECTION ========= */
@media {
    .sfb-flex-row-reverse {
        flex-direction: row-reverse !important;
    }

    .sfb-flex-row {
        flex-direction: row !important;
    }

    .sfb-flex-col-reverse {
        flex-direction: column-reverse !important;
    }

    .sfb-flex-col {
        flex-direction: column !important;
    }
}

/* sm */
@media (min-width: 576px) {
    .flex-sm-row-reverse {
        flex-direction: row-reverse !important;
    }

    .sfb-flex-sm-row {
        flex-direction: row !important;
    }

    .sfb-flex-sm-col-reverse {
        flex-direction: column-reverse !important;
    }

    .sfb-flex-sm-col {
        flex-direction: column !important;
    }
}

/* md */
@media (min-width: 768px) {
    .flex-md-row-reverse {
        flex-direction: row-reverse !important;
    }

    .sfb-flex-md-row {
        flex-direction: row !important;
    }

    .sfb-flex-md-col-reverse {
        flex-direction: column-reverse !important;
    }

    .sfb-flex-md-col {
        flex-direction: column !important;
    }
}

/* lg */
@media (min-width: 992px) {
    .flex-lg-row-reverse {
        flex-direction: row-reverse !important;
    }

    .sfb-flex-lg-row {
        flex-direction: row !important;
    }

    .sfb-flex-lg-col-reverse {
        flex-direction: column-reverse !important;
    }

    .sfb-flex-lg-col {
        flex-direction: column !important;
    }
}

/* xl */
@media (min-width: 1200px) {
    .flex-xl-row-reverse {
        flex-direction: row-reverse !important;
    }

    .sfb-flex-xl-row {
        flex-direction: row !important;
    }

    .sfb-flex-xl-col-reverse {
        flex-direction: column-reverse !important;
    }

    .sfb-flex-xl-col {
        flex-direction: column !important;
    }
}

/* xxl */
@media (min-width: 1400px) {
    .flex-xxl-row-reverse {
        flex-direction: row-reverse !important;
    }

    .sfb-flex-xxl-row {
        flex-direction: row !important;
    }

    .sfb-flex-xxl-col-reverse {
        flex-direction: column-reverse !important;
    }

    .sfb-flex-xxl-col {
        flex-direction: column !important;
    }
}

/* ====== FLEX-DIRECTION END ======= */

/* ============ SPACING ============ */
@media {
    .sfb-m-0 {
        margin: 0 !important;
    }

    .sfb-m-1 {
        margin: 0.25rem !important;
    }

    .sfb-m-2 {
        margin: 0.5rem !important;
    }

    .sfb-m-3 {
        margin: 1rem !important;
    }

    .sfb-m-4 {
        margin: 1.5rem !important;
    }

    .sfb-m-5 {
        margin: 3rem !important;
    }

    .sfb-m-auto {
        margin: auto !important;
    }

    .sfb-mx-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .sfb-mx-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .sfb-mx-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .sfb-mx-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .sfb-mx-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .sfb-mx-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .sfb-mx-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .sfb-my-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .sfb-my-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .sfb-my-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .sfb-my-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .sfb-my-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .sfb-my-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .sfb-my-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .sfb-mt-0 {
        margin-top: 0 !important;
    }

    .sfb-mt-1 {
        margin-top: 0.25rem !important;
    }

    .sfb-mt-2 {
        margin-top: 0.5rem !important;
    }

    .sfb-mt-3 {
        margin-top: 1rem !important;
    }

    .sfb-mt-4 {
        margin-top: 1.5rem !important;
    }

    .sfb-mt-5 {
        margin-top: 3rem !important;
    }

    .sfb-mt-auto {
        margin-top: auto !important;
    }

    .sfb-me-0 {
        margin-right: 0 !important;
    }

    .sfb-me-1 {
        margin-right: 0.25rem !important;
    }

    .sfb-me-2 {
        margin-right: 0.5rem !important;
    }

    .sfb-me-3 {
        margin-right: 1rem !important;
    }

    .sfb-me-4 {
        margin-right: 1.5rem !important;
    }

    .sfb-me-5 {
        margin-right: 3rem !important;
    }

    .sfb-me-auto {
        margin-right: auto !important;
    }

    .sfb-mb-0 {
        margin-bottom: 0 !important;
    }

    .sfb-mb-1 {
        margin-bottom: 0.25rem !important;
    }

    .sfb-mb-2 {
        margin-bottom: 0.5rem !important;
    }

    .sfb-mb-3 {
        margin-bottom: 1rem !important;
    }

    .sfb-mb-4 {
        margin-bottom: 1.5rem !important;
    }

    .sfb-mb-5 {
        margin-bottom: 3rem !important;
    }

    .sfb-mb-auto {
        margin-bottom: auto !important;
    }

    .sfb-ms-0 {
        margin-left: 0 !important;
    }

    .sfb-ms-1 {
        margin-left: 0.25rem !important;
    }

    .sfb-ms-2 {
        margin-left: 0.5rem !important;
    }

    .sfb-ms-3 {
        margin-left: 1rem !important;
    }

    .sfb-ms-4 {
        margin-left: 1.5rem !important;
    }

    .sfb-ms-5 {
        margin-left: 3rem !important;
    }

    .sfb-ms-auto {
        margin-left: auto !important;
    }

    .sfb-p-0 {
        padding: 0 !important;
    }

    .sfb-p-1 {
        padding: 0.25rem !important;
    }

    .sfb-p-2 {
        padding: 0.5rem !important;
    }

    .sfb-p-3 {
        padding: 1rem !important;
    }

    .sfb-p-4 {
        padding: 1.5rem !important;
    }

    .sfb-p-5 {
        padding: 3rem !important;
    }

    .sfb-px-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .sfb-px-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .sfb-px-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .sfb-px-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .sfb-px-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .sfb-px-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .sfb-py-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .sfb-py-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .sfb-py-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .sfb-py-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .sfb-py-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .sfb-py-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .sfb-pt-0 {
        padding-top: 0 !important;
    }

    .sfb-pt-1 {
        padding-top: 0.25rem !important;
    }

    .sfb-pt-2 {
        padding-top: 0.5rem !important;
    }

    .sfb-pt-3 {
        padding-top: 1rem !important;
    }

    .sfb-pt-4 {
        padding-top: 1.5rem !important;
    }

    .sfb-pt-5 {
        padding-top: 3rem !important;
    }

    .sfb-pe-0 {
        padding-right: 0 !important;
    }

    .sfb-pe-1 {
        padding-right: 0.25rem !important;
    }

    .sfb-pe-2 {
        padding-right: 0.5rem !important;
    }

    .sfb-pe-3 {
        padding-right: 1rem !important;
    }

    .sfb-pe-4 {
        padding-right: 1.5rem !important;
    }

    .sfb-pe-5 {
        padding-right: 3rem !important;
    }

    .sfb-pb-0 {
        padding-bottom: 0 !important;
    }

    .sfb-pb-1 {
        padding-bottom: 0.25rem !important;
    }

    .sfb-pb-2 {
        padding-bottom: 0.5rem !important;
    }

    .sfb-pb-3 {
        padding-bottom: 1rem !important;
    }

    .sfb-pb-4 {
        padding-bottom: 1.5rem !important;
    }

    .sfb-pb-5 {
        padding-bottom: 3rem !important;
    }

    .sfb-ps-0 {
        padding-left: 0 !important;
    }

    .sfb-ps-1 {
        padding-left: 0.25rem !important;
    }

    .sfb-ps-2 {
        padding-left: 0.5rem !important;
    }

    .sfb-ps-3 {
        padding-left: 1rem !important;
    }

    .sfb-ps-4 {
        padding-left: 1.5rem !important;
    }

    .sfb-ps-5 {
        padding-left: 3rem !important;
    }
}

/* sm */
@media (min-width: 576px) {
    .m-sm-0 {
        margin: 0 !important;
    }

    .m-sm-1 {
        margin: 0.25rem !important;
    }

    .sfb-m-sm-2 {
        margin: 0.5rem !important;
    }

    .m-sm-3 {
        margin: 1rem !important;
    }

    .m-sm-4 {
        margin: 1.5rem !important;
    }

    .m-sm-5 {
        margin: 3rem !important;
    }

    .m-sm-auto {
        margin: auto !important;
    }

    .sfb-mx-sm-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .sfb-mx-sm-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .sfb-mx-sm-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .sfb-mx-sm-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .sfb-mx-sm-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .sfb-mx-sm-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .sfb-mx-sm-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .sfb-my-sm-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .sfb-my-sm-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .sfb-my-sm-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .sfb-my-sm-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .sfb-my-sm-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .sfb-my-sm-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .sfb-my-sm-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .sfb-mt-sm-0 {
        margin-top: 0 !important;
    }

    .sfb-mt-sm-1 {
        margin-top: 0.25rem !important;
    }

    .sfb-mt-sm-2 {
        margin-top: 0.5rem !important;
    }

    .sfb-mt-sm-3 {
        margin-top: 1rem !important;
    }

    .sfb-mt-sm-4 {
        margin-top: 1.5rem !important;
    }

    .sfb-mt-sm-5 {
        margin-top: 3rem !important;
    }

    .sfb-mt-sm-auto {
        margin-top: auto !important;
    }

    .sfb-me-sm-0 {
        margin-right: 0 !important;
    }

    .sfb-me-sm-1 {
        margin-right: 0.25rem !important;
    }

    .sfb-me-sm-2 {
        margin-right: 0.5rem !important;
    }

    .sfb-me-sm-3 {
        margin-right: 1rem !important;
    }

    .sfb-me-sm-4 {
        margin-right: 1.5rem !important;
    }

    .sfb-me-sm-5 {
        margin-right: 3rem !important;
    }

    .sfb-me-sm-auto {
        margin-right: auto !important;
    }

    .sfb-mb-sm-0 {
        margin-bottom: 0 !important;
    }

    .sfb-mb-sm-1 {
        margin-bottom: 0.25rem !important;
    }

    .sfb-mb-sm-2 {
        margin-bottom: 0.5rem !important;
    }

    .sfb-mb-sm-3 {
        margin-bottom: 1rem !important;
    }

    .sfb-mb-sm-4 {
        margin-bottom: 1.5rem !important;
    }

    .sfb-mb-sm-5 {
        margin-bottom: 3rem !important;
    }

    .sfb-mb-sm-auto {
        margin-bottom: auto !important;
    }

    .sfb-ms-sm-0 {
        margin-left: 0 !important;
    }

    .sfb-ms-sm-1 {
        margin-left: 0.25rem !important;
    }

    .sfb-ms-sm-2 {
        margin-left: 0.5rem !important;
    }

    .sfb-ms-sm-3 {
        margin-left: 1rem !important;
    }

    .sfb-ms-sm-4 {
        margin-left: 1.5rem !important;
    }

    .sfb-ms-sm-5 {
        margin-left: 3rem !important;
    }

    .sfb-ms-sm-auto {
        margin-left: auto !important;
    }

    .sfb-p-sm-0 {
        padding: 0 !important;
    }

    .p-sm-1 {
        padding: 0.25rem !important;
    }

    .sfb-p-sm-2 {
        padding: 0.5rem !important;
    }

    .sfb-p-sm-3 {
        padding: 1rem !important;
    }

    .p-sm-4 {
        padding: 1.5rem !important;
    }

    .sfb-p-sm-5 {
        padding: 3rem !important;
    }

    .sfb-px-sm-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .sfb-px-sm-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .sfb-px-sm-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .sfb-px-sm-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .sfb-px-sm-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .sfb-px-sm-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .sfb-py-sm-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .sfb-py-sm-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .sfb-py-sm-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .sfb-py-sm-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .sfb-py-sm-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .sfb-py-sm-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .sfb-pt-sm-0 {
        padding-top: 0 !important;
    }

    .sfb-pt-sm-1 {
        padding-top: 0.25rem !important;
    }

    .sfb-pt-sm-2 {
        padding-top: 0.5rem !important;
    }

    .sfb-pt-sm-3 {
        padding-top: 1rem !important;
    }

    .sfb-pt-sm-4 {
        padding-top: 1.5rem !important;
    }

    .sfb-pt-sm-5 {
        padding-top: 3rem !important;
    }

    .sfb-pe-sm-0 {
        padding-right: 0 !important;
    }

    .sfb-pe-sm-1 {
        padding-right: 0.25rem !important;
    }

    .sfb-pe-sm-2 {
        padding-right: 0.5rem !important;
    }

    .sfb-pe-sm-3 {
        padding-right: 1rem !important;
    }

    .sfb-pe-sm-4 {
        padding-right: 1.5rem !important;
    }

    .sfb-pe-sm-5 {
        padding-right: 3rem !important;
    }

    .sfb-pb-sm-0 {
        padding-bottom: 0 !important;
    }

    .sfb-pb-sm-1 {
        padding-bottom: 0.25rem !important;
    }

    .sfb-pb-sm-2 {
        padding-bottom: 0.5rem !important;
    }

    .sfb-pb-sm-3 {
        padding-bottom: 1rem !important;
    }

    .sfb-pb-sm-4 {
        padding-bottom: 1.5rem !important;
    }

    .sfb-pb-sm-5 {
        padding-bottom: 3rem !important;
    }

    .sfb-ps-sm-0 {
        padding-left: 0 !important;
    }

    .sfb-ps-sm-1 {
        padding-left: 0.25rem !important;
    }

    .sfb-ps-sm-2 {
        padding-left: 0.5rem !important;
    }

    .sfb-ps-sm-3 {
        padding-left: 1rem !important;
    }

    .sfb-ps-sm-4 {
        padding-left: 1.5rem !important;
    }

    .sfb-ps-sm-5 {
        padding-left: 3rem !important;
    }
}

/* md */
@media (min-width: 768px) {
    .m-md-0 {
        margin: 0 !important;
    }

    .m-md-1 {
        margin: 0.25rem !important;
    }

    .sfb-m-md-2 {
        margin: 0.5rem !important;
    }

    .m-md-3 {
        margin: 1rem !important;
    }

    .m-md-4 {
        margin: 1.5rem !important;
    }

    .m-md-5 {
        margin: 3rem !important;
    }

    .m-md-auto {
        margin: auto !important;
    }

    .sfb-mx-md-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .sfb-mx-md-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .sfb-mx-md-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .sfb-mx-md-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .sfb-mx-md-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .sfb-mx-md-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .sfb-mx-md-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .sfb-my-md-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .sfb-my-md-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .sfb-my-md-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .sfb-my-md-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .sfb-my-md-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .sfb-my-md-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .sfb-my-md-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .sfb-mt-md-0 {
        margin-top: 0 !important;
    }

    .sfb-mt-md-1 {
        margin-top: 0.25rem !important;
    }

    .sfb-mt-md-2 {
        margin-top: 0.5rem !important;
    }

    .sfb-mt-md-3 {
        margin-top: 1rem !important;
    }

    .sfb-mt-md-4 {
        margin-top: 1.5rem !important;
    }

    .sfb-mt-md-5 {
        margin-top: 3rem !important;
    }

    .sfb-mt-md-auto {
        margin-top: auto !important;
    }

    .sfb-me-md-0 {
        margin-right: 0 !important;
    }

    .sfb-me-md-1 {
        margin-right: 0.25rem !important;
    }

    .sfb-me-md-2 {
        margin-right: 0.5rem !important;
    }

    .sfb-me-md-3 {
        margin-right: 1rem !important;
    }

    .sfb-me-md-4 {
        margin-right: 1.5rem !important;
    }

    .sfb-me-md-5 {
        margin-right: 3rem !important;
    }

    .sfb-me-md-auto {
        margin-right: auto !important;
    }

    .sfb-mb-md-0 {
        margin-bottom: 0 !important;
    }

    .sfb-mb-md-1 {
        margin-bottom: 0.25rem !important;
    }

    .sfb-mb-md-2 {
        margin-bottom: 0.5rem !important;
    }

    .sfb-mb-md-3 {
        margin-bottom: 1rem !important;
    }

    .sfb-mb-md-4 {
        margin-bottom: 1.5rem !important;
    }

    .sfb-mb-md-5 {
        margin-bottom: 3rem !important;
    }

    .sfb-mb-md-auto {
        margin-bottom: auto !important;
    }

    .sfb-ms-md-0 {
        margin-left: 0 !important;
    }

    .sfb-ms-md-1 {
        margin-left: 0.25rem !important;
    }

    .sfb-ms-md-2 {
        margin-left: 0.5rem !important;
    }

    .sfb-ms-md-3 {
        margin-left: 1rem !important;
    }

    .sfb-ms-md-4 {
        margin-left: 1.5rem !important;
    }

    .sfb-ms-md-5 {
        margin-left: 3rem !important;
    }

    .sfb-ms-md-auto {
        margin-left: auto !important;
    }

    .sfb-p-md-0 {
        padding: 0 !important;
    }

    .p-md-1 {
        padding: 0.25rem !important;
    }

    .sfb-p-md-2 {
        padding: 0.5rem !important;
    }

    .sfb-p-md-3 {
        padding: 1rem !important;
    }

    .p-md-4 {
        padding: 1.5rem !important;
    }

    .sfb-p-md-5 {
        padding: 3rem !important;
    }

    .sfb-px-md-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .sfb-px-md-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .sfb-px-md-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .sfb-px-md-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .sfb-px-md-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .sfb-px-md-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .sfb-py-md-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .sfb-py-md-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .sfb-py-md-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .sfb-py-md-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .sfb-py-md-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .sfb-py-md-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .sfb-pt-md-0 {
        padding-top: 0 !important;
    }

    .sfb-pt-md-1 {
        padding-top: 0.25rem !important;
    }

    .sfb-pt-md-2 {
        padding-top: 0.5rem !important;
    }

    .sfb-pt-md-3 {
        padding-top: 1rem !important;
    }

    .sfb-pt-md-4 {
        padding-top: 1.5rem !important;
    }

    .sfb-pt-md-5 {
        padding-top: 3rem !important;
    }

    .sfb-pe-md-0 {
        padding-right: 0 !important;
    }

    .sfb-pe-md-1 {
        padding-right: 0.25rem !important;
    }

    .sfb-pe-md-2 {
        padding-right: 0.5rem !important;
    }

    .sfb-pe-md-3 {
        padding-right: 1rem !important;
    }

    .sfb-pe-md-4 {
        padding-right: 1.5rem !important;
    }

    .sfb-pe-md-5 {
        padding-right: 3rem !important;
    }

    .sfb-pb-md-0 {
        padding-bottom: 0 !important;
    }

    .sfb-pb-md-1 {
        padding-bottom: 0.25rem !important;
    }

    .sfb-pb-md-2 {
        padding-bottom: 0.5rem !important;
    }

    .sfb-pb-md-3 {
        padding-bottom: 1rem !important;
    }

    .sfb-pb-md-4 {
        padding-bottom: 1.5rem !important;
    }

    .sfb-pb-md-5 {
        padding-bottom: 3rem !important;
    }

    .sfb-ps-md-0 {
        padding-left: 0 !important;
    }

    .sfb-ps-md-1 {
        padding-left: 0.25rem !important;
    }

    .sfb-ps-md-2 {
        padding-left: 0.5rem !important;
    }

    .sfb-ps-md-3 {
        padding-left: 1rem !important;
    }

    .sfb-ps-md-4 {
        padding-left: 1.5rem !important;
    }

    .sfb-ps-md-5 {
        padding-left: 3rem !important;
    }
}

/* lg */
@media (min-width: 992px) {
    .m-lg-0 {
        margin: 0 !important;
    }

    .m-lg-1 {
        margin: 0.25rem !important;
    }

    .sfb-m-lg-2 {
        margin: 0.5rem !important;
    }

    .m-lg-3 {
        margin: 1rem !important;
    }

    .m-lg-4 {
        margin: 1.5rem !important;
    }

    .m-lg-5 {
        margin: 3rem !important;
    }

    .m-lg-auto {
        margin: auto !important;
    }

    .sfb-mx-lg-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .sfb-mx-lg-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .sfb-mx-lg-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .sfb-mx-lg-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .sfb-mx-lg-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .sfb-mx-lg-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .sfb-mx-lg-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .sfb-my-lg-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .sfb-my-lg-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .sfb-my-lg-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .sfb-my-lg-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .sfb-my-lg-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .sfb-my-lg-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .sfb-my-lg-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .sfb-mt-lg-0 {
        margin-top: 0 !important;
    }

    .sfb-mt-lg-1 {
        margin-top: 0.25rem !important;
    }

    .sfb-mt-lg-2 {
        margin-top: 0.5rem !important;
    }

    .sfb-mt-lg-3 {
        margin-top: 1rem !important;
    }

    .sfb-mt-lg-4 {
        margin-top: 1.5rem !important;
    }

    .sfb-mt-lg-5 {
        margin-top: 3rem !important;
    }

    .sfb-mt-lg-auto {
        margin-top: auto !important;
    }

    .sfb-me-lg-0 {
        margin-right: 0 !important;
    }

    .sfb-me-lg-1 {
        margin-right: 0.25rem !important;
    }

    .sfb-me-lg-2 {
        margin-right: 0.5rem !important;
    }

    .sfb-me-lg-3 {
        margin-right: 1rem !important;
    }

    .sfb-me-lg-4 {
        margin-right: 1.5rem !important;
    }

    .sfb-me-lg-5 {
        margin-right: 3rem !important;
    }

    .sfb-me-lg-auto {
        margin-right: auto !important;
    }

    .sfb-mb-lg-0 {
        margin-bottom: 0 !important;
    }

    .sfb-mb-lg-1 {
        margin-bottom: 0.25rem !important;
    }

    .sfb-mb-lg-2 {
        margin-bottom: 0.5rem !important;
    }

    .sfb-mb-lg-3 {
        margin-bottom: 1rem !important;
    }

    .sfb-mb-lg-4 {
        margin-bottom: 1.5rem !important;
    }

    .sfb-mb-lg-5 {
        margin-bottom: 3rem !important;
    }

    .sfb-mb-lg-auto {
        margin-bottom: auto !important;
    }

    .sfb-ms-lg-0 {
        margin-left: 0 !important;
    }

    .sfb-ms-lg-1 {
        margin-left: 0.25rem !important;
    }

    .sfb-ms-lg-2 {
        margin-left: 0.5rem !important;
    }

    .sfb-ms-lg-3 {
        margin-left: 1rem !important;
    }

    .sfb-ms-lg-4 {
        margin-left: 1.5rem !important;
    }

    .sfb-ms-lg-5 {
        margin-left: 3rem !important;
    }

    .sfb-ms-lg-auto {
        margin-left: auto !important;
    }

    .sfb-p-lg-0 {
        padding: 0 !important;
    }

    .p-lg-1 {
        padding: 0.25rem !important;
    }

    .sfb-p-lg-2 {
        padding: 0.5rem !important;
    }

    .sfb-p-lg-3 {
        padding: 1rem !important;
    }

    .p-lg-4 {
        padding: 1.5rem !important;
    }

    .sfb-p-lg-5 {
        padding: 3rem !important;
    }

    .sfb-px-lg-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .sfb-px-lg-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .sfb-px-lg-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .sfb-px-lg-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .sfb-px-lg-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .sfb-px-lg-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .sfb-py-lg-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .sfb-py-lg-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .sfb-py-lg-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .sfb-py-lg-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .sfb-py-lg-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .sfb-py-lg-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .sfb-pt-lg-0 {
        padding-top: 0 !important;
    }

    .sfb-pt-lg-1 {
        padding-top: 0.25rem !important;
    }

    .sfb-pt-lg-2 {
        padding-top: 0.5rem !important;
    }

    .sfb-pt-lg-3 {
        padding-top: 1rem !important;
    }

    .sfb-pt-lg-4 {
        padding-top: 1.5rem !important;
    }

    .sfb-pt-lg-5 {
        padding-top: 3rem !important;
    }

    .sfb-pe-lg-0 {
        padding-right: 0 !important;
    }

    .sfb-pe-lg-1 {
        padding-right: 0.25rem !important;
    }

    .sfb-pe-lg-2 {
        padding-right: 0.5rem !important;
    }

    .sfb-pe-lg-3 {
        padding-right: 1rem !important;
    }

    .sfb-pe-lg-4 {
        padding-right: 1.5rem !important;
    }

    .sfb-pe-lg-5 {
        padding-right: 3rem !important;
    }

    .sfb-pb-lg-0 {
        padding-bottom: 0 !important;
    }

    .sfb-pb-lg-1 {
        padding-bottom: 0.25rem !important;
    }

    .sfb-pb-lg-2 {
        padding-bottom: 0.5rem !important;
    }

    .sfb-pb-lg-3 {
        padding-bottom: 1rem !important;
    }

    .sfb-pb-lg-4 {
        padding-bottom: 1.5rem !important;
    }

    .sfb-pb-lg-5 {
        padding-bottom: 3rem !important;
    }

    .sfb-ps-lg-0 {
        padding-left: 0 !important;
    }

    .sfb-ps-lg-1 {
        padding-left: 0.25rem !important;
    }

    .sfb-ps-lg-2 {
        padding-left: 0.5rem !important;
    }

    .sfb-ps-lg-3 {
        padding-left: 1rem !important;
    }

    .sfb-ps-lg-4 {
        padding-left: 1.5rem !important;
    }

    .sfb-ps-lg-5 {
        padding-left: 3rem !important;
    }
}

/* xl */
@media (min-width: 1200px) {
    .m-xl-0 {
        margin: 0 !important;
    }

    .m-xl-1 {
        margin: 0.25rem !important;
    }

    .sfb-m-xl-2 {
        margin: 0.5rem !important;
    }

    .m-xl-3 {
        margin: 1rem !important;
    }

    .m-xl-4 {
        margin: 1.5rem !important;
    }

    .m-xl-5 {
        margin: 3rem !important;
    }

    .m-xl-auto {
        margin: auto !important;
    }

    .sfb-mx-xl-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .sfb-mx-xl-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .sfb-mx-xl-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .sfb-mx-xl-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .sfb-mx-xl-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .sfb-mx-xl-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .sfb-mx-xl-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .sfb-my-xl-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .sfb-my-xl-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .sfb-my-xl-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .sfb-my-xl-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .sfb-my-xl-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .sfb-my-xl-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .sfb-my-xl-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .sfb-mt-xl-0 {
        margin-top: 0 !important;
    }

    .sfb-mt-xl-1 {
        margin-top: 0.25rem !important;
    }

    .sfb-mt-xl-2 {
        margin-top: 0.5rem !important;
    }

    .sfb-mt-xl-3 {
        margin-top: 1rem !important;
    }

    .sfb-mt-xl-4 {
        margin-top: 1.5rem !important;
    }

    .sfb-mt-xl-5 {
        margin-top: 3rem !important;
    }

    .sfb-mt-xl-auto {
        margin-top: auto !important;
    }

    .sfb-me-xl-0 {
        margin-right: 0 !important;
    }

    .sfb-me-xl-1 {
        margin-right: 0.25rem !important;
    }

    .sfb-me-xl-2 {
        margin-right: 0.5rem !important;
    }

    .sfb-me-xl-3 {
        margin-right: 1rem !important;
    }

    .sfb-me-xl-4 {
        margin-right: 1.5rem !important;
    }

    .sfb-me-xl-5 {
        margin-right: 3rem !important;
    }

    .sfb-me-xl-auto {
        margin-right: auto !important;
    }

    .sfb-mb-xl-0 {
        margin-bottom: 0 !important;
    }

    .sfb-mb-xl-1 {
        margin-bottom: 0.25rem !important;
    }

    .sfb-mb-xl-2 {
        margin-bottom: 0.5rem !important;
    }

    .sfb-mb-xl-3 {
        margin-bottom: 1rem !important;
    }

    .sfb-mb-xl-4 {
        margin-bottom: 1.5rem !important;
    }

    .sfb-mb-xl-5 {
        margin-bottom: 3rem !important;
    }

    .sfb-mb-xl-auto {
        margin-bottom: auto !important;
    }

    .sfb-ms-xl-0 {
        margin-left: 0 !important;
    }

    .sfb-ms-xl-1 {
        margin-left: 0.25rem !important;
    }

    .sfb-ms-xl-2 {
        margin-left: 0.5rem !important;
    }

    .sfb-ms-xl-3 {
        margin-left: 1rem !important;
    }

    .sfb-ms-xl-4 {
        margin-left: 1.5rem !important;
    }

    .sfb-ms-xl-5 {
        margin-left: 3rem !important;
    }

    .sfb-ms-xl-auto {
        margin-left: auto !important;
    }

    .sfb-p-xl-0 {
        padding: 0 !important;
    }

    .p-xl-1 {
        padding: 0.25rem !important;
    }

    .sfb-p-xl-2 {
        padding: 0.5rem !important;
    }

    .sfb-p-xl-3 {
        padding: 1rem !important;
    }

    .p-xl-4 {
        padding: 1.5rem !important;
    }

    .sfb-p-xl-5 {
        padding: 3rem !important;
    }

    .sfb-px-xl-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .sfb-px-xl-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .sfb-px-xl-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .sfb-px-xl-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .sfb-px-xl-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .sfb-px-xl-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .sfb-py-xl-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .sfb-py-xl-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .sfb-py-xl-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .sfb-py-xl-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .sfb-py-xl-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .sfb-py-xl-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .sfb-pt-xl-0 {
        padding-top: 0 !important;
    }

    .sfb-pt-xl-1 {
        padding-top: 0.25rem !important;
    }

    .sfb-pt-xl-2 {
        padding-top: 0.5rem !important;
    }

    .sfb-pt-xl-3 {
        padding-top: 1rem !important;
    }

    .sfb-pt-xl-4 {
        padding-top: 1.5rem !important;
    }

    .sfb-pt-xl-5 {
        padding-top: 3rem !important;
    }

    .sfb-pe-xl-0 {
        padding-right: 0 !important;
    }

    .sfb-pe-xl-1 {
        padding-right: 0.25rem !important;
    }

    .sfb-pe-xl-2 {
        padding-right: 0.5rem !important;
    }

    .sfb-pe-xl-3 {
        padding-right: 1rem !important;
    }

    .sfb-pe-xl-4 {
        padding-right: 1.5rem !important;
    }

    .sfb-pe-xl-5 {
        padding-right: 3rem !important;
    }

    .sfb-pb-xl-0 {
        padding-bottom: 0 !important;
    }

    .sfb-pb-xl-1 {
        padding-bottom: 0.25rem !important;
    }

    .sfb-pb-xl-2 {
        padding-bottom: 0.5rem !important;
    }

    .sfb-pb-xl-3 {
        padding-bottom: 1rem !important;
    }

    .sfb-pb-xl-4 {
        padding-bottom: 1.5rem !important;
    }

    .sfb-pb-xl-5 {
        padding-bottom: 3rem !important;
    }

    .sfb-ps-xl-0 {
        padding-left: 0 !important;
    }

    .sfb-ps-xl-1 {
        padding-left: 0.25rem !important;
    }

    .sfb-ps-xl-2 {
        padding-left: 0.5rem !important;
    }

    .sfb-ps-xl-3 {
        padding-left: 1rem !important;
    }

    .sfb-ps-xl-4 {
        padding-left: 1.5rem !important;
    }

    .sfb-ps-xl-5 {
        padding-left: 3rem !important;
    }
}

/* xxl */
@media (min-width: 1400px) {
    .m-xxl-0 {
        margin: 0 !important;
    }

    .m-xxl-1 {
        margin: 0.25rem !important;
    }

    .sfb-m-xxl-2 {
        margin: 0.5rem !important;
    }

    .m-xxl-3 {
        margin: 1rem !important;
    }

    .m-xxl-4 {
        margin: 1.5rem !important;
    }

    .m-xxl-5 {
        margin: 3rem !important;
    }

    .m-xxl-auto {
        margin: auto !important;
    }

    .sfb-mx-xxl-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .sfb-mx-xxl-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .sfb-mx-xxl-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .sfb-mx-xxl-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .sfb-mx-xxl-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .sfb-mx-xxl-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .sfb-mx-xxl-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .sfb-my-xxl-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .sfb-my-xxl-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .sfb-my-xxl-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .sfb-my-xxl-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .sfb-my-xxl-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .sfb-my-xxl-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .sfb-my-xxl-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .sfb-mt-xxl-0 {
        margin-top: 0 !important;
    }

    .sfb-mt-xxl-1 {
        margin-top: 0.25rem !important;
    }

    .sfb-mt-xxl-2 {
        margin-top: 0.5rem !important;
    }

    .sfb-mt-xxl-3 {
        margin-top: 1rem !important;
    }

    .sfb-mt-xxl-4 {
        margin-top: 1.5rem !important;
    }

    .sfb-mt-xxl-5 {
        margin-top: 3rem !important;
    }

    .sfb-mt-xxl-auto {
        margin-top: auto !important;
    }

    .sfb-me-xxl-0 {
        margin-right: 0 !important;
    }

    .sfb-me-xxl-1 {
        margin-right: 0.25rem !important;
    }

    .sfb-me-xxl-2 {
        margin-right: 0.5rem !important;
    }

    .sfb-me-xxl-3 {
        margin-right: 1rem !important;
    }

    .sfb-me-xxl-4 {
        margin-right: 1.5rem !important;
    }

    .sfb-me-xxl-5 {
        margin-right: 3rem !important;
    }

    .sfb-me-xxl-auto {
        margin-right: auto !important;
    }

    .sfb-mb-xxl-0 {
        margin-bottom: 0 !important;
    }

    .sfb-mb-xxl-1 {
        margin-bottom: 0.25rem !important;
    }

    .sfb-mb-xxl-2 {
        margin-bottom: 0.5rem !important;
    }

    .sfb-mb-xxl-3 {
        margin-bottom: 1rem !important;
    }

    .sfb-mb-xxl-4 {
        margin-bottom: 1.5rem !important;
    }

    .sfb-mb-xxl-5 {
        margin-bottom: 3rem !important;
    }

    .sfb-mb-xxl-auto {
        margin-bottom: auto !important;
    }

    .sfb-ms-xxl-0 {
        margin-left: 0 !important;
    }

    .sfb-ms-xxl-1 {
        margin-left: 0.25rem !important;
    }

    .sfb-ms-xxl-2 {
        margin-left: 0.5rem !important;
    }

    .sfb-ms-xxl-3 {
        margin-left: 1rem !important;
    }

    .sfb-ms-xxl-4 {
        margin-left: 1.5rem !important;
    }

    .sfb-ms-xxl-5 {
        margin-left: 3rem !important;
    }

    .sfb-ms-xxl-auto {
        margin-left: auto !important;
    }

    .sfb-p-xxl-0 {
        padding: 0 !important;
    }

    .p-xxl-1 {
        padding: 0.25rem !important;
    }

    .sfb-p-xxl-2 {
        padding: 0.5rem !important;
    }

    .sfb-p-xxl-3 {
        padding: 1rem !important;
    }

    .p-xxl-4 {
        padding: 1.5rem !important;
    }

    .sfb-p-xxl-5 {
        padding: 3rem !important;
    }

    .sfb-px-xxl-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .sfb-px-xxl-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .sfb-px-xxl-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .sfb-px-xxl-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .sfb-px-xxl-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .sfb-px-xxl-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .sfb-py-xxl-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .sfb-py-xxl-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .sfb-py-xxl-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .sfb-py-xxl-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .sfb-py-xxl-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .sfb-py-xxl-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .sfb-pt-xxl-0 {
        padding-top: 0 !important;
    }

    .sfb-pt-xxl-1 {
        padding-top: 0.25rem !important;
    }

    .sfb-pt-xxl-2 {
        padding-top: 0.5rem !important;
    }

    .sfb-pt-xxl-3 {
        padding-top: 1rem !important;
    }

    .sfb-pt-xxl-4 {
        padding-top: 1.5rem !important;
    }

    .sfb-pt-xxl-5 {
        padding-top: 3rem !important;
    }

    .sfb-pe-xxl-0 {
        padding-right: 0 !important;
    }

    .sfb-pe-xxl-1 {
        padding-right: 0.25rem !important;
    }

    .sfb-pe-xxl-2 {
        padding-right: 0.5rem !important;
    }

    .sfb-pe-xxl-3 {
        padding-right: 1rem !important;
    }

    .sfb-pe-xxl-4 {
        padding-right: 1.5rem !important;
    }

    .sfb-pe-xxl-5 {
        padding-right: 3rem !important;
    }

    .sfb-pb-xxl-0 {
        padding-bottom: 0 !important;
    }

    .sfb-pb-xxl-1 {
        padding-bottom: 0.25rem !important;
    }

    .sfb-pb-xxl-2 {
        padding-bottom: 0.5rem !important;
    }

    .sfb-pb-xxl-3 {
        padding-bottom: 1rem !important;
    }

    .sfb-pb-xxl-4 {
        padding-bottom: 1.5rem !important;
    }

    .sfb-pb-xxl-5 {
        padding-bottom: 3rem !important;
    }

    .sfb-ps-xxl-0 {
        padding-left: 0 !important;
    }

    .sfb-ps-xxl-1 {
        padding-left: 0.25rem !important;
    }

    .sfb-ps-xxl-2 {
        padding-left: 0.5rem !important;
    }

    .sfb-ps-xxl-3 {
        padding-left: 1rem !important;
    }

    .sfb-ps-xxl-4 {
        padding-left: 1.5rem !important;
    }

    .sfb-ps-xxl-5 {
        padding-left: 3rem !important;
    }
}

/* ========== SPACING END ========== */


/* ========== DISPLAY START ========== */

.sfb-d-inline {
    display: inline !important
}

.sfb-d-inline-block {
    display: inline-block !important
}

.sfb-d-block {
    display: block !important
}

.sfb-d-grid {
    display: grid !important
}

.sfb-d-table {
    display: table !important
}

.sfb-d-table-row {
    display: table-row !important
}

.sfb-d-table-cell {
    display: table-cell !important
}

.sfb-d-flex {
    display: flex !important
}

.sfb-d-inline-flex {
    display: inline-flex !important
}

.sfb-d-none {
    display: none !important
}

/* Small (SM) – ≥576px */
/* Stile für kleine Bildschirme (z. B. große Smartphones) */
@media (min-width: 576px) {

    .d-sm-inline {
        display: inline !important
    }

    .sfb-d-sm-inline-block {
        display: inline-block !important
    }

    .sfb-d-sm-block {
        display: block !important
    }

    .sfb-d-sm-grid {
        display: grid !important
    }

    .d-sm-table {
        display: table !important
    }

    .sfb-d-sm-table-row {
        display: table-row !important
    }

    .sfb-d-sm-table-cell {
        display: table-cell !important
    }

    .sfb-d-sm-flex {
        display: flex !important
    }

    .d-sm-inline-flex {
        display: inline-flex !important
    }

    .sfb-d-sm-none {
        display: none !important
    }
}

/* Medium (MD) – ≥768px */
/* Stile für mittlere Bildschirme (z. B. Tablets) */
@media (min-width: 768px) {

    .d-md-inline {
        display: inline !important
    }

    .sfb-d-md-inline-block {
        display: inline-block !important
    }

    .sfb-d-md-block {
        display: block !important
    }

    .sfb-d-md-grid {
        display: grid !important
    }

    .d-md-table {
        display: table !important
    }

    .sfb-d-md-table-row {
        display: table-row !important
    }

    .sfb-d-md-table-cell {
        display: table-cell !important
    }

    .sfb-d-md-flex {
        display: flex !important
    }

    .d-md-inline-flex {
        display: inline-flex !important
    }

    .sfb-d-md-none {
        display: none !important
    }
}

/* Large (LG) – ≥992px */
/* Stile für größere Bildschirme (z. B. kleine Laptops) */
@media (min-width: 992px) {

    .d-lg-inline {
        display: inline !important
    }

    .sfb-d-lg-inline-block {
        display: inline-block !important
    }

    .sfb-d-lg-block {
        display: block !important
    }

    .sfb-d-lg-grid {
        display: grid !important
    }

    .d-lg-table {
        display: table !important
    }

    .sfb-d-lg-table-row {
        display: table-row !important
    }

    .sfb-d-lg-table-cell {
        display: table-cell !important
    }

    .sfb-d-lg-flex {
        display: flex !important
    }

    .d-lg-inline-flex {
        display: inline-flex !important
    }

    .sfb-d-lg-none {
        display: none !important
    }
}

/* Extra Large (XL) – ≥1200px */
/* Stile für große Bildschirme (z. B. Desktops) */
@media (min-width: 1200px) {

    .d-xl-inline {
        display: inline !important
    }

    .sfb-d-xl-inline-block {
        display: inline-block !important
    }

    .sfb-d-xl-block {
        display: block !important
    }

    .sfb-d-xl-grid {
        display: grid !important
    }

    .d-xl-table {
        display: table !important
    }

    .sfb-d-xl-table-row {
        display: table-row !important
    }

    .sfb-d-xl-table-cell {
        display: table-cell !important
    }

    .sfb-d-xl-flex {
        display: flex !important
    }

    .d-xl-inline-flex {
        display: inline-flex !important
    }

    .sfb-d-xl-none {
        display: none !important
    }

}

/* Extra Extra Large (XXL) – ≥1400px */
/* Stile für sehr große Bildschirme (z. B. große Monitore) */
@media (min-width: 1400px) {

    .d-xxl-inline {
        display: inline !important
    }

    .sfb-d-xxl-inline-block {
        display: inline-block !important
    }

    .sfb-d-xxl-block {
        display: block !important
    }

    .sfb-d-xxl-grid {
        display: grid !important
    }

    .d-xxl-table {
        display: table !important
    }

    .sfb-d-xxl-table-row {
        display: table-row !important
    }

    .sfb-d-xxl-table-cell {
        display: table-cell !important
    }

    .sfb-d-xxl-flex {
        display: flex !important
    }

    .d-xxl-inline-flex {
        display: inline-flex !important
    }

    .sfb-d-xxl-none {
        display: none !important
    }

}



/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////// */