/* ============================================================
   Vorgangssystem – "HUD" theme (dark, arc-reactor cyan).
   Same structure and legibility as the classic theme, restyled.
   Classic theme kept as app.classic.css.
   ============================================================ */
:root {
  --bg: #060a12;
  --bg2: #0a1120;
  --panel: rgba(13, 21, 38, 0.72);
  --panel-solid: #0d1526;
  --line: rgba(56, 189, 248, 0.18);
  --line-strong: rgba(56, 189, 248, 0.40);
  --ink: #d8ecf8;
  --muted: #7f9cb3;
  --cyan: #35d0ff;
  --cyan-soft: rgba(53, 208, 255, 0.14);
  --gold: #f5c451;
  --danger: #ff5d6c;
  --ok: #2fe3b0;
  --accent: #35d0ff;
  --brand: #35d0ff;
  --brand-dark: #1aa7d6;
  --shadow: 0 0 0 1px rgba(56,189,248,0.06), 0 8px 30px rgba(0,0,0,0.45);
  --glow: 0 0 18px rgba(53, 208, 255, 0.18);
  --radius: 6px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.5;
  background:
    radial-gradient(1200px 620px at 82% -12%, rgba(53,208,255,0.10), transparent 62%),
    radial-gradient(1000px 560px at -5% 112%, rgba(245,196,81,0.06), transparent 60%),
    var(--bg);
  min-height: 100vh;
}
/* faint HUD grid, fading out downward */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(53,208,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,208,255,0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse at 50% -10%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse at 50% -10%, #000 0%, transparent 78%);
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-shadow: 0 0 8px rgba(53,208,255,0.4); }
h1 { font-size: 1.5rem; margin: 0; letter-spacing: .01em; color: #eaf6fd; }
h2 {
  font-size: .95rem; margin: 0 0 .7rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--cyan); font-weight: 700;
  display: flex; align-items: center; gap: .5rem;
}
h2::before { content: ""; width: 8px; height: 8px; background: var(--cyan); box-shadow: var(--glow); transform: rotate(45deg); }
h3 { font-size: .82rem; margin: 1rem 0 .4rem; text-transform: uppercase; letter-spacing: .1em; color: #a9cfe4; }

/* Topbar */
.topbar {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 1.5rem;
  background: linear-gradient(180deg, rgba(10,17,32,0.95), rgba(10,17,32,0.75));
  border-bottom: 1px solid var(--line-strong);
  padding: 0 1.3rem; height: 62px;
  box-shadow: 0 1px 0 rgba(53,208,255,0.15), 0 8px 24px rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
}
.topbar .brand { display: flex; align-items: center; }
.topbar .brand img { height: 34px; display: block; filter: drop-shadow(0 0 10px rgba(53,208,255,0.35)); }
.topbar .brand .wordmark {
  margin-left: .8rem; padding-left: .8rem; border-left: 1px solid var(--line-strong);
  color: var(--cyan); font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
  font-size: .95rem; text-shadow: 0 0 12px rgba(53,208,255,0.4);
}
.topbar nav { display: flex; gap: .25rem; margin-right: auto; margin-left: 1rem; }
.topbar nav a {
  color: var(--muted); padding: .4rem .85rem; border-radius: 5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; border: 1px solid transparent;
}
.topbar nav a:hover { color: var(--cyan); background: var(--cyan-soft); text-decoration: none; }
.topbar nav a.active { color: var(--cyan); background: var(--cyan-soft); border-color: var(--line-strong); box-shadow: inset 0 0 12px rgba(53,208,255,0.12); }
.topbar .user { display: flex; align-items: center; gap: .9rem; color: var(--muted); font-size: .85rem; letter-spacing: .03em; }
.topbar .user span { color: var(--cyan); }
.topbar .user a { color: var(--muted); }
.topbar .user a:hover { color: var(--cyan); }

.container { position: relative; z-index: 1; max-width: 1760px; margin: 1.5rem auto; padding: 0 1.4rem; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.page-head .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.back { font-size: .8rem; color: var(--muted); display: inline-block; margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .08em; }

/* Cards with HUD corner brackets */
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.05rem 1.15rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.15rem;
  backdrop-filter: blur(4px);
}
.card::before, .card::after {
  content: ""; position: absolute; width: 13px; height: 13px; pointer-events: none;
  border-color: var(--cyan); opacity: .8;
}
.card::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; border-top-left-radius: var(--radius); }
.card::after { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; border-bottom-right-radius: var(--radius); }
.cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.15rem; align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

