/* ============================================
   EUFerien.de - Haupt-Stylesheet
   ============================================ */

/* CSS Variables */
:root {
    /* Farben */
    --primary: #6d4c97;
    --primary-dark: #5a3d7d;
    --primary-light: #8863b3;
    --secondary: #e75655;
    --secondary-dark: #c73938;
    --secondary-light: #ff6f6e;
    
    /* Graustufen */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Kalender-Farben */
    --ferien-bg: #10b981;
    --ferien-border: #10b981;
    --ferien-text: #065f46;
    --feiertag-bg: #dc2626;
    --feiertag-border: #dc2626;
    --feiertag-text: #7f1d1d;
    --wochenende-bg: #e5e7eb;
    --wochenende-border: #e0e7ff;
    --today-bg: #ffffff;
    --today-border: #ff0000;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Courier New', monospace;
    
    /* Container */
    --container-max-width: 1280px;

    /* Hintergrund & Text Farben */
    --bg-light: var(--gray-50);
    --bg-white: #ffffff;
    --text-dark: var(--gray-800);
    --border-color: var(--gray-200);

    /* Gradienten */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);

    /* Transitions */
    --transition: all 0.3s ease;
}

/* ============================================
   Reset & Base Styles
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: var(--gray-800);
    background-color: var(--gray-50);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Container
   ============================================ */

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ============================================
   Header & Navigation
   ============================================ */

.site-header {
    background: white;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 1000;
    position: relative;
    overflow: visible;
}

.header-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}

.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
}

.main-nav {
    padding: var(--spacing-md) 0;
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
}

.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--primary);
    font-weight: 700;
    font-size: 1.75rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-text {
    letter-spacing: -0.5px;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
    z-index: 1100;
}

/* Mobile: Burger-Button anzeigen */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex !important;  /* ← Mobile: sichtbar machen */
    }
}

/* ============================================
   MOBILE NAVIGATION (768px und kleiner)
   ============================================ */

@media (max-width: 768px) {
    /* Page Title kleiner */
    .page-title {
        font-size: 1.5rem;
    }
    
    .calendar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    /* ===== MOBILE MENU START ===== */
    
    /* Header-Wrapper Anpassungen */
    .header-wrapper {
        position: relative;
        min-height: 60px;
    }
    
    /* Burger-Button sichtbar machen */
    .menu-toggle {
        display: flex !important;
        z-index: 1100;
        position: relative;
    }
    
    /* Burger-Icon Animation */
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
    
    /* Desktop Navigation ausblenden */
    .main-nav {
        display: none !important;
    }
    
    /* Mobile Navigation Container */
    .main-nav.mobile-active {
        display: flex !important;
        position: fixed;
        top: 68px;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        flex-direction: column;
        align-items: stretch;
        padding: var(--spacing-lg) var(--spacing-md);
        overflow-y: auto;
        z-index: 999;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        animation: slideDown 0.3s ease-out;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Navigation Items */
    .main-nav.mobile-active .nav-item,
    .main-nav.mobile-active .dropdown {
        width: 100%;
        border-bottom: 1px solid var(--gray-200);
    }
    
    /* Nav Links - mit Pfeil für Dropdowns */
    .main-nav.mobile-active .nav-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: var(--spacing-md);
        font-size: 1rem;
        cursor: pointer;
    }
    
    /* Pfeil-Icon für Dropdowns */
    .main-nav.mobile-active .dropdown > .nav-link::after,
    .main-nav.mobile-active .dropdown-sub > .sub-trigger::after {
        content: '›';
        font-size: 1.5rem;
        transition: transform 0.3s ease;
    }
    
    /* Pfeil drehen wenn offen */
    .main-nav.mobile-active .dropdown.open > .nav-link::after,
    .main-nav.mobile-active .dropdown-sub.open > .sub-trigger::after {
        transform: rotate(90deg);
    }
    
    /* Dropdown Menüs - STANDARDMÄSSIG VERSTECKT */
    .main-nav.mobile-active .dropdown-menu {
        position: static !important;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transform: none !important;
        box-shadow: none !important;
        background: var(--gray-50);
        margin: 0 0 0 var(--spacing-md);
        padding: 0;
        border-radius: 0;
        transition: all 0.3s ease;
    }
    
    /* Dropdown OFFEN */
    .main-nav.mobile-active .dropdown.open > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        max-height: 1000px;
        padding: var(--spacing-sm) 0;
    }
    
    /* Sub-Menüs - STANDARDMÄSSIG VERSTECKT */
    .main-nav.mobile-active .sub-menu {
        position: static !important;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transform: none !important;
        margin-left: var(--spacing-lg);
        box-shadow: none;
        background: var(--gray-100);
        padding: 0;
        transition: all 0.3s ease;
    }
    
    /* Sub-Menü OFFEN */
    .main-nav.mobile-active .dropdown-sub.open > .sub-menu {
        opacity: 1;
        visibility: visible;
        max-height: 500px;
        padding: var(--spacing-xs) 0;
    }
    
    /* Sub-Trigger als Button */
    .main-nav.mobile-active .sub-trigger {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }
    
    /* Dropdown Links */
    .main-nav.mobile-active .dropdown-menu a {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    /* ===== MOBILE MENU ENDE ===== */
    
    /* Andere Mobile Styles */
    .download-buttons {
        flex-direction: column;
    }
    
    .selector-group {
        min-width: 100%;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
}

    /* ===== MOBILE MENU ENDE ===== */



.menu-toggle span {
    width: 24px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.main-nav {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    color: var(--gray-700);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-link:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
    color: white;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100;
    max-height: none;           /* Keine Höhenbeschränkung */
    min-width: 200px;           /* Etwas breiter */
}

.nav-item:hover .dropdown-menu,
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--gray-700);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.dropdown-menu a:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
    color: white;
}

