:root {
    /* Warmes Grundschul-Palette */
    --bg: #fdf6ee;           /* warmes Cremeweiß */
    --surface: #fff9f3;      /* fast weiß, warm */
    --surface2: #f5ebe0;     /* sanftes Sandbeige */
    --border: #e8d5c0;       /* weiches Taupe */
    --border2: #d4b896;      /* etwas wärmeres Taupe */
    --text: #3d2b1f;         /* dunkles Warmbraun */
    --text-muted: #9c7b60;   /* mittleres Warmbraun */
    --text-dim: #7a5c44;     /* gedämpftes Braun */
    /* Terrakotta als Hauptakzent */
    --amber: #c1440e;        /* Terrakotta */
    --amber-dim: #f5d0bf;    /* helles Terrakotta */
    --amber-glow: rgba(193,68,14,0.07);
    /* Salbeigrün für LK */
    --green: #4a7c59;        /* Salbeigrün */
    --green-dim: #daeede;    /* helles Salbei */
    /* Taubenblau für KI */
    --blue: #3a6186;         /* Taubenblau */
    --blue-dim: #d6e4ef;     /* helles Blau */
    /* EIS-Level Farben (RGB als Triple für rgb(var(--x) / alpha)) */
    --eis-lvl-eigenst: 58 125 82;       /* Salbeigrün #3a7d52 */
    --eis-lvl-unterst: 212 160 23;      /* Ocker #d4a017 */
    --eis-lvl-nicht:   156 123 96;      /* Warmgrau #9c7b60 */
  }

  /* ── Dark Mode ─────────────────────────────────────── */
  [data-theme="dark"] {
    --bg: #1a1b1e;
    --surface: #25262b;
    --surface2: #2c2e33;
    --border: #373a40;
    --border2: #4a4e57;
    --text: #c1c2c5;
    --text-muted: #868e96;
    --text-dim: #adb5bd;
    --amber: #e8875b;
    --amber-dim: #3d2a1f;
    --amber-glow: rgba(232,135,91,0.1);
    --green: #69db7c;
    --green-dim: #1e3323;
    --blue: #74c0fc;
    --blue-dim: #1c2e3d;
    /* EIS-Level Farben im Dark Mode kräftiger, damit sie gegen #25262b lesbar bleiben */
    --eis-lvl-eigenst: 105 219 124;     /* helleres Grün #69db7c */
    --eis-lvl-unterst: 255 212 59;      /* helleres Gelb #ffd43b */
    --eis-lvl-nicht:   173 181 189;     /* helleres Grau #adb5bd */
  }
  [data-theme="dark"] body::before { opacity: 0.015; }
  [data-theme="dark"] .modal { background: var(--surface); border: 1px solid var(--border); }
  [data-theme="dark"] .modal input { background: var(--bg); border-color: var(--border); color: var(--text); }
  [data-theme="dark"] .steckbrief-card { border-color: var(--green); }
  [data-theme="dark"] .steckbrief-header { background: var(--green-dim); border-bottom-color: var(--border); }
  /* Dashboard-Stats im Dark Mode: Füllungen und Kontraste stärken */
  [data-theme="dark"] .dstat-bar-fill { background: var(--text-muted); }
  [data-theme="dark"] .dstat-bar.empty .dstat-bar-fill { background: var(--border2); }
  [data-theme="dark"] .dstat-bar:hover .dstat-bar-fill { background: var(--amber); }
  [data-theme="dark"] .dstat-bar.active .dstat-bar-fill { background: var(--amber); box-shadow: 0 0 0 2px var(--amber-glow); }
  [data-theme="dark"] .dstat-mx-cell { background: var(--bg); border-color: var(--border); color: var(--text); }
  [data-theme="dark"] .dstat-mx-cell.empty { background: transparent; color: var(--text-muted); }

  /* Sparkline-Charts: hartcodierte SVG-Farben im Dark Mode neutralisieren */
  [data-theme="dark"] svg [stroke="#e8d5c0"] { stroke: var(--border); }
  [data-theme="dark"] svg [fill="#9c7b60"]   { fill:   var(--text-muted); }
  [data-theme="dark"] svg [stroke="#3a7d52"] { stroke: var(--green); }
  [data-theme="dark"] svg [fill="#3a7d52"]   { fill:   var(--green); }
  [data-theme="dark"] svg [stroke="#c1440e"] { stroke: var(--amber); }
  [data-theme="dark"] svg [fill="#c1440e"]   { fill:   var(--amber); }
  [data-theme="dark"] svg [stroke="#f5d0bf"] { stroke: var(--surface); }
  [data-theme="dark"] svg polygon[fill^="rgba(193,68,14"] { fill: rgba(232,135,91,0.12); }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'DM Mono', monospace; background: var(--bg); color: var(--text); height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

  /* Feine Papier-Textur im Hintergrund */
  body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none; z-index: 0;
  }

  header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 22px;
    background: var(--surface);
    border-bottom: 1.5px solid var(--border);
    flex-shrink: 0; gap: 12px;
    box-shadow: 0 1px 8px rgba(61,43,31,0.06);
    position: relative; z-index: 1;
  }
  .header-left { display: flex; align-items: center; gap: 16px; }
  .logo {
    font-family: 'Fraunces', serif;
    font-size: 1.08em; font-weight: 600;
    color: var(--amber);
    letter-spacing: -0.02em; white-space: nowrap;
    text-decoration: none; cursor: pointer;
    transition: opacity 0.15s;
  }
  .logo:hover { opacity: 0.75; }
  .logo span { color: var(--text-muted); font-weight: 300; font-size: 0.85em; }
  .step-indicator { display: flex; gap: 6px; align-items: center; }
  .step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border2); transition: all 0.3s; }
  .step-dot.lk { background: var(--green-dim); border: 1.5px solid var(--green); }
  .step-dot.ki { background: var(--blue-dim); border: 1.5px solid var(--blue); }
  .step-dot.active { transform: scale(1.7); box-shadow: 0 0 7px currentColor; }
  .step-dot.done { opacity: 0.45; }
  .header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

  .app { display: flex; flex: 1; overflow: hidden; position: relative; z-index: 1; }
  .sidebar {
    width: 310px;
    background: var(--surface);
    border-right: 1.5px solid var(--border);
    display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden;
  }
  .sidebar-top { padding: 16px 14px; border-bottom: 1px solid var(--border); }
  .sidebar-back { padding: 10px 14px 6px; border-bottom: 1px solid var(--border); }
  .btn-sidebar-back {
    background: none; border: none; padding: 4px 2px;
    font-size: 0.65em; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; gap: 4px;
    transition: color 0.13s; font-family: inherit;
  }
  .btn-sidebar-back:hover { color: var(--amber); }
  .sidebar-label {
    font-size: 0.58em; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 11px;
  }
  .case-list { flex: 1; overflow-y: auto; padding: 7px; }
  .sidebar-bottom {
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  .btn-delete-case {
    width: 100%; padding: 9px 11px;
    background: #fdf0ec;
    border: 1.5px solid var(--amber-dim);
    border-radius: 7px;
    color: var(--amber);
    font-family: 'DM Mono', monospace;
    font-size: 0.7em; letter-spacing: 0.04em;
    cursor: pointer; transition: all 0.18s;
    display: none; /* nur sichtbar wenn ein Fall aktiv ist */
  }
  .btn-delete-case:hover {
    background: #f7d9cc;
    border-color: var(--amber);
    color: #9e3208;
    box-shadow: 0 2px 8px rgba(193,68,14,0.13);
  }
  .case-item {
    padding: 10px 11px; border-radius: 7px; cursor: pointer;
    border: 1px solid transparent; transition: all 0.15s; margin-bottom: 4px;
    position: relative;
  }
  .case-item:hover { background: var(--surface2); border-color: var(--border); }
  .case-item.active { background: var(--amber-glow); border-color: var(--amber-dim); }
  .case-edit-btn {
    position: absolute; top: 7px; right: 7px;
    background: none; border: none; padding: 2px 4px; border-radius: 3px;
    color: var(--text-muted); font-size: 0.8em; cursor: pointer; line-height: 1;
    opacity: 0; transition: opacity 0.12s, color 0.12s;
  }
  .case-item:hover .case-edit-btn { opacity: 1; }
  .case-edit-btn:hover { color: var(--amber); background: var(--amber-glow); }
  .case-select-cb {
    position: absolute; top: 50%; left: 8px; transform: translateY(-50%);
    width: 15px; height: 15px; cursor: pointer; accent-color: var(--amber);
    flex-shrink: 0;
  }
  .case-item:has(.case-select-cb) { padding-left: 30px; }
  .case-name { font-size: 0.8em; color: var(--text); font-weight: 500; }
  .case-meta { font-size: 0.62em; color: var(--text-muted); margin-top: 2px; }
  .case-step-badge {
    display: inline-block; font-size: 0.58em; padding: 1px 6px;
    border-radius: 3px; margin-top: 4px;
    background: var(--blue-dim); color: var(--blue);
    border: 1px solid #b0cfe0;
  }
  .case-subnav {
    margin-top: 10px; display: flex; flex-direction: column; gap: 4px;
  }

  /* ── Cycle Accordion ─────────────────────────────────── */
  .cycle-accordion { border-radius: 7px; overflow: hidden; }
  .cycle-acc-header {
    display: flex; align-items: center; gap: 6px;
    width: 100%; padding: 7px 9px;
    background: none; border: none;
    font-family: 'Fraunces', serif; font-size: 0.76em; font-weight: 500;
    cursor: pointer; transition: all 0.15s;
    border-radius: 6px; color: var(--text-dim);
  }
  .cycle-acc-header:hover { background: var(--surface2); }
  .cycle-acc-header.completed {
    color: var(--text-muted);
  }
  .cycle-acc-header.completed:hover { color: var(--text-dim); }
  .cycle-acc-header.active {
    color: var(--amber); cursor: default;
  }
  .cycle-acc-arrow {
    font-size: 0.85em; width: 12px; text-align: center;
    color: var(--text-muted); transition: transform 0.15s;
    flex-shrink: 0;
  }
  .cycle-acc-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--amber); flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--amber-glow);
    animation: acc-dot-pulse 2s ease-in-out infinite;
  }
  @keyframes acc-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(193,68,14,0.08); }
    50% { box-shadow: 0 0 0 5px rgba(193,68,14,0.15); }
  }
  .cycle-acc-title { font-weight: 600; letter-spacing: -0.01em; }
  .cycle-acc-status {
    font-family: 'DM Mono', monospace;
    font-size: 0.82em; font-weight: 400;
    opacity: 0.7; letter-spacing: 0.02em;
  }
  .cycle-acc-body {
    display: flex; flex-direction: column; gap: 2px;
    padding: 2px 0 6px 18px;
  }

  .case-subnav-cycle {
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--green); padding: 3px 6px 5px;
    font-family: 'DM Mono', monospace;
  }
  .case-subnav-item {
    display: flex; flex-direction: column; align-items: flex-start;
    width: 100%; padding: 5px 8px; border-radius: 5px;
    background: rgba(255,255,255,0.45); border: 1px solid var(--border);
    cursor: pointer; text-align: left; transition: all 0.13s;
    font-family: 'DM Mono', monospace;
  }
  .case-subnav-item:hover { background: #fff; border-color: var(--amber-dim); }
  .case-subnav-item.current { border-color: var(--amber); background: #fff; }
  .case-subnav-item.done {
    opacity: 0.65; background: transparent;
    border-color: var(--border); border-style: solid;
  }
  .case-subnav-item.done:hover { opacity: 0.85; border-color: var(--green-dim); background: var(--green-dim); }
  .case-subnav-item.done .subnav-phase { color: var(--green); }
  .case-subnav-item.done .subnav-label { color: var(--text-muted); font-size: 12px; }
  .case-subnav-item.summary-nav { border-style: dashed; }
  .case-subnav-item.summary-nav .subnav-phase { color: var(--green); }
  .case-subnav-item.unreached {
    opacity: 0.50; cursor: pointer;
    background: transparent; border-color: var(--border);
  }
  .case-subnav-item.unreached:hover { opacity: 0.75; border-color: var(--border2); }
  .subnav-phase {
    font-size: 11px; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.05em; font-weight: 600; line-height: 1.2;
  }
  .case-subnav-item.current .subnav-phase { color: var(--amber); }
  .subnav-label {
    font-size: 14px; color: var(--text); font-weight: 500; line-height: 1.3;
  }
  .case-subnav-item.unreached .subnav-label { color: var(--text-muted); }
  .case-subnav-item.optional {
    opacity: 0.55; cursor: pointer; border-style: dashed; border-color: var(--border2);
    background: transparent;
  }
  .case-subnav-item.optional:hover { opacity: 0.8; border-color: var(--amber-dim); }
  .case-subnav-item.optional .subnav-phase { color: var(--text-muted); font-style: italic; }
  .subnav-row { display: flex; align-items: center; gap: 4px; }
  .subnav-row .case-subnav-item { flex: 1; width: auto; }
  .subnav-print-btn { background: transparent; border: none; cursor: pointer; font-size: 0.75em; opacity: 0.35; padding: 3px 5px; border-radius: 4px; transition: opacity 0.15s, background 0.15s; flex-shrink: 0; line-height: 1; }
  .subnav-print-btn:hover { opacity: 1; background: var(--border2); }
  @keyframes block-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(191,93,23,0.35); }
    50%  { box-shadow: 0 0 0 6px rgba(191,93,23,0.1); }
    100% { box-shadow: 0 0 0 0 rgba(191,93,23,0); }
  }
  .block-highlight { animation: block-pulse 1.6s ease-out; outline: 2px solid var(--amber-dim); outline-offset: 2px; }
  .btn-new {
    width: 100%; padding: 9px 11px;
    background: transparent; border: 1.5px dashed var(--border2);
    border-radius: 7px; color: var(--text-dim);
    font-family: 'DM Mono', monospace; font-size: 0.7em;
    cursor: pointer; transition: all 0.15s;
    text-align: left; display: flex; align-items: center; gap: 7px;
  }
  .btn-new:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); border-style: solid; }

  .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
  .empty-state {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 16px; color: var(--text-muted); padding: 40px;
  }
  .empty-state h3 { font-family: 'Fraunces', serif; font-size: 1.1em; color: var(--text-dim); font-weight: 400; }
  .empty-state p { font-size: 0.68em; text-align: center; max-width: 280px; line-height: 1.7; }

  #chatView { flex: 1; display: none; flex-direction: column; overflow: hidden; }
  .messages { flex: 1; overflow-y: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
  .messages::-webkit-scrollbar { width: 4px; }
  .messages::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

  .msg { display: flex; gap: 10px; animation: msgIn 0.22s ease; max-width: 860px; }
  .msg.user { flex-direction: row-reverse; align-self: flex-end; }
  .msg.system { flex-direction: column; }
  @keyframes msgIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

  .msg-avatar {
    width: 28px; height: 28px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.58em; font-weight: 600; flex-shrink: 0; margin-top: 2px;
  }
  .msg.assistant .msg-avatar { background: var(--blue-dim); color: var(--blue); border: 1px solid #b0cfe0; }
  .msg.user .msg-avatar { background: var(--green-dim); color: var(--green); border: 1px solid #a8d4b4; }

  .msg-bubble {
    max-width: 630px; padding: 12px 16px; border-radius: 10px;
    font-size: 0.85em; line-height: 1.75;
  }
  .msg.assistant .msg-bubble {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top-left-radius: 2px;
    box-shadow: 0 1px 4px rgba(61,43,31,0.06);
  }
  .msg.user .msg-bubble {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-top-right-radius: 2px;
  }
  .msg-bubble strong { color: var(--amber); font-weight: 600; }
  .msg-bubble em { color: var(--text-dim); font-style: italic; }
  .msg-bubble code {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 3px; padding: 1px 5px; font-size: 0.88em; color: var(--blue);
  }
  .msg-bubble pre {
    background: var(--surface2); border: 1px solid var(--border);
    border-left: 3px solid var(--amber);
    border-radius: 0 7px 7px 0; padding: 11px 14px; margin: 9px 0;
    font-size: 1em; line-height: 1.65; color: var(--text);
    white-space: pre-wrap; word-break: break-word;
  }
  .msg-bubble h3 { font-family: 'Fraunces', serif; color: var(--amber); font-size: 1em; font-weight: 600; margin: 13px 0 5px; }
  .msg-bubble h4 { color: var(--text-dim); font-size: 0.75em; font-weight: 500; margin: 10px 0 4px; text-transform: uppercase; letter-spacing: 0.09em; }
  .msg-bubble ul, .msg-bubble ol { padding-left: 18px; margin: 5px 0; }
  .msg-bubble li { margin: 3px 0; }
  .msg-bubble hr { border: none; border-top: 1px solid var(--border); margin: 11px 0; }
  .msg-bubble table { border-collapse: collapse; width: 100%; margin: 9px 0; font-size: 0.86em; }
  .msg-bubble th { background: var(--surface2); color: var(--text-dim); padding: 6px 10px; text-align: left; font-weight: 500; border: 1px solid var(--border); }
  .msg-bubble td { padding: 5px 10px; border: 1px solid var(--border); vertical-align: top; }
  .msg-bubble tr:nth-child(even) td { background: rgba(193,68,14,0.03); }

  .typing { display: flex; gap: 4px; align-items: center; padding: 10px 0; }
  .typing span { width: 5px; height: 5px; background: var(--amber-dim); border-radius: 50%; animation: bounce 1.1s infinite; }
  .typing span:nth-child(2) { animation-delay: 0.18s; }
  .typing span:nth-child(3) { animation-delay: 0.36s; }
  @keyframes bounce { 0%,60%,100% { transform:translateY(0); opacity:0.4; } 30% { transform:translateY(-4px); opacity:1; } }

  .input-area {
    padding: 11px 18px 15px;
    border-top: 1.5px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
    box-shadow: 0 -1px 6px rgba(61,43,31,0.05);
  }
  .input-row { display: flex; gap: 9px; align-items: flex-end; }
  .msg-input {
    flex: 1; padding: 10px 14px;
    background: var(--bg); border: 1.5px solid var(--border2);
    border-radius: 8px; color: var(--text);
    font-family: 'DM Mono', monospace; font-size: 0.77em; line-height: 1.5;
    resize: none; min-height: 42px; max-height: 130px; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .msg-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }
  .msg-input::placeholder { color: var(--text-muted); }
  .btn-send {
    width: 40px; height: 40px; background: var(--amber);
    border: none; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: opacity 0.15s, transform 0.1s;
    box-shadow: 0 2px 6px rgba(193,68,14,0.3);
  }
  .btn-send:hover { opacity: 0.88; transform: translateY(-1px); }
  .btn-send:disabled { opacity: 0.28; cursor: default; transform: none; box-shadow: none; }
  .btn-send svg { width: 15px; height: 15px; fill: #fff9f3; }

  .input-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
  .input-hint { font-size: 0.58em; color: var(--text-muted); }
  .btn-sm {
    padding: 3px 10px; background: transparent;
    border: 1px solid var(--border2); border-radius: 4px;
    color: var(--text-muted); font-family: 'DM Mono', monospace;
    font-size: 0.58em; cursor: pointer; transition: all 0.15s; margin-left: 4px;
  }
  .btn-sm:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); }
  .btn-sm.danger:hover { border-color: #c0392b; color: #c0392b; background: #fdecea; }

  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(61,43,31,0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 100; backdrop-filter: blur(4px);
  }
  .modal {
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: 12px; padding: 30px; max-width: 420px; width: 90%;
    box-shadow: 0 8px 32px rgba(61,43,31,0.18);
  }
  .modal h3 { font-family: 'Fraunces', serif; color: var(--amber); margin-bottom: 13px; font-size: 1.15em; }
  .modal-back-link {
    display: inline-block; font-size: 0.62em; color: var(--text-muted);
    text-decoration: none; margin-bottom: 14px; transition: color 0.15s;
  }
  .modal-back-link:hover { color: var(--amber); }
  .modal p { font-size: 0.7em; color: var(--text-dim); line-height: 1.65; margin-bottom: 17px; }
  .modal p a { color: var(--amber); text-decoration: none; }
  .modal p a:hover { text-decoration: underline; }
  .modal label { display: block; font-size: 0.68em; color: var(--text-dim); margin-bottom: 6px; }
  .modal input {
    width: 100%; padding: 9px 12px;
    background: var(--bg); border: 1.5px solid var(--border2);
    border-radius: 6px; color: var(--text);
    font-family: 'DM Mono', monospace; font-size: 0.77em; outline: none; margin-bottom: 14px;
    transition: border-color 0.15s;
  }
  .modal input:focus { border-color: var(--amber); }
  .modal-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 5px; }
  .btn-primary {
    padding: 9px 18px; background: var(--amber); color: #fff9f3;
    border: none; border-radius: 6px;
    font-family: 'DM Mono', monospace; font-size: 0.7em; font-weight: 500;
    cursor: pointer; transition: opacity 0.15s;
    box-shadow: 0 2px 6px rgba(193,68,14,0.25);
  }
  .btn-primary:hover { opacity: 0.88; }
  .btn-secondary {
    padding: 9px 15px; background: transparent;
    border: 1.5px solid var(--border2); border-radius: 6px;
    color: var(--text-dim); font-family: 'DM Mono', monospace; font-size: 0.7em; cursor: pointer;
    transition: all 0.15s;
  }
  .btn-secondary:hover { border-color: var(--text-dim); background: var(--surface2); }

  .btn-dashboard {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 11px;
    background: transparent;
    border: 1.5px solid var(--border2);
    border-radius: 6px;
    color: var(--text-dim);
    font-family: 'DM Mono', monospace;
    font-size: 0.62em;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .btn-dashboard:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); }
  .btn-dashboard svg { width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; }

  .no-cases { font-size: 0.66em; color: var(--text-muted); padding: 16px 10px; text-align: center; line-height: 1.7; }
  .prueffragen-label {
    display: inline-block;
    color: var(--blue);
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: rgba(58,97,134,0.12);
    padding: 2px 8px 2px 6px;
    border-radius: 4px;
    border-left: 3px solid var(--blue);
    margin-bottom: 2px;
  }
  .prueffragen-block {
    border-left-color: var(--blue) !important;
    background: #eef4f9 !important;
  }
  .hint-vorab {
    margin: 8px 0 10px;
    padding: 10px 14px;
    background: rgba(74, 124, 89, 0.07);
    border: 1px solid var(--green-dim);
    border-left: 3px solid var(--green);
    border-radius: 6px;
    font-size: 0.88em;
    line-height: 1.55;
  }
  .prueffragen-block .pf-item {
    color: #1e3a5f;
    font-weight: 600;
  }
  pre:has(.prueffragen-label) {
    border-left-color: var(--blue) !important;
    background: #eef4f9 !important;
  }
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

  /* ── EIS-Farben ───────────────────────────────────────── */
  :root {
    --eis-e:      #3a7d52;   /* Enaktiv – Salbeigrün */
    --eis-e-dim:  #d4ede0;
    --eis-i:      #3a6186;   /* Ikonisch – Taubenblau */
    --eis-i-dim:  #d6e4ef;
    --eis-s:      #b8541a;   /* Symbolisch – Terrakotta */
    --eis-s-dim:  #f5ddd0;
    --eis-k:      #7a5c44;   /* Kommunikation – Braun */
    --eis-k-dim:  #ede3da;
    --eis-v:      #7b6fa0;   /* Vorsequenz – Violett */
    --eis-v-dim:  #e8e3f5;
  }

  /* ── Strukturierte Ausgabe-Blöcke ─────────────────────── */
  .sblock {
    border-radius: 9px;
    border: 1.5px solid var(--border);
    margin: 10px 0;
    overflow: hidden;
    font-size: 0.92em;
  }
  .sblock-header {
    padding: 8px 14px;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: flex; align-items: center; gap: 8px;
  }
  .sblock-header .sblock-icon { font-size: 1.1em; }
  .sblock.diagnostik .sblock-header { background: #eef4f9; color: var(--blue); border-bottom: 1px solid #c8dcea; }
  .sblock.lernziel   .sblock-header { background: #edf7f0; color: var(--green); border-bottom: 1px solid #b8dfc6; }
  .sblock.scaffolding .sblock-header{ background: #fdf0e8; color: var(--amber); border-bottom: 1px solid #e8c8a8; }
  .sblock.formular   .sblock-header { background: #f5f0fa; color: var(--eis-v); border-bottom: 1px solid #d8ccee; }

  .sblock-body { padding: 12px 14px; background: var(--surface); }

  /* Zeilen-Grid im Block */
  .sblock-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 3px 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    align-items: baseline;
  }
  .sblock-row:last-child { border-bottom: none; }
  .sblock-row.section-header {
    grid-template-columns: 1fr;
    margin-top: 8px;
    padding: 4px 0 2px 0;
    border-bottom: none;
  }
  .sblock-row.section-header .sblock-label {
    font-size: 0.72em;
    color: var(--blue);
    letter-spacing: 0.09em;
    opacity: 0.85;
  }
  .sblock-row.section-header + .sblock-row { padding-top: 4px; }
  .sblock-row.section-header-sep {
    margin-top: 14px;
    border-top: 1px solid var(--border2);
    padding-top: 8px !important;
  }
  .sblock-row.sblock-row-sep {
    margin-top: 10px;
    border-top: 1px solid var(--border2);
    padding-top: 8px;
  }
  .sblock-label {
    font-size: 0.82em; color: var(--text-muted);
    font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
    padding-top: 1px;
  }
  .sblock-value { font-size: 0.9em; color: var(--text); line-height: 1.6; }
  .sblock-value strong { color: var(--amber); }

  /* Trennlinie im Block */
  .sblock-divider {
    height: 1px; background: var(--border);
    margin: 8px 0;
  }

  /* EIS-Badge */
  .eis-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 12px;
    font-size: 0.75em; font-weight: 700;
    letter-spacing: 0.05em; margin-right: 4px;
    white-space: nowrap;
  }
  .eis-E { background: var(--eis-e-dim); color: var(--eis-e); border: 1px solid #a8d4b8; }
  .eis-I { background: var(--eis-i-dim); color: var(--eis-i); border: 1px solid #a8c4d8; }
  .eis-S { background: var(--eis-s-dim); color: var(--eis-s); border: 1px solid #d8a888; }
  .eis-K { background: var(--eis-k-dim); color: var(--eis-k); border: 1px solid #c4a888; }
  .eis-V { background: var(--eis-v-dim); color: var(--eis-v); border: 1px solid #c4b8e4; }
  .eis-EI { background: linear-gradient(90deg,var(--eis-e-dim),var(--eis-i-dim)); color: var(--eis-e); border: 1px solid #a8c8cc; }

  /* Scaffolding-Sequenz-Tabelle */
  .seq-table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 0.88em; }
  .seq-table th {
    padding: 6px 10px; text-align: left; font-weight: 600;
    font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--text-muted); border-bottom: 2px solid var(--border);
    background: var(--surface2);
  }
  .seq-table td { padding: 8px 10px; vertical-align: top; border-bottom: 1px solid var(--border); line-height: 1.55; }
  .seq-table tr:last-child td { border-bottom: none; }
  .seq-table tr.seq-vorseq td { background: var(--eis-v-dim); }
  .seq-table tr.seq-E td  { border-left: 3px solid var(--eis-e); }
  .seq-table tr.seq-I td  { border-left: 3px solid var(--eis-i); }
  .seq-table tr.seq-S td  { border-left: 3px solid var(--eis-s); }
  .seq-table tr.seq-K td  { border-left: 3px solid var(--eis-k); }
  .seq-table tr.seq-EI td { border-left: 3px solid var(--eis-e); }
  .seq-table td.seq-nr { font-weight: 700; color: var(--text-dim); width: 28px; }
  .seq-table td.seq-mat { color: var(--text-dim); font-size: 0.9em; }
  .seq-table td.seq-soz { color: var(--text-muted); font-size: 0.85em; }
  .seq-table td.seq-dur { color: var(--text-muted); font-size: 0.85em; white-space: nowrap; }
  .seq-section-label {
    font-size: 0.68em; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--text-muted);
    padding: 6px 9px 3px; margin-top: 4px;
  }

  /* ── Scaffolding Anpassungs-Block ───────────────────────── */
  .scaff-angepasst-badge {
    display: inline-block; font-size: 0.75em; font-weight: 600;
    padding: 1px 7px; border-radius: 3px; margin-left: 6px;
    background: var(--amber-glow); color: var(--amber);
    border: 1px solid var(--amber-dim);
    text-transform: none; letter-spacing: 0.02em;
  }
  .scaff-anpass-block {
    margin: 8px 0 14px; padding: 10px 12px;
    background: var(--amber-glow); border: 1px solid var(--amber-dim);
    border-left: 3px solid var(--amber); border-radius: 0 7px 7px 0;
  }
  .scaff-anpass-title {
    font-size: 0.72em; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--amber); margin-bottom: 8px;
  }
  .scaff-anpass-row {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 6px 0; border-bottom: 1px solid var(--amber-dim);
  }
  .scaff-anpass-row:last-child { border-bottom: none; }
  .scaff-anpass-stufe { flex-shrink: 0; padding-top: 2px; }
  .scaff-anpass-detail { flex: 1; min-width: 0; }
  .scaff-anpass-befund {
    font-size: 0.82em; color: var(--text-muted); font-style: italic;
  }
  .scaff-anpass-change {
    font-size: 0.88em; color: var(--text); font-weight: 500; line-height: 1.5;
  }
  .scaff-anpass-row.changed .scaff-anpass-change { color: var(--amber); }
  .scaff-anpass-grund {
    font-size: 0.75em; color: var(--text-muted); margin-top: 2px;
  }
  .scaff-anpass-row.kept { opacity: 0.6; }
  .scaff-anpass-row.kept .scaff-anpass-change { color: var(--green); }

  /* ── Scaffolding Timeline ──────────────────────────────── */
  .seq-timeline { position: relative; padding-left: 34px; margin: 6px 0; }
  .seq-timeline::before {
    content: ''; position: absolute; left: 13px; top: 8px; bottom: 8px;
    width: 1.5px; background: var(--border2);
  }
  .seq-tl-step { position: relative; padding: 0 0 16px; }
  .seq-tl-step:last-child { padding-bottom: 0; }
  .seq-tl-dot {
    position: absolute; left: -34px; top: 2px;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72em; font-weight: 600;
  }
  .seq-tl-dot.tl-E  { background: var(--eis-e-dim); color: var(--eis-e); border: 1.5px solid var(--eis-e); }
  .seq-tl-dot.tl-EI { background: var(--eis-e-dim); color: var(--eis-e); border: 1.5px solid var(--eis-e); }
  .seq-tl-dot.tl-I  { background: var(--eis-i-dim); color: var(--eis-i); border: 1.5px solid var(--eis-i); }
  .seq-tl-dot.tl-S  { background: var(--eis-s-dim); color: var(--eis-s); border: 1.5px solid var(--eis-s); }
  .seq-tl-dot.tl-K  { background: var(--eis-k-dim); color: var(--eis-k); border: 1.5px solid var(--eis-k); }
  .seq-tl-dot.tl-V  { background: var(--eis-v-dim); color: var(--eis-v); border: 1.5px solid var(--eis-v); }
  .seq-tl-header {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 3px;
  }
  .seq-tl-meta {
    font-size: 0.75em; color: var(--text-muted);
  }
  .seq-tl-body {
    font-size: 0.88em; line-height: 1.65; color: var(--text);
  }
  .seq-tl-body strong { color: var(--amber); }
  .seq-tl-sub {
    font-size: 0.78em; color: var(--text-muted); margin-top: 3px;
  }
  .seq-tl-sub strong { color: var(--text-dim); font-weight: 500; }

  /* Voraussetzungen-Liste */
  .seq-prereq { margin: 6px 0 4px; font-size: 0.85em; }
  .seq-prereq-item {
    display: flex; gap: 6px; align-items: baseline;
    padding: 3px 0; line-height: 1.5;
  }
  .seq-prereq-item .prereq-status { font-size: 1em; flex-shrink: 0; }
  .seq-prereq-item .prereq-text { color: var(--text); }

  /* Rückmeldeformular Checkboxen */
  .form-row {
    display: grid; grid-template-columns: 1fr auto;
    gap: 8px; align-items: center;
    padding: 6px 0; border-bottom: 1px solid var(--border);
  }
  .form-row:last-child { border-bottom: none; }
  .form-criterion { font-size: 0.82em; line-height: 1.45; }
  .form-checks { display: flex; gap: 6px; white-space: nowrap; }
  .form-check-opt {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.68em; color: var(--text-muted);
    border: 1px solid var(--border2); border-radius: 4px;
    padding: 2px 7px;
  }
  .check-sym { color: var(--amber); font-size: 1.1em; }

  /* 7-Punkte-Check */
  .check-row {
    display: flex; gap: 8px; align-items: baseline;
    padding: 5px 0; border-bottom: 1px solid var(--border);
    font-size: 0.9em;
  }
  .check-row:last-child { border-bottom: none; }
  .check-num { color: var(--text-muted); min-width: 18px; font-size: 0.85em; }
  .check-label { color: var(--text-dim); font-weight: 600; min-width: 140px; font-size: 0.92em; }
  .check-val { color: var(--text); flex: 1; }
  .check-pass { color: var(--eis-e); font-size: 1.15em; }
  .check-fail { color: #c0392b; font-size: 1.15em; }

  /* ── Klickbare Checkboxen ──────────────────────────────── */
  .form-check-opt { cursor: pointer; user-select: none; transition: all 0.12s; }
  .form-check-opt:hover { border-color: var(--amber); background: var(--amber-glow); }
  .form-check-opt.checked {
    border-color: var(--green); background: var(--green-dim); color: var(--green);
  }
  .form-check-opt.checked .check-sym { color: var(--green); }

  /* ── Editierbarer Freitext ─────────────────────────────── */
  .formular-freitext:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted); opacity: 0.6; pointer-events: none;
  }
  .formular-freitext:focus { background: var(--surface); border-radius: 3px; }

  /* ── Rückmeldung absenden ──────────────────────────────── */
  .btn-rueckmeldung {
    padding: 8px 18px; background: var(--green);
    color: #fff; border: none; border-radius: 7px;
    font-family: 'DM Mono', monospace; font-size: 0.72em; font-weight: 500;
    cursor: pointer; transition: opacity 0.15s, transform 0.1s;
    box-shadow: 0 2px 6px rgba(74,124,89,0.3);
  }
  .btn-rueckmeldung:hover { opacity: 0.88; transform: translateY(-1px); }
  .btn-rueckmeldung:disabled { opacity: 0.35; cursor: default; transform: none; box-shadow: none; }

  /* ── Print ─────────────────────────────────────────────── */
  #single-print-frame { display: none; }

  @media print {
    /* Alles ausblenden außer Messages */
    body { background: #fff !important; overflow: visible !important; height: auto !important; }
    body::before { display: none !important; }
    header, .sidebar, .input-area, .empty-state,
    #apiModal, #caseModal, .btn-sm, .btn-send,
    .msg.user, .no-print { display: none !important; }
    .app, .main, #chatView, .messages {
      display: block !important; overflow: visible !important;
      height: auto !important; padding: 0 !important;
    }

    /* Nur markierte Blöcke drucken */
    .msg.assistant { display: none !important; }
    .msg.assistant.print-target { display: block !important; }

    /* Einzelblock-Druck: nur den Frame zeigen, alles andere weg */
    body.printing-single > * { display: none !important; }
    body.printing-single #single-print-frame {
      display: block !important;
      padding: 12px 0;
    }
    /* Kein erzwungener Seitenumbruch beim Einzeldruck */
    body.printing-single .sblock.diagnostik,
    body.printing-single .sblock.scaffolding {
      break-before: auto !important;
      page-break-before: auto !important;
    }

    /* sblock sauber auf Papier */
    .sblock {
      break-inside: avoid; page-break-inside: avoid;
      border: 1.5px solid #999 !important; margin: 16px 0 !important;
    }
    .sblock-header { background: #f0f0f0 !important; color: #333 !important; border-bottom: 1px solid #999 !important; }
    .sblock-row.section-header .sblock-label { color: #555 !important; }
    .msg-bubble { max-width: 100% !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
    .msg-avatar { display: none !important; }
    .msg { max-width: 100% !important; }

    /* Timeline druckbar */
    .seq-timeline::before { background: #999 !important; }
    .seq-tl-dot { border-color: #666 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }

    /* EIS-Badges Farbe erzwingen */
    .eis-badge, .seq-tl-dot, .sblock-header, .form-check-opt.checked {
      print-color-adjust: exact; -webkit-print-color-adjust: exact;
    }

    /* Checkboxen groß und deutlich */
    .form-check-opt {
      border: 1.5px solid #666 !important; padding: 3px 10px !important;
      font-size: 0.78em !important;
    }
    .check-sym { font-size: 1.3em !important; }

    /* Freitext-Bereich größer für handschriftliche Notizen */
    .print-freitext { height: 80px !important; }

    /* Option C: Zeilenebene -- kein Umbruch innerhalb einer Zeile */
    .sblock-row, .seq-tl-step, tr {
      break-inside: avoid; page-break-inside: avoid;
    }
    /* Header niemals allein am Seitenende */
    .sblock-header, .sblock-row.section-header {
      break-after: avoid; page-break-after: avoid;
    }
    /* Grosse Bloecke (Diagnostik, Scaffolding) starten immer auf neuer Seite */
    .sblock.diagnostik, .sblock.scaffolding {
      break-before: page; page-break-before: always;
    }
    /* Lernziel + Formular: kompakt, kein erzwungener Umbruch */
    .sblock.lernziel, .sblock.formular {
      break-before: auto; page-break-before: auto;
    }

    /* Kopfzeile auf jeder Seite */
    .print-header {
      display: block !important; font-size: 11px; color: #666;
      border-bottom: 1px solid #ccc; padding-bottom: 6px; margin-bottom: 12px;
    }

    /* Steckbrief-Karte druckbar */
    .msg.system {
      break-inside: avoid; page-break-inside: avoid;
    }
    .steckbrief-card {
      overflow: visible !important;
      max-width: 100% !important;
      break-inside: avoid; page-break-inside: avoid;
      border: 1.5px solid #3a7d52 !important;
      print-color-adjust: exact; -webkit-print-color-adjust: exact;
    }
    .steckbrief-header {
      background: #e8f5ed !important;
      print-color-adjust: exact; -webkit-print-color-adjust: exact;
      break-after: avoid; page-break-after: avoid;
    }
    .steckbrief-footer {
      break-before: avoid; page-break-before: avoid;
    }
    .steckbrief-body {
      display: grid !important;
      grid-template-columns: 1fr 150px !important;
    }

    @page { margin: 18mm 15mm; size: A4; }
  }
  .print-header { display: none; }

  /* ── Step-Bar (Header) ──────────────────────────────── */
  .step-bar { display:flex; align-items:stretch; gap:0; }
  .step-seg {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-width:33px; padding:2px 4px; cursor:pointer;
    border-radius:4px; transition:background 0.15s; gap:1px;
  }
  .step-seg:hover { background:var(--surface2); }
  .step-seg.active { background:var(--amber-glow); }
  .step-seg-num {
    width:17px; height:17px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:0.58em; font-weight:600; flex-shrink:0;
    border:1.5px solid var(--border2); background:var(--bg); color:var(--text-muted);
    transition:all 0.2s;
  }
  .step-seg.done  .step-seg-num { background:var(--border2); border-color:var(--border2); color:var(--surface); }
  .step-seg.active.lk-step .step-seg-num { background:var(--green); border-color:var(--green); color:#fff9f3; transform:scale(1.18); box-shadow:0 0 6px var(--green-dim); }
  .step-seg.active.ki-step .step-seg-num { background:var(--blue); border-color:var(--blue); color:#fff9f3; transform:scale(1.18); box-shadow:0 0 6px var(--blue-dim); }
  .step-seg.done.lk-step .step-seg-num { background:var(--green); border-color:var(--green); }
  .step-seg.done.ki-step .step-seg-num { background:var(--blue); border-color:var(--blue); }
  .step-seg-lbl { font-size:0.48em; color:var(--text-muted); white-space:nowrap; }
  .step-seg.active.lk-step .step-seg-lbl { color:var(--green); font-weight:600; }
  .step-seg.active.ki-step .step-seg-lbl { color:var(--blue); font-weight:600; }
  .step-conn { width:7px; height:1.5px; background:var(--border); align-self:center; margin-bottom:7px; flex-shrink:0; transition:background 0.2s; }
  .step-conn.done { background:var(--border2); }

  /* ── Dashboard ──────────────────────────────────────── */
  .dashboard { padding:18px 20px; overflow-y:auto; flex:1; }
  .dash-welcome { font-family:'Fraunces',serif; font-size:0.9em; color:var(--text-dim); margin-bottom:14px; font-weight:300; }
  .dash-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
  .dash-metric { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px 13px; }
  .dash-metric-lbl { font-size:0.56em; color:var(--text-muted); letter-spacing:.07em; text-transform:uppercase; margin-bottom:3px; }
  .dash-metric-val { font-size:1.3em; font-weight:500; color:var(--text); }
  .dash-metric-val.accent { color:var(--amber); }
  .dash-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .dash-card {
    background:var(--surface); border:1px solid var(--border); border-radius:9px;
    overflow:hidden; cursor:pointer; transition:border-color 0.15s, box-shadow 0.12s;
  }
  .dash-card:hover { border-color:var(--border2); box-shadow:0 2px 8px rgba(61,43,31,0.08); }
  .dash-card-top { padding:9px 12px 7px; border-bottom:1px solid var(--border); }
  .dash-card-name { font-size:0.8em; font-weight:500; color:var(--text); display:flex; align-items:center; justify-content:space-between; }
  .dash-card-meta { font-size:0.6em; color:var(--text-muted); margin-top:2px; }
  .dash-card-bottom { padding:7px 12px; display:flex; flex-direction:row; gap:8px; align-items:flex-start; }
  .dash-card-spark { width:76px; flex-shrink:0; }
  .dash-card-spark-lbl { font-size:0.5em; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:3px; }
  /* Kompakte Niveau-Badge ersetzt die Sparkline auf Dashboard-Karten */
  .dash-card-niveau {
    width: 84px; flex-shrink: 0;
    display: flex; flex-direction: column; gap: 2px;
    padding-top: 2px;
  }
  .dash-card-niveau-lbl {
    font-size: 0.5em; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.07em;
  }
  .dash-card-niveau-val {
    font-family: 'Fraunces', serif;
    font-size: 1em; font-weight: 600;
    color: var(--amber);
    display: flex; align-items: baseline; gap: 4px;
    line-height: 1.1;
  }
  .dash-card-niveau-val .niveau-current { letter-spacing: -0.02em; }
  .dash-card-niveau-val .niveau-arrow { color: var(--text-muted); font-size: 0.8em; font-weight: 400; }
  .dash-card-niveau-val .niveau-goal { color: var(--green); letter-spacing: -0.02em; }
  .dash-card-niveau-gap {
    font-size: 0.54em; color: var(--text-muted);
    letter-spacing: 0.02em; margin-top: 1px;
  }

  /* Großer Niveau-Verlauf in der Sidebar (beim offenen Fall) */
  .sidebar-niveau-chart {
    margin: 10px 0 12px;
    padding: 8px 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
  }
  .sidebar-niveau-lbl {
    font-size: 0.58em; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 5px;
  }
  .info-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 13px; height: 13px; border-radius: 50%;
    margin-left: 5px; font-size: 0.85em; font-weight: 600;
    color: var(--text-muted); border: 1px solid var(--text-muted);
    cursor: pointer; line-height: 1; user-select: none;
    transition: color .15s, border-color .15s, background .15s;
    vertical-align: middle;
  }
  .info-icon:hover { color: var(--orange); border-color: var(--orange); background: rgba(193,68,14,0.08); }
  .info-popover-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
  }
  .info-popover {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 20px 24px;
    max-width: 560px; max-height: 80vh; overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    font-size: 0.82em; line-height: 1.5;
  }
  .info-popover h3 { margin: 0 0 12px; font-size: 1.15em; color: var(--orange); }
  .info-popover h4 { margin: 14px 0 4px; font-size: 0.95em; color: var(--text); }
  .info-popover table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
  .info-popover th, .info-popover td {
    padding: 5px 8px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--border); font-size: 0.95em;
  }
  .info-popover th { color: var(--text-muted); font-weight: 500; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.04em; }
  .info-popover td strong { color: var(--orange); }
  .info-popover-close {
    float: right; background: none; border: none; font-size: 1.3em;
    cursor: pointer; color: var(--text-muted); line-height: 1; padding: 0 4px;
  }
  .info-popover-close:hover { color: var(--orange); }
  .info-popover .info-source { font-size: 0.78em; color: var(--text-muted); font-style: italic; margin-top: 12px; }
  .sidebar-niveau-chart svg { width: 100%; height: auto; min-height: 72px; overflow: visible; }
  .dash-card-eis { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
  .dash-eis-row { display:flex; align-items:center; gap:5px; }
  .dash-eis-lbl { font-size:0.58em; font-weight:600; width:10px; flex-shrink:0; }
  .dash-eis-track { flex:1; height:3px; background:var(--border); border-radius:2px; }
  .dash-eis-fill { height:100%; border-radius:2px; }
  .dash-no-eis { font-size:0.6em; color:var(--text-muted); padding:2px 0; font-style:italic; }
  /* EIS-Stufenleiste */
  .eis-steps { display:flex; align-items:center; justify-content:center; padding:6px 0 2px; flex:1; }
  .eis-step { display:flex; flex-direction:column; align-items:center; gap:2px; }
  .eis-dot { width:18px; height:18px; border-radius:50%; border:2px solid; display:flex; align-items:center; justify-content:center; font-size:7px; font-weight:700; line-height:1; transition:background 0.2s; }
  .eis-dot.eis-done { background:#3a7d52; border-color:#2d6843; color:#fff; }
  .eis-dot.eis-wip  { background:#d4a017; border-color:#b8880f; color:#fff; }
  .eis-dot.eis-todo { background:var(--surface2); border-color:var(--border2); color:var(--text-muted); }
  .eis-conn { width:16px; height:2px; flex-shrink:0; margin-bottom:10px; }
  .eis-conn-done { background:#3a7d52; }
  .eis-conn-wip  { background:linear-gradient(90deg,#3a7d52,#d4a017); }
  .eis-conn-todo { background:var(--border); }
  .eis-summary { font-size:0.52em; color:var(--text-muted); text-align:center; margin-top:4px; padding:0 4px; }
  .niveau-badge { font-size:0.57em; padding:1px 5px; border-radius:3px; font-weight:500; background:var(--blue-dim); color:var(--blue); border:1px solid #b0cfe0; white-space:nowrap; }
  .step-pill { font-size:0.57em; padding:1px 5px; border-radius:3px; font-weight:500; background:var(--blue-dim); color:var(--blue); border:1px solid #b0cfe0; white-space:nowrap; }
  .step-pill.done-pill { background:var(--green-dim); color:var(--green); border-color:#a8d4b4; }
  .dash-empty { grid-column:1/-1; text-align:center; font-size:0.68em; color:var(--text-muted); padding:22px; line-height:1.7; }

  /* ── Key-Restore Modal: Account-Anzeige ─────────────── */
  .key-restore-account {
    background: var(--green-dim);
    border: 1px solid var(--green);
    border-left: 3px solid var(--green);
    border-radius: 6px;
    padding: 9px 13px;
    margin-bottom: 14px;
  }
  .key-restore-acc-lbl {
    font-size: 0.6em;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
  }
  .key-restore-acc-name {
    font-family: 'Fraunces', serif;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--green);
    letter-spacing: -0.01em;
  }

  /* ── Dashboard Stats Cards (interaktiv) ─────────────── */
  .dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
  }
  .dash-stats-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 11px 13px 9px;
  }
  .dash-stats-head {
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .dash-stats-title {
    font-family: 'Fraunces', serif;
    font-size: 0.82em;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .dash-stats-hint {
    font-size: 0.58em;
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }
  .dstat-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px;
    height: 74px;
    padding: 0 2px;
  }
  .dstat-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    background: none;
    border: none;
    padding: 0;
    font-family: 'DM Mono', monospace;
    cursor: pointer;
    position: relative;
    min-width: 0;
    height: 100%;
    border-radius: 4px;
    transition: background 0.13s;
  }
  .dstat-bar:hover { background: var(--amber-glow); }
  .dstat-bar-val {
    font-size: 0.62em;
    color: var(--text-muted);
    font-weight: 500;
    min-height: 10px;
    line-height: 1;
  }
  .dstat-bar.active .dstat-bar-val { color: var(--amber); font-weight: 600; }
  .dstat-bar-fill {
    width: 70%;
    max-width: 28px;
    background: var(--border2);
    border-radius: 3px 3px 0 0;
    transition: background 0.13s, height 0.25s ease;
    min-height: 2px;
  }
  .dstat-bar:hover .dstat-bar-fill { background: var(--amber-dim); }
  .dstat-bar.active .dstat-bar-fill {
    background: var(--amber);
    box-shadow: 0 0 0 2px var(--amber-glow);
  }
  .dstat-bar.empty .dstat-bar-fill { opacity: 0.35; background: var(--border); }
  .dstat-bar.empty { cursor: default; }
  .dstat-bar.empty:hover { background: none; }
  .dstat-bar.empty:hover .dstat-bar-fill { background: var(--border); }
  .dstat-bar-lbl {
    font-size: 0.55em;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .dstat-bar.active .dstat-bar-lbl { color: var(--amber); font-weight: 600; }

  /* ── EIS-Matrix (4 Dim x 3 Level) ────────────────────── */
  .dstat-matrix {
    display: grid;
    grid-template-columns: auto repeat(4, 1fr);
    gap: 2px;
    padding: 2px 0;
    font-family: 'DM Mono', monospace;
  }
  .dstat-mx-corner { }
  .dstat-mx-colhead {
    text-align: center;
    font-size: 0.68em;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 0.02em;
    padding: 3px 0;
    cursor: pointer;
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    font-family: inherit;
    transition: all 0.13s;
  }
  .dstat-mx-colhead:hover { background: var(--amber-glow); color: var(--amber); }
  .dstat-mx-colhead.active {
    color: var(--amber);
    background: var(--amber-glow);
    border-color: var(--amber);
  }
  /* Dimensionsspezifische Akzente im Header */
  .dstat-mx-colhead.eis-col-E { color: var(--eis-e); }
  .dstat-mx-colhead.eis-col-I { color: var(--eis-i); }
  .dstat-mx-colhead.eis-col-S { color: var(--eis-s); }
  .dstat-mx-colhead.eis-col-K { color: var(--eis-k); }
  .dstat-mx-colhead.active.eis-col-E,
  .dstat-mx-colhead.active.eis-col-I,
  .dstat-mx-colhead.active.eis-col-S,
  .dstat-mx-colhead.active.eis-col-K { color: var(--amber); }

  .dstat-mx-rowhead {
    text-align: right;
    font-size: 0.56em;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 6px 0 2px;
    cursor: pointer;
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    font-family: inherit;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transition: all 0.13s;
  }
  .dstat-mx-rowhead:hover { color: var(--amber); }
  .dstat-mx-rowhead.active {
    color: var(--amber);
    font-weight: 700;
    background: var(--amber-glow);
    border-color: var(--amber);
  }

  .dstat-mx-cell {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 2px;
    text-align: center;
    font-size: 0.72em;
    color: var(--text);
    cursor: pointer;
    transition: all 0.13s;
    font-family: inherit;
    font-weight: 500;
    min-height: 20px;
    line-height: 1.2;
  }
  .dstat-mx-cell:hover {
    border-color: var(--amber);
    transform: scale(1.04);
  }
  .dstat-mx-cell.active {
    background: var(--amber) !important;
    color: #fff9f3;
    border-color: var(--amber);
    box-shadow: 0 0 0 2px var(--amber-glow);
    font-weight: 700;
  }
  .dstat-mx-cell.empty {
    background: transparent;
    color: var(--text-muted);
    cursor: default;
  }
  .dstat-mx-cell.empty:hover {
    border-color: var(--border);
    transform: none;
  }

  /* ── Sidebar Search ──────────────────────────────────── */
  .sidebar-search { position:relative; margin-top:9px; }
  .sidebar-search input {
    width:100%; padding:5px 26px 5px 9px; box-sizing:border-box;
    background:var(--bg); border:1px solid var(--border2); border-radius:5px;
    color:var(--text); font-family:'DM Mono',monospace; font-size:0.67em;
    transition:border-color 0.15s;
  }
  .sidebar-search input:focus { outline:none; border-color:var(--amber); }
  .sidebar-search input::placeholder { color:var(--text-muted); }
  .sidebar-search-clear {
    position:absolute; right:7px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:var(--text-muted);
    cursor:pointer; font-size:1em; line-height:1; padding:2px;
  }
  .sidebar-search-clear:hover { color:var(--amber); }
  .sidebar-count { font-size:0.57em; color:var(--text-muted); text-align:right; padding:3px 2px 0; }

  /* ── Dashboard Filter Bar ────────────────────────────── */
  .dash-filter-bar {
    display:flex; align-items:center; flex-wrap:wrap; gap:6px;
    padding:8px 11px; margin-bottom:11px;
    background:var(--surface); border:1px solid var(--border); border-radius:8px;
  }
  .dash-filter-input {
    flex:1; min-width:120px; padding:4px 9px;
    background:var(--bg); border:1px solid var(--border2); border-radius:5px;
    color:var(--text); font-family:'DM Mono',monospace; font-size:0.68em;
    transition:border-color 0.15s;
  }
  .dash-filter-input:focus { outline:none; border-color:var(--amber); }
  .dash-filter-input::placeholder { color:var(--text-muted); }
  .filter-sep { width:1px; height:16px; background:var(--border); flex-shrink:0; }
  .filter-chips { display:flex; gap:4px; flex-wrap:wrap; }
  .filter-chip {
    padding:2px 9px; border-radius:20px;
    border:1px solid var(--border2); background:var(--bg);
    color:var(--text-dim); font-family:'DM Mono',monospace; font-size:0.62em;
    cursor:pointer; transition:all 0.12s; white-space:nowrap;
  }
  .filter-chip:hover { border-color:var(--amber); color:var(--amber); }
  .filter-chip.active { background:var(--amber-glow); border-color:var(--amber); color:var(--amber); font-weight:500; }
  .dash-filter-select {
    padding:3px 7px;
    background:var(--bg); border:1px solid var(--border2); border-radius:5px;
    color:var(--text-dim); font-family:'DM Mono',monospace; font-size:0.63em;
    cursor:pointer; transition:border-color 0.15s;
  }
  .dash-filter-select:focus { outline:none; border-color:var(--amber); }
  .dash-filter-select.active { border-color:var(--amber); color:var(--amber); background:var(--amber-glow); }
  .dash-filter-reset {
    padding:2px 8px; border-radius:20px; margin-left:auto;
    border:1px solid var(--border2); background:none;
    color:var(--text-muted); font-family:'DM Mono',monospace; font-size:0.6em;
    cursor:pointer; transition:all 0.12s;
  }
  .dash-filter-reset:hover { color:var(--amber); border-color:var(--amber); }

  /* ── Steckbrief-Karte (Summary) ─────────────────────── */
  .steckbrief-card { background:var(--surface); border:1.5px solid var(--green); border-radius:11px; overflow:hidden; max-width:580px; margin:0 auto; }
  .steckbrief-header { background:var(--green-dim); padding:9px 14px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #b8dfc6; }
  .steckbrief-title { font-size:0.78em; font-weight:600; color:var(--green); }
  .steckbrief-badge { font-size:0.58em; background:var(--green); color:#fff; padding:2px 7px; border-radius:3px; }
  .steckbrief-body { display:grid; grid-template-columns:1fr 150px; }
  .steckbrief-data { padding:11px 13px; border-right:1px solid var(--border); }
  .steckbrief-data table { width:100%; font-size:0.74em; border-collapse:collapse; }
  .steckbrief-data td { padding:3px 0; vertical-align:top; }
  .steckbrief-data td:first-child { color:var(--text-muted); padding-right:8px; white-space:nowrap; width:85px; }
  .steckbrief-viz { padding:11px 11px; display:flex; flex-direction:column; gap:11px; }
  .steckbrief-chart-lbl { font-size:0.54em; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:4px; }
  .steckbrief-footer { padding:7px 13px; text-align:center; font-size:0.64em; color:var(--text-muted); border-top:1px solid var(--border); background:rgba(193,68,14,0.03); }
  .cycle-next-cta { margin:10px auto 4px; max-width:580px; padding:10px 16px; text-align:center; font-size:0.72em; font-weight:600; color:var(--green); border:1.5px solid var(--green); border-radius:8px; background:var(--green-dim); letter-spacing:0.01em; }

  /* Rückmelde-Gate */
  .rueckmelde-gate { text-align:left; }
  .gate-title { font-size:1.15em; font-weight:700; color:var(--text); margin-bottom:4px; }
  .gate-hint { font-size:0.88em; color:var(--text-muted); margin-bottom:12px; }
  .gate-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); }
  .gate-row:last-of-type { border-bottom:none; }
  .gate-crit { flex:1; font-size:0.88em; color:var(--text); line-height:1.35; }
  .gate-eis-badge { display:inline-block; width:20px; height:20px; border-radius:4px; text-align:center; font-size:0.72em; font-weight:700; color:#fff; line-height:20px; vertical-align:middle; }
  .gate-eis-e { background:#3a7d52; }
  .gate-eis-i { background:#3a6186; }
  .gate-eis-s { background:#b8541a; }
  .gate-eis-k { background:#7a5c44; }
  .gate-prev { display:block; font-size:0.78em; color:var(--text-muted); font-style:italic; margin-top:2px; }
  .gate-select-wrap { flex-shrink:0; }
  .gate-select { font-size:0.85em; padding:5px 8px; border:1px solid var(--border2); border-radius:5px; background:var(--surface); color:var(--text); cursor:pointer; min-width:170px; }
  .gate-select:focus { outline:2px solid var(--amber); outline-offset:1px; }
  .gate-freitext-wrap { margin-top:12px; }
  .gate-freitext-label { font-size:0.82em; color:var(--text-muted); display:block; margin-bottom:4px; }
  .gate-freitext { width:100%; font-size:0.88em; padding:8px 10px; border:1px solid var(--border2); border-radius:6px; background:var(--surface); color:var(--text); resize:vertical; font-family:inherit; box-sizing:border-box; }
  .gate-freitext:focus { outline:2px solid var(--amber); outline-offset:1px; }
  .gate-actions { margin-top:14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
  .gate-btn-primary { font-size:0.95em; }
  .gate-btn-secondary { font-size:0.85em; padding:8px 18px; background:transparent; border:1.5px solid var(--border2); border-radius:6px; color:var(--text-muted); cursor:pointer; font-weight:500; transition:all 0.15s; }
  .gate-btn-secondary:hover { border-color:var(--text-muted); color:var(--text); }
  .gate-btn-secondary:disabled { opacity:0.4; cursor:default; }