/* 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;
    --step-bg: #1D273C; --step-ink: #fff; /* Schrittnummer in der Verwaltung */
    /* Etiketten der Typgruppen (Schritt 1, Verwaltung): Text und Fläche je Gruppe, Kontrast über 11 zu 1 */
    --tag-intern-bg: #D9E6FF; --tag-intern-ink: #1D273C; --tag-kunde-bg: #FFE7C2; --tag-kunde-ink: #1D273C;
    --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-step-bg: #9DB7FF; --dark-step-ink: #0d1220;
    --dark-tag-intern-bg: #27355C; --dark-tag-intern-ink: #C9D9FF; --dark-tag-kunde-bg: #4A3413; --dark-tag-kunde-ink: #FFD9A3; /* Kontrast 8,5 und 8,8 zu 1 */
    --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); --step-bg: var(--dark-step-bg); --step-ink: var(--dark-step-ink);
      --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);
      --tag-intern-bg: var(--dark-tag-intern-bg); --tag-intern-ink: var(--dark-tag-intern-ink); --tag-kunde-bg: var(--dark-tag-kunde-bg); --tag-kunde-ink: var(--dark-tag-kunde-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); --step-bg: var(--dark-step-bg); --step-ink: var(--dark-step-ink);
    --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);
      --tag-intern-bg: var(--dark-tag-intern-bg); --tag-intern-ink: var(--dark-tag-intern-ink); --tag-kunde-bg: var(--dark-tag-kunde-bg); --tag-kunde-ink: var(--dark-tag-kunde-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); }

  /* Stepper */
  .stepper { display: flex; gap: 6px; margin: 12px 0 20px; overflow-x: auto; scrollbar-width: none; }
  .stepper::-webkit-scrollbar { display: none; }
  .stepper button { flex: 1 0 auto; min-width: 44px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: .8rem; padding: 0 12px; cursor: pointer; white-space: nowrap; }
  .stepper button[aria-current="step"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .stepper button.done { color: var(--ink); border-color: var(--accent); }
  .stepper button:disabled { cursor: default; opacity: .6; }
  .stepper .n { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; background: color-mix(in srgb, currentColor 15%, transparent); margin-right: 6px; font-size: .7rem; }

  /* 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; } }
  .unit { position: relative; }
  .unit input { padding-right: 52px; }
  .unit.wide input { padding-right: 84px; }
  .unit span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .9rem; pointer-events: none; }

  /* 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; }

  /* Type cards */
  .types { display: block; }
  .type-list { display: grid; gap: 10px; }
  .type-divider { border: 0; border-top: 1px solid var(--line); margin: 20px 0 4px; }
  .type-group-h { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; margin: 14px 0 10px; }
  .type-group-h::before { content: ""; flex: none; width: 6px; height: 20px; border-radius: 3px; background: var(--tag-intern-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag-intern-ink) 35%, transparent); }
  .type-group-h.tg-kunde::before { background: var(--tag-kunde-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag-kunde-ink) 35%, transparent); }
  .ttag { display: inline-block; font-size: .72rem; font-weight: 700; line-height: 1.4; padding: 1px 8px; border-radius: 999px; background: var(--tag-intern-bg); color: var(--tag-intern-ink); }
  .ttag.tag-kunde { background: var(--tag-kunde-bg); color: var(--tag-kunde-ink); }
  .types .tside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .types label { position: relative; }
  .types input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .types .tcard { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); cursor: pointer; }
  .types .tcard .ico { font-size: 1.5rem; text-align: center; }
  .types .tcard b { display: block; }
  .types .tcard small { color: var(--muted); font-size: .85rem; }
  .types .tcard kbd { font: .75rem ui-monospace, monospace; border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; color: var(--muted); }
  .types input:checked + .tcard { border-color: var(--accent); background: var(--soft); }
  .types input:focus-visible + .tcard { outline: 2px solid var(--focus); box-shadow: 0 0 0 3px var(--focus-edge); }

  /* Calc box */
  .calc { display: grid; gap: 6px; padding: 12px 14px; background: var(--soft); border-radius: 10px; font-size: .95rem; }
  .calc div { display: flex; justify-content: space-between; gap: 12px; }
  .calc .total { font-weight: 700; font-size: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding-top: 6px; margin-top: 2px; }
  .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; }

  /* Combobox (Moco-Projektsuche) */
  .combo { position: relative; }
  .combo ul { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 320px; overflow-y: auto; }
  .combo li { padding: 10px 12px; border-radius: 8px; cursor: pointer; display: grid; gap: 2px; }
  .combo li b { font-weight: 500; }
  .combo li small { color: var(--muted); font-size: .8rem; }
  .combo li[aria-selected="true"], .combo li:hover { background: var(--soft); }
  .chip { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--accent); background: var(--soft); border-radius: 10px; }
  .chip-body { flex: 1; min-width: 0; display: grid; }
  .chip-body b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chip-body small { color: var(--muted); font-size: .8rem; }

  /* Summary */
  .sum { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: .95rem; }
  .sum dt { color: var(--muted); }
  .sum dd { margin: 0; word-break: break-word; }
  .sum .h { grid-column: 1 / -1; font-weight: 700; margin-top: 8px; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
  pre { background: #0f1216; color: #d6deeb; padding: 14px; border-radius: 10px; overflow: auto; font-size: .8rem; max-height: 420px; }
  .route { display: grid; gap: 8px; }
  .route div { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
  .route div.skipped > span:last-child { color: var(--muted); }
  .route .skip-note { display: block; color: var(--ink); font-weight: 600; }
  .route .dot { width: 24px; height: 24px; border-radius: 50%; background: var(--soft); color: var(--accent-text); font-weight: 700; text-align: center; line-height: 24px; font-size: .8rem; }

  /* Nav */
  .nav { position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .nav .in { max-width: 720px; margin: 0 auto; display: flex; gap: 10px; align-items: center; }
  .nav .spacer { flex: 1; }
  .nav .kbd { color: var(--muted); font-size: .75rem; }
  @media (max-width: 600px) { .nav .kbd { display: none; } }
  button.btn, a.btn, label.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; 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, a.btn.primary, label.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 500; }
  button.btn:focus-visible, a.btn:focus-visible, label.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, a.btn.small, label.btn.small { min-height: 36px; padding: 0 12px; font-size: .875rem; }
  .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
  .topbar { display: flex; flex-direction: column; gap: 0; }
  .topbar p { margin: 0; font-size: .875rem; }
  .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; }
  .step { display: none; }
  .step.active { display: block; }

  /* App-Rahmen: Header, Tabs, Listen, Detail */
  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; overflow-x: auto; }
  .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; }
  .item .amt { font-weight: 500; text-align: right; }
  .item .st { grid-column: 2; text-align: right; }
  @media (max-width: 480px) {
    .item { grid-template-columns: 1fr; }
    .item .amt, .item .st { grid-column: 1; text-align: left; }
  }
  .status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 500; }
  .status.offen { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
  .status.genehmigt { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
  .status.abgelehnt { background: var(--err-bg); color: var(--err); }
  .status.wartet, .status.entfaellt { background: var(--soft); color: var(--muted); }
  .turn { color: var(--accent-text); font-weight: 500; font-size: .8rem; }
  .empty { color: var(--muted); text-align: center; padding: 32px 0; }
  .chip.static { border-color: var(--line); background: var(--bg); }
  .detail-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
  .detail-head h1 { margin: 0; }
  .timeline { display: grid; gap: 10px; }
  .timeline .tl { display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
  .timeline .tl small { color: var(--muted); display: block; }
  .comment { padding: 10px 12px; border-left: 3px solid var(--line); margin-bottom: 8px; }
  .comment small { color: var(--muted); display: block; margin-bottom: 2px; }
  .audit { font-size: .85rem; color: var(--muted); display: grid; gap: 6px; }
  .audit ul { margin: 2px 0 0 16px; padding: 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; }
  body:not(.view-form) .nav { display: none; }
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-step{border-top:1px solid var(--line);padding-top:10px;margin-top:6px}.admin-step .lbl{font-size:.85rem;color:var(--muted);font-weight:500}
.admin-card-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}.admin-card-head h2{margin:0}.admin-count{font-size:.9rem;color:var(--muted);font-weight:500}
.admin-step-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}.admin-step-head .lbl{margin:0}
.step-badge{flex:none;box-sizing:border-box;min-width:28px;height:28px;padding:0 6px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:var(--step-bg);color:var(--step-ink);font-size:1.1rem;font-weight:700;line-height:1;border:2px solid var(--step-bg)}
.step-badge.off{background:transparent;color:var(--muted);border:2px solid var(--line-strong);font-weight:500}
.wert-row{display:grid;grid-template-columns:auto 140px 1fr 1fr auto;gap:10px;align-items:start}.wert-row .field{margin-bottom:8px}.wert-row .btn{margin-top:30px}.wert-row .step-badge{margin-top:24px}
@media (max-width:600px){.wert-row{grid-template-columns:1fr;border-top:1px dashed var(--line);padding-top:8px}.wert-row .btn{margin-top:0}.wert-row .step-badge{margin-top:0;justify-self:start}}
.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}
.turn.deputy{color:var(--muted)}
/* 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}
button.btn.danger{color:var(--err);border-color:var(--err)}
.kslist{display:flex;flex-wrap:wrap;gap:6px}.kslist span{padding:4px 10px;border:1px solid var(--line);border-radius:999px;font-size:.85rem;background:var(--bg)}
details.mocofields{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}details.mocofields summary{cursor:pointer;font-weight:500}details.mocofields .row{margin-top:10px}
/* "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}
.chip > #requesterAvatar{flex:0 0 auto;display:flex}
header.app .user .who{display:flex;align-items:center;gap:8px;min-width:0}
header.app .user #userAvatar{display:flex;flex:0 0 auto}
/* ---------- talk ---------- */
main { max-width: 1200px; }
header.app .in { max-width: 1200px; }
.note.err { display: block; border-color: var(--err); background: var(--err-bg); color: var(--err); }
.grid2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.card + .card { margin-top: 16px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: .85rem; margin: 2px 4px 2px 0; }
.pill button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; font: inherit; }
.warn-txt { color: var(--warn); }
.err-txt { color: var(--err); }
.muted { color: var(--muted); }
table.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.tbl th, table.tbl td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tbl th { color: var(--muted); font-weight: 500; }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card:has(.tbl) { overflow-x: auto; }

