/* topurl – gemeinsames Theme (Variante A) inkl. Dark-Mode.
   Eingebunden von index.html, impressum.html, datenschutz.html */

:root {
  --bg:#f1f5f9; --surface:#ffffff; --surface-2:#f8fafc;
  --border:#e2e8f0; --border-strong:#cbd5e1;
  --text:#0f172a; --muted:#64748b; --muted-2:#94a3b8;
  --accent:#1d4ed8; --accent-hover:#1e40af;
  --soft-bg:#eff6ff; --soft-border:#dbeafe; --soft-text:#1d4ed8;
  --ink-btn:#0f172a; --ink-btn-hover:#1e293b;
}
html.dark {
  --bg:#0b1120; --surface:#111827; --surface-2:#0b1120;
  --border:#1f2937; --border-strong:#334155;
  --text:#e2e8f0; --muted:#94a3b8; --muted-2:#64748b;
  --accent:#3b82f6; --accent-hover:#2563eb;
  --soft-bg:rgba(59,130,246,.1); --soft-border:rgba(59,130,246,.28); --soft-text:#60a5fa;
  --ink-btn:#1e293b; --ink-btn-hover:#334155;
}

body { font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); }
body, .surface, .panel, .seg, .field { transition: background-color .18s ease, border-color .18s ease, color .18s ease; }

/* Flächen & Linien */
.surface { background:var(--surface); }
.b-bottom { border-bottom:1px solid var(--border); }
.b-top { border-top:1px solid var(--border); }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:8px; }
.muted { color:var(--muted); }
.muted-2 { color:var(--muted-2); }
.divider { border-color:var(--border); }
.badge { color:var(--soft-text); background:var(--soft-bg); border:1px solid var(--soft-border); }

/* Formulare */
.lbl { display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.field { width:100%; border:1px solid var(--border-strong); border-radius:6px; padding:10px 12px; font-size:14px; background:var(--surface); color:var(--text); }
.field:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,130,246,.18); }
select.field { height:42px; }
.colorbox { border:1px solid var(--border-strong); border-radius:6px; background:var(--surface); }

/* Generator-spezifisch */
.seg { display:flex; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.seg [role=tab] { flex:1; padding:10px 8px; font-size:14px; font-weight:500; color:var(--muted); background:var(--surface-2); border-right:1px solid var(--border); transition:all .12s; }
.seg [role=tab]:last-child { border-right:0; }
.seg [role=tab][aria-selected=true] { background:var(--surface); color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); font-weight:600; }
.swatch { width:30px; height:30px; border-radius:6px; border:1px solid var(--border); cursor:pointer; }
.swatch.active { box-shadow:0 0 0 2px var(--accent); border-color:var(--surface); }
#qr-preview { background:#fff; border:1px solid var(--border); border-radius:8px; padding:8px; }

/* Buttons */
.btn-primary { background:var(--accent); color:#fff; font-weight:600; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-ink { background:var(--ink-btn); color:#fff; font-weight:600; }
.btn-ink:hover { background:var(--ink-btn-hover); }
.btn-outline { border:1px solid var(--border-strong); color:var(--text); }
.btn-outline:hover { background:var(--surface-2); }
.icon-btn { color:var(--muted); border:1px solid var(--border); }
.icon-btn:hover { color:var(--text); background:var(--surface-2); }

/* Theme-Toggle Icons */
html:not(.dark) .theme-sun { display:none; }
html.dark .theme-moon { display:none; }

/* Rechtstexte (Impressum / Datenschutz) */
.legal h1 { font-size:1.875rem; font-weight:800; color:var(--text); margin-bottom:1.5rem; }
.legal h2 { font-size:1.2rem; font-weight:700; color:var(--text); margin-top:2rem; margin-bottom:.6rem; }
.legal h3 { font-size:1rem; font-weight:600; color:var(--text); margin-top:1.1rem; margin-bottom:.4rem; }
.legal p { color:var(--muted); line-height:1.7; margin-bottom:.6rem; }
.legal ul { color:var(--muted); line-height:1.7; list-style:disc; padding-left:1.3rem; margin-bottom:.6rem; }
.legal strong { color:var(--text); }
.legal a { color:var(--accent); text-decoration:underline; }
.legal a:hover { color:var(--accent-hover); }