/* Notentool V2 - gemeinsames, minimales Stylesheet fuer die rechtlichen
   Seiten (Datenschutz/Impressum/Nutzungsbedingungen). Bewusst eigenstaendig
   und leichtgewichtig statt in index.html integriert - reine, statische
   Lesetexte ohne App-Logik, kein Redesign der bestehenden App-Screens. Die
   Farbwerte spiegeln die :root-Variablen aus index.html (helles Thema)
   fuer visuelle Konsistenz, ohne den dortigen Theme-Toggle-Mechanismus
   nachzubauen - @media (prefers-color-scheme) reicht fuer reine Lesetexte. */
:root {
  --bg:#ece7dc; --surface:#faf8f3; --border:#ddd7c8; --text:#1c1b18; --text-2:#3c3a34; --muted:#5f5b52; --accent:#1c1b18;
  --font-serif:'Newsreader',Georgia,serif; --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#1a1814; --surface:#221f1a; --border:#4a4234; --text:#ece7dc; --text-2:#cfc7b6; --muted:#a39a86; --accent:#ece7dc; }
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font-sans);
  line-height:1.6; padding:max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.legal-wrap { max-width:720px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:32px 28px; }
.legal-wrap h1 { font-family:var(--font-serif); font-size:1.7rem; font-weight:600; margin:0 0 6px; text-align:center; }
.legal-sub { text-align:center; color:var(--muted); font-size:0.9rem; margin-bottom:28px; }
.legal-wrap h2 { font-family:var(--font-serif); font-size:1.15rem; font-weight:600; margin:28px 0 8px; }
.legal-wrap h3 { font-size:0.95rem; font-weight:700; margin:18px 0 6px; }
.legal-wrap p, .legal-wrap li { color:var(--text-2); font-size:0.92rem; }
.legal-wrap ul { padding-left:20px; }
.legal-wrap a { color:var(--text); }
/* Tabellenwrapper statt Tabelle direkt: bei schmalen Screens (z.B. 360px)
   sind die Empfaenger-/Provider-Tabellen breiter als der Viewport - lokales
   horizontales Scrollen nur innerhalb der Tabelle, kein Seiten-Overflow
   (gleiches Muster wie table.report in index.html, siehe CLAUDE.md
   "Mobile"-Abschnitt). */
.legal-table-wrap { overflow-x:auto; margin:12px 0; -webkit-overflow-scrolling:touch; }
.legal-wrap table { width:100%; min-width:480px; border-collapse:collapse; font-size:0.85rem; margin:0; }
.legal-wrap th, .legal-wrap td { text-align:left; padding:8px; border-bottom:1px solid var(--border); vertical-align:top; }
.placeholder { background:rgba(200,80,60,0.12); border:1px dashed rgba(200,80,60,0.5); border-radius:6px; padding:2px 6px; font-weight:600; }
.legal-back { display:block; text-align:center; margin-top:28px; font-size:0.85rem; }
.legal-nav { max-width:720px; margin:0 auto 16px; display:flex; justify-content:center; gap:18px; font-size:0.82rem; flex-wrap:wrap; }
.legal-nav a { color:var(--muted); text-decoration:underline; }
@media (max-width:480px) {
  .legal-wrap { padding:22px 16px; border-radius:12px; }
  .legal-wrap h1 { font-size:1.4rem; }
}