/* ========================================
   KATEGORIEN-KACHELN - DESKTOP STYLES
   ========================================
   Spezifische Styles für Desktop/PC
   Nur für Bildschirme größer als 768px
   ======================================== */

/* WICHTIG: Alle Desktop-Styles sind in Media Query eingeschlossen */
/* Damit beeinflussen sie Mobile NICHT */
@media (min-width: 769px) {
    /* STARTSEITE: Grid darf nicht nach links driften
       (überschreibt globales `.categories-grid { margin-left: -15px !important; }` aus dem Layout).
    */
    .homepage-categories .categories-grid {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Desktop: Kategorien-Section Container */
    /* Höchste Spezifität um alle anderen Styles zu überschreiben */
    /* Berücksichtigt auch main-content als Parent */
    html body .main-content .homepage-categories,
    html body .main-content div.homepage-categories,
    html body .main-content section.homepage-categories.categories-section,
    html body .homepage-categories,
    html body div.homepage-categories,
    html body section.homepage-categories.categories-section {
        max-width: 1400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: var(--spacing-4) !important;
        margin-bottom: var(--spacing-4) !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 var(--spacing-4) !important;
        box-sizing: border-box !important;
    }

    /* Desktop: Kategorien-Container */
    /* Höchste Spezifität um alle anderen Styles zu überschreiben */
    /* WICHTIG: width: 100% wie bei .bottom-nav-container für korrekte Zentrierung */
    html body .main-content .homepage-categories .categories-container,
    html body .main-content div.homepage-categories div.categories-container,
    html body .main-content section.homepage-categories .categories-container,
    html body .homepage-categories .categories-container,
    html body div.homepage-categories div.categories-container,
    html body section.homepage-categories .categories-container {
        max-width: 1200px !important;
        width: 100% !important; /* WICHTIG: Wie .bottom-nav-container */
        padding: var(--spacing-4) var(--spacing-4) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Zentriert den Inhalt */
        justify-content: center !important; /* Zentriert das Grid */
        /* Überschreibt alle anderen Styles die von content-card kommen könnten */
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    /* Desktop: Kategorien-Grid - ZENTRIERT */
    /* Höchste Spezifität um alle anderen Styles zu überschreiben */
    /* WICHTIG: width NICHT 100%, damit margin: auto funktioniert */
    html body .main-content .homepage-categories .categories-container .categories-grid,
    html body .main-content div.homepage-categories div.categories-container div.categories-grid,
    html body .main-content section.homepage-categories .categories-container .categories-grid,
    html body .main-content .homepage-categories .categories-grid,
    html body .homepage-categories .categories-container .categories-grid,
    html body div.homepage-categories div.categories-container div.categories-grid,
    html body section.homepage-categories .categories-container .categories-grid,
    html body .homepage-categories .categories-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important; /* Verkleinert von 16px auf 14px für breitere Kacheln */
        width: auto !important; /* NICHT 100% - damit Zentrierung funktioniert */
        max-width: 950px !important; /* Erhöht von 900px auf 950px für breitere Kacheln */
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        justify-items: stretch !important; /* Kacheln füllen ihre Grid-Zelle */
        align-items: start !important;
    }

    /* Desktop: Kategorien-Karte */
    .homepage-categories .category-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        min-height: 140px !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 0 !important;
        background: white !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-sm) !important;
        transition: all var(--transition-normal) !important;
        text-decoration: none !important;
        color: inherit !important;
    }

    /* Desktop: Kategorie-Bild */
    .homepage-categories .category-card .category-img {
        width: 100% !important;
        height: 130px !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Desktop: Kategorie-Titel */
    .homepage-categories .category-card .category-title {
        padding: 10px 8px !important;
        margin: 0 !important;
    }

    /* Desktop: Icon */
    .homepage-categories .category-icon {
        font-size: var(--category-icon-size-desktop) !important; /* 2.5rem */
        height: var(--category-icon-height-desktop) !important; /* 40px */
        min-height: var(--category-icon-height-desktop) !important;
        max-height: var(--category-icon-height-desktop) !important;
        margin-bottom: var(--spacing-2) !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Desktop: Text */
    .homepage-categories .category-title {
        font-size: var(--category-text-size-desktop) !important; /* 0.75rem */
        line-height: var(--category-text-line-height-desktop) !important; /* 1.2 */
        max-height: var(--category-text-max-height-desktop) !important; /* 40px */
        overflow: hidden !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        -webkit-box-pack: center !important; /* Zentriert im -webkit-box */
        text-align: center !important; /* Zentrierter Text */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        width: auto !important;
        min-width: 65.9px !important; /* Mindestbreite für breiteren Text */
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 auto !important; /* Zentriert */
        padding: 0 !important;
        color: var(--text-primary) !important;
        font-weight: var(--font-weight-semibold) !important;
        align-self: center !important;
    }

    /* Desktop: Hover-Effekt */
    .homepage-categories .category-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: var(--shadow-md) !important;
        background: var(--background-tertiary) !important;
    }

    .homepage-categories .category-card:active {
        transform: translateY(-2px) !important;
        box-shadow: var(--shadow-sm) !important;
    }
}