/* Buttons */
.btn {
  display: inline-block; padding: .45rem .95rem; border-radius: 5px;
  border: 1px solid var(--line-strong); background: rgba(53,208,255,0.05); color: var(--cyan);
  font-weight: 600; cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  transition: box-shadow .15s, background .15s, color .15s;
}
.btn:hover { background: var(--cyan-soft); box-shadow: var(--glow); text-decoration: none; }
.btn.primary { background: linear-gradient(180deg, #4ad8ff, #23b6e6); border-color: #6fe0ff; color: #04222e; text-shadow: none; }
.btn.primary:hover { box-shadow: 0 0 22px rgba(53,208,255,0.5); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--cyan); background: rgba(53,208,255,0.05); box-shadow: none; }

/* Filters */
.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; align-items: center; }
.filter input[type=search] { min-width: 250px; }
.filter select, .filter input, .filter button { font-size: .86rem; }

/* Tables — frosted light "glass" surface for maximum legibility */
.table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(246,251,255,0.95), rgba(229,243,251,0.90));
  border: 1px solid rgba(53,208,255,0.35);
  box-shadow: 0 10px 30px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.65), 0 0 22px rgba(53,208,255,0.10);
  backdrop-filter: blur(10px) saturate(1.15);
}
/* Light frosted surface applied to every grid table (also inside dark cards);
   list pages additionally get real backdrop-blur via .table-wrap. */
