/* ============================================
   Schulferien - Landingpage + Bundesland-Detailseiten
   (/schulferien, /schulferien/{Bundesland})

   Layout basics (.article-page, .article-grid, .article-card,
   .related-articles, .page-header, .page-title, .page-subtitle) come from
   RatgeberDesign.css / ArtikelDesign.css / layoutDesign.css. This file only
   adds classes specific to the Schulferien pages.

   WICHTIG (Bugfix-Konvention, siehe EinschulungDesign.css): Panel-Regeln
   werden NIE auf der bloßen globalen Klasse `.article-page` definiert (das
   wuerde in alle anderen Artikel-/Kategorie-/Standort-Seiten hineinlecken,
   die dieselbe Klasse verwenden). Stattdessen IMMER compound-scoped auf
   `.schulferien-page.article-page`, also nur Elemente, die BEIDE Klassen
   gleichzeitig tragen (das Wurzel-<article> dieser Seiten).
   ============================================ */

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

/* Kopfbereich und jede direkte Sektion (Intro, Hinweis, Ferienarten,
   Planung, SH-Lieferung, Angebot, Fakten, FAQ, Bundeslaender-Liste) sitzen
   sonst direkt auf dem rotierenden Foto-Hintergrund des Layouts —
   deckendes Panel nach dem Muster von .Eventify-Jobs-card (JobsDesign.css)
   fuer Lesbarkeit. */
.schulferien-page.article-page > .page-header,
.schulferien-page.article-page > 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);
}

.schulferien-page.article-page > section p {
    max-width: 72ch;
    color: var(--color-text-muted);
    line-height: 1.75;
}

.schulferien-page.article-page > section + section {
    margin-top: var(--spacing-xl);
}

/* FaqSection rendert ihr eigenes <section class="faq-section"> — explizit
   compound-scoped, statt sich allein auf die generische ">section"-Regel
   oben zu verlassen. */
.schulferien-page.article-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);
}

/* Hinweis-Box: "Termine noch nicht verifiziert" soll sich sichtbar von den
   uebrigen Panels abheben — analog .einschulung-notice. */
.schulferien-page.article-page > section.schulferien-notice {
    border-left: 4px solid var(--color-primary);
}

.schulferien-facts {
    margin: var(--spacing-md) 0 0;
    padding-left: var(--spacing-lg);
    color: var(--color-text-muted);
    line-height: 1.75;
}

.schulferien-facts li {
    margin-bottom: var(--spacing-sm);
}

/* Liste der 6 Ferienarten je Bundesland-Detailseite — reine Kategorien,
   kein Datumsfilter (siehe SchulferienData.cs). */
.schulferien-typen-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
    list-style: none;
    margin: var(--spacing-md) 0 0;
    padding: 0;
}

.schulferien-typen-list li {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 4px);
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
}

.schulferien-typ-name {
    font-weight: 600;
    color: var(--color-text);
}

.schulferien-typ-hinweis {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.schulferien-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.schulferien-page .schulferien-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--spacing-sm) var(--spacing-xl);
    font-size: var(--font-size-base);
    font-weight: 600;
    font-family: inherit;
    background: var(--color-primary);
    color: #fff;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    transition: background 0.2s ease;
}

    .schulferien-page .schulferien-cta-btn:hover {
        background: var(--color-primary-dark, #2a9fd8);
    }

.schulferien-page .schulferien-cta-btn--secondary {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}

    .schulferien-page .schulferien-cta-btn--secondary:hover {
        background: rgba(255, 255, 255, 0.08);
    }

/* "Schulferien nach Bundesland" — Pill-Liste analog zu
   .einschulung-bundesland-list / .standort-links-list. */
.schulferien-bundesland-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    list-style: none;
    margin: var(--spacing-md) 0 0;
    padding: 0;
}

    .schulferien-bundesland-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;
    }

        .schulferien-bundesland-list a:hover {
            border-color: var(--color-primary);
            color: var(--color-primary);
        }

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

    .schulferien-page.article-page > .page-header,
    .schulferien-page.article-page > section,
    .schulferien-page.article-page > .faq-section {
        padding: var(--spacing-lg);
    }

    .schulferien-cta-row {
        flex-direction: column;
    }

    .schulferien-page .schulferien-cta-btn {
        width: 100%;
    }
}