/* =====================================================================================================
   static/css/legal.css: Rechtstexte (Impressum, AGB, Datenschutz, intern und extern) und Widerruf,
   seit 23.10.2026 (UI-Audit Welle 2, Gruppe auth). Praefix legal-.

   Geladen von legal/rechtstext.html, legal/widerruf.html, legal/widerruf_bestaetigung.html (nach
   base.html mit super()) und von external_base.html. Bausteine (Panel, Kopfzeile, Knoepfe, Felder,
   Hinweise) kommen aus static/css/app.css; hier nur der Rahmen der Rechtstexte:
   .legal-page          Seitenbreite 1120 px (Inhaltsverzeichnis plus Lesespalte), Handy 12 px Rand
   .legal-layout        zwei Spalten: .legal-toc (232 px, mitlaufend) und .legal-main (Lesespalte 760 px)
   .legal-toc           Inhaltsverzeichnis als details; am Desktop offen, auf dem Handy zu (legal.js)
   .legal-text          Typografie des Rechtstexts (Zeilenlaenge unter 75 Zeichen)
   .legal-card          nur Kennung der Textflaeche (Tests, Druck), ohne eigenen Stil
   .legal-box           Adress- und Kontaktbloecke als Innenkarte; --aktion mit Knopf
   .legal-ext-*         schlankes Geruest der externen Fassung (external_base.html)
   .legal-wf-*          Widerrufsformular und Bestaetigung
   Druckansicht am Ende der Datei. Farben und Abstaende aus dem Massstab, keine Bewegung.
   ===================================================================================================== */

.legal-page {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 32px 48px;
    color: var(--nv-fg2);
}

.legal-page--schmal { max-width: 860px; }

.legal-head h1 {
    hyphens: auto;
}

.legal-head__tools .legal-druck[hidden] { display: none; }

.legal-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 760px);
    gap: 40px;
    align-items: start;
}

.legal-layout--ohne-toc { grid-template-columns: minmax(0, 760px); }

.legal-main { min-width: 0; }

/* ── Inhaltsverzeichnis ─────────────────────────────────────────────────────────────────────────── */

.legal-toc {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    font-size: 0.85rem;
    scrollbar-width: thin;
}

.legal-toc summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--nv-fg);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.legal-toc summary::-webkit-details-marker { display: none; }

.legal-toc summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 1.5px solid var(--nv-fg3);
    border-bottom: 1.5px solid var(--nv-fg3);
    transform: translateY(-2px) rotate(45deg);
}

.legal-toc details[open] summary::after { transform: translateY(2px) rotate(-135deg); }

.legal-toc summary:hover { background: rgba(255, 255, 255, 0.05); }

.legal-toc summary:focus-visible,
.legal-toc a:focus-visible {
    outline: 2px solid var(--nv-focus);
    outline-offset: 2px;
}

.legal-toc__zahl { font-size: 0.78rem; font-weight: 400; color: var(--nv-fg3); }

.legal-toc ol {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.legal-toc a {
    display: block;
    padding: 6px 10px;
    border-left: 2px solid transparent;
    border-radius: 0 8px 8px 0;
    color: var(--nv-fg3);
    line-height: 1.4;
    text-decoration: none;
    overflow-wrap: break-word;
    hyphens: auto;
}

.legal-toc a:hover { background: rgba(255, 255, 255, 0.05); color: var(--nv-fg); }

.legal-toc a[aria-current="true"] {
    border-left-color: var(--nv-acc);
    background: rgba(255, 255, 255, 0.04);
    color: var(--nv-fg);
}

/* ── Text ───────────────────────────────────────────────────────────────────────────────────────── */

.legal-text {
    max-width: 66ch;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--nv-fg2);
    overflow-wrap: break-word;
}

.legal-text h2 {
    margin: 32px 0 12px;
    padding-top: 24px;
    border-top: 1px solid var(--nv-line);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--nv-fg);
    hyphens: auto;
    overflow-wrap: anywhere;
    scroll-margin-top: 16px;
}

.legal-text > .legal-section:first-child > h2:first-child,
.legal-text > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.legal-text h3 {
    margin: 20px 0 6px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--nv-fg);
}

.legal-text p { margin: 0 0 12px; }

.legal-text ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

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

.legal-text strong { font-weight: 600; color: var(--nv-fg); }

.legal-text a:not(.nv-btn) {
    color: var(--nv-tint);
    text-decoration: underline;
    text-decoration-color: rgba(179, 192, 255, 0.4);
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.legal-text a:not(.nv-btn):hover { color: #fff; }

.legal-text a:focus-visible {
    outline: 2px solid var(--nv-focus);
    outline-offset: 2px;
}

.legal-text .legal-teil {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    font-size: 1.3rem;
    font-weight: 700;
}

.legal-text .legal-unterteil {
    margin-top: 28px;
    font-size: 1.05rem;
}

.legal-trenner {
    margin: 40px 0;
    border: 0;
    border-top: 1px solid var(--nv-line);
    opacity: 1;
}

.legal-box {
    margin: 12px 0 16px;
    padding: 14px 16px;
    background: var(--nv-card);
    border: 1px solid var(--nv-card-line);
    border-radius: 12px;
}

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

.legal-box--aktion .nv-btn { margin: 4px 0 0; white-space: normal; }

.legal-box__titel { font-weight: 600; color: var(--nv-fg); }
.legal-box__titel .bi { color: var(--nv-tint); }

.legal-stand {
    margin-top: 32px;
    font-size: 0.85rem;
    color: var(--nv-fg3);
}

/* ── Externe Fassung: eigenes schlankes Geruest (external_base.html) ─────────────────────────────── */

.legal-ext {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) fixed; /* unslop-ignore: Grundflaeche wie base.css */
    color: var(--nv-fg2);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* unslop-ignore: Hausschrift */
}

.legal-ext main { flex: 1 0 auto; }

.legal-ext-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 16px 32px 0;
}