table.grid {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: linear-gradient(180deg, rgba(245,251,255,0.94), rgba(228,242,251,0.90));
  border: 1px solid rgba(53,208,255,0.30); border-radius: 8px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.table-wrap table.grid { background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; }
table.grid th, table.grid td { padding: .55rem .7rem; text-align: left; white-space: nowrap; }
table.grid th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: #0b5f7e;
  background: rgba(210,235,248,0.95); position: sticky; top: 0;
  border-bottom: 1px solid rgba(53,208,255,0.45);
}
table.grid td { color: #17323f; border-bottom: 1px solid rgba(18,44,62,0.12); }
table.grid tbody tr { transition: background .12s; }
table.grid tbody tr:hover { background: rgba(53,208,255,0.14); box-shadow: inset 3px 0 0 var(--cyan); }
table.grid tbody tr.row-link { cursor: pointer; }
table.grid td.num, table.grid th.num { text-align: right; }
table.grid td.num { color: #0f2a38; }
table.grid a { color: #0a6ea3; }
table.grid a:hover { text-shadow: none; }
table.grid .mono { color: #0c4c66; }
table.grid .muted { color: #5f7688; }
tr.overdue { background: rgba(255,93,108,0.14); }
tr.overdue:hover { background: rgba(255,93,108,0.22); box-shadow: inset 3px 0 0 var(--danger); }

/* Badge colours re-tuned for the light table surface */
table.grid .badge { background: rgba(255,255,255,0.55); }
table.grid .art-anfrage_rein { color: #155e93; }
table.grid .art-anfrage_raus { color: #0f7a63; }
table.grid .art-angebot_rein { color: #8a6000; }
table.grid .art-angebot_raus { color: #6b3fb0; }
table.grid .status-offen { color: #3f566a; }
table.grid .status-angeboten { color: #155e93; }
table.grid .status-in_verhandlung { color: #8a6000; }
table.grid .status-gewonnen { color: #0f7a53; }
table.grid .status-verloren { color: #c0334a; }
table.grid .status-geschlossen { color: #5b6b78; }
table.grid .seite-beschaffung { color: #0f7a53; }
table.grid .seite-absatz { color: #155e93; }
table.grid .rolle-kunde { color: #155e93; }
table.grid .rolle-lieferant { color: #8a6000; }
table.grid .hinweis-treffer { color: #0f7a53; background: rgba(47,227,176,0.20); box-shadow: none; }
table.grid .hinweis-bedarf_ohne_bezugsquelle { color: #c0334a; background: rgba(255,93,108,0.16); box-shadow: none; }
table.grid .hinweis-angebot_raus_ohne_bezug { color: #8a6000; background: rgba(245,196,81,0.22); }
table.grid .hinweis-ware_ohne_kunde { color: #155e93; background: rgba(53,208,255,0.16); }
table.grid .pill { background: rgba(53,208,255,0.22); color: #0b5f7e; box-shadow: none; border-color: rgba(53,208,255,0.5); }

table.mini { width: 100%; border-collapse: collapse; }
table.mini td { padding: .28rem .3rem; border-bottom: 1px solid var(--line); }
table.mini td.num { text-align: right; font-variant-numeric: tabular-nums; color: #eaf6fd; }

.mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .86rem; color: #bfe6f6; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
/* Helper captions (e.g. below tables) in a gold tone for better legibility */
p.muted, p.muted.small { color: #ecc45f; }
.small { font-size: .82rem; }
.center { text-align: center; }
.pre { white-space: pre-wrap; }
.nowrap { white-space: nowrap; }

/* Definition list */
dl.fields { display: grid; grid-template-columns: 140px 1fr; gap: .4rem .8rem; margin: 0; }
dl.fields dt { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
dl.fields dd { margin: 0; color: #e6f4fc; }

/* Badges (neon) */
.badge {
  display: inline-block; padding: .13rem .55rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
  border: 1px solid currentColor; background: rgba(255,255,255,0.02);
}
.pill { display: inline-block; min-width: 1.5rem; text-align: center; padding: .06rem .45rem; border-radius: 999px;
  background: rgba(53,208,255,0.15); color: var(--cyan); border: 1px solid var(--line-strong);
  font-size: .78rem; font-weight: 700; box-shadow: var(--glow); }

.art-anfrage_rein { color: #6bd0ff; }
.art-anfrage_raus { color: #35e3c0; }
.art-angebot_rein { color: #f5c451; }
.art-angebot_raus { color: #c79bff; }

.status-offen { color: #9fb6c8; }
.status-angeboten { color: #6bd0ff; }
.status-in_verhandlung { color: #f5c451; }
.status-gewonnen { color: #2fe3b0; }
.status-verloren { color: #ff5d6c; }
.status-geschlossen { color: #6d7f8f; }

.seite-beschaffung { color: #2fe3b0; }
.seite-absatz { color: #6bd0ff; }
.rolle-kunde { color: #6bd0ff; }
.rolle-lieferant { color: #f5c451; }

.hinweis-treffer { color: #2fe3b0; background: rgba(47,227,176,0.10); box-shadow: 0 0 14px rgba(47,227,176,0.18); }
.hinweis-bedarf_ohne_bezugsquelle { color: #ff6f7c; background: rgba(255,93,108,0.10); box-shadow: 0 0 14px rgba(255,93,108,0.15); }
.hinweis-angebot_raus_ohne_bezug { color: #f5c451; background: rgba(245,196,81,0.10); }
.hinweis-ware_ohne_kunde { color: #6bd0ff; background: rgba(53,208,255,0.10); }

.tag-overdue { color: var(--danger); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }
.hinweis-zeile { margin: .2rem 0 .6rem; }

/* Forms */
.vform .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1rem; }
.vform label { display: flex; flex-direction: column; gap: .28rem; font-size: .8rem; color: #c6ced8; text-transform: uppercase; letter-spacing: .04em; }
/* Standalone create/edit forms: half width for better focus (Vorgang form keeps its side-by-side layout). */
.container > form.vform { max-width: 880px; }
.vform label.span2 { grid-column: 1 / -1; }
/* Light input fields (same readable look as the glass tables) */
.vform input, .vform select, .vform textarea,
.filter input, .filter select {
  padding: .48rem .6rem; border: 1px solid rgba(53,208,255,0.45); border-radius: 5px;
  font-size: .92rem; color: #17323f; background: rgba(245,251,255,0.96);
  text-transform: none; letter-spacing: normal;
}
.vform input::placeholder, .filter input::placeholder, .vform textarea::placeholder { color: #6b8296; }
.vform input:focus, .vform select:focus, .vform textarea:focus,
.filter input:focus, .filter select:focus {
  outline: none; border-color: var(--cyan); background: #fff; box-shadow: 0 0 0 3px rgba(53,208,255,0.28);
}
select option { background: #fff; color: #17323f; }
.vform label.check { flex-direction: row; align-items: center; gap: .5rem; color: var(--ink); text-transform: none; }
.vform label.check input { width: auto; accent-color: var(--cyan); }
.vform input.readonly { background: #e3ecf3; color: #5f7688; border-style: dashed; }
.varid-auto { padding: .48rem .6rem; border: 1px dashed rgba(53,208,255,0.55); border-radius: 5px; background: rgba(245,251,255,0.92); min-height: 1.25rem; color: #0b5f7e; font-family: "SFMono-Regular", Consolas, monospace; }
td.ellip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.form-actions { margin-top: 1.1rem; display: flex; gap: .6rem; }
select option { background: #0b1424; color: var(--ink); }

.gegen-box { align-self: start; position: sticky; top: 1rem; }
.gegen-liste { list-style: none; padding: 0; margin: .4rem 0 0; }
.gegen-liste li { padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.linkbtn { background: none; border: none; color: var(--cyan); cursor: pointer; padding: 0 0 0 .5rem; font: inherit; }
.linkbtn:hover { text-decoration: underline; }

/* Login */
.login-card {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: min(360px, calc(100vw - 2rem));
  background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow), var(--glow);
  backdrop-filter: blur(6px);
}
.login-card::before, .login-card::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-color: var(--cyan);
}
.login-card::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.login-card::after { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
.login-logo { display: block; height: 44px; margin-bottom: 1rem; filter: drop-shadow(0 0 12px rgba(53,208,255,0.4)); }
.login-card h1 { font-size: 1.3rem; margin-bottom: .2rem; }
.login-card form { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.1rem; }
.login-card label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.login-card input { padding: .55rem .6rem; border: 1px solid rgba(53,208,255,0.45); border-radius: 5px; font-size: .95rem; background: rgba(245,251,255,0.96); color: #17323f; }
.login-card input:focus { outline: none; border-color: var(--cyan); background: #fff; box-shadow: 0 0 0 3px rgba(53,208,255,0.28); }

.fehler { color: #ffb3ba; background: rgba(255,93,108,0.12); border: 1px solid rgba(255,93,108,0.35); padding: .5rem .7rem; border-radius: 5px; font-size: .88rem; }
.info { background: rgba(53,208,255,0.10); color: #bfe6f6; border: 1px solid var(--line-strong); padding: .6rem .8rem; border-radius: 5px; margin-bottom: 1rem; }

/* Filled Art & Status badges: solid colour with white text (light + dark surfaces) */
.badge.art-anfrage_rein,  table.grid .art-anfrage_rein  { background: #2170b8; color: #fff; border-color: transparent; }
.badge.art-anfrage_raus,  table.grid .art-anfrage_raus  { background: #0f8266; color: #fff; border-color: transparent; }
.badge.art-angebot_rein,  table.grid .art-angebot_rein  { background: #b26a00; color: #fff; border-color: transparent; }
.badge.art-angebot_raus,  table.grid .art-angebot_raus  { background: #7c3aed; color: #fff; border-color: transparent; }

.badge.status-offen,          table.grid .status-offen          { background: #586a7b; color: #fff; border-color: transparent; }
.badge.status-angeboten,      table.grid .status-angeboten      { background: #2170b8; color: #fff; border-color: transparent; }
.badge.status-in_verhandlung, table.grid .status-in_verhandlung { background: #b26a00; color: #fff; border-color: transparent; }
.badge.status-gewonnen,       table.grid .status-gewonnen       { background: #0f7a50; color: #fff; border-color: transparent; }
.badge.status-verloren,       table.grid .status-verloren       { background: #c0334a; color: #fff; border-color: transparent; }
.badge.status-geschlossen,    table.grid .status-geschlossen    { background: #5b6570; color: #fff; border-color: transparent; }

/* Bereichsauswahl (area selector) */
.chooser { padding: 1.5rem 0 3rem; }
.chooser-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; }
.chooser-head h1 { margin-bottom: .2rem; }
.bereich-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .bereich-grid { grid-template-columns: 1fr; } }
.bereich-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .8rem;
  min-height: 290px; padding: 2rem 1.5rem; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--panel); box-shadow: var(--shadow); color: var(--ink); text-decoration: none;
  transition: transform .18s, box-shadow .18s, border-color .18s; backdrop-filter: blur(4px);
}
.bereich-tile:hover { transform: translateY(-4px); border-color: var(--cyan); box-shadow: var(--shadow), 0 0 26px rgba(53,208,255,0.22); text-decoration: none; }
.bereich-logo {
  background: #fff; border-radius: 14px; padding: 1.3rem 1.6rem; min-height: 130px; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.bereich-logo img { max-height: 96px; max-width: 100%; }
.bereich-logo img + .bereich-fallback { display: none; }
.bereich-fallback { font-size: 1.7rem; font-weight: 800; }
.ortho-fb { color: #1c6f83; } .ortho-fb span { color: #4aa7b8; font-weight: 500; }
.derma-fb { color: #1f8fc0; } .derma-fb span { color: #5bb8d8; font-weight: 400; font-size: .68em; letter-spacing: .22em; }
.bereich-name { font-size: 1.2rem; font-weight: 700; margin-top: .4rem; }
.bereich-desc { color: var(--muted); font-size: .86rem; }
/* Cross-area contact search on the area selector */
.ksuche { max-width: 720px; margin: 2.4rem auto 0; }
.ksuche-feld {
  width: 100%; padding: .85rem 1.1rem; font-size: 1rem; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: var(--shadow); backdrop-filter: blur(4px);
}
.ksuche-feld:focus { outline: none; border-color: var(--cyan); box-shadow: var(--shadow), 0 0 18px rgba(53,208,255,0.25); }
.ksuche-leer { color: var(--muted); text-align: center; margin-top: 1rem; font-size: .9rem; }
.ksuche-gruppen { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.ksuche-gruppe {
  background: var(--panel); border: 1px solid var(--line-strong); border-left-width: 3px;
  border-radius: 10px; padding: .8rem 1rem; box-shadow: var(--shadow);
}
.ksuche-gruppe.bereich-1 { border-left-color: #35d0ff; }
.ksuche-gruppe.bereich-2 { border-left-color: #4aa7b8; }
.ksuche-gruppe.bereich-3 { border-left-color: #5bb8d8; }
.ksuche-gruppe h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .5rem; }
.ksuche-anzahl {
  display: inline-block; margin-left: .4rem; padding: 0 .45rem; font-size: .72rem;
  border-radius: 9px; background: rgba(53,208,255,0.16); color: var(--cyan); font-weight: 700;
}
.ksuche-gruppe ul { list-style: none; margin: 0; padding: 0; }
.ksuche-gruppe li + li { border-top: 1px solid var(--line); }
.ksuche-gruppe li a {
  display: flex; flex-direction: column; gap: .1rem; padding: .5rem .3rem;
  color: var(--ink); text-decoration: none; border-radius: 6px;
}
.ksuche-gruppe li a:hover { background: rgba(53,208,255,0.08); }
.ksuche-titel { font-weight: 600; }
.ksuche-kontext { font-size: .82rem; color: var(--muted); }
.chooser-note { text-align: center; margin-top: 2rem; }
.platzhalter { text-align: center; padding: 3rem 2rem; max-width: 560px; margin: 1rem auto; }
.platzhalter .bereich-logo { max-width: 340px; margin: 0 auto 1.5rem; }
.platzhalter h1 { margin-bottom: .6rem; }

/* Ortho brand chip (logo designed for light background) */
.topbar .brand.ortho img { height: 30px; background: #fff; border-radius: 7px; padding: 4px 9px; filter: none; }

/* DERMA ONE brand chip (JPEG logo on light background) */
.topbar .brand.derma img { height: 30px; background: #fff; border-radius: 7px; padding: 4px 9px; filter: none; }

/* Kanban board — light Pipedrive look */
.kb-board {
  display: flex; gap: .7rem; overflow-x: auto; padding: 1rem;
  background: #e9ebee; border: 1px solid #dfe3e8; border-radius: 10px; align-items: flex-start;
}
.kb-col {
  flex: 0 0 262px; width: 262px; background: #f4f5f7; border: 1px solid #e1e4e8;
  border-radius: 8px; display: flex; flex-direction: column; max-height: calc(100vh - 250px);
}
.kb-col-head { padding: .55rem .75rem; border-bottom: 3px solid var(--stage, #cfd6dd); border-radius: 8px 8px 0 0; }
.kb-col-title { font-weight: 700; font-size: .88rem; color: #2a3b47; }
.kb-col-sub { font-size: .76rem; color: #7a8894; margin-top: .1rem; }
.kb-col-body { padding: .55rem; display: flex; flex-direction: column; gap: .55rem; overflow-y: auto; min-height: 60px; }
.kb-col-body.over { background: rgba(47,127,181,0.10); outline: 2px dashed #9fb6c8; outline-offset: -4px; }
.kb-card {
  background: #fff; color: #2a3b47; border: 1px solid #e3e7ea; border-top: 4px solid var(--stage, #cfd6dd);
  border-radius: 6px; padding: .55rem .65rem; box-shadow: 0 1px 2px rgba(20,40,60,0.10); cursor: grab;
}
.kb-card:hover { box-shadow: 0 3px 9px rgba(20,40,60,0.18); border-color: #cbd3da; }
.kb-card.dragging { opacity: .5; }
.kb-card-title { font-weight: 700; font-size: .88rem; line-height: 1.22; color: #1f2d3a; }
.kb-card-sub { font-size: .78rem; color: #55707f; margin-top: .15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-card-meta { font-size: .74rem; color: #7a8894; margin-top: .3rem; }
.kb-card-fach { font-size: .72rem; color: #2f7fb5; margin-top: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .55rem; }
.kb-bearb { font-size: .75rem; padding: .15rem .3rem; border: 1px solid #cbd3da; border-radius: 5px; background: #fff; color: #2a3b47; }
.kb-contact a { margin-left: .4rem; text-decoration: none; font-size: .95rem; color: #5a6b7a; }
.kb-contact a:hover { color: #2f7fb5; }
.kb-edit { font-weight: 700; }
.kb-newmail { margin-left: auto; color: #d24b5a; font-size: 1rem; line-height: 1; }
.kb-card-title a { color: inherit; text-decoration: none; }
.kb-card-title a:hover { color: #2f7fb5; text-decoration: underline; }

/* Ortho lead detail (Pipedrive-style, light) */
.pd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.pd-head-actions { display: flex; gap: .5rem; align-items: center; }
.pd-head-actions form { display: inline; margin: 0; }
.btn.win { background: #3fae62; border-color: #3fae62; color: #fff; }
.btn.lose { background: #d24b5a; border-color: #d24b5a; color: #fff; }
/* Soft-delete: outlined danger button (distinct from the solid "Verloren") */
.btn.danger { background: #fff; border-color: #d24b5a; color: #d24b5a; text-shadow: none; }
.btn.danger:hover { background: #d24b5a; color: #fff; box-shadow: none; }
.btn.small { padding: .28rem .6rem; font-size: .8rem; }
/* Banner shown on a deactivated (archived) lead's detail page */
.archiv-banner {
  margin: 0 0 1rem; padding: .7rem 1rem; border-radius: 8px;
  background: #fff6e6; border: 1px solid #e8c98a; color: #7a5e12; font-size: .9rem;
}

.stagebar { display: flex; gap: 2px; margin: 0 0 1.2rem; }
.stage-seg {
  flex: 1; border: none; cursor: pointer; padding: .55rem .4rem .55rem 1.2rem;
  background: #e4e7eb; color: #5a6b7a; font-weight: 600; font-size: .76rem; text-align: center;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
}
.stage-seg:first-child { padding-left: .6rem; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.stage-seg.done { background: #cfe8d8; color: #2e6b46; }
.stage-seg.current { background: #3fae62; color: #fff; }
.stage-seg:hover { filter: brightness(0.96); }

.pd-cols { display: grid; grid-template-columns: var(--pd-left, 360px) 16px 1fr; gap: 0; align-items: start; }
.pd-splitter { align-self: stretch; cursor: col-resize; position: relative; min-height: 40px; }
.pd-splitter::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: #d4dbe1; border-radius: 2px; }
.pd-splitter:hover::before, .pd-splitter.dragging::before { background: #2f7fb5; width: 3px; }
@media (max-width: 900px) { .pd-cols { grid-template-columns: 1fr; } .pd-splitter { display: none; } }
.rt-anhang { font-size: .8rem; color: #7a8894; display: flex; align-items: center; gap: .5rem; }
.rt-anhang input[type=file] { font-size: .8rem; color: #2a3b47; width: auto; background: transparent; border: none; padding: 0; }
.pd-panel { background: #fff; border: 1px solid #e3e7ea; border-radius: 8px; padding: 1rem 1.1rem; color: #2a3b47; box-shadow: 0 1px 3px rgba(20,40,60,.08); }
.pd-panel h2 { color: #1f2d3a; text-transform: none; letter-spacing: normal; font-size: 1rem; }
.pd-panel h2::before { display: none; }
.pd-panel h3 { color: #3a5364; text-transform: none; letter-spacing: normal; margin-top: 1.2rem; }
.pd-fields { display: grid; grid-template-columns: 130px 1fr; gap: .35rem .7rem; margin: 0; }
.pd-fields dt { color: #7a8894; font-size: .8rem; }
.pd-fields dd { margin: 0; color: #2a3b47; }
.pd-muted { color: #7a8894; }
.pd-kontakte { list-style: none; padding: 0; margin: .4rem 0 0; }
.pd-kontakte li { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid #eef1f3; }
.pd-linkbtn { background: none; border: none; color: #c0334a; cursor: pointer; font-size: .8rem; padding: 0; }
.pd-add summary { cursor: pointer; color: #1c6f9e; margin-top: .8rem; font-size: .85rem; }
.pd-panel a { color: #1c6f9e; }
.pd-panel a:hover { color: #12557a; }
.pd-empty { color: #aab4bd; }
.pd-pen {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  margin-left: .45rem; width: 20px; height: 20px; border-radius: 5px;
  background: #eef4f8; border: 1px solid #cfd9e1; color: #2f7fb5; cursor: pointer;
  font-size: .8rem; line-height: 1; padding: 0;
}
.pd-pen:hover { background: #2f7fb5; color: #fff; border-color: #2f7fb5; }
.pd-inline { width: 100%; background: #fff; border: 1px solid #2f7fb5; border-radius: 4px; padding: .25rem .4rem; font-size: .86rem; color: #2a3b47; }
.pd-bearb { background: #f7f9fb; border: 1px solid #d4dbe1; border-radius: 5px; padding: .25rem .4rem; color: #2a3b47; font-size: .86rem; }
.pd-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .6rem 0; }
.pd-panel input, .pd-panel select, .pd-panel textarea { background: #f7f9fb; border: 1px solid #d4dbe1; border-radius: 5px; padding: .4rem .5rem; color: #2a3b47; font-size: .86rem; width: 100%; }
.pd-note { display: flex; gap: .5rem; align-items: flex-start; margin: .6rem 0 1rem; }
.pd-note textarea { flex: 1; }
.timeline { border-left: 2px solid #e3e7ea; margin-left: .4rem; padding-left: 1rem; }
.tl-item { position: relative; padding: .5rem 0; }
.tl-dot { position: absolute; left: -1.45rem; top: .8rem; width: 9px; height: 9px; border-radius: 50%; background: #9fb6c8; border: 2px solid #fff; }
.tl-note .tl-dot { background: #f0b74e; }
.tl-phase .tl-dot { background: #3fae62; }
.tl-meta { font-size: .74rem; color: #7a8894; }
.tl-text { font-size: .88rem; color: #2a3b47; margin-top: .15rem; white-space: pre-wrap; }
.tl-text.tl-note { background: #fff8e6; border: 1px solid #f3e2b3; border-radius: 6px; padding: .5rem .6rem; }
.tl-email .tl-dot { background: #2f7fb5; }
.tl-text.tl-mail { background: #eef4fb; border: 1px solid #cfe0ee; border-radius: 6px; padding: .5rem .6rem; }
.pd-mailform { display: flex; flex-direction: column; gap: .5rem; }
.pd-mailfoot { display: flex; justify-content: space-between; align-items: center; }
.pd-von { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; color: #7a8894; }

/* Rich-text mail editor */
.rt-toolbar { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; padding: .3rem; background: #f0f3f6; border: 1px solid #d4dbe1; border-bottom: none; border-radius: 6px 6px 0 0; }
.rt-toolbar button { background: #fff; border: 1px solid #cbd3da; border-radius: 4px; width: 28px; height: 26px; cursor: pointer; color: #2a3b47; font-size: .85rem; padding: 0; }
.rt-toolbar button[data-cmd="insertUnorderedList"] { width: auto; padding: 0 .45rem; }
.rt-toolbar button:hover { background: #e6eef4; }
.rt-toolbar .rt-size { width: auto; padding: .2rem; border: 1px solid #cbd3da; border-radius: 4px; font-size: .8rem; background: #fff; color: #2a3b47; }
.rt-toolbar .rt-color { width: 28px; height: 26px; padding: 0; border: 1px solid #cbd3da; border-radius: 4px; background: #fff; cursor: pointer; }
.rt-editor { min-height: 120px; border: 1px solid #d4dbe1; border-radius: 0 0 6px 6px; padding: .5rem .6rem; background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; overflow: auto; }
.rt-editor:empty::before { content: attr(data-placeholder); color: #9aa4ae; }
.rt-editor:focus { outline: 2px solid #cfe4f5; }
.sig-preview summary { cursor: pointer; color: #1c6f9e; font-size: .82rem; margin-top: .2rem; }
.sig-iframe { width: 100%; height: 220px; border: 1px solid #e0e6ea; border-radius: 6px; margin-top: .4rem; background: #fff; }

/* Collapsible e-mail entries (timeline + mails list) */
details.tl-mailbox { border: 1px solid #cfe0ee; border-radius: 6px; background: #eef4fb; overflow: hidden; }
details.tl-mailbox > summary { cursor: pointer; padding: .45rem .6rem; font-size: .85rem; color: #1f2d3a; list-style: none; }
details.tl-mailbox > summary::-webkit-details-marker { display: none; }
details.tl-mailbox > summary::before { content: '▸'; color: #6a86a0; margin-right: .4rem; }
details.tl-mailbox[open] > summary::before { content: '▾'; }
.tl-mailbody { padding: .35rem .7rem .7rem; font-size: .85rem; color: #2a3b47; white-space: pre-wrap; border-top: 1px solid #dce8f2; }
.tl-unread-badge { display: inline-block; background: #d24b5a; color: #fff; font-size: .64rem; font-weight: 700; padding: .05rem .4rem; border-radius: 999px; margin-right: .45rem; text-transform: uppercase; letter-spacing: .03em; }
.tl-ungelesen details.tl-mailbox { border-color: #f0b3bd; background: #fdeef0; }
.tl-ungelesen details.tl-mailbox > summary { color: #b3243a; font-weight: 700; }
.tl-ungelesen .tl-dot { background: #d24b5a !important; }
.badge-count { display: inline-block; background: #d24b5a; color: #fff; border-radius: 999px; padding: .02rem .45rem; font-size: .72rem; font-weight: 700; }

/* Mails overview list */
.mails-list { display: flex; flex-direction: column; }
.mail-row { padding: .6rem 0; border-bottom: 1px solid #e6eef4; }
.mail-row:last-child { border-bottom: none; }
.mail-meta { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .35rem; }
.mail-lead { font-weight: 700; color: #1c6f9e; }

/* ============================================================
   JARVIS / Avengers HUD background (area-selector page only)
   ============================================================ */
.jarvis-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  /* soft cyan reactor glow behind everything */
  background:
    radial-gradient(circle at 50% 46%, rgba(53,208,255,0.10), rgba(53,208,255,0.0) 42%),
    radial-gradient(circle at 50% 46%, rgba(56,189,248,0.05), rgba(6,10,18,0) 60%);
}
.jarvis-bg #jarvis-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0.9; }

/* Ensure the interactive content sits above the effect */
.chooser { position: relative; z-index: 1; }

/* Concentric holographic rings, centred */
.jarvis-rings {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.jarvis-rings .jr {
  width: min(94vh, 860px); height: min(94vh, 860px); max-width: 120vw;
  filter: drop-shadow(0 0 10px rgba(53,208,255,0.28));
  opacity: 0.55;
}
.jr-ring { fill: none; stroke: rgba(53,208,255,0.55); stroke-width: 2.2; transform-origin: 300px 300px; }
.jr-ring.thin { stroke: rgba(56,189,248,0.35); stroke-width: 1.1; }
.jr-ring.static { stroke: rgba(53,208,255,0.22); }
.jr-core { fill: none; stroke: rgba(53,208,255,0.30); stroke-width: 10; opacity: 0.4;
  filter: drop-shadow(0 0 14px rgba(53,208,255,0.5)); }
.jr-spin      { animation: jr-rot 46s linear infinite; transform-origin: 300px 300px; }
.jr-spin-slow { animation: jr-rot 90s linear infinite; transform-origin: 300px 300px; }
.jr-spin-rev  { animation: jr-rot 60s linear infinite reverse; transform-origin: 300px 300px; }
@keyframes jr-rot { to { transform: rotate(360deg); } }

/* Rotating radar-style sweep */
.jarvis-sweep {
  position: absolute; top: 50%; left: 50%;
  width: min(94vh, 860px); height: min(94vh, 860px);
  margin-top: calc(min(94vh, 860px) / -2); margin-left: calc(min(94vh, 860px) / -2);
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(53,208,255,0.22), rgba(53,208,255,0.0) 32%, rgba(53,208,255,0) 100%);
  mask: radial-gradient(circle, transparent 0 26%, #000 26.5% 50%, transparent 50%);
  -webkit-mask: radial-gradient(circle, transparent 0 26%, #000 26.5% 50%, transparent 50%);
  animation: jr-rot 8s linear infinite; opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .jr-spin, .jr-spin-slow, .jr-spin-rev, .jarvis-sweep { animation: none; }
}