/* ═══════════════════════════════════════════════════════════
   CT AI Cockpit — Designsystem
   Basis: CT-Rot #cc1417, Systemschrift, dunkle Werkstatt.
   Gamification lebt in eigener Schiene, nie über den Arbeitsdaten.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Flächen — warmes Grau statt Schwarz. Reines Schwarz mit heller Schrift
     erzeugt bei langen Texten Nachbilder an den Kanten; ein angehobener,
     leicht warmer Grund liest sich über eine Stunde hinweg ruhiger.
     Die Flächen darüber sind durchscheinendes Weiss, sie heben mit. */
  --bg:#262624;
  --bg-2:#2d2d2a;
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.085);
  --hair:rgba(255,255,255,.10);
  --hair-2:rgba(255,255,255,.18);

  /* Schrift. Auf hellerem Grund brauchen die gedämpften Töne mehr Helligkeit,
     sonst sinken sie unter das Kontrastverhältnis 4.5:1. */
  --ink:#f5f4ef;
  --ink-soft:#b3b1a9;
  --ink-dim:#8c8a83;

  /* Akzente */
  --red:#ff3b3e;
  --red-deep:#cc1417;
  --gold:#e9b44c;
  --green:#3fd08a;
  --blue:#5b9bff;
  --violet:#a374ff;

  /* Form */
  --r-lg:20px; --r-md:14px; --r-sm:10px; --r-pill:100px;
  --rail:82px;
  --shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -30px rgba(0,0,0,.9);

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font:400 100%/1.5 var(--font);
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
/* Ruhiger Farbschimmer im Hintergrund, keine Schleife. Schwächer als auf
   Schwarz: auf dem hellen Grund mischt sich das Rot sonst zu Braun. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 45% at 12% 0%, rgba(204,20,23,.10), transparent 70%),
    radial-gradient(50% 40% at 92% 8%, rgba(91,155,255,.06), transparent 70%),
    radial-gradient(70% 50% at 50% 100%, rgba(163,116,255,.05), transparent 70%);
}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
b{font-weight:600}
.dim{color:var(--ink-dim);font-weight:400}

/* ── Schiene ─────────────────────────────────────────── */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:40;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:18px 0 14px;
  /* Eine Spur dunkler als --bg, damit die Schiene als eigene Ebene lesbar
     bleibt — aber im selben warmen Ton, nicht als schwarzer Balken. */
  background:rgba(28,28,26,.72);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-right:1px solid var(--hair);
}
.rail__mark{margin-bottom:20px}
.rail__cube{
  display:block;width:26px;height:26px;border-radius:7px;
  background:linear-gradient(145deg,#e04043 0%,var(--red-deep) 46%,#a81114 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 8px 20px -8px var(--red-deep);
}
.rail__spacer{flex:1}
.rail__item{
  width:62px;padding:9px 0 7px;border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  color:var(--ink-dim);
  transition:color 140ms ease, background 140ms ease;
}
.rail__item span:last-child{font-size:10.5px;letter-spacing:.01em;font-weight:500}
.rail__item:hover{color:var(--ink-soft);background:var(--surface)}
.rail__item:active{transform:scale(.94)}
.rail__item.is-active{color:var(--ink);background:var(--surface-2)}
.rail__item.is-active svg{stroke:var(--red);filter:drop-shadow(0 0 8px rgba(255,59,62,.55))}
.rail__me{margin-top:6px}

/* ── Bühne ───────────────────────────────────────────── */
.stage{position:relative;z-index:1;margin-left:var(--rail);height:100vh;overflow:hidden}
.view{display:none;height:100vh;flex-direction:column}
.view.is-active{display:flex}

.topbar{
  flex:none;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:26px 34px 18px;
  border-bottom:1px solid var(--hair);
}
.topbar h1{font-size:26px;font-weight:600;letter-spacing:-.022em;line-height:1.1}
.sub{margin-top:5px;font-size:13px;color:var(--ink-soft)}
.topbar__actions{display:flex;align-items:center;gap:10px}
.live{color:var(--green)}
.live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px;box-shadow:0 0 8px var(--green)}

.btn{
  padding:9px 15px;border-radius:var(--r-pill);font-size:13px;font-weight:550;letter-spacing:-.005em;
  background:linear-gradient(180deg,#e04043,var(--red-deep));
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 8px 20px -10px var(--red-deep);
  transition:transform 110ms ease, filter 140ms ease;
}
.btn:hover{filter:brightness(1.09)}
.btn:active{transform:scale(.965)}
.btn--ghost{background:var(--surface-2);box-shadow:0 0 0 1px var(--hair) inset;color:var(--ink-soft)}
.btn--ghost:hover{color:var(--ink)}
.btn--wide{width:100%;margin-top:10px;justify-content:center}

.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:11px;width:15px;height:15px;color:var(--ink-dim)}
.search input{
  width:270px;padding:9px 14px 9px 34px;border:0;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:0 0 0 1px var(--hair) inset;font-size:13px;
  transition:box-shadow 160ms ease, background 160ms ease;
}
.search input:focus{outline:0;background:var(--surface-2);box-shadow:0 0 0 1px var(--hair-2) inset,0 0 0 3px rgba(255,59,62,.14)}
.search input::placeholder{color:var(--ink-dim)}