/* Breadcrumb */
.breadcrumb-wrapper {
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    padding: var(--spacing-sm) 0;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: 0.875rem;
    color: var(--gray-600);
}

.breadcrumb a {
    color: var(--primary);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* ============================================
   Main Content
   ============================================ */

main {
    min-height: 60vh;
}

.content-wrapper {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    gap: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
}

.main-content {
    grid-column: 2;
}

.sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

/* ============================================
   Page Header
   ============================================ */

.page-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg) 0;
    position: relative;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 2px;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.page-subtitle {
    font-size: 1rem;
    color: var(--gray-600);
}

/* ============================================
   Kalender-Selektoren (Jahr, Bundesland, Land)
   ============================================ */

.calendar-selector {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.selector-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 200px;
}

.selector-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
}

.selector-dropdown {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-800);
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.selector-dropdown:hover {
    border-color: var(--primary);
}

.selector-dropdown:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(109, 76, 151, 0.1);
}

/* ============================================
   Info Box
   ============================================ */

.info-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md);
    background: white;
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
}

.info-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: linear-gradient(135deg, rgba(109, 76, 151, 0.05) 0%, rgba(231, 86, 85, 0.05) 100%);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary);
}

.info-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-content strong {
    display: block;
    color: var(--primary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.info-content span {
    font-size: 0.95rem;
    color: var(--gray-800);
    font-weight: 500;
}

/* ============================================
   Year Navigation
   ============================================ */

.year-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.current-year {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    padding: var(--spacing-md) var(--spacing-lg);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* ============================================
   Buttons
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-nav {
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-nav:hover {
    background: var(--primary);
    color: white;
}

.btn-nav[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-download {
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-download:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-pdf {
    background: var(--secondary);
}

.btn-pdf:hover {
    background: var(--secondary-dark);
}

.btn-ics {
    background: var(--primary);
}

.btn-ics:hover {
    background: var(--primary-dark);
}

.btn-png {
    background: #10b981;
}

.btn-png:hover {
    background: #059669;
}

/* ============================================
   Download Section
   ============================================ */

.download-section {
    background: white;
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
}

.download-section h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-md);
    font-size: 1.25rem;
}

.download-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* ============================================
   Ferien Overview
   ============================================ */

.ferien-overview {
    background: white;
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
}

.ferien-overview h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-md);
    font-size: 1.25rem;
}

.ferien-table-wrapper {
    overflow-x: auto;
}

.ferien-table {
    width: 100%;
    border-collapse: collapse;
}

.ferien-table thead {
    background: var(--primary);
    color: white;
}

.ferien-table th,
.ferien-table td {
    padding: var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.ferien-table tbody tr:hover {
    background: var(--gray-50);
}

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

/* ============================================
   Calendar
   ============================================ */

.year-calendar {
    background: white;
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
}

.year-calendar h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-md);
    font-size: 1.25rem;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.calendar-month {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.month-header {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.month-name {
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 700;
}

.month-table {
    width: 100%;
    border-collapse: collapse;
}

.month-table th {
    padding: var(--spacing-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-600);
    border-bottom: 2px solid var(--gray-300);
}

.month-table .week-number {
    background: var(--gray-200);
    color: var(--gray-600);
    font-size: 0.7rem;
}

.month-table .weekend {
    color: var(--gray-800);
    font-weight: 600;
}

.month-table td {
    padding: var(--spacing-sm);
    text-align: center;
    font-size: 0.875rem;
    border: 1px solid var(--gray-200);
    position: relative;
}

.month-table td.empty {
    background: #f3f4f6;
    border: 1px solid var(--gray-200);
}

.month-table td.weekend {
    background: #f3f4f6;
}

.month-table td.ferien {
    background: #d1fae5;
    color: #065f46;
    font-weight: 600;
}

.month-table td.feiertag {
    background: transparent;
    color: #dc2626;
    font-weight: 700;
}

.month-table td.today {
    background: var(--today-bg);
    border: 2px solid var(--today-border);
    font-weight: 700;
}

.month-table td.weekend.ferien {
    background: #a7f3d0;
    color: #065f46;
}
.month-table td.ferien.feiertag {
    background: #d1fae5;
    color: #dc2626;
    font-weight: 700;
}

.month-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--gray-300);
    font-size: 0.7rem;
}

.calendar-legend-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-300);
}

.legend-color.ferien {
    background: var(--ferien-bg);
}

.legend-color.feiertag {
    background: var(--feiertag-bg);
}

.legend-color.wochenende {
    background: var(--wochenende-bg);
}

/* Ferien + Feiertag kombiniert */
.legend-color.ferien-feiertag {
    background: #d1fae5;
    color: #dc2626;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
}

.legend-color.ferien-feiertag::after {
    content: '25';
}
/* Hover-Effekt für Kalendertag - bewahrt Ferien-Farbe */
.month-table td:hover:not(.ferien) {
    background-color: rgba(109, 76, 151, 0.1) !important;
    cursor: pointer;
    transform: scale(1.05);
    transition: all 0.2s ease;
    z-index: 10;
    position: relative;
}

/* Hover-Effekt für ganze Woche - bewahrt Ferien-Farbe */
.month-table tr:hover td:not(.ferien) {
    background-color: rgba(109, 76, 151, 0.05);
    transition: all 0.2s ease;
}

/* Ferien-Tage: Nur leichter Hover-Effekt ohne Farb-Änderung */
.month-table td.ferien:hover {
    cursor: pointer;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    z-index: 10;
    position: relative;
}

