/* ============================================
   Ratgeber - Hub and Article Styles
   ============================================ */

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

/* Bugfix: Ueberschrift/Intro sassen bisher ohne eigenen Hintergrund direkt
   auf dem rotierenden Foto-Hintergrund (nur das leichte dunkle Scrim
   dahinter) und waren dadurch kaum lesbar. Werte an .Eventify-Jobs-card
   (JobsDesign.css) angelehnt — die Breadcrumb-Zeile darueber hat bereits
   ihre eigene, undurchsichtige Panel-Optik (ArtikelDetailsDesign.css). */
.ratgeber-header,
.article-header {
    margin-bottom: var(--spacing-2xl);
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
}

.ratgeber-header h1,
.article-header h1 {
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
    font-size: var(--font-size-3xl);
}

.ratgeber-header p,
.article-header p {
    max-width: 70ch;
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    line-height: 1.7;
}

.ratgeber-page h2 {
    margin: var(--spacing-xl) 0 var(--spacing-md);
    color: var(--color-text);
    font-size: var(--font-size-2xl);
}

/* "Alle Ratgeber"-Abschnitt auf dem Hub (Ratgeber.razor) — eigenes Panel,
   damit die Ueberschrift nicht bare auf dem Foto steht. Ueber das bereits
   vorhandene aria-labelledby-Attribut angesprochen, kein Razor-Edit noetig. */
.ratgeber-page section[aria-labelledby="articles-heading"] {
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-lg);
}

.article-card {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg);
    /* An die Panel-Konvention angeglichen (siehe .Eventify-Jobs-card,
       JobsDesign.css) — var(--color-bg-card) war mit 0.9 Alpha auf einem
       helleren Grauton knapp zu durchsichtig. */
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.article-card h3 {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-xl);
    line-height: 1.35;
}

.article-card h3 a,
.article-card-link,
.article-page a {
    color: var(--color-primary);
}

.article-card h3 a {
    color: var(--color-text);
    text-decoration: none;
}

.article-card p {
    flex: 1;
    margin: 0 0 var(--spacing-md);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.article-card-link {
    font-weight: 600;
    text-decoration: none;
}

.article-card h3 a:hover,
.article-card-link:hover,
.article-page a:hover {
    text-decoration: underline;
}

/* Jeder Artikel-Textabschnitt (<section> ohne Klasse, direktes Kind von
   .article-page) bekommt ein eigenes Panel statt bare auf dem Foto zu
   stehen. WICHTIG: scoped auf ".ratgeber-page.article-page" (beide Klassen),
   NICHT auf das alleinstehende ".article-page" — die Kategorie-Seiten
   (Huepfburgen.razor etc.) tragen ebenfalls die Klasse "article-page"
   (zusammen mit "kategorie-page") und werden separat in KategorienDesign.css
   behandelt; ohne dieses Scoping wuerde diese Regel dort ungewollt
   mitgreifen.
   Bugfix: max-width sass bisher auf dem PANEL selbst (zuerst 800px, dann
   75ch) — dadurch war dieses Panel schmaler als die Nachbar-Panels
   (.related-articles, .faq-section, die beide keine max-width haben) und
   blieb linksbuendig, statt die Spaltenbreite von .ratgeber-page
   auszufuellen. Das Panel fuellt jetzt die volle Spalte; die Zeilenlaenge
   wird stattdessen auf dem <p> darin begrenzt. */
.ratgeber-page.article-page > section:not(.related-articles):not(.faq-section) {
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.article-page section p,
.article-checklist {
    color: var(--color-text-muted);
    line-height: 1.75;
}

/* Zeilenlaenge NUR fuer Ratgeber-Artikel begrenzen (siehe Scoping-Hinweis
   oben) — ".article-page section p" ist unscoped und wuerde wegen hoeherer
   Selektor-Spezifitaet sonst die eigene 72ch-Regel der Kategorie-Seiten
   (KategorienDesign.css: ".kategorie-intro p" usw.) ungewollt ueberschreiben. */
.ratgeber-page.article-page section p {
    max-width: 75ch;
}

.article-checklist {
    padding-left: var(--spacing-lg);
}

.article-checklist li + li {
    margin-top: var(--spacing-sm);
}

/* FAQ-Abschnitt einer Ratgeber-Unterseite (<FaqSection Heading="..." />,
   rendert als <section class="faq-section"> direkt unter .article-page).
   Gleiches Scoping-Argument wie oben: NUR ".ratgeber-page.article-page",
   damit die Kategorie-Seiten (ebenfalls "article-page", aber eigene Regeln
   in KategorienDesign.css) nicht mitgetroffen werden. Auch NICHT an
   .faq-section selbst in componentsDesign.css geaendert, da die Komponente
   zusaetzlich auf Standort- und Produktseiten verwendet wird. Die einzelnen
   .faq-item-Karten (componentsDesign.css) behalten ihre eigene Kartenoptik. */
.ratgeber-page.article-page > .faq-section {
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.related-articles {
    margin-top: var(--spacing-2xl);
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
}

.related-articles .article-card {
    background: rgba(60, 60, 60, 0.9);
}

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

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

    .article-grid {
        grid-template-columns: 1fr;
    }

    .ratgeber-header h1,
    .article-header h1 {
        font-size: var(--font-size-2xl);
    }

    .ratgeber-header,
    .article-header,
    .ratgeber-page section[aria-labelledby="articles-heading"],
    .ratgeber-page.article-page > section:not(.related-articles):not(.faq-section),
    .ratgeber-page.article-page > .faq-section,
    .related-articles {
        padding: var(--spacing-lg);
    }
}