/* ============================================================
   TAKT · Design System v3 "LICHTWERK"
   Holografische Industrie: dunkle Maschinenhalle aus Blau-Graphit,
   Plasma-Cyan + Ion-Violett als Licht, DIN-Typo (Bahnschrift).
   Display: Bahnschrift · Text: Segoe UI · Daten: Cascadia Mono
   ============================================================ */

:root {
  /* Vordergrund */
  --ink: #E9F0FB;
  --ink-2: #B9C4D8;
  --steel: #8593AC;
  --steel-2: #5A6680;

  /* Flächen */
  --void: #05070D;
  --paper: #05070D;
  --surface: #0C111C;
  --surface-2: #111827;
  --surface-3: #182135;
  --glass: rgba(16, 22, 38, .66);

  --line: rgba(140, 170, 220, .10);
  --line-2: rgba(140, 170, 220, .20);

  /* Licht: Plasma-Cyan (primär) + Ion-Violett (sekundär) */
  --plasma: #5CE6EE;
  --plasma-2: #9DF2F6;
  --plasma-deep: #1E8FA0;
  --ion: #8F7BFF;
  --holo: linear-gradient(120deg, #5CE6EE 0%, #8F7BFF 45%, #F07BD8 90%);

  /* Legacy-Aliase (alle Bestandskomponenten laufen ohne Umbau weiter) */
  --petrol: var(--plasma-deep);
  --petrol-2: var(--plasma);
  --petrol-deep: var(--plasma-2);
  --petrol-tint: rgba(92, 230, 238, .10);
  --petrol-tint-2: rgba(92, 230, 238, .28);
  --amber: #9DF2F6;
  --amber-2: #5CE6EE;
  --amber-tint: rgba(92, 230, 238, .10);

  --graphite: #060910;
  --graphite-2: #0C111C;
  --rail-text: #D7DEEC;
  --rail-dim: #7C88A2;
  --rail-line: rgba(140, 170, 220, .10);

  --ok: #46DE9C;
  --warn: #F0B45C;
  --err: #F2766C;
  --err-tint: rgba(242, 118, 108, .14);
  --exact-red: #e2231a;

  /* Form (maschineller, etwas straffer) */
  --r-xs: 6px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 18px;
  --cut: 12px;
  --rail-w: 256px;
  --shadow-1: 0 1px 2px rgba(2, 6, 16, .45), 0 6px 18px rgba(2, 6, 16, .35);
  --shadow-2: 0 18px 48px rgba(2, 6, 16, .6), 0 4px 12px rgba(2, 6, 16, .45);
  --glow-pink: 0 0 18px rgba(92, 230, 238, .35), 0 0 44px rgba(92, 230, 238, .14);
  --glow-plasma: 0 0 18px rgba(92, 230, 238, .35), 0 0 44px rgba(92, 230, 238, .14);
  --glow-ion: 0 0 18px rgba(143, 123, 255, .32);

  /* Typo */
  --font-display: "Bahnschrift", "DIN Alternate", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", ui-monospace, Menlo, monospace;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background:
    linear-gradient(rgba(140, 170, 220, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 170, 220, .03) 1px, transparent 1px),
    var(--void);
  background-size: 48px 48px, 48px 48px, auto;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Lebendiger Hintergrund: Aurora-Canvas unter der App (fx/aurora.js) */
#fx-bg { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.app, .boot, .login-stage { position: relative; z-index: 1; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; color: #fff; }
p { margin: 0 0 .8em; }
a { color: var(--petrol-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; }
::selection { background: rgba(92, 230, 238, .35); }

:focus-visible {
  outline: 2px solid var(--petrol-2);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 20px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Boot-Splash ---------- */
.boot {
  min-height: 100vh; display: grid; place-content: center; gap: 18px; justify-items: center;
  color: var(--rail-text);
}
.boot__mark { font-family: var(--font-display); font-weight: 700; font-size: 44px; letter-spacing: .18em; color: #fff; padding-left: .18em; }
.boot__bar { width: 220px; height: 3px; background: rgba(255,255,255,.10); border-radius: 3px; overflow: hidden; }
.boot__bar span { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--amber), var(--petrol-2)); border-radius: 3px; animation: bootslide 1.1s ease-in-out infinite; }
.boot__note { font-family: var(--font-mono); font-size: 12px; color: var(--rail-dim); letter-spacing: .04em; }
@keyframes bootslide { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

/* ============================================================
   Grundlayout — schwebende Rail + Main auf Verlauf
   ============================================================ */
body { padding: 20px 16px; }
.app {
  display: grid; grid-template-columns: var(--rail-w) 1fr; gap: 16px;
  min-height: calc(100vh - 40px); padding: 16px;
  max-width: 1600px; margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 30px;
  box-shadow: 0 40px 120px rgba(0,0,0,.5);
}

/* ---------- Rail (schwarz, gerundet, schwebend) ---------- */
.rail {
  position: sticky; top: 36px; align-self: start; height: calc(100vh - 72px);
  display: flex; flex-direction: column;
  background: rgba(6, 9, 16, .92);
  color: var(--rail-text);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 24px;
  box-shadow: var(--shadow-2);
  overflow: hidden;
  backdrop-filter: blur(14px);
}
.rail__brand { display: flex; align-items: center; gap: 11px; padding: 22px 20px 16px; }
.rail__logo {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-content: center;
  background: linear-gradient(135deg, #9DF2F6, #5CE6EE); color: #06131A;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .02em;
  box-shadow: var(--glow-pink);
}
.rail__wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.rail__wordmark b { font-family: var(--font-display); font-weight: 700; letter-spacing: .16em; font-size: 15px; color: #fff; padding-left: .16em; }
.rail__wordmark span { font-family: var(--font-mono); font-size: 10.5px; color: var(--rail-dim); letter-spacing: .06em; }

.rail__nav { padding: 6px 14px; overflow-y: auto; flex: 1; }
.rail__group { margin: 16px 0 6px; padding: 0 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--steel-2); }
.navitem {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border: 0; background: transparent; color: var(--rail-text);
  border-radius: 12px; font-size: 14px; text-align: left; position: relative;
  transition: background .14s ease, color .14s ease;
}
.navitem svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.navitem:hover { background: rgba(255,255,255,.05); }
.navitem.is-active {
  background: linear-gradient(90deg, rgba(92,230,238,.22), rgba(92,230,238,.05));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(92,230,238,.18);
}
.navitem.is-active svg { opacity: 1; color: var(--amber); }
.navitem.is-active::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; background: var(--amber); border-radius: 0 3px 3px 0;
  box-shadow: var(--glow-pink);
}
.navitem__badge { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--rail-dim); }
.navitem.is-active .navitem__badge { color: rgba(255,255,255,.85); }

.rail__conn { margin: 10px 14px 14px; padding: 13px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--rail-line); }
.rail__conn-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rail-dim); font-family: var(--font-mono); letter-spacing: .04em; }
.rail__conn-body { margin-top: 8px; font-size: 13.5px; color: #fff; display: flex; align-items: center; gap: 8px; }
.rail__conn-body b { font-weight: 600; }
.rail__maker { padding: 0 20px 18px; font-family: var(--font-mono); font-size: 10.5px; color: var(--steel-2); letter-spacing: .03em; }

/* ---------- Main ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 36px; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px; height: 60px;
  background: rgba(8, 11, 18, .72); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  box-shadow: var(--shadow-1);
}
.topbar__title { display: flex; flex-direction: column; line-height: 1.1; }
.topbar__title .eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.topbar__title b { font-size: 16px; font-weight: 700; color: #fff; }
.topbar__spacer { flex: 1; }

.instr { display: flex; align-items: center; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.04);
  border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2);
  white-space: nowrap;
}
.chip .mono { font-family: var(--font-mono); font-size: 12px; }
.chip--region { cursor: pointer; }
.chip--region:hover { border-color: var(--line-2); }

.gauge { display: inline-flex; align-items: center; gap: 8px; }
.gauge__track { width: 66px; height: 5px; border-radius: 5px; background: rgba(255,255,255,.10); overflow: hidden; }
.gauge__fill { height: 100%; background: linear-gradient(90deg, var(--petrol-2), var(--amber)); border-radius: 5px; }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--steel-2); }
.dot--ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(82,201,138,.15); }
.dot--warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(224,164,92,.15); }
.dot--err { background: var(--err); box-shadow: 0 0 0 3px rgba(224,119,119,.15); }
.dot--live { background: var(--ok); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(82,201,138,.4); } 50% { box-shadow: 0 0 0 5px rgba(82,201,138,0); } }

.view { padding: 26px 8px 64px; max-width: 1180px; width: 100%; }
.view--wide { max-width: 1380px; }
.view__head { margin-bottom: 22px; }
.view__head .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-2); }
.view__head h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 34px); letter-spacing: .01em; margin-top: 6px; }
.view__head h1 { background: linear-gradient(90deg, #fff 60%, var(--amber)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.view__head p { color: var(--steel); max-width: 70ch; margin-top: 8px; }

/* ============================================================
   Bausteine
   ============================================================ */
.eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.panel__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.panel__head h3 { font-size: 15px; }
.panel__head .eyebrow { font-size: 10.5px; color: var(--steel); }
.panel__body { padding: 18px; }
.panel__foot { padding: 14px 18px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.stack { display: flex; flex-direction: column; gap: 18px; }
.row { display: flex; align-items: center; gap: 12px; }
.wrap { flex-wrap: wrap; }

.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.tile__label { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
.tile__value { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; margin-top: 12px; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: #fff; }
.tile__value small { font-family: var(--font-mono); font-size: 13px; color: var(--steel); font-weight: 500; letter-spacing: 0; }
.tile__meta { margin-top: 8px; font-size: 12.5px; color: var(--steel); display: flex; align-items: center; gap: 6px; }
.tile__meta b { color: var(--ok); font-weight: 600; }
.tile__accent { position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--petrol-2), var(--petrol)); }
.tile--amber .tile__accent { background: linear-gradient(180deg, var(--amber), var(--amber-2)); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; transition: background .14s ease, border-color .14s ease, transform .05s ease, box-shadow .14s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--petrol); color: #fff; }
.btn--primary:hover { background: var(--petrol-2); text-decoration: none; }
.btn--amber { background: linear-gradient(135deg, #9DF2F6, #5CE6EE); color: #06131A; box-shadow: var(--glow-pink); }
.btn--amber:hover { background: linear-gradient(135deg, #C2F7FA, #7FEBF1); color: #06131A; text-decoration: none; box-shadow: 0 8px 30px rgba(92,230,238,.5); }
.btn--ghost { background: rgba(255,255,255,.03); border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { background: rgba(255,255,255,.07); text-decoration: none; }
.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* Badges / Tags */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; }
.tag--petrol { background: var(--petrol-tint); color: var(--petrol-deep); border: 1px solid rgba(92,230,238,.25); }
.tag--amber { background: var(--amber-tint); color: var(--amber); border: 1px solid rgba(92,230,238,.25); }
.tag--steel { background: rgba(255,255,255,.05); color: var(--steel); border: 1px solid var(--line); }
.tag--ok { background: rgba(82,201,138,.13); color: #7ee2ae; border: 1px solid rgba(82,201,138,.25); }
.tag--err { background: var(--err-tint); color: #f0a099; border: 1px solid rgba(224,119,119,.25); }
.tag--handel { background: rgba(96,156,224,.13); color: #a3c6f2; border: 1px solid rgba(96,156,224,.25); }
.tag--produktion { background: rgba(224,150,92,.13); color: #eebb96; border: 1px solid rgba(224,150,92,.25); }
.tag--finanzen { background: rgba(148,116,220,.14); color: #c3aef0; border: 1px solid rgba(148,116,220,.25); }
.tag--grundlagen { background: rgba(255,255,255,.05); color: var(--steel); border: 1px solid var(--line); }
.tag--mono { font-family: var(--font-mono); font-weight: 500; }

/* Method-Badges (API) */
.verb { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; letter-spacing: .04em; }
.verb--get { background: rgba(82,201,138,.13); color: #7ee2ae; }
.verb--post { background: rgba(96,156,224,.14); color: #a3c6f2; }
.verb--put { background: rgba(224,164,92,.14); color: #eec49a; }
.verb--delete { background: var(--err-tint); color: #f0a099; }

.veri { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; }
.veri--confirmed { color: var(--ok); }
.veri--unverified { color: var(--steel); }
.veri--corrected { color: var(--warn); }

/* Tabellen */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: rgba(255,255,255,.03); }
.table .num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.table .mono { font-family: var(--font-mono); font-size: 12.5px; }

/* Inputs */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.field small { color: var(--steel); font-size: 12px; }
.input, .select, .textarea {
  width: 100%; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 12px;
  background: rgba(255,255,255,.04); font: inherit; font-size: 14px; color: var(--ink);
}
.input::placeholder, .textarea::placeholder { color: var(--steel-2); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--petrol-2); box-shadow: 0 0 0 3px rgba(92,230,238,.18); background: rgba(255,255,255,.06); }
.select option { background: var(--surface-2); color: var(--ink); }
.input--mono { font-family: var(--font-mono); font-size: 13px; }
.textarea { min-height: 96px; resize: vertical; font-family: var(--font-mono); font-size: 13px; }
.search { position: relative; }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--steel); }
.search .input { padding-left: 36px; }

/* ============================================================
   Signatur — TAKT-Linie
   ============================================================ */
.takt { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 8px 0 4px; }
.takt__track { position: absolute; left: 0; right: 0; top: 26px; height: 3px; background: rgba(255,255,255,.10); border-radius: 3px; }
.takt__fill { position: absolute; left: 0; top: 26px; height: 3px; background: linear-gradient(90deg, var(--petrol-2), var(--amber)); border-radius: 3px; transition: width .5s cubic-bezier(.2,.7,.2,1); box-shadow: 0 0 12px rgba(92,230,238,.4); }
.takt__station { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; padding: 0 6px; z-index: 1; }
.takt__node {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-content: center;
  background: var(--surface-2); border: 2px solid var(--line-2); color: var(--steel);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
}
.takt__node svg { width: 14px; height: 14px; }
.takt__station.is-done .takt__node { background: var(--petrol); border-color: var(--petrol-2); color: #fff; }
.takt__station.is-active .takt__node { background: var(--surface); border-color: var(--amber); color: var(--amber); box-shadow: 0 0 0 4px rgba(92,230,238,.15), var(--glow-pink); }
.takt__label { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--ink-2); }
.takt__sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--steel); }
.takt__station.is-active .takt__label { color: var(--amber); }

/* ---------- Onboarding-Phasen ---------- */
.phase { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.phase + .phase { margin-top: 14px; }
.phase__head { display: flex; align-items: center; gap: 14px; padding: 15px 18px; cursor: pointer; background: transparent; }
.phase__head:hover { background: rgba(255,255,255,.03); }
.phase__idx { width: 30px; height: 30px; border-radius: 10px; flex: none; display: grid; place-content: center; font-family: var(--font-mono); font-weight: 600; font-size: 13px; background: var(--petrol-tint); color: var(--petrol-deep); }
.phase.is-done .phase__idx { background: var(--petrol); color: #fff; }
.phase.is-active .phase__idx { background: linear-gradient(135deg, #9DF2F6, #5CE6EE); color: #06131A; box-shadow: var(--glow-pink); }
.phase__meta { flex: 1; min-width: 0; }
.phase__meta h3 { font-size: 15.5px; }
.phase__meta .sub { font-size: 12.5px; color: var(--steel); margin-top: 2px; }
.phase__count { font-family: var(--font-mono); font-size: 12px; color: var(--steel); }
.phase__body { padding: 4px 18px 14px; border-top: 1px solid var(--line); display: none; }
.phase.is-open .phase__body { display: block; }
.phase__chev { transition: transform .18s ease; color: var(--steel); }
.phase.is-open .phase__chev { transform: rotate(90deg); }

.check { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px dashed var(--line); }
.check:last-child { border-bottom: 0; }
.check__box { flex: none; margin-top: 1px; width: 20px; height: 20px; border-radius: 7px; border: 2px solid var(--line-2); background: rgba(255,255,255,.03); display: grid; place-content: center; cursor: pointer; transition: all .12s ease; }
.check__box svg { width: 12px; height: 12px; color: #06131A; opacity: 0; }
.check.is-done .check__box { background: var(--amber); border-color: var(--amber); }
.check.is-done .check__box svg { opacity: 1; }
.check__main { flex: 1; min-width: 0; }
.check__title { font-weight: 600; font-size: 14px; color: var(--ink); }
.check.is-done .check__title { color: var(--steel); text-decoration: line-through; text-decoration-color: var(--steel-2); }
.check__desc { font-size: 13px; color: var(--steel); margin-top: 3px; }
.check__refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ref-pill { font-family: var(--font-mono); font-size: 11px; padding: 2.5px 9px; border-radius: 999px; background: rgba(255,255,255,.05); color: var(--ink-2); border: 1px solid var(--line); }
.ref-pill a { color: inherit; }

.ring { --p: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-content: center; flex: none;
  background: conic-gradient(var(--amber) calc(var(--p) * 1%), rgba(255,255,255,.10) 0); }
.ring__inner { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); display: grid; place-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #fff; }

/* ============================================================
   Wissens-Hub
   ============================================================ */
.kb-layout { display: grid; grid-template-columns: 232px 1fr; gap: 24px; align-items: start; }
.kb-side { position: sticky; top: 92px; }
.kb-side__group { margin-bottom: 6px; }
.kb-cat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: transparent; border-radius: 12px; text-align: left; font-size: 13.5px; color: var(--ink-2); }
.kb-cat:hover { background: rgba(255,255,255,.04); }
.kb-cat.is-active { background: var(--petrol-tint); color: var(--petrol-deep); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(92,230,238,.22); }
.kb-cat__count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--steel); }

.kb-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-1); transition: border-color .14s ease, transform .1s ease, box-shadow .14s ease; }
.kb-card:hover { border-color: rgba(92,230,238,.30); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-2); }
.kb-card h3 { font-size: 15.5px; margin-bottom: 6px; }
.kb-card p { font-size: 13.5px; color: var(--steel); margin: 0; }
.kb-card__meta { display: flex; align-items: center; gap: 8px; margin-top: 12px; }

/* Artikel-Lesebereich */
.article { max-width: 76ch; }
.article h1 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 30px); }
.article h2 { font-size: 19px; margin: 26px 0 10px; padding-top: 4px; }
.article h3 { font-size: 16px; margin: 18px 0 8px; }
.article p, .article li { color: var(--ink-2); }
.article ul, .article ol { margin: 0 0 1em; padding-left: 1.3em; }
.article ul li { list-style: disc; margin: .3em 0; }
.article ol li { list-style: decimal; margin: .3em 0; }
.article code { font-family: var(--font-mono); font-size: 12.5px; background: rgba(255,255,255,.07); padding: 1px 6px; border-radius: var(--r-xs); border: 1px solid var(--line); color: var(--petrol-deep); }
.article pre { background: #080B12; border: 1px solid var(--line); color: #D5DEED; padding: 14px 16px; border-radius: var(--r); overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; }
.article pre code { background: none; border: 0; padding: 0; color: inherit; }
.article blockquote { margin: 14px 0; padding: 10px 16px; border-left: 3px solid var(--amber); background: var(--amber-tint); border-radius: 0 var(--r) var(--r) 0; color: var(--ink-2); }
.article table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13.5px; }
.article th, .article td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.article th { background: var(--surface-2); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--steel); }
.source-note { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--steel); }

/* Glossar */
.gloss { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.gloss__row { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 12px 16px; background: var(--surface); }
.gloss__term { font-weight: 600; color: var(--ink); }
.gloss__term small { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--steel); font-weight: 400; margin-top: 2px; }
.gloss__def { font-size: 13.5px; color: var(--ink-2); }

/* ============================================================
   API-Referenz & Playground
   ============================================================ */
.api-layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
.endpoint { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-1); }
.endpoint + .endpoint { margin-top: 10px; }
.endpoint__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; border-radius: var(--r); }
.endpoint__head:hover { background: rgba(255,255,255,.03); }
.endpoint__path { font-family: var(--font-mono); font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.endpoint__name { margin-left: auto; font-size: 12.5px; color: var(--steel); white-space: nowrap; }
.endpoint__body { display: none; padding: 0 14px 14px; border-top: 1px solid var(--line); }
.endpoint.is-open .endpoint__body { display: block; }
.endpoint__desc { font-size: 13.5px; color: var(--ink-2); margin: 12px 0; }
.fieldlist { display: flex; flex-wrap: wrap; gap: 6px; }

.req-url { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; font-family: var(--font-mono); }
.req-url .verb { display: flex; align-items: center; border-radius: 0; padding: 0 12px; }
.req-url .req-path { flex: 1; padding: 10px 12px; font-size: 12.5px; overflow-x: auto; white-space: nowrap; background: rgba(255,255,255,.04); color: var(--ink-2); }

.code-out { background: #080B12; border: 1px solid var(--line); color: #D5DEED; border-radius: var(--r); padding: 14px 16px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; overflow-x: auto; max-height: 380px; }
.code-out .k { color: #7DEBF1; }
.code-out .s { color: #e6c08a; }
.code-out .n { color: #9db4ff; }
.code-out .b { color: #A99BFF; }

.pg-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.pg-tab { padding: 9px 14px; border: 0; background: transparent; border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 600; color: var(--steel); margin-bottom: -1px; }
.pg-tab.is-active { color: var(--amber); border-bottom-color: var(--amber); }

/* Hinweis-Banner */
.mock-banner { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: var(--r); background: var(--amber-tint); border: 1px solid rgba(92,230,238,.25); font-size: 13px; color: #eccade; }
.mock-banner svg { width: 17px; height: 17px; flex: none; }

/* ---------- Verbinden-Flow ---------- */
.connect { max-width: 560px; margin: 0 auto; text-align: center; padding: 20px 0; }
.connect__logo { width: 60px; height: 60px; border-radius: 16px; margin: 0 auto 18px; display: grid; place-content: center; background: linear-gradient(135deg, #182135, #0C111C); border: 1px solid var(--line-2); color: #fff; font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; box-shadow: var(--shadow-2); }
.oauth-steps { text-align: left; margin: 22px 0; display: grid; gap: 2px; }
.oauth-step { display: flex; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); }
.oauth-step:first-child { border-radius: var(--r) var(--r) 0 0; }
.oauth-step:last-child { border-radius: 0 0 var(--r) var(--r); }
.oauth-step + .oauth-step { border-top: 0; }
.oauth-step__n { font-family: var(--font-mono); font-size: 12px; color: var(--steel); flex: none; width: 20px; }
.oauth-step__t { font-size: 13.5px; }
.oauth-step__t b { display: block; color: var(--ink); }
.oauth-step__t span { color: var(--steel); font-size: 12.5px; }
.oauth-step.is-done .oauth-step__n { color: var(--ok); }

.empty { text-align: center; padding: 40px 20px; color: var(--steel); }
.empty svg { width: 34px; height: 34px; margin: 0 auto 12px; color: var(--steel-2); }

.hr { height: 1px; background: var(--line); border: 0; margin: 18px 0; }
.muted { color: var(--steel); }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

/* Toast */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #141B2B; border: 1px solid var(--line-2); color: #fff; border-radius: 14px; box-shadow: var(--shadow-2); font-size: 13.5px; animation: toastin .25s ease; max-width: 340px; }
.toast .dot { box-shadow: none; }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Drawer */
.drawer-scrim { position: fixed; inset: 0; background: rgba(3, 5, 10, .6); backdrop-filter: blur(3px); z-index: 80; opacity: 0; animation: fade .2s ease forwards; }
@keyframes fade { to { opacity: 1; } }
.drawer { position: fixed; top: 12px; right: 12px; bottom: 12px; height: auto; width: min(760px, 94vw); background: var(--surface); border: 1px solid var(--line-2); border-radius: 22px; z-index: 90; box-shadow: var(--shadow-2); display: flex; flex-direction: column; animation: slidein .28s cubic-bezier(.2,.7,.2,1); overflow: hidden; }
@keyframes slidein { from { transform: translateX(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.drawer__head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.drawer__head .close { margin-left: auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--ink); display: grid; place-content: center; }
.drawer__body { padding: 24px 26px 60px; overflow-y: auto; }

.menu-toggle { display: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; padding: 12px; }
  .rail {
    position: fixed; left: 12px; top: 12px; bottom: 12px; height: auto; width: 264px; z-index: 60;
    transform: translateX(calc(-100% - 20px)); transition: transform .25s ease;
  }
  .app.is-nav-open .rail { transform: none; }
  .app.is-nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(3,5,10,.55); z-index: 55; }
  .menu-toggle { display: inline-grid; place-content: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--ink); }
  .kb-layout { grid-template-columns: 1fr; }
  .kb-side { position: static; }
  .takt { grid-auto-flow: row; grid-auto-columns: auto; gap: 2px; }
  .takt__track, .takt__fill { display: none; }
  .takt__station { flex-direction: row; justify-content: flex-start; gap: 12px; text-align: left; padding: 8px 0; }
  .topbar { top: 12px; }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .view { padding: 20px 2px 56px; }
  .topbar { padding: 0 14px; gap: 10px; }
  .instr .chip--hideable { display: none; }
  .gloss__row { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   Dashboard v2 (Helios-Stil): Topbar-Aktionen, Pills, Karten, Chart
   ============================================================ */
.tb-actions { display: flex; align-items: center; gap: 10px; }
.iconbtn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid var(--line); display: grid; place-content: center; color: var(--ink-2); transition: background .14s ease, color .14s ease; }
.iconbtn:hover { background: rgba(255,255,255,.10); color: #fff; }
.iconbtn svg { width: 17px; height: 17px; }
.avatar { display: flex; gap: 10px; align-items: center; padding: 5px 14px 5px 6px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.avatar__pic { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #9DF2F6, #1E8FA0); color: #06131A; display: grid; place-content: center; font-weight: 700; font-size: 12px; }
.avatar__txt { line-height: 1.15; }
.avatar__txt b { display: block; font-size: 12.5px; color: #fff; }
.avatar__txt span { display: block; font-size: 10.5px; color: var(--steel); font-family: var(--font-mono); }

/* Begrüßung */
.hello .hl { color: var(--amber); -webkit-text-fill-color: currentColor; }

/* Segment-Pills + Frag-TAKT-Suche */
.seg-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 20px; flex-wrap: wrap; }
.seg { padding: 8px 17px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: all .14s ease; }
.seg:hover { background: rgba(255,255,255,.07); }
.seg.is-active { background: #f3e9f0; color: #06131A; border-color: transparent; box-shadow: var(--glow-pink); }
.seg--sm { padding: 5px 12px; font-size: 12px; }
.ask { margin-left: auto; position: relative; flex: 0 1 360px; min-width: 260px; }
.ask svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--steel); }
.ask input { width: 100%; padding: 11px 16px 11px 40px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--ink); font-size: 13.5px; }
.ask input::placeholder { color: var(--steel-2); }
.ask input:focus { outline: none; border-color: var(--petrol-2); box-shadow: 0 0 0 3px rgba(92,230,238,.16); }

/* Dashboard-Raster */
.dash { display: grid; grid-template-columns: minmax(290px, 330px) minmax(0, 1fr) minmax(310px, 370px); gap: 18px; align-items: stretch; margin-bottom: 18px; }
.dash__col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Große Kennzahl (Total-Holding-Stil) */
.bigstat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-1); }
.bigstat__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bigstat__label { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.bigstat__value { font-family: var(--font-display); font-size: 42px; font-weight: 700; color: #fff; margin-top: 14px; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.bigstat__meta { margin-top: 8px; font-size: 12.5px; color: var(--steel); display: flex; align-items: center; gap: 8px; }
.delta-up { color: #7ee2ae; background: rgba(82,201,138,.13); padding: 1.5px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.delta-down { color: #f0a099; background: var(--err-tint); padding: 1.5px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }

/* Promo-Karte mit Glow */
.promo { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); padding: 24px 22px 26px; text-align: center; box-shadow: var(--shadow-1); flex: 1; display: flex; flex-direction: column; justify-content: center; }
.promo::before { content: ""; position: absolute; left: 50%; bottom: -90px; transform: translateX(-50%); width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(92,230,238,.32), rgba(92,230,238,.10) 45%, transparent 68%); }
.promo > * { position: relative; z-index: 1; }
.promo h3 { font-size: 16.5px; margin-bottom: 8px; }
.promo p { font-size: 13px; color: var(--steel); max-width: 30ch; margin: 0 auto 16px; }

/* Watchlist-Karte (Mandanten) */
.watch__tabs { display: flex; gap: 6px; }
.wrow { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 10px; }
.wrow:last-child { border-bottom: 0; }
.wrow:hover { background: rgba(255,255,255,.03); }
.mono-avatar { width: 36px; height: 36px; border-radius: 11px; display: grid; place-content: center; font-weight: 700; font-size: 13.5px; color: #fff; background: rgba(255,255,255,.07); border: 1px solid var(--line); flex: none; }
.wrow__main { flex: 1; min-width: 0; }
.wrow__name { font-weight: 600; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow__sub { font-family: var(--font-mono); font-size: 11px; color: var(--steel); margin-top: 1px; }
.wrow__val { text-align: right; }
.wrow__val b { display: block; font-size: 14px; color: #fff; font-variant-numeric: tabular-nums; }
.wrow__val span { font-size: 11px; font-weight: 700; color: #7ee2ae; }

/* Mini-Karten 2×2 (My-Portfolio-Stil) */
.minigrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 16px; padding: 14px 15px; }
.mini__val { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.mini__delta { margin-top: 3px; }
.mini__foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.mini__foot svg { width: 16px; height: 16px; color: var(--steel); }
.mini__foot .lbl { font-size: 11.5px; color: var(--steel); font-weight: 600; }
.mini__foot .units { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--steel-2); }

/* Chart-Karte */
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 18px 18px 10px; }
.chart-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.chart-card__head h3 { font-size: 15.5px; }
.ch-wrap { position: relative; }
.ch-svg { width: 100%; height: 300px; display: block; }
.ch-grid { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.ch-line { fill: none; stroke: #5CE6EE; stroke-width: 2.5; filter: drop-shadow(0 4px 10px rgba(92,230,238,.35)); }
.ch-area { fill: url(#chgrad); }
.ch-cursor { stroke: rgba(92,230,238,.55); stroke-width: 1.2; stroke-dasharray: 4 4; }
.ch-dot { fill: #C2F7FA; stroke: #1E8FA0; stroke-width: 3; filter: drop-shadow(0 0 8px rgba(92,230,238,.8)); }
.ch-x { display: flex; justify-content: space-between; padding: 8px 6px 6px 46px; font-family: var(--font-mono); font-size: 11px; color: var(--steel); }
.ch-y { position: absolute; left: 0; top: 0; bottom: 34px; width: 40px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 6px 6px 0 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--steel-2); pointer-events: none; }
.ch-tip { position: absolute; pointer-events: none; background: #161E30; border: 1px solid var(--line-2); border-radius: 12px; padding: 8px 12px; font-size: 11.5px; color: var(--steel); box-shadow: var(--shadow-2); transform: translate(-50%, calc(-100% - 14px)); white-space: nowrap; z-index: 5; }
.ch-tip b { display: block; font-size: 14.5px; color: #fff; margin-top: 1px; }
.ch-tip .delta-up { margin-left: 6px; }

@media (max-width: 1240px) {
  .dash { grid-template-columns: 1fr 1fr; }
  .dash__col--right { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .dash { grid-template-columns: 1fr; }
  .ask { flex: 1 1 100%; margin-left: 0; }
}

/* Rail: System-Navigation unten (Einstellungen/Support) */
.rail__sysnav { padding: 8px 14px 4px; border-top: 1px solid var(--rail-line); }
.rail__sysnav a.navitem { text-decoration: none; }

/* ---------- Upload / Machbarkeits-Analyse ---------- */
.uploader { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1.5px dashed var(--line-2); border-radius: var(--r); background: rgba(255,255,255,.03); cursor: pointer; transition: border-color .14s ease, background .14s ease; }
.uploader:hover, .uploader.is-drag { border-color: var(--amber-2); background: var(--amber-tint); }
.uploader > svg { width: 22px; height: 22px; color: var(--amber); flex: none; }
.uploader b { display: block; font-size: 14px; color: var(--ink); }
.uploader span { font-size: 12.5px; color: var(--steel); }
.filechip { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 10px 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255,255,255,.04); }
.filechip > svg { width: 15px; height: 15px; color: var(--steel); flex: none; }
.filechip__name { font-size: 13px; font-weight: 600; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.filechip__x { width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: var(--ink); display: grid; place-content: center; flex: none; }
.filechip__x svg { width: 13px; height: 13px; }

/* ---------- PDF-Report (Druck; auf dem Bildschirm verborgen) ----------
   Beratungs-Report: bleibt bewusst HELL (Kundendokument, druckbar).
   Deckblatt (graphit) → Management Summary → Detail-Karten → Schritte → Methodik. */
#print-doc { display: none; }
#print-doc .pd { color: #1a2422; font-family: "Segoe UI", Arial, sans-serif; font-size: 10.5pt; line-height: 1.55; padding: 0 13mm; }

/* Seitenrand-Skelett: @page margin ist 0 (unterdrückt Browser-Kopf-/Fußzeile mit URL);
   die thead-/tfoot-Abstandszeilen wiederholen sich auf JEDER Seite und ersetzen die Ränder. */
#print-doc .pd-page { width: 100%; border-collapse: collapse; }
#print-doc .pd-page td { padding: 0; }
#print-doc .pd-sp-top { height: 10mm; }
#print-doc .pd-sp-bot { height: 12mm; }

/* Laufende Fußzeile (wiederholt sich je Seite, sitzt in der unteren Abstandszone) */
#print-doc .pd-runfoot { position: fixed; bottom: 4mm; left: 13mm; right: 13mm; display: flex; justify-content: space-between; font-size: 7pt; letter-spacing: .1em; text-transform: uppercase; color: #a9b5b1; }

/* Deckblatt */
#print-doc .pd-cover { position: relative; min-height: 266mm; background: #132320; color: #eef3f1; border-radius: 5mm; padding: 15mm 15mm 12mm; display: flex; flex-direction: column; page-break-after: always; break-after: page; overflow: hidden; }
#print-doc .pd-cover::after { content: ""; position: absolute; top: -34mm; right: -34mm; width: 100mm; height: 100mm; border-radius: 50%; background: radial-gradient(circle, rgba(18,133,122,.38), transparent 70%); }
#print-doc .pd-cover-brand { display: flex; align-items: center; gap: 4mm; position: relative; z-index: 1; }
#print-doc .pd-mark { font-family: "Bahnschrift", "Arial Narrow", sans-serif; font-weight: 700; letter-spacing: .2em; background: #d9720f; color: #1c1206; padding: 1.8mm 3.2mm; border-radius: 1.5mm; font-size: 11pt; }
#print-doc .pd-brand-sub { font-size: 8pt; letter-spacing: .16em; text-transform: uppercase; color: #7e948e; }
#print-doc .pd-cover-main { margin-top: 26mm; position: relative; z-index: 1; }
#print-doc .pd-cover-eyebrow { font-size: 10pt; letter-spacing: .32em; text-transform: uppercase; color: #d9720f; margin-bottom: 6mm; font-weight: 600; }
#print-doc .pd-cover-title { font-family: "Bahnschrift", "Arial Narrow", sans-serif; font-size: 26pt; line-height: 1.12; font-weight: 700; color: #fff; margin: 0 0 9mm; max-width: 160mm; }
#print-doc .pd-cover-rule { width: 26mm; height: 1.4mm; background: #d9720f; border-radius: 1mm; margin-bottom: 10mm; }
#print-doc .pd-cover-meta { display: flex; gap: 14mm; margin-bottom: 12mm; }
#print-doc .pd-cover-meta span { display: block; font-size: 7.2pt; letter-spacing: .18em; text-transform: uppercase; color: #7e948e; margin-bottom: 1.4mm; }
#print-doc .pd-cover-meta b { font-size: 10.5pt; color: #eef3f1; font-weight: 600; }
#print-doc .pd-cover-verdict { background: rgba(255,255,255,.06); border: 1px solid #274641; border-radius: 3.5mm; padding: 7mm 8mm; max-width: 155mm; }
#print-doc .pd-cover-fazit { font-size: 11pt; line-height: 1.65; color: #d7e3df; margin: 4mm 0 0; }
#print-doc .pd-cover-takt { margin-top: auto; position: relative; z-index: 1; padding-top: 12mm; }
#print-doc .pd-takt-line { display: flex; align-items: center; }
#print-doc .pd-takt-dot { width: 5mm; height: 5mm; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.45); flex: none; }
#print-doc .pd-takt-seg { height: 1px; background: #2c4a45; flex: 1; }
#print-doc .pd-cover-foot { margin-top: 5mm; font-size: 7.2pt; letter-spacing: .12em; text-transform: uppercase; color: #7e948e; }

/* Innenseiten-Typografie */
#print-doc .pd-sec { margin-bottom: 9mm; }
#print-doc .pd-kicker { font-size: 7.6pt; letter-spacing: .26em; text-transform: uppercase; color: #d9720f; margin: 0 0 1.6mm; font-weight: 700; }
#print-doc .pd-h2 { font-family: "Bahnschrift", "Arial Narrow", sans-serif; font-size: 15pt; font-weight: 700; color: #0a3a36; margin: 0 0 5mm; padding-bottom: 2mm; border-bottom: 2px solid #0e5a54; }

/* Management Summary */
#print-doc .pd-fazit { font-size: 11.5pt; font-weight: 600; line-height: 1.6; margin: 0 0 5mm; color: #12201e; }
#print-doc .pd-kpis { display: flex; gap: 4mm; margin: 0 0 5mm; }
#print-doc .pd-kpi { flex: 1; border: 1px solid #dbe3df; border-radius: 2.8mm; padding: 3.6mm 4.5mm; background: #f5f8f6; }
#print-doc .pd-kpi span { display: block; font-size: 7pt; letter-spacing: .15em; text-transform: uppercase; color: #5c6b67; margin-bottom: 1.4mm; }
#print-doc .pd-kpi b { font-size: 12pt; font-weight: 700; color: #12201e; }
#print-doc .pd-dist { display: flex; height: 6mm; border-radius: 1.8mm; overflow: hidden; margin: 0 0 2.4mm; }
#print-doc .pd-dist-seg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 8pt; font-weight: 700; }
#print-doc .pd-legend { display: flex; flex-wrap: wrap; gap: 4mm; font-size: 8pt; color: #35433f; margin-bottom: 6mm; }
#print-doc .pd-legend i { display: inline-block; width: 2.6mm; height: 2.6mm; border-radius: .8mm; margin-right: 1.4mm; }
#print-doc .pd-overview { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
#print-doc .pd-overview th { text-align: left; font-size: 7.2pt; letter-spacing: .13em; text-transform: uppercase; color: #5c6b67; padding: 1.8mm 3mm; border-bottom: 1.5px solid #12201e; }
#print-doc .pd-overview td { padding: 2.4mm 3mm; border-bottom: 1px solid #e5eae7; vertical-align: middle; }
#print-doc .pd-overview .num { color: #8b9793; font-weight: 700; width: 9mm; font-family: "Bahnschrift", sans-serif; }

/* Badges */
#print-doc .pd-badge { display: inline-block; font-size: 8pt; font-weight: 700; padding: 1.1mm 3.2mm; border-radius: 10mm; white-space: nowrap; }
#print-doc .pd-badge-big { font-size: 10pt; padding: 2mm 4.6mm; }
#print-doc .pd-b-standard { background: #e2f0ea; color: #1f7a5c; }
#print-doc .pd-b-middleware { background: #e6eef4; color: #1f5a86; }
#print-doc .pd-b-individual { background: #fbead6; color: #b75e08; }
#print-doc .pd-b-nicht_moeglich { background: #f7e2dc; color: #c0492f; }
#print-doc .pd-b-zu_pruefen, #print-doc .pd-b-unklar { background: #eef3f1; color: #5c6b67; }
#print-doc .pd-b-mix { background: #d9edea; color: #0a3a36; }

/* Anforderungs-Karten */
#print-doc .pd-req { border: 1px solid #dbe3df; border-left: 1.4mm solid #8b9793; border-radius: 2.8mm; padding: 4.6mm 5.5mm 4mm; margin: 0 0 4.5mm; break-inside: avoid; page-break-inside: avoid; background: #fff; }
#print-doc .pd-req-standard { border-left-color: #1f7a5c; }
#print-doc .pd-req-middleware { border-left-color: #1f5a86; }
#print-doc .pd-req-individual { border-left-color: #d9720f; }
#print-doc .pd-req-nicht_moeglich { border-left-color: #c0492f; }
#print-doc .pd-req-head { display: flex; align-items: flex-start; gap: 3mm; margin-bottom: 1.6mm; }
#print-doc .pd-num { font-family: "Bahnschrift", sans-serif; flex: none; width: 6.8mm; height: 6.8mm; border-radius: 1.8mm; background: #132320; color: #fff; text-align: center; line-height: 6.8mm; font-size: 9.5pt; font-weight: 700; }
#print-doc .pd-h3 { font-family: "Bahnschrift", "Arial Narrow", sans-serif; font-size: 12pt; font-weight: 700; margin: 0; flex: 1; line-height: 1.25; padding-top: .5mm; }
#print-doc .pd-req-head .pd-badge { margin-top: .7mm; }
#print-doc .pd-req p { margin: 1.4mm 0; font-size: 9.7pt; color: #33433f; }
#print-doc .pd-box { background: #f5f8f6; border: 1px solid #dbe3df; border-radius: 2.4mm; padding: 3mm 4mm; margin: 2.4mm 0; font-size: 9.2pt; }
#print-doc .pd-box-alt { background: #fdf3e4; border-color: #f0d3ad; }
#print-doc .pd-box-res { background: #e9f2f0; border-color: #cfe3df; }
#print-doc .pd-lbl { display: block; font-size: 7pt; text-transform: uppercase; letter-spacing: .16em; color: #5c6b67; margin-bottom: 1mm; font-weight: 700; }
#print-doc .pd-box-alt .pd-lbl { color: #b75e08; }
#print-doc .pd-box-res .pd-lbl { color: #0e5a54; }
#print-doc .pd-src { font-size: 7.4pt; color: #5c6b67; word-break: break-all; margin-top: 1.4mm; }
#print-doc .pd-chips { margin: 2mm 0 0; }
#print-doc .pd-chip { display: inline-block; font-family: "Cascadia Mono", Consolas, monospace; font-size: 7.6pt; border: 1px solid #dbe3df; background: #f5f8f6; color: #33433f; border-radius: 10mm; padding: .7mm 2.6mm; margin: 0 1.2mm 1.2mm 0; }
#print-doc .pd-reqmeta { display: flex; align-items: center; gap: 5mm; font-size: 8pt; color: #5c6b67; margin-top: 2mm; padding-top: 2mm; border-top: 1px dashed #e5eae7; }
#print-doc .pd-konf-dot { display: inline-block; width: 2.3mm; height: 2.3mm; border-radius: 50%; margin-right: 1.3mm; }

/* Schritte & offene Fragen */
#print-doc .pd-steps { counter-reset: step; margin: 0; padding: 0; list-style: none; }
#print-doc .pd-steps li { counter-increment: step; position: relative; padding: 2.4mm 0 2.4mm 11mm; border-bottom: 1px solid #eef1ef; font-size: 9.8pt; }
#print-doc .pd-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 2.2mm; font-family: "Bahnschrift", sans-serif; font-weight: 700; font-size: 10.5pt; color: #d9720f; }
#print-doc .pd-qs { margin: 0; padding: 0; list-style: none; }
#print-doc .pd-qs li { position: relative; padding: 2.2mm 0 2.2mm 8.4mm; font-size: 9.8pt; border-bottom: 1px solid #eef1ef; }
#print-doc .pd-qs li::before { content: "?"; position: absolute; left: 0; top: 2.1mm; width: 4.8mm; height: 4.8mm; border-radius: 50%; background: #eef3f1; color: #5c6b67; font-weight: 700; font-size: 8.5pt; text-align: center; line-height: 4.8mm; }

/* Methodik & Abbinder */
#print-doc .pd-method { background: #f5f8f6; border: 1px solid #dbe3df; border-radius: 2.8mm; padding: 4.5mm 5.5mm; font-size: 8.8pt; color: #35433f; line-height: 1.6; }
#print-doc .pd-method b { color: #12201e; }
#print-doc .pd-brandline { display: flex; align-items: center; gap: 3mm; margin-top: 5mm; font-size: 8.5pt; color: #5c6b67; }
#print-doc .pd-brandline .pd-mark { font-size: 8pt; padding: 1.4mm 2.8mm; }

@media print {
  body > *:not(#print-doc) { display: none !important; }
  #print-doc { display: block !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  /* margin 0 = Browser druckt KEINE eigene Kopf-/Fußzeile (URL, Datum, Seitenzahl). */
  @page { size: A4; margin: 0; }
}

/* ============================================================
   LICHTWERK v3 — neue Komponenten (Login, Takt-Linie 2100,
   Gates, Chatdock, Aufgaben, HUD, FX)
   ============================================================ */

/* ---------- HUD-Utilities ---------- */
.hud { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--steel); }
.holo-text { background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hud-corners { position: relative; }
.hud-corners::before, .hud-corners::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: .5;
}
.hud-corners::before { top: 8px; left: 8px; border-top: 1.5px solid var(--plasma); border-left: 1.5px solid var(--plasma); }
.hud-corners::after { bottom: 8px; right: 8px; border-bottom: 1.5px solid var(--plasma); border-right: 1.5px solid var(--plasma); }

/* Feine Scanlines nur auf dem App-Rahmen */
.scan { position: relative; }
.scan::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(140,170,220,.012) 3px 4px);
}

/* Glass-Look für Karten + Neon-Kante bei Hover.
   Bewusst OHNE backdrop-filter: Dutzende Blur-Flächen über dem animierten
   Aurora-Canvas zwingen den Browser zu Dauer-Compositing (Seiten fühlen sich
   zäh an). Blur bleibt den wenigen großen Flächen vorbehalten (Rail, Topbar,
   Drawer, Chatdock, Login). */
.panel, .tile, .chart-card, .bigstat {
  background: rgba(14, 19, 32, .90);
  transition: box-shadow .2s ease, border-color .2s ease, transform .12s ease;
}
.tile:hover, .kb-card:hover {
  border-color: rgba(92,230,238,.28);
  box-shadow: inset 0 0 0 1px rgba(92,230,238,.16), 0 0 24px rgba(92,230,238,.10), var(--shadow-2);
}
.view__head h1 { background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* CTA mit Holo-Rand */
.btn--holo {
  background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--holo) border-box;
  border: 1.5px solid transparent; color: #fff;
}
.btn--holo:hover { box-shadow: var(--glow-plasma); text-decoration: none; }

/* 3D-Tilt (fx/tilt.js setzt --rx/--ry/--mx/--my) */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-tilt].is-tilting {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
[data-tilt] .tilt-sheen {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(157,242,246,.10), transparent 60%);
}
[data-tilt].is-tilting .tilt-sheen { opacity: 1; }

/* ---------- Login / Ersteinrichtung ---------- */
.login-stage { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login {
  position: relative; width: min(430px, 94vw);
  background: var(--glass); backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid var(--line-2); border-radius: 22px; box-shadow: var(--shadow-2);
  padding: 38px 36px 30px; overflow: hidden;
}
.login::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--holo); opacity: .35;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.login__mark { font-family: var(--font-display); font-weight: 700; font-size: 40px; letter-spacing: .22em; padding-left: .22em; text-align: center; color: #fff; }
.login__sub { text-align: center; margin: 4px 0 12px; }
.login__takt { display: flex; align-items: center; gap: 0; margin: 18px 0 26px; }
.login__takt i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; transition: all .3s ease; }
.login__takt span { flex: 1; height: 1.5px; background: var(--line-2); }
.login__takt i.lit { background: var(--plasma); border-color: var(--plasma); box-shadow: 0 0 10px rgba(92,230,238,.7); }
.login__takt span.lit { background: linear-gradient(90deg, var(--plasma), var(--ion)); }
.login .field + .field { margin-top: 14px; }
.login__err { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--err-tint); border: 1px solid rgba(242,118,108,.3); color: #F8B3AD; font-size: 13px; }
.login__foot { margin-top: 22px; text-align: center; }
.login .btn { margin-top: 20px; }

/* ---------- Takt-Linie 2100 (Conveyor mit Gates) ---------- */
/* Läuft nie mehr aus dem Panel: auf schmalen Breiten scrollt die Linie
   horizontal in ihrem eigenen Container. */
.takt2 { position: relative; padding: 10px 4px 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.takt2__lane { display: flex; align-items: flex-start; padding-bottom: 4px; }
.takt2__station { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 84px; cursor: pointer; z-index: 1; background: none; border: 0; color: inherit; padding: 0 4px 10px; }
.takt2__hex {
  width: 32px; height: 36px; display: grid; place-content: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--surface-3); border: 0; color: var(--steel);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  transition: all .25s ease;
}
.takt2__station.is-done .takt2__hex { background: var(--plasma-deep); color: #fff; }
.takt2__station.is-active .takt2__hex {
  background: linear-gradient(135deg, #9DF2F6, #5CE6EE); color: #06131A;
  filter: drop-shadow(0 0 10px rgba(92,230,238,.65));
}
.takt2__lbl {
  font-size: 10.5px; font-weight: 600; line-height: 1.25; color: var(--steel); text-align: center;
  max-width: 84px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.takt2__station.is-active .takt2__lbl { color: var(--plasma-2); }
.takt2__station.is-done .takt2__lbl { color: var(--ink-2); }
.takt2__station:hover .takt2__lbl { color: var(--ink); }
/* Ausgewählte Station (deren Phase unten angezeigt wird): Holo-Marker */
.takt2__station.is-sel::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 24px; height: 3px; border-radius: 3px; background: var(--holo);
  box-shadow: 0 0 10px rgba(92,230,238,.5);
}

.takt2__belt { flex: 1 1 30px; position: relative; height: 36px; display: grid; place-items: center; min-width: 8px; }
.takt2__belt::before { content: ""; position: absolute; left: -6px; right: -6px; top: calc(50% - 1.5px); height: 3px; background: rgba(140,170,220,.14); border-radius: 3px; }
.takt2__belt.is-flow::before {
  background: repeating-linear-gradient(90deg, var(--plasma) 0 10px, rgba(92,230,238,.25) 10px 20px);
  animation: convey 1.1s linear infinite; box-shadow: 0 0 12px rgba(92,230,238,.35);
}
@keyframes convey { to { background-position: 20px 0; } }

.takt2__gate {
  position: relative; z-index: 1; width: 24px; height: 24px; margin-top: 6px; flex: none;
  display: grid; place-content: center;
  transform: rotate(45deg); border-radius: 6px; border: 2px solid var(--line-2);
  background: var(--surface-2); color: var(--steel-2); cursor: pointer; padding: 0;
  transition: all .25s ease;
}
.takt2__gate > * { transform: rotate(-45deg); }
.takt2__gate svg { width: 12px; height: 12px; }
.takt2__gate.is-passed { background: rgba(70,222,156,.16); border-color: var(--ok); color: var(--ok); }
.takt2__gate.is-armed { border-color: var(--warn); color: var(--warn); animation: gatepulse 1.6s ease-in-out infinite; }
@keyframes gatepulse { 0%,100% { box-shadow: 0 0 0 0 rgba(240,180,92,.45); } 50% { box-shadow: 0 0 0 7px rgba(240,180,92,0); } }
.takt2__gate.is-locked { opacity: .55; }

/* ---------- Aufgabenzeilen & Status ---------- */
.taskrow {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--steel-2);
  border-radius: 12px; background: var(--glass); margin-bottom: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.taskrow:hover { border-color: var(--line-2); box-shadow: 0 0 18px rgba(92,230,238,.06); }
.taskrow.st-offen { border-left-color: var(--steel-2); }
.taskrow.st-in_arbeit { border-left-color: var(--plasma); }
.taskrow.st-erledigt { border-left-color: var(--ok); opacity: .62; }
.taskrow.st-blockiert { border-left-color: var(--err); }
.taskrow.st-entfaellt { border-left-color: var(--steel-2); opacity: .45; }
.taskrow__main { flex: 1; min-width: 0; cursor: pointer; }
.taskrow__title { font-weight: 600; font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.taskrow.st-erledigt .taskrow__title { text-decoration: line-through; text-decoration-color: var(--steel-2); color: var(--steel); }
.taskrow__sub { font-size: 11.5px; color: var(--steel); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.taskrow__ico { flex: none; color: var(--steel); width: 16px; height: 16px; }

.stx {
  flex: none; width: 26px; height: 26px; border-radius: 9px; border: 2px solid var(--line-2);
  background: rgba(140,170,220,.05); display: grid; place-content: center; cursor: pointer;
  color: transparent; transition: all .15s ease; padding: 0;
}
.stx svg { width: 13px; height: 13px; }
.stx:hover { border-color: var(--plasma); }
.stx.st-in_arbeit { border-color: var(--plasma); color: var(--plasma); }
.stx.st-erledigt { background: linear-gradient(135deg, #9DF2F6, #5CE6EE); border-color: transparent; color: #06131A; }
.stx.st-blockiert { border-color: var(--err); color: var(--err); }
@keyframes checkpop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.stx.just-done { animation: checkpop .3s cubic-bezier(.2,.7,.3,1.4); }

.due { font-family: var(--font-mono); font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: rgba(140,170,220,.08); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.due--over { background: var(--err-tint); border-color: rgba(242,118,108,.35); color: #F8B3AD; box-shadow: 0 0 12px rgba(242,118,108,.15); }
.due--today { background: rgba(240,180,92,.12); border-color: rgba(240,180,92,.35); color: #F6CE96; }

.tag--track-a { background: rgba(92,230,238,.12); color: var(--plasma-2); border: 1px solid rgba(92,230,238,.3); }
.tag--track-b { background: rgba(143,123,255,.13); color: #B9ACFF; border: 1px solid rgba(143,123,255,.3); }

/* Aufgaben-Gruppen (Meine Aufgaben) */
.taskgroup { margin-bottom: 22px; }
.taskgroup__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.taskgroup__head .hud { color: var(--ink-2); }
.taskgroup--over .taskrow { border-color: rgba(242,118,108,.25); }
.taskgroup--over .hud { color: #F8B3AD; }

/* ---------- Coach ---------- */
.coach-state { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.coach-state--gruen { background: rgba(70,222,156,.13); color: #7FE9BB; border: 1px solid rgba(70,222,156,.3); }
.coach-state--gelb { background: rgba(240,180,92,.13); color: #F6CE96; border: 1px solid rgba(240,180,92,.3); }
.coach-state--rot { background: var(--err-tint); color: #F8B3AD; border: 1px solid rgba(242,118,108,.3); }
.sev { border: 1px solid var(--line); border-left: 3px solid var(--steel); border-radius: 12px; background: var(--glass); padding: 12px 14px; margin-bottom: 10px; }
.sev--info { border-left-color: var(--plasma); }
.sev--warnung { border-left-color: var(--warn); }
.sev--kritisch { border-left-color: var(--err); box-shadow: 0 0 18px rgba(242,118,108,.08); }
.sev__title { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.sev__desc { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.sev__emp { font-size: 12.5px; color: var(--plasma-2); margin-top: 6px; }
.sev__meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.coach-skel { height: 74px; border-radius: 12px; margin-bottom: 10px; background: linear-gradient(100deg, rgba(140,170,220,.05) 40%, rgba(140,170,220,.12) 50%, rgba(140,170,220,.05) 60%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Chatdock ---------- */
.chatfab {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid transparent;
  background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--holo) border-box;
  color: var(--plasma-2); display: grid; place-content: center; cursor: pointer;
  box-shadow: var(--shadow-2), 0 0 24px rgba(92,230,238,.18);
  transition: transform .15s ease, box-shadow .2s ease;
}
.chatfab:hover { transform: translateY(-2px); box-shadow: var(--shadow-2), var(--glow-plasma); }
.chatfab svg { width: 23px; height: 23px; }
.chatfab.is-open { color: #fff; }

.chatdock {
  position: fixed; top: 12px; right: 12px; bottom: 86px; z-index: 75;
  width: min(400px, 94vw);
  background: var(--glass); backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid var(--line-2); border-radius: 20px; box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; overflow: hidden;
  animation: slidein .28s cubic-bezier(.2,.7,.2,1);
}
.chatdock__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chatdock__head b { font-family: var(--font-display); letter-spacing: .12em; }
.chatdock__body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chatmsg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.chatmsg--user { align-self: flex-end; background: rgba(92,230,238,.13); border: 1px solid rgba(92,230,238,.22); color: var(--ink); border-bottom-right-radius: 4px; }
.chatmsg--bot { align-self: flex-start; background: rgba(140,170,220,.06); border: 1px solid var(--line); color: var(--ink-2); border-bottom-left-radius: 4px; }
.chatmsg--bot .article { max-width: none; }
.chatmsg--bot .article p, .chatmsg--bot .article li { font-size: 13px; }
.chatmsg--bot .article h1, .chatmsg--bot .article h2, .chatmsg--bot .article h3 { font-size: 14px; margin: 10px 0 4px; }
.chatcursor { display: inline-block; width: 8px; height: 14px; background: var(--plasma); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(1) infinite; border-radius: 2px; }
@keyframes blink { 50% { opacity: 0; } }
.chatdock__foot { padding: 12px 14px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: flex-end; }
.chatdock__foot textarea { flex: 1; min-height: 40px; max-height: 130px; resize: none; }
.chatdock__hint { padding: 0 16px 10px; font-size: 11px; color: var(--steel-2); }

/* Toasts über dem Chat-Button */
.toasts { bottom: 88px; }

/* ---------- Kundenkarten ---------- */
.custcard { position: relative; display: flex; flex-direction: column; gap: 12px; background: rgba(14, 19, 32, .90); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-1); cursor: pointer; transition: border-color .16s ease, transform .12s ease, box-shadow .2s ease; overflow: hidden; }
.custcard:hover { border-color: rgba(92,230,238,.3); transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(92,230,238,.14), 0 0 26px rgba(92,230,238,.10), var(--shadow-2); }
.custcard__head { display: flex; align-items: center; gap: 12px; }
.custcard__name { font-weight: 700; font-size: 15px; color: #fff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custcard__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.custbar { height: 4px; border-radius: 4px; background: rgba(140,170,220,.10); overflow: hidden; }
.custbar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--plasma), var(--ion)); box-shadow: 0 0 10px rgba(92,230,238,.4); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.custcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--steel); }

/* Statuspunkte Kunden */
.cst { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
.cst i { width: 7px; height: 7px; border-radius: 50%; }
.cst--interessent i { background: var(--steel); } .cst--interessent { color: var(--steel); }
.cst--onboarding i { background: var(--plasma); box-shadow: 0 0 8px rgba(92,230,238,.7); } .cst--onboarding { color: var(--plasma-2); }
.cst--aktiv i { background: var(--ok); } .cst--aktiv { color: #7FE9BB; }
.cst--pausiert i { background: var(--warn); } .cst--pausiert { color: #F6CE96; }
.cst--archiviert i { background: var(--steel-2); } .cst--archiviert { color: var(--steel-2); }

/* Verlaufs-Timeline (Task-Drawer) */
.hist { border-left: 2px solid var(--line-2); padding-left: 16px; display: flex; flex-direction: column; gap: 10px; }
.hist__item { position: relative; font-size: 12.5px; color: var(--ink-2); }
.hist__item::before { content: ""; position: absolute; left: -21px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); border: 2px solid var(--steel-2); }
.hist__item.is-gate::before { background: var(--plasma-deep); border-color: var(--plasma); box-shadow: 0 0 8px rgba(92,230,238,.5); }
.hist__meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--steel-2); }

/* Guideline-Box im Task-Drawer */
.guide { border: 1px solid rgba(92,230,238,.2); background: rgba(92,230,238,.05); border-radius: 14px; padding: 16px 18px; }
.guide .article { max-width: none; }

/* Phasen-Kopf im Projekt */
.phasehead { display: flex; align-items: center; gap: 12px; margin: 20px 0 12px; }
.phasehead h3 { font-family: var(--font-display); letter-spacing: .06em; font-size: 16px; }
.phasehead .hud { margin-left: auto; }

/* Zähler-Animation Basis */
[data-count] { font-variant-numeric: tabular-nums; }

/* View-Transitions (Chromium; Firefox ignoriert) */
@media not (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: vt-out .16s ease both; }
  ::view-transition-new(root) { animation: vt-in .2s ease both; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* Kompakte Takt-Linie auf mittleren Breiten (Rail nimmt Platz) */
@media (max-width: 1360px) {
  .takt2__station { width: 64px; padding: 0 2px 10px; }
  .takt2__hex { width: 28px; height: 32px; font-size: 11px; }
  .takt2__lbl { font-size: 9.5px; max-width: 64px; }
  .takt2__gate { width: 20px; height: 20px; }
  .takt2__gate svg { width: 10px; height: 10px; }
  .takt2__belt { height: 32px; min-width: 5px; }
}

/* ---------- Zweispalten-Layout (Hauptspalte + Seitenspalte) mit Breakpoint ---------- */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--side, 360px); gap: 18px; align-items: start; }
.cols--340 { --side: 340px; }
.cols--380 { --side: 380px; }
@media (max-width: 1100px) {
  .cols { grid-template-columns: 1fr; }
}

/* Responsive: Takt-Linie 2100 vertikal */
@media (max-width: 900px) {
  .takt2 { overflow-x: visible; }
  .takt2__lane { flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
  .takt2__station { flex-direction: row; width: auto; gap: 12px; padding: 4px 0; }
  .takt2__lbl { text-align: left; max-width: none; display: block; }
  .takt2__station.is-sel::after { left: -8px; top: 50%; bottom: auto; transform: translateY(-50%); width: 3px; height: 22px; }
  .takt2__belt { display: none; }
  .takt2__gate { margin: 4px 0 4px 4px; }
  .chatdock { top: 8px; right: 8px; left: 8px; width: auto; }
}