/*
 * HP-CRM Betreiberkonsole — Stylesheet.
 *
 * Übernommen aus dem freigegebenen Entwurf (entwuerfe/konsole/
 * HP-CRM_Konsole_Entwurf_2026-10-01.html), damit die gebaute Konsole so
 * aussieht wie der Entwurf. Ohne Banner (kein Entwurf mehr), dazu am Ende die
 * Teile, die nur die gebaute Konsole braucht: das Protokollfenster eines
 * Vorgangs und die Kopierzeile des Schlüssels.
 */

  :root {
    --navy-950:#0b1826; --navy-900:#0f2233; --navy-800:#17304a; --navy-700:#1d3a57; --navy-600:#22425f;
    --gold:#b08422; --gold-hell:#d9ae4b; --gold-blass:#fdf6e6;
    --grund:#f2f5f8; --flaeche:#ffffff; --flaeche-2:#f7f9fb; --kante:#e2e8f0; --kante-stark:#cbd5e1;
    --text:#16202b; --text-leise:#56626f; --text-sehr-leise:#6b7784;
    --akzent:#22425f; --akzent-blass:#eef3f8; --fokus:#3a6ea5;
    --stoerung:#b42318; --stoerung-blass:#fdecea; --stoerung-kante:#f4c7c1;
    --hinweis:#8a5a00; --hinweis-blass:#fdf5e1; --hinweis-kante:#f0d9a2;
    --gut:#2f7d5c; --gut-blass:#e8f4ee; --gut-kante:#bfdfcd;
    --ruhig:#6b7784; --ruhig-blass:#eef1f4;
    --blau:#2f5f8f; --blau-blass:#e9f0f8; --blau-kante:#c5d6ea;
    --haupt-grund:#0f2233; --haupt-text:#ffffff;
    --leiste:#0e1822; --leiste-text:#c9d4df; --leiste-leise:#7c8ea1; --leiste-an:#1d3a57;
    --balken:#22425f; --balken-leise:#c5d6ea;
    --schatten:0 1px 2px rgba(15,34,51,.06), 0 4px 16px rgba(15,34,51,.05);
    --radius:10px; color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --grund:#0c141d; --flaeche:#131e2a; --flaeche-2:#172434; --kante:#243446; --kante-stark:#314459;
      --text:#e6ecf2; --text-leise:#a8b4c0; --text-sehr-leise:#8a98a7;
      --akzent:#9dbbdc; --akzent-blass:#1b2c3e; --fokus:#5b8fd0; --gold-blass:#2d2413;
      --stoerung:#f28b80; --stoerung-blass:#3a1d1b; --stoerung-kante:#5c2c28;
      --hinweis:#e7b75a; --hinweis-blass:#33290f; --hinweis-kante:#5a4718;
      --gut:#6cc49b; --gut-blass:#15301f; --gut-kante:#27513a;
      --ruhig:#8a98a7; --ruhig-blass:#1d2a38;
      --blau:#8fb4dc; --blau-blass:#182a3d; --blau-kante:#2b4560;
      --haupt-grund:#dbe6f1; --haupt-text:#0f2233;
      --leiste:#080f16; --leiste-an:#1b2c3e;
      --balken:#8fb4dc; --balken-leise:#2b4560;
      --schatten:0 1px 2px rgba(0,0,0,.3); color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --grund:#0c141d; --flaeche:#131e2a; --flaeche-2:#172434; --kante:#243446; --kante-stark:#314459;
    --text:#e6ecf2; --text-leise:#a8b4c0; --text-sehr-leise:#8a98a7;
    --akzent:#9dbbdc; --akzent-blass:#1b2c3e; --fokus:#5b8fd0; --gold-blass:#2d2413;
    --stoerung:#f28b80; --stoerung-blass:#3a1d1b; --stoerung-kante:#5c2c28;
    --hinweis:#e7b75a; --hinweis-blass:#33290f; --hinweis-kante:#5a4718;
    --gut:#6cc49b; --gut-blass:#15301f; --gut-kante:#27513a;
    --ruhig:#8a98a7; --ruhig-blass:#1d2a38;
    --blau:#8fb4dc; --blau-blass:#182a3d; --blau-kante:#2b4560;
    --haupt-grund:#dbe6f1; --haupt-text:#0f2233;
    --leiste:#080f16; --leiste-an:#1b2c3e;
    --balken:#8fb4dc; --balken-leise:#2b4560;
    --schatten:0 1px 2px rgba(0,0,0,.3); color-scheme: dark;
  }
  * { box-sizing:border-box; }
  html,body { margin:0; padding:0; }
  html { overflow-x:clip; }
  body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    background:var(--grund); color:var(--text); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
  h1,h2,h3,h4 { margin:0; font-weight:600; text-wrap:balance; }
  p { margin:0; }
  a { color:var(--akzent); }
  button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
  button:disabled { cursor:not-allowed; }
  input,select,textarea { font:inherit; color:inherit; }
  :focus-visible { outline:2px solid var(--fokus); outline-offset:2px; border-radius:4px; }
  .zahl { font-variant-numeric:tabular-nums; }
  .versteckt { display:none !important; }
  code, .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; }
  @media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

  /* Banner */
  .banner { position:sticky; top:0; z-index:60; display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center;
    padding:7px 16px; background:var(--gold-blass); border-bottom:1px solid var(--hinweis-kante); color:var(--hinweis); font-size:13px; }
  .banner b { color:var(--text); }
  .banner .sp { flex:1; }
  .schalter { display:inline-flex; border:1px solid var(--hinweis-kante); border-radius:8px; overflow:hidden; background:var(--flaeche); }
  .schalter button { padding:4px 12px; color:var(--text-leise); }
  .schalter button[aria-pressed="true"] { background:var(--haupt-grund); color:var(--haupt-text); }
  .rundknopf { width:30px; height:30px; border-radius:50%; border:1px solid var(--hinweis-kante); background:var(--flaeche); color:var(--text); display:inline-grid; place-items:center; }

  /* Anmeldung */
  .anmeldung { min-height:100vh; display:grid; place-items:center; padding:32px 16px;
    background:radial-gradient(1200px 500px at 15% -10%, rgba(176,132,34,.10), transparent 60%), var(--grund); }
  .anmeldekarte { width:min(420px, 100%); background:var(--flaeche); border:1px solid var(--kante); border-radius:14px; box-shadow:var(--schatten); overflow:hidden; }
  .anmeldekarte .kopfteil { padding:22px 24px 16px; border-bottom:1px solid var(--kante); }
  .anmeldekarte .koerper { padding:18px 24px 22px; display:grid; gap:14px; }
  .anmeldekarte .fuss { padding:12px 24px; background:var(--flaeche-2); border-top:1px solid var(--kante); font-size:12.5px; color:var(--text-sehr-leise); }
  .marke-gross { display:flex; gap:12px; align-items:center; }
  .marke-gross i { width:40px; height:40px; border-radius:9px; background:var(--gold); color:#0f2233; display:grid; place-items:center; font-style:normal; font-weight:800; letter-spacing:-.02em; }
  .marke-gross b { display:block; font-size:18px; letter-spacing:-.01em; }
  .marke-gross small { color:var(--text-leise); }
  .codefeld { font-family:ui-monospace,Menlo,monospace; font-size:22px !important; letter-spacing:.35em; text-align:center; }
  .schrittpunkte { display:flex; gap:6px; margin-top:12px; }
  .schrittpunkte span { height:4px; flex:1; border-radius:999px; background:var(--kante); }
  .schrittpunkte span.an { background:var(--gold); }

  /* Rahmen */
  .rahmen { display:flex; min-height:100vh; }
  .leiste { width:236px; flex-shrink:0; background:var(--leiste); color:var(--leiste-text); padding:14px 10px 20px; }
  .leiste-innen { position:sticky; top:14px; }
  .marke { display:flex; gap:10px; align-items:center; padding:2px 6px 14px; color:#fff; }
  .marke i { width:32px; height:32px; border-radius:8px; background:var(--gold); color:#0f2233; display:grid; place-items:center; font-style:normal; font-weight:800; font-size:13px; }
  .marke b { display:block; font-size:15px; line-height:1.1; }
  .marke small { color:var(--leiste-leise); font-size:11.5px; }
  .gruppe { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--leiste-leise); padding:14px 8px 4px; }
  .punkt { display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; border-radius:7px; color:#d6dee7; font-size:13.5px; white-space:nowrap; text-decoration:none; text-align:left; }
  .punkt:hover { background:rgba(255,255,255,.06); }
  .punkt[aria-current="page"] { background:var(--leiste-an); color:#fff; }
  .punkt .zahlmarke { margin-left:auto; min-width:20px; height:19px; padding:0 6px; border-radius:999px; font-size:11px; font-weight:700; display:inline-grid; place-items:center; background:rgba(255,255,255,.12); color:#fff; }
  .punkt .zahlmarke.rot { background:#c2412f; }
  .punkt .zahlmarke.gelb { background:#a67614; }
  .inhalt { flex:1; min-width:0; }
  .kopf { display:flex; align-items:center; gap:12px; padding:9px 24px; background:var(--flaeche); border-bottom:1px solid var(--kante); }
  .kopf .wer { text-align:right; font-size:13px; line-height:1.2; }
  .kopf .wer small { color:var(--text-sehr-leise); }
  .kopf .sp { flex:1; }
  .menueknopf { display:none; padding:6px 10px; border-radius:8px; border:1px solid var(--kante-stark); }
  .sitzung { font-size:12px; color:var(--text-sehr-leise); white-space:nowrap; }
  main { padding:22px 28px 80px; max-width:1280px; }
  @media (max-width: 900px) {
    .leiste { display:none; }
    body.menue-offen .leiste { display:block; position:fixed; z-index:70; top:0; bottom:0; left:0; overflow:auto; box-shadow:0 0 40px rgba(0,0,0,.4); }
    .menueknopf { display:inline-flex; }
    main { padding:18px 16px 80px; } .kopf { padding:9px 16px; } .sitzung { display:none; }
  }

  .zurueck { font-size:13px; color:var(--akzent); text-decoration:none; }
  .titelzeile { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:flex-end; margin:4px 0 18px; }
  .titelzeile h1 { font-size:24px; letter-spacing:-.01em; }
  .titelzeile p { color:var(--text-leise); max-width:72ch; margin-top:4px; }
  .titelzeile .sp { flex:1; }

  /* Karten */
  .raster { display:grid; gap:16px; }
  .zwei { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .drei { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .breit-schmal { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
  @media (max-width: 1000px) { .drei { grid-template-columns:repeat(2, minmax(0,1fr)); } .breit-schmal { grid-template-columns:1fr; } }
  @media (max-width: 760px) { .zwei, .drei { grid-template-columns:1fr; } }
  .karte { background:var(--flaeche); border:1px solid var(--kante); border-radius:var(--radius); box-shadow:var(--schatten); min-width:0; }
  .kkopf { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:flex-start; padding:14px 18px 12px; border-bottom:1px solid var(--kante); }
  .kkopf h2, .kkopf h3 { font-size:15.5px; }
  .kkopf .unter { color:var(--text-leise); font-size:13px; margin-top:3px; max-width:72ch; }
  .kkopf .sp { flex:1; }
  .kkoerper { padding:14px 18px 16px; }
  .kfuss { padding:12px 18px; border-top:1px solid var(--kante); background:var(--flaeche-2); border-radius:0 0 var(--radius) var(--radius); display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
  .kfuss .sp { flex:1; }
  .abschnittstitel { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-sehr-leise); font-weight:600; margin:26px 0 10px; }
  .abschnittstitel:first-child { margin-top:0; }

  .kpi { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
  @media (max-width: 1000px) { .kpi { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width: 520px) { .kpi { grid-template-columns:1fr; } }
  .kachel { padding:14px 16px; }
  .kachel .etikett { font-size:12px; color:var(--text-leise); font-weight:600; display:flex; gap:6px; align-items:center; }
  .kachel .gross { font-size:26px; font-weight:650; letter-spacing:-.01em; margin-top:4px; font-variant-numeric:tabular-nums; }
  .kachel .zeile { font-size:12.5px; color:var(--text-leise); margin-top:3px; }
  .kachel .zeile b { color:var(--text); font-weight:600; }
  .kachel.rot { border-color:var(--stoerung-kante); }
  .kachel.rot .gross { color:var(--stoerung); }
  .muster { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--hinweis); background:var(--hinweis-blass); border:1px solid var(--hinweis-kante); border-radius:5px; padding:0 5px; }

  /* Knöpfe */
  .knopf { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 14px; border-radius:8px; font-weight:600; font-size:13.5px;
    border:1px solid var(--kante-stark); background:var(--flaeche); color:var(--text); white-space:nowrap; text-decoration:none; }
  .knopf:hover:not(:disabled) { border-color:var(--akzent); }
  .knopf.haupt { background:var(--haupt-grund); border-color:var(--haupt-grund); color:var(--haupt-text); }
  .knopf.gefahr { color:var(--stoerung); border-color:var(--stoerung-kante); }
  .knopf.leise { border-color:transparent; background:transparent; color:var(--akzent); padding-left:6px; padding-right:6px; }
  .knopf.muster-knopf { border-style:dashed; color:var(--hinweis); border-color:var(--hinweis-kante); background:var(--hinweis-blass); }
  .knopf.klein { padding:5px 10px; font-size:12.5px; }
  .knopf.voll { width:100%; }
  .knopf:disabled { opacity:.5; }
  .knopfreihe { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .grund { font-size:12.5px; color:var(--text-sehr-leise); }
  .leise { color:var(--text-leise); }

  /* Pillen */
  .pille { display:inline-flex; align-items:center; gap:5px; padding:1px 9px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid; white-space:nowrap; }
  .pille.gut { color:var(--gut); background:var(--gut-blass); border-color:var(--gut-kante); }
  .pille.hinweis { color:var(--hinweis); background:var(--hinweis-blass); border-color:var(--hinweis-kante); }
  .pille.stoerung { color:var(--stoerung); background:var(--stoerung-blass); border-color:var(--stoerung-kante); }
  .pille.ruhig { color:var(--ruhig); background:var(--ruhig-blass); border-color:var(--kante); }
  .pille.blau { color:var(--blau); background:var(--blau-blass); border-color:var(--blau-kante); }

  /* Rückmeldung */
  .meldung { margin-top:12px; padding:10px 14px; border-radius:8px; font-size:13.5px; border:1px solid; }
  .meldung:first-child { margin-top:0; }
  .meldung.gut { background:var(--gut-blass); border-color:var(--gut-kante); }
  .meldung.hinweis { background:var(--hinweis-blass); border-color:var(--hinweis-kante); }
  .meldung.stoerung { background:var(--stoerung-blass); border-color:var(--stoerung-kante); }
  .meldung.info { background:var(--blau-blass); border-color:var(--blau-kante); }
  .meldung b { font-weight:600; }

  /* Hinweisliste */
  .aufgaben { list-style:none; margin:0; padding:0; }
  .aufgaben li { display:flex; gap:12px; align-items:flex-start; padding:12px 18px; }
  .aufgaben li + li { border-top:1px solid var(--kante); }
  .aufgaben .punktmarke { width:22px; height:22px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:12px; font-weight:800; margin-top:1px; border:1px solid; }
  .aufgaben .stoerung .punktmarke { background:var(--stoerung-blass); color:var(--stoerung); border-color:var(--stoerung-kante); }
  .aufgaben .hinweis .punktmarke { background:var(--hinweis-blass); color:var(--hinweis); border-color:var(--hinweis-kante); }
  .aufgaben .info .punktmarke { background:var(--blau-blass); color:var(--blau); border-color:var(--blau-kante); }
  .aufgaben .gut .punktmarke { background:var(--gut-blass); color:var(--gut); border-color:var(--gut-kante); }
  .aufgaben .titel { font-weight:600; }
  .aufgaben .text { color:var(--text-leise); font-size:13px; margin-top:2px; }
  .aufgaben .sp { flex:1; min-width:0; }
  .aufgaben .wo { font-size:12px; color:var(--text-sehr-leise); }
  .leerzustand { padding:22px 18px; color:var(--text-leise); text-align:center; }

  /* Reiter */
  .reiter { display:flex; gap:2px; margin:18px 0 18px; border-bottom:1px solid var(--kante); overflow-x:auto; scrollbar-width:thin; }
  .reiter button { padding:9px 14px 10px; color:var(--text-leise); font-weight:500; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px; display:inline-flex; gap:7px; align-items:center; }
  .reiter button:hover { color:var(--text); }
  .reiter button[aria-selected="true"] { color:var(--text); border-bottom-color:var(--gold); font-weight:600; }
  .marke-zahl { min-width:20px; padding:0 6px; height:19px; border-radius:999px; font-size:11.5px; font-weight:700; display:inline-grid; place-items:center; background:var(--hinweis-blass); color:var(--hinweis); border:1px solid var(--hinweis-kante); }
  .marke-zahl.rot { background:var(--stoerung-blass); color:var(--stoerung); border-color:var(--stoerung-kante); }

  /* Tabellen */
  .filterzeile { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
  .filterchips { display:flex; flex-wrap:wrap; gap:6px; }
  .filterchips button { padding:5px 11px; border-radius:999px; border:1px solid var(--kante-stark); font-size:13px; color:var(--text-leise); background:var(--flaeche); }
  .filterchips button[aria-pressed="true"] { background:var(--akzent-blass); color:var(--akzent); border-color:var(--akzent); font-weight:600; }
  .suche { padding:7px 11px; border-radius:8px; border:1px solid var(--kante-stark); background:var(--flaeche); min-width:220px; }
  .tabellenrahmen { overflow-x:auto; position:relative; }
  table { width:100%; border-collapse:collapse; font-size:13.5px; }
  th { text-align:left; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-sehr-leise); font-weight:600; padding:9px 12px; border-bottom:1px solid var(--kante); white-space:nowrap; }
  th.r, td.r { text-align:right; }
  td { padding:9px 12px; border-bottom:1px solid var(--kante); vertical-align:top; }
  tr:last-child td { border-bottom:none; }
  td .klein { font-size:12.5px; color:var(--text-leise); }
  tr.klickbar { cursor:pointer; }
  tr.klickbar:hover td { background:var(--flaeche-2); }
  tfoot td { font-weight:600; background:var(--flaeche-2); }

  .herz { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
  .herz::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--gut); flex-shrink:0; }
  .herz.alt::before { background:var(--stoerung); }
  .herz.warte::before { background:var(--ruhig); }
  .platte { display:inline-block; width:64px; height:6px; border-radius:999px; background:var(--kante); vertical-align:middle; overflow:hidden; margin-right:6px; }
  .platte span { display:block; height:100%; background:var(--gut); }
  .platte.mittel span { background:var(--gold); }
  .platte.knapp span { background:var(--stoerung); }

  /* 14-Tage-Streifen */
  .streifen { display:inline-flex; gap:2px; vertical-align:middle; }
  .streifen i { width:7px; height:16px; border-radius:2px; background:var(--gut); }
  .streifen i.h { background:var(--gold); }
  .streifen i.s { background:var(--stoerung); }
  .streifen i.n { background:var(--kante); }
  .laeufe { display:inline-flex; gap:3px; flex-wrap:wrap; }
  .lauf { display:inline-flex; align-items:center; gap:2px; font-size:11px; font-weight:700; padding:0 5px; height:19px; border-radius:5px; border:1px solid; }
  .lauf.ok { color:var(--gut); background:var(--gut-blass); border-color:var(--gut-kante); }
  .lauf.fehler { color:var(--stoerung); background:var(--stoerung-blass); border-color:var(--stoerung-kante); }
  .lauf.aus { color:var(--ruhig); background:var(--ruhig-blass); border-color:var(--kante); }
  .legende { display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; font-size:12.5px; color:var(--text-leise); }
  .legende .streifen i { height:11px; }

  /* Formulare */
  .feld { display:grid; gap:5px; align-content:start; }
  .feld label, .feld .label { font-size:12.5px; font-weight:600; color:var(--text-leise); }
  .feld input, .feld textarea, .feld select { width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--kante-stark); background:var(--flaeche); }
  .feld input[type="checkbox"], .feld input[type="radio"] { width:auto; }
  .feld .hilfe { font-size:12px; color:var(--text-sehr-leise); }
  .feld .fehler { font-size:12.5px; color:var(--stoerung); }
  .feld input[aria-invalid="true"] { border-color:var(--stoerung); }
  .pflicht::after { content:" *"; color:var(--stoerung); }
  .formraster { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
  .formraster .ganz { grid-column:1 / -1; }
  .formraster.drei { grid-template-columns:1.6fr .7fr 1.1fr; }
  @media (max-width: 640px) { .formraster, .formraster.drei { grid-template-columns:1fr; } }
  .haken { display:flex; gap:9px; align-items:flex-start; font-size:13.5px; cursor:pointer; }
  .haken input { margin-top:3px; width:16px; height:16px; accent-color:var(--navy-700); flex-shrink:0; }
  .inline { display:flex; gap:8px; align-items:center; }
  .inline input { flex:1; min-width:0; }
  .segment { display:inline-flex; border:1px solid var(--kante-stark); border-radius:9px; overflow:hidden; background:var(--flaeche); }
  .segment button { padding:7px 14px; color:var(--text-leise); font-weight:600; }
  .segment button + button { border-left:1px solid var(--kante-stark); }
  .segment button[aria-pressed="true"] { background:var(--haupt-grund); color:var(--haupt-text); }
  .wahlkarten { display:grid; gap:10px; }
  .wahlkarten.zwei { grid-template-columns:1fr 1fr; }
  @media (max-width: 640px) { .wahlkarten.zwei { grid-template-columns:1fr; } }
  .wahlkarten label { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--kante-stark); border-radius:9px; cursor:pointer; background:var(--flaeche); }
  .wahlkarten label:has(input:checked) { border-color:var(--akzent); background:var(--akzent-blass); }
  .wahlkarten input { margin-top:3px; accent-color:var(--navy-700); }
  .wahlkarten small { display:block; color:var(--text-leise); font-size:12.5px; margin-top:2px; }
  .unterkasten { border:1px solid var(--kante); border-radius:8px; padding:12px 14px; background:var(--flaeche-2); }
  .unterkasten h4 { font-size:13.5px; margin-bottom:4px; }
  .angaben { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 14px; font-size:13.5px; margin:0; }
  .angaben dt { color:var(--text-leise); }
  .angaben dd { margin:0; min-width:0; overflow-wrap:anywhere; }
  .zweispalt { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  @media (max-width: 760px) { .zweispalt { grid-template-columns:1fr; } }
  .liste-klein { margin:6px 0 0; padding-left:18px; font-size:13px; color:var(--text-leise); }
  .liste-klein li { margin-bottom:3px; }
  .bedingungen { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:4px; font-size:13px; }
  .bedingungen li::before { content:"✓ "; color:var(--gut); font-weight:700; }
  .bedingungen li.nein::before { content:"✗ "; color:var(--stoerung); }
  .bedingungen li.nein { color:var(--stoerung); }

  /* Schritte */
  .schrittleiste { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
  .schrittleiste button { display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 5px; border-radius:999px; border:1px solid var(--kante);
    background:var(--flaeche); color:var(--text-leise); font-size:13px; }
  .schrittleiste button .n { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-weight:700; border:1px solid var(--kante-stark); }
  .schrittleiste button[aria-current="step"] { border-color:var(--akzent); color:var(--text); font-weight:600; }
  .schrittleiste button[aria-current="step"] .n { background:var(--haupt-grund); color:var(--haupt-text); border-color:var(--haupt-grund); }
  .schrittleiste button.fertig .n { background:var(--gut); color:#fff; border-color:var(--gut); }
  .schrittleiste button:disabled { opacity:.55; cursor:not-allowed; }
  .ablauf { list-style:none; margin:0; padding:0; }
  .ablauf li { display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--kante); font-size:13.5px; }
  .ablauf li:last-child { border-bottom:none; }
  .ablauf .z { width:20px; height:20px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:11px; font-weight:800;
    border:1px solid var(--kante-stark); color:var(--text-sehr-leise); margin-top:1px; }
  .ablauf li.fertig .z { background:var(--gut); border-color:var(--gut); color:#fff; }
  .ablauf li.laeuft .z { border-color:var(--akzent); color:var(--akzent); animation:puls 1s infinite; }
  .ablauf li.fehler .z { background:var(--stoerung); border-color:var(--stoerung); color:#fff; }
  .ablauf .dauer { margin-left:auto; color:var(--text-sehr-leise); font-size:12px; white-space:nowrap; }
  @keyframes puls { 50% { opacity:.35; } }
  .einladung { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:10px 12px; border-radius:8px; background:var(--flaeche-2);
    border:1px dashed var(--kante-stark); font-family:ui-monospace,Menlo,monospace; font-size:12.5px; overflow-wrap:anywhere; }
  .stufen { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
  @media (max-width: 760px) { .stufen { grid-template-columns:1fr 1fr; } }
  .stufen > div { border:1px solid var(--kante); border-radius:9px; padding:10px 12px; background:var(--flaeche); }
  .stufen .n { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-sehr-leise); font-weight:700; }
  .stufen b { display:block; font-size:13.5px; margin-top:2px; }
  .stufen small { color:var(--text-leise); font-size:12px; }
  .stufen .an { border-color:var(--akzent); box-shadow:0 0 0 1px var(--akzent); }
  .stufen .fertig { border-color:var(--gut-kante); background:var(--gut-blass); }

  /* Diagramm */
  .saeulen { display:flex; align-items:flex-end; gap:14px; height:170px; padding:8px 4px 0; border-bottom:1px solid var(--kante); overflow-x:clip; }
  .saeule { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; position:relative; }
  .saeule .wert { font-size:12px; font-weight:600; margin-bottom:4px; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .saeule .balken { width:min(46px, 70%); background:var(--balken); border-radius:4px 4px 0 0; }
  .saeule .balken.leise { background:var(--balken-leise); }
  .saeule:hover .balken { filter:brightness(1.12); }
  .achse { display:flex; gap:14px; padding:6px 4px 0; }
  .achse span { flex:1; text-align:center; font-size:12px; color:var(--text-leise); }
  .tipp { position:absolute; top:0; left:50%; transform:translateX(-50%); background:var(--text); color:var(--flaeche); font-size:12px; padding:5px 8px; border-radius:6px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .12s; z-index:2; }
  .saeule:hover .tipp, .saeule:focus-within .tipp { opacity:1; }
  .saeule:first-child .tipp { left:0; transform:none; }
  .saeule:last-child .tipp { left:auto; right:0; transform:none; }

  /* Rechnung */
  .rechnung { background:#fff; color:#16202b; border:1px solid var(--kante); border-radius:8px; padding:26px 28px; font-size:13px; box-shadow:var(--schatten); }
  .rechnung .absender { font-size:10.5px; color:#6b7784; border-bottom:1px solid #e2e8f0; padding-bottom:4px; margin-bottom:12px; }
  .rechnung h3 { font-size:18px; margin:18px 0 4px; }
  .rechnung table { font-size:12.5px; margin-top:14px; }
  .rechnung th { color:#6b7784; border-color:#e2e8f0; }
  .rechnung td { border-color:#e2e8f0; }
  .rechnung tfoot td { background:#f7f9fb; }
  .rechnung .kleingedruckt { font-size:11px; color:#56626f; margin-top:14px; display:grid; gap:4px; }
  .rechnung .kopfzeilen { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
  .stempel { display:inline-block; border:2px solid #b42318; color:#b42318; font-weight:800; letter-spacing:.12em; padding:2px 10px; transform:rotate(-4deg); border-radius:4px; }

  /* Seitenblatt (Detail) */
  .seitenblatt { position:fixed; z-index:80; top:0; right:0; bottom:0; width:min(720px, 100vw); background:var(--grund); border-left:1px solid var(--kante); box-shadow:-20px 0 50px rgba(0,0,0,.18); overflow:auto; }
  .seitenblatt .sbkopf { position:sticky; top:0; z-index:2; display:flex; gap:10px; align-items:center; padding:12px 18px; background:var(--flaeche); border-bottom:1px solid var(--kante); }
  .seitenblatt .sbkoerper { padding:16px 18px 40px; display:grid; gap:14px; }

  /* Dialog */
  dialog { border:none; border-radius:12px; padding:0; width:min(560px, calc(100vw - 32px)); background:var(--flaeche); color:var(--text); box-shadow:0 20px 60px rgba(0,0,0,.3); }
  dialog:modal { margin:auto; }
  dialog::backdrop { background:rgba(11,24,38,.45); }
  dialog .kkoerper { display:grid; gap:12px; }
  dialog textarea { min-height:220px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; }

  /* Hinweis „So sieht es die Kanzlei" */
  .kanzleisicht { border:1px solid var(--kante); border-radius:10px; overflow:hidden; background:var(--flaeche); }
  .kanzleisicht .ks-leiste { background:#1f6f78; color:#fff; padding:7px 12px; font-size:12px; font-weight:600; display:flex; gap:8px; align-items:center; }
  .kanzleisicht .ks-band { margin:12px; padding:10px 12px; border-radius:8px; background:var(--hinweis-blass); border:1px solid var(--hinweis-kante); font-size:13px; }

  /* Toast */
  .toast { position:fixed; z-index:90; left:50%; bottom:22px; transform:translateX(-50%); background:var(--text); color:var(--flaeche); padding:10px 16px; border-radius:9px; font-size:13.5px; box-shadow:0 8px 30px rgba(0,0,0,.25); max-width:calc(100vw - 32px); }

  /* Fragen */
  .konzept { max-width:940px; }
  .konzept h2 { font-size:20px; margin:30px 0 8px; }
  .konzept h2:first-child { margin-top:6px; }
  .konzept p, .konzept li { max-width:76ch; }
  .konzept p { margin-bottom:10px; }
  .konzept ul, .konzept ol { padding-left:20px; margin:0 0 12px; }
  .konzept li { margin-bottom:5px; }
  .bereiche { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:10px 0 16px; }
  @media (max-width: 700px) { .bereiche { grid-template-columns:1fr; } }
  .bereiche > div { background:var(--flaeche); border:1px solid var(--kante); border-radius:9px; padding:11px 14px; }
  .bereiche b { display:block; }
  .bereiche span { font-size:13px; color:var(--text-leise); }
  .frage { background:var(--flaeche); border:1px solid var(--kante); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px; }
  .frage.beantwortet { border-color:var(--gut-kante); }
  .frage .f { font-weight:600; display:flex; gap:10px; }
  .frage .f .nr { color:var(--text-sehr-leise); font-variant-numeric:tabular-nums; }
  .frage .warum { margin-top:4px; font-size:13px; color:var(--text-leise); }
  .frage .optionen { display:grid; gap:6px; margin-top:10px; }
  .frage .optionen label { display:flex; gap:9px; align-items:flex-start; font-size:13.5px; padding:7px 10px; border-radius:8px; border:1px solid var(--kante); cursor:pointer; }
  .frage .optionen label:has(input:checked) { border-color:var(--akzent); background:var(--akzent-blass); }
  .frage .optionen input { margin-top:3px; accent-color:var(--navy-700); }
  .frage .empf { font-size:11px; font-weight:700; color:var(--gut); margin-left:6px; white-space:nowrap; }
  .frage textarea { width:100%; margin-top:8px; padding:7px 10px; border-radius:8px; border:1px solid var(--kante-stark); background:var(--flaeche); min-height:38px; }
  .fortschritt { position:sticky; top:52px; z-index:5; display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:10px 14px; border-radius:10px; background:var(--flaeche); border:1px solid var(--kante); box-shadow:var(--schatten); margin:14px 0; }
  .fortschritt .balkenleer { flex:1; min-width:120px; height:6px; border-radius:999px; background:var(--kante); overflow:hidden; }
  .fortschritt .balkenleer span { display:block; height:100%; background:var(--gut); }
  @media (max-width: 700px) { .banner { position:static; } .fortschritt { top:8px; } .leiste-innen { position:static; } }

  /* ── Nur in der gebauten Konsole ── */
  .protokoll { margin:0; padding:12px 14px; max-height:60vh; overflow:auto; background:var(--navy-950); color:#d7e1ea;
    border-radius:8px; font:12.5px/1.55 ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
  .kopierzeile { display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; }
  .kopierzeile code { flex:1 1 320px; min-width:0; padding:9px 11px; border-radius:8px; background:var(--flaeche-2);
    border:1px dashed var(--kante-stark); font-size:12.5px; overflow-wrap:anywhere; }
  .anmeldekarte form { display:grid; gap:12px; }
  .feld input[readonly] { background:var(--flaeche-2); }
  td .knopf { white-space:nowrap; }

/* Statt Inline-Stilen — die Inhaltsregel erlaubt nur style-src 'self'. */
.kachel .gross.klein { font-size:18px; }
.abstand-oben { margin-top:10px; }
.abstand-oben-gross { margin-top:16px; }