/* Digital-Masters-CI: Tokens aus dm-core (definitions/design-tokens/tokens.css), Proxima Nova selbst gehostet */
  @font-face { font-family: "Proxima Nova"; src: url(assets/fonts/proximanova-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: "Proxima Nova"; src: url(assets/fonts/proximanova-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
  @font-face { font-family: "Proxima Nova"; src: url(assets/fonts/proximanova-medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
  @font-face { font-family: "Proxima Nova"; src: url(assets/fonts/proximanova-bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
  :root {
    /* Navy = Text und Primärfarbe, Neon-Grün = CTA/Fokus (Text darauf navy), grüner Text nur in dunkler Stufe (Kontrast) */
    --bg: #FAFBFC; --card: #fff; --ink: #1D273C; --muted: #6B7280; --line: #E8EAED;
    --accent: #00F573; --accent-ink: #1D273C; --accent-text: #007a3a; --soft: #edfff5;
    --ok: #166534; --warn: #92400E; --err: #991B1B; --err-bg: #FEF2F2;
    --line-strong: #E8EAED; /* Rand von Eingabefeldern und Umschalter; hell = --line, dunkel kräftiger */
    /* Fokusrahmen: Neon-Grün (CI). Auf hellem Grund hat es nur 1,47 zu 1, darum außen eine navy Linie; die Lücke zum Element hat die Kartenfarbe */
    --focus: var(--accent); --focus-edge: #1D273C; --focus-gap: var(--card);
    /* Avatar-Initialen: sechs Hintergründe, Schrift weiß (Kontrast 6,3 bis 14,9 zu 1); kein Neon-Grün */
    --av-1: #1D273C; --av-2: #0B6B6B; --av-3: #5B3FA6; --av-4: #1F5FA8; --av-5: #8A4B12; --av-6: #A0296B; --av-ink: #fff;
    --ms-bg: #fff; --ms-ink: #5e5e5e; --ms-border: #8c8c8c; --ms-hover: #f3f3f3;
    --radius: 12px; --pad: 16px;
    --shadow: 0 1px 3px 0 rgba(29, 39, 60, .06), 0 1px 2px -1px rgba(29, 39, 60, .06);
    color-scheme: light dark;
    /* Dunkle Palette: die Werte stehen nur hier. Die Media Query (Auto) und [data-theme="dark"] weisen sie unten bloß zu. */
    --dark-bg: #131a2b; --dark-card: #1b2438; --dark-ink: #eef1f7; --dark-muted: #9aa3b8; --dark-line: #2a3450; --dark-line-strong: #465270;
    --dark-focus-edge: transparent; --dark-focus-gap: transparent; /* dunkel: Grün auf dunklem Grund reicht (über 8 zu 1) */
    --dark-accent: #00C85E; --dark-accent-ink: #0d1220; --dark-accent-text: #33ff99; --dark-soft: #10281c;
    --dark-ok: #35f3a0; --dark-warn: #fbbf24; --dark-err: #ff7a6b; --dark-err-bg: #2a1215;
    --dark-av-1: #9DB7FF; --dark-av-2: #7FD6D0; --dark-av-3: #C4A9FF; --dark-av-4: #7FC2FF; --dark-av-5: #F0B67F; --dark-av-6: #F59BC8; --dark-av-ink: #0d1220; /* helle Flächen, navy Schrift (9,3 bis 11,1 zu 1) */
    --dark-ms-bg: #2f2f2f; --dark-ms-ink: #fff; --dark-ms-border: #2f2f2f; --dark-ms-hover: #3b3b3b;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: var(--dark-bg); --card: var(--dark-card); --ink: var(--dark-ink); --muted: var(--dark-muted); --line: var(--dark-line); --line-strong: var(--dark-line-strong); --focus-edge: var(--dark-focus-edge); --focus-gap: var(--dark-focus-gap);
      --accent: var(--dark-accent); --accent-ink: var(--dark-accent-ink); --accent-text: var(--dark-accent-text); --soft: var(--dark-soft);
      --ok: var(--dark-ok); --warn: var(--dark-warn); --err: var(--dark-err); --err-bg: var(--dark-err-bg);
      --ms-bg: var(--dark-ms-bg); --ms-ink: var(--dark-ms-ink); --ms-border: var(--dark-ms-border); --ms-hover: var(--dark-ms-hover);
      --av-1: var(--dark-av-1); --av-2: var(--dark-av-2); --av-3: var(--dark-av-3); --av-4: var(--dark-av-4); --av-5: var(--dark-av-5); --av-6: var(--dark-av-6); --av-ink: var(--dark-av-ink);
    }
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: var(--dark-bg); --card: var(--dark-card); --ink: var(--dark-ink); --muted: var(--dark-muted); --line: var(--dark-line); --line-strong: var(--dark-line-strong); --focus-edge: var(--dark-focus-edge); --focus-gap: var(--dark-focus-gap);
    --accent: var(--dark-accent); --accent-ink: var(--dark-accent-ink); --accent-text: var(--dark-accent-text); --soft: var(--dark-soft);
    --ok: var(--dark-ok); --warn: var(--dark-warn); --err: var(--dark-err); --err-bg: var(--dark-err-bg);
    --ms-bg: var(--dark-ms-bg); --ms-ink: var(--dark-ms-ink); --ms-border: var(--dark-ms-border); --ms-hover: var(--dark-ms-hover);
    --av-1: var(--dark-av-1); --av-2: var(--dark-av-2); --av-3: var(--dark-av-3); --av-4: var(--dark-av-4); --av-5: var(--dark-av-5); --av-6: var(--dark-av-6); --av-ink: var(--dark-av-ink);
  }
  * { box-sizing: border-box; }
  html { font-size: 16px; scroll-padding-top: 110px; } /* sticky Header nicht über fokussierte Elemente legen */
  body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 "Proxima Nova", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
  main { max-width: 720px; margin: 0 auto; padding: 16px 16px 120px; }
  h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 8px 0 4px; }
  h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.35; margin: 0 0 4px; }
  a { color: var(--accent-text); }
  .logo { display: block; height: 24px; width: auto; }
  .lead { color: var(--muted); margin: 0 0 16px; font-size: .95rem; }
  .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); margin-bottom: 12px; box-shadow: var(--shadow); }

  /* Fields */
  [hidden] { display: none !important; }
  .field { margin-bottom: 18px; }
  label.lbl, .lbl { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: .95rem; margin-bottom: 6px; }
  label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: .95rem; margin-bottom: 6px; cursor: pointer; }
  input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent); }
  input[type=checkbox]:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; box-shadow: 0 0 0 1px var(--focus-gap), 0 0 0 4px var(--focus-edge); }
  .field.invalid input[type=checkbox] { outline: 2px solid var(--err); outline-offset: 1px; }
  .req::after { content: " *"; color: var(--err); font-weight: 400; }
  .hint { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: .75rem; font-weight: 700; cursor: pointer; padding: 0; line-height: 20px; flex: 0 0 auto; }
  .hint:hover, .hint[aria-expanded="true"] { background: var(--soft); color: var(--accent-text); border-color: var(--accent); }
  .help { display: none; margin: 0 0 8px; padding: 10px 12px; background: var(--soft); border-radius: 8px; font-size: .875rem; color: var(--ink); }
  .help.open { display: block; }
  .sub { color: var(--muted); font-size: .8rem; margin: 4px 0 0; }
  input[type=text], input[type=email], input[type=number], input[type=date], input[type=url], select, textarea {
    width: 100%; font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--ink); min-height: 44px;
  }
  textarea { min-height: 88px; resize: vertical; }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; box-shadow: 0 0 0 1px var(--focus-gap), 0 0 0 4px var(--focus-edge); border-color: var(--accent); }
  .field.invalid input, .field.invalid select, .field.invalid textarea, .field.invalid .seg { border-color: var(--err); }
  .err { display: none; color: var(--err); font-size: .8rem; margin-top: 4px; }
  .field.invalid .err { display: block; }
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 480px) { .row { grid-template-columns: 1fr; } }

  /* Segmented radio */
  .seg { display: flex; flex-wrap: wrap; gap: 6px; border-radius: 10px; }
  .seg label { position: relative; flex: 1 1 auto; }
  .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; font-size: .95rem; text-align: center; user-select: none; }
  .seg input:checked + span { background: var(--soft); border-color: var(--accent); color: var(--accent-text); font-weight: 500; }
  .seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; box-shadow: 0 0 0 1px var(--focus-gap), 0 0 0 4px var(--focus-edge); }
  .seg.col label { flex: 1 1 100%; }
  .seg.col span { justify-content: flex-start; text-align: left; }

  .note { padding: 10px 12px; border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border-radius: 6px; font-size: .875rem; margin: 8px 0 0; }
  .note.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
  .linkbtn { font: inherit; font-weight: 500; color: var(--accent-text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

  /* Buttons, Toast */
  button.btn { font: inherit; font-size: 1rem; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
  button.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 500; }
  button.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap), 0 0 0 5px var(--focus-edge); }
  button.btn.small { min-height: 36px; padding: 0 12px; font-size: .875rem; }
  button.btn.danger { color: var(--err); border-color: var(--err); }
  .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
  .topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .topbar button { font-size: .8rem; color: var(--muted); background: none; border: 0; cursor: pointer; text-decoration: underline; }
  .toast { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 999px; font-size: .875rem; opacity: 0; transition: opacity .2s; pointer-events: none; }
  .toast.show { opacity: 1; }

  /* App-Rahmen: Header, Tabs, Listen */
  header.app { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
  header.app .in { max-width: 720px; margin: 0 auto; padding: 10px 16px 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  header.app .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -.01em; }
  header.app .brand .sep { width: 1px; height: 20px; background: var(--line); }
  header.app .user { margin-left: auto; font-size: .85rem; color: var(--muted); display: flex; gap: 10px; align-items: center; }
  header.app .user a { color: var(--accent-text); }
  .tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; order: 3; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { font: inherit; font-size: .9rem; min-height: 40px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); cursor: pointer; white-space: nowrap; }
  .tabs button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }
  .badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .7rem; line-height: 18px; text-align: center; vertical-align: middle; }
  .chips { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
  .chips button { font: inherit; font-size: .85rem; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; white-space: nowrap; }
  .chips button.on { background: var(--soft); border-color: var(--accent); color: var(--accent-text); font-weight: 500; }
  .list { display: grid; gap: 8px; }
  .item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; }
  .item:hover, .item:focus-visible { border-color: var(--accent); }
  .item:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; box-shadow: 0 0 0 1px var(--focus-gap), 0 0 0 4px var(--focus-edge); }
  .item b { font-weight: 500; }
  .item .meta { color: var(--muted); font-size: .85rem; grid-column: 1; }
  @media (max-width: 480px) { .item { grid-template-columns: 1fr; } }
  .status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 500; }
  .empty { color: var(--muted); text-align: center; padding: 32px 0; }
  .login { max-width: 460px; margin: 48px auto; text-align: center; }
  .login .logo { height: 32px; margin: 8px auto 18px; }
  .login h1 { margin-top: 0; }
  .login .row { text-align: left; }
  .login .btn { display: inline-block; text-decoration: none; line-height: 44px; }
  details.card summary { cursor: pointer; font-weight: 700; }