/* ---------- Gespräch / Formular ---------- */
.qsec h2 { margin-bottom: 8px; }
.qsec h3 { font-size: 1.05rem; margin: 20px 0 8px; }
.qsec.confidential { border-left: 4px solid var(--warn); }
.conf { color: var(--warn); font-weight: 500; margin: 0 0 8px; }
.qhead { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 700px) { .qhead { grid-template-columns: 1fr; } }
.q { margin: 0 0 20px; }
.qlabel { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; font-weight: 500; margin-bottom: 6px; }
.qhint { flex: none; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); border-radius: 999px; width: 26px; height: 26px; cursor: pointer; font: inherit; line-height: 1; }
.qhint[aria-expanded="true"] { background: var(--soft); border-color: var(--accent); }
.qguide { background: var(--soft); border-radius: 8px; padding: 8px 12px; margin: 0 0 8px; font-size: .92rem; }
.qhelp { font-style: italic; color: var(--muted); font-size: .92rem; margin: 0 0 6px; }
.q textarea, .q input[type=text], .q input[type=date], .qhead input { width: 100%; font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; }
.q textarea { resize: vertical; min-height: 60px; }
.q :disabled, .qhead :disabled { background: transparent; border-color: var(--line); color: var(--ink); opacity: 1; }
.q.invalid .err { display: block; }
.q.invalid textarea, .q.invalid .choices, .q.invalid select { border-color: var(--err); }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; border-radius: 8px; }
.choice { display: flex; gap: 8px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.choice small { display: block; color: var(--muted); font-size: .85rem; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--soft); }
.tblwrap { overflow-x: auto; }
table.rating select { font: inherit; padding: 4px; }
table.rating textarea { min-height: 40px; }
.conv { align-items: start; }
.guide { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; font-size: .92rem; }
.guide h4 { margin: 12px 0 4px; }
.guide table.tbl { font-size: .85rem; }
.guide-off .guide-body { display: none; }
.guide-off.grid2 { grid-template-columns: minmax(0, 1fr) auto; }
.convbar { position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--line); padding: 10px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.savestate { color: var(--muted); font-size: .9rem; }
.savestate.bad { color: var(--err); }
.banner { border-left: 4px solid var(--warn); background: var(--card); padding: 10px 12px; border-radius: 6px; margin: 0 0 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.status.draft { color: var(--warn); }
.status.submitted { color: var(--ok); }
.convlist .item { display: flex; justify-content: space-between; gap: 12px; align-items: center; }

/* ---------- Fragebogen-Editor ---------- */
button.btn.ghost, label.btn.ghost, a.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.ed-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ed-head code, .ed-row code { font-size: .8rem; color: var(--muted); }
.ed-handle { cursor: grab; color: var(--muted); user-select: none; padding: 0 4px; }
.ed-g { border-left: 3px solid var(--line-strong); padding: 8px 0 8px 12px; margin: 12px 0; }
.ed-q { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin: 10px 0; background: var(--card); }
.ed-sub { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.ed-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.ed-row .field { flex: 1 1 180px; }
.ops { margin-left: auto; display: inline-flex; gap: 6px; }
.ed-preview { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; }
[data-drag][draggable="true"] { opacity: .6; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Auswertung und Charts ---------- */
/* Kategoriale Palette aus den Avatar-Farben von ea (Kontrast geprüft); Rot nur für „kritisch“ */
:root { --chart-1: #1F5FA8; --chart-2: #0B6B6B; --chart-3: #8A4B12; --chart-4: #5B3FA6; --chart-flag: #991B1B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --chart-1: #7FC2FF; --chart-2: #7FD6D0; --chart-3: #F0B67F; --chart-4: #C4A9FF; --chart-flag: #ff7a6b; }
}
:root[data-theme="dark"] { --chart-1: #7FC2FF; --chart-2: #7FD6D0; --chart-3: #F0B67F; --chart-4: #C4A9FF; --chart-flag: #ff7a6b; }
.chart { display: block; width: 100%; max-width: 680px; height: auto; font: 13px "Proxima Nova", system-ui, sans-serif; }
.chart .ch-label, .chart .ch-val { fill: var(--ink); }
.chart .ch-n { fill: var(--muted); }
.chart .ch-track { fill: var(--line); }
.chart rect:not(.ch-track) { stroke: var(--card); stroke-width: 1; }
.ch-1 { fill: var(--chart-1); background: var(--chart-1); }
.ch-2 { fill: var(--chart-2); background: var(--chart-2); }
.ch-3 { fill: var(--chart-3); background: var(--chart-3); }
.ch-4 { fill: var(--chart-4); background: var(--chart-4); }
.ch-flag { fill: var(--chart-flag); background: var(--chart-flag); }
.ch-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: .85rem; margin: 4px 0 8px; }
.ch-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.rep-sec { margin-top: 28px; }
.rep-filters { display: flex; flex-wrap: wrap; gap: 0 12px; }
.rep-filters .field { flex: 1 1 160px; }
ul.plain { list-style: none; padding: 0; margin: 0; }
.answers li { margin: 10px 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.pre { white-space: pre-wrap; margin: 4px 0; }