/* ── Panels ──────────────────────────────────────────── */
.panel{
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  padding:20px 22px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel__head h2{font-size:14px;font-weight:600;letter-spacing:-.008em}
.eyebrow{font-size:10.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.chip{
  padding:3px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:600;
  background:var(--surface-2);box-shadow:0 0 0 1px var(--hair) inset;color:var(--ink-soft);
}
.chip--warn{color:var(--gold);box-shadow:0 0 0 1px rgba(233,180,76,.3) inset;background:rgba(233,180,76,.1)}
.chip--bad{color:var(--red);box-shadow:0 0 0 1px rgba(255,59,62,.3) inset;background:rgba(255,59,62,.1)}
.chip--good{color:var(--green);box-shadow:0 0 0 1px rgba(63,208,138,.3) inset;background:rgba(63,208,138,.1)}

/* ── Mission ─────────────────────────────────────────── */
.mission{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:18px;padding:20px 34px 28px;overflow-y:auto}
.mission__main,.mission__side{display:flex;flex-direction:column;gap:18px;min-width:0}

.panel--star{position:relative;overflow:hidden;padding:26px 26px 22px}
.star__glow{
  position:absolute;inset:-40% -10% auto -10%;height:200%;
  background:radial-gradient(45% 42% at 22% 26%,rgba(255,59,62,.3),transparent 68%);
  pointer-events:none;
}
.star__num{
  margin:8px 0 2px;font-size:clamp(56px,7.2vw,92px);line-height:1;font-weight:700;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;
  display:flex;gap:1px;
}
.star__num .d{display:inline-block;overflow:hidden;height:1em}
.star__num .d u{display:block;text-decoration:none;will-change:transform}
.star__num .sep{width:.24em}
.star__unit{font-size:14px;color:var(--ink-soft);font-weight:500}
.star__bar{height:5px;border-radius:var(--r-pill);background:var(--surface-2);margin:18px 0 10px;overflow:hidden}
.star__bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--red-deep),var(--red));box-shadow:0 0 14px rgba(255,59,62,.6)}
.star__foot{font-size:12.5px;color:var(--ink-soft)}

/* Claudio und David nebeneinander — wer wie weit ist, soll man sehen,
   ohne zu wechseln. */
.spieler{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:18px}

