/* ==========================================================================
   Rechtliche Seiten (Impressum, Datenschutz, AGB, Widerruf, Versand)
   --------------------------------------------------------------------------
   Eigenes, elegantes Layout im warmen Designsystem: Hero, klebriges
   Inhaltsverzeichnis (Anker-Navigation), gut lesbare Inhaltsbreite, klare
   Überschriften/Abstände, dezente Reveals. Nutzt globale Tokens; kühle, helle
   Flächen + Gold-Akzent, abgestimmt auf den navy-getönten Seitengrund.
   ========================================================================== */

.legal {
    --lg-line:    color-mix(in srgb, var(--secondary) 13%, transparent);
    --lg-card:    #ffffff;
    --lg-max:     46rem;       /* gut lesbare Textbreite */
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Dunkelmodus: eigene Flächen-Token auf theme-fähige Token mappen
   (Größen-Token wie --lg-max bleiben unberührt). */
html[data-theme="dark"] .legal {
    --lg-card: var(--surface-card);
}

/* ---- Hero ---------------------------------------------------------------- */
.legal-hero {
    text-align: center;
    padding: clamp(2.4rem, 6vw, 4.5rem) var(--gutter, 24px) clamp(1.6rem, 4vw, 2.6rem);
}
.legal-hero__eyebrow {
    margin: 0 0 .8rem;
    color: var(--gold);
    font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.legal-hero__title {
    margin: 0;
    font-family: var(--font-display-medium);
    font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem);
    line-height: 1.08; letter-spacing: -.01em;
    color: var(--text-strong);
}
.legal-hero__lead {
    margin: 1rem auto 0; max-width: 44ch;
    color: var(--text-muted); font-size: 1.08rem; line-height: 1.6;
}
.legal-hero__updated {
    display: inline-block; margin-top: 1.1rem;
    padding: .35rem .85rem; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--secondary) 7%, var(--surface-mix));
    color: var(--text-muted); font-size: .82rem; font-weight: 600;
}

/* ---- Layout: klebriges TOC + Inhalt -------------------------------------- */
.legal-layout {
    /* Gleiche Breite/Ausrichtung wie der globale .container (wie alle Seiten). */
    width: min(calc(100% - (var(--gutter) * 2)), var(--maxw));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
@media (max-width: 880px) {
    .legal-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Inhaltsverzeichnis */
.legal-toc {
    position: sticky;
    top: clamp(1rem, 8vh, 6.5rem);
    padding: 1.2rem 1.3rem;
    border-radius: 16px;
    background: var(--lg-card);
}
@media (max-width: 880px) {
    .legal-toc { position: static; top: auto; }
}
.legal-toc__title {
    margin: 0 0 .7rem;
    font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-muted);
}
.legal-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; counter-reset: toc; }
.legal-toc__list a {
    display: block;
    padding: .42rem .6rem;
    border-radius: 9px;
    color: var(--text-default);
    font-size: .92rem; line-height: 1.35; text-decoration: none;
    transition: background var(--dur-fast) var(--ease-hover), color var(--dur-fast) var(--ease-hover);
}
.legal-toc__list a::before {
    counter-increment: toc; content: counter(toc) ". ";
    color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums;
}
.legal-toc__list a:hover { background: color-mix(in srgb, var(--secondary) 10%, transparent); color: var(--text-strong); }

/* ---- Inhalt -------------------------------------------------------------- */
.legal-main { min-width: 0; max-width: var(--lg-max); }

