:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --ink: #1c2024;
  --ink-soft: #5b6470;
  --line: #d9dee5;
  --line-strong: #b8c0cc;
  --accent: #1f4b6e;
  --accent-soft: #e8eef4;
  --rot: #cf222e;
  --gelb: #bf8700;
  --gruen: #1a7f37;
  --shadow: 0 1px 2px rgba(20, 30, 45, .06), 0 4px 12px rgba(20, 30, 45, .05);
  --mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
  --serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

header.top {
  background: var(--accent);
  color: #fff;
  padding: 12px 22px;
  display: flex;
  align-items: baseline;
  gap: 18px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 20;
}
header.top h1 { font-size: 17px; margin: 0; letter-spacing: .2px; font-weight: 650; }
header.top .sub { color: #cdd9e5; font-size: 12px; }
header.top nav { margin-left: auto; display: flex; gap: 14px; font-size: 13px; }
header.top nav a { color: #eaf1f8; }

.wrap { max-width: 1500px; margin: 0 auto; padding: 18px 22px 60px; }

.principle {
  background: var(--accent-soft);
  border: 1px solid #c9d8e6;
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 9px 14px;
  font-size: 12.5px;
  color: #25404f;
  margin-bottom: 16px;
}

.statbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 7px;
  padding: 8px 14px; min-width: 92px; box-shadow: var(--shadow);
}
.stat .n { font-size: 21px; font-weight: 700; line-height: 1.1; }
.stat .l { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .4px; }
.stat.rot .n { color: var(--rot); }
.stat.p1 .n { color: var(--accent); }

form.filters {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 16px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 14px; align-items: end;
}
form.filters .fld { display: flex; flex-direction: column; gap: 3px; }
form.filters label { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .4px; }
form.filters select, form.filters input[type=text] {
  border: 1px solid var(--line-strong); border-radius: 5px; padding: 5px 7px;
  font-size: 13px; background: #fff; color: var(--ink); height: 30px;
}
form.filters .checks { display: flex; gap: 12px; align-items: center; font-size: 12.5px; }
form.filters .actions { display: flex; gap: 8px; }
.btn {
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink);
  border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn:hover { filter: brightness(.97); }

table.board { width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
table.board th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--ink-soft); padding: 9px 10px; background: #eef1f5; border-bottom: 1px solid var(--line);
}
table.board td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.board tr:last-child td { border-bottom: none; }
table.board tr:hover td { background: #f8fafc; }
table.board td.frage { max-width: 540px; }
table.board td.frage a { font-weight: 600; color: var(--ink); }
table.board td.frage a:hover { color: var(--accent); }
.zus { color: var(--ink-soft); font-size: 12px; margin-top: 3px; }

.ampel { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.ampel.rot { background: var(--rot); } .ampel.gelb { background: var(--gelb); } .ampel.gruen { background: var(--gruen); }

.tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 20px;
  border: 1px solid var(--line-strong); color: var(--ink-soft); background: #fff; white-space: nowrap; }
.tag.norm { font-family: var(--mono); color: var(--accent); border-color: #c2d3e2; background: #f2f7fb; }
.tag.prio-p1 { color: #fff; background: var(--accent); border-color: var(--accent); }
.tag.prio-p2 { color: var(--accent); background: var(--accent-soft); }
.tag.flag { background: #fff4e5; border-color: #f0c98a; color: #8a5a00; }
.tag.stell { background: #efeaff; border-color: #c9b8f0; color: #5a3fb0; }
.tag.ust { background: #e9f7ef; border-color: #a9dcbf; color: #1a7f37; }
.tier-stub td.frage a { font-weight: 500; }


/* ---------- Detail ---------- */
.detail-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 6px; }
.detail-head h2 { font-size: 20px; margin: 0 0 4px; line-height: 1.3; }
.crumbs { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 12px; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .cols { grid-template-columns: 1fr; } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); margin-bottom: 16px; }
.card > h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft);
  margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--line); background: #f6f8fa; border-radius: 8px 8px 0 0; }
.card .body { padding: 12px 14px; }
.card .body p { margin: 0 0 8px; }

.synopse { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.synopse .col { padding: 12px 14px; }
.synopse .col.alt { border-right: 1px solid var(--line); background: #fcfcfd; }
.synopse .col h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); }
.synopse .col.alt h4 { color: var(--rot); }
.synopse .col.neu h4 { color: var(--gruen); }
.wortlaut { font-family: var(--serif); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap;
  background: #fff; border-left: 3px solid var(--line-strong); padding: 6px 10px; margin: 0; }
.synopse .col.neu .wortlaut { border-left-color: var(--gruen); }
.synopse .col.alt .wortlaut { border-left-color: var(--rot); }

.fundstelle { border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; margin-bottom: 9px; background: #fff; }
.fundstelle .head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; font-size: 12px; }
.fundstelle .zitat { font-family: var(--serif); font-size: 13px; line-height: 1.55; white-space: pre-wrap;
  color: #2b3138; border-left: 3px solid var(--accent); padding: 4px 9px; background: #fafbfc; }
.fundstelle a.deeplink { font-size: 12px; }

.claim { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .3px; }
.claim-wortlaut { background: #eceff3; color: #41505f; }
.claim-begruendung { background: #eaf0fb; color: #3a5a9b; }
.claim-sichere_rechtsfolge { background: #e6f4ea; color: #1a7f37; }
.claim-moegliche_auslegung { background: #fff3da; color: #8a5a00; }
.claim-ki_hypothese { background: #f3eaff; color: #6a3fb0; }
.claim-anwaltsfrage { background: #fde8e8; color: #b3261e; }
.claim-unternehmerische_option { background: #e7f1f7; color: #1f4b6e; }
.claim-menschliche_entscheidung { background: #eceef0; color: #2b3138; }
.unsicher-note { font-size: 11px; color: var(--gelb); font-weight: 600; }

.punkt { border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: 6px;
  padding: 8px 11px; margin-bottom: 8px; background: #fff; }
.punkt.kat-risiko_rechtlich, .punkt.kat-risiko_unternehmerisch { border-left-color: var(--rot); }
.punkt.kat-chance { border-left-color: var(--gruen); }
.punkt.kat-rechtsfrage { border-left-color: #b3261e; }
.punkt.kat-handlungsoption { border-left-color: var(--accent); }
.punkt.kat-test_pilot { border-left-color: #8a5a00; }
.punkt.kat-befund { border-left-color: var(--line-strong); }
.punkt .ptext { margin: 2px 0 4px; }
.punkt .pmeta { font-size: 11.5px; color: var(--ink-soft); display: flex; gap: 12px; flex-wrap: wrap; }
.punkt .pmeta b { color: #43505d; }
.punkt .src { font-size: 11.5px; }

.kommentar { border: 1px solid var(--line); border-radius: 6px; padding: 8px 11px; margin-bottom: 8px; background: #fff; }
.kommentar .kmeta { font-size: 11.5px; color: var(--ink-soft); margin-bottom: 3px; display: flex; gap: 8px; align-items: center; }
.kommentar .ksrc { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; }
form.kform { display: grid; gap: 8px; }
form.kform textarea, form.kform select, form.kform input {
  border: 1px solid var(--line-strong); border-radius: 5px; padding: 6px 8px; font-size: 13px; font-family: inherit; }
form.kform .row { display: flex; gap: 8px; flex-wrap: wrap; }
form.kform .row > * { flex: 1; min-width: 140px; }
.hint { font-size: 11.5px; color: var(--ink-soft); }
.req { color: var(--rot); }

.viewer iframe { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
details.viewer summary { cursor: pointer; font-size: 13px; color: var(--accent); padding: 4px 0; }

.empty { padding: 30px; text-align: center; color: var(--ink-soft); }

/* ---------- Mitarbeit: Hinzufügen, Kommentieren, Markieren ---------- */
.btn.small { padding: 3px 9px; font-size: 12px; }
.me-name { margin-left: auto; font-size: 11px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 3px; }
.me-name input { border: 1px solid var(--line-strong); border-radius: 5px; padding: 4px 7px; font-size: 13px; }

.tag.added { background: #e7f1f7; border-color: #bcd6e8; color: #1f4b6e; }
.claim.claim-quelle { background: #eef1f5; color: #41505f; }

.frow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 2px; }

details.addbox { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
details.addbox > summary { cursor: pointer; font-size: 12.5px; color: var(--accent); font-weight: 600; list-style: none; }
details.addbox > summary::before { content: "＋ "; }
details.addbox[open] > summary::before { content: "× "; }
details.addbox .kform { margin-top: 8px; }

.kthread { margin-top: 8px; }
details.kadd > summary { cursor: pointer; font-size: 11.5px; color: var(--ink-soft); list-style: none; padding: 2px 0; }
details.kadd[open] > summary { color: var(--accent); }
details.kadd .kform { margin-top: 6px; background: #fafbfc; border: 1px solid var(--line); border-radius: 6px; padding: 8px; }
.punkt .kthread, .fundstelle .kthread { margin-top: 6px; }

.quelltext-panel { border: 1px solid var(--line-strong); border-radius: 7px; padding: 9px 11px; margin: 8px 0; background: #fffdf6; }
.quelltext-panel .qmeta { font-size: 11.5px; color: var(--ink-soft); margin-bottom: 6px; }
.qtext { font-family: var(--serif); font-size: 13px; line-height: 1.6; white-space: pre-wrap;
  max-height: 320px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 5px;
  padding: 8px 10px; margin-bottom: 8px; user-select: text; }
.qtext::selection { background: #ffe8a3; }

/* ---------- Ideen-Cockpit ---------- */
svg.matrix { width: 100%; max-width: 640px; height: auto; display: block; }
svg.matrix .mq { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
svg.matrix .max { font-size: 11px; fill: var(--ink-soft); }
svg.matrix .mdot { font-size: 9px; font-weight: 700; fill: #fff; pointer-events: none; }
svg.matrix a { cursor: pointer; }
svg.matrix circle:hover { fill-opacity: 1; }
.legend { display: flex; gap: 16px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--ink-soft); flex-wrap: wrap; }
.legend .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; margin-right: 3px; }

table.board.ideen td.num { text-align: center; font-variant-numeric: tabular-nums; }
.score-badge { display: inline-block; min-width: 30px; text-align: center; font-weight: 700; font-size: 13px;
  color: #fff; background: var(--c, #1f4b6e); border-radius: 6px; padding: 2px 7px; }
.score-badge.big { font-size: 22px; min-width: 48px; padding: 6px 10px; border-radius: 8px; }
.score-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px; margin: 6px 0; }
.score-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-soft); }
.score-grid select { border: 1px solid var(--line-strong); border-radius: 5px; padding: 5px 7px; font-size: 14px; background: #fff; }

/* ---------- Bearbeiten / Löschen / Rollen ---------- */
.btn.danger { color: #fff; background: var(--rot); border-color: var(--rot); }
.btn.danger:hover { filter: brightness(.95); }
.punkt-del { margin-left: auto; border: none; background: transparent; cursor: pointer;
  font-size: 13px; opacity: .5; padding: 0 2px; line-height: 1; }
.punkt-del:hover { opacity: 1; }
details.edit-box { background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); padding: 10px 14px; margin: 0 0 14px; }
details.edit-box .fld2 { display: flex; flex-direction: column; gap: 3px; font-size: 11px;
  color: var(--ink-soft); flex: 1; min-width: 150px; }
details.edit-box .fld2 input, details.edit-box .fld2 select {
  border: 1px solid var(--line-strong); border-radius: 5px; padding: 5px 7px; font-size: 13px; color: var(--ink); }
header.top nav a.role-admin { color: #ffd9a0; font-weight: 700; }
header.top nav a.role-user { color: #b9c7d6; }