/* ===== ABSOLUT LETZTE REGEL - ÜBERSCHREIBT ALLES INKL. 600px REGEL ===== */
/* Diese Regel kommt GANZ AM ENDE und überschreibt ALLE anderen Regeln */
/* Wird NUR auf Desktop angewendet */
@media (min-width: 769px) {
    /* ABSOLUT HÖCHSTE SPEZIFITÄT FÜR CONTAINER - Überschreibt ALLES inkl. 800px Regel */
    html body main.main-content div.homepage-categories.categories-section div.categories-container,
    html body main.main-content div.homepage-categories div.categories-container,
    html body main.main-content section.homepage-categories.categories-section div.categories-container,
    html body div.main-content div.homepage-categories div.categories-container,
    html body .main-content .homepage-categories .categories-container,
    html body .main-content div.homepage-categories div.categories-container,
    html body .main-content section.homepage-categories .categories-container,
    html body .homepage-categories .categories-container,
    html body div.homepage-categories div.categories-container,
    html body section.homepage-categories .categories-container,
    html body .content-card .homepage-categories .categories-container,
    html body .main-content .content-card .homepage-categories .categories-container {
        max-width: 1200px !important; /* Überschreibt 800px Regel */
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: var(--spacing-4) !important; /* Überschreibt var(--spacing-8) */
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: transparent !important; /* Überschreibt var(--background-secondary) */
        border: none !important; /* Überschreibt border: 1px solid var(--border-color) */
        box-shadow: none !important; /* Überschreibt var(--shadow-sm) */
        border-radius: 0 !important; /* Überschreibt var(--radius-lg) */
    }
    
    /* ABSOLUT HÖCHSTE SPEZIFITÄT FÜR GRID - Überschreibt ALLES inkl. 600px Regel */
    html body main.main-content div.homepage-categories.categories-section div.categories-container div.categories-grid,
    html body main.main-content div.homepage-categories div.categories-container div.categories-grid,
    html body main.main-content section.homepage-categories.categories-section div.categories-container div.categories-grid,
    html body div.main-content div.homepage-categories div.categories-container div.categories-grid,
    html body .main-content .homepage-categories .categories-container .categories-grid,
    html body .main-content .homepage-categories .categories-grid,
    html body .homepage-categories .categories-container .categories-grid,
    html body .homepage-categories .categories-grid {
        max-width: 950px !important; /* Erhöht von 900px auf 950px für breitere Kacheln */
        width: auto !important; /* NICHT 100% */
        margin-left: auto !important;
        margin-right: auto !important;
        display: inline-grid !important; /* inline-grid für Zentrierung */
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important; /* Verkleinert von var(--spacing-4) = 16px auf 14px */
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}
/* ===== ENDE ABSOLUT LETZTE REGEL ===== */