:root {
    --bg: #EEF3FB;
    --bg-grad-a: #F4F8FD;
    --bg-grad-b: #DEE7F6;
    --surface: #FFFFFF;
    --surface-2: #F4F7FC;
    --ink: #0A1F3D;
    --ink-muted: #45566F;
    --line: #C9D6EA;
    --line-strong: #94ABCD;
    --blue: #2a66dd;
    --blue-deep: #1A4DB3;
    --blue-soft: #E0EAFB;
    --neon: #00B8F0;
    --neon-bright: #25E5FF;
    --neon-glow: rgba(0, 184, 240, 0.55);
    --neon-glow-2: rgba(37, 229, 255, 0.35);
    --status-ok: #00C896;
    --status-warn: #F0A500;
  }
  [data-theme="dark"] {
    --bg: #050A18;
    --bg-grad-a: #06112A;
    --bg-grad-b: #020610;
    --surface: #0B1733;
    --surface-2: #0A1428;
    --ink: #E6F0FF;
    --ink-muted: #95A9CE;
    --line: #1B2B52;
    --line-strong: #2A4080;
    --blue: #5C8DFF;
    --blue-deep: #2a66dd;
    --blue-soft: #122B58;
    --neon: #25E5FF;
    --neon-bright: #67F5FF;
    --neon-glow: rgba(37, 229, 255, 0.75);
    --neon-glow-2: rgba(103, 245, 255, 0.5);
    --status-ok: #00E5A8;
    --status-warn: #FFB02C;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: "Montserrat", system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg);
  }
  #root { width: 100%; height: 100%; }

  /* ─── Viewport (full-screen) + World (camera target) ──────────── */
  .viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background:
      radial-gradient(ellipse 80% 60% at 50% 50%, var(--bg-grad-a) 0%, var(--bg-grad-b) 100%);
    color: var(--ink);
    font-family: "Montserrat", sans-serif;
  }
  .viewport-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, var(--line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--line) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.16;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 35%, transparent 95%);
  }
  [data-theme="dark"] .viewport-grid { opacity: 0.22; }

  .viewport::after {
    content: "";
    position: absolute;
    right: 4vw;
    bottom: 3vh;
    width: clamp(180px, 22vw, 320px);
    height: clamp(180px, 22vw, 320px);
    background-image: url("assets/Coderitter-Hintergrund-Ritter_wrench_transp.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    opacity: 0.28;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.5s ease;
  }
  [data-theme="dark"] .viewport::after { opacity: 0.22; }
  .viewport:has(.world.is-narrowed)::after { opacity: 0; }
  .world {
    position: absolute;
    left: 0; top: 0;
    width: 2000px;
    height: 2000px;
    transform-origin: 0 0;
    /* Kamera-Fahrt (transition: transform ~1.1s) entfernt (Flow 11.07.): der
       Hub "flog" beim Zurueckwechseln in die Mitte — ueberfluessiger Effekt,
       ist jetzt sofort da. */
    will-change: transform;
  }
  /* Sobald ein Bereich fokussiert ist, alle Hub-Elemente (Center, Speichen,
     Rails, Ticks) ausblenden — nur der aktive Sub-Content bleibt sichtbar. */
  .world.is-narrowed > .world-rails,
  .world.is-narrowed > .compass-tick,
  .world.is-narrowed > .world-center,
  .world.is-narrowed > .branch {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s;
  }

  /* ─── Chrome (floating, NOT inside world) ─────────────────────── */
  .chrome-top-left {
    position: fixed;
    top: 28px;
    left: 32px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .theme-toggle {
    position: fixed;
    top: 28px;
    right: 32px;
    z-index: 50;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
  }
  .theme-toggle:hover {
    color: var(--blue);
    border-color: var(--blue);
    transform: rotate(15deg);
  }
  [data-theme="dark"] .theme-toggle {
    background: var(--surface-2);
    color: var(--neon);
    border-color: var(--line-strong);
  }
  [data-theme="dark"] .theme-toggle:hover {
    color: var(--neon-bright);
    border-color: var(--neon);
  }
  /* ─── Header: angemeldeter Nutzer + Abmelden ──────────────────── */
  .header-user {
    position: fixed; top: 28px; right: 80px; z-index: 50;
    display: flex; align-items: center; gap: 10px;
    height: 36px; padding: 0 6px 0 14px;
    border: 1px solid var(--line); border-radius: 18px;
    background: var(--surface); color: var(--ink-muted);
    font-family: "Montserrat", sans-serif; font-size: 12.5px;
    box-shadow: 0 2px 8px rgba(20,40,80,0.06);
  }
  .header-user-name {
    color: var(--ink); font-weight: 600;
    max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .header-user-role {
    font-family: "JetBrains Mono", monospace; font-size: 9px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
    border-left: 1px solid var(--line); padding-left: 10px;
  }
  .header-user-logout {
    height: 26px; padding: 0 13px; border: none; border-radius: 14px;
    background: var(--blue-soft); color: var(--blue-deep);
    font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 12px;
    cursor: pointer; transition: background .12s, color .12s;
  }
  .header-user-logout:hover { background: var(--blue); color: #fff; }
  [data-theme="dark"] .header-user { background: var(--surface-2); border-color: var(--line-strong); }
  [data-theme="dark"] .header-user-logout { background: var(--blue-soft); color: var(--neon-bright); }
  [data-theme="dark"] .header-user-logout:hover { background: var(--blue); color: #fff; }
  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .brand-mark {
    width: 40px;
    height: 40px;
    background-image: url("assets/Coderitter-Main-Classic-cutout.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 2px 6px rgba(42, 102, 221, 0.35));
  }
  [data-theme="dark"] .brand-mark {
    filter: drop-shadow(0 2px 8px rgba(92, 141, 255, 0.55));
  }
  .brand-name { color: var(--ink); font-weight: 600; letter-spacing: 0.22em; }
  .brand-suffix { display: none; }

  /* Breadcrumb / back nav — shown when a branch is focused */
  .breadcrumb {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    box-shadow: 0 6px 24px -10px rgba(10,31,61,0.18);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s 0.3s;
  }
  .breadcrumb.show { opacity: 1; pointer-events: auto; }
  .breadcrumb .crumb-home {
    color: var(--ink-muted);
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
  }
  .breadcrumb .crumb-home:hover { color: var(--neon); }
  .breadcrumb .crumb-sep { color: var(--line-strong); }
  .breadcrumb .crumb-current { color: var(--neon); font-weight: 600; }
  [data-theme="dark"] .breadcrumb { box-shadow: 0 6px 30px -10px rgba(0,0,0,0.6); }

  /* ─── Center core ────────────────────────────────────────────── */
  /* The core is placed in world space at (1000, 1000). The wrapper
     centers the 180×180 mark on the world point via negative offsets. */
  .core {
    position: absolute;
    width: 180px;
    height: 180px;
    z-index: 3;
  }
  .core svg { width: 100%; height: 100%; overflow: visible; position: relative; z-index: 1; }
  .core-glow {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--neon-glow) 0%, var(--neon-glow-2) 25%, transparent 65%);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
    animation: core-breathe 4s ease-in-out infinite;
  }
  [data-theme="dark"] .core-glow { opacity: 0.85; }
  @keyframes core-breathe {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50%      { transform: scale(1.05); opacity: 0.75; }
  }
  /* Rotation wird per rAF in CoreMark (hub-parts.jsx) getrieben — siehe Hover-Block. */
  .core-spin-slow { transform-origin: center; transform-box: fill-box; }
  .core-spin-rev  { transform-origin: center; transform-box: fill-box; }
  .core-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .core-logo {
    width: 48%;
    height: 48%;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(42, 102, 221, 0.35));
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
  }
  [data-theme="dark"] .core-logo {
    filter: drop-shadow(0 2px 12px rgba(92, 141, 255, 0.55));
  }

  /* Hover am Zentrum: der KI-Ritter waechst kraeftig — nur in der Uebersicht.
     Die Ring-Rotation beschleunigt smooth per rAF (CoreMark), nicht ueber CSS-duration (das wuerde springen). */
  .world:not(.is-narrowed) .world-center:hover .core-logo {
    transform: scale(1.15);
    filter: drop-shadow(0 0 18px var(--neon-glow)) drop-shadow(0 4px 14px var(--neon-glow-2));
  }

  /* ─── Ritter-Sprechblase (Klick aufs Zentrum) ───────────────── */
  .knight-speech {
    position: absolute;
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    z-index: 60;
    max-width: 300px;
    min-width: 180px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(10, 31, 61, 0.18), 0 0 22px var(--neon-glow-2);
    font-family: "Montserrat", sans-serif;
    pointer-events: none;
    animation: ks-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .knight-speech::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: var(--surface);
    border-right: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    transform: translateX(-50%) rotate(45deg);
  }
  .ks-who {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.22em;
    color: var(--neon);
    text-transform: uppercase;
    margin-bottom: 4px;
    text-shadow: 0 0 8px var(--neon-glow);
  }
  .ks-text {
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink);
    font-weight: 500;
  }
  @keyframes ks-pop {
    from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.92); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  }

  /* ─── Entladung beim Klick aufs Zentrum (verstecktes Easter-Egg) ─ */
  .core-discharge { position: absolute; inset: 0; pointer-events: none; z-index: 6; }

  /* Schockwellen-Ringe */
  .core-discharge .dw {
    position: absolute; left: 50%; top: 50%;
    width: 160px; height: 160px; margin: -80px 0 0 -80px;
    border-radius: 50%;
    border: 2.5px solid var(--neon);
    box-shadow: 0 0 26px var(--neon-glow), inset 0 0 20px var(--neon-glow-2);
    opacity: 0;
    animation: dw-expand 1s cubic-bezier(0.15, 0.85, 0.3, 1) forwards;
  }
  .core-discharge .dw2 { animation-delay: 0.1s;  border-color: var(--neon-bright); }
  .core-discharge .dw3 { animation-delay: 0.22s; border-color: var(--neon); }

  /* Greller Core-Blitz + weißer Kern */
  .core-discharge .dw-flash {
    position: absolute; left: 50%; top: 50%;
    width: 220px; height: 220px; margin: -110px 0 0 -110px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--neon-bright) 16%, var(--neon-glow) 42%, transparent 72%);
    animation: dw-flash 0.65s ease-out forwards;
  }
  .core-discharge .dw-core {
    position: absolute; left: 50%; top: 50%;
    width: 80px; height: 80px; margin: -40px 0 0 -40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 40px #fff, 0 0 80px var(--neon-glow);
    animation: dw-core 0.5s ease-out forwards;
  }

  /* Funken radial nach außen */
  .core-discharge .dw-spark { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
  .core-discharge .dw-spark::before {
    content: "";
    position: absolute;
    width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: var(--neon-bright);
    box-shadow: 0 0 9px var(--neon-glow), 0 0 4px #fff;
    animation: dw-spark 0.8s cubic-bezier(0.15, 0.85, 0.3, 1) forwards;
  }

  @keyframes dw-expand {
    0%   { transform: scale(0.3);  opacity: 0.95; }
    60%  { opacity: 0.8; }
    100% { transform: scale(4.6);  opacity: 0; }
  }
  @keyframes dw-flash {
    0%   { opacity: 0.95; transform: scale(0.4); }
    100% { opacity: 0;    transform: scale(2); }
  }
  @keyframes dw-core {
    0%   { opacity: 1; transform: scale(0.3); }
    100% { opacity: 0; transform: scale(1.3); }
  }
  @keyframes dw-spark {
    0%   { transform: translateX(12px) scale(1.2); opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateX(195px) scale(0.2); opacity: 0; }
  }

  /* When focused, the core becomes clickable to return home */
  .core-hit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    cursor: default;
    z-index: 5;
  }
  .core-hit.is-back {
    cursor: pointer;
  }
  .core-hit.is-back::before {
    content: "← HOME";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--neon);
    background: var(--surface);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .core-hit.is-back:hover::before { opacity: 0.95; }

  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.5; }
  }
  @keyframes neon-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px var(--neon-glow)); }
    50%      { filter: drop-shadow(0 0 12px var(--neon-glow)) drop-shadow(0 0 20px var(--neon-glow-2)); }
  }

  /* ─── Status dot ─────────────────────────────────────────────── */
  .status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--status-ok);
    box-shadow: 0 0 6px var(--status-ok);
    animation: pulse-dot 1.8s ease-in-out infinite;
    flex-shrink: 0;
  }
  .status-dot.warn { background: var(--status-warn); box-shadow: 0 0 6px var(--status-warn); }
  .status-dot.neon { background: var(--neon); box-shadow: 0 0 6px var(--neon-glow); }

  /* ─── Neon ring (in branch anchors) ──────────────────────────── */
  .ring {
    position: relative;
  }
  .ring svg { width: 100%; height: 100%; overflow: visible; }
  .ring .outer-arc { animation: spin 12s linear infinite; transform-origin: center; transform-box: fill-box; }
  .ring .inner-arc { animation: spin 8s linear infinite reverse; transform-origin: center; transform-box: fill-box; }
  .ring-glow {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--neon-glow) 0%, transparent 65%);
    opacity: 0.4;
    transition: opacity 0.5s;
    pointer-events: none;
  }

  /* ─── Branch anchor — the parallelogram tab spoke ─────────────── */
  /* Each Branch sits in world space; the anchor is a parallelogram
     bar pointing from the core OUTWARD. It's the clickable spoke. */
  .branch {
    position: absolute;
    /* spoke length from world-center to outer ring */
    width: 440px;
    height: 56px;
    /* transform-origin at the inner end (point closest to core) */
    transform-origin: 0 50%;
    margin-top: -28px;
    z-index: 4;
  }
  .branch-tab {
    position: absolute;
    /* Abstand zum Core */
    left: 145px;
    right: 35px;
    top: 0;
    bottom: 0;
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(.18,.9,.25,1.15);
  }
  .branch-shell {
    position: absolute;
    inset: 0;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    transform: skewX(-12deg);
    border-radius: 14px;
    transition: filter 0.4s, border-color 0.4s;
  }
  .branch-shell-glow {
    position: absolute;
    inset: 0;
    transform: skewX(-12deg);
    border-radius: 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
    background: linear-gradient(90deg, transparent 0%, var(--neon-glow-2) 40%, var(--neon-glow) 100%);
    mix-blend-mode: screen;
  }
  .branch-content {
    position: absolute;
    inset: 0;
    /* aussen (Richtung Ring-End) 56px sperren, damit der Text nicht ins Neon-Ringerl laeuft */
    padding: 0 56px 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    pointer-events: none;
  }
  .branch-content-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    transform-origin: center;
  }
  .branch-name {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex: 0 1 auto;
    color: var(--ink);
  }
  .branch-ring-end {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .branch-anchor-dot {
    /* v0.17: ausgeblendet — überlappte mit Core-Glow */
    display: none;
  }

  /* Hover state */
  .branch-tab:hover { transform: translateX(22px); }
  .branch-tab:hover .branch-shell {
    border-color: var(--neon);
    filter: drop-shadow(0 0 10px var(--neon-glow));
  }
  .branch-tab:hover .branch-shell-glow { opacity: 0.7; }
  .branch-tab:hover .ring .outer-arc { animation-duration: 1.5s; }
  .branch-tab:hover .ring .inner-arc { animation-duration: 1s; }
  .branch-tab:hover .ring-glow { opacity: 1; }
  .branch-tab:hover .ring { animation: neon-pulse 1.2s ease-in-out infinite; }

  /* When this branch is focused, the tab gets a permanent active state */
  .branch.is-active .branch-shell {
    border-color: var(--neon);
    background: var(--surface);
    filter: drop-shadow(0 0 8px var(--neon-glow));
  }
  .branch.is-active .ring-glow { opacity: 1; }

  /* When ANOTHER branch is focused, dim this branch */
  .branch.is-dim .branch-tab { opacity: 0.35; }
  .branch.is-dim .branch-anchor-dot { opacity: 0.3; }

  /* ─── Sub-content panel (branch detail) ──────────────────────── */
  /* Each branch has a sub-content area positioned in world space
     just outside its anchor, in the direction AWAY from the core. */
  .branch-sub {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s 0.2s;
    transform-origin: center;
    z-index: 1;
  }
  .branch-sub.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 20;
    /* Eigener Hintergrund mit weichem Frame, damit die Mindmap-Welt nicht
       durchblitzt, wenn die Sub-Content (Akkordeon) sich weit ausdehnt. */
    background:
      radial-gradient(ellipse 110% 100% at 50% 50%, var(--bg-grad-a) 0%, var(--bg) 100%);
    padding: 16px 18px 18px;
    margin: -16px -18px;
    border-radius: 20px;
    box-shadow: 0 10px 38px -22px rgba(10,31,61,0.12);
  }
  [data-theme="dark"] .branch-sub.is-active {
    background:
      radial-gradient(ellipse 110% 100% at 50% 50%, var(--bg-grad-a) 0%, var(--bg-grad-b) 100%);
    box-shadow: 0 10px 38px -22px rgba(0,0,0,0.55);
  }

  /* Aktives Detail-Panel: bricht aus dem skalierten World-Koordinatensystem aus
     und fuellt den echten Viewport. Native Schriftgroessen statt Downscaling,
     voller Raum auf jeder Monitor-Groesse. */
  .active-panel {
    position: fixed;
    top: 68px;
    left: 36px;
    right: 36px;
    bottom: 58px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    background:
      radial-gradient(ellipse 120% 100% at 50% 0%, var(--bg-grad-a) 0%, var(--bg) 100%);
    border-radius: 22px;
    box-shadow: 0 18px 50px -30px rgba(10,31,61,0.22);
    padding: 30px 38px 26px;
    overflow: hidden;
    opacity: 1;
    animation: panel-in 0.42s cubic-bezier(.2, .7, .2, 1);
  }
  [data-theme="dark"] .active-panel {
    background:
      radial-gradient(ellipse 120% 100% at 50% 0%, var(--bg-grad-a) 0%, var(--bg-grad-b) 100%);
    box-shadow: 0 18px 50px -30px rgba(0,0,0,0.6);
  }
  .active-panel-inner {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  @keyframes panel-in {
    from { opacity: 0; transform: translateY(14px) scale(0.992); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .branch-sub-title {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 8px;
  }
  .branch-sub-title .accent { color: var(--neon); }
  .branch-sub-h {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.05;
    margin-bottom: 6px;
    color: var(--ink);
  }
  .branch-sub-desc {
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.5;
    max-width: 460px;
    margin-bottom: 24px;
  }

  /* Generic sub-card */
  .sub-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 18px;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
    cursor: pointer;
  }
  /* .sub-card sind statische Info-Karten (cursor:default) — daher KEIN
     Hover-Effekt (Rahmen/Lift), damit sie nicht faelschlich klickbar wirken
     (Flow 11.07.). */
  .sub-card .sub-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }
  .sub-card .sub-card-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--blue-soft);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  [data-theme="dark"] .sub-card .sub-card-icon { background: var(--blue-soft); color: var(--neon); }
  .sub-card .sub-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
  }
  .sub-card .sub-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .sub-card .sub-card-meta .pill {
    background: var(--surface-2);
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--line);
  }
  .sub-card .sub-card-count {
    margin-top: 10px;
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .sub-card .sub-card-count .num {
    font-size: 22px;
    font-weight: 700;
    color: var(--neon);
    font-family: "Montserrat", sans-serif;
    line-height: 1;
  }
  .sub-card .sub-card-count .lbl {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }

  /* ─── Bereich Kunden — Master-Detail ─────────────────────────── */
  .kunden-pane,
  .controlling-pane,
  .prozess-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 12px;
    box-sizing: border-box;
  }
  .prozess-section-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .prozess-search-inline {
    width: 200px;
    margin-left: auto;
    height: 30px;
    padding: 4px 12px;
    font-size: 12px;
  }
  .prozess-section-row .kunden-sort-select { height: 30px; padding-top: 2px; padding-bottom: 2px; }
  .prozess-pill {
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink-muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .prozess-pill-status { color: var(--ink); border-color: var(--blue); }
  .prozess-pill-status.status-live { background: rgba(0, 200, 150, 0.18); border-color: var(--status-ok); color: var(--status-ok); }
  .prozess-pill-status.status-draft { background: rgba(240, 165, 0, 0.18); border-color: var(--status-warn); color: var(--status-warn); }
  .prozess-pill-status.status-in-arbeit { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
  .prozess-pill-audience { color: var(--ink-muted); }
  .prozess-pill-admin { background: rgba(240, 165, 0, 0.18); border-color: var(--status-warn); color: var(--status-warn); }
  .prozess-card-badge {
    grid-column: 2;
    justify-self: start;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--status-warn);
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.04em;
  }
  .prozess-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    grid-auto-rows: minmax(120px, max-content);
    gap: 12px;
    flex: 1;
    align-content: start;
    /* KEIN overflow:hidden — das kappte sonst die beim Hover leicht angehobene
       Karte an der oberen Kante (gleiche Klasse wie bei Kunden, Flow 11.07.). */
  }
  .prozess-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: 9px;
    padding: 14px 16px;
    cursor: pointer;
    text-align: left;
    display: grid;
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 7px;
    transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
    color: inherit;
    font-family: "Montserrat", sans-serif;
  }
  .prozess-card:hover {
    transform: translateY(-1px);
    border-color: var(--blue);
    box-shadow: 0 6px 14px -10px rgba(42, 102, 221, 0.4);
  }
  .prozess-card.status-live { border-left-color: var(--status-ok); }
  .prozess-card.status-in-arbeit { border-left-color: var(--blue); }
  .prozess-card.status-draft { border-left-color: var(--status-warn); }
  .prozess-card-icon { color: var(--blue); grid-row: 1 / span 2; align-self: start; padding-top: 2px; }
  .prozess-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .prozess-card-summary {
    font-size: 12.5px;
    color: var(--ink-muted);
    line-height: 1.45;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    grid-column: 2;
  }

  /* ── Prozess-Modal ────────────────────────────────────────── */
  .prozess-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 31, 61, 0.55);
    backdrop-filter: blur(3px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
  }
  [data-theme="dark"] .prozess-modal-backdrop { background: rgba(5, 10, 24, 0.78); }
  .prozess-modal {
    position: relative;
    background: var(--surface);
    border-radius: 14px;
    width: 100%;
    max-width: 1100px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.45);
  }
  .prozess-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--surface-2);
    color: var(--ink-muted);
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transition: color 0.12s, background 0.12s;
  }
  .prozess-modal-close:hover { color: var(--status-warn); background: var(--surface); }
  .prozess-modal-head {
    padding: 16px 22px 12px;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .prozess-modal-title {
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
  }
  .prozess-modal-desc {
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.5;
    max-width: 780px;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--surface-2);
    border-left: 3px solid var(--blue);
    border-radius: 0 6px 6px 0;
    animation: descFadeIn 0.18s ease-out;
  }
  @keyframes descFadeIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .prozess-modal-desc-toggle {
    background: transparent;
    border: 1px dashed var(--line-strong);
    color: var(--ink-muted);
    border-radius: 4px;
    padding: 3px 9px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: color .12s, border-color .12s, background .12s;
  }
  .prozess-modal-desc-toggle:hover {
    color: var(--blue);
    border-color: var(--blue);
    background: var(--blue-soft);
  }
  .prozess-modal-desc-toggle.is-open {
    color: var(--blue);
    border-color: var(--blue);
    border-style: solid;
  }
  .prozess-modal-pills { display: flex; flex-wrap: wrap; gap: 6px; }
  .prozess-modal-body {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 14px;
    padding: 14px 22px 16px;
    min-height: 0;
    flex: 1;
    overflow: hidden;
  }
  .prozess-modal-main {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .prozess-modal-mermaid-wrap {
    position: relative;
    flex: 1;
    min-height: 55vh;
    min-width: 0;
    display: flex;
  }
  .prozess-modal-mermaid {
    flex: 1;
    min-height: 55vh;
    min-width: 0;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    display: block;
    cursor: grab;
  }
  .prozess-modal-mermaid:active { cursor: grabbing; }
  .prozess-modal-mermaid svg {
    width: 100%;
    height: 100%;
    display: block;
    max-width: none !important;
    max-height: none !important;
  }
  .prozess-modal-zoom {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 4px 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 2px 8px -4px rgba(10,31,61,0.18);
  }
  .prozess-modal-zoom button {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
  }
  .prozess-modal-zoom button:hover { background: var(--blue-soft); color: var(--blue); }
  .prozess-modal-zoom-val {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--ink-muted);
    min-width: 38px;
    text-align: center;
  }
  .prozess-modal-summary {
    background: var(--surface-2);
    border-left: 3px solid var(--blue);
    border-radius: 8px;
    padding: 14px 18px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
  }
  .prozess-modal-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-left: 12px;
    border-left: 1px solid var(--line);
    min-height: 0;
  }
  .prozess-modal-side-group { display: flex; flex-direction: column; gap: 6px; }
  .prozess-modal-side-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .prozess-modal-side-pills, .prozess-modal-side-links { display: flex; flex-wrap: wrap; gap: 4px; }
  .prozess-related-link {
    padding: 3px 9px;
    border-radius: 4px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--blue);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    cursor: pointer;
  }
  .prozess-related-link:hover { background: var(--blue-soft); border-color: var(--blue); }
  .prozess-related-link.is-passive { color: var(--ink-muted); cursor: default; }
  .prozess-related-link.is-code {
    color: var(--ink-muted);
    border-style: dashed;
    word-break: break-all;
    text-align: left;
  }
  .prozess-related-link.is-code:hover {
    color: var(--blue);
    background: var(--surface);
    border-style: solid;
  }
  .prozess-related-link.is-copied {
    color: var(--status-ok);
    border-color: var(--status-ok);
    border-style: solid;
  }
  .prozess-related-link.is-copy-error {
    color: var(--status-warn);
    border-color: var(--status-warn);
    border-style: solid;
  }
  .prozess-modal-full-toggle { margin-top: auto; font-size: 11px; }
  .prozess-modal-side-tech {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
  }
  .prozess-modal-side-tech-toggle {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--line-strong);
    border-radius: 6px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    color: var(--ink-muted);
    transition: color .12s, border-color .12s, background .12s;
    text-align: left;
  }
  .prozess-modal-side-tech-toggle:hover {
    color: var(--blue);
    border-color: var(--blue);
    background: var(--blue-soft);
  }
  .prozess-modal-side-tech.is-open .prozess-modal-side-tech-toggle {
    color: var(--blue);
    border-color: var(--blue);
    border-style: solid;
  }
  .prozess-modal-side-tech-caret {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    line-height: 1;
    flex-shrink: 0;
  }
  .prozess-modal-side-tech-label {
    flex: 1;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .prozess-modal-side-tech-count {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--surface-2);
    color: var(--ink-muted);
    border: 1px solid var(--line);
  }
  .prozess-modal-side-tech.is-open .prozess-modal-side-tech-count {
    background: var(--blue-soft);
    color: var(--blue);
    border-color: var(--blue);
  }
  .prozess-modal-side-tech-body {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: descFadeIn 0.18s ease-out;
  }
  .prozess-modal-fulltext {
    padding: 14px 22px 18px;
    border-top: 1px solid var(--line);
    overflow-y: auto;
    max-height: 40vh;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink);
  }
  .prozess-modal-fulltext h1, .prozess-modal-fulltext h2, .prozess-modal-fulltext h3 {
    color: var(--ink); margin-top: 16px; margin-bottom: 6px;
  }
  .prozess-modal-fulltext h1 { font-size: 20px; }
  .prozess-modal-fulltext h2 { font-size: 16px; }
  .prozess-modal-fulltext h3 { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
  .prozess-modal-fulltext code { font-family: "JetBrains Mono", monospace; font-size: 12px; background: var(--surface-2); padding: 1px 6px; border-radius: 4px; }
  .prozess-modal-fulltext pre { background: var(--surface-2); border-radius: 8px; padding: 12px 14px; overflow-x: auto; }
  .prozess-mermaid { background: var(--surface-2); border-radius: 8px; padding: 12px; margin: 10px 0; text-align: center; }

  /* ── Code → Workflow Reverse-Index ────────────────────────── */
  .prozess-reverse-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
  }
  .prozess-reverse-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2fr;
    gap: 14px;
    align-items: center;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .prozess-reverse-code {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .prozess-reverse-workflows { display: flex; flex-wrap: wrap; gap: 4px; }
  .prozess-reverse-body {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    line-height: 1.6;
    color: var(--ink);
    white-space: pre-wrap;
    margin: 0;
  }
  .controlling-filters {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
  }
  .controlling-filter-group { display: flex; align-items: center; gap: 8px; }
  .controlling-filter-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.22em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .controlling-filter-pill {
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
  }
  .controlling-filter-pill:hover { border-color: var(--blue); color: var(--ink); }
  .controlling-filter-pill.is-active {
    border-color: var(--blue);
    color: #fff;
    background: var(--blue);
  }
  .controlling-timeline {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 6px;
  }
  .controlling-entry {
    display: flex;
    gap: 14px;
    padding: 14px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
    transition: background 0.12s, border-color 0.12s;
  }
  .controlling-entry:hover { background: var(--surface-2); border-color: var(--line-strong); }
  .controlling-entry-marker {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 7px;
    flex-shrink: 0;
    box-shadow: 0 0 8px currentColor;
  }
  .controlling-entry-body { flex: 1; min-width: 0; }
  .controlling-entry-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: baseline;
    font-family: "JetBrains Mono", monospace;
    font-size: 12.5px;
    letter-spacing: 0.06em;
  }
  .controlling-entry-action { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
  .controlling-entry-actor {
    padding: 2px 9px;
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--ink-muted);
    text-transform: uppercase;
    font-size: 11px;
  }
  .controlling-entry-target { color: var(--ink-muted); }
  .controlling-entry-target.is-clickable {
    background: var(--blue-soft);
    border: 1px solid var(--blue);
    color: var(--blue);
    padding: 2px 9px;
    border-radius: 4px;
    cursor: pointer;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    transition: background .12s, color .12s;
  }
  .controlling-entry-target.is-clickable:hover {
    background: var(--blue);
    color: white;
  }
  .controlling-entry-time {
    margin-left: auto;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    cursor: default;
  }
  .controlling-entry-time-rel { color: var(--ink-muted); font-size: 11px; }
  /* Server-Protokoll im System-Status-Tab (Ring-Puffer, Secrets maskiert) */
  .syslog-viewer {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .syslog-zeile {
    display: flex;
    gap: 10px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    line-height: 1.5;
    color: var(--ink-muted);
  }
  .syslog-zeile.is-err { color: var(--status-warn); }
  .syslog-zeit { flex-shrink: 0; font-variant-numeric: tabular-nums; opacity: 0.7; }
  .syslog-text { word-break: break-word; min-width: 0; }

  /* Tages-Kopf der Audit-Timeline: "Heute · Donnerstag, 10. Juli 2026" */
  .controlling-day {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 2px 2px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .controlling-day:first-child { margin-top: 2px; }
  .controlling-day-label { flex-shrink: 0; }
  .controlling-day-line { flex: 1; height: 1px; background: var(--line-strong); }
  .controlling-entry-toggle {
    margin-top: 6px;
    background: none;
    border: none;
    padding: 0;
    color: var(--blue);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    cursor: pointer;
  }
  .controlling-entry-toggle:hover { color: var(--neon); }
  .controlling-entry-payload {
    margin-top: 6px;
    padding: 10px 12px;
    background: var(--surface-2);
    border-radius: 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow-y: auto;
  }
  .kunden-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }
  .kunden-eyebrow {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.28em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .kunden-eyebrow .accent { color: var(--neon); }
  .kunden-title {
    font-family: "Montserrat", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    margin-top: 4px;
  }
  .kunden-search {
    width: 260px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    color: var(--ink);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
  }
  .kunden-search:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
  .kunden-state {
    padding: 20px;
    color: var(--ink-muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
  }

  /* ─── Stufe 3: Marc-Chat ──────────────────────────────────────── */
  .marc-chat {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
  }
  .marc-transcript {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 18px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .marc-msg { display: flex; gap: 10px; max-width: 88%; }
  .marc-msg.from-marc { align-self: flex-start; }
  .marc-msg.from-user { align-self: flex-end; flex-direction: row-reverse; }
  .marc-avatar {
    flex: 0 0 auto; width: 34px; height: 34px;
    border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle at 30% 30%, var(--neon), var(--blue));
    box-shadow: 0 0 10px var(--neon-glow); color: #fff;
  }
  .marc-msg-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .marc-name {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ink-muted);
  }
  .marc-bubble {
    padding: 10px 14px; border-radius: 14px;
    font-size: 14px; line-height: 1.5;
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--ink); white-space: pre-wrap; word-break: break-word;
  }
  .marc-msg.from-marc .marc-bubble { border-top-left-radius: 4px; }
  .marc-msg.from-user .marc-bubble {
    background: var(--blue); border-color: var(--blue); color: #fff;
    border-top-right-radius: 4px;
  }
  .marc-typing { display: inline-flex; gap: 4px; align-items: center; }
  .marc-typing span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted);
    animation: marc-blink 1.2s infinite ease-in-out;
  }
  .marc-typing span:nth-child(2) { animation-delay: .2s; }
  .marc-typing span:nth-child(3) { animation-delay: .4s; }
  @keyframes marc-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
  .marc-review-embed { width: 100%; margin-top: 2px; }
  .marc-composer {
    display: flex; gap: 8px; align-items: center;
    padding: 12px; border-top: 1px solid var(--line); background: var(--surface-2);
  }
  .marc-input {
    flex: 1; padding: 10px 14px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface); color: var(--ink);
    font-family: "Montserrat", sans-serif; font-size: 14px; outline: none;
    transition: border-color .12s, box-shadow .12s;
  }
  .marc-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
  .marc-input:disabled { opacity: .6; cursor: not-allowed; }
  .marc-send {
    padding: 10px 18px; border: none; border-radius: 10px;
    background: var(--blue); color: #fff; font-weight: 600; font-size: 14px;
    cursor: pointer; white-space: nowrap; transition: background .12s, opacity .12s;
  }
  .marc-send:hover:not(:disabled) { background: var(--blue-deep); }
  .marc-send:disabled { opacity: .45; cursor: not-allowed; }
  .marc-hint {
    font-size: 11px; color: var(--ink-muted);
    padding: 8px 14px 0; font-style: italic;
  }
  .kunden-body {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 18px;
    flex: 1;
    min-height: 0;
  }
  .kunden-master {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    transition: opacity .15s;
  }
  .kunden-master.is-dimmed { opacity: 0.35; pointer-events: none; }
  .kunden-master-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .kunden-master-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 10px;
    flex-shrink: 0;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    color: var(--ink);
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .1s, border-color .1s, color .1s;
    width: 100%;
    box-sizing: border-box;
  }
  .kunden-master-item:hover { background: var(--surface-2); }
  .kunden-master-item.is-selected {
    background: var(--blue-soft);
    border-color: var(--blue);
    color: var(--blue);
  }
  [data-theme="dark"] .kunden-master-item.is-selected { color: var(--neon); }
  .kunden-master-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .kunden-master-count {
    flex-shrink: 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--ink-muted);
    background: var(--surface);
    padding: 1px 6px;
    border-radius: 4px;
    min-width: 24px;
    text-align: center;
    line-height: 1.4;
  }
  .kunden-master-item.is-selected .kunden-master-count {
    background: var(--blue);
    color: #fff;
  }
  .kunden-master-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
  }
  .kunden-master-page-btn {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--ink);
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    padding: 2px 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
  }
  .kunden-master-page-btn:hover:not(:disabled) {
    background: var(--blue-soft);
    border-color: var(--blue);
    color: var(--blue);
  }
  .kunden-master-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

  .kunden-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;
  }
  .kunden-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .kunden-detail-head strong { color: var(--ink); font-weight: 600; }
  .kunden-detail-page strong { color: var(--neon); }
  .kunden-detail-controls {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .kunden-sort-select {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 4px 26px 4px 10px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
    background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
    background-size: 4px 4px;
    background-repeat: no-repeat;
    transition: border-color 0.15s, background 0.15s;
  }
  .kunden-sort-select:hover { border-color: var(--blue); }
  .kunden-sort-select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(42, 102, 221, 0.18);
  }
  [data-theme="dark"] .kunden-sort-select {
    background-color: var(--surface);
    color: var(--ink);
  }
  .kunden-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    /* Zeilenhoehe an den Karten-INHALT koppeln, nicht an die Panel-Hoehe.
       Frueher `1fr`: alle Reihen wurden auf gleiche (Panel/Reihenzahl-)Hoehe
       gezwungen — Inhalt lief ueber und wurde von overflow:hidden gekappt, und
       beim Hover-Overflow-Toggle flackerten alle Karten mit. `1fr` streckte
       ausserdem wenige Karten auf volle Hoehe (sparse Seiten wirkten aufgeblaeht).
       Jetzt `min-content`: jede Karte behaelt ihre kompakte Inhaltshoehe — nie
       kappen, nie strecken. align-content:start haelt die Karten oben.
       KEIN overflow auf dem Grid: ein Clip-Container (overflow-y:auto) kappte
       sonst die um 3px angehobene Karte an der OBEREN Kante beim Hover
       (Befund Flow 11.07.).
       Bewegungs-/Reaktivitaets-Disziplin, ADR-Sync an sp-master 11.07.2026. */
    grid-auto-rows: min-content;
    gap: 16px;
    align-content: start;
    flex: 1;
    min-height: 0;
  }
  .kunden-empty {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    color: var(--ink-muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }
  .kunden-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .kunden-page-btn {
    padding: 6px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
  }
  .kunden-page-btn:hover:not(:disabled) {
    background: var(--blue-soft);
    border-color: var(--blue);
    color: var(--blue);
  }
  .kunden-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }

  /* Card mit Hover-Erweiterung */
  .kunde-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    /* Kompaktere Karte (Flow 11.07.): engeres Padding + kleinere Innenabstaende,
       damit mehr Karten ohne Scroll auf den Schirm passen. */
    padding: 13px 15px;
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Inhalt oben verankern (Runde 2, Flow 11.07.): in gemischt hohen Reihen
       wird eine inhaltsarme Karte mitgestreckt — mit space-between rutschte die
       letzte Zeile nach unten und kollidierte mit dem CTA-Overlay. flex-start
       haelt den Inhalt oben, das CTA schwebt im leeren unteren Bereich. */
    justify-content: flex-start;
    gap: 8px;
  }
  .kunde-card:hover {
    border-color: var(--neon);
    /* KEIN box-shadow-Glow mehr: jede Neon-Glow (nach unten versetzt ODER
       symmetrisch) ueberstrahlte auf manchen Displays die untere Rahmen-Kante,
       sodass der Rahmen "abgeschnitten" wirkte (Befund Flow 11.07.). Hover =
       crispe Cyan-Kante + leichter Lift, sonst nichts -> rundum gleichmaessig. */
    /* Nur compositor-only Bewegung (transform) — so reagiert AUSSCHLIESSLICH die
       anvisierte Karte, ohne dass Nachbarn neu umbrechen/springen. Kein
       overflow:visible mehr: der Inhalt passt jetzt in die Karte, es gibt
       nichts mehr "aufzuklappen" (das war die Flacker-Quelle). */
    transform: translateY(-3px);
    z-index: 5;
  }
  .kunde-card-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .kunde-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--blue-soft), var(--surface-2));
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--blue);
    font-size: 16px;
    flex-shrink: 0;
  }
  [data-theme="dark"] .kunde-logo { color: var(--neon); }
  .kunde-card-meta { min-width: 0; flex: 1; }
  .kunde-card-name {
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }
  .kunde-card-domain {
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4px;
  }
  .kunde-accepted-badge {
    flex-shrink: 0;
    padding: 2px 7px;
    background: rgba(0, 200, 150, 0.15);
    color: var(--status-ok);
    border: 1px solid var(--status-ok);
    border-radius: 99px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    align-self: flex-start;
  }

  /* ─── Stammdaten + Maschinen-Kartei pro Kunde ─────────────── */
  .kartei-body {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 18px;
    flex: 1;
    min-height: 0;
  }
  .kartei-stammdaten,
  .kartei-maschinen {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
  }
  .kartei-section-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .kartei-section-count {
    color: var(--neon);
    font-weight: 600;
  }
  .kartei-empty {
    padding: 16px;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    color: var(--ink-muted);
    border: 1px dashed var(--line);
    border-radius: 8px;
    line-height: 1.55;
  }
  .kartei-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
  }
  .kartei-field {
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .kartei-field-key {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .kartei-field-val {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    word-break: break-word;
  }
  .kartei-field-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .kartei-source { color: var(--ink-muted); }
  .kunde-hover-actions {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .kunde-hover-research {
    padding: 3px 8px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    color: var(--ink);
    font-family: "Montserrat", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
  }
  .kunde-hover-research:hover {
    background: var(--blue-soft);
    border-color: var(--blue);
    color: var(--blue);
  }

  /* ─── Research-Modal ─────────────────────────────────────────── */
  .rm-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    background: rgba(10, 31, 61, 0.42);
    backdrop-filter: blur(3px);
    animation: cc-fade-in 0.18s ease-out;
  }
  .rm-card {
    width: min(820px, 92vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 30px 80px -20px rgba(10, 31, 61, 0.4);
    overflow: hidden;
  }
  .rm-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
  }
  .rm-state-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--status-ok);
  }
  .rm-state-dot.loading {
    background: var(--blue);
    animation: rm-blink 1s ease-in-out infinite;
  }
  .rm-state-dot.error { background: var(--status-warn); }
  @keyframes rm-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
  .rm-body {
    padding: 22px;
    overflow-y: auto;
  }
  .rm-loading {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 12px;
  }
  .rm-spinner {
    width: 28px; height: 28px;
    border: 3px solid var(--line);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: rm-spin 0.8s linear infinite;
    flex-shrink: 0;
  }
  @keyframes rm-spin { to { transform: rotate(360deg); } }
  .rm-loading-text {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    color: var(--ink);
  }
  .rm-loading-sub {
    margin-top: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    text-transform: lowercase;
  }
  .rm-error {
    padding: 18px;
    background: rgba(240, 165, 0, 0.08);
    border: 1px solid var(--status-warn);
    border-radius: 8px;
  }
  .rm-error-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .rm-error-msg {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--ink-muted);
    margin-bottom: 12px;
    word-break: break-word;
  }
  .rm-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .rm-stat-num {
    font-size: 18px;
    color: var(--neon);
    font-weight: 600;
    margin-right: 4px;
  }
  .rm-stat-sep { opacity: 0.5; }
  .rm-empty {
    padding: 20px;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    color: var(--ink-muted);
    border: 1px dashed var(--line);
    border-radius: 8px;
  }
  .rm-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .rm-field {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .rm-field-key {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .rm-field-val {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rm-field-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .rm-conf {
    padding: 2px 7px;
    border-radius: 99px;
    font-weight: 600;
  }
  .rm-conf-high {
    background: rgba(0, 200, 150, 0.15);
    color: var(--status-ok);
  }
  .rm-conf-medium {
    background: rgba(0, 184, 240, 0.15);
    color: var(--blue);
  }
  .rm-conf-low {
    background: rgba(240, 165, 0, 0.15);
    color: var(--status-warn);
  }
  .rm-source { color: var(--ink-muted); }
  .rm-source-link {
    color: var(--neon);
    text-decoration: none;
  }
  .rm-source-link:hover { text-decoration: underline; }

  /* ─── Stufe 1: Automodus-Toggle + Sichtungen-Tabelle ───────── */
  .automode-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
  }
  .automode-toggle:hover { border-color: var(--line-strong); }
  .automode-toggle input { display: none; }
  .automode-track {
    width: 50px; height: 26px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 13px;
    position: relative;
    transition: background .2s, border-color .2s;
  }
  .automode-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    background: var(--ink-muted);
    border-radius: 50%;
    transition: left .2s, background .2s;
  }
  .automode-toggle.is-on .automode-track {
    background: var(--blue-soft);
    border-color: var(--blue);
  }
  .automode-toggle.is-on .automode-thumb {
    left: 26px;
    background: var(--blue);
  }
  .automode-label {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
  }
  .automode-label-state {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink-muted);
  }
  .automode-toggle.is-on .automode-label-state {
    color: var(--blue);
  }
  [data-theme="dark"] .automode-toggle.is-on .automode-label-state { color: var(--neon); }
  .automode-label-text {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    text-transform: uppercase;
    margin-top: 3px;
  }

  /* ─── RBAC v2: Rechte-Matrix, Read-only-Gating, Automode-Readonly ─── */
  .perm-row {
    display: grid;
    grid-template-columns: 1fr 70px 90px;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink);
  }
  .perm-row:last-child { border-bottom: 0; }
  .readonly-chip {
    font-family: "JetBrains Mono", monospace;
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--status-warn);
    border: 1px solid var(--status-warn);
    border-radius: 999px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
  }
  .readonly-banner {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 11px;
    margin-bottom: 8px;
  }
  .write-gate-locked { pointer-events: none; opacity: 0.5; }
  .automode-readonly {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    text-align: right;
  }
  .automode-readonly-label {
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-muted);
  }
  .automode-readonly-hint {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 2px;
  }

  .stufe1-stat-card {
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .stufe1-stat-num {
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
  }
  .stufe1-stat-num.accent { color: var(--neon); }
  .stufe1-stat-num.warn { color: var(--status-warn); }
  .stufe1-stat-lbl {
    margin-top: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .stufe1-thresh {
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: 4px;
  }
  .stufe1-thresh-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .stufe1-thresh-buttons {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
  }
  .stufe1-thresh-btn {
    flex: 1;
    padding: 4px 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--ink);
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
  }
  .stufe1-thresh-btn:disabled { opacity: 0.35; cursor: not-allowed; }
  .stufe1-thresh-btn.is-active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
  }
  .stufe1-thresh-hint {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    color: var(--ink-muted);
    line-height: 1.5;
  }
  .stufe1-bulk {
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .stufe1-bulk-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .stufe1-bulk-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .stufe1-bulk-input {
    width: 58px;
    padding: 5px 7px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--ink);
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    text-align: center;
  }
  .stufe1-bulk-input:focus { border-color: var(--blue); outline: none; }
  .stufe1-bulk-unit {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--ink-muted);
    letter-spacing: 0.08em;
  }
  .stufe1-bulk-btn {
    flex: 1;
    padding: 6px 12px;
    background: var(--blue);
    color: #fff;
    border: 1px solid var(--blue);
    border-radius: 5px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s;
  }
  .stufe1-bulk-btn:hover { background: var(--blue-deep); }
  .stufe1-bulk-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .stufe1-bulk-bar {
    height: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
  }
  .stufe1-bulk-fill {
    height: 100%;
    background: var(--blue);
    transition: width .3s;
  }
  .stufe1-bulk-status {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
  }

  .stufe1-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px;
    text-transform: none;
    letter-spacing: 0;
  }
  .stufe1-empty-icon {
    font-size: 36px;
    color: var(--neon);
  }
  .stufe1-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding-right: 4px;
  }
  .stufe1-firmas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
  }
  /* Karte ist im Default kompakt — nur Header sichtbar. Beim Hover oder
     Focus-Within klappt die Sichtungs-Liste über max-height auf.
     Edge-Case-Fix (21.05.2026): die untere Karte einer 6er-Page ragt
     beim Aufklappen in den Pagination-Bereich. Statt push-based die
     Karte beim Aufklappen über `position: relative; z-index` und
     `overflow: visible` über die Pagination legen — fühlt sich wie
     ein Popover an, ohne `position: absolute`-Choreographie. */
  .firma-karte {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: border-color .15s, box-shadow .15s;
    overflow: hidden;
    outline: none;
    position: relative;
    z-index: 1;
  }
  .firma-karte:hover,
  .firma-karte:focus-within {
    border-color: var(--blue);
    box-shadow: 0 8px 24px -10px rgba(10, 31, 61, 0.35);
    overflow: visible;
    z-index: 10;
  }
  [data-theme="dark"] .firma-karte:hover,
  [data-theme="dark"] .firma-karte:focus-within {
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.65);
  }
  .firma-karte-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--surface-2);
    color: var(--ink);
    border-bottom: 1px solid transparent;
    transition: border-bottom-color .15s;
  }
  .firma-karte:hover .firma-karte-head,
  .firma-karte:focus-within .firma-karte-head {
    border-bottom-color: var(--line);
  }
  .firma-karte-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease-out;
    display: flex;
    flex-direction: column;
  }
  .firma-karte:hover .firma-karte-list,
  .firma-karte:focus-within .firma-karte-list {
    max-height: 360px;
    overflow-y: auto;
  }
  .firma-karte-firma {
    font-family: "Montserrat", sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--blue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
  }
  [data-theme="dark"] .firma-karte-firma { color: var(--neon); }
  .firma-karte-meta {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .firma-karte-pill {
    padding: 3px 10px;
    border-radius: 99px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .firma-karte-pending {
    background: rgba(240, 165, 0, 0.18);
    color: var(--status-warn);
  }
  .firma-karte-auto {
    background: rgba(0, 200, 150, 0.18);
    color: var(--status-ok);
  }
  .firma-karte-empty {
    background: var(--surface-2);
    color: var(--ink-muted);
    border: 1px dashed var(--line);
  }
  .firma-karte-hint {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    text-transform: uppercase;
    opacity: 0.6;
    transition: opacity .15s;
    white-space: nowrap;
  }
  .firma-karte:hover .firma-karte-hint,
  .firma-karte:focus-within .firma-karte-hint {
    opacity: 0;
  }
  .firma-karte-approve-btn {
    padding: 5px 12px;
    background: var(--status-ok);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .15s, transform .15s, background .12s;
    pointer-events: none;
  }
  .firma-karte:hover .firma-karte-approve-btn,
  .firma-karte:focus-within .firma-karte-approve-btn {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
  .firma-karte-approve-btn:hover { background: #00b386; }
  .firma-karte-approve-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--line-strong);
  }
  .firma-karte:hover .firma-karte-approve-btn:disabled,
  .firma-karte:focus-within .firma-karte-approve-btn:disabled {
    opacity: 0.5;
  }
  .firma-karte-empty-hint {
    padding: 12px 14px;
    color: var(--ink-muted);
    font-style: italic;
    font-size: 12px;
  }
  .firma-karte-toggle-more {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-top: 1px dashed var(--line);
    color: var(--blue);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
  }
  [data-theme="dark"] .firma-karte-toggle-more { color: var(--neon); }
  .firma-karte-toggle-more:hover { background: var(--blue-soft); }

  /* Sichtungs-Zeile innerhalb der Karte: Checkbox + Field + Value + Details */
  .firma-zeile {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
    transition: background .12s;
  }
  .firma-zeile:first-child { border-top: none; }
  .firma-zeile-main {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    transition: background .12s;
  }
  .firma-zeile-main:hover { background: var(--blue-soft); }
  [data-theme="dark"] .firma-zeile-main:hover { background: rgba(0, 220, 255, 0.07); }
  .firma-zeile.sichtung-status-auto_approved .firma-zeile-main,
  .firma-zeile.sichtung-status-approved .firma-zeile-main {
    background: rgba(0, 200, 150, 0.05);
  }
  [data-theme="dark"] .firma-zeile.sichtung-status-auto_approved .firma-zeile-main,
  [data-theme="dark"] .firma-zeile.sichtung-status-approved .firma-zeile-main {
    background: rgba(0, 200, 150, 0.08);
  }
  .firma-zeile-check {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .firma-zeile-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--status-ok);
    cursor: pointer;
  }
  .firma-zeile-check input[type="checkbox"]:disabled { cursor: not-allowed; }
  .firma-zeile-field {
    flex-shrink: 0;
    width: 120px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .firma-zeile-value {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    flex: 1;
    min-width: 0;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .firma-zeile-details-btn {
    flex-shrink: 0;
    padding: 3px 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: background .12s, color .12s, border-color .12s;
  }
  .firma-zeile-details-btn:hover {
    background: var(--surface-2);
    color: var(--blue);
    border-color: var(--line);
  }
  .firma-zeile.is-details-open .firma-zeile-details-btn {
    background: var(--surface-2);
    color: var(--blue);
    border-color: var(--line);
  }
  [data-theme="dark"] .firma-zeile.is-details-open .firma-zeile-details-btn,
  [data-theme="dark"] .firma-zeile-details-btn:hover { color: var(--neon); }
  .firma-zeile-details {
    padding: 10px 14px 12px 44px;
    background: var(--surface-2);
    border-top: 1px dashed var(--line);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
  }
  .firma-zeile-details-row {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .firma-zeile-details-key {
    width: 80px;
    flex-shrink: 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .firma-zeile-details-val { color: var(--ink); }
  .firma-zeile-details-link {
    color: var(--neon);
    text-decoration: none;
  }
  .firma-zeile-details-link:hover { text-decoration: underline; }
  .firma-zeile-details-action {
    margin-top: 6px;
    align-self: flex-start;
  }
  .sichtung-status-tag {
    flex-shrink: 0;
    padding: 1px 7px;
    background: var(--status-ok);
    color: #fff;
    border-radius: 99px;
    font-family: "JetBrains Mono", monospace;
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
  }
  /* Confidence-Dots (kleine Status-Markierung für Vertrauen) */
  .sichtung-conf-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--line-strong);
  }
  .sichtung-conf-dot.sichtung-conf-high { background: var(--status-ok); }
  .sichtung-conf-dot.sichtung-conf-medium { background: var(--blue); }
  .sichtung-conf-dot.sichtung-conf-low { background: var(--status-warn); }
  /* Quellen-Korroboration (11.06.2026): Badges in der Sichtungs-Zeile */
  .sichtung-badge {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 99px;
    font-family: "JetBrains Mono", monospace;
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: help;
  }
  .sichtung-badge-bestaetigt {
    color: var(--status-ok);
    border: 1px solid var(--status-ok);
    background: rgba(0, 200, 150, 0.08);
  }
  .sichtung-badge-konflikt {
    color: var(--status-warn);
    border: 1px solid var(--status-warn);
    background: rgba(240, 165, 0, 0.12);
  }
  .sichtung-detail-bestaetigt { color: var(--status-ok); }
  .sichtung-detail-konflikt { color: var(--status-warn); }
  .wizard-domain-warn {
    margin: 8px 0 12px;
    padding: 8px 12px;
    border: 1px solid var(--status-warn);
    border-radius: 6px;
    background: rgba(240, 165, 0, 0.10);
    color: var(--status-warn);
    font-size: 12px;
    line-height: 1.5;
  }
  /* Bestandsabgleich (11.06.2026): "bereits eingetragen" im Wizard */
  .wizard-alles-eingetragen {
    margin: 8px 0 12px;
    padding: 8px 12px;
    border: 1px solid var(--status-ok);
    border-radius: 6px;
    background: rgba(0, 200, 150, 0.08);
    color: var(--status-ok);
    font-size: 12px;
    line-height: 1.5;
  }
  .wizard-review-row.is-eingetragen .wizard-review-value,
  .wizard-review-row.is-eingetragen .wizard-review-field {
    opacity: 0.55;
  }
  .wizard-review-eingetragen {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 99px;
    font-family: "JetBrains Mono", monospace;
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--status-ok);
    border: 1px solid var(--status-ok);
    background: rgba(0, 200, 150, 0.08);
    cursor: help;
  }
  .wizard-review-ersetzt {
    flex-shrink: 0;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1px 7px;
    border-radius: 99px;
    font-family: "JetBrains Mono", monospace;
    font-size: 8px;
    letter-spacing: 0.05em;
    color: var(--status-warn);
    border: 1px solid var(--status-warn);
    background: rgba(240, 165, 0, 0.10);
    cursor: help;
  }
  /* Gesamtbild (11.06.2026): Stufe-3-Kandidaten-Panel + Lücken-Chips */
  .marc-kandidaten {
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
  }
  .marc-kandidaten-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 8px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    margin-bottom: 8px;
  }
  .marc-kandidaten-row {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .marc-kandidaten-select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
  }
  .marc-kandidaten-leer {
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.5;
  }
  .marc-kandidaten-felder {
    margin-top: 8px;
    font-size: 11px;
    color: var(--ink-muted);
    line-height: 1.5;
  }
  .kartei-luecken-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }
  .kartei-luecke-chip {
    /* Auch als <button> im Einsatz (klickbare Luecken-Spruenge) — den hellen
       Browser-Default-Hintergrund explizit abschalten, sonst heller Chip mit
       hellem Text (Befund 10.07.). */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    padding: 3px 10px;
    border-radius: 99px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    border: 1px dashed var(--line-strong);
    color: var(--ink-muted);
    cursor: help;
  }
  button.kartei-luecke-chip { cursor: pointer; }
  button.kartei-luecke-chip:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: rgba(42, 102, 221, 0.08);
  }
  .kartei-luecke-chip.is-offen {
    color: var(--blue);
    border-color: var(--line-strong);
  }
  .kartei-luecke-chip.is-pending {
    border-style: solid;
    color: var(--blue);
    border-color: var(--blue);
    background: rgba(42, 102, 221, 0.08);
  }
  .kartei-luecke-chip.is-exhausted {
    border-style: solid;
    color: var(--status-warn);
    border-color: var(--status-warn);
    background: rgba(240, 165, 0, 0.10);
  }
  /* Maschinen-Übersicht (Prozessketten, 11.06.2026) */
  .maschinen-uebersicht-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
  }
  .maschinen-uebersicht-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .maschinen-uebersicht-firma {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
  }
  .maschinen-uebersicht-name { font-weight: 700; font-size: 13px; color: var(--ink); }
  .maschinen-uebersicht-zahlen {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    color: var(--ink-muted);
    letter-spacing: 0.05em;
  }
  .maschinen-uebersicht-typen {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .maschinen-ohne-set-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
  }
  .maschinen-ohne-set-mehr {
    font-size: 11px;
    color: var(--ink-muted);
  }
  .kartei-kette-status {
    margin: 8px 0 10px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
  }
  .kartei-kette-status.is-ok {
    color: var(--status-ok);
    border: 1px solid var(--status-ok);
    background: rgba(0, 200, 150, 0.07);
  }
  .kartei-kette-status.is-fehlt {
    color: var(--status-warn);
    border: 1px solid var(--status-warn);
    background: rgba(240, 165, 0, 0.09);
  }
  .stufe1-btn {
    padding: 3px 7px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
  }
  .stufe1-btn.approve { color: var(--status-ok); }
  .stufe1-btn.approve:hover { background: rgba(0,200,150,0.12); border-color: var(--status-ok); }
  .stufe1-btn.reject { color: var(--status-warn); }
  .stufe1-btn.reject:hover { background: rgba(240,165,0,0.12); border-color: var(--status-warn); }
  .stufe1-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  /* ─── Stufe 2 — Wizard (Start → Auswahl → Suche → Häkchen) ──── */
  .wizard-start {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 20px;
  }
  .wizard-start-icon {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 4px;
  }
  .wizard-start-title {
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
  }
  .wizard-start-sub {
    max-width: 540px;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-muted);
  }
  .wizard-start-sub strong {
    color: var(--blue);
    font-weight: 700;
  }
  [data-theme="dark"] .wizard-start-sub strong { color: var(--neon); }
  .wizard-start-meta {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .wizard-start-meta strong {
    color: var(--blue);
    font-size: 14px;
    margin-right: 4px;
  }
  [data-theme="dark"] .wizard-start-meta strong { color: var(--neon); }
  .wizard-start-btn {
    margin-top: 10px;
    padding: 12px 28px;
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, transform .12s;
    box-shadow: 0 4px 14px -6px rgba(42, 102, 221, 0.55);
  }
  .wizard-start-btn:hover { background: var(--blue-deep); transform: translateY(-1px); }
  .wizard-start-btn:disabled {
    background: var(--line-strong);
    color: var(--ink-muted);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
  }

  /* Phase: Firma wählen */
  .wizard-choose {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 4px;
  }
  .wizard-choose-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--line);
  }
  .wizard-choose-count {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .wizard-choose-count strong { color: var(--ink); margin-right: 4px; }
  .wizard-choose-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    padding: 8px 4px 8px 0;
    min-height: 0;
  }
  .wizard-choose-row {
    display: grid;
    grid-template-columns: 220px 200px 1fr 100px 130px;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .12s, background .12s, transform .12s;
    text-align: left;
  }
  .wizard-choose-row:hover {
    border-color: var(--blue);
    background: var(--blue-soft);
    transform: translateX(2px);
  }
  .wizard-choose-name {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wizard-choose-domain {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--blue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  [data-theme="dark"] .wizard-choose-domain { color: var(--neon); }
  .wizard-choose-meta {
    font-size: 11px;
    color: var(--ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wizard-choose-accepted {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .wizard-choose-arrow {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--blue);
    text-transform: uppercase;
    font-weight: 700;
    text-align: right;
  }
  [data-theme="dark"] .wizard-choose-arrow { color: var(--neon); }

  /* Phase: Suche läuft */
  .wizard-search-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 18px;
  }
  .wizard-search-state-title {
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
  }
  .wizard-search-state-sub {
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink-muted);
  }

  /* Phase: Review (Häkchen-Liste) */
  .wizard-review {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
  }
  .wizard-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .wizard-review-firm {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
  }
  .wizard-review-sub {
    font-size: 11px;
    color: var(--ink-muted);
    margin-top: 2px;
  }
  .wizard-review-sub strong { color: var(--ink); }
  .wizard-review-approve {
    /* nutzt die gleiche Definition wie firma-karte-approve-btn,
       aber dauerhaft sichtbar (kein Hover-Reveal) */
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    padding: 8px 18px !important;
    font-size: 12px !important;
  }
  .wizard-review-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    min-height: 0;
    padding-right: 4px;
  }
  .wizard-review-block {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }
  .wizard-review-block.is-empty { opacity: 0.5; }
  .wizard-review-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
  }
  .wizard-review-block-count {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    text-transform: uppercase;
    font-weight: 600;
  }
  .wizard-review-block-empty {
    padding: 14px;
    font-size: 11px;
    color: var(--ink-muted);
    font-style: italic;
  }
  .wizard-review-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 14px;
    border-top: 1px solid var(--line);
    transition: background .12s;
  }
  .wizard-review-row:first-of-type { border-top: none; }
  .wizard-review-row.is-expanded { background: var(--surface-2); }
  .wizard-review-row.is-override .wizard-review-value { color: var(--neon); }
  .wizard-review-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .wizard-review-row-main input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--status-ok);
    cursor: pointer;
    flex-shrink: 0;
  }
  .wizard-review-conf {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 4px;
    border: 1px solid var(--line);
    flex-shrink: 0;
    letter-spacing: 0.03em;
  }
  .wizard-review-conf.is-strong { color: var(--status-ok); border-color: var(--status-ok); background: rgba(46, 204, 113, 0.08); }
  .wizard-review-conf.is-ok     { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); }
  .wizard-review-conf.is-weak   { color: var(--status-warn); border-color: var(--status-warn); background: rgba(255, 165, 0, 0.08); }
  .wizard-review-conf.is-unknown{ color: var(--ink-muted); }
  .wizard-review-action {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-muted);
    border-radius: 4px;
    padding: 4px 7px;
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
    font-family: "JetBrains Mono", monospace;
    transition: background .12s, color .12s, border-color .12s;
  }
  .wizard-review-action:hover { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); }
  .wizard-review-action.is-active { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); }
  .wizard-review-action.is-danger:hover { background: rgba(231, 76, 60, 0.08); color: var(--status-bad, #e74c3c); border-color: var(--status-bad, #e74c3c); }
  .wizard-review-detail {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .wizard-review-detail-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .wizard-review-raw {
    margin: 0;
    padding: 8px 10px;
    background: var(--surface-2);
    border-left: 2px solid var(--blue);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    line-height: 1.5;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 0 4px 4px 0;
  }
  .wizard-review-source {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
  }
  .wizard-review-source-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .wizard-review-source a {
    color: var(--blue);
    text-decoration: none;
    word-break: break-all;
  }
  .wizard-review-source a:hover { text-decoration: underline; }
  .wizard-review-action-panel {
    background: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .wizard-review-action-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .wizard-review-action-select,
  .wizard-review-action-input {
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    font-family: "Montserrat", sans-serif;
  }
  .wizard-review-action-input:focus,
  .wizard-review-action-select:focus { outline: none; border-color: var(--blue); }
  .wizard-review-action-buttons {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
  }
  .wizard-review-action-btn {
    border: 1px solid var(--line);
    background: var(--blue);
    color: white;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 11px;
    font-family: "Montserrat", sans-serif;
    cursor: pointer;
    transition: opacity .12s, background .12s;
  }
  .wizard-review-action-btn:hover { opacity: 0.85; }
  .wizard-review-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .wizard-review-action-btn:disabled:hover { opacity: 0.4; }
  .wizard-review-action-btn.ghost {
    background: transparent;
    color: var(--ink-muted);
  }
  .wizard-review-action-btn.ghost:hover { color: var(--ink); border-color: var(--ink-muted); }
  .wizard-review-action-btn.is-danger { background: var(--status-bad, #e74c3c); }
  .wizard-review-field {
    width: 130px;
    flex-shrink: 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .wizard-review-value {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    flex: 1;
    line-height: 1.3;
    word-break: break-word;
  }

  /* ─── Stufe 2 — alter Wizard (Progress-Bar, Tabs etc., wird nicht mehr genutzt) ── */
  .wizard-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.08em;
  }
  .wizard-progress-bar {
    width: 140px;
    height: 6px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
  }
  .wizard-progress-fill {
    height: 100%;
    background: var(--blue);
    transition: width .3s;
  }
  .wizard-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    padding-top: 8px;
  }
  .wizard-card {
    width: min(680px, 100%);
    padding: 20px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 4px 18px -8px rgba(10,31,61,0.12);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .wizard-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .wizard-card-firm {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
  }
  .wizard-card-source {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .wizard-captcha-placeholder {
    padding: 18px;
    background: var(--surface-2);
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .wizard-captcha-grid {
    display: flex;
    gap: 8px;
  }
  .wizard-captcha-tile {
    width: 44px;
    height: 56px;
    background: linear-gradient(135deg, var(--blue-soft), var(--surface));
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-family: "Montserrat", sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--blue);
    transform: rotate(-3deg);
    box-shadow: 0 2px 6px rgba(10,31,61,0.1);
  }
  .wizard-captcha-tile:nth-child(2) { transform: rotate(2deg); }
  .wizard-captcha-tile:nth-child(3) { transform: rotate(-1deg); }
  .wizard-captcha-tile:nth-child(4) { transform: rotate(4deg); }
  .wizard-captcha-tile:nth-child(5) { transform: rotate(-2deg); }
  .wizard-captcha-hint {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
  }
  .wizard-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
  }
  .wizard-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    color: var(--ink);
    outline: none;
  }
  .wizard-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
  .wizard-btn {
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
  }
  .wizard-btn.primary {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
  }
  .wizard-btn.primary:hover { background: var(--blue-deep); }
  .wizard-btn.ghost {
    background: var(--surface);
    color: var(--ink-muted);
  }
  .wizard-btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
  .wizard-note {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    line-height: 1.6;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
  }
  .wizard-done {
    margin: auto;
    padding: 24px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .wizard-done-icon {
    font-size: 48px;
    color: var(--status-ok);
  }
  .wizard-done-title {
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
  }
  .wizard-done-sub {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    color: var(--ink-muted);
    max-width: 520px;
    line-height: 1.6;
  }
  .wizard-card-sub {
    margin-top: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
  }
  .wizard-search-prompt {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: var(--blue-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .wizard-search-text {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.55;
  }
  .wizard-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .wizard-results-head {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .wizard-results-head strong {
    font-size: 16px;
    color: var(--neon);
    margin-right: 4px;
  }
  .wizard-matches {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .wizard-match {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .wizard-match-main { min-width: 0; }
  .wizard-match-name {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wizard-match-meta {
    margin-top: 2px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
  }
  .wizard-source-tabs {
    display: flex;
    gap: 6px;
  }
  .wizard-source-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 99px;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-muted);
  }
  .wizard-source-tab.is-active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
  }
  .wizard-source-tab.is-done {
    color: var(--status-ok);
    border-color: var(--status-ok);
    background: rgba(0,200,150,0.08);
  }
  .wizard-source-icon { font-size: 13px; }
  .wizard-fields-hint {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--ink-muted);
  }
  .wizard-result-desc {
    color: var(--ink-muted);
    font-weight: 400;
  }
  .wizard-result-desc-block {
    padding: 8px 12px;
    background: var(--surface-2);
    border-left: 3px solid var(--blue);
    border-radius: 4px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink-muted);
    font-style: italic;
  }
  .wizard-no-data {
    padding: 14px 16px;
    background: rgba(240, 165, 0, 0.08);
    border: 1px solid var(--status-warn);
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink);
  }
  .wizard-no-data strong { color: var(--status-warn); }
  .wizard-extracted {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 6px 14px;
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .wizard-ex-row {
    display: contents;
  }
  .wizard-ex-key {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    text-transform: uppercase;
    align-self: center;
  }
  .wizard-ex-val {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
  }

  /* ─── Bereich Maschinen ──────────────────────────────────────── */
  .maschinen-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 12px;
    box-sizing: border-box;
  }
  .maschinen-lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    grid-auto-rows: minmax(150px, max-content);
    align-content: start;
    gap: 14px;
  }
  .maschine-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
  }
  .maschine-card:hover {
    border-color: var(--blue);
    transform: translateY(-2px);
    /* Kein nach unten versetzter Glow (ueberstrahlte die Unterkante, Flow 11.07.). */
  }
  .maschine-card.is-open {
    border-color: var(--neon);
    /* Nur der crispe 1px-Ring, KEIN nach unten versetzter Bloom mehr (Flow 11.07.). */
    box-shadow: 0 0 0 1px var(--neon);
    background: var(--blue-soft);
  }
  .maschine-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .maschine-card-meta strong { font-size: 15px; }
  .maschine-card-name {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
  }
  .maschine-card-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    text-transform: lowercase;
  }
  .maschine-card-meta strong { color: var(--neon); font-weight: 600; }
  .maschinen-detail {
    padding: 12px 16px;
    border: 1px solid var(--blue);
    border-radius: 10px;
    background: var(--blue-soft);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .maschinen-detail-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    color: var(--ink);
  }
  .maschinen-detail-head strong { font-weight: 600; }
  .maschinen-detail-hint { color: var(--ink-muted); font-size: 11px; }
  .maschinen-detail-note {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    line-height: 1.55;
  }
  .maschinen-hint {
    padding: 10px 12px;
    text-align: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    text-transform: uppercase;
    border: 1px dashed var(--line);
    border-radius: 8px;
  }

  /* Maschinen-Kartei eines konkreten Kunden */
  .maschinen-kartei-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    /* min 92px als kompakte Basis, waechst aber mit dem Inhalt statt fest zu
       kappen/spillen (gleiche Klasse wie das alte Kunden-1fr, Flow 11.07.). */
    grid-auto-rows: minmax(92px, max-content);
    gap: 10px;
    align-content: start;
    flex: 1;
    min-height: 0;
  }
  .maschine-instance {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
  }
  .maschine-instance:hover {
    border-color: var(--blue);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(42,102,221,0.4);
  }
  .maschine-instance-delete {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--ink-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .12s, color .12s, background .12s;
  }
  .maschine-instance:hover .maschine-instance-delete { opacity: 1; }
  .maschine-instance-delete:hover { color: var(--status-warn); background: var(--surface-2); }
  .kartei-actions { display: flex; gap: 8px; }
  .kartei-section-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
  }
  .machine-btn {
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
  }
  .machine-btn:hover:not(:disabled) { border-color: var(--blue); }
  .machine-btn:disabled { opacity: 0.55; cursor: not-allowed; }
  .machine-btn-primary {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
  }
  .machine-btn-primary:hover:not(:disabled) {
    background: var(--blue-deep);
    border-color: var(--blue-deep);
  }
  .machine-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 31, 61, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  [data-theme="dark"] .machine-modal-backdrop { background: rgba(5, 10, 24, 0.75); }
  .machine-modal {
    background: var(--surface);
    border-radius: 12px;
    padding: 18px 22px;
    width: 380px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.4);
    border: 1px solid var(--line);
  }
  .machine-modal-title {
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
  }
  .machine-modal-field { display: flex; flex-direction: column; gap: 6px; }
  .machine-modal-field span {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .machine-modal-field input,
  .machine-modal-field select {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--ink);
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    outline: none;
  }
  .machine-modal-field input:focus,
  .machine-modal-field select:focus { border-color: var(--blue); }
  .machine-modal-error {
    color: var(--status-warn);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
  }
  .machine-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
  .maschine-instance.is-warn { border-color: var(--status-warn); }
  .maschine-instance-head {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .maschine-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-ok);
    box-shadow: 0 0 6px var(--neon-glow);
    flex-shrink: 0;
  }
  .maschine-status-dot.warn {
    background: var(--status-warn);
    box-shadow: 0 0 6px var(--status-warn);
  }
  .maschine-instance-name {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .maschine-instance-meta {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--ink-muted);
    letter-spacing: 0.05em;
  }
  .maschinen-kartei-note {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--ink-muted);
    letter-spacing: 0.05em;
    line-height: 1.55;
    padding: 10px 12px;
    border-top: 1px dashed var(--line);
  }

  /* Generic node tile — for placeholder branches */
  .node-tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: transform 0.25s, border-color 0.25s;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
  }
  .node-tile:hover { border-color: var(--neon); transform: translateY(-2px); }
  .node-tile .node-tile-icon {
    width: 24px; height: 24px;
    color: var(--blue);
    flex-shrink: 0;
  }
  .node-tile-text { flex: 1; min-width: 0; }
  .node-tile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.1;
  }
  .node-tile-meta {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--ink-muted);
    text-transform: uppercase;
    margin-top: 2px;
  }

  /* ─── Connector lines from anchor to sub-content nodes ──────── */
  .connector-svg {
    position: absolute;
    pointer-events: none;
    overflow: visible;
  }
  .connector-svg path {
    fill: none;
    stroke: var(--line-strong);
    stroke-width: 1;
    stroke-dasharray: 4 6;
    opacity: 0.5;
  }
  .branch.is-active .connector-svg path {
    stroke: var(--neon);
    opacity: 0.6;
  }

  /* ─── BranchInfoTip (Block 5, Doku-Mini) ─────────────────────── */
  .branch-info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--ink-muted);
    border: 1px solid var(--line);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    cursor: help;
    vertical-align: middle;
    transition: color .12s, border-color .12s, background .12s;
  }
  .branch-info-tip:hover,
  .branch-info-tip:focus { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); outline: none; }
  .branch-info-tip-icon { line-height: 1; pointer-events: none; }
  .branch-info-tip-bubble {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    z-index: 50;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    width: 290px;
    box-shadow: 0 6px 18px rgba(10, 31, 61, 0.15);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s;
  }
  .branch-info-tip:hover .branch-info-tip-bubble,
  .branch-info-tip:focus .branch-info-tip-bubble {
    opacity: 1;
    transform: translateY(0);
  }
  [data-theme="dark"] .branch-info-tip-bubble { box-shadow: 0 6px 18px rgba(0,0,0,0.55); }

  /* ─── Mock-Bridge-Banner (Block 4, Demo-Diagnose) ────────────── */
  .mock-bridge-banner {
    position: fixed;
    bottom: 64px;
    right: 18px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 360px;
  }
  .mock-bridge-entry {
    background: var(--surface);
    border: 1px solid var(--blue);
    border-left: 4px solid var(--neon);
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: 0 6px 18px rgba(10, 31, 61, 0.18);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    animation: mockBridgeIn 0.22s ease-out, mockBridgeOut 0.35s ease-in 3.65s forwards;
  }
  [data-theme="dark"] .mock-bridge-entry {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  }
  .mock-bridge-entry-icon {
    color: var(--neon);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    margin-top: 2px;
  }
  .mock-bridge-entry-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .mock-bridge-entry-label { color: var(--ink); font-weight: 600; line-height: 1.3; }
  .mock-bridge-entry-detail {
    color: var(--ink-muted);
    font-size: 10px;
    font-family: "JetBrains Mono", monospace;
    letter-spacing: 0.04em;
  }
  .mock-bridge-entry-sub {
    color: var(--ink-muted);
    font-size: 10px;
    font-style: italic;
    margin-top: 2px;
    word-break: break-word;
  }
  @keyframes mockBridgeIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes mockBridgeOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
  }

  /* ─── Data Bricks at bottom (chrome) ─────────────────────────── */
  .live-ticker {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    overflow: hidden;
    z-index: 40;
    border-top: 1px solid var(--line);
    background: linear-gradient(to bottom, transparent 0%, var(--surface-2) 100%);
    display: flex;
    align-items: center;
  }
  .live-ticker::before, .live-ticker::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; width: 80px;
    z-index: 2;
    pointer-events: none;
  }
  .live-ticker::before { left: 0; background: linear-gradient(to right, var(--surface-2), transparent); }
  .live-ticker::after { right: 0; background: linear-gradient(to left, var(--surface-2), transparent); }
  .live-ticker-track {
    display: flex;
    gap: 28px;
    white-space: nowrap;
    animation: ticker-flow 90s linear infinite;
    padding-left: 24px;
  }
  .live-ticker:hover .live-ticker-track { animation-play-state: paused; }
  @keyframes ticker-flow {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .live-ticker-item {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--ink);
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    flex-shrink: 0;
  }
  .live-ticker-item.kind-status { color: var(--ink-muted); border-color: var(--line); }
  .live-ticker-item.kind-job { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); font-weight: 600; }
  .live-ticker-item.kind-job-done { color: var(--ink-muted); border-color: var(--line); }
  .live-ticker-item.kind-action { color: var(--ink); border-color: var(--line-strong); }
  .live-ticker-item.kind-idle { color: var(--ink-muted); font-style: italic; }
  [data-theme="dark"] .live-ticker-item.kind-job { color: var(--neon-bright); border-color: var(--neon); background: rgba(37,229,255,0.08); }

  /* ─── Background guide rails (faint world-space helpers) ─────── */
  .world-rails { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; }
  .world-rails circle { fill: none; }
  .world-rails .rail { stroke: var(--line); stroke-dasharray: 3 6; opacity: 0.4; }
  .world-rails .rail-strong { stroke: var(--line-strong); opacity: 0.3; }

  /* Tick marks around inner ring */
  .compass-tick {
    position: absolute;
    width: 5px; height: 1px;
    background: var(--line-strong);
    opacity: 0.55;
    transform-origin: 0 0;
  }

  /* ─── Customer Canvas Overlay (Beziehungs-Graph pro Kunde) ────── */
  .cc-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background:
      radial-gradient(ellipse 80% 60% at 50% 50%, var(--bg-grad-a) 0%, var(--bg-grad-b) 100%);
    animation: cc-fade-in .2s ease-out;
  }
  @keyframes cc-fade-in {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
  }
  .cc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 1px 0 var(--line-strong);
  }
  .cc-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px 7px 11px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
  }
  .cc-back:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
  .cc-back-arrow { font-size: 13px; line-height: 1; }
  .cc-kunde {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
  }
  .cc-sigil {
    width: 44px; height: 44px;
    border-radius: 8px;
    background: var(--blue-soft);
    color: var(--blue);
    display: grid; place-items: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    border: 1px solid var(--blue);
  }
  .cc-name {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
    line-height: 1.2;
  }
  .cc-meta {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--ink-muted);
    text-transform: uppercase;
    margin-top: 3px;
  }
  .cc-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .cc-head-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .cc-head-domain {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.04em;
    padding: 3px 8px;
    background: var(--blue-soft);
    border-radius: 4px;
  }
  .cc-status-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--status-ok);
    box-shadow: 0 0 8px var(--neon-glow);
  }
  .cc-status-dot.warn {
    background: var(--status-warn);
    box-shadow: 0 0 8px var(--status-warn);
  }
  .cc-stage {
    position: relative;
    flex: 1;
    overflow: hidden;
    background-image:
      linear-gradient(to right, var(--line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--line) 1px, transparent 1px);
    background-size: 40px 40px;
    background-color: var(--bg);
  }
  /* Prozessketten-Canvas (11.06.2026): Welt-Container für Zoom/Pan */
  .cc-world {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
  }
  .cc-stage.is-panning { cursor: grabbing; }
  .cc-node-delete {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 18px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s, background .12s, color .12s;
  }
  .cc-node:hover .cc-node-delete { opacity: 1; }
  .cc-node-delete:hover {
    background: rgba(240, 80, 80, 0.12);
    color: #e05555;
  }
  .cc-edges {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
  }
  .cc-arrow-kette { fill: var(--blue); }
  .cc-arrow-abhaengigkeit { fill: var(--status-warn); }
  .cc-edge-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    fill: var(--ink-muted);
    paint-order: stroke;
    stroke: var(--bg);
    stroke-width: 3px;
    pointer-events: none;
  }
  .cc-edge-label.is-abhaengigkeit { fill: var(--status-warn); }
  .cc-tool-btn {
    padding: 5px 10px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: background .12s, border-color .12s;
  }
  .cc-tool-btn:hover:not(:disabled) { border-color: var(--blue); }
  .cc-tool-btn:disabled { opacity: 0.5; cursor: default; }
  .cc-tool-btn.is-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
  .cc-zoom {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
  }
  .cc-zoom-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--ink-muted);
    min-width: 38px;
    text-align: center;
  }
  .cc-quickform {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 300px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(10, 25, 60, 0.25);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cc-quickform-title {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .cc-quickform-input, .cc-quickform-select {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--ink);
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
  }
  .cc-quickform-chain {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ink-muted);
    cursor: pointer;
  }
  .cc-quickform-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
  }
  .cc-edge {
    stroke-width: 2.5;
    fill: none;
    transition: stroke .12s;
  }
  .cc-edge-kette { stroke: var(--blue); filter: drop-shadow(0 0 4px rgba(42,102,221,0.4)); }
  .cc-edge-abhaengigkeit { stroke: var(--status-warn); stroke-dasharray: 6 5; filter: drop-shadow(0 0 4px rgba(240,165,0,0.4)); }
  .cc-edge-preview { stroke-width: 2.5; stroke-opacity: 0.7; pointer-events: none; }
  .cc-edge-hit {
    stroke: transparent;
    stroke-width: 14;
    pointer-events: stroke;
    cursor: pointer;
  }
  .cc-edge-hit:hover + .cc-edge,
  .cc-edge-group:hover .cc-edge-kette { stroke-width: 3.5; }
  .cc-edge-group:hover .cc-edge-abhaengigkeit { stroke-width: 3.5; }
  .cc-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .cc-toolbar-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  .cc-port {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--blue);
    cursor: crosshair;
    z-index: 2;
    transition: background .12s, transform .12s, box-shadow .12s;
  }
  .cc-port-top { top: -7px; }
  .cc-port-bottom { bottom: -7px; }
  .cc-port:hover, .cc-port.is-target, .cc-port.is-source {
    background: var(--blue);
    transform: translateX(-50%) scale(1.25);
    box-shadow: 0 0 12px rgba(42,102,221,0.6);
  }
  .cc-port.is-target { border-color: var(--status-ok); background: var(--status-ok); }
  .cc-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ink-muted);
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    pointer-events: none;
    padding: 0 20%;
    text-align: center;
  }
  .cc-error {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--status-warn);
    padding: 8px 16px;
    border-radius: 6px;
    z-index: 10;
  }
  .cc-stage-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ink-muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    pointer-events: none;
  }

  /* ─── Maschinen-Knoten ──────────────────────────────────────── */
  .cc-node {
    position: absolute;
    box-sizing: border-box;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 2px 12px -6px rgba(10,31,61,0.18);
    cursor: grab;
    user-select: none;
    transition: border-color .15s, box-shadow .15s, transform .12s;
  }
  .cc-node:hover {
    border-color: var(--line-strong);
    box-shadow: 0 4px 18px -6px rgba(10,31,61,0.28);
  }
  .cc-node.is-dragging {
    cursor: grabbing;
    border-color: var(--neon);
    box-shadow: 0 8px 28px -6px rgba(10,31,61,0.4),
                0 0 0 1px var(--neon-glow-2);
    z-index: 5;
  }
  [data-theme="dark"] .cc-node {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.02), 0 4px 16px -8px rgba(0,0,0,0.6);
  }
  [data-theme="dark"] .cc-node:hover {
    box-shadow: 0 0 0 1px var(--neon-glow-2), 0 6px 22px -6px rgba(0,0,0,0.7);
  }
  [data-theme="dark"] .cc-node.is-dragging {
    box-shadow: 0 0 0 1px var(--neon), 0 8px 32px -4px rgba(0,0,0,0.9);
  }
  .cc-node-status {
    position: absolute;
    top: 12px; right: 13px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--status-ok);
    box-shadow: 0 0 6px var(--neon-glow);
  }
  .cc-node-status.warn {
    background: var(--status-warn);
    box-shadow: 0 0 6px var(--status-warn);
  }
  .cc-node-name {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    color: var(--ink);
    padding-right: 16px;
  }
  .cc-node-meta {
    margin-top: 5px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
  /* Maschinenakte + Import + Marker (12.06.2026) */
  .cc-node.is-selected {
    border-color: var(--neon);
    box-shadow: 0 0 0 1px var(--neon-glow-2), 0 6px 22px -6px rgba(10,31,61,0.35);
  }
  .cc-node.is-stillgelegt { opacity: 0.55; filter: grayscale(0.6); }
  .cc-node-marker {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    box-shadow: 0 2px 8px rgba(10,31,61,0.25);
    pointer-events: none;
  }
  .cc-node-marker.is-engpass { border-color: var(--status-warn); }
  .cc-node-marker.is-chance { border-color: var(--blue); }
  .cc-node-substatus {
    margin-top: 3px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--status-warn);
    text-transform: uppercase;
  }
  .cc-panel {
    position: absolute;
    top: 14px;
    right: 14px;
    bottom: 14px;
    width: 280px;
    z-index: 9;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(10, 25, 60, 0.25);
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
  }
  .cc-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cc-panel-close {
    border: none;
    background: transparent;
    color: var(--ink-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
  }
  .cc-panel-close:hover { color: var(--ink); }
  .cc-panel-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    flex: 1;
    min-width: 0;
  }
  .cc-panel-row { display: flex; gap: 8px; }
  .cc-panel-notes {
    resize: vertical;
    font-family: "Montserrat", sans-serif;
    min-height: 56px;
  }
  .cc-vorlage-select {
    padding: 5px 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
  }
  .cc-vorlage-select:hover:not(:disabled) { border-color: var(--blue); }
  .cc-import {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    width: 560px;
    max-width: calc(100% - 40px);
    max-height: calc(100% - 40px);
    overflow-y: auto;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(10, 25, 60, 0.25);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cc-import-hint {
    font-size: 11px;
    color: var(--ink-muted);
    line-height: 1.45;
  }
  .cc-import-file { text-align: center; }
  .cc-import-text {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    resize: vertical;
    white-space: pre;
  }
  .cc-import-preview table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
  }
  .cc-import-preview th, .cc-import-preview td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }
  .cc-import-preview th {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .cc-import-errors {
    font-size: 11px;
    color: #e05555;
    background: rgba(240, 80, 80, 0.08);
    border: 1px solid rgba(240, 80, 80, 0.3);
    border-radius: 6px;
    padding: 8px 10px;
    line-height: 1.5;
  }
  .cc-toast {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(10, 25, 60, 0.25);
    font-size: 12px;
    color: var(--ink);
    max-width: 70%;
  }
  .cc-suggest {
    position: absolute;
    left: 14px;
    bottom: 14px;
    width: 330px;
    max-height: 55%;
    z-index: 9;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(10, 25, 60, 0.25);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cc-suggest-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cc-suggest-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .cc-suggest-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }
  .cc-suggest-name {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--ink);
  }
  .cc-suggest-typ {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    text-transform: uppercase;
    white-space: nowrap;
  }
  .cc-suggest-meta {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cc-suggest-source {
    font-size: 11px;
    color: var(--blue);
    text-decoration: none;
  }
  .cc-suggest-source:hover { text-decoration: underline; }
  .cc-suggest-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
  }

  /* Hint at the bottom while in overview */
  .hint {
    position: fixed;
    bottom: 72px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ink-muted);
    z-index: 41;
    white-space: nowrap;
    transition: opacity 0.4s;
  }
  .hint.hide { opacity: 0; pointer-events: none; }
  .hint .accent { color: var(--neon); }

  /* ================================================================
     Pixel-Icons + FieldRow (Vertriebs-UX-Umbau, 10.07.2026)
     Icon-Assets: icons/<name>-{light,dark}.png (24x24 nativ).
     Theme-Wechsel rein per CSS-Override; Anzeige nur in Ganzzahl-
     Verhaeltnissen (12/24/48), sonst wird Pixel-Art matschig.
     ================================================================ */
  .px-icon {
    display: inline-block;
    flex: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: pixelated;
    vertical-align: middle;
  }
  .px-phone { background-image: url('icons/phone-light.png'); }
  [data-theme="dark"] .px-phone { background-image: url('icons/phone-dark.png'); }
  .px-mail { background-image: url('icons/mail-light.png'); }
  [data-theme="dark"] .px-mail { background-image: url('icons/mail-dark.png'); }
  .px-map { background-image: url('icons/map-light.png'); }
  [data-theme="dark"] .px-map { background-image: url('icons/map-dark.png'); }
  .px-compass { background-image: url('icons/compass-light.png'); }
  [data-theme="dark"] .px-compass { background-image: url('icons/compass-dark.png'); }
  .px-userGroup { background-image: url('icons/userGroup-light.png'); }
  [data-theme="dark"] .px-userGroup { background-image: url('icons/userGroup-dark.png'); }
  .px-user { background-image: url('icons/user-light.png'); }
  [data-theme="dark"] .px-user { background-image: url('icons/user-dark.png'); }
  .px-userPlus { background-image: url('icons/userPlus-light.png'); }
  [data-theme="dark"] .px-userPlus { background-image: url('icons/userPlus-dark.png'); }
  .px-chart { background-image: url('icons/chart-light.png'); }
  [data-theme="dark"] .px-chart { background-image: url('icons/chart-dark.png'); }
  .px-file { background-image: url('icons/file-light.png'); }
  [data-theme="dark"] .px-file { background-image: url('icons/file-dark.png'); }
  .px-flag { background-image: url('icons/flag-light.png'); }
  [data-theme="dark"] .px-flag { background-image: url('icons/flag-dark.png'); }
  .px-link { background-image: url('icons/link-light.png'); }
  [data-theme="dark"] .px-link { background-image: url('icons/link-dark.png'); }
  .px-info { background-image: url('icons/info-light.png'); }
  [data-theme="dark"] .px-info { background-image: url('icons/info-dark.png'); }
  .px-layers { background-image: url('icons/layers-light.png'); }
  [data-theme="dark"] .px-layers { background-image: url('icons/layers-dark.png'); }
  .px-settings { background-image: url('icons/settings-light.png'); }
  [data-theme="dark"] .px-settings { background-image: url('icons/settings-dark.png'); }
  .px-shield { background-image: url('icons/shield-light.png'); }
  [data-theme="dark"] .px-shield { background-image: url('icons/shield-dark.png'); }
  .px-grid { background-image: url('icons/grid-light.png'); }
  [data-theme="dark"] .px-grid { background-image: url('icons/grid-dark.png'); }
  .px-clipboard { background-image: url('icons/clipboard-light.png'); }
  [data-theme="dark"] .px-clipboard { background-image: url('icons/clipboard-dark.png'); }
  .px-key { background-image: url('icons/key-light.png'); }
  [data-theme="dark"] .px-key { background-image: url('icons/key-dark.png'); }
  .px-bot { background-image: url('icons/bot-light.png'); }
  [data-theme="dark"] .px-bot { background-image: url('icons/bot-dark.png'); }
  .px-home { background-image: url('icons/home-light.png'); }
  [data-theme="dark"] .px-home { background-image: url('icons/home-dark.png'); }
  .px-eye { background-image: url('icons/eye-light.png'); }
  [data-theme="dark"] .px-eye { background-image: url('icons/eye-dark.png'); }
  .px-search { background-image: url('icons/search-light.png'); }
  [data-theme="dark"] .px-search { background-image: url('icons/search-dark.png'); }
  .px-copy { background-image: url('icons/copy-light.png'); }
  [data-theme="dark"] .px-copy { background-image: url('icons/copy-dark.png'); }
  .px-check { background-image: url('icons/check-light.png'); }
  [data-theme="dark"] .px-check { background-image: url('icons/check-dark.png'); }
  .px-x { background-image: url('icons/x-light.png'); }
  [data-theme="dark"] .px-x { background-image: url('icons/x-dark.png'); }
  .px-plus { background-image: url('icons/plus-light.png'); }
  [data-theme="dark"] .px-plus { background-image: url('icons/plus-dark.png'); }
  .px-refresh { background-image: url('icons/refresh-light.png'); }
  [data-theme="dark"] .px-refresh { background-image: url('icons/refresh-dark.png'); }
  .px-send { background-image: url('icons/send-light.png'); }
  [data-theme="dark"] .px-send { background-image: url('icons/send-dark.png'); }
  .px-warning { background-image: url('icons/warning-light.png'); }
  [data-theme="dark"] .px-warning { background-image: url('icons/warning-dark.png'); }
  .px-error { background-image: url('icons/error-light.png'); }
  [data-theme="dark"] .px-error { background-image: url('icons/error-dark.png'); }
  .px-success { background-image: url('icons/success-light.png'); }
  [data-theme="dark"] .px-success { background-image: url('icons/success-dark.png'); }
  .px-filter { background-image: url('icons/filter-light.png'); }
  [data-theme="dark"] .px-filter { background-image: url('icons/filter-dark.png'); }
  .px-sort { background-image: url('icons/sort-light.png'); }
  [data-theme="dark"] .px-sort { background-image: url('icons/sort-dark.png'); }
  .px-arrowRight { background-image: url('icons/arrowRight-light.png'); }
  [data-theme="dark"] .px-arrowRight { background-image: url('icons/arrowRight-dark.png'); }
  .px-export { background-image: url('icons/export-light.png'); }
  [data-theme="dark"] .px-export { background-image: url('icons/export-dark.png'); }
  .px-trash { background-image: url('icons/trash-light.png'); }
  [data-theme="dark"] .px-trash { background-image: url('icons/trash-dark.png'); }
  .px-brush { background-image: url('icons/brush-light.png'); }
  [data-theme="dark"] .px-brush { background-image: url('icons/brush-dark.png'); }
  .px-loading { background-image: url('icons/loading-light.png'); }
  [data-theme="dark"] .px-loading { background-image: url('icons/loading-dark.png'); }
  .px-database { background-image: url('icons/database-light.png'); }
  [data-theme="dark"] .px-database { background-image: url('icons/database-dark.png'); }
  .px-star { background-image: url('icons/star-light.png'); }
  [data-theme="dark"] .px-star { background-image: url('icons/star-dark.png'); }

  /* FieldRow — DIE Stammdaten-Zeile (Wert zuerst, Label klein, Aktionen). */
  .field-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
  }
  .field-row-icon { margin-top: 2px; opacity: 0.9; }
  .field-row-body { flex: 1 1 auto; min-width: 0; }
  .field-row-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 3px;
  }
  .field-row-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
    word-break: break-word;
  }
  .field-row-link { color: var(--blue); text-decoration: none; border-bottom: 1px dashed transparent; }
  .field-row-link:hover { border-bottom-color: var(--blue); }
  .field-row-meta { display: flex; align-items: center; gap: 6px; flex: none; }
  .field-copy {
    border: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: 6px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }
  .field-copy:hover { border-color: var(--blue); }
  .field-chip {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--ink-muted);
    text-decoration: none;
    white-space: nowrap;
  }
  a.field-chip-src:hover { border-color: var(--blue); color: var(--blue); }
  .field-chip-conf-high { color: var(--status-ok); border-color: rgba(0, 200, 150, 0.45); }
  .field-chip-conf-medium { color: var(--status-warn); border-color: rgba(240, 165, 0, 0.45); }
  .field-chip-conf-low { color: #E5484D; border-color: rgba(229, 72, 77, 0.45); }
  .field-row-gap { border-style: dashed; background: transparent; }
  .field-row-gapbtn {
    font-size: 12px;
    color: var(--blue);
    background: none;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    padding: 4px 10px;
    cursor: pointer;
    text-align: left;
  }
  .field-row-gapbtn:hover:not(:disabled) { border-color: var(--blue); }
  .field-row-gapbtn:disabled { color: var(--ink-muted); cursor: default; }
  .field-row-compact { padding: 6px 8px; border-radius: 8px; }
  .field-row-compact .field-row-value { font-size: 13px; }

  /* Vertriebs-Akte (Maschinen-Kartei, 10.07.2026) */
  .kartei-steckbrief {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px;
  }
  .steckbrief-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 12px;
    text-decoration: none;
  }
  a.steckbrief-chip-link:hover { border-color: var(--blue); color: var(--blue); }
  .kartei-empty-klein {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
  }
  .kartei-field-key { display: inline-flex; align-items: center; gap: 5px; }
  .maschine-instance-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
  }
  .maschine-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--ink-muted);
  }
  .maschine-badge.marker-engpass { color: var(--status-warn); border-color: rgba(240, 165, 0, 0.5); }
  .maschine-badge.marker-chance { color: var(--status-ok); border-color: rgba(0, 200, 150, 0.5); }
  .maschine-badge.vstatus-ersatz_geplant,
  .maschine-badge.vstatus-neuanschaffung_geplant { color: var(--blue); border-color: var(--blue-soft); }
  .maschine-badge.vstatus-stillgelegt { opacity: 0.7; }
  .kartei-kette-status { display: flex; align-items: center; gap: 6px; }
  .px-bookmark { background-image: url('icons/bookmark-light.png'); }
  [data-theme="dark"] .px-bookmark { background-image: url('icons/bookmark-dark.png'); }
  .px-bell { background-image: url('icons/bell-light.png'); }
  [data-theme="dark"] .px-bell { background-image: url('icons/bell-dark.png'); }

  /* Kontakte-Station: Ansprechpartner-Verzeichnis + Vorschlags-Karten */
  .kontakt-sektion { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
  .kontakt-verzeichnis { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
  .kontakt-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
  }
  .kontakt-card-body { min-width: 0; }
  .kontakt-card-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
  }
  .kontakt-card-rolle { color: var(--ink-muted); font-weight: 500; }
  .kontakt-card-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--blue);
    text-decoration: none;
    word-break: break-all;
  }
  .kontakt-card-chips { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
  .kontakt-card-meta { margin-top: 3px; font-size: 11px; }
  .kontakt-card-firma {
    background: none;
    border: none;
    padding: 0;
    font-size: 11px;
    color: var(--blue);
    cursor: pointer;
    text-decoration: underline dashed;
    text-underline-offset: 3px;
  }
  .kontakt-card-firma.is-leer { color: var(--ink-muted); cursor: default; text-decoration: none; }
  .kontakt-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
  .kontakt-aktion {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 10px;
  }
  .kontakt-aktion:hover { border-color: var(--blue); }
  .field-chip.is-leer { opacity: 0.6; }
  .stufe1-bulk-btn.is-ghost { background: transparent; color: var(--ink-muted); }

  /* Controlling: Klartext-Detailzeilen statt Roh-JSON */
  .controlling-entry-detail { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
  .controlling-entry-zeile { display: flex; gap: 10px; font-size: 12px; align-items: baseline; }
  .controlling-entry-zeile-key {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    min-width: 110px;
  }
  .controlling-entry-zeile-val { color: var(--ink); word-break: break-word; }

  /* Fusszeile = Handlungs-Leiste (statt Lauftext) */
  .live-ticker.action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 16px;
    overflow: hidden;
  }
  .live-ticker.action-bar::before,
  .live-ticker.action-bar::after { display: none; }
  .action-bar-links { display: flex; align-items: center; gap: 8px; flex: none; }
  .action-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--blue);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 12px;
    cursor: pointer;
    white-space: nowrap;
  }
  .action-chip:hover { border-color: var(--blue); }
  .action-chip.is-status { color: var(--ink-muted); font-weight: 600; }
  .action-chip.is-status.is-an { color: var(--status-warn); border-color: rgba(240, 165, 0, 0.45); }
  .action-bar-leer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ink-muted);
  }
  .action-bar-feed {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    overflow: hidden;
  }
  .action-feed-item {
    font-size: 11px;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .action-feed-item.is-agent { color: var(--blue); }

  /* Schmale Kartei-Spalte: Meta-Chips unter den Wert statt daneben —
     sonst zerquetschen sie lange Werte (HRB, LinkedIn) auf Zeichenbreite. */
  .kartei-stammdaten .field-row { flex-wrap: wrap; }
  .kartei-stammdaten .field-row-body { flex: 1 1 60%; }
  .kartei-stammdaten .field-row-meta {
    width: 100%;
    order: 3;
    justify-content: flex-end;
    margin-top: 2px;
  }
  .kartei-section-title { flex-wrap: wrap; gap: 6px; }

  /* 16px-Varianten (native Pixel-Assets fuer kleine Chips — 10.07.2026).
     Reihenfolge/Spezifitaet: dark-16 ([data-theme] + 2 Klassen) schlaegt
     alle 24er-Regeln; light-16 steht nach den 24ern. */
  .px-s16.px-phone { background-image: url('icons/phone-16-light.png'); }
  [data-theme="dark"] .px-s16.px-phone { background-image: url('icons/phone-16-dark.png'); }
  .px-s16.px-mail { background-image: url('icons/mail-16-light.png'); }
  [data-theme="dark"] .px-s16.px-mail { background-image: url('icons/mail-16-dark.png'); }
  .px-s16.px-map { background-image: url('icons/map-16-light.png'); }
  [data-theme="dark"] .px-s16.px-map { background-image: url('icons/map-16-dark.png'); }
  .px-s16.px-compass { background-image: url('icons/compass-16-light.png'); }
  [data-theme="dark"] .px-s16.px-compass { background-image: url('icons/compass-16-dark.png'); }
  .px-s16.px-userGroup { background-image: url('icons/userGroup-16-light.png'); }
  [data-theme="dark"] .px-s16.px-userGroup { background-image: url('icons/userGroup-16-dark.png'); }
  .px-s16.px-user { background-image: url('icons/user-16-light.png'); }
  [data-theme="dark"] .px-s16.px-user { background-image: url('icons/user-16-dark.png'); }
  .px-s16.px-userPlus { background-image: url('icons/userPlus-16-light.png'); }
  [data-theme="dark"] .px-s16.px-userPlus { background-image: url('icons/userPlus-16-dark.png'); }
  .px-s16.px-chart { background-image: url('icons/chart-16-light.png'); }
  [data-theme="dark"] .px-s16.px-chart { background-image: url('icons/chart-16-dark.png'); }
  .px-s16.px-file { background-image: url('icons/file-16-light.png'); }
  [data-theme="dark"] .px-s16.px-file { background-image: url('icons/file-16-dark.png'); }
  .px-s16.px-flag { background-image: url('icons/flag-16-light.png'); }
  [data-theme="dark"] .px-s16.px-flag { background-image: url('icons/flag-16-dark.png'); }
  .px-s16.px-link { background-image: url('icons/link-16-light.png'); }
  [data-theme="dark"] .px-s16.px-link { background-image: url('icons/link-16-dark.png'); }
  .px-s16.px-info { background-image: url('icons/info-16-light.png'); }
  [data-theme="dark"] .px-s16.px-info { background-image: url('icons/info-16-dark.png'); }
  .px-s16.px-layers { background-image: url('icons/layers-16-light.png'); }
  [data-theme="dark"] .px-s16.px-layers { background-image: url('icons/layers-16-dark.png'); }
  .px-s16.px-settings { background-image: url('icons/settings-16-light.png'); }
  [data-theme="dark"] .px-s16.px-settings { background-image: url('icons/settings-16-dark.png'); }
  .px-s16.px-shield { background-image: url('icons/shield-16-light.png'); }
  [data-theme="dark"] .px-s16.px-shield { background-image: url('icons/shield-16-dark.png'); }
  .px-s16.px-grid { background-image: url('icons/grid-16-light.png'); }
  [data-theme="dark"] .px-s16.px-grid { background-image: url('icons/grid-16-dark.png'); }
  .px-s16.px-clipboard { background-image: url('icons/clipboard-16-light.png'); }
  [data-theme="dark"] .px-s16.px-clipboard { background-image: url('icons/clipboard-16-dark.png'); }
  .px-s16.px-key { background-image: url('icons/key-16-light.png'); }
  [data-theme="dark"] .px-s16.px-key { background-image: url('icons/key-16-dark.png'); }
  .px-s16.px-bot { background-image: url('icons/bot-16-light.png'); }
  [data-theme="dark"] .px-s16.px-bot { background-image: url('icons/bot-16-dark.png'); }
  .px-s16.px-home { background-image: url('icons/home-16-light.png'); }
  [data-theme="dark"] .px-s16.px-home { background-image: url('icons/home-16-dark.png'); }
  .px-s16.px-eye { background-image: url('icons/eye-16-light.png'); }
  [data-theme="dark"] .px-s16.px-eye { background-image: url('icons/eye-16-dark.png'); }
  .px-s16.px-search { background-image: url('icons/search-16-light.png'); }
  [data-theme="dark"] .px-s16.px-search { background-image: url('icons/search-16-dark.png'); }
  .px-s16.px-copy { background-image: url('icons/copy-16-light.png'); }
  [data-theme="dark"] .px-s16.px-copy { background-image: url('icons/copy-16-dark.png'); }
  .px-s16.px-check { background-image: url('icons/check-16-light.png'); }
  [data-theme="dark"] .px-s16.px-check { background-image: url('icons/check-16-dark.png'); }
  .px-s16.px-x { background-image: url('icons/x-16-light.png'); }
  [data-theme="dark"] .px-s16.px-x { background-image: url('icons/x-16-dark.png'); }
  .px-s16.px-plus { background-image: url('icons/plus-16-light.png'); }
  [data-theme="dark"] .px-s16.px-plus { background-image: url('icons/plus-16-dark.png'); }
  .px-s16.px-refresh { background-image: url('icons/refresh-16-light.png'); }
  [data-theme="dark"] .px-s16.px-refresh { background-image: url('icons/refresh-16-dark.png'); }
  .px-s16.px-send { background-image: url('icons/send-16-light.png'); }
  [data-theme="dark"] .px-s16.px-send { background-image: url('icons/send-16-dark.png'); }
  .px-s16.px-warning { background-image: url('icons/warning-16-light.png'); }
  [data-theme="dark"] .px-s16.px-warning { background-image: url('icons/warning-16-dark.png'); }
  .px-s16.px-error { background-image: url('icons/error-16-light.png'); }
  [data-theme="dark"] .px-s16.px-error { background-image: url('icons/error-16-dark.png'); }
  .px-s16.px-success { background-image: url('icons/success-16-light.png'); }
  [data-theme="dark"] .px-s16.px-success { background-image: url('icons/success-16-dark.png'); }
  .px-s16.px-filter { background-image: url('icons/filter-16-light.png'); }
  [data-theme="dark"] .px-s16.px-filter { background-image: url('icons/filter-16-dark.png'); }
  .px-s16.px-sort { background-image: url('icons/sort-16-light.png'); }
  [data-theme="dark"] .px-s16.px-sort { background-image: url('icons/sort-16-dark.png'); }
  .px-s16.px-arrowRight { background-image: url('icons/arrowRight-16-light.png'); }
  [data-theme="dark"] .px-s16.px-arrowRight { background-image: url('icons/arrowRight-16-dark.png'); }
  .px-s16.px-export { background-image: url('icons/export-16-light.png'); }
  [data-theme="dark"] .px-s16.px-export { background-image: url('icons/export-16-dark.png'); }
  .px-s16.px-trash { background-image: url('icons/trash-16-light.png'); }
  [data-theme="dark"] .px-s16.px-trash { background-image: url('icons/trash-16-dark.png'); }
  .px-s16.px-brush { background-image: url('icons/brush-16-light.png'); }
  [data-theme="dark"] .px-s16.px-brush { background-image: url('icons/brush-16-dark.png'); }
  .px-s16.px-loading { background-image: url('icons/loading-16-light.png'); }
  [data-theme="dark"] .px-s16.px-loading { background-image: url('icons/loading-16-dark.png'); }
  .px-s16.px-database { background-image: url('icons/database-16-light.png'); }
  [data-theme="dark"] .px-s16.px-database { background-image: url('icons/database-16-dark.png'); }
  .px-s16.px-star { background-image: url('icons/star-16-light.png'); }
  [data-theme="dark"] .px-s16.px-star { background-image: url('icons/star-16-dark.png'); }
  .px-s16.px-bookmark { background-image: url('icons/bookmark-16-light.png'); }
  [data-theme="dark"] .px-s16.px-bookmark { background-image: url('icons/bookmark-16-dark.png'); }
  .px-s16.px-bell { background-image: url('icons/bell-16-light.png'); }
  [data-theme="dark"] .px-s16.px-bell { background-image: url('icons/bell-16-dark.png'); }

  /* Kunden-Profil-Tabs + neue Kunden-Karten (Runde 2, 10.07.2026) */
  .profil-tabs {
    display: flex;
    gap: 8px;
    margin: 2px 0 14px;
  }
  .profil-tabs .controlling-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .kartei-body-stapel {
    grid-template-columns: 1fr;
  }
  .kartei-ansprechpartner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
  }
  .maschinen-uebersicht-name.is-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--blue);
    cursor: pointer;
    text-align: left;
  }
  .maschinen-uebersicht-name.is-link:hover { text-decoration: underline; }
  .kunde-card-name {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    line-height: 1.25;
  }
  .kunde-card-fakten {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 6px;
  }
  .kunde-fakt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    min-width: 0;
  }
  .kunde-fakt span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .kunde-fakt.is-dezent { color: var(--ink-muted); font-weight: 400; }
  .kunde-card-leer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    color: var(--ink-muted);
  }
  .kunde-card.is-leer { opacity: 0.92; }
  /* CTA in-flow am Kartenfuss: reserviert eine schmale Zeile, erscheint nur beim
     Hover (opacity). Bewusst KEIN absolutes Overlay mehr — ein Overlay mit
     Flaechen-Hintergrund ueberdeckte auf Hover den unteren Rahmen (Befund Flow
     11.07.). In-flow beruehrt weder Rahmen noch die Inhaltszeilen. */
  .kunde-card-cta {
    margin-top: auto;
    padding-top: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--blue);
    text-align: right;
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .kunde-card:hover .kunde-card-cta { opacity: 1; }

  /* Karte als Spalte, damit der CTA unten sitzt (Runde 2). */
  .kunde-card { display: flex; flex-direction: column; }

  /* Akte-Tab: Feld-Spalte breiter als die 360px der alten Kartei. */
  .kartei-body-akte {
    grid-template-columns: minmax(420px, 520px) 1fr;
  }