/* ============================================================================
   SILENZIO — Unterseiten im sil-stil (12.10.2026)
   Impressum, Datenschutz, Regelwerk, Tastenbelegung.

   Wird NACH start.css geladen: von dort kommen Schriften, Token (`--ss-…`),
   Grundlage, Navigation, Knöpfe und Fußzeile. start.css ist also nicht nur
   die Startseite, sondern auch die Grundlage aller Seiten; hier steht, was
   nur die Unterseiten brauchen. Seitenweise darüber: regelwerk/regelwerk.css
   und tastenbelegung/tasten.css.

   css/style.css und css/fonts.css (Art-Deco, Bodoni/Roboto) lädt keine Seite
   mehr, auch die Teamseite nicht (seit 12.10.2026 im sil-stil, mit eigenem
   team/style.css). Sie liegen nur noch als Altbestand im Webroot.

   Klassen ohne `ss-` (legal, legal-card, box, muted, eyebrow) sind HAKEN: die
   Texte der Seiten und tastenbelegung/tasten.js benutzen sie. Nicht umbenennen.
   ========================================================================== */

/* Leiste der Unterseiten: Marke links, alles Weitere rechts.
   Der Abstand hängt an der MARKE, nicht am Element danach: im Regelwerk ist
   das erste Element dahinter („Inhalt“) ab 1100 px verborgen, ein Abstand
   an ihm wirkte dann nicht und „Startseite“ klebte links an der Marke. */
.nav-inner > .nav-brand { margin-right: auto; }

/* Kennzeile. `eyebrow` ohne `ss-` schreibt tasten.js selbst ins Markup. */
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ss-text-3); }

/* ------------------------------------------------------------- Textseiten */
.legal { padding: 40px var(--ss-gutter) 0; }
.legal-card {
    position: relative;
    max-width: 860px; margin: 0 auto;
    padding: clamp(28px, 5vw, 60px);
    border: 1px solid var(--ss-line-strong); border-radius: var(--ss-r-panel);
    background:
        radial-gradient(ellipse 70% 420px at 0% 0%, rgba(212, 175, 55, 0.075) 0%, rgba(212, 175, 55, 0) 62%),
        linear-gradient(180deg, var(--ss-bg-2) 0%, var(--ss-bg-1) 560px);
    box-shadow: var(--ss-light-top), var(--ss-shadow-panel);
}
/* Lichtkante wie an den Fenstern der Startseite, hier ohne eigenes Element */
.legal-card::before {
    content: ''; position: absolute; top: -1px; left: 22%; right: 22%; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, rgba(240, 210, 122, 0) 0%, rgba(240, 210, 122, 0.75) 50%, rgba(240, 210, 122, 0) 100%);
    box-shadow: 0 0 22px 1px rgba(212, 175, 55, 0.35);
}
.legal h1 {
    margin-top: 14px;
    font-family: var(--ss-display); font-weight: 600; font-size: clamp(28px, 7vw, 52px);
    line-height: 1.08; letter-spacing: -0.02em; word-spacing: 0.06em; color: var(--ss-text);
    /* „Datenschutzerklärung" passt auf dem Handy nicht in eine Zeile */
    hyphens: auto; overflow-wrap: break-word;
}
.legal h2 {
    margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--ss-line);
    font-family: var(--ss-display); font-weight: 600; font-size: 24px;
    line-height: 1.25; word-spacing: 0.06em; color: var(--ss-text);
}
.legal h3 { margin-top: 26px; font-size: 15.5px; font-weight: 700; line-height: 1.5; color: var(--ss-text); }
.legal p, .legal li { font-size: 15.5px; line-height: 1.75; }
.legal p { margin-top: 12px; }
.legal ul, .legal ol { margin-top: 12px; padding-left: 20px; }
.legal li + li { margin-top: 4px; }
.legal li::marker { color: var(--ss-text-3); }
.legal a { overflow-wrap: anywhere; }
.legal address { margin-top: 12px; font-style: normal; line-height: 1.8; color: var(--ss-text); }
.legal strong { font-weight: 600; }
/* Hinweiskasten */
.legal .box {
    margin-top: 18px; padding: 16px 18px;
    border: 1px solid rgba(212, 175, 55, 0.2); border-radius: var(--ss-r-ctl);
    background: var(--ss-gold-06);
}
.legal .box p:first-child { margin-top: 0; }
.legal .muted { font-size: 13.5px; color: var(--ss-text-3); }
.legal .ss-eyebrow { margin-top: 0; font-size: 12px; line-height: 1.6; }

@media (max-width: 560px) {
    .legal { padding-top: 28px; }
}