/*
    article.css - Layout fuer Guide- und Artikel-Seiten
    (einfuehrung.htm, artikel.htm, artikel/*.htm).

    Baut auf legal.css auf: gleiche Grundklassen (.legal-header,
    .legal-main > .legal-card, .legal-footer), gleicher Site-Look
    (Segoe-UI-Stack, Akzent #3498db, Karten auf #ecf0f1).
    Diese Datei enthaelt NUR Zusuetze und Overrides fuer lange Texte;
    sie wird als zweite <link>-Datei nach legal.css geladen und
    gewinnt bei gleicher Spezifitaet.

    Die Rechtsseiten (Impressum/Datenschutz/Kontakt) laden nur
    legal.css und bleiben von allen Regeln hier unberuehrt.

    UTF-8, Umlaute roh.
*/

/* ---------------------------------------------------------------
   Spaltenmass fuer lange Texte (Knob)
   legal.css setzt 800px; hier schmaler fuer ~65-70 Zeichen/Zeile.
   --------------------------------------------------------------- */
.legal-main {
    max-width: 760px;
}

/* ---------------------------------------------------------------
   Typografie innerhalb der Karte
   --------------------------------------------------------------- */
.legal-card h3 {
    font-size: 1.05rem;
    color: #2c3e50;
    margin: 22px 0 8px 0;
}

.legal-card ol,
.legal-card ul {
    margin: 0 0 14px 24px;
}

.legal-card li {
    margin-bottom: 6px;
}

.legal-card .lead {
    font-size: 1.05rem;
    color: #555;
    margin-bottom: 22px;
}

/* Bilder: responsiv, zentriert, mit Luft nach oben/unten */
.legal-card img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.6em auto;
    border-radius: 6px;
}

.legal-card figure {
    margin: 1.8em 0;
}

.legal-card figcaption {
    font-size: 0.88rem;
    color: #7f8c8d;
    text-align: center;
    margin-top: 0.6em;
    line-height: 1.5;
}

/* ---------------------------------------------------------------
   Inhaltsverzeichnis (Einfuehrungsseite)
   --------------------------------------------------------------- */
.article-toc {
    background: #f8f9fa;
    border: 1px solid #e3e7ea;
    border-radius: 8px;
    padding: 18px 22px;
    margin: 0 0 34px 0;
}

.article-toc h2 {
    font-size: 1.05rem;
    margin: 0 0 10px 0;
}

.article-toc ol {
    margin: 0 0 0 22px;
}

.article-toc li {
    margin-bottom: 6px;
}

/* ---------------------------------------------------------------
   Szenen-Marker (Ort/Datum-Zeilen im Fallbeispiel)
   --------------------------------------------------------------- */
.legal-card .scene {
    font-weight: 600;
    color: #34495e;
    margin-top: 1.7em;
}

/* ---------------------------------------------------------------
   Epigraph (Zitat am Artikelbeginn, blockquote)
   --------------------------------------------------------------- */
.legal-card blockquote {
    margin: 22px 0 28px 0;
    padding: 4px 0 4px 16px;
    border-left: 4px solid #bdc3c7;
    color: #555;
    font-style: italic;
}

.legal-card blockquote p {
    margin-bottom: 4px;
}

/* ---------------------------------------------------------------
   "Das Wichtigste in Kuerze" - Resuemee pro Kapitel
   --------------------------------------------------------------- */
.summary-box {
    background: #eaf2f8;
    border-left: 4px solid #3498db;
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin: 28px 0;
}

.summary-box p {
    margin-bottom: 6px;
}

.summary-box ul {
    margin: 0 0 0 20px;
}

.summary-box li {
    margin-bottom: 4px;
}

/* ---------------------------------------------------------------
   Download-Goodie (z. B. Excel-Tool)
   --------------------------------------------------------------- */
.download-box {
    background: #eafaf1;
    border: 1px solid #d5f0e0;
    border-left: 4px solid #27ae60;
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin: 28px 0;
}

/* ---------------------------------------------------------------
   Ueberleitung zum PM-Spiel
   --------------------------------------------------------------- */
.game-link-box {
    background: #fef9e7;
    border: 1px solid #f5e6b8;
    border-left: 4px solid #f39c12;
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin: 28px 0;
}

/* ---------------------------------------------------------------
   Ueberleitung zum interaktiven Web-Tool (z. B. Fluktuation-Simulation)
   --------------------------------------------------------------- */
.tool-link-box {
    background: #f4ecf7;
    border: 1px solid #d7bde2;
    border-left: 4px solid #8e44ad;
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin: 28px 0;
}

.download-box p,
.game-link-box p,
.tool-link-box p {
    margin-bottom: 6px;
}

.box-title {
    font-weight: 600;
    color: #2c3e50;
}

/* ---------------------------------------------------------------
   Artikel-Uebersicht (artikel.htm)
   --------------------------------------------------------------- */
.article-list {
    list-style: none;
    margin: 0 0 14px 0;
    padding: 0;
}

.article-list li {
    margin-bottom: 16px;
}

.article-list .article-link {
    font-weight: 600;
}

.article-list .article-teaser {
    display: block;
    color: #666;
    margin-top: 2px;
}

/* ---------------------------------------------------------------
   Kleine Screens: Karten-Padding und Boxen kompakter
   (Knob, keine Auswirkung auf Rechtsseiten - die laden diese Datei nicht)
   --------------------------------------------------------------- */
@media (max-width: 479px) {
    .legal-card {
        padding: 22px 18px;
    }

    .legal-card img {
        margin: 1.2em auto;
    }

    .summary-box,
    .download-box,
    .game-link-box,
    .tool-link-box {
        padding: 12px 14px;
        margin: 20px 0;
    }
}