/* Wochen-Hover für Ferien: Nur leichter Schatten */
.month-table tr:hover td.ferien {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Kombiniert: Tag-Hover überschreibt Wochen-Hover */
.month-table tr:hover td:hover:not(.ferien) {
    background-color: rgba(109, 76, 151, 0.1) !important;
}
/* ============================================
   Feiertage Section
   ============================================ */

.feiertage-section {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-2xl);
}

.feiertage-section h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-lg);
    font-size: 1.5rem;
}

.feiertage-section h3 {
    color: var(--secondary);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    font-size: 1.25rem;
}

.feiertage-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.feiertage-list li {
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-left: 4px solid var(--secondary);
    border-radius: var(--radius-md);
}

.feiertage-list strong {
    display: block;
    color: var(--primary);
    margin-bottom: var(--spacing-xs);
}

/* ============================================
   Info Cards
   ============================================ */

.additional-info,
.related-links,
.seo-content {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);  /* ← VON var(--spacing-2xl) zu var(--spacing-xl) */
}

.additional-info h2,
.related-links h2,
.seo-content h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-lg);
    font-size: 1.5rem;
}

.info-grid,
.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.info-card,
.link-group {
    padding: var(--spacing-lg);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border-top: 4px solid var(--primary);
}

.info-card h3,
.link-group h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-md);
    font-size: 1.125rem;
}

.info-card p,
.link-group p {
    line-height: 1.6;
    color: var(--gray-700);
}

.link-group ul {
    list-style: none;
}

.link-group li {
    margin-bottom: var(--spacing-sm);
}

.link-group a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.link-group a:hover {
    color: var(--secondary);
    text-decoration: underline;
}

/* SEO Content */
.seo-content h3 {
    color: var(--secondary);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    font-size: 1.125rem;
}

.seo-content p {
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
    color: var(--gray-700);
}
/* ============================================
   Footer
   ============================================ */

.site-footer {
    background: var(--gray-900);
    color: var(--gray-300);
    margin-top: var(--spacing-lg);
    padding: var(--spacing-xl) 0 var(--spacing-lg);
    position: relative;
    overflow: hidden;
}

.footer-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.footer-col h3 {
    color: white;
    margin-bottom: var(--spacing-md);
    font-size: 1.125rem;
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: var(--spacing-sm);
}

.footer-col a {
    color: var(--gray-300);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-col a:hover {
    color: var(--primary-light);
}

.footer-about p {
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.footer-keywords {
    font-size: 0.875rem;
    color: var(--gray-400);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--gray-700);
    font-size: 0.875rem;
}

.copyright,
.footer-meta {
    color: var(--gray-400);
}

/* ============================================
   AdSense
   ============================================ */

.ad-container {
    margin: var(--spacing-xl) 0;
    text-align: center;
}

.ad-sidebar .adsbygoogle {
    min-height: 600px;
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 1024px) {
    .calendar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .page-title {
        font-size: 1.75rem;
    }
}


@media (max-width: 480px) {
    :root {
        font-size: 14px;
    }
    
    .page-title {
        font-size: 1.35rem;
    }
    
    .info-box {
        grid-template-columns: 1fr;
    }
    
    /* KALENDER: 2 Monate pro Reihe, NICHT abgeschnitten */
    .calendar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.25rem;
    }
    
    /* Container mehr Platz */
    .container {
        padding: 0 0.25rem;
    }
    
    .year-calendar {
        padding: 0.5rem;
    }
    
    /* Kalender kompakter */
    .calendar-month {
        padding: 0.25rem;
        min-width: 0;
    }
    
    .month-name {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }
    
    /* Tabelle MUSS im Container bleiben */
    .month-table {
        width: 100%;
        table-layout: fixed;
    }
    
    .month-table th,
    .month-table td {
        padding: 0;
        font-size: 0.55rem;
        min-width: 0;
    }
    
    .month-table .week-number {
        font-size: 0.45rem;
        width: 12%;
        padding: 0 1px;
    }
    
    .month-table thead th {
        font-size: 0.5rem;
        padding: 1px 0;
    }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .site-header,
    .site-footer,
    .ad-container,
    .download-section,
    .related-links {
        display: none;
    }
    
    .content-wrapper {
        grid-template-columns: 1fr;
    }
    
    .calendar-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* Desktop: Länder Overview Section ausblenden */
.overview-section.countries-overview {
    display: none;
}

@media (max-width: 768px) {
    .overview-section.countries-overview {
        display: block;
    }
}
/* Overview Sections */
.overview-section {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.overview-section h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-lg);
    font-size: 1.5rem;
}

.region-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

/* Mobile Country List Grid wird per Mobile CSS eingeschaltet */
.mobile-country-list .region-grid {
    display: none; /* Desktop: versteckt */
}

.region-card {
    padding: var(--spacing-lg);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 2px solid var(--gray-200);
    text-decoration: none;
    color: var(--gray-800);
    transition: all 0.3s ease;
}

.region-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.region-card h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
    font-size: 1.125rem;
}

.quicklinks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
}

/* Quicklinks Section */
.quicklinks-section {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.quicklinks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
}

.quicklink-card {
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
}

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

.quicklink-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--spacing-md);
}

.quicklink-card h3 {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-sm);
}

.quicklink-card p {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Bundesländer Section */
.bundeslaender-section {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.bundeslaender-section h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-lg);
    font-size: 1.5rem;
}

.bundeslaender-table {
    overflow-x: auto;
}

.bundeslaender-table table {
    width: 100%;
    border-collapse: collapse;
}

