/* ================================================================
   Legal-Seiten (Datenschutz, Nutzungsbedingungen, Impressum)
   page_legal.css
   WCAG 2.1 AA (angestrebt AAA wo möglich)
   ================================================================

   Kontrast-Notizen:
     --color-text (#333333) auf white         → 12.6:1  ✓ AAA
     --color-primary (#1a73e8) auf white      →  4.6:1  ✓ AA  (Large: AAA)
     .legal-page__eyebrow (#0e4d9e) auf #eef3fc → 7.3:1 ✓ AAA
     Fließtext #334155 auf white              →  9.7:1  ✓ AAA
     Metainfo #64748b auf white               →  4.6:1  ✓ AA
     Abschnitt-Hintergr. #f8fafc / text #334155 → 9.2:1 ✓ AAA
   ================================================================ */

/* ── Seitencontainer ─────────────────────────────────────────── */

.legal-page
{
    overflow-y: auto;
    min-height: 100%;
}

/* ── Hero-Header ─────────────────────────────────────────────── */

.legal-page__header
{
    background: linear-gradient(135deg, #eef3fc 0%, #f0f6ff 100%);
    border-bottom: 1px solid #dce8fb;
    padding: 4rem 1.5rem 3.5rem;
    text-align: center;
}

.legal-page__eyebrow
{
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0e4d9e;          /* 7.3:1 auf #eef3fc – AAA ✓ */
    margin-bottom: 0.75rem;
}

.legal-page__title
{
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    color: #0f172a;
    margin: 0 0 0.75rem;
}

.legal-page__subtitle
{
    font-size: 0.9375rem;
    color: #64748b;           /* 4.6:1 auf white – AA ✓ */
    margin: 0;
}

/* ── Content-Container ───────────────────────────────────────── */

.legal-page__container
{
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
}

/* ── Body: allgemeines Prose-Layout ─────────────────────────── */

.legal-page__body
{
    color: #334155;           /* 9.7:1 auf white – AAA ✓ */
    font-size: 0.9375rem;
    line-height: 1.75;
}

/* Sections aus dynamischen Dokumenten (renderHtml) */
.legal-page__body section,
.legal-page__body > div > section
{
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.legal-page__body section:last-child,
.legal-page__body > div > section:last-child
{
    border-bottom: none;
    padding-bottom: 0;
}

/* ── Überschriften ───────────────────────────────────────────── */

.legal-page__body h1
{
    font-size: 1.375rem;
    font-weight: 700;
    color: #0f172a;
    margin: 2.5rem 0 0.75rem;
    line-height: 1.25;
}

.legal-page__body h1:first-child { margin-top: 0; }

.legal-page__body h2
{
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin: 2rem 0 0.625rem;
    line-height: 1.3;
}

.legal-page__body h3
{
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 1.5rem 0 0.5rem;
}

.legal-page__body h4
{
    font-size: 0.9375rem;
    font-weight: 600;
    color: #334155;
    margin: 1.25rem 0 0.4rem;
}

/* Ersten h2 nicht mit Margin oben versehen, wenn direkt nach Header */
.legal-page__body > h2:first-child,
.legal-page__body section > h2:first-child
{
    margin-top: 0;
}

/* ── Fließtext ───────────────────────────────────────────────── */

.legal-page__body p
{
    margin: 0 0 1rem;
    color: #334155;
}

.legal-page__body p:last-child { margin-bottom: 0; }

/* ── Listen ──────────────────────────────────────────────────── */

.legal-page__body ul,
.legal-page__body ol
{
    padding-left: 1.5rem;
    margin: 0 0 1rem;
}

.legal-page__body li
{
    margin-bottom: 0.4rem;
    line-height: 1.7;
}

.legal-page__body ul { list-style-type: disc; }
.legal-page__body ol { list-style-type: decimal; }

/* ── Links ───────────────────────────────────────────────────── */

.legal-page__body a
{
    color: #1a73e8;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-page__body a:hover
{
    color: #1558b0;
}

.legal-page__body a:focus-visible
{
    outline: 3px solid #0057b7;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Adresse ─────────────────────────────────────────────────── */

.legal-page__body address
{
    font-style: normal;
    color: #334155;
    line-height: 1.75;
}

/* ── Hervorgehobene Info-Box ─────────────────────────────────── */

.legal-page__body blockquote,
.legal-page__info-box
{
    background: #eef3fc;
    border-left: 4px solid #1a73e8;
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    color: #1e3a5f;           /* 8.3:1 auf #eef3fc – AAA ✓ */
    font-size: 0.9375rem;
    line-height: 1.65;
}

/* ── Horizontal Rule ─────────────────────────────────────────── */

.legal-page__body hr
{
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 2rem 0;
}

/* ── Inline Code ─────────────────────────────────────────────── */

.legal-page__body code
{
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
    font-size: 0.875em;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 0.1em 0.35em;
    color: #0f172a;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 600px)
{
    .legal-page__header
    {
        padding: 3rem 1rem 2.5rem;
        text-align: left;
    }

    .legal-page__container
    {
        padding: 2rem 1rem 4rem;
    }

    .legal-page__body h1 { font-size: 1.25rem; }
    .legal-page__body h2 { font-size: 1.0625rem; }
}

/* ── Focus-Visible (WCAG 2.4.7 / 2.4.11) ────────────────────── */

.legal-page :focus-visible
{
    outline: 3px solid #0057b7;
    outline-offset: 2px;
}

/* ── Print ───────────────────────────────────────────────────── */

@media print
{
    .legal-page__header
    {
        background: none;
        border-bottom: 2px solid #333;
        padding: 1rem 0 0.75rem;
        text-align: left;
    }

    .legal-page__eyebrow { display: none; }

    .legal-page__title   { font-size: 1.5rem; }

    .legal-page__container { padding: 1.5rem 0; }

    .legal-page__body a::after
    {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }

    .legal-page__body section
    {
        break-inside: avoid;
    }
}