/* Verwandte Rechtsdokumente als Schaltflächen (z. B. AGB/Widerruf/Versand auf der Datenschutzseite). */
.legal-related {
    margin: 0 0 clamp(1.4rem, 3vw, 2.1rem);
    padding: clamp(1.1rem, 2.4vw, 1.5rem);
    border-radius: 16px;
    background: var(--lg-card);
}
.legal-related__title {
    margin: 0 0 .85rem;
    font-family: var(--font-body); font-weight: 700; font-size: 1rem;
    color: var(--text-strong);
}
.legal-related__links { display: flex; flex-wrap: wrap; gap: .6rem; }
.legal-related__btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .68rem 1.1rem;
    border-radius: var(--radius-button);
    background: color-mix(in srgb, var(--secondary) 8%, var(--surface-mix));
    color: var(--secondary);
    font-weight: 600; font-size: .95rem; text-decoration: none;
    transition: background var(--dur-fast) var(--ease-hover),
                transform var(--dur-fast) var(--ease-hover);
}
.legal-related__btn svg { width: 1.02rem; height: 1.02rem; transition: transform var(--dur-fast) var(--ease-hover); }
.legal-related__btn:hover {
    background: color-mix(in srgb, var(--secondary) 14%, var(--surface-mix));
    transform: translateY(-2px);
}
.legal-related__btn:hover svg { transform: translateX(3px); }
.legal-related__btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.legal-section {
    scroll-margin-top: clamp(1rem, 8vh, 7rem);   /* Anker unter schwebender Nav */
    padding: clamp(1.4rem, 3vw, 2rem) 0;
}
.legal-section:first-of-type { padding-top: 0; }
.legal-section__title {
    margin: 0 0 .9rem;
    display: flex; align-items: baseline; gap: .6rem;
    font-family: var(--font-display-medium);
    font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem);
    line-height: 1.2; color: var(--text-strong);
}
.legal-section__num {
    flex: none;
    color: var(--gold); font-size: .9em; font-weight: 700; font-variant-numeric: tabular-nums;
}
.legal-section h3 {
    margin: 1.4rem 0 .5rem;
    font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; color: var(--text-strong);
}
.legal-section p { margin: 0 0 .9rem; color: var(--text-default); font-size: 1rem; line-height: 1.68; }
.legal-section a { color: var(--gold); text-underline-offset: 2px; }
.legal-section ul, .legal-section ol { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--text-default); line-height: 1.6; }
.legal-section li { margin-bottom: .4rem; }
.legal-section strong { color: var(--text-strong); }

/* Definitionsliste (z. B. Anschrift, Kontakt) */
.legal-dl { margin: 0 0 1rem; display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; }
.legal-dl dt { color: var(--text-muted); font-size: .95rem; }
.legal-dl dd { margin: 0; color: var(--text-strong); font-weight: 600; }
@media (max-width: 520px) { .legal-dl { grid-template-columns: 1fr; gap: .1rem 0; } .legal-dl dd { margin-bottom: .5rem; } }

/* Verantwortlicher-/Kontaktkarte */
.legal-contact {
    margin: .2rem 0 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--secondary) 5%, var(--surface-mix));
}
.legal-contact p { margin: 0; line-height: 1.6; }
.legal-contact strong { color: var(--text-strong); }

/* Hinweis-/TODO-Callout (vor Veröffentlichung prüfen) */
.legal-note {
    margin: 0 0 1.1rem;
    padding: .9rem 1.1rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--warning) 38%, transparent);
    background: color-mix(in srgb, var(--warning) 10%, var(--surface-mix));
    color: color-mix(in srgb, var(--warning) 70%, #000);
    font-size: .92rem; line-height: 1.55;
}
.legal-note strong { color: color-mix(in srgb, var(--warning) 80%, #000); }
.legal-note--info {
    border-color: color-mix(in srgb, var(--secondary) 26%, transparent);
    background: color-mix(in srgb, var(--secondary) 7%, var(--surface-mix));
    color: var(--text-default);
}
.legal-note--info strong { color: var(--secondary); }

/* Inline-Marker für zu bestätigende Angaben */
.legal-flag {
    background: color-mix(in srgb, var(--warning) 22%, transparent);
    color: color-mix(in srgb, var(--warning) 72%, #000);
    padding: .04em .35em; border-radius: 5px;
    font-size: .92em; font-weight: 600;
}

/* Muster-Widerrufsformular-Box */
.legal-form-box {
    margin: 1rem 0; padding: 1.2rem 1.3rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--secondary) 4%, var(--surface-mix));
    color: var(--text-default); font-size: .95rem; line-height: 1.7;
}

/* ---- Dunkelmodus-Overrides ----------------------------------------------
   Nur Flächen/Schatten/Lesbarkeit auf Dunkel; Lichtmodus bleibt unverändert. */

/* Schwebendes Inhaltsverzeichnis = Popover-artiges Panel → angehobene Fläche. */
html[data-theme="dark"] .legal-toc { background: var(--surface-raised); }

/* Warn-/Flag-Texte mischen im Lichtmodus mit #000 (auf hellem Warn-Grund gut
   lesbar); auf Dunkel zu #fff anheben, damit Kontrast erhalten bleibt. */
html[data-theme="dark"] .legal-note { color: color-mix(in srgb, var(--warning) 60%, #fff); }
html[data-theme="dark"] .legal-note strong { color: color-mix(in srgb, var(--warning) 75%, #fff); }
html[data-theme="dark"] .legal-flag { color: color-mix(in srgb, var(--warning) 62%, #fff); }

/* dezente Reveals (greifen mit der globalen [data-reveal]-Logik) */