.bundeslaender-table thead {
    background: var(--primary);
    color: white;
}

.bundeslaender-table th {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: 600;
}

.bundeslaender-table tbody tr {
    border-bottom: 1px solid var(--gray-200);
    transition: background 0.2s ease;
}

.bundeslaender-table tbody tr:hover {
    background: var(--gray-50);
}

.bl-info-cell {
    padding: var(--spacing-lg);
}

.bl-name {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
}

.bl-description {
    color: var(--gray-600);
    font-size: 0.9rem;
    line-height: 1.6;
}

.bl-link-cell {
    padding: var(--spacing-lg);
    text-align: right;
    width: 200px;
}

.bl-kalender-btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: white;
    color: var(--primary);
    text-decoration: none;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    background-image: 
        linear-gradient(white, white),
        linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.bl-kalender-btn:hover {
    background-image: 
        linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%),
        linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
    .bl-link-cell {
        width: auto;
    }
    
    .bl-kalender-btn {
        display: block;
        text-align: center;
    }
}

/* Year Selector Section */
.year-selector-section {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.year-selector-section h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-lg);
    font-size: 1.5rem;
}

.year-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: center;
}

.year-btn {
    padding: var(--spacing-md) var(--spacing-xl);
    background: white;
    color: var(--primary);
    border: 2px solid transparent;
    background-image: 
        linear-gradient(white, white),
        linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

.year-btn:hover,
.year-btn.active {
    background-image: 
        linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%),
        linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Ferien Types Overview */
.ferien-types-overview {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.ferien-types-overview h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-lg);
    font-size: 1.5rem;
}

.ferien-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.ferien-type-card {
    padding: var(--spacing-lg);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 2px solid var(--gray-200);
    transition: all 0.3s ease;
}

.ferien-type-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.ferien-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--spacing-md);
}

.ferien-type-card h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
    font-size: 1.125rem;
}

.ferien-type-card p {
    color: var(--gray-600);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Feiertage Info */
.feiertage-info {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.feiertage-info h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-lg);
    font-size: 1.5rem;
}

.feiertage-list-simple {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    list-style: none;
}

.feiertage-list-simple li {
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-left: 4px solid var(--secondary);
    border-radius: var(--radius-md);
    font-weight: 500;
}



/* Feriendichte Info */
.feriendichte-info {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.feriendichte-info h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-lg);
    font-size: 1.5rem;
}
/* Filter Selector Section */
.filter-selector-section {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.filter-selectors {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    flex-wrap: wrap;
}

.filter-selectors .selector-group {
    min-width: 200px;
}
/* Feiertage Badges */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.badge-bundesweit {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
}

.badge-regional {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
}



/* Feiertage Tabelle - nur äußerer Border */
.feiertage-table-wrapper {
    overflow-x: auto;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-lg);
    background: white;
}

.feiertage-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.feiertage-table thead {
    background: linear-gradient(135deg, #6d4c97, #e75655);
}

.feiertage-table th {
    background: transparent;
    color: white;
    padding: var(--spacing-md);
    text-align: left;
    font-weight: 600;
}

.feiertage-table td {
    padding: var(--spacing-md);
    border-bottom: 1px solid #f3f4f6;
}

.feiertage-table tr:last-child td {
    border-bottom: none;
}

.feiertage-table tr:hover {
    background: #f9fafb;
}

/* Feiertage Info Section */
.feiertage-info-section {
    margin: var(--spacing-xl) 0;
}

.feiertage-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.info-card {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.info-card-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
}

.info-card h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
    font-size: 1.25rem;
}

.info-card p {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Feiertage Tabelle mit 5 Spalten */
.feiertage-table th:nth-child(5),
.feiertage-table td:nth-child(5) {
    min-width: 150px;
}

@media (max-width: 768px) {
    .feiertage-info-grid {
        grid-template-columns: 1fr;
    }
}

/* Bundesland-Legende unter Tabelle - durchgehender Border mit Abstand */
.bundesland-legende {
    margin: var(--spacing-xl) var(--spacing-md) var(--spacing-md) var(--spacing-md);
    padding: var(--spacing-lg);
    background: #fafbfc;
    border-radius: var(--radius-md);
    border: 1px solid #e5e7eb;
}

.bundesland-legende h4 {
    color: var(--primary);
    margin: 0 0 var(--spacing-md) 0;
    font-size: 1rem;
    font-weight: 600;
}

.legende-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-sm) var(--spacing-md);
}

.legende-item {
    font-size: 0.9rem;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
}

.legende-item strong {
    display: inline-block;
    min-width: 32px;
    padding: 2px 6px;
    background: white;
    color: var(--primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-align: center;
    border: 1px solid #e5e7eb;
}

@media (max-width: 768px) {
    .legende-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}


/* Feriendichte Tabelle */
.feriendichte-table-wrapper {
    overflow-x: auto;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-lg);
    background: white;
}

.feriendichte-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 0.9rem;
}

.feriendichte-table thead {
    background: linear-gradient(135deg, #6d4c97, #e75655);
}

.feriendichte-table th {
    background: transparent;
    color: white;
    padding: var(--spacing-sm) var(--spacing-xs);
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
}

.feriendichte-table th:first-child {
    text-align: left;
    min-width: 180px;
}

.feriendichte-table td {
    padding: var(--spacing-sm) var(--spacing-xs);
    border-bottom: 1px solid #f3f4f6;
    text-align: center;
}

.feriendichte-table td:first-child {
    text-align: left;
    font-weight: 500;
}

.feriendichte-table tr:last-child td {
    border-bottom: none;
}

.feriendichte-table tr:hover {
    background: #f9fafb;
}

.ferien-cell {
    color: #059669;
    font-weight: 500;
}

.no-ferien {
    color: #9ca3af;
}

.total-cell {
    background: #f3f4f6 !important;
    color: var(--primary);
    font-weight: 600;
}

@media (max-width: 768px) {
    .feriendichte-table {
        font-size: 0.75rem;
    }
    
    .feriendichte-table th,
    .feriendichte-table td {
        padding: var(--spacing-xs);
    }
}

/* ============================================
   Feriendichte Kalender Farben
   ============================================ */

/* Feriendichte Legende - Color Boxes */
.color-box {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-300);
}

