/* login.css (webauth 2.3) – Anmeldeseite und Seite „Sicherheit“.
   Tokens wie app-standard/DESIGN.md §3; Hex-Werte nur in den Token-Blöcken.
   Akzent: kommt aus den Metas auth-accent-* und wird von auth-client.js zur Laufzeit geprüft
   (Knopftext ≥ 4,5:1, Fokusring ≥ 3:1) und als Regel :root.wa-farben gesetzt – kein Inline-Style.
   Theme: System (prefers-color-scheme); html[data-theme="light|dark"] (localStorage 'theme') hat Vorrang. */
:root { color-scheme: dark; --bg:#131519; --surface:#1b1e23; --raised:#22262c; --line:#2b3037; --line-strong:#3a4049;
    --field-border:#6b7280; --text:#e6e8eb; --text-2:#a0a6af; --text-3:#7b818b; --danger:#ef6f67; --ok:#5ec27a;
    --accent:#e0529c; --accent-ink:#16080f; --focus:var(--accent); --tap:44px; }
  @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg:#f2f3f5; --surface:#fff;
    --raised:#f7f8fa; --line:#e1e3e7; --line-strong:#c9cdd3; --field-border:#858b94; --text:#17191d; --text-2:#4b515a;
    --text-3:#6b717a; --danger:#b3261e; --ok:#1e7b3a; --accent:#b5307a; --accent-ink:#fff; } }
  :root[data-theme="light"] { color-scheme: light; --bg:#f2f3f5; --surface:#fff; --raised:#f7f8fa; --line:#e1e3e7;
    --line-strong:#c9cdd3; --field-border:#858b94; --text:#17191d; --text-2:#4b515a; --text-3:#6b717a; --danger:#b3261e;
    --ok:#1e7b3a; --accent:#b5307a; --accent-ink:#fff; }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body { margin:0; min-height:100vh; display:grid; place-items:center; padding:16px; background:var(--bg); color:var(--text);
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-wrap:break-word; }
  main { width:min(420px, 100%); }
  main > form, .card { width:100%; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:24px;
    display:flex; flex-direction:column; gap:12px; }
  .card form { display:flex; flex-direction:column; gap:12px; }
  h1 { font-size:1.375rem; margin:0; }
  h2 { font-size:1rem; margin:8px 0 0; }
  p { margin:0; color:var(--text-2); font-size:.875rem; }
  label { display:flex; flex-direction:column; gap:4px; font-size:.8125rem; color:var(--text-2); }
  /* Felder: Rahmen --field-border (≥ 3:1 zu --surface/--raised, WCAG 1.4.11) */
  input { min-height:var(--tap); padding:0 12px; border:1px solid var(--field-border); border-radius:6px; background:var(--raised);
    color:var(--text); font:inherit; }
  input::placeholder { color:var(--text-3); opacity:1; }
  input[inputmode="numeric"] { letter-spacing:.2em; font-variant-numeric:tabular-nums; }
  label.check { flex-direction:row; align-items:flex-start; gap:10px; font-size:.875rem; color:var(--text); cursor:pointer; }
  label.check input { min-height:0; width:20px; height:20px; margin:1px 0 0; flex:none; accent-color:var(--accent); }
  /* Knöpfe: einzeilig (UI-PRUEFUNG §2.11), Höhe --tap */
  button { min-height:var(--tap); border:0; border-radius:6px; background:var(--accent); color:var(--accent-ink); font:inherit;
    font-weight:600; cursor:pointer; padding:0 14px; white-space:nowrap; display:inline-flex; align-items:center;
    justify-content:center; gap:6px; }
  button.secondary { background:transparent; color:var(--text); border:1px solid var(--field-border); font-weight:500; }
  button.link { background:none; border:0; padding:0; color:var(--text-2); font-weight:400; text-decoration:underline;
    justify-content:flex-start; text-align:left; align-self:flex-start; }
  button.danger { background:transparent; color:var(--danger); border:1px solid var(--field-border); font-weight:500; }
  button[disabled] { opacity:.6; }
  .error { color:var(--danger); font-size:.8125rem; min-height:1.2em; }
  .error:empty { min-height:0; }
  .hint { font-size:.8125rem; }
  .divider { border-top:1px solid var(--line); padding-top:12px; margin-top:4px; display:flex; flex-direction:column; gap:12px; }
  .qr { width:220px; height:220px; align-self:center; border-radius:6px; background:#fff; image-rendering:pixelated; }
  .secret { display:block; padding:10px 12px; background:var(--raised); border:1px solid var(--line); border-radius:6px;
    font:600 .9375rem/1.4 ui-monospace, "JetBrains Mono", Menlo, monospace; letter-spacing:.06em;
    overflow-wrap:anywhere; user-select:all; }
  .wa-codes { margin:0; padding:12px 12px 12px 36px; background:var(--raised); border:1px solid var(--line); border-radius:6px;
    columns:2; column-gap:24px; font:600 .9375rem/1.9 ui-monospace, "JetBrains Mono", Menlo, monospace; }
  .wa-actions { display:flex; gap:8px; flex-wrap:wrap; }
  .wa-actions > button { flex:1 1 160px; }
  :focus-visible { outline:2px solid var(--focus); outline-offset:2px; }

  /* Seite „Sicherheit“ */
  body.page { display:block; padding-top:0; }
  .page main { width:min(760px, 100%); min-width:0; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
  .page .card { width:100%; }
  /* Kopf bleibt beim Scrollen stehen (UI-PRUEFUNG §2.2) */
  .page header { position:sticky; top:0; z-index:5; background:var(--bg); padding:8px 0; display:flex; align-items:center;
    justify-content:space-between; gap:4px 12px; flex-wrap:wrap; border-bottom:1px solid var(--line); }
  .page header a { color:var(--text-2); font-size:.875rem; display:inline-flex; align-items:center; min-height:var(--tap);
    overflow-wrap:anywhere; }
  /* Bis die Daten da sind: Karten ausgeblendet statt nachträglich wachsend (kein Layout-Sprung, UI-CLS) */
  .page main[aria-busy="true"] > section { display:none; }
  .laden { display:none; }
  .page main[aria-busy="true"] > .laden { display:block; padding:24px 0; }
  .status { display:inline-flex; align-items:center; gap:6px; font-size:.8125rem; color:var(--text-2); }
  .status::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--line-strong); flex:none; }
  .status.on::before { background:var(--ok); }
  .status.off::before { background:var(--danger); }
  .rows { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
  .rows li { display:flex; align-items:center; justify-content:space-between; gap:8px 12px; padding:10px 0;
    border-top:1px solid var(--line); flex-wrap:wrap; min-height:57px; overflow-wrap:anywhere; }
  .rows li:first-child { border-top:0; }
  .rows li > div:first-child { flex:1 1 14rem; min-width:0; overflow-wrap:anywhere; }
  .rows .meta { font-size:.8125rem; color:var(--text-2); }
  .rows .meta.status { display:flex; margin-top:2px; }
  .rows .acts { display:flex; gap:8px; flex-wrap:wrap; }
  .rows .acts button, .rows .acts a.btn { min-height:36px; font-size:.8125rem; }
  a.btn { display:inline-flex; align-items:center; justify-content:center; padding:0 14px; border:1px solid var(--field-border);
    border-radius:6px; color:var(--text); text-decoration:none; font-weight:500; white-space:nowrap; min-height:var(--tap); }
  .events { width:100%; border-collapse:collapse; font-size:.8125rem; }
  .events th, .events td { text-align:left; padding:6px 8px 6px 0; border-top:1px solid var(--line); vertical-align:top; }
  .events td { overflow-wrap:anywhere; }
  .events .ip { white-space:nowrap; }   /* Adressen nicht mitten in der Zahl umbrechen */
  .events th { color:var(--text-2); font-weight:500; border-top:0; }
  .events td.bad { color:var(--danger); }
  .events .ts { white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--text-2); }
  .table-wrap { overflow-x:auto; }
  /* Netze als einzelne Chips: Umbruch nur zwischen den Netzen, nie mitten in einer Adresse (UI-WORTBRUCH) */
  .secret.nets { font-size:.8125rem; font-weight:500; letter-spacing:0; display:flex; flex-wrap:wrap; gap:4px 6px; }
  .secret.nets .net { white-space:nowrap; overflow-wrap:anywhere; }
  .secret.nets .net:not(:last-child)::after { content:","; }
  /* Touch: alle Bedienelemente ≥ 44 px (UI-PRUEFUNG §2.6) */
  @media (pointer: coarse) {
    .rows .acts button, .rows .acts a.btn { min-height:var(--tap); min-width:var(--tap); }
  }
  @media (max-width: 520px) {
    .wa-codes { columns:1; }
    .events, .events tbody { display:block; }
    .events thead, .events .ip { display:none; }
    .events tr { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:0 8px; border-top:1px solid var(--line); padding:6px 0; }
    .events td { border:0; padding:0; }
    .events .ts { white-space:normal; }
    .events td:last-child { grid-column:1 / -1; color:var(--text-2); }
  }
  /* Sprungziele (#f-title, #t-title) nicht unter dem festen Kopf verstecken */
  .page [id] { scroll-margin-top:80px; }