/* Rechtsseiten der Eltern-App (29.10.2026): /eltern-app/{datenschutz,nutzungsbedingungen,impressum,lizenzen}/
   Ergänzt v9.css + v10.css. Die App verlinkt diese Seiten, darum gut lesbar am Handy. */

/* Handy: 16px Rand statt 24px, lange Wörter und URLs umbrechen */
@media (max-width:600px){
  .wrap{ width:calc(100% - 32px); }
}
.legal{ max-width:760px; margin:0 auto; overflow-wrap:break-word; }
.hero.sub .lede{ max-width:640px; }
.hero.sub h1{ font-size:clamp(34px, 5.4vw, 64px); hyphens:auto; -webkit-hyphens:auto; }

/* Querverweise auf die anderen drei Seiten */
.legal-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:28px; }
.legal-nav a{ min-height:44px; display:inline-flex; align-items:center; padding:0 18px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:14.5px; font-weight:400; text-decoration:none; transition:border-color .2s, color .2s; }
.legal-nav a:hover{ border-color:var(--blue); color:var(--blue); }
.legal-nav a[aria-current="page"]{ background:var(--ink); border-color:var(--ink); color:#fff; }

.legal-sec{ padding:56px 0 100px; }
.legal h2{ font-size:clamp(24px, 3vw, 30px); letter-spacing:-.03em; line-height:1.2; margin-top:56px; scroll-margin-top:calc(var(--nav-h) + 16px); }
.legal h2:first-child{ margin-top:0; }
.legal h3{ font-size:18.5px; line-height:1.35; margin-top:30px; }
.legal p, .legal li{ font-size:16.5px; line-height:1.7; }
.legal p{ margin-top:14px; }
.legal ul, .legal ol{ margin-top:12px; padding-left:22px; display:grid; gap:6px; }
.legal a{ color:var(--blue-d); text-decoration-thickness:1px; text-underline-offset:3px; }
.legal strong, .legal b{ color:var(--ink); font-weight:500; }

/* Hinweiskasten und Karte für Stammdaten */
.legal-box{ margin-top:22px; padding:20px 22px; border-radius:18px; background:var(--tint-2); border:1px solid var(--line); }
.legal-box > :first-child{ margin-top:0; }
.legal-box.blue{ background:var(--tint); border-color:#d3e0fa; }
.legal-box.warn{ background:#fff6ec; border-color:#f6dcc0; }

/* Inhaltsverzeichnis */
.legal-toc{ margin-bottom:56px; padding:22px 24px; border-radius:18px; border:1px solid var(--line); background:#fff; }
.legal-toc b{ display:block; font-size:15px; color:var(--ink); font-weight:500; }
.legal-toc ol{ margin-top:10px; padding-left:20px; gap:4px; }
.legal-toc li{ font-size:15px; line-height:1.5; }
.legal-toc a{ text-decoration:none; color:var(--text); }
.legal-toc a:hover{ color:var(--blue); }

/* Definitionsliste (Kontakt, Register) */
.legal-dl{ display:grid; grid-template-columns:minmax(120px, auto) 1fr; gap:8px 20px; margin:0; }
.legal-dl dt{ color:var(--muted); font-size:15px; }
.legal-dl dd{ margin:0; color:var(--ink); font-size:16px; }
@media (max-width:520px){ .legal-dl{ grid-template-columns:1fr; gap:2px; } .legal-dl dd{ margin-bottom:10px; } }

/* Tabellen: am Handy waagerecht scrollbar statt die Seite zu verbreitern */
.table-scroll{ margin-top:18px; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:16px; background:#fff; }
.legal table{ width:100%; border-collapse:collapse; font-size:14.5px; line-height:1.5; min-width:560px; }
.legal th, .legal td{ text-align:left; vertical-align:top; padding:12px 14px; border-top:1px solid var(--line); }
.legal thead th{ border-top:0; background:var(--tint-2); color:var(--ink); font-weight:500; }
.legal td:first-child{ color:var(--ink); font-weight:400; }
@media (max-width:600px){
  .legal table{ min-width:0; font-size:13.5px; }
  .legal th, .legal td{ padding:10px 10px; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:anywhere; }
}

/* Lizenztexte */
.legal details{ margin-top:16px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.legal summary{ cursor:pointer; padding:14px 18px; min-height:44px; color:var(--ink); font-weight:500; font-size:15.5px; }
.legal pre{ margin:0; padding:4px 18px 18px; white-space:pre-wrap; overflow-wrap:anywhere; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; line-height:1.55; color:var(--text); }

.legal-stand{ margin-top:48px !important; font-size:14px !important; color:var(--muted); }
@media (max-width:900px){ .legal-sec{ padding:40px 0 80px; } .legal h2{ margin-top:44px; } }