ul.warn{margin:10px 0 0;padding-left:18px;color:var(--warn);font-size:14px}ul.warn li{margin:4px 0}
/* Verwaltung */
.admin-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:start}.admin-row .field{margin-bottom:8px}.admin-row .btn{margin-top:30px}
@media (max-width:600px){.admin-row{grid-template-columns:1fr}.admin-row .btn{margin-top:0}}
.admin-list{display:grid;gap:6px}.admin-list div{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px}.admin-list small{color:var(--muted);margin-left:auto}
/* Schalter in der Verwaltung */
.switch{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--line);cursor:pointer}.switch:first-child{border-top:0}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .track{width:44px;height:26px;border-radius:999px;background:var(--line);position:relative;transition:background .15s;margin-top:2px}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.switch input:checked+.track{background:var(--accent)}.switch input:checked+.track::after{left:21px}
.switch input:focus-visible+.track{outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap), 0 0 0 5px var(--focus-edge);}
.switch .txt small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}.switch .state{font-size:.75rem;font-weight:700;color:var(--muted);margin-left:6px}
/* "Sign in with Microsoft" nach Microsoft-Markenrichtlinie (hell: weiß mit #8c8c8c-Rand, dunkel: #2f2f2f) */
.ms-signin{display:inline-flex;align-items:center;gap:12px;height:41px;box-sizing:border-box;padding:0 12px;background:var(--ms-bg);color:var(--ms-ink);border:1px solid var(--ms-border);border-radius:0;font:600 15px "Segoe UI",system-ui,-apple-system,sans-serif;text-decoration:none;cursor:pointer;margin:6px 0 14px}
.ms-signin:hover{background:var(--ms-hover)}.ms-signin:focus-visible{outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap), 0 0 0 5px var(--focus-edge);}
/* Logos: beide Varianten im Markup, sichtbar ist die zum Farbschema passende (Wahl oder Systemeinstellung) */
img.logo-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) img.logo-light{display:none}:root:not([data-theme="light"]) img.logo-dark{display:block}}
:root[data-theme="dark"] img.logo-light{display:none}:root[data-theme="dark"] img.logo-dark{display:block}
/* Umschalter Farbschema (theme.js): ein Knopf, Klick wechselt Auto, Hell, Dunkel. data-mode blendet Symbol und Wort ein; im Header und auf der Login-Seite */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;box-sizing:border-box;min-width:40px;min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-size:.8rem;line-height:1;cursor:pointer}
.theme-toggle:hover{background:var(--bg)}
.theme-toggle:focus-visible{outline: 2px solid var(--focus); outline-offset: 1px; box-shadow: 0 0 0 1px var(--focus-gap), 0 0 0 4px var(--focus-edge);}
.theme-toggle .ti,.theme-toggle .tt{display:none}
.theme-toggle[data-mode="auto"] .ti-auto,.theme-toggle[data-mode="light"] .ti-light,.theme-toggle[data-mode="dark"] .ti-dark{display:block;flex:0 0 auto}
.theme-toggle[data-mode="auto"] .tt-auto,.theme-toggle[data-mode="light"] .tt-light,.theme-toggle[data-mode="dark"] .tt-dark{display:inline}
.login .theme-toggle{margin:0 0 8px}
/* Schmal: nur das Symbol, der Knopf bleibt 40 mal 40 Pixel groß (Beschriftung steht im aria-label) */
@media (max-width:600px){.theme-toggle{padding:0}.theme-toggle[data-mode] .tt{display:none}}
/* Schmal: nur der Avatar, der Name bleibt für Screenreader im Dokument (kein display:none) */
@media (max-width:600px){header.app #userName{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}header.app .user .who{gap:0}}
@media (max-width:480px){header.app .user{min-width:0;flex:1 1 100%;justify-content:flex-end}}

/* Avatare: feste Größe, rund; Initialen kommen aus data-i (zählen nicht zum Text des Namens), das Bild deckt sie ab und entfällt bei Ladefehler */
.av{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:50%;overflow:hidden;background:var(--av-1);color:var(--av-ink);font-weight:700;line-height:1;letter-spacing:0;text-transform:uppercase;user-select:none;vertical-align:middle}
.av::before{content:attr(data-i)}
.av-s{width:22px;height:22px;font-size:.6875rem}
.av-m{width:28px;height:28px;font-size:.8125rem}
.av-c0{background:var(--av-1)}.av-c1{background:var(--av-2)}.av-c2{background:var(--av-3)}.av-c3{background:var(--av-4)}.av-c4{background:var(--av-5)}.av-c5{background:var(--av-6)}
.av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;background:var(--card)}
/* Person = Avatar + Name als eine Einheit. inline-block statt Flex: Kinder bleiben inline, damit innerText den Namen unverändert liefert */
.who{display:inline-block;max-width:100%;vertical-align:middle;overflow-wrap:anywhere}
.who > .av{margin-right:6px}
.who .av-m{margin-right:8px}
header.app .user .who{display:flex;align-items:center;gap:8px;min-width:0}
header.app .user #userAvatar{display:flex;flex:0 0 auto}