.legal-ext-logo { display: inline-flex; border-radius: 8px; }
.legal-ext-logo img { display: block; width: 150px; height: auto; }
.legal-ext-logo:focus-visible { outline: 2px solid var(--nv-focus); outline-offset: 4px; }

.legal-ext-konto { display: flex; flex-wrap: wrap; gap: 8px; }

.legal-ext-foot {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 8px 32px 32px;
    font-size: 0.8rem;
    color: var(--nv-fg3);
}

.legal-ext-foot nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 8px; }

.legal-ext-foot a {
    color: var(--nv-fg2);
    text-decoration: none;
    border-radius: 4px;
}

.legal-ext-foot a:hover { color: #fff; text-decoration: underline; }
.legal-ext-foot a:focus-visible { outline: 2px solid var(--nv-focus); outline-offset: 2px; }
.legal-ext-foot a[aria-current="page"] { color: #fff; }
.legal-ext-foot p { margin: 0; }

/* ── Widerruf ───────────────────────────────────────────────────────────────────────────────────── */

.legal-wf {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--nv-line);
}

.legal-wf > h2 {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--nv-fg);
    scroll-margin-top: 16px;
}

.legal-wf__satz { margin: 0 0 20px; font-size: 0.9rem; color: var(--nv-fg3); }

.legal-wf fieldset {
    min-width: 0;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}

.legal-wf legend {
    float: none;
    width: auto;
    margin: 0 0 12px;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nv-fg);
}

.legal-wf .nv-group + .nv-group { margin-top: 16px; }
.legal-wf .nv-form-grid > .nv-group { margin-top: 0; }
.legal-wf + .legal-text {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--nv-line);
}
.legal-wf .nv-form-grid + .nv-group,
.legal-wf .nv-group + .nv-form-grid { margin-top: 16px; }

.legal-wf__pflicht { color: var(--nv-fg3); font-weight: 400; }

.legal-wf__erklaerung {
    margin: 0 0 16px;
    padding: 14px 16px;
    background: var(--nv-card);
    border: 1px solid var(--nv-card-line);
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.55;
}

.legal-wf__erklaerung p { margin: 0 0 6px; }
.legal-wf__erklaerung p:last-child { margin: 0; }

.legal-wf__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-top: 8px;
}

.legal-wf__fuss p { margin: 0; font-size: 0.85rem; color: var(--nv-fg3); }
.legal-wf__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-wf__knoepfe .nv-btn { white-space: normal; }

.legal-wf .nv-note { margin-bottom: 20px; }

/* Bestaetigungsseite */
.legal-ok { max-width: 64ch; }
.legal-ok .nv-kv { margin: 16px 0 20px; }
.legal-ok > p { margin: 0 0 12px; line-height: 1.6; }
.legal-ok__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* ── Schmale Bildschirme ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 992px) {
    .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .legal-toc {
        position: static;
        max-height: none;
        background: var(--nv-card);
        border: 1px solid var(--nv-card-line);
        border-radius: 12px;
    }
    .legal-toc summary { min-height: 44px; align-items: center; padding: 10px 14px; }
    .legal-toc ol { padding: 0 6px 8px; }
    .legal-toc a { padding: 10px 10px; }
}

@media (max-width: 768px) {
    .legal-page { padding: 12px 12px 104px; }
    .legal-head__tools > .nv-btn { flex: 1 1 0; min-width: 0; }
    .legal-text { font-size: 0.95rem; }
    .legal-text h2 { font-size: 1.08rem; }
    .legal-ext-bar { padding: 12px 12px 0; }
    .legal-ext-logo img { width: 120px; }
    .legal-ext-foot { padding: 8px 12px 24px; }
    .legal-wf__knoepfe,
    .legal-wf__knoepfe .nv-btn,
    .legal-ok__knoepfe .nv-btn { width: 100%; }
}

/* ── Druck: nur der Text, schwarz auf weiss ─────────────────────────────────────────────────────── */

@media print {
    html,
    body,
    html[data-bs-theme="dark"],
    [data-bs-theme="dark"] body,
    .legal-ext {
        background: #fff;
        color: #000;
    }
    .navbar-glass,
    .mobile-bottom-nav,
    .footer-enhanced,
    .page-loader,
    .nv-toasts,
    .ec-confirm,
    .ec-prompt,
    .legal-toc,
    .legal-head__tools,
    .legal-ext-bar,
    .legal-ext-foot nav,
    .legal-wf {
        display: none;
    }
    .legal-page { max-width: none; padding: 0; }
    .legal-panel {
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
    }
    .legal-head { border-bottom-color: #999; }
    .legal-head h1, .legal-head p { color: #000; }
    .legal-layout { display: block; }
    .legal-text { max-width: none; font-size: 10.5pt; line-height: 1.5; color: #000; }
    .legal-text h2, .legal-text h3, .legal-text strong { color: #000; }
    .legal-text h2 { border-top-color: #bbb; break-after: avoid; }
    .legal-text h3 { break-after: avoid; }
    .legal-text a:not(.nv-btn) { color: #000; }
    .legal-box { background: none; border-color: #999; break-inside: avoid; }
    .legal-box--aktion { display: none; }
    .legal-stand { color: #333; }
}