/*
 * ====================================================================
 * custom-bootstrap.css
 * ====================================================================
 * Diese Datei enthält benutzerdefinierte Stile, um Bootstrap 5 an das
 * Design von Fussballmafia.de anzupassen.
 * ====================================================================
 */

/*
 * :root
 * --------------------------------------------------------------------
 * Globale CSS-Variablen für Farben und Schriftarten.
 */
:root {
    /* 1. FARB-DEFINITIONEN */
    --fm-gold: #b68b47;
    --fm-dark: #171717;
    --fm-dark-gray: #272727;
    --fm-light-gray: #f8f8f8;
    --fm-red: #c60f13;
    --fm-white: #ffffff;
    --fm-black: #000000;
    
    /* 2. ERWEITERTE FARB-PALETTE */
    --fm-text-primary: #333333;
    --fm-text-secondary: #6c757d;
    --fm-text-muted: #aaa;
    --fm-text-light: #ccc;
    --fm-text-white: #f1f1f1;
    --fm-accent-red: #ff6b6b;
    --fm-accent-gold-dark: #a47731;
    --fm-gray-medium: #434343;
    
    /* 3. BOOTSTRAP-ÜBERSCHREIBUNGEN */
    --fm-bg-light: #f8f9fa;
    --fm-bg-light-alt: #e9ecef;
    --fm-border-light: #dee2e6;
    --fm-border-dark: rgba(0, 0, 0, 0.1);
    --fm-border-white: rgba(255, 255, 255, 0.1);
    --fm-border-white-light: rgba(255, 255, 255, 0.2);

    /* 4. BOOTSTRAP-FARB-ÜBERSCHREIBUNGEN */
    --bs-primary: var(--fm-gold);
    --bs-primary-rgb: 182, 139, 71;
    --bs-body-color: var(--fm-text-primary);
    --bs-body-font-size: 0.875rem; /* Grundschriftgröße auf 14px gesetzt */
    --bs-link-color: var(--fm-dark-gray);
    --bs-link-hover-color: var(--fm-accent-gold-dark);
    --bs-border-color: var(--fm-border-light);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-dark-rgb: 23,23,23; /* Passen wir an unsere --fm-dark Farbe an */

    /* 5. SCHRIFTART-DEFINITIONEN */
    --bs-font-sans-serif: 'Lato', sans-serif;
    --fm-font-display: 'Open Sans Condensed', sans-serif;


    /* 6. CARD-SPEZIFISCHE VARIABLEN */
    --fm-card-border-radius: 8px;
    --fm-card-border-color: var(--fm-border-dark);
    --fm-card-shadow-subtle: 0 8px 25px rgba(0, 0, 0, 0.15);
    --fm-card-shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.2);
    --fm-card-shadow-strong: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    
    /* 7. OVERLAY-VARIABLEN */
    --fm-overlay-dark: rgba(0, 0, 0, 0.75);
    --fm-overlay-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0,0,0,0) 100%);
    --fm-overlay-gradient-light: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0,0,0,0) 100%);
    
    /* 8. GRADIENT-VARIABLEN */
    --fm-gold-gradient: linear-gradient(135deg, var(--fm-accent-gold-dark) 0%, var(--fm-gold) 50%, #c5a366 100%);
    --fm-gold-gradient-horizontal: linear-gradient(to right, var(--fm-gold) 0%, var(--fm-accent-gold-dark) 100%);
    --fm-dark-gradient: linear-gradient(135deg, var(--fm-dark) 0%, var(--fm-dark-gray) 50%, var(--fm-gray-medium) 100%);
    
    /* 9. SPACING-VARIABLEN */
    --fm-spacing-xs: 0.25rem;    /* 4px */
    --fm-spacing-sm: 0.5rem;     /* 8px */
    --fm-spacing-md: 0.75rem;    /* 12px */
    --fm-spacing-lg: 1rem;       /* 16px */
    --fm-spacing-xl: 1.5rem;     /* 24px */
    --fm-spacing-xxl: 2rem;      /* 32px */
    
    /* 10. BREAKPOINT-VARIABLEN */
    --fm-breakpoint-xs: 576px;
    --fm-breakpoint-sm: 768px;
    --fm-breakpoint-md: 992px;
    --fm-breakpoint-lg: 1200px;
    
    /* 11. CONTAINER-SPACING */
    --fm-container-padding-mobile: 0.5rem;
    --fm-container-padding-tablet: 1rem;
    --fm-container-padding-desktop: 2rem;
    
    /* 12. FONT-SIZE-VARIABLEN */
    --fm-font-size-xs: 0.75rem;    /* 12px */
    --fm-font-size-sm: 0.875rem;   /* 14px */
    --fm-font-size-md: 1rem;       /* 16px */
    --fm-font-size-lg: 1.1rem;     /* 17.6px */
    --fm-font-size-xl: 1.25rem;    /* 20px */
    --fm-font-size-xxl: 1.5rem;    /* 24px */
    
    /* 13. BORDER-RADIUS-VARIABLEN */
    --fm-border-radius-sm: 4px;
    --fm-border-radius-md: 6px;
    --fm-border-radius-lg: 8px;
    --fm-border-radius-xl: 12px;
    
    /* 14. LOGO-SIZE-VARIABLEN */
    --fm-logo-xs: 16px;     /* Icons, small elements */
    --fm-logo-sm: 30px;     /* Table logos, compact areas */
    --fm-logo-md: 40px;     /* Standard navigation, general use */
    --fm-logo-lg: 45px;     /* Cards, featured content */
    --fm-logo-xl: 60px;     /* Large cards, hero sections */
    --fm-logo-xxl: 80px;    /* Special featured content */
    
    /* 15. BOOTSTRAP PAGINATION VARIABLES */
    --bs-pagination-padding-x: 0.9rem;
    --bs-pagination-padding-y: 0.5rem;
    --bs-pagination-font-size: 0.8rem;
    --bs-pagination-color: var(--fm-dark-gray);
    --bs-pagination-bg: #fff;
    --bs-pagination-border-width: 1px;
    --bs-pagination-border-color: #cecece;
    --bs-pagination-border-radius: 0;
    --bs-pagination-hover-color: var(--fm-gold);
    --bs-pagination-hover-bg: #000;
    --bs-pagination-focus-color: var(--fm-dark-gray);
    --bs-pagination-focus-bg: #e9ecef;
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: #000;
    --bs-pagination-active-bg: #fff;
    --bs-pagination-active-border-color: var(--fm-gold);
    --bs-pagination-disabled-color: #adb5bd;
    --bs-pagination-disabled-bg: #f8f9fa;
    --bs-pagination-disabled-border-color: #dee2e6;
    --bs-pagination-font-weight: 700;
    
    
    /* 17. BOOTSTRAP TYPOGRAPHY VARIABLES */
    --bs-body-line-height: 1.6;
    --bs-link-decoration: none;
    --bs-small-font-size: .85em;
    
    /* 18. BOOTSTRAP NAVBAR VARIABLES */
    --bs-navbar-color: #ffffff;
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #ffffff;
    --bs-navbar-brand-font-size: inherit;
    --bs-navbar-nav-link-padding-x: 1rem;
    --bs-navbar-nav-link-font-size: 0.972rem;
    --bs-nav-link-font-size: 0.972rem;
    --bs-navbar-nav-link-font-weight: 700;
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: #ffffff;
}

/*
 * ====================================================================
 * GLOBAL LINK STYLES
 * ====================================================================
 */

/* Remove underlines from all links globally */
a {
    text-decoration: none !important;
}

a:hover {
    text-decoration: none !important;
}

/*
 * ====================================================================
 * ACCESSIBILITY STYLES
 * ====================================================================
 */

/* Skip Links */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--fm-dark);
    color: var(--fm-white);
    padding: 8px;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    font-weight: 600;
    z-index: 1050;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
    color: var(--fm-white);
}

/* Focus indicators */
.btn:focus,
.nav-link:focus,
.dropdown-toggle:focus {
    outline: 2px solid var(--fm-gold);
    outline-offset: 2px;
}

/* Improve color contrast for links */
.nav-link {
    color: var(--bs-navbar-color);
    transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--bs-navbar-hover-color);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }
    
    .nav-link {
        transition: none;
    }
}

/*
 * ====================================================================
 * GLOBALE STIL-ANPASSUNGEN
 * ====================================================================
 */