.color-box.dichte-0 { 
    background: #10b981; /* Grün */
}

.color-box.dichte-3 { 
    background: #84cc16; /* Hellgrün */
}

.color-box.dichte-6 { 
    background: #fbbf24; /* Gelb */
}

.color-box.dichte-10 { 
    background: #f97316; /* Orange */
}

.color-box.dichte-14 { 
    background: #ef4444; /* Rot */
}

/* Feriendichte Legende Container */
.feriendichte-legende {
    background: white;
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
}

.feriendichte-legende h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-md);
    font-size: 1.125rem;
}

.legende-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    justify-content: center;
}

.legende-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.95rem;
    color: var(--gray-700);
}

/* Feriendichte Farbklassen für Kalender-Tage */
.month-table td.dichte-0 {
    background: #d1fae5 !important;
    color: #065f46;
    font-weight: 600;
}

.month-table td.dichte-3 {
    background: #fef08a !important;
    color: #713f12;
    font-weight: 600;
}

.month-table td.dichte-6 {
    background: #fed7aa !important;
    color: #9a3412;
    font-weight: 600;
}

.month-table td.dichte-10 {
    background: #fecaca !important;
    color: #7f1d1d;
    font-weight: 700;
}

.month-table td.dichte-14 {
    background: #fca5a5 !important;
    color: #7f1d1d;
    font-weight: 700;
}

/* Weekend + Feriendichte Kombination */
.month-table td.weekend.dichte-0,
.month-table td.weekend.dichte-3,
.month-table td.weekend.dichte-6,
.month-table td.weekend.dichte-10,
.month-table td.weekend.dichte-14 {
    opacity: 0.85;
}

/* Today Marker bleibt sichtbar */
.month-table td.today {
    border: 2px solid var(--today-border) !important;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.3) !important;
}

/* Feriendichte Info Section */
.feriendichte-info-section {
    margin: var(--spacing-xl) 0;
}

.feriendichte-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

/* Sub-Menü für verschachtelte Dropdowns */
.dropdown-sub {
    position: relative;
}

.sub-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sub-menu {
    position: absolute;
    left: 100%;
    top: 0;
    background: white;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    z-index: 200;
}

.dropdown-sub:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.sub-menu a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--gray-700);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.sub-menu a:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
    color: white;
}

/* Mobile: Sub-Menü unter Parent */
@media (max-width: 768px) {
    .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        margin-left: var(--spacing-md);
        box-shadow: none;
        background: var(--gray-100);
    }
}

/* Ferienarten Cards - anklickbar */
.ferien-types-overview {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.ferien-types-overview h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-lg);
    font-size: 1.5rem;
    text-align: center;
}

.ferien-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
}

.ferien-type-card {
    padding: var(--spacing-xl);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 2px solid var(--gray-200);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.ferien-type-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    background: white;
}

.ferien-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--spacing-md);
}

.ferien-type-card h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
    font-size: 1.125rem;
}

.ferien-type-card p {
    color: var(--gray-600);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .ferien-types-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    
    .ferien-icon {
        font-size: 2.5rem;
    }
}

/* ============================================
   Download Configurator
   ============================================ */

.download-configurator {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.configurator-selectors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

/* ============================================
   Download Preview Section
   ============================================ */

.download-preview-section {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.download-preview-section h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-xl);
    font-size: 1.5rem;
    text-align: center;
}

.download-formats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
}

.format-card {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 2px solid var(--gray-200);
    transition: all 0.3s ease;
}

.format-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.format-preview {
    position: relative;
    background: white;
    padding: var(--spacing-lg);
    border-bottom: 2px solid var(--gray-200);
}

.preview-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.format-label {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
}

.format-info {
    padding: var(--spacing-lg);
}

.format-info h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
    font-size: 1.25rem;
}

.format-info p {
    color: var(--gray-600);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

.download-buttons-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    color: white;
}

.btn-download:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.btn-download.btn-png {
    background: #10b981;
}

.btn-download.btn-png:hover {
    background: #059669;
}

.btn-download.btn-pdf {
    background: var(--secondary);
}

.btn-download.btn-pdf:hover {
    background: var(--secondary-dark);
}

.btn-download.btn-ics {
    background: var(--primary);
}

.btn-download.btn-ics:hover {
    background: var(--primary-dark);
}

.btn-download svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   Download Info Section
   ============================================ */

.download-info-section {
    margin: var(--spacing-xl) 0;
}

.info-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

/* Responsive */
@media (max-width: 768px) {
    .download-formats-grid {
        grid-template-columns: 1fr;
    }
    
    .configurator-selectors {
        grid-template-columns: 1fr;
    }
}

/* =====================================
   LAND-FAKTEN SECTION
   ===================================== */

.land-fakten {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, #6d4c97 0%, #e75655 100%);
    border-radius: 12px;
    color: white;
}

.land-fakten h2 {
    color: white;
    margin-bottom: 1.5rem;
    text-align: center;
}

