/* ============================================
   Einschulung - Landingpage + Bundesland-Detailseiten
   (/einschulung, /einschulung/{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 Einschulung pages.

   WICHTIG (Bugfix-Konvention): 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 — genau das hat schon einmal einen Bug verursacht). Stattdessen
   IMMER compound-scoped auf `.einschulung-page.article-page`, also nur
   Elemente, die BEIDE Klassen gleichzeitig tragen (das Wurzel-<article>
   dieser Seiten).
   ============================================ */

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

/* Kopfbereich und jede direkte Sektion (Intro, Hinweis, Planung, Produkte,
   Fakten, FAQ, weiterfuehrende Links, 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. */
.einschulung-page.article-page > .page-header,
.einschulung-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);
}

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

.einschulung-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. */
.einschulung-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: "Genauen Termin bitte bei der Schule erfragen" soll sich
   sichtbar von den uebrigen Panels abheben. */
.einschulung-page.article-page > section.einschulung-notice {
    border-left: 4px solid var(--color-primary);
}

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

.einschulung-checklist li,
.einschulung-facts li {
    margin-bottom: var(--spacing-sm);
}

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

.einschulung-page .einschulung-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;
}

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

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

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

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

    .einschulung-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;
    }

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

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

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

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

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