.goals{display:flex;flex-direction:column;gap:15px}
.goal__top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:7px}
.goal__val{font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.goal__val b{color:var(--ink);font-size:15px}
.seg{display:flex;gap:3px}
.seg i{flex:1;height:7px;border-radius:2px;background:var(--surface-2);transition:background 300ms ease,box-shadow 300ms ease}
.seg i.on{background:var(--c);box-shadow:0 0 10px -1px var(--c)}

.feed{list-style:none;display:flex;flex-direction:column;gap:2px}
.feed li{display:flex;gap:12px;align-items:flex-start;padding:9px 10px;border-radius:var(--r-sm);transition:background 140ms ease}
.feed li:hover{background:var(--surface)}
.feed .dot{margin-top:6px;width:7px;height:7px;border-radius:50%;flex:none;background:var(--c);box-shadow:0 0 9px -1px var(--c)}
.feed p{font-size:13px;line-height:1.45}
.feed .when{font-size:11.5px;color:var(--ink-dim);margin-top:2px}

/* ── Spieler ─────────────────────────────────────────── */
.panel--player{background:linear-gradient(160deg,rgba(233,180,76,.09),var(--surface) 55%);border-color:rgba(233,180,76,.16)}
.player{display:flex;gap:15px;align-items:center}
.ring{
  --p:0;position:relative;flex:none;width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(var(--gold) calc(var(--p)*360deg), rgba(255,255,255,.09) 0);
  transition:background 500ms cubic-bezier(.16,1,.3,1);
}
.ring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#302f2c}
.ring i{position:relative;z-index:1;font-style:normal;font-size:15px;font-weight:650;letter-spacing:.01em}
.ring--sm{width:30px;height:30px}
.ring--sm::after{inset:2.5px}
.ring--sm i{font-size:10px}
.player__name{font-size:17px;font-weight:600;letter-spacing:-.015em}
.player__lvl{font-size:12.5px;color:var(--gold);margin-top:1px}
.player__xp{font-size:12px;color:var(--ink-dim);margin-top:4px;font-variant-numeric:tabular-nums}

.streak{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}
.streak__dots{display:flex;gap:5px;margin:9px 0 8px}
.streak__dots i{flex:1;height:22px;border-radius:4px;background:var(--surface-2)}
.streak__dots i.on{background:linear-gradient(180deg,var(--gold),#c98f28);box-shadow:0 0 10px -2px var(--gold)}
.streak__dots i.now{outline:1.5px solid var(--gold);outline-offset:2px}
.streak__txt{font-size:12.5px;color:var(--ink-soft)}

/* ── Quests ──────────────────────────────────────────── */
.quests{display:flex;flex-direction:column;gap:8px}
.quest{
  display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border-radius:var(--r-md);
  background:var(--surface);box-shadow:0 0 0 1px var(--hair) inset;
  transition:transform 140ms ease, box-shadow 160ms ease, opacity 240ms ease;
  cursor:pointer;
}
.quest:hover{box-shadow:0 0 0 1px var(--hair-2) inset}
.quest:active{transform:scale(.985)}
.quest.is-done{opacity:.4}
.quest.is-done .quest__t{text-decoration:line-through}
.quest__box{
  flex:none;width:17px;height:17px;margin-top:1px;border-radius:6px;
  box-shadow:0 0 0 1.5px var(--hair-2) inset;display:grid;place-items:center;
  transition:background 180ms ease, box-shadow 180ms ease;
}
.quest.is-done .quest__box{background:var(--green);box-shadow:none}
.quest__box svg{width:11px;height:11px;stroke:#0b0b0e;stroke-width:2.6;opacity:0;transition:opacity 140ms ease}
.quest.is-done .quest__box svg{opacity:1}
.quest__t{font-size:12.5px;line-height:1.4;font-weight:500}
.quest__m{font-size:11px;color:var(--ink-dim);margin-top:3px;display:flex;gap:8px;align-items:center}
.quest__xp{margin-left:auto;flex:none;font-size:11px;font-weight:650;color:var(--gold);font-variant-numeric:tabular-nums}
.quest.is-late .quest__m{color:var(--red)}

/* ── Auszeichnungen ──────────────────────────────────── */
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px}
.badge{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:default}
.badge__m{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:radial-gradient(120% 120% at 30% 20%,#4a4944,#2a2a26);
  box-shadow:0 0 0 1px var(--hair) inset;
  transition:transform 200ms cubic-bezier(.16,1,.3,1);
}
.badge.on .badge__m,.bcard.on .badge__m{
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,.5), transparent 52%),
    conic-gradient(from 210deg,#f6d78a,#c98f28,#f6d78a,#a97417,#f6d78a);
  box-shadow:0 0 0 1px rgba(255,255,255,.3) inset, 0 6px 18px -8px var(--gold);
}
.badge.on:hover .badge__m{transform:translateY(-3px) rotate(-4deg)}
.badge__m svg{width:21px;height:21px;color:var(--ink-dim);stroke-width:1.8}
.badge.on .badge__m svg,.bcard.on .badge__m svg{color:#2a1c05;stroke-width:2}
.badge__t{font-size:9.5px;line-height:1.25;color:var(--ink-dim);letter-spacing:-.002em}
.badge.on .badge__t{color:var(--ink-soft)}

/* ── Board ───────────────────────────────────────────── */
.board{flex:1;display:flex;gap:14px;padding:18px 34px 26px;overflow-x:auto;overflow-y:hidden}
.legend{display:inline-flex;align-items:center;gap:5px;color:var(--ink-dim)}
.legend i{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 9px -1px var(--gold)}
.col{flex:none;width:252px;display:flex;flex-direction:column;min-height:0}
.col__head{display:flex;align-items:center;gap:8px;padding:0 4px 10px}
.col__dot{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px -1px var(--c)}
.col__name{font-size:12.5px;font-weight:600;letter-spacing:-.005em}
.col__n{margin-left:auto;font-size:11px;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.col__body{
  flex:1;min-height:0;overflow-y:auto;padding:6px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.022);border:1px solid var(--hair);
  display:flex;flex-direction:column;gap:7px;
  transition:background 180ms ease, border-color 180ms ease;
}
.col.is-target .col__body{background:rgba(255,59,62,.07);border-color:rgba(255,59,62,.4)}
.col__body::-webkit-scrollbar,.board::-webkit-scrollbar,.mission::-webkit-scrollbar,.wrap::-webkit-scrollbar,.check__phases::-webkit-scrollbar,.sheet__body::-webkit-scrollbar,.modal__list::-webkit-scrollbar{width:8px;height:8px}
.col__body::-webkit-scrollbar-thumb,.board::-webkit-scrollbar-thumb,.mission::-webkit-scrollbar-thumb,.wrap::-webkit-scrollbar-thumb,.check__phases::-webkit-scrollbar-thumb,.sheet__body::-webkit-scrollbar-thumb,.modal__list::-webkit-scrollbar-thumb{background:var(--hair);border-radius:99px}

.card{
  position:relative;padding:11px 12px;border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.035));
  box-shadow:0 0 0 1px var(--hair) inset, 0 4px 14px -10px #000;
  cursor:grab;touch-action:none;user-select:none;
  will-change:transform;
}
.card:active{cursor:grabbing}
.card.is-drag{z-index:60;cursor:grabbing;box-shadow:0 0 0 1px var(--hair-2) inset, 0 26px 50px -18px rgba(0,0,0,.85);}
/* «Liegt zu lange» wird markiert, nicht zurückgenommen — ein Lead, der
   Aufmerksamkeit braucht, darf nicht blasser sein als einer, der ruht. */
.card.is-stale{box-shadow:0 0 0 1px rgba(233,180,76,.3) inset, 0 4px 14px -10px #000}
.card.is-stale::after{
  content:"";position:absolute;top:11px;right:11px;width:6px;height:6px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 9px -1px var(--gold);
}
.card.is-stale .card__n{padding-right:16px}
.card__n{font-size:12.5px;font-weight:600;line-height:1.3;letter-spacing:-.008em;padding-right:6px}
.card__b{font-size:10.5px;color:var(--ink-dim);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card__f{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:10px;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.card__ma{color:var(--ink-soft);font-weight:600}
.tick{padding:1.5px 6px;border-radius:5px;font-weight:600;font-size:9.5px;letter-spacing:.01em}
.tick--crm{background:rgba(163,116,255,.16);color:#c3a3ff}
.tick--ict{background:rgba(91,155,255,.14);color:#93b8ff}
.card__ag{margin-left:auto;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:8.5px;font-weight:650;background:var(--surface-2);box-shadow:0 0 0 1px var(--hair) inset;color:var(--ink-soft)}
.ph{border-radius:var(--r-md);border:1.5px dashed rgba(255,59,62,.45);background:rgba(255,59,62,.05)}

/* ── Check ───────────────────────────────────────────── */
.clock{font:600 15px/1 var(--mono);padding:8px 12px;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:0 0 0 1px var(--hair) inset;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.clock.run{color:var(--green);box-shadow:0 0 0 1px rgba(63,208,138,.35) inset}
.check{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:18px;padding:20px 34px 28px;overflow:hidden}
.check__phases{overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:4px}
.check__side{display:flex;flex-direction:column;gap:18px;overflow-y:auto}

.phase{
  border-radius:var(--r-lg);border:1px solid var(--hair);background:var(--surface);
  overflow:hidden;transition:border-color 260ms ease, background 260ms ease;
}
.phase.is-now{border-color:rgba(255,59,62,.42);background:rgba(255,59,62,.05)}
.phase.is-done{opacity:.62}
.phase__head{display:flex;align-items:center;gap:13px;padding:15px 18px;cursor:pointer}
.phase__no{
  flex:none;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:650;background:var(--surface-2);box-shadow:0 0 0 1px var(--hair) inset;color:var(--ink-soft);
}
.phase.is-now .phase__no{background:linear-gradient(180deg,#e04043,var(--red-deep));color:#fff;box-shadow:0 0 16px -4px var(--red)}
.phase.is-done .phase__no{background:var(--green);color:#0b0b0e}
.phase__t{font-size:14px;font-weight:600;letter-spacing:-.01em}
.phase__w{font-size:11.5px;color:var(--ink-dim);margin-top:2px}
.phase__min{margin-left:auto;font:600 11.5px/1 var(--mono);color:var(--ink-dim);flex:none}
.phase__bar{height:2px;background:var(--surface-2)}
.phase__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red-deep),var(--red));box-shadow:0 0 10px var(--red)}
.phase__body{display:none;padding:2px 18px 18px 58px}
.phase.is-now .phase__body{display:block}
.ask{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;transition:background 140ms ease}
.ask:hover{background:var(--surface)}
.ask__box{flex:none;width:15px;height:15px;margin-top:3px;border-radius:5px;box-shadow:0 0 0 1.5px var(--hair-2) inset;display:grid;place-items:center;transition:background 160ms ease}
.ask.on .ask__box{background:var(--red)}
.ask__box svg{width:10px;height:10px;stroke:#fff;stroke-width:2.8;opacity:0;transition:opacity 130ms}
.ask.on .ask__box svg{opacity:1}
.ask p{font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
.ask.on p{color:var(--ink-dim);text-decoration:line-through}
.note{width:100%;margin-top:10px;padding:11px 13px;border:0;border-radius:var(--r-md);background:rgba(0,0,0,.18);box-shadow:0 0 0 1px var(--hair) inset;font-size:12.5px;line-height:1.5;resize:vertical;min-height:64px;font-family:var(--font)}
.note:focus{outline:0;box-shadow:0 0 0 1px var(--hair-2) inset,0 0 0 3px rgba(255,59,62,.13)}
.note::placeholder{color:var(--ink-dim)}

.cases{display:flex;flex-direction:column;gap:8px}
.case{padding:11px 12px;border-radius:var(--r-md);background:var(--surface);box-shadow:0 0 0 1px var(--hair) inset}
.case__t{font-size:12.5px;font-weight:600;line-height:1.35}
.case__calc{font:500 11px/1.4 var(--mono);color:var(--ink-dim);margin-top:5px}
.case__h{float:right;font-size:12px;font-weight:650;color:var(--green);font-variant-numeric:tabular-nums}
.sum{margin-top:16px;padding-top:15px;border-top:1px solid var(--hair)}
.sum__num{font-size:30px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:5px 0 3px}
.sum__num span{font-size:13px;font-weight:500;color:var(--ink-soft);letter-spacing:0}
.panel--rules{background:linear-gradient(160deg,rgba(255,59,62,.07),var(--surface) 60%);border-color:rgba(255,59,62,.16)}
.rules{list-style:none;counter-reset:r;display:flex;flex-direction:column;gap:9px}
.rules li{counter-increment:r;position:relative;padding-left:24px;font-size:12px;line-height:1.45;color:var(--ink-soft)}
.rules li::before{content:counter(r);position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--surface-2);box-shadow:0 0 0 1px var(--hair) inset;font-size:9.5px;font-weight:650;display:grid;place-items:center;color:var(--ink-soft)}
.rules b{color:var(--ink)}

/* ── Wrap / Tabellen / Docs / Timeline ──────────────── */
.wrap{flex:1;overflow-y:auto;padding:20px 34px 30px;display:flex;flex-direction:column;gap:18px}
.tablewrap{border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:left;padding:11px 16px;font-size:10.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);background:rgba(0,0,0,.16)}
.tbl td{padding:12px 16px;border-top:1px solid var(--hair)}
.tbl tr:hover td{background:var(--surface)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.st{padding:3px 9px;border-radius:var(--r-pill);font-size:10.5px;font-weight:600}
.st--idee{background:var(--surface-2);color:var(--ink-soft)}
.st--spec{background:rgba(91,155,255,.15);color:#93b8ff}
.st--bau{background:rgba(233,180,76,.14);color:var(--gold)}
.st--prod{background:rgba(63,208,138,.14);color:var(--green)}

.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.doc{padding:18px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--hair);transition:transform 200ms cubic-bezier(.16,1,.3,1),border-color 200ms ease;cursor:pointer}
.doc:hover{transform:translateY(-3px);border-color:var(--hair-2)}
.doc:active{transform:translateY(-1px) scale(.99)}
.doc__i{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--surface-2);margin-bottom:13px;color:var(--c)}
.doc__t{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.doc__d{font-size:11.5px;color:var(--ink-dim);margin-top:5px;line-height:1.45}
.doc__m{font-size:10.5px;color:var(--ink-dim);margin-top:11px;padding-top:10px;border-top:1px solid var(--hair)}
/* Hochgeladenes: gestrichelter Rand statt eigener Farbe — man sieht sofort,
   was dazugelegt wurde, ohne dass das Regal bunt wird. */
.doc--eigen{border-style:dashed}
.wis__hint{font-size:11.5px;color:var(--ink-dim);margin-top:18px;line-height:1.5}
.wis__hint b{color:var(--ink-soft);font-weight:600}
/* Die Ablagefläche ist die ganze Ansicht, nicht ein kleines Kästchen —
   beim Ziehen zielt niemand gern. */
.wis--drop .docs{outline:2px dashed var(--hair-2);outline-offset:12px;border-radius:var(--r-lg)}
.wis--drop .wis__hint{color:var(--ink-soft)}

.timeline{position:relative;padding:6px 0 6px 22px}
.timeline::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:1.5px;background:linear-gradient(180deg,var(--red),rgba(255,255,255,.1))}
.tl{position:relative;padding:12px 0}
.tl::before{content:"";position:absolute;left:-21.5px;top:17px;width:11px;height:11px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px var(--c)}
.tl.done::before{background:var(--c)}
.tl__d{font:600 11px/1 var(--mono);color:var(--ink-dim)}
.tl__t{font-size:13.5px;font-weight:600;margin-top:5px;letter-spacing:-.01em}
.tl__x{font-size:12px;color:var(--ink-soft);margin-top:3px}
.opens{list-style:none;display:flex;flex-direction:column;gap:1px}
.opens li{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:var(--r-sm);font-size:12.5px}
.opens li:hover{background:var(--surface)}
.opens .due{margin-left:auto;font:600 11px/1 var(--mono);color:var(--ink-dim);flex:none}
.opens li.late .due{color:var(--red)}
.opens li.late::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 9px var(--red);flex:none}
.opens li:not(.late)::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hair-2);flex:none}

.profile{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;align-items:start}
.profile .panel--wide{grid-column:1/-1}

.bwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:10px}
.bcard{display:flex;gap:13px;align-items:flex-start;padding:13px;border-radius:var(--r-md);
  background:rgba(255,255,255,.02);border:1px solid var(--hair)}
.bcard.on{background:linear-gradient(150deg,rgba(233,180,76,.09),rgba(255,255,255,.02) 60%);
  border-color:rgba(233,180,76,.22)}
.bcard .badge__m{flex:none;width:40px;height:40px}
.bcard__t{font-weight:650;font-size:13px;letter-spacing:-.005em}
.bcard.on .bcard__t{color:var(--gold)}
.bcard__w{font-size:11.5px;line-height:1.45;color:var(--ink-soft);margin-top:2px}
.bcard__am{font:500 10.5px/1 var(--mono);color:var(--ink-dim);margin-top:6px;letter-spacing:.02em}

.xplog{list-style:none;display:flex;flex-direction:column;gap:1px}
.xplog li{display:flex;gap:14px;align-items:center;padding:9px 12px;border-radius:var(--r-sm);font-size:12.5px}
.xplog li:hover{background:var(--surface)}
.xplog__d{font:600 11px/1 var(--mono);color:var(--ink-dim);flex:none;width:48px}
.xplog__t{flex:1}
.xplog__x{font:700 12px/1 var(--mono);color:var(--gold);flex:none}
.xplog__x.neg{color:var(--red)}

/* Plan: Zeitachse und offene Punkte nebeneinander, sobald Platz da ist */
.plan{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@media (min-width:1180px){
  /* Die Zeitachse braucht keine volle Breite — die offenen Punkte
     stehen daneben statt am anderen Bildschirmrand. */
  .plan{grid-template-columns:minmax(0,720px) 400px;justify-content:start}
  .plan .panel--open{position:sticky;top:18px}
}

/* ── Dossier-Blatt ──────────────────────────────────── */
.scrim{
  position:fixed;inset:0;z-index:50;background:rgba(18,18,16,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity 260ms ease;
}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;top:0;right:0;bottom:0;width:min(560px,92vw);z-index:51;
  background:rgba(44,44,41,.92);
  backdrop-filter:blur(34px) saturate(180%);-webkit-backdrop-filter:blur(34px) saturate(180%);
  border-left:1px solid var(--hair-2);
  box-shadow:-40px 0 90px -40px rgba(0,0,0,.9);
  transform:translate3d(100%,0,0);
  display:flex;flex-direction:column;
  will-change:transform;touch-action:none;
}
.sheet__grab{flex:none;height:26px;display:grid;place-items:center;cursor:grab}
.sheet__grab span{width:3px;height:34px;border-radius:99px;background:var(--hair-2)}
.sheet__grab{position:absolute;left:0;top:0;bottom:0;width:22px;height:auto}
.sheet__body{flex:1;overflow-y:auto;padding:26px 30px 40px 34px}

.dh{display:flex;gap:14px;align-items:flex-start;margin-bottom:6px}
.dh h2{font-size:21px;font-weight:650;letter-spacing:-.022em;line-height:1.2}
.dh__close{margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);box-shadow:0 0 0 1px var(--hair) inset;color:var(--ink-soft)}
.dh__close:active{transform:scale(.92)}
.dbranche{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:18px}
.dstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}
.dstat{padding:11px;border-radius:var(--r-md);background:var(--surface);box-shadow:0 0 0 1px var(--hair) inset;text-align:center}
.dstat b{display:block;font-size:19px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dstat span{font-size:9.5px;color:var(--ink-dim);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.dsec{margin-bottom:22px}
.dsec h3{font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}
.dsec ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.dsec li{position:relative;padding-left:15px;font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
.dsec li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--hair-2)}
.dsec--work li::before{background:var(--red)}
.dsec p{font-size:12.5px;line-height:1.6;color:var(--ink-soft)}
.quelle{margin-top:7px;padding:9px 11px;border-radius:var(--r-sm);background:rgba(0,0,0,.18);font-size:10.5px;line-height:1.5;color:var(--ink-dim);border-left:2px solid var(--hair-2)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{padding:4px 10px;border-radius:var(--r-pill);font-size:11px;background:var(--surface-2);box-shadow:0 0 0 1px var(--hair) inset;color:var(--ink-soft)}
.dact{display:flex;gap:8px;margin:4px 0 22px}

/* ── Halo-Suche ─────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:70;display:none;align-items:flex-start;justify-content:center;padding-top:14vh;background:rgba(18,18,16,.6);backdrop-filter:blur(5px)}
.modal.on{display:flex}
.modal__box{width:min(560px,92vw);border-radius:var(--r-lg);overflow:hidden;background:rgba(45,45,42,.97);border:1px solid var(--hair-2);box-shadow:0 40px 100px -30px rgba(0,0,0,.9);will-change:transform,opacity}
.modal__head{display:flex;align-items:center;gap:11px;padding:15px 17px;border-bottom:1px solid var(--hair)}
.modal__head svg{color:var(--ink-dim);flex:none}
.modal__head input{flex:1;background:none;border:0;font-size:15px}
.modal__head input:focus{outline:0}
kbd{font:500 10px/1 var(--mono);padding:4px 6px;border-radius:5px;background:var(--surface-2);box-shadow:0 0 0 1px var(--hair) inset;color:var(--ink-dim)}
.modal__list{max-height:min(420px,52vh);overflow-y:auto;padding:7px}
.hres{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-md);cursor:pointer}
.hres:hover,.hres.sel{background:var(--surface-2)}
.hres__n{font-size:13px;font-weight:550}
.hres__m{font-size:11px;color:var(--ink-dim);margin-top:2px}
.hres__add{margin-left:auto;flex:none;font-size:11px;font-weight:600;color:var(--red);opacity:0}
.hres:hover .hres__add,.hres.sel .hres__add{opacity:1}
.modal__foot{padding:11px 17px;border-top:1px solid var(--hair);font-size:11px;color:var(--ink-dim)}

/* ── Meldungen ──────────────────────────────────────── */
.toasts{position:fixed;right:26px;bottom:26px;z-index:90;display:flex;flex-direction:column;gap:9px;align-items:flex-end;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:11px;padding:12px 17px;border-radius:var(--r-pill);
  background:rgba(45,45,42,.95);border:1px solid var(--hair-2);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.9);
  backdrop-filter:blur(20px);will-change:transform,opacity;
}
.toast--xp{border-color:rgba(233,180,76,.45);background:linear-gradient(180deg,rgba(233,180,76,.16),rgba(45,45,42,.95))}
.toast__i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--surface-2)}
.toast--xp .toast__i{background:linear-gradient(180deg,#f6d78a,#c98f28);color:#2a1c05}
.toast--warn{border-color:rgba(214,122,90,.45)}
.toast--warn .toast__i{background:rgba(214,122,90,.22);color:#e0a08a}
.toast__t{font-size:13px;font-weight:600;letter-spacing:-.008em}
.toast__s{font-size:11px;color:var(--ink-dim);margin-top:1px}

/* ── Anmeldung ───────────────────────────────────────
   Liegt über allem und wird von app.js weggenommen, sobald der Server
   die Sitzung bestätigt hat. Bis dahin ist von den Daten nichts zu sehen. */
/* Standardmässig zu. app.js macht sie auf, wenn der Server keine Sitzung
   kennt — wie .scrim.on und .modal.on auch. */
.login{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;
  padding:24px;background:var(--bg);
}
.login.on{display:grid}
.login::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(204,20,23,.2), transparent 70%),
    radial-gradient(50% 40% at 50% 100%, rgba(163,116,255,.08), transparent 70%);
}
.login__box{
  position:relative;width:min(360px,100%);display:flex;flex-direction:column;gap:7px;
  padding:32px 30px 26px;border-radius:var(--r-lg);
  background:rgba(45,45,42,.94);border:1px solid var(--hair);box-shadow:var(--shadow);
}
.login__mark{
  width:34px;height:34px;border-radius:10px;margin-bottom:14px;
  background:linear-gradient(160deg,var(--red),var(--red-deep));
  box-shadow:0 8px 22px -8px rgba(255,59,62,.8);
}
.login__box h1{font-size:19px;font-weight:650;letter-spacing:-.022em}
.login__box>.dim{font-size:12.5px;margin-bottom:18px}
.login__box label{font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);margin-top:9px}
.login__box input{
  padding:11px 13px;border-radius:var(--r-sm);font-size:14px;
  background:var(--surface);border:1px solid var(--hair);
}
.login__box input:focus{outline:0;border-color:var(--hair-2);background:var(--surface-2)}
.login__box .btn{margin-top:18px;justify-content:center}
.login__fehler{min-height:16px;font-size:12px;color:var(--red);margin-top:9px}

/* ── Formularfelder (Fall erfassen) ──────────────────── */
.modal__box--form{display:flex;flex-direction:column;gap:14px;padding-bottom:18px}
.modal__head--plain{padding-bottom:15px}
.modal__head--plain h2{flex:1;font-size:15px;font-weight:650;letter-spacing:-.015em}
.modal__box--form .feld,
.modal__box--form .fallStd,
.modal__box--form .modal__foot,
.modal__box--form .btn{margin:0 17px}
.modal__box--form .modal__foot{padding:11px 0 0;border-top:1px solid var(--hair)}
.modal__box--form .btn{margin-bottom:0;justify-content:center}
.feld{display:flex;flex-direction:column;gap:6px}
.feld label{font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
.feld input{
  padding:10px 12px;border-radius:var(--r-sm);font-size:14px;
  background:var(--surface);border:1px solid var(--hair);width:100%;
}
.feld input:focus{outline:0;border-color:var(--hair-2);background:var(--surface-2)}
.feld--zwei{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.feld--zwei>div{display:flex;flex-direction:column;gap:6px}
/* Das Ergebnis der Rechnung, nicht ein Eingabefeld — deshalb Mono und
   nicht anfassbar. Ein Feld «Stunden» gibt es bewusst nirgends. */
.fallStd{
  font:600 13px/1.4 var(--mono);color:var(--gold);
  padding:11px 13px;border-radius:var(--r-sm);
  background:rgba(233,180,76,.08);border:1px solid rgba(233,180,76,.2);
}
.fallStd.leer{color:var(--ink-dim);background:var(--surface);border-color:var(--hair);font-weight:400}

/* ── Auswahlliste (Kunde für den Check) ──────────────── */
.sel{
  appearance:none;-webkit-appearance:none;
  padding:7px 30px 7px 12px;border-radius:var(--r-pill);font-size:12.5px;
  background:var(--surface-2) no-repeat right 11px center/9px 6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%236d6b75' stroke-width='1.4'/%3E%3C/svg%3E");
  border:1px solid var(--hair);color:var(--ink);cursor:pointer;max-width:230px;
}
.sel:focus{outline:0;border-color:var(--hair-2)}
.sel option{background:#302f2c;color:var(--ink)}

/* ── Werkstatt: Status ändern ────────────────────────── */
#caseTable select.st{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding:3px 20px 3px 9px;border-radius:var(--r-pill);
  font:600 11px/1.5 var(--font);letter-spacing:.01em;
  background:var(--surface-2) no-repeat right 7px center/8px 5px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%236d6b75' stroke-width='1.4'/%3E%3C/svg%3E");
  border:1px solid transparent;
}
#caseTable select.st:focus{outline:0;border-color:var(--hair-2)}
#caseTable select.st option{background:#302f2c;color:var(--ink);font-weight:400}
.st--idee{color:var(--ink-soft)}
.st--spec{color:var(--blue);background-color:rgba(91,155,255,.14)}
.st--bau{color:var(--gold);background-color:rgba(233,180,76,.14)}
.st--prod{color:var(--green);background-color:rgba(63,208,138,.14)}

/* ── Dossier: Referenz, Notizen ──────────────────────── */
.dref{
  display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-soft);
  padding:10px 12px;border-radius:var(--r-sm);background:var(--surface);
  box-shadow:0 0 0 1px var(--hair) inset;cursor:pointer;margin-bottom:20px;
}
.dref input{accent-color:var(--red);width:15px;height:15px;cursor:pointer}
.notizen{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:10px}
.notizen li{padding:10px 12px;border-radius:var(--r-sm);background:var(--surface);border-left:2px solid var(--hair-2)}
.notizen p{font-size:12.5px;line-height:1.55;color:var(--ink-soft);margin-top:3px}
.notiz__m{font:600 10.5px/1 var(--mono);color:var(--ink-dim)}
.tick--halo{background:rgba(63,208,138,.15);color:#6fe0ab}
.tick--note{background:var(--surface-2);color:var(--ink-soft)}

/* Kunde ist schon in der Pipeline — sichtbar machen, statt ihn doppelt
   anlegen zu lassen. */
.hres--da{opacity:.5}
.hres--da .hres__add{display:none}

.opens li.erledigt{opacity:.42}
.opens li.erledigt span:not(.due){text-decoration:line-through}
.opens li.erledigt::before{background:var(--green)!important;box-shadow:none!important}
.opens li[data-id]{cursor:pointer}

/* Der Zustand liess sich nicht laden. Lieber diese Meldung als eine
   Oberfläche, die veraltete Zahlen zeigt. */
.fatal{
  padding:40px;text-align:center;font-size:14px;color:var(--ink-soft);
  line-height:1.7;grid-column:1/-1;
}

/* ── Zugänglichkeit ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:120ms !important}
  .sheet{transition:opacity 160ms ease}
  .doc:hover,.badge.on:hover .badge__m{transform:none}
}
@media (prefers-reduced-transparency: reduce){
  .rail,.sheet,.modal__box,.toast{backdrop-filter:none;-webkit-backdrop-filter:none}
  .rail{background:#1c1c1a}.sheet{background:#2a2a27}
  .panel{backdrop-filter:none;background:#2f2f2c}
}
@media (prefers-contrast: more){
  :root{--hair:rgba(255,255,255,.22);--hair-2:rgba(255,255,255,.4);--ink-soft:#d2d0c8;--ink-dim:#b0aea6}
}

/* ══════════ Kunden ══════════
   Bewusst eine Liste und kein Brett: hier wird gelesen, nicht sortiert.
   Die Karte zeigt vier belegbare Zahlen — nichts Geschätztes. */
.suche{
  width:280px;padding:9px 13px;border-radius:var(--r-pill);border:0;
  background:var(--surface);box-shadow:0 0 0 1px var(--hair) inset;
  font:400 13px/1 var(--font);color:var(--ink);
}
.suche::placeholder{color:var(--ink-dim)}
.suche:focus{outline:0;background:var(--surface-2);box-shadow:0 0 0 1px var(--hair-2) inset,0 0 0 3px rgba(255,59,62,.14)}

.filter{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.fchip{
  padding:6px 12px;border-radius:var(--r-pill);border:0;cursor:pointer;
  background:var(--surface);box-shadow:0 0 0 1px var(--hair) inset;
  font:500 11.5px/1.3 var(--font);color:var(--ink-soft);
  transition:color 140ms ease,background 140ms ease;
}
.fchip:hover{color:var(--ink);background:var(--surface-2)}
.fchip.on{color:var(--ink);background:rgba(255,59,62,.14);box-shadow:0 0 0 1px rgba(255,59,62,.34) inset}

.kdnlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.kdn{
  padding:15px 16px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--hair);cursor:pointer;
  transition:transform 200ms cubic-bezier(.16,1,.3,1),border-color 200ms ease;
}
.kdn:hover{transform:translateY(-2px);border-color:var(--hair-2)}
.kdn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.kdn__kopf{display:flex;align-items:baseline;gap:10px;justify-content:space-between}
.kdn__n{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.kdn__st{
  flex:none;font:600 10px/1 var(--font);text-transform:uppercase;letter-spacing:.05em;
  color:var(--c);padding:4px 8px;border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--c) 12%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent) inset;
}
.kdn__b{font-size:11.5px;color:var(--ink-dim);margin-top:6px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kdn__z{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.kdn__z span{
  font:500 10.5px/1 var(--mono);color:var(--ink-soft);
  padding:5px 8px;border-radius:6px;background:var(--surface-2);
}
.kdn__note{color:var(--blue)!important}
.kdn__q{color:var(--green)!important}
.kdn__q--nein{color:var(--ink-dim)!important}
/* Die erste Zeile aus «Wo Arbeit anfällt» — das ist der Aufhänger fürs
   Gespräch, deshalb steht sie auf der Karte und nicht erst im Dossier. */
.kdn__a{
  font-size:11.5px;color:var(--ink-soft);line-height:1.5;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--hair);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ══════════ Leser ══════════ */
.leser{
  position:fixed;inset:0;z-index:180;display:none;
  grid-template-rows:auto 1fr;background:var(--bg);
}
.leser.on{display:grid}
.leser__top{
  display:flex;align-items:center;gap:14px;padding:16px 26px;
  border-bottom:1px solid var(--hair);background:var(--bg-2);
}
.leser__top h2{font-size:16px;font-weight:650;letter-spacing:-.02em}
.leser__top .dim{font-size:11px;margin-top:2px}
.leser__top kbd{margin-left:auto}
.leser__zu{
  width:34px;height:34px;flex:none;border:0;border-radius:var(--r-sm);cursor:pointer;
  background:var(--surface);color:var(--ink-soft);display:grid;place-items:center;
}
.leser__zu:hover{background:var(--surface-2);color:var(--ink)}
.leser__zu svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.leser__body{display:grid;grid-template-columns:250px minmax(0,1fr);overflow:hidden}
.leser__toc{
  overflow-y:auto;padding:20px 12px 40px 22px;border-right:1px solid var(--hair);
  display:flex;flex-direction:column;gap:1px;
}
.toc{
  font-size:11.5px;color:var(--ink-dim);text-decoration:none;line-height:1.4;
  padding:5px 9px;border-radius:6px;transition:color 120ms ease,background 120ms ease;
}
.toc:hover{color:var(--ink);background:var(--surface)}
.toc--3{padding-left:20px;font-size:11px;opacity:.8}

/* Lesespalte. Maximal ~72 Zeichen — darüber verliert das Auge die Zeile.
   Heller als --ink-soft: das ist die einzige Fläche, an der jemand zwanzig
   Minuten am Stück liest. Nicht ganz --ink, sonst wirkt Fettdruck nicht mehr. */
.md{overflow-y:auto;padding:34px 40px 120px;max-width:820px;font-size:14px;line-height:1.68;color:#dcdad2}
.md h1{font-size:26px;letter-spacing:-.03em;color:var(--ink);margin:0 0 6px}
.md h2{font-size:18px;letter-spacing:-.02em;color:var(--ink);margin:36px 0 10px;padding-top:20px;border-top:1px solid var(--hair)}
.md h3{font-size:14.5px;color:var(--ink);margin:26px 0 8px}
.md h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-dim);margin:20px 0 6px}
.md p{margin:0 0 13px}
.md ul,.md ol{margin:0 0 15px;padding-left:22px}
.md li{margin-bottom:6px}
.md li::marker{color:var(--ink-dim)}
.md li.hk{list-style:none;position:relative}
.md li.hk::before{content:'○';position:absolute;left:-19px;color:var(--ink-dim)}
.md li.hk--ja::before{content:'●';color:var(--green)}
.md b{color:var(--ink);font-weight:620}
.md a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(91,155,255,.3)}
.md a:hover{border-bottom-color:var(--blue)}
.md code{font:500 12.5px/1.4 var(--mono);background:var(--surface-2);padding:2px 5px;border-radius:5px;color:var(--ink)}
.md pre{
  background:var(--bg-2);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:14px 16px;margin:0 0 15px;overflow-x:auto;
}
.md pre code{background:none;padding:0;font-size:12px;line-height:1.6;color:var(--ink-soft)}
.md blockquote{
  margin:0 0 15px;padding:10px 16px;border-left:2px solid var(--red);
  background:rgba(255,59,62,.05);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink);
}
.md hr{border:0;border-top:1px solid var(--hair);margin:26px 0}
.md table{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:12.5px}
.md th{
  text-align:left;font-weight:600;color:var(--ink-dim);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.05em;padding:8px 11px;border-bottom:1px solid var(--hair-2);
}
.md td{padding:9px 11px;border-bottom:1px solid var(--hair);vertical-align:top}
.md tbody tr:hover{background:var(--surface)}

@media (max-width:900px){
  .leser__body{grid-template-columns:1fr}
  .leser__toc{display:none}
  .md{padding:24px 20px 100px}
  .suche{width:170px}
}