.fakten-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.fakt-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.fakt-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.fakt-item strong {
    color: rgba(255, 255, 255, 0.9);
    margin-right: 0.5rem;
    white-space: nowrap;
}

/* Responsive: 1 Spalte auf Mobile */
@media (max-width: 768px) {
    .fakten-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   COUNTRY SLIDER (Länder-Slideshow) - SMOOTH INFINITE LOOP
   ═══════════════════════════════════════════════════════════════════ */
.country-slider-section {
    padding: 3rem 0;
    background: var(--bg-light);
}

.country-slider-section h2 {
    font-size: 1.75rem;
    margin-bottom: 2rem;
    text-align: center;
    color: var(--text-dark);
}

.country-slider {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    max-width: 100%;
    padding: 0 60px;
}

.country-slides {
    display: flex;
    gap: 0;
    will-change: transform;
}

.country-slide {
    flex: 0 0 auto;
    width: 200px;
    padding: 0.75rem;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.country-slide img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 2px solid var(--border-color);
}

.country-slide span {
    display: block;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-dark);
    transition: var(--transition);
}

.country-slide:hover {
    transform: scale(1.05);
}

.country-slide:hover img {
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.country-slide:hover span {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gradient-primary);
    color: var(--bg-white);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    border: none;
    user-select: none;
}

.slider-btn:hover {
    background: var(--gradient-secondary);
    transform: translateY(-50%) scale(1.1);
}

.slider-btn:active {
    transform: translateY(-50%) scale(1.15);
    box-shadow: var(--shadow-lg);
}

.slider-prev {
    left: 0;
}

.slider-next {
    right: 0;
}

/* Visuelles Feedback beim Halten */
.slider-btn::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: var(--transition);
}

.slider-btn:active::after {
    border-color: var(--secondary);
    animation: pulse 0.6s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE ANPASSUNGEN FÜR COUNTRY SLIDER
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .country-slider-section h2 {
        font-size: 1.5rem;
    }
    
    .country-slider {
        padding: 0 50px;
    }
    
    .country-slide {
        width: 160px;
    }
    
    .country-slide img {
        height: 100px;
    }
    
    .country-slide span {
        font-size: 0.875rem;
    }
    
    .slider-btn {
        width: 38px;
        height: 38px;
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .country-slider {
        padding: 0 45px;
    }
    
    .country-slide {
        width: 140px;
    }
    
    .country-slide img {
        height: 90px;
    }
    
    .country-slide span {
        font-size: 0.8125rem;
    }
    
    .slider-btn {
        width: 35px;
        height: 35px;
        font-size: 1.3rem;
    }
}



/* ============================================
   HOMEPAGE SPEZIFISCHE STYLES
   ============================================ */

/* Hero Section */
.hero-home {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    padding: 4rem 2rem;
    text-align: center;
    color: white;
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-2xl);
    box-shadow: var(--shadow-lg);
}

.hero-home h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto 2rem;
    opacity: 0.95;
}



/* Alternative: Minimalistisch & Modern */
.current-time {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.current-time:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.3);
}

.time-icon {
    font-size: 1.25rem;
    opacity: 0.9;
}

#currentTime {
    font-size: 0.95rem;
    font-weight: 500;
    color: white;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums; /* Monospace für Zahlen */
}




/* Card Link */
.card-link {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.card-link:hover {
    color: var(--secondary);
    transform: translateX(4px);
}

/* Section Intro */
.section-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 2rem;
    color: var(--gray-600);
    line-height: 1.6;
}

/* Beliebte Suchanfragen */
.popular-searches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.search-tag {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--gray-100);
    color: var(--gray-700);
    text-decoration: none;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    transition: var(--transition);
    border: 1px solid var(--gray-200);
}

.search-tag:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* SEO Content: nur den Text begrenzen, nicht die ganze Section */
.seo-content { 
  max-width: none;
  margin: 0;
}

.seo-content .seo-text {
  max-width: 900px;
  margin: 0 auto;
}


.seo-text h3 {
    color: var(--primary);
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.seo-text p {
    margin-bottom: 1.25rem;
}

.seo-text strong {
    color: var(--gray-800);
    font-weight: 600;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero-home {
        padding: 3rem 1.5rem;
    }
    
    .hero-home h1 {
        font-size: 1.75rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .current-time {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 480px) {
    .hero-home h1 {
        font-size: 1.5rem;
    }
    
    .search-tag {
        font-size: 0.8125rem;
        padding: 0.4rem 0.75rem;
    }
}

.mondphasen-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
}

.mondphase-icon {
    font-size: 0.65rem; /* Sehr klein */
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* Kein Hintergrund mehr */
    padding: 2px;
    transition: all 0.2s ease;
}

.mondphase-icon:hover {
    transform: scale(2);
    z-index: 100;
}

.mondphase-icon.neumond {
    background: transparent; /* Entfernt */
}

.mondphase-icon.vollmond {
    background: transparent; /* Entfernt */
}

.mondphase-icon.erstes-viertel {
    background: transparent; /* Entfernt */
}

.mondphase-icon.letztes-viertel {
    background: transparent; /* Entfernt */
}

/* Zeige Icon-Text bei Hover */
.mondphase-icon:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    margin-bottom: 4px;
}

.month-table td {
    position: relative;
    min-height: 55px;
    height: 55px;
    padding: 0.4rem;
}

/* ============================================
   LEGAL SEITEN (Datenschutz, Impressum, Über Uns)
   ============================================ */
.legal-content {
    max-width: 900px;
    margin: 0 auto;
}

.legal-section {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--gray-200);
}

.legal-section:last-child {
    border-bottom: none;
}

.legal-section h2 {
    color: var(--primary);
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    margin-top: 2rem;
}