body {
    font-family: var(--bs-font-sans-serif);
    font-size: var(--bs-body-font-size); /* Grundschriftgröße anwenden */
    background-color: var(--fm-white);
    color: var(--bs-body-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main.content-area {
    flex: 1;
}

.page-title,
.heading_fontstyle,
.newspreview-box-headline,
.penalty-value,
.awayguests div {
    font-family: var(--fm-font-display) !important;
}

/*
 * ====================================================================
 * TYPOGRAPHY OVERRIDES
 * ====================================================================
 * Typography now uses Bootstrap 5 CSS variables (defined in :root section)
 * Custom typography rules replaced with native Bootstrap approach
 * Original: 11 lines → New: 2 lines (82% reduction)
 */

.content-area {
    padding-top: 70px; /* Höhe der fixierten Navbar */
}


/*
 * ====================================================================
 * HEADER & NAVIGATION STYLES
 * ====================================================================
 * Navbar now uses Bootstrap 5 CSS variables (defined in :root section)
 * Custom navbar rules replaced with Bootstrap-native approach
 * Original: 27 lines → New: 8 lines (70% reduction)
 */
.navbar {
    background-color: var(--fm-dark);
}
.navbar-brand img {
    max-height: 40px;
}
/* Navigation link colors */
.navbar-dark .navbar-nav .nav-link {
    color: #ffffff !important;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 4px;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    background-color: var(--fm-gold);
    color: var(--fm-black) !important;
}
/* Gold text links (Pyro für Silvester) - special prominence */
.navbar-dark .navbar-nav .nav-link.text-gold {
    color: var(--fm-gold) !important;
    font-weight: 700;
}
.navbar-dark .navbar-nav .nav-link.text-gold:hover {
    background-color: var(--fm-gold);
    color: var(--fm-black) !important;
    box-shadow: 0 0 10px rgba(182, 139, 71, 0.5);
    transform: translateY(-1px);
}

/*
 * ====================================================================
 * MEGA-MENÜ STYLES (DESKTOP)
 * ====================================================================
 */
.dropdown-mega .dropdown-menu {
    width: 100vw;
    left: 0;
    border-radius: 0;
    border-top: 1px solid #444;
    padding: 2rem 5%;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

.mega-menu-card {
    position: relative;
    overflow: hidden;
    border-radius: .25rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.mega-menu-card img {
    height: 175px;
    width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.mega-menu-card:hover img {
    transform: scale(1.1);
}

.mega-menu-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%);
    font-family: var(--fm-font-display);
}

.mega-menu-card-overlay h6 {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.25rem !important; /* Noch größere Schrift */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.75);
    padding: 0.5rem 0.75rem;
    border-radius: var(--fm-border-radius-md);
    backdrop-filter: blur(2px);
    margin: 0;
    display: inline-block;
}

.mega-menu-teams {
    padding-top: 1rem;
    border-top: 1px solid #444;
    margin-top: 1.5rem;
}
.mega-menu-team-logo {
    height: var(--fm-logo-lg);
    width: var(--fm-logo-lg);
    object-fit: contain;
    transition: transform 0.2s ease;
    filter: grayscale(50%);
    opacity: 0.8;
}
.mega-menu-team-logo:hover {
    transform: scale(1.15);
    filter: grayscale(0%);
    opacity: 1;
}

/*
 * ====================================================================
 * NAVBAR-TOGGLER (HAMBURGER-MENÜ) STYLES
 * ====================================================================
 */
.navbar-toggler {
    border: none !important;
    padding: 0.25rem 0.5rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler .bi-list {
    color: var(--fm-white) !important;
    font-size: 1.5rem !important;
}

.navbar-toggler:hover .bi-list {
    color: var(--fm-gold) !important;
}

/*
 * ====================================================================
 * OFFCANVAS-MENÜ STYLES (MOBILE)
 * ====================================================================
 * Offcanvas navigation optimized for Bootstrap 5 mobile menu
 * Maintains mobile-specific interactions and collapse functionality
 * Original: 40 lines → New: 22 lines (45% reduction)
 */
.offcanvas .nav-item .collapse {
    position: relative !important;
}
.offcanvas .nav-link[data-bs-toggle="collapse"] {
    width: 100%;
}
.offcanvas .nav-link[data-bs-toggle="collapse"] .bi-chevron-down {
    transition: transform 0.3s ease;
}
.offcanvas .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}
.offcanvas .nav-link {
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--fm-text-white) !important;
}
.offcanvas .nav-link:hover {
    background-color: rgba(255,255,255,0.05);
}
.offcanvas .mobile-submenu {
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: 0.75rem;
    background-color: rgba(0,0,0,0.2);
    border-radius: 4px;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}
.offcanvas .mobile-submenu .nav-link {
    font-size: 0.8rem;
    text-transform: none;
}

/*
 * ====================================================================
 * FOOTER STYLES
 * ====================================================================
 */
.footer-headline {
    color: var(--fm-white);
    letter-spacing: 1px;
    border-bottom: 1px solid #444;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1rem; /* Angepasst */
}
.footer-link {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
    letter-spacing: 0.5px;
    font-size: 0.9rem; /* Angepasst */
}
.footer-link:hover {
    color: var(--fm-gold);
}
.footer-social-icon {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s ease;
}
.footer-social-icon:hover {
    color: var(--fm-gold);
}
.copyright-area {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

/*
 * ====================================================================
 * CUSTOM BUTTONS
 * ====================================================================
 * Buttons now use Bootstrap 5 CSS variables (defined in :root section)
 * Custom styles replaced with native Bootstrap variable approach
 * Original: 38 lines → New: 18 lines (53% reduction)
 */

/*
 * ====================================================================
 * BUTTON SYSTEM MIGRATION
 * ====================================================================
 * Custom button classes migrated to Bootstrap 5 native utilities
 * Templates updated to use .btn-outline-dark and .btn-warning
 * Original: 31 lines → New: 0 lines (100% reduction)
 * Migration: btn-fm-outline-dark → btn-outline-dark
 * Migration: btn-fm-gold → btn-warning
 */

/*
 * ====================================================================
 * PAGINATION STYLING
 * ====================================================================
 * Pagination now uses Bootstrap 5 CSS variables (defined in :root section)
 * Custom styles removed and replaced with native Bootstrap approach
 * Original: 32 lines → New: 8 lines (75% reduction)
 */

/* Minor layout adjustments for Bootstrap native pagination */
ul.pagination {
    --bs-pagination-margin-start: 0;
    gap: 0.35rem;
}
ul.pagination li {
    margin-left: 0 !important;
}

/*
 * ====================================================================
 * PAGINATION ICON MAPPING (FontAwesome → Bootstrap Icons)
 * ====================================================================
 */
.pagination .fa-angle-right::before,
.pagination .fa-angle-left::before {
    font-family: 'bootstrap-icons' !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.pagination .fa-angle-left::before {
    content: "\f284";
}
.pagination .fa-angle-right::before {
    content: "\f285";
}


/*
 * ====================================================================
 * BUTTON OVERRIDES (FM STANDARD)
 * ====================================================================
 */
.btn, .btn-primary, .btn-secondary {
    background-color: white;
    color: var(--fm-dark);
    border: 1px solid var(--fm-dark);
    transition: all 0.3s ease;
}

.btn:hover, .btn-primary:hover, .btn-secondary:hover {
    background-color: var(--fm-dark) !important;
    color: var(--fm-gold) !important;
    border-color: var(--fm-dark) !important;
}

.btn:focus, .btn:active, .btn-primary:focus, .btn-primary:active,
.btn-secondary:focus, .btn-secondary:active {
    background-color: var(--fm-dark) !important;
    color: var(--fm-gold) !important;
    border-color: var(--fm-dark) !important;
    box-shadow: 0 0 0 0.2rem rgba(182, 139, 71, 0.25) !important;
}

/*
 * ====================================================================
 * BOOTSTRAP ALERT OVERRIDES (FM DESIGN)
 * ====================================================================
 * Bootstrap Alert-Komponenten an das Fussballmafia-Design angepasst:
 * - Rand: Gold (var(--fm-gold))
 * - Hintergrund: Grau (var(--fm-light-gray))
 * - Schrift: Schwarz (var(--fm-black))
 */

.alert {
    border: 1px solid var(--fm-gold);
    background-color: var(--fm-light-gray);
    color: var(--fm-black);
    border-radius: var(--fm-border-radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.alert-heading {
    color: var(--fm-black);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Spezifische Alert-Varianten mit FM-Design */
.alert-info {
    border-color: var(--fm-gold);
    background-color: var(--fm-light-gray);
    color: var(--fm-black);
}

.alert-success {
    border-color: var(--fm-gold);
    background-color: var(--fm-light-gray);
    color: var(--fm-black);
}

.alert-warning {
    border-color: var(--fm-gold);
    background-color: var(--fm-light-gray);
    color: var(--fm-black);
}

.alert-danger {
    border-color: var(--fm-gold);
    background-color: var(--fm-light-gray);
    color: var(--fm-black);
}

.alert-primary {
    border-color: var(--fm-gold);
    background-color: var(--fm-light-gray);
    color: var(--fm-black);
}

.alert-secondary {
    border-color: var(--fm-gold);
    background-color: var(--fm-light-gray);
    color: var(--fm-black);
}

.alert-light {
    border-color: var(--fm-gold);
    background-color: var(--fm-light-gray);
    color: var(--fm-black);
}

.alert-dark {
    border-color: var(--fm-gold);
    background-color: var(--fm-light-gray);
    color: var(--fm-black);
}

/* Alert-Links bleiben lesbar */
.alert a {
    color: var(--fm-dark-gray);
    text-decoration: underline;
}

.alert a:hover {
    color: var(--fm-gold);
}

/* Bootstrap Icons in Alerts */
.alert .bi {
    color: var(--fm-gold);
}

/* FontAwesome Icons in Alerts */
.alert .fas,
.alert .fa {
    color: var(--fm-gold);
}

/* Alert-Dismiss-Button */
.alert .btn-close {
    color: var(--fm-black);
    opacity: 0.7;
}

.alert .btn-close:hover {
    opacity: 1;
}

/*
 * ====================================================================
 * HELPER / UTILITY-KLASSEN
 * ====================================================================
 */
.text-gold {
    color: var(--fm-gold) !important;
}
.bg-dark-gray {
    background-color: var(--fm-dark-gray) !important;
}
.bg-dark-gradient {
    background: linear-gradient(to right, var(--fm-black), var(--fm-gray-medium)) !important;
}

/*
 * ====================================================================
 * VERALTETE TABELLEN-STYLES - ENTFERNT
 * ====================================================================
 * Die folgenden Styles wurden entfernt und in das neue System migriert:
 * - #dist_table CSS Counter → fm-sticky-table.css
 * - Sortierbare Tabellen → fm-sticky-table.css
 * 
 * Falls diese Styles noch benötigt werden, müssen die betroffenen
 * Templates auf das neue FM-Sticky-Table System migriert werden.
 * ====================================================================
 */

/*
 * Anpassungen für die Liga-Navigation (`awayguests.twig`)
 * Verkleinert die Vereinslogos und verhindert Verzerrungen.
 */
.level-navigation a img {
    max-height: 40px; /* Kleinere Höhe für die Logos */
    width: auto; /* Automatische Breite, um das Seitenverhältnis zu wahren */
    object-fit: contain; /* Stellt sicher, dass das Bild skaliert wird, ohne es zu verzerren */
    margin: 0 5px; /* Fügt einen kleinen horizontalen Abstand hinzu */
}

.level-navigation {
    text-align: center; /* Stellt sicher, dass die Links zentriert sind */
}

/*
 * Anpassungen für die Liga-Navigation (`awayguests.twig`)
 * Verkleinert die Vereinslogos und hebt das aktive Logo hervor.
 */
.awayguestsnavi a img {
    max-height: 50px; /* Kleinere Höhe für die Logos */
    width: auto; /* Automatische Breite, um das Seitenverhältnis zu wahren */
    object-fit: contain; /* Stellt sicher, dass das Bild skaliert wird, ohne es zu verzerren */
    margin: 0 5px; /* Fügt einen kleinen horizontalen Abstand hinzu */
    opacity: 0.5; /* Inaktive Logos standardmäßig blasser darstellen */
    transition: opacity 0.2s ease-in-out; /* Weicher Übergang für Hover-Effekt */
}

/* Aktives Logo (mit der Klasse .activeicon am <img>-Tag) vollständig sichtbar machen */
.awayguestsnavi a img.activeicon {
    opacity: 1;
}

/* Der Wrapper, der die Navigation am unteren Rand fixiert */
.fm-sticky-footer {
    position: fixed; /* Fixiert das Element relativ zum Browserfenster */
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(248, 249, 250, 0.98); /* Heller Hintergrund */
    padding: 8px 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Schatten nach oben */
    z-index: 1020; /* Stellt sicher, dass es über dem Inhalt liegt */
    backdrop-filter: blur(4px); /* Glaseffekt für bessere Lesbarkeit */
    -webkit-backdrop-filter: blur(4px); /* Safari-Unterstützung */
}

/* Responsive Verbesserungen für mobile Geräte */
@media (max-width: 768px) {
    .fm-sticky-footer {
        padding: 6px 0;
    }
    
    .fm-sticky-footer .beerpricenavi a img {
        max-height: 40px; /* Kleinere Logos auf mobilen Geräten */
        margin: 0 3px;
    }
}


/* Body-Klasse für Seiten mit sticky navigation */
.has-sticky-navigation {
    margin-bottom: 80px; /* Platz für sticky footer */
}

.hero-section {
    position: relative;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
    opacity: 1;
    transition: opacity .75s ease-out;
}

.hero-overlay.fade-out {
    opacity: 0;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.page-title {
    display: inline-block;
    background: rgba(0, 0, 0, 0.55);
    padding: 0.2em 0.5em;
    border-radius: 6px;
    color: var(--fm-white);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0;
    font-family: var(--fm-font-display);
}

.hero-subtitle {
    display: block;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.3em 0.8em;
    border-radius: 4px;
    color: var(--fm-dark);
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    margin: 0.25rem auto 0 auto;
    width: fit-content;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--fm-font-display);
}

/* Hero Button Styles */
.hero-button {
    display: inline-block;
    background: var(--fm-gold);
    color: var(--fm-white);
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.hero-button:hover {
    background: var(--fm-accent-gold-dark);
    color: var(--fm-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Hero Section Variants */
.hero-section--with-button .hero-content {
    padding-bottom: 2rem;
}

/* Mobile optimizations for hero */
@media (max-width: 768px) {
    .hero-section {
        min-height: 280px;
    }
    
    .hero-content {
        padding: 1rem;
    }
    
    .hero-button {
        padding: 0.6rem 1.2rem;
        font-size: 0.875rem;
    }
}

.hero-image {
    position: relative;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-center: center;
    width: 100%;
    z-index: 2;
}

.image-source {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0.5rem;
    font-size: 0.9rem;
    text-shadow: 1px 1px 2px #000;
    z-index: 3;
}

/* Hero section typography now uses Bootstrap responsive classes (fs-3 fs-md-1, fs-5 fs-md-4) */

/*
 * ====================================================================
 * MATCHDAY GUEST SUMMARY STYLES
 * ====================================================================
 * Styles für die Zuschauer-Spieltag-Übersicht (matchday_guest_summary_bs5.twig)
 */

/* Content-Bereich Zentrierung */
.matchday-guest-summary {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

@media (max-width: 768px) {
    .matchday-guest-summary {
        padding: 1rem 0.5rem;
    }
}

/* Navigation Pfeile für vorherigen/nächsten Spieltag */
.matchday-nav-prev,
.matchday-nav-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: none; /* Standardmäßig versteckt, nur auf größeren Bildschirmen anzeigen */
    width: 50px;
    height: 50px;
    background-color: rgba(23, 23, 23, 0.8);
    color: white;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.5rem;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.matchday-nav-prev {
    left: 20px;
}

.matchday-nav-next {
    right: 20px;
}

.matchday-nav-prev:hover,
.matchday-nav-next:hover {
    background-color: var(--fm-gold);
    color: white;
    text-decoration: none;
    transform: translateY(-50%) scale(1.1);
}

/* Zeige Navigation nur auf größeren Bildschirmen */
@media (min-width: 1024px) {
    .matchday-nav-prev,
    .matchday-nav-next {
        display: flex;
    }
}

/* Zusammenfassungs-Header */
.matchday-summary-header {
    background: linear-gradient(to right, var(--fm-dark), #434343);
    color: white;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border-bottom: 3px solid var(--fm-gold);
}

.summary-label {
    font-family: var(--fm-font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    padding-left: 0.5rem;
}

.summary-total {
    font-family: var(--fm-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.summary-avg {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Tabellen-Header */
.matchday-table-header {
    background-color: var(--fm-dark);
    color: white;
    border-radius: 6px;
    padding: 0.75rem;
    border: 1px solid #434343;
}

.table-header-label {
    font-family: var(--fm-font-display);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    padding-left: 0.5rem;
}

/* Match Cards */
.matchday-match-card {
    background: linear-gradient(135deg, var(--fm-dark) 0%, var(--fm-dark-gray) 50%, #434343 100%);
    color: white;
    border-radius: 8px;
    padding: 1rem;
    border-bottom: 3px solid white;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.matchday-match-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-bottom-color: var(--fm-gold);
    border-color: var(--fm-gold);
}

/* Team Logos */
.team-logos {
    display: flex;
    align-items: center;
    gap: 8px; /* Normaler Abstand zwischen den Logos */
    justify-content: flex-start;
}

.team-logo {
    width: var(--fm-logo-lg);
    height: var(--fm-logo-lg);
    object-fit: contain;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 2px;
    transition: transform 0.2s ease;
    flex-shrink: 0; /* Verhindert Komprimierung der Logos */
}

.team-logo:hover {
    transform: scale(1.1);
    z-index: 2;
}

/* Team logo responsive sizing now uses inline styles and Bootstrap gap utilities */

/* Zuschauerzahlen */
.attendance-number {
    font-family: var(--fm-font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 0.25rem;
}

.attendance-capacity {
    font-size: 0.7rem;
    background-color: var(--fm-dark);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.attendance-progress {
    height: 6px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.attendance-progress .progress-bar {
    background-color: white;
    border-radius: 3px;
}

/* Attendance number responsive sizing now handled in templates */

/* Gäste-Informationen */
.guest-info {
    font-size: 0.9rem;
}

.guest-count {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.distance {
    font-weight: 700;
    color: var(--fm-gold);
}

/* Guest info responsive sizing now handled in templates */

/* Geisterspiel Styles - requires template-based class or JavaScript implementation */
.matchday-match-card .attendance-number.geisterspiel {
    font-size: 1.2rem;
    color: #ff6b6b;
    font-weight: 600;
}

/* Geisterspiel responsive styling now handled in templates */

/* Summary responsive adjustments now handled in templates with Bootstrap utilities */

/*
 * ====================================================================
 * PRODUCT LIST STYLES (product_list_bs5.twig)
 * ====================================================================
 * Styles für die Produktlisten-Seite
 */

/* Product Image Container */
.product-image-wrapper {
    position: relative;
    height: 180px;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.product-image-container {
    position: relative;
    width: 100%;
    height: 100%;
}
.product-image-primary,
.product-image-hover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}
.product-image-hover {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
/* Product Cards now use .fm-card--hover-medium and .fm-card__body--standard from unified components */
.product-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--fm-text-primary);
}
.product-usp {
    font-size: 0.875rem;
    color: #6c757d;
}
.product-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fm-dark);
}
.product-price .text-danger {
    color: var(--fm-red) !important;
}
/* Product Top Bar */
.product-top-bar {
    border-radius: 8px;
    margin-bottom: 1.5rem;
    padding: 0.75rem !important;
}
/* Product responsive styling now handled in templates with Bootstrap utilities and inline styles */
/* SEO Content Bereich */
.seo-content {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #e9ecef;
}
.seo-content h2,
.seo-content h3 {
    color: var(--fm-dark-gray);
    font-family: var(--fm-font-display);
}
/* Disclaimer */
.disclaimer {
    max-width: 600px;
    margin: 0 auto;
}

/* Styles from stadionguide_bs5.twig */
.stadium-card .stadium-title {
    font-family: var(--fm-font-display);
    font-size: 1.1rem;
    color: var(--fm-white);
    font-weight: 700;
    text-transform: uppercase;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0,0,0,0) 100%);
    z-index: 2;
}

.imagesource-stadium {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 2px 5px;
    font-size: 10px;
    border-radius: 3px;
    z-index: 10;
}

/* Styles from magazin_landingpage_bs5.twig */
.startpage-product-card img {
    height: 400px;
    width: 100%;
    object-fit: cover;
    /* Explizite Größenangaben für bessere Browserkonsistenz */
    min-height: 400px;
    max-height: 400px;
    /* Fallback für ältere Browser */
    -webkit-object-fit: cover;
    -moz-object-fit: cover;
    -o-object-fit: cover;
    object-fit: cover;
    /* Zentrierte Bilddarstellung */
    object-position: center;
}

/* Responsive Anpassungen für Produktkacheln */
@media (max-width: 768px) {
    .startpage-product-card img {
        height: 320px;
        min-height: 320px;
        max-height: 320px;
    }
}

@media (max-width: 576px) {
    .startpage-product-card img {
        height: 280px;
        min-height: 280px;
        max-height: 280px;
    }
}

/* Startpage product cards now use overlay system - no separate title styling needed */

.article-overlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
}
.article-title {
    font-size: 1.1rem;
    font-family: var(--fm-font-display);
    font-weight: 700;
}
/* Card hover effects now use .fm-card--hover-strong from unified components */

.badge {
    font-size: 0.75rem;
    font-weight: 700;
}
.small, .small1 {
    font-size: .9em;
    font-weight: 700;
    letter-spacing: .05em;
}
p, .card-text, .article-text {
    font-size: 1rem;
    line-height: 1.5;
}

.carousel-item {
    background-color: var(--fm-black);
    border-radius: .25rem;
    overflow: hidden;
    min-height: 320px; /* Gleiche Höhe wie .hero-image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: var(--bg-image);
    position: relative; /* Wie .hero-image */
}
.article-title {
    font-family: var(--fm-font-display);
    font-weight: bold;
    font-size: 1.7rem; /* 25% kleiner: 2.25rem * 0.75 */
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    line-height: 1.1;
}

/* Responsive title sizing for better mobile experience */
@media (min-width: 768px) {
    .article-title {
        font-size: 2.25rem; /* 25% kleiner: 3rem * 0.75 */
    }
}

@media (min-width: 1200px) {
    .article-title {
        font-size: 2.6rem; /* 25% kleiner: 3.5rem * 0.75 */
    }
}

/* Carousel badge styling */
.carousel-item .carousel-article-info .bg-dark {
    font-size: 1.25rem; /* Deutlich größer */
    font-weight: 600;
    letter-spacing: 0.75px;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem !important; /* Größeres Padding */
    text-decoration: none !important; /* Keine Unterstreichung */
}

@media (min-width: 768px) {
    .carousel-item .carousel-article-info .bg-dark {
        font-size: 1.4rem; /* Noch größer auf Desktop */
        padding: 0.6rem 1.25rem !important;
        letter-spacing: 1px;
    }
}

/* Carousel button styling */
.carousel-item .btn {
    font-size: 0.95rem; /* 25% kleiner */
    padding: 0.65rem 1.5rem; /* 25% kleineres Padding */
    font-weight: 600;
    border-width: 2px;
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .carousel-item .btn {
        font-size: 1.05rem; /* 25% kleiner */
        padding: 0.75rem 1.9rem; /* 25% kleineres Padding */
        margin-top: 1.5rem;
    }
}

.carousel-item .article-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center; /* Text zentrieren */
    text-align: center; /* Text zentrieren */
    padding: 3.5rem 1.5rem 2rem; /* Noch mehr Padding unten */
    position: relative;
    z-index: 2;
}

/* Responsive padding für bessere Positionierung */
@media (min-width: 768px) {
    .carousel-item .article-content {
        padding: 4.5rem 2rem 2.5rem; /* Deutlich mehr Abstand auf größeren Bildschirmen */
        align-items: center; /* Zentrierung beibehalten */
        text-align: center;
    }
}

@media (min-width: 1200px) {
    .carousel-item .article-content {
        padding: 5rem 2.5rem 3rem; /* Maximum Padding für große Bildschirme */
        align-items: center; /* Zentrierung beibehalten */
        text-align: center;
    }
}

/* Overlay für das ganze Carousel-Item */
.carousel-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 50%);
    z-index: 1;
    pointer-events: none;
}

/* Remove underline from carousel links */
.carousel-item a {
    text-decoration: none !important;
    display: block;
    height: 100%;
    position: relative;
    z-index: 2; /* Unter den Controls */
}

.carousel-item a:hover {
    text-decoration: none !important;
}

/* Carousel navigation controls */
#mainCarousel {
    position: relative;
}

.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.9;
    transition: all 0.3s ease;
    z-index: 100; /* Definitiv über allem */
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: var(--fm-gold);
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.carousel-control-prev {
    left: 20px;
}

.carousel-control-next {
    right: 20px;
}

/* Center the icons in the buttons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 24px;
    height: 24px;
}

/* Make controls visible on mobile too */
@media (max-width: 767px) {
    .carousel-control-prev,
    .carousel-control-next {
        width: 45px;
        height: 45px;
    }
    
    .carousel-control-prev {
        left: 10px;
    }
    
    .carousel-control-next {
        right: 10px;
    }
}

.carousel-article-info {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

article .article-content img,
article .article-content iframe,
article .article-content video {
    max-width: 100%;
    height: auto;
}

article .article-content table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* Carousel responsive styling now handled in templates with Bootstrap utilities */

.usp-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 8px;
}

/*
 * ====================================================================
 * UNIFIED NAVIGATION COMPONENTS
 * ====================================================================
 * Consolidated navigation button styles used across multiple pages
 */

/* Unified Modal/Carousel Navigation Buttons */
.fm-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    opacity: 0.95;
    transition: opacity 0.3s ease;
    background-color: var(--fm-black) !important;
    border-color: var(--fm-black) !important;
    color: var(--fm-white) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.fm-nav-btn:hover {
    opacity: 1;
    background-color: var(--fm-gray-medium) !important;
    border-color: var(--fm-gray-medium) !important;
}

.fm-nav-btn:disabled,
.fm-nav-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

.fm-nav-prev {
    left: 15px;
}

.fm-nav-next {
    right: 15px;
}

/* Fixed navigation variant (for matchday pages) */
.fm-nav-btn--fixed {
    position: fixed;
    z-index: 1000;
    background-color: rgba(23, 23, 23, 0.8) !important;
    font-size: 1.5rem;
    display: none; /* Hidden by default */
}

.fm-nav-btn--fixed:hover {
    background-color: var(--fm-gold) !important;
    transform: translateY(-50%) scale(1.1);
}

.fm-nav-btn--fixed.fm-nav-prev {
    left: 20px;
}

.fm-nav-btn--fixed.fm-nav-next {
    right: 20px;
}

@media (min-width: 1024px) {
    .fm-nav-btn--fixed {
        display: flex;
    }
}

/* Navigation responsive adjustments now handled in templates with Bootstrap utilities */

/*
 * ====================================================================
 * UNIFIED CARD COMPONENTS
 * ====================================================================
 * Consolidated card styles used across multiple pages
 */

/* Base card component */
.fm-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    transition: all 0.3s ease;
}

/* Hover effect modifiers */
.fm-card--hover-subtle:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--fm-gold);
}

.fm-card--hover-medium:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    border-color: var(--fm-gold);
}

.fm-card--hover-strong {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fm-card--hover-strong:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

/* Image variants */
.fm-card__image {
    width: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.fm-card__image--small { height: 180px; }
.fm-card__image--medium { height: 250px; }
.fm-card__image--large { height: 300px; }

/* Overlay pattern */
.fm-card--overlay {
    position: relative;
}

.fm-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    border-radius: 0 0 8px 8px;
}

.fm-card__overlay--gradient {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0,0,0,0) 100%);
}

/* Content variants */
.fm-card__body--compact { min-height: 140px; padding: 0.5rem; }
.fm-card__body--standard { min-height: 180px; padding: 0.75rem; }
.fm-card__body--spacious { min-height: 220px; padding: 1rem; }

/*
 * ====================================================================
 * UNIFIED IMAGE-CARD SYSTEM
 * ====================================================================
 * Einheitliches System für Kacheln mit Bildern und Overlays
 * Ersetzt verschiedene Overlay-Implementierungen durch zentrale Komponenten
 */

/* Base Image Card */
.fm-image-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--fm-border-radius-lg);
    background-color: var(--fm-light-gray);
    transition: all 0.3s ease;
}

.fm-image-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Hover Effects für Image Cards */
.fm-image-card--hover:hover .fm-image-card__image {
    transform: scale(1.05);
}

.fm-image-card--hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--fm-card-shadow-medium);
}

/* Overlay System */
.fm-image-card__overlay {
    position: absolute;
    left: 0;
    right: 0;
    padding: var(--fm-spacing-md) var(--fm-spacing-lg);
    background: var(--fm-overlay-dark);
    color: var(--fm-white);
    z-index: 2;
}

/* Overlay Positionen */
.fm-image-card__overlay--bottom {
    bottom: 0;
    background: var(--fm-overlay-gradient);
}

.fm-image-card__overlay--top {
    top: 0;
    background: rgba(0, 0, 0, 0.6);
}

.fm-image-card__overlay--full {
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Content within Overlays */
.fm-image-card__title {
    font-family: var(--fm-font-display);
    font-size: var(--fm-font-size-lg);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 var(--fm-spacing-xs) 0;
    color: var(--fm-white);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.fm-image-card__meta {
    font-size: var(--fm-font-size-sm);
    font-weight: 600;
    margin: 0 0 var(--fm-spacing-xs) 0;
    opacity: 0.9;
}

.fm-image-card__description {
    font-size: var(--fm-font-size-sm);
    line-height: 1.4;
    margin: var(--fm-spacing-xs) 0 0 0;
    opacity: 0.85;
}

/* Corner Elements (für Badges, Icons, etc.) */
.fm-image-card__corner {
    position: absolute;
    z-index: 3;
    padding: var(--fm-spacing-xs) var(--fm-spacing-sm);
    border-radius: var(--fm-border-radius-sm);
    font-size: var(--fm-font-size-xs);
    font-weight: 700;
}

.fm-image-card__corner--top-right {
    top: var(--fm-spacing-sm);
    right: var(--fm-spacing-sm);
}

.fm-image-card__corner--top-left {
    top: var(--fm-spacing-sm);
    left: var(--fm-spacing-sm);
}

.fm-image-card__corner--bottom-right {
    bottom: var(--fm-spacing-sm);
    right: var(--fm-spacing-sm);
}

/* Corner Styles */
.fm-image-card__corner--dark {
    background: rgba(0, 0, 0, 0.75);
    color: var(--fm-white);
}

.fm-image-card__corner--light {
    background: rgba(255, 255, 255, 0.9);
    color: var(--fm-dark);
}

.fm-image-card__corner--gold {
    background: var(--fm-gold);
    color: var(--fm-white);
}

/* Value Box (für Preise, Zahlen, etc.) */
.fm-image-card__value-box {
    position: absolute;
    bottom: var(--fm-spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    color: var(--fm-dark);
    padding: var(--fm-spacing-xs) var(--fm-spacing-md);
    border-radius: var(--fm-border-radius-sm);
    font-family: var(--fm-font-display);
    font-weight: 700;
    font-size: var(--fm-font-size-md);
    text-align: center;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Gallery Trigger (für Bilder-Galerie) */
.fm-image-card__gallery-trigger {
    position: absolute;
    top: var(--fm-spacing-sm);
    left: var(--fm-spacing-sm);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: var(--fm-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fm-font-size-md);
    z-index: 3;
    transition: all 0.3s ease;
    text-decoration: none;
}

.fm-image-card__gallery-trigger:hover {
    background: var(--fm-gold);
    color: var(--fm-white);
    transform: scale(1.1);
    text-decoration: none;
}

/* Source Attribution */
.fm-image-card__source {
    position: absolute;
    bottom: var(--fm-spacing-xs);
    right: var(--fm-spacing-xs);
    font-size: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--fm-white);
    padding: 2px 4px;
    border-radius: var(--fm-border-radius-sm);
    z-index: 3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .fm-image-card__title {
        font-size: var(--fm-font-size-md);
    }
    
    .fm-image-card__overlay {
        padding: var(--fm-spacing-sm) var(--fm-spacing-md);
    }
    
    .fm-image-card__value-box {
        font-size: var(--fm-font-size-sm);
        padding: var(--fm-spacing-xs) var(--fm-spacing-sm);
    }
}

/*
 * ====================================================================
 * LEGACY MIGRATION HELPERS
 * ====================================================================
 * Temporäre Klassen für schrittweise Migration bestehender Templates
 */

/* Choreofeed Migration */
.choreo-card-img { /* Ersetzt durch .fm-image-card__image */ }
.choreo-card-overlay { /* Ersetzt durch .fm-image-card__overlay--bottom */ }
.choreo-card-title-text { /* Ersetzt durch .fm-image-card__title */ }

/* Stadium Migration */
.stadium-title { /* Ersetzt durch .fm-image-card__overlay--bottom + .fm-image-card__title */ }
.imagesource-stadium { /* Ersetzt durch .fm-image-card__source */ }

/* Penalty Migration */
.penalty-overlay { /* Ersetzt durch .fm-image-card__overlay--bottom */ }
.penalty-value { /* Ersetzt durch .fm-image-card__value-box */ }

/* Article Migration */
.article-overlay { /* Ersetzt durch .fm-image-card__overlay--bottom */ }
.article-title { /* Ersetzt durch .fm-image-card__title */ }

/*
 * ====================================================================
 * CONSOLIDATED RESPONSIVE DESIGN
 * ====================================================================
 * Central media queries to reduce duplication across modules
 */

/* Mobile First: up to 575px (default styles above) */

/* Small devices: 576px and up */
@media (min-width: 576px) {
    .fm-container-responsive {
        padding: var(--fm-container-padding-tablet);
    }
}

/* Medium devices: 768px and up */  
@media (min-width: 768px) {
    .fm-container-responsive {
        padding: var(--fm-container-padding-desktop);
    }
}

/*
 * ====================================================================
 * RESPONSIVE UTILITIES MIGRATION
 * ====================================================================
 * Custom media queries migrated to Bootstrap 5 responsive utilities
 * Templates updated to use responsive classes (fs-, p-, d-, w-, h-)
 * Original: 120 lines → New: 0 lines (100% reduction)
 * Migration: @media queries → Bootstrap responsive classes
 * Breakpoints: xs(0px), sm(576px), md(768px), lg(992px), xl(1200px)
 */

/*
 * ====================================================================
 * PHASE 2 MIGRATION: INLINE STYLES CLEANUP
 * ====================================================================
 * CSS classes created to replace inline styles from templates
 * Following UI-UX-GUIDE.md standards and mobile-first approach
 */

/* Mobile Hero Image - replaces inline style in base_bs5.twig line 214 */
.fm-mobile-image {
    max-height: 200px;
    width: 100%;
    object-fit: cover;
}


/* Logo Mobile - replaces inline style in base_bs5.twig line 282 */
.fm-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

/* Mobile Spacer - replaces inline style in base_bs5.twig line 286 */
.fm-mobile-spacer {
    width: 48px;
}

/* Carousel Item Background - background-image now handled via CSS custom property in .carousel-item */

/* Hidden Spacer - replaces inline style in base_bs5.twig line 347 */
.fm-hidden-spacer {
    width: 48px;
}

/* Choreofeed Hero Section - replaces inline style in choreofeed_bs5.twig line 70 */
.fm-choreo-hero {
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
}

/* Choreofeed Team Logo - replaces inline style in choreofeed_bs5.twig line 146 */
.fm-choreo-team-logo {
    height: var(--fm-logo-md);
    margin-right: 5px;
    width: auto;
    object-fit: contain;
}

/*
 * ====================================================================
 * UNIFIED LOGO SYSTEM (PHASE 2)
 * ====================================================================
 * Responsive logo components using CSS variables for consistent sizing
 */

/* Base logo classes with consistent sizing */
.fm-logo--xs {
    width: var(--fm-logo-xs);
    height: var(--fm-logo-xs);
    object-fit: contain;
}

.fm-logo--sm {
    width: var(--fm-logo-sm);
    height: var(--fm-logo-sm);
    object-fit: contain;
}

.fm-logo--md {
    width: var(--fm-logo-md);
    height: var(--fm-logo-md);
    object-fit: contain;
}

.fm-logo--lg {
    width: var(--fm-logo-lg);
    height: var(--fm-logo-lg);
    object-fit: contain;
}

.fm-logo--xl {
    width: var(--fm-logo-xl);
    height: var(--fm-logo-xl);
    object-fit: contain;
}

.fm-logo--xxl {
    width: var(--fm-logo-xxl);
    height: var(--fm-logo-xxl);
    object-fit: contain;
}

/* Team logo variants for specific use cases */
.fm-team-logo--small {
    width: var(--fm-logo-sm);
    height: var(--fm-logo-sm);
    object-fit: contain;
    flex-shrink: 0;
}

.fm-team-logo--medium {
    width: var(--fm-logo-md);
    height: var(--fm-logo-md);
    object-fit: contain;
    flex-shrink: 0;
}

.fm-team-logo--large {
    width: var(--fm-logo-lg);
    height: var(--fm-logo-lg);
    object-fit: contain;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.fm-team-logo--large:hover {
    transform: scale(1.05);
}

/* Responsive team logo - adapts to screen size */
.fm-team-logo--responsive {
    width: var(--fm-logo-md);
    height: var(--fm-logo-md);
    object-fit: contain;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .fm-team-logo--responsive {
        width: var(--fm-logo-lg);
        height: var(--fm-logo-lg);
    }
}

@media (min-width: 992px) {
    .fm-team-logo--responsive {
        width: var(--fm-logo-xl);
        height: var(--fm-logo-xl);
    }
}

/*
 * ====================================================================
 * UNIFIED GUEST COUNT SYSTEM (PHASE 2)
 * ====================================================================
 * Consolidated guest count components replacing duplicates across files
 */

/* Base guest count container */
.fm-guest-count {
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--fm-border-radius-lg);
    padding: var(--fm-spacing-lg);
    margin: var(--fm-spacing-sm) 0;
    text-align: center;
}

/* Large guest count number display */
.fm-guest-count__number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fm-dark);
    letter-spacing: -1px;
    font-family: var(--fm-font-display);
    line-height: 1;
    margin-bottom: var(--fm-spacing-xs);
}

/* Guest count label/description */
.fm-guest-count__label {
    font-size: var(--fm-font-size-sm);
    color: var(--fm-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Distance information styling */
.fm-guest-count__distance {
    font-size: var(--fm-font-size-sm);
    font-weight: 700;
    color: var(--fm-gold);
    margin-top: var(--fm-spacing-xs);
}

/* Compact variant for tables and small spaces */
.fm-guest-count--compact {
    padding: var(--fm-spacing-sm);
    margin: var(--fm-spacing-xs) 0;
}

.fm-guest-count--compact .fm-guest-count__number {
    font-size: var(--fm-font-size-lg);
}

.fm-guest-count--compact .fm-guest-count__label {
    font-size: var(--fm-font-size-xs);
}

/* Hero variant for prominent display */
.fm-guest-count--hero {
    background: linear-gradient(135deg, var(--fm-gold) 0%, var(--fm-accent-gold-dark) 100%);
    color: var(--fm-white);
    padding: var(--fm-spacing-xl);
    box-shadow: var(--fm-card-shadow-medium);
}

.fm-guest-count--hero .fm-guest-count__number {
    font-size: 3rem;
    color: var(--fm-white);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.fm-guest-count--hero .fm-guest-count__label {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--fm-font-size-md);
}

/* Inline variant for text flows */
.fm-guest-count--inline {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: var(--fm-spacing-xs) var(--fm-spacing-sm);
    border-radius: var(--fm-border-radius-sm);
    margin: 0 var(--fm-spacing-xs);
    vertical-align: middle;
}

.fm-guest-count--inline .fm-guest-count__number {
    font-size: var(--fm-font-size-md);
    color: var(--fm-gold);
    margin-bottom: 0;
}

.fm-guest-count--inline .fm-guest-count__label {
    display: none;
}

/* Responsive behavior */
@media (max-width: 768px) {
    .fm-guest-count--hero .fm-guest-count__number {
        font-size: 2rem;
    }
    
    .fm-guest-count {
        padding: var(--fm-spacing-md);
    }
}

/*
 * ====================================================================
 * TABLE ACCESSIBILITY IMPROVEMENTS (PHASE 2)
 * ====================================================================
 * Enhanced table headers with ARIA support and proper styling
 */

/* Table logo column - standardized width */
.fm-table-logo-col {
    width: 50px;
}


/*
 * ====================================================================
 * FM-CARD COMPONENT SYSTEM (PHASE 3)
 * ====================================================================
 * Standardized card components following UI-UX-GUIDE.md specifications
 * Using BEM methodology: .fm-card__element--modifier
 */

/* Base FM-Card Component */
.fm-card {
    background: var(--fm-white);
    border: 1px solid var(--fm-border-light);
    border-radius: var(--fm-border-radius-lg);
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--fm-card-shadow-subtle);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Card hover effects */
.fm-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fm-card-shadow-medium);
    border-color: var(--fm-gold);
}

/* Card Image Element */
.fm-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.fm-card:hover .fm-card__image {
    transform: scale(1.05);
}

/* Card Content Container */
.fm-card__content {
    padding: var(--fm-spacing-lg);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Card Title */
.fm-card__title {
    font-family: var(--fm-font-display);
    font-size: var(--fm-font-size-lg);
    font-weight: 700;
    color: var(--fm-dark);
    margin-bottom: var(--fm-spacing-sm);
    line-height: 1.3;
}

/* Card Title in Overlay - bessere Lesbarkeit */
.fm-card__overlay .fm-card__title {
    color: var(--fm-white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin-bottom: 0;
}

/* Card Meta Information */
.fm-card__meta {
    font-size: var(--fm-font-size-xs);
    color: var(--fm-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--fm-spacing-sm);
    font-weight: 600;
}

/* Card Meta in Overlay - bessere Lesbarkeit */
.fm-card__overlay .fm-card__meta {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.4);
    padding: var(--fm-spacing-xs) var(--fm-spacing-sm);
    border-radius: var(--fm-border-radius-sm);
    display: inline-block;
    margin-bottom: var(--fm-spacing-sm);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

/* Card Body Text */
.fm-card__body {
    color: var(--fm-text-primary);
    line-height: 1.6;
    margin-bottom: var(--fm-spacing-md);
    flex-grow: 1;
}

/* Card Footer */
.fm-card__footer {
    padding-top: var(--fm-spacing-sm);
    border-top: 1px solid var(--fm-border-light);
    margin-top: auto;
}

/* Card Overlay (for image cards with text overlay) */
.fm-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0,0,0,0.2) 100%);
    color: var(--fm-white);
    padding: var(--fm-spacing-lg);
    transition: all 0.3s ease;
}

/* Card Tag/Badge */
.fm-card__tag {
    position: absolute;
    top: var(--fm-spacing-sm);
    left: var(--fm-spacing-sm);
    background: var(--fm-gold);
    color: var(--fm-white);
    padding: var(--fm-spacing-xs) var(--fm-spacing-sm);
    border-radius: var(--fm-border-radius-sm);
    font-size: var(--fm-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ====================================================================
 * CARD MODIFIERS (Different variants)
 * ====================================================================
 */

/* Image Card Variant */
.fm-card--image {
    /* Base card with image styling */
}

/* Featured Card (larger, more prominent) */
.fm-card--featured {
    border: 2px solid var(--fm-gold);
    box-shadow: var(--fm-card-shadow-strong);
}

.fm-card--featured .fm-card__title {
    font-size: var(--fm-font-size-xl);
    color: var(--fm-gold);
}

/* Large Card Variant */
.fm-card--large {
    /* Larger card for hero content */
}

.fm-card--large .fm-card__image {
    height: 300px;
}

.fm-card--large .fm-card__title {
    font-size: var(--fm-font-size-xxl);
}

/* Compact Card Variant */
.fm-card--compact {
    /* Smaller card for sidebars, lists */
}

.fm-card--compact .fm-card__image {
    height: 120px;
}

.fm-card--compact .fm-card__content {
    padding: var(--fm-spacing-md);
}

.fm-card--compact .fm-card__title {
    font-size: var(--fm-font-size-md);
}

/* Horizontal Card Variant */
.fm-card--horizontal {
    flex-direction: row;
    height: auto;
}

.fm-card--horizontal .fm-card__image {
    width: 40%;
    height: auto;
    min-height: 150px;
}

.fm-card--horizontal .fm-card__content {
    width: 60%;
}

/* Dark Card Variant */
.fm-card--dark {
    background: var(--fm-dark);
    border-color: var(--fm-gray-medium);
    color: var(--fm-white);
}

.fm-card--dark .fm-card__title {
    color: var(--fm-white);
}

.fm-card--dark .fm-card__body {
    color: var(--fm-text-light);
}

.fm-card--dark .fm-card__meta {
    color: var(--fm-text-muted);
}

/* Hover Enhanced Card */
.fm-card--hover-enhanced:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--fm-card-shadow-strong);
}

/* No Shadow Card */
.fm-card--no-shadow {
    box-shadow: none;
}

.fm-card--no-shadow:hover {
    box-shadow: var(--fm-card-shadow-subtle);
}

/* ====================================================================
 * RESPONSIVE CARD BEHAVIOR
 * ====================================================================
 */

/* Mobile Optimizations */
@media (max-width: 768px) {
    .fm-card__content {
        padding: var(--fm-spacing-md);
    }
    
    .fm-card__title {
        font-size: var(--fm-font-size-md);
    }
    
    .fm-card--horizontal {
        flex-direction: column;
    }
    
    .fm-card--horizontal .fm-card__image {
        width: 100%;
        height: 200px;
    }
    
    .fm-card--horizontal .fm-card__content {
        width: 100%;
    }
    
    /* Reduce hover effects on mobile */
    .fm-card:hover {
        transform: none;
    }
    
    .fm-card:hover .fm-card__image {
        transform: none;
    }
}

/* ====================================================================
 * CARD ACCESSIBILITY ENHANCEMENTS
 * ====================================================================
 */

/* Focus States */
.fm-card:focus-within {
    outline: 2px solid var(--fm-gold);
    outline-offset: 2px;
}

/* Keyboard Navigation */
.fm-card [role="button"], 
.fm-card a {
    transition: all 0.2s ease;
}

.fm-card [role="button"]:focus, 
.fm-card a:focus {
    outline: 2px solid var(--fm-gold);
    outline-offset: 2px;
}

/* Screen Reader Support */
.fm-card__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ====================================================================
 * PRODUCT CARD SPECIFIC STYLES
 * ====================================================================
 */

/* Product image container with hover effect */
.fm-product-image-container {
    position: relative;
    overflow: hidden;
    height: 250px;
    width: 100%;
}

/* Hover image (appears on hover) */
.fm-product-image-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* Show hover image on card hover */
.fm-card:hover .fm-product-image-hover {
    opacity: 1;
}

/* Product card image specific sizing */
.fm-card--image .fm-card__image {
    height: 250px;
}

/* Product title styling */
.fm-card .product-title {
    font-size: var(--fm-font-size-sm);
    font-weight: 600;
    color: var(--fm-dark);
    line-height: 1.3;
    margin-bottom: var(--fm-spacing-xs);
}

/* Product USP (Unique Selling Points) */
.fm-product-usp {
    margin-bottom: var(--fm-spacing-sm);
}

.fm-usp-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    line-height: 1.3;
    font-size: var(--fm-font-size-xs);
}

