/* ============================================
   Kategorien - Category Landing Pages
   (/huepfburgen-mieten, /partyzelte-mieten, ...)
   Shared by all category pages built from
   Eventify.Client/Elemente/CategoryContentSection.razor.
   Layout basics (.article-page, .article-grid, .related-articles,
   .article-card) come from RatgeberDesign.css — this file only adds the
   classes specific to CategoryContentSection.
   ============================================ */

.kategorie-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg) var(--spacing-2xl);
}

/* Kopfbereich (H1/Untertitel) sitzt sonst direkt auf dem rotierenden
   Foto-Hintergrund des Layouts — deckendes Panel nach dem Muster von
   .Eventify-Jobs-card (JobsDesign.css) fuer Lesbarkeit. */
.kategorie-page .page-header {
    background: rgba(30, 30, 30, 0.95);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Kategorien-Navigation auf /angebote (Angebote.razor) — statische, crawlbare
   Links zu den Kategorie-Landingpages, als Ergaenzung zum nicht-crawlbaren
   Kategorie-Dropdown. */
.angebote-kategorien {
    margin-bottom: var(--spacing-lg);
}

    .angebote-kategorien h2 {
        margin-bottom: var(--spacing-sm);
        color: var(--color-text);
        font-size: var(--font-size-lg);
    }

.angebote-kategorien-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

    .angebote-kategorien-list a {
        display: inline-block;
        padding: var(--spacing-xs, 4px) var(--spacing-md);
        background: var(--color-bg-card);
        border: 1px solid var(--color-border);
        border-radius: 20px;
        color: var(--color-text);
        font-size: var(--font-size-sm);
        text-decoration: none;
    }

        .angebote-kategorien-list a:hover {
            border-color: var(--color-primary);
            color: var(--color-primary);
        }

/* Prosa-Bloecke: eigenes Panel statt direkt auf dem Foto-Hintergrund.
   Bugfix: max-width sass bisher auf dem PANEL selbst (72ch) — dadurch war
   dieses Panel schmaler als die Nachbar-Panels (.kategorie-eventtypen,
   .kategorie-produkte, .page-header, .faq-section, die alle keine
   max-width haben) und blieb linksbuendig, statt die Spaltenbreite von
   .kategorie-page auszufuellen. Das Panel fuellt jetzt die volle Spalte;
   die Zeilenlaenge (~70-75 Zeichen) wird stattdessen auf dem <p> darin
   begrenzt, damit der Fliesstext trotzdem gut lesbar bleibt. */
.kategorie-intro,
.kategorie-guide,
.kategorie-ablauf {
    background: rgba(30, 30, 30, 0.95);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.kategorie-intro p,
.kategorie-guide p,
.kategorie-ablauf p {
    max-width: 72ch;
    color: var(--color-text-muted);
    line-height: 1.75;
}

/* "Passend fuer diese Anlaesse" — Ueberschrift + Pill-Liste bekommen ein
   gemeinsames Panel, damit weder Text noch Pills auf dem Foto floaten. */
.kategorie-eventtypen {
    background: rgba(30, 30, 30, 0.95);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.kategorie-eventtypen-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

    .kategorie-eventtypen-list li {
        padding: var(--spacing-xs, 4px) var(--spacing-md);
        background: var(--color-bg-card);
        border: 1px solid var(--color-border);
        border-radius: 20px;
        color: var(--color-text);
        font-size: var(--font-size-sm);
    }

/* Produkt-Raster bekommt wie die anderen Bloecke ein deckendes Panel um
   Ueberschrift + Karten, damit die Ueberschrift nicht auf dem Foto floatet. */
.kategorie-produkte {
    background: rgba(30, 30, 30, 0.95);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.kategorie-page .faq-section {
    background: rgba(30, 30, 30, 0.95);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.kategorie-produkte-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.kategorie-produkt-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .kategorie-produkt-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg, var(--shadow-md));
    }

    .kategorie-produkt-card img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        background: var(--color-bg-input, rgba(255, 255, 255, 0.05));
    }

.kategorie-produkt-name {
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    font-size: var(--font-size-base);
}

@media (max-width: 900px) {
    .kategorie-produkte-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .kategorie-page {
        padding-right: var(--spacing-md);
        padding-left: var(--spacing-md);
    }

    .kategorie-page .page-header,
    .kategorie-intro,
    .kategorie-guide,
    .kategorie-ablauf,
    .kategorie-eventtypen,
    .kategorie-produkte,
    .kategorie-page .faq-section {
        padding: var(--spacing-lg);
    }

    .kategorie-produkte-grid {
        grid-template-columns: 1fr;
    }
}