.legal-section h3 {
    color: var(--gray-800);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.legal-section h4 {
    color: var(--gray-700);
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    margin-top: 1rem;
}

.legal-section p {
    line-height: 1.8;
    margin-bottom: 1rem;
    color: var(--gray-700);
}

.legal-section ul,
.legal-section ol {
    margin: 1rem 0 1rem 2rem;
    line-height: 1.8;
}

.legal-section li {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
}

.legal-section a {
    color: var(--primary);
    text-decoration: underline;
}

.legal-section a:hover {
    color: var(--secondary);
}

.legal-section strong {
    color: var(--gray-900);
    font-weight: 600;
}



/* Desktop: Mobile Länder-Liste ausblenden */
.mobile-country-list {
    display: none;
}

/* Mobile: Slider ausblenden, Liste anzeigen */
@media (max-width: 768px) {
    /* Slider verstecken */
    .country-slider-section {
        display: none;
    }
    
    /* Mobile Länder-Liste anzeigen */
    .mobile-country-list {
        display: block;
    }
    
    /* Region-Grid für Mobile aktivieren */
    .mobile-country-list .region-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .mobile-country-list .region-card {
        padding: var(--spacing-sm);
        font-size: 0.85rem;
    }
    
    .mobile-country-list .region-card h3 {
        font-size: 0.95rem;
    }
}

/* Mobile: Alle Tabellen kompakter */
@media (max-width: 768px) {
    /* Ferien-Tabelle */
    .ferien-table th,
    .ferien-table td {
        padding: var(--spacing-xs);
        font-size: 0.75rem;
    }
    
    /* Feiertage-Tabelle */
    .feiertage-table th,
    .feiertage-table td {
        padding: var(--spacing-xs);
        font-size: 0.75rem;
    }
    
    /* Bundesländer-Tabelle */
    .bundeslaender-table th,
    .bundeslaender-table td {
        padding: var(--spacing-xs);
        font-size: 0.75rem;
    }
    
    .bl-name {
        font-size: 0.95rem;
    }
    
    .bl-description {
        font-size: 0.75rem;
    }
    
    .bl-kalender-btn {
        font-size: 0.75rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    /* Tabellen horizontal scrollen wenn zu breit */
    .ferien-table-wrapper,
    .feiertage-table-wrapper,
    .bundeslaender-table,
    .feriendichte-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Info-Boxen kompakter */
    .info-box {
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }
    
    .info-item {
        padding: var(--spacing-sm);
        font-size: 0.8rem;
    }
    
    .info-icon {
        font-size: 1.2rem;
    }
}

    /* Kalender ansicht am Handy anpassen starts */


@media (max-width: 480px) {
  .month-table td {
      height: 32px !important;
      min-height: 28px !important;
      padding: 0 !important;
  }
}
    /* Kalender ansicht am Handy anpassen Ends */
/* ============================================
   DOWNLOAD SEITEN
   ============================================ */

/* Download Hero */
.download-hero {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
}

.download-hero h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.download-hero .lead {
    font-size: 1.125rem;
    opacity: 0.95;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Download Selector */
.download-selector {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.selector-container {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    flex-wrap: wrap;
}

/* Download Options */
.download-options {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.download-options h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-xl);
    font-size: 1.75rem;
    text-align: center;
}

.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
}

.download-card {
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    transition: all 0.3s ease;
}

.download-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    background: white;
}

.download-card h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-md);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.download-card p {
    color: var(--gray-600);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

.download-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.download-buttons .btn {
    width: 100%;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-lg);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    color: white;
}

.download-icon {
    font-size: 1.2em;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

.btn-primary:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-lg);
}

.download-note {
    font-size: 0.875rem;
    color: var(--gray-500);
    font-style: italic;
    margin-top: var(--spacing-sm);
    text-align: center;
}

/* Download Preview */
.download-preview {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.download-preview h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-lg);
    font-size: 1.5rem;
    text-align: center;
}

.preview-container {
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--gray-50);
    border-radius: var(--radius-md);
}

.calendar-preview {
    max-width: 100%;
    height: auto;
    border: 3px solid var(--gray-300);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    transition: all 0.3s ease;
}

.calendar-preview:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Download Info */
.download-info {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.download-info h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-xl);
    font-size: 1.75rem;
    text-align: center;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.info-item {
    padding: var(--spacing-lg);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary);
    transition: all 0.3s ease;
}