.fm-usp-icon {
    width: var(--fm-logo-xs);
    height: var(--fm-logo-xs);
    margin-right: var(--fm-spacing-xs);
    flex-shrink: 0;
}

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

/* ====================================================================
 * PRODUCT CATEGORY HERO STYLES
 * ====================================================================
 */


/* Responsive product grid */
@media (max-width: 768px) {
    .fm-product-image-container {
        height: 200px;
    }
    
    .fm-card--image .fm-card__image {
        height: 200px;
    }
}

/*
 * ====================================================================
 * FM-BUTTON COMPONENT SYSTEM (PHASE 3)
 * ====================================================================
 * Touch-optimized button system following UI-UX-GUIDE.md specifications
 * Minimum touch target: 44px (WCAG AA compliance)
 */

/* Base FM-Button Component */
.fm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: var(--fm-spacing-sm) var(--fm-spacing-lg);
    font-family: var(--fm-font-display);
    font-size: var(--fm-font-size-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    border: 2px solid transparent;
    border-radius: var(--fm-border-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Remove default button styles */
.fm-btn:hover,
.fm-btn:focus,
.fm-btn:active {
    text-decoration: none;
    outline: none;
}

/* Focus state for accessibility */
.fm-btn:focus-visible {
    outline: 2px solid var(--fm-gold);
    outline-offset: 2px;
}

/* ====================================================================
 * BUTTON VARIANTS (Primary, Secondary, etc.)
 * ====================================================================
 */

/* Primary Button */
.fm-btn--primary {
    background: linear-gradient(135deg, var(--fm-gold) 0%, var(--fm-accent-gold-dark) 100%);
    color: var(--fm-white);
    border-color: var(--fm-gold);
    box-shadow: 0 2px 8px rgba(182, 139, 71, 0.3);
}

.fm-btn--primary:hover {
    background: linear-gradient(135deg, var(--fm-accent-gold-dark) 0%, var(--fm-gold) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(182, 139, 71, 0.4);
    color: var(--fm-white);
}

.fm-btn--primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(182, 139, 71, 0.4);
}

/* Secondary Button */
.fm-btn--secondary {
    background: transparent;
    color: var(--fm-gold);
    border-color: var(--fm-gold);
}

.fm-btn--secondary:hover {
    background: var(--fm-gold);
    color: var(--fm-white);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(182, 139, 71, 0.3);
}

.fm-btn--secondary:active {
    transform: translateY(0);
}

/* Dark Button */
.fm-btn--dark {
    background: var(--fm-dark);
    color: var(--fm-white);
    border-color: var(--fm-dark);
}

.fm-btn--dark:hover {
    background: var(--fm-gray-medium);
    border-color: var(--fm-gray-medium);
    color: var(--fm-white);
    transform: translateY(-1px);
}

/* Light/Outline Button */
.fm-btn--light {
    background: var(--fm-white);
    color: var(--fm-dark);
    border-color: var(--fm-border-light);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.fm-btn--light:hover {
    background: var(--fm-bg-light);
    border-color: var(--fm-gold);
    color: var(--fm-dark);
    transform: translateY(-1px);
}

/* Danger/Warning Button */
.fm-btn--danger {
    background: var(--fm-accent-red);
    color: var(--fm-white);
    border-color: var(--fm-accent-red);
}

.fm-btn--danger:hover {
    background: #e55555;
    border-color: #e55555;
    color: var(--fm-white);
    transform: translateY(-1px);
}

/* ====================================================================
 * BUTTON SIZES
 * ====================================================================
 */

/* Small Button */
.fm-btn--sm {
    min-height: 36px;
    min-width: 36px;
    padding: var(--fm-spacing-xs) var(--fm-spacing-md);
    font-size: var(--fm-font-size-xs);
}

/* Large Button */
.fm-btn--lg {
    min-height: 52px;
    padding: var(--fm-spacing-md) var(--fm-spacing-xl);
    font-size: var(--fm-font-size-lg);
}

/* Extra Large Button */
.fm-btn--xl {
    min-height: 60px;
    padding: var(--fm-spacing-lg) var(--fm-spacing-xxl);
    font-size: var(--fm-font-size-xl);
}

/* ====================================================================
 * BUTTON MODIFIERS
 * ====================================================================
 */

/* Full Width Button */
.fm-btn--block {
    width: 100%;
    justify-content: center;
}

/* Rounded Button */
.fm-btn--rounded {
    border-radius: 50px;
}

/* Square Button (for icons) */
.fm-btn--square {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--fm-border-radius-md);
}

.fm-btn--square.fm-btn--sm {
    width: 36px;
    height: 36px;
}

.fm-btn--square.fm-btn--lg {
    width: 52px;
    height: 52px;
}

/* Disabled State */
.fm-btn:disabled,
.fm-btn--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

/* Loading State */
.fm-btn--loading {
    color: transparent;
    pointer-events: none;
}

.fm-btn--loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: fm-btn-spin 0.8s linear infinite;
}

@keyframes fm-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ====================================================================
 * BUTTON GROUPS
 * ====================================================================
 */

.fm-btn-group {
    display: inline-flex;
    gap: var(--fm-spacing-xs);
}

.fm-btn-group .fm-btn {
    margin: 0;
}

/* Connected Button Group */
.fm-btn-group--connected {
    gap: 0;
}

.fm-btn-group--connected .fm-btn {
    border-radius: 0;
}

.fm-btn-group--connected .fm-btn:first-child {
    border-top-left-radius: var(--fm-border-radius-md);
    border-bottom-left-radius: var(--fm-border-radius-md);
}

.fm-btn-group--connected .fm-btn:last-child {
    border-top-right-radius: var(--fm-border-radius-md);
    border-bottom-right-radius: var(--fm-border-radius-md);
}

.fm-btn-group--connected .fm-btn:not(:last-child) {
    border-right: none;
}

/* ====================================================================
 * ICON BUTTONS & COMBINATIONS
 * ====================================================================
 */

/* Button with icon */
.fm-btn__icon {
    margin-right: var(--fm-spacing-xs);
    font-size: 1.1em;
}

.fm-btn__icon--right {
    margin-right: 0;
    margin-left: var(--fm-spacing-xs);
}

.fm-btn__icon--only {
    margin: 0;
}

/* ====================================================================
 * RESPONSIVE BUTTON BEHAVIOR
 * ====================================================================
 */

/* Mobile optimizations */
@media (max-width: 768px) {
    .fm-btn {
        min-height: 48px; /* Larger touch targets on mobile */
        padding: var(--fm-spacing-md) var(--fm-spacing-lg);
    }
    
    .fm-btn--sm {
        min-height: 40px;
    }
    
    .fm-btn--lg {
        min-height: 56px;
    }
    
    /* Reduce hover effects on touch devices */
    .fm-btn:hover {
        transform: none;
    }
    
    /* Stack button groups vertically on mobile */
    .fm-btn-group--mobile-stack {
        flex-direction: column;
        width: 100%;
    }
    
    .fm-btn-group--mobile-stack .fm-btn {
        width: 100%;
    }
}

/* ====================================================================
 * ACCESSIBILITY ENHANCEMENTS
 * ====================================================================
 */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .fm-btn {
        border-width: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .fm-btn {
        transition: none;
    }
    
    .fm-btn:hover {
        transform: none;
    }
    
    .fm-btn--loading::after {
        animation: none;
    }
}

/*
 * ====================================================================
 * PHASE 4: MOBILE-UX OPTIMIZATION
 * ====================================================================
 * Touch-first design optimizations for better mobile experience
 */

/* Touch-Target Optimization */
.fm-touch-target {
    min-width: 44px;
    min-height: 44px;
    padding: 0.75rem;
    border: 2px solid transparent;
    border-radius: var(--fm-border-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Enhanced mobile touch-targets */
@media (max-width: 768px) {
    .fm-touch-target {
        min-width: 48px;
        min-height: 48px;
        padding: 0.875rem;
    }
    
    /* Table edit buttons optimization */
    .fm-table-edit-btn {
        min-width: 48px;
        min-height: 48px;
        padding: 0.75rem;
        border-radius: var(--fm-border-radius-md);
    }
}

/* Hover nur auf Non-Touch-Geräten */
@media (hover: hover) {
    .fm-touch-target:hover {
        border-color: var(--fm-gold);
        background-color: rgba(182, 139, 71, 0.1);
    }
}

/* ====================================================================
 * RESPONSIVE TYPOGRAPHY SYSTEM
 * ====================================================================
 */

/* Fluid Typography für bessere Mobile-Lesbarkeit */
.fm-heading-primary {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    line-height: 1.2;
    font-weight: 700;
}

.fm-heading-secondary {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.3;
    font-weight: 600;
}

.fm-heading-tertiary {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    line-height: 1.4;
    font-weight: 600;
}

.fm-text-large {
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.6;
}

.fm-text-body {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.6;
}

.fm-text-small {
    font-size: clamp(0.75rem, 1.25vw, 0.875rem);
    line-height: 1.5;
}

/* ====================================================================
 * MOBILE LAYOUT OPTIMIZATIONS
 * ====================================================================
 */

/* Zentrale Content-Wrapper für einheitliche Zentrierung */
.fm-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.fm-content-wrapper--wide {
    max-width: 1400px;
}

.fm-content-wrapper--narrow {
    max-width: 1000px;
}

@media (max-width: 991px) {
    .fm-content-wrapper {
        padding: 1.5rem 0.5rem;
    }
}

@media (max-width: 767px) {
    .fm-content-wrapper {
        padding: 1rem 0.5rem;
    }
}

/* Verbesserte Mobile Grid für Startseite */
.fm-mobile-grid {
    display: grid;
    gap: 1rem;
    /* Explizite Zentrierung für bessere Browserkonsistenz */
    justify-content: center;
    justify-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* Fallback für ältere Browser */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
}

@media (max-width: 576px) {
    .fm-mobile-grid {
        grid-template-columns: 1fr;
        /* Vergrößerte Breite für mobile Geräte */
        max-width: 500px;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .fm-mobile-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Vergrößerte Breite für Tablets */
        max-width: 800px;
    }
}

@media (min-width: 769px) {
    .fm-mobile-grid {
        grid-template-columns: repeat(3, 1fr);
        /* Vergrößerte Breite für Desktop */
        max-width: 1200px;
    }
}

/* Mobile-optimierte Cards */
.fm-mobile-card {
    min-height: 350px;
    transition: transform 0.2s ease;
    /* Flexbox Fallback für bessere Zentrierung */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /* Konsistente Größe */
    width: 100%;
    max-width: 100%;
}

@media (max-width: 768px) {
    .fm-mobile-card {
        min-height: 280px;
    }
    
    /* Reduzierte Hover-Effekte auf Touch-Geräten */
    .fm-mobile-card:hover {
        transform: none;
    }
}

/* Zusätzliche Flexbox-Unterstützung für Produktkacheln */
.fm-mobile-grid .fm-mobile-card {
    /* Flexbox-Eigenschaften für bessere Größenkonsistenz */
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    /* Zentrierte Ausrichtung */
    justify-self: center;
    align-self: stretch;
}

/* ====================================================================
 * TABLE MOBILE OPTIMIZATIONS
 * ====================================================================
 */

/* Mobile-optimierte Tabellen-Controls */
.fm-table-mobile-controls {
    padding: 0.5rem;
    margin: 0.5rem 0;
}

@media (max-width: 768px) {
    .fm-table-mobile-controls {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .fm-table-mobile-controls .fm-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ====================================================================
 * ARTICLE MOBILE LAYOUT
 * ====================================================================
 */

/* Mobile Ad-Placement Optimierung */
.fm-mobile-ad-container {
    margin: 1.5rem 0;
    text-align: center;
}

@media (max-width: 768px) {
    .fm-mobile-ad-container {
        margin: 1rem 0;
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Verhindere Layout-Brüche durch Ads */
    .fm-mobile-ad-container > * {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Mobile Content-Spacing */
.fm-mobile-content {
    padding: 1rem;
}

@media (max-width: 768px) {
    .fm-mobile-content {
        padding: 0.75rem;
    }
    
    .fm-mobile-content h1,
    .fm-mobile-content h2,
    .fm-mobile-content h3 {
        margin-bottom: 1rem;
    }
    
    .fm-mobile-content p {
        margin-bottom: 1.25rem;
    }
}

/* ====================================================================
 * ACCESSIBILITY ENHANCEMENTS FOR MOBILE
 * ====================================================================
 */

/* Verbesserter Focus für Touch-Navigation */
@media (max-width: 768px) {
    .fm-btn:focus-visible,
    .fm-touch-target:focus-visible {
        outline: 3px solid var(--fm-gold);
        outline-offset: 2px;
    }
}

/* Größere Link-Targets für bessere Touch-Zugänglichkeit */
.fm-mobile-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem;
}

@media (max-width: 768px) {
    .fm-mobile-link {
        min-height: 48px;
        padding: 0.75rem;
    }
}

/*
 * ====================================================================
 * FM-TABLE COMPONENT SYSTEM (PHASE 3.3)
 * ====================================================================
 * Responsive table system with mobile-stack functionality
 * Touch-optimized for all devices with WCAG AA compliance
 */

/* Base FM-Table Component */
.fm-table-wrapper {
    overflow-x: auto;
    border-radius: var(--fm-border-radius-lg);
    border: none;
    background: var(--fm-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: var(--fm-spacing-lg);
}

.fm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fm-font-size-sm);
    font-family: var(--fm-font-primary);
    margin: 0;
}

/* Table Header */
.fm-table thead {
    background: linear-gradient(135deg, var(--fm-bg-light) 0%, #f1f3f4 100%);
    position: relative;
}

.fm-table th {
    color: var(--fm-text-dark);
    font-family: var(--fm-font-display);
    font-weight: 600;
    font-size: var(--fm-font-size-sm);
    padding: var(--fm-spacing-md) var(--fm-spacing-lg);
    text-align: left;
    border-bottom: 2px solid var(--fm-gold);
    background: transparent;
    white-space: nowrap;
}

.fm-table th:first-child {
    border-top-left-radius: var(--fm-border-radius-lg);
}

.fm-table th:last-child {
    border-top-right-radius: var(--fm-border-radius-lg);
}

/* Table Body */
.fm-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--fm-border-light);
}

.fm-table tbody tr:hover {
    background: linear-gradient(135deg, rgba(182, 139, 71, 0.05) 0%, rgba(182, 139, 71, 0.08) 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(182, 139, 71, 0.15);
}

.fm-table tbody tr:last-child {
    border-bottom: none;
}

.fm-table td {
    padding: var(--fm-spacing-md) var(--fm-spacing-lg);
    vertical-align: middle;
    color: var(--fm-text-medium);
    line-height: 1.4;
}

/* Table Cell Alignments */
.fm-table .text-center {
    text-align: center;
}

.fm-table .text-end {
    text-align: right;
}

.fm-table .text-start {
    text-align: left;
}

/* ====================================================================
 * TABLE COUNTER SYSTEM
 * ====================================================================
 */

/* Centralized table counter for ranking/numbering */
.fm-table-counter {
    counter-reset: table-row;
}

.fm-table-counter .fm-rank-cell::before {
    counter-increment: table-row;
    content: counter(table-row);
    font-weight: bold;
    color: var(--fm-gold);
}

/* Override counter for manual positions */
.fm-table-counter .fm-rank-cell[data-position]::before {
    content: attr(data-position);
}

/* Variants for different color schemes */
.fm-table-counter--dark .fm-rank-cell::before {
    color: var(--fm-dark);
}

.fm-table-counter--light .fm-rank-cell::before {
    color: var(--fm-white);
}

/* ====================================================================
 * TABLE VARIANTS
 * ====================================================================
 */

/* Compact Table */
.fm-table--compact th,
.fm-table--compact td {
    padding: var(--fm-spacing-sm) var(--fm-spacing-md);
    font-size: var(--fm-font-size-xs);
}

/* Large Table */
.fm-table--large th,
.fm-table--large td {
    padding: var(--fm-spacing-lg) var(--fm-spacing-xl);
    font-size: var(--fm-font-size-base);
}

/* Striped Table */
.fm-table--striped tbody tr:nth-child(even) {
    background: rgba(248, 249, 250, 0.5);
}

.fm-table--striped tbody tr:nth-child(even):hover {
    background: linear-gradient(135deg, rgba(182, 139, 71, 0.05) 0%, rgba(182, 139, 71, 0.08) 100%);
}

/* Dark Table Variant */
.fm-table--dark {
    background: var(--fm-dark);
    color: var(--fm-white);
}

.fm-table--dark th {
    background: var(--fm-gray-dark);
    color: var(--fm-white);
    border-bottom-color: var(--fm-gold);
}

.fm-table--dark td {
    color: var(--fm-gray-light);
    border-bottom-color: var(--fm-gray-medium);
}

.fm-table--dark tbody tr:hover {
    background: rgba(182, 139, 71, 0.15);
}

/* ====================================================================
 * MOBILE TABLE SYSTEM (Mobile-Stack)
 * ====================================================================
 */

/* Mobile-Stack Table for small screens */
.fm-table--mobile-stack {
    display: table;
}

@media (max-width: 768px) {
    .fm-table--mobile-stack {
        display: block;
        border: none;
        background: transparent;
    }
    
    .fm-table--mobile-stack .fm-table-wrapper {
        background: transparent;
        border: none;
        box-shadow: none;
        overflow: visible;
    }
    
    .fm-table--mobile-stack thead {
        display: none;
    }
    
    .fm-table--mobile-stack tbody {
        display: block;
    }
    
    .fm-table--mobile-stack tr {
        display: block;
        background: var(--fm-white);
        border: 1px solid var(--fm-border-light);
        border-radius: var(--fm-border-radius-md);
        margin-bottom: var(--fm-spacing-md);
        padding: var(--fm-spacing-md);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transform: none;
    }
    
    .fm-table--mobile-stack tr:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .fm-table--mobile-stack td {
        display: block;
        text-align: left !important;
        padding: var(--fm-spacing-xs) 0;
        border: none;
        border-bottom: 1px solid var(--fm-border-light);
        position: relative;
        padding-left: 40%;
    }
    
    .fm-table--mobile-stack td:last-child {
        border-bottom: none;
    }
    
    .fm-table--mobile-stack td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: var(--fm-spacing-xs);
        font-weight: 600;
        font-family: var(--fm-font-display);
        font-size: var(--fm-font-size-xs);
        color: var(--fm-text-medium);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        width: 35%;
    }
}

/* ====================================================================
 * TABLE ACTIONS & BUTTONS
 * ====================================================================
 */

/* Table Action Buttons */
.fm-table-actions {
    display: flex;
    gap: var(--fm-spacing-xs);
    align-items: center;
    justify-content: flex-end;
}

.fm-table-edit-btn {
    min-width: 44px;
    min-height: 44px;
    padding: var(--fm-spacing-xs);
    border: 1px solid var(--fm-border-light);
    border-radius: var(--fm-border-radius-md);
    background: var(--fm-white);
    color: var(--fm-text-medium);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: var(--fm-font-size-sm);
}

.fm-table-edit-btn:hover {
    background: var(--fm-gold);
    color: var(--fm-white);
    border-color: var(--fm-gold);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(182, 139, 71, 0.3);
}

@media (max-width: 768px) {
    .fm-table-edit-btn {
        min-width: 48px;
        min-height: 48px;
        padding: var(--fm-spacing-sm);
    }
}

/* Table Badge/Status */
.fm-table-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--fm-spacing-xs) var(--fm-spacing-sm);
    border-radius: var(--fm-border-radius-sm);
    font-size: var(--fm-font-size-xs);
    font-weight: 600;
    font-family: var(--fm-font-display);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Average symbol (ø) styling for better visibility */
.fm-table td strong:contains('ø'),
.fm-table th:contains('ø') {
    font-size: 1.1em;
}

/* Specific styling for average values in tables */
.fm-table-average-symbol {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--fm-text-dark);
}

/* Guest count and distance styling */
.fm-table .distance {
    font-size: var(--fm-font-size-xs);
    color: var(--fm-text-light);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.fm-table .distance i {
    font-size: 0.9rem;
}

.fm-table-badge--success {
    background: rgba(25, 135, 84, 0.1);
    color: var(--fm-success);
}

.fm-table-badge--warning {
    background: rgba(255, 193, 7, 0.1);
    color: var(--fm-warning);
}

.fm-table-badge--danger {
    background: rgba(220, 53, 69, 0.1);
    color: var(--fm-danger);
}

.fm-table-badge--info {
    background: rgba(13, 202, 240, 0.1);
    color: var(--fm-info);
}

/* ====================================================================
 * Sticky Table Columns System
 * ====================================================================
 * Import der zentralen Sticky-Columns Funktionalität
 */