/* ---------- Einheitenbaum (Verwaltung) ---------- */
.tree { display: flex; flex-direction: column; gap: 6px; }
.tree-row { box-sizing: border-box; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.tree-row.d1 { margin-left: 20px; width: calc(100% - 20px); } .tree-row.d2 { margin-left: 40px; width: calc(100% - 40px); }
.tree-row.off { opacity: .6; }
.tree-name { flex: 1 1 200px; } .tree-name small { color: var(--muted); margin-left: 6px; }
.tree-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--soft); font-size: .85em; margin-right: 4px; }
.chip .x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 1.1em; line-height: 1; padding: 0 2px; }

/* ---------- Fragen (Verwaltung) ---------- */
.qgroup { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin-bottom: 8px; }
.qhead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .qhead small { color: var(--muted); } .qhead .tree-actions { margin-left: auto; }
.qcur { color: var(--muted); font-size: .9em; margin: 4px 0; }
.qform { display: grid; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

/* ---------- Erfassen ---------- */
.picker { display: grid; gap: 8px; }
.picker select { width: 100%; min-height: 44px; font-size: 1em; }
table.last { width: 100%; border-collapse: collapse; margin-top: 6px; }
table.last td { padding: 6px 4px; border-top: 1px solid var(--line); } table.last td:first-child { width: 50%; }
.record fieldset.q { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin: 10px 0; }
.record fieldset.q.bad { border-color: var(--err); }
.record legend { font-weight: 600; padding: 0 4px; }
.opt { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 0; }
.opt + .opt { margin-top: 10px; }
.opt .emo { font-size: 1.5em; line-height: 1; }
.opt .lab { font-size: 1rem; overflow-wrap: anywhere; }
@media (max-width: 420px) { .opt { grid-template-columns: 32px minmax(0, 1fr); } .opt .stepper { grid-column: 2; justify-self: start; } }
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.stepper button { min-width: 48px; min-height: 48px; border: 0; background: var(--soft); font-size: 1.3em; cursor: pointer; }
.stepper button.all { font-size: 1rem; padding: 0 10px; border-left: 1px solid var(--line-strong); }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper input { width: 56px; text-align: center; border: 0; font-size: 1.25em; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rest { margin: 4px 0 0; font-size: .9em; } .rest.ok { color: var(--ok); } .rest.warn { color: var(--warn); }
.record .btn { width: 100%; min-height: 48px; margin-top: 10px; }
/* Hinweis unter einem Feld (.hint ist schon der Info-Knopf) */
.field-hint { display: block; color: var(--muted); font-size: .85em; margin-top: 2px; }
.row2 { display: grid; grid-template-columns: minmax(130px, 1fr) auto; gap: 12px; align-items: start; }
.row2 .field { min-width: 0; }
@media (max-width: 340px) { .row2 { grid-template-columns: 1fr; } }
details.guide { padding: 12px 16px; }
details.guide summary { cursor: pointer; font-weight: 600; list-style: none; min-height: 44px; display: flex; align-items: center; gap: 8px; }
details.guide summary::before { content: '▸'; transition: transform .15s; }
details[open].guide summary::before { transform: rotate(90deg); }
details.guide summary::-webkit-details-marker { display: none; }
details.guide h3 { font-size: 1em; margin: 12px 0 4px; }
details.guide p, details.guide li { line-height: 1.45; }

/* ---------- Auswertung ---------- */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; align-items: end; }
.tree-row.stale .tree-name small { color: var(--warn); }
button.tree-row { text-align: left; background: var(--card); color: inherit; font: inherit; cursor: pointer; width: 100%; }
button.tree-row.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.chart { margin: 10px 0 18px; } .chart h3 { font-size: 1em; margin: 0 0 4px; } .chart small { color: var(--muted); font-weight: normal; }
.c-x, .c-n, .c-y, .c-small { font-size: 10px; fill: var(--muted); text-anchor: middle; } .c-y { text-anchor: end; } .c-y.c-cap { text-anchor: middle; } .c-small { font-size: 9px; }
.c-flag { font-size: 10px; fill: var(--err); text-anchor: middle; }
.c-grid { stroke: var(--line); stroke-width: 1; }
.c-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: .85em; margin-top: 4px; }
.c-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; }
table.list { width: 100%; border-collapse: collapse; font-size: .95em; }
table.list th, table.list td { padding: 6px 4px; border-top: 1px solid var(--line); text-align: left; }
table.list tr.hl td { background: var(--err-bg); }
.share { display: inline-block; min-width: 36px; } .share.bad { color: var(--err); font-weight: 600; }
ul.rev { padding-left: 18px; font-size: .9em; color: var(--muted); }
@media (max-width: 480px) { table.list th:nth-child(5), table.list td:nth-child(5) { display: none; } }

/* Lesehilfe neben der Überschrift */
h2.with-help { position: relative; display: flex; align-items: center; gap: 8px; }
details.chart-help summary { list-style: none; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: normal; }
details.chart-help summary::-webkit-details-marker { display: none; }
details.chart-help .chart-help-body { position: absolute; z-index: 5; max-width: 360px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; font-weight: normal; font-size: .9rem; line-height: 1.45; }
details.chart-help .chart-help-body p { margin: 0 0 6px; } details.chart-help .chart-help-body ul { margin: 0; padding-left: 18px; }