.info-item:hover {
    background: white;
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.info-item h4 {
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.info-item p {
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* Download Features */
.download-features {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.download-features h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-xl);
    font-size: 1.75rem;
    text-align: center;
}

.features-list {
    display: grid;
    gap: var(--spacing-lg);
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.feature-item:hover {
    background: white;
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.feature-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    border-radius: 50%;
}

.feature-content {
    flex: 1;
}

.feature-content h4 {
    color: var(--primary);
    margin-bottom: var(--spacing-xs);
    font-size: 1.125rem;
}

.feature-content p {
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* ============================================
   RESPONSIVE: DOWNLOAD SEITEN
   ============================================ */

@media (max-width: 768px) {
    .download-hero {
        padding: 2rem 1rem;
    }
    
    .download-hero h1 {
        font-size: 1.5rem;
    }
    
    .download-hero .lead {
        font-size: 1rem;
    }
    
    .download-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .selector-container {
        flex-direction: column;
    }
    
    .selector-group {
        width: 100%;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .features-list {
        gap: var(--spacing-md);
    }
    
    .feature-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--spacing-md);
    }
    
    .feature-icon {
        width: 50px;
        height: 50px;
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .download-hero h1 {
        font-size: 1.35rem;
    }
    
    .download-card {
        padding: var(--spacing-lg);
    }
    
    .download-card h3 {
        font-size: 1.25rem;
    }
    
    .download-buttons .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.875rem;
    }
}

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

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

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

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

/* Display */
.d-flex {
    display: flex;
}

.d-grid {
    display: grid;
}

.d-none {
    display: none;
}

.d-block {
    display: block;
}

/* Spacing Helpers */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

/* Gap Helpers */
.gap-1 { gap: var(--spacing-xs); }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing-md); }
.gap-4 { gap: var(--spacing-lg); }
.gap-5 { gap: var(--spacing-xl); }


/* ═══════════════════════════════════════════════════════════════
   FORMAT TABS & PREVIEW SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* Format Tabs Container */
.format-tabs {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-bottom: var(--spacing-xl);
    border-bottom: 2px solid var(--gray-200);
    padding-bottom: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Individual Tab Button */
.format-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background: white;
    border: 2px solid var(--gray-200);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 1rem;
    color: var(--gray-700);
    position: relative;
    bottom: -2px;
}

.format-tab:hover {
    background: var(--gray-50);
    border-color: var(--primary);
    color: var(--primary);
}

.format-tab.active {
    background: white;
    border-color: var(--primary);
    border-bottom: 2px solid white;
    color: var(--primary);
    z-index: 10;
}

.format-tab .tab-icon {
    font-size: 1.25rem;
}

.format-tab .tab-text {
    white-space: nowrap;
}

/* Format Content Wrapper */
.format-content-wrapper {
    position: relative;
    min-height: 400px;
}

/* Individual Format Content */
.format-content {
    display: none;
    opacity: 0;
    animation: fadeOut 0.3s ease;
}

.format-content.active {
    display: block;
    opacity: 1;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* Format Display Layout */
.format-display {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

/* Format Preview (Left Side) */
.format-preview-large {
    position: relative;
    background: white;
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 2px solid var(--gray-200);
    transition: all 0.3s ease;
}

.format-preview-large:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.preview-image-large {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: all 0.3s ease;
}

.preview-image-large:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

/* Zoom Hint Overlay */
.preview-zoom-hint {
    position: absolute;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.format-preview-large:hover .preview-zoom-hint {
    opacity: 1;
}

.preview-zoom-hint svg {
    width: 20px;
    height: 20px;
}

/* Format Info (Right Side) */
.format-info-large {
    padding: var(--spacing-lg);
}

.format-info-large h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-md);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.format-info-large p {
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: var(--spacing-xl);
    font-size: 1rem;
}

/* Download Buttons Group */
.download-buttons-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.download-buttons-group .btn-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.download-buttons-group .btn-download:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-lg);
}

.download-buttons-group .btn-download svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE LIGHTBOX
   ═══════════════════════════════════════════════════════════════ */

.image-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-lightbox.active {
    display: flex;
    opacity: 1;
}

/* Lightbox Overlay */
.lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    cursor: pointer;
}

/* Lightbox Content Container */
.lightbox-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    z-index: 10;
}

/* Lightbox Image */
.lightbox-image {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Lightbox Close Button */
.lightbox-close {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.9);
    color: var(--gray-800);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 20;
    box-shadow: var(--shadow-xl);
}

.lightbox-close:hover {
    background: white;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.lightbox-close svg {
    width: 24px;
    height: 24px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE: FORMAT TABS & LIGHTBOX
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .format-display {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .format-info-large {
        padding: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    /* Format Tabs kompakter */
    .format-tabs {
        gap: var(--spacing-sm);
    }
    
    .format-tab {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.875rem;
    }
    
    .format-tab .tab-icon {
        font-size: 1rem;
    }
    
    .format-tab .tab-text {
        display: none; /* Text ausblenden, nur Icon */
    }
    
    /* Format Display auf eine Spalte */
    .format-display {
        grid-template-columns: 1fr;
    }
    
    .format-preview-large {
        padding: var(--spacing-md);
    }
    
    .format-info-large h3 {
        font-size: 1.25rem;
    }
    
    .format-info-large p {
        font-size: 0.9rem;
    }
    
    /* Lightbox auf Mobile anpassen */
    .lightbox-content {
        padding: var(--spacing-md);
    }
    
    .lightbox-image {
        max-width: 100%;
        max-height: 90%;
    }
    
    .lightbox-close {
        width: 40px;
        height: 40px;
        top: var(--spacing-md);
        right: var(--spacing-md);
    }
    
    .lightbox-close svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .format-tabs {
        justify-content: space-around;
        gap: 4px;
    }
    
    .format-tab {
        padding: var(--spacing-xs) var(--spacing-sm);
        flex: 1;
        justify-content: center;
    }
    
    .format-tab .tab-icon {
        font-size: 1.5rem;
    }
    
    .preview-zoom-hint {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
    
    .preview-zoom-hint svg {
        width: 16px;
        height: 16px;
    }
    
    .download-buttons-group .btn-download {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.875rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY & TOUCH IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* Keyboard Navigation */
.format-tab:focus,
.lightbox-close:focus {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* Touch-Friendly Größen */
@media (hover: none) and (pointer: coarse) {
    .format-tab {
        min-height: 48px;
        min-width: 48px;
    }
    
    .lightbox-close {
        min-width: 44px;
        min-height: 44px;
    }
    
    .preview-image-large {
        cursor: default;
    }
}

/* Verhindere Text-Selektion beim Klicken */
.format-tab,
.lightbox-close,
.preview-image-large {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* Print: Lightbox ausblenden */
@media print {
    .image-lightbox {
        display: none !important;
    }
}