/* ─── conpro Management Dashboard – Dark Theme ─────────────────────────────
   Firmenfarben:  Navy #0B2A73   ·   Hellblau #3693FF
*/
:root {
  --brand-navy: #0b2a73;
  --brand-navy-2: #123a86;
  --brand-blue: #3693ff;
  --brand-blue-2: #57a6ff;

  --bg: #070b16;
  --bg-2: #0b1220;
  --panel: #101a2e;
  --panel-2: #0e1626;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text: #e8eefb;
  --muted: #8ea0bd;
  --muted-2: #64748b;

  --pos: #35d07f;   /* Überstunden-Plus */
  --neg: #ff6b6b;   /* Minusstunden */

  --shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
  --radius: 18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Hintergrund: früher zwei begrenzte Radialverläufe, die sich auf langen Seiten
   alle ~500 px sichtbar wiederholten. Jetzt zweiteilig:
   1. eine nahtlose Grundströmung – zwei sich wiederholende Schrägverläufe, deren
      Anfangs- und Endfarbe identisch sind. Dadurch gibt es keine Kachelkante, egal wie
      lang die Seite wird, und weil die Perioden ungleich sind (1180/760 px) wiederholt
      sich das Zusammenspiel erst nach mehreren Bildschirmhöhen.
   2. die Lichter in body::before, festgeheftet am Blickfeld – die wandern nie aus dem
      Bild und können sich damit auch nicht wiederholen. */
body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(163deg,
      rgba(54, 147, 255, 0.000) 0px,
      rgba(54, 147, 255, 0.055) 300px,
      rgba(11, 42, 115, 0.075) 620px,
      rgba(54, 147, 255, 0.045) 900px,
      rgba(54, 147, 255, 0.000) 1180px),
    repeating-linear-gradient(17deg,
      rgba(120, 190, 255, 0.000) 0px,
      rgba(120, 190, 255, 0.030) 240px,
      rgba(11, 42, 115, 0.055) 500px,
      rgba(120, 190, 255, 0.000) 760px);
  min-height: 100vh;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(54, 147, 255, 0.16), transparent 62%),
    radial-gradient(900px 520px at 100% 0%, rgba(11, 42, 115, 0.55), transparent 58%),
    radial-gradient(780px 520px at 88% 106%, rgba(54, 147, 255, 0.10), transparent 60%),
    radial-gradient(620px 420px at -6% 78%, rgba(88, 166, 255, 0.07), transparent 62%);
}

a { color: inherit; text-decoration: none; }

/* ─── Layout ──────────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 268px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: linear-gradient(180deg, rgba(18, 26, 46, 0.9), rgba(10, 16, 30, 0.9));
  border-right: 1px solid var(--border);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  padding: 6px 10px 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.brand .logo { width: 190px; max-width: 100%; height: auto; display: block; }

.nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted-2); padding: 14px 12px 6px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 600;
  font-size: 14.5px;
  transition: background 0.15s, color 0.15s;
}
.nav-item .ico { font-size: 18px; width: 22px; text-align: center; }
.nav-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.nav-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(54, 147, 255, 0.22), rgba(54, 147, 255, 0.06));
  box-shadow: inset 0 0 0 1px rgba(54, 147, 255, 0.35);
}

.sidebar .spacer { flex: 1; }
.sidebar .foot { font-size: 11.5px; color: var(--muted-2); padding: 10px 12px; border-top: 1px solid var(--border); }

/* ─── Main ────────────────────────────────────────────────────────────── */
.main { padding: 30px 40px 60px; max-width: 1720px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
.topbar .crumbs { color: var(--muted); font-size: 13.5px; }
.topbar h1 { margin: 6px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; }
.user-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 999px; font-size: 13px; color: var(--muted);
}
.user-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-blue); box-shadow: 0 0 10px var(--brand-blue); }
.logout-link { color: var(--brand-blue-2); font-weight: 600; }
.logout-link:hover { text-decoration: underline; }

/* ─── Login-Seite ─────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 16px; }
.login-card {
  width: 100%; max-width: 380px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow); text-align: center;
}
.login-logo { width: 190px; max-width: 80%; height: auto; margin-bottom: 6px; }
.login-title { font-size: 15px; color: var(--muted); margin-bottom: 22px; letter-spacing: 0.3px; }
.login-card .note { text-align: left; }
.btn.m365-btn { width: 100%; background: linear-gradient(180deg, #3a3f47, #2b2f36); color: #fff; }
.btn.m365-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn.m365-btn .ms-logo { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -1px;
  background:
    linear-gradient(#f25022,#f25022) 0 0/6px 6px no-repeat,
    linear-gradient(#7fba00,#7fba00) 8px 0/6px 6px no-repeat,
    linear-gradient(#00a4ef,#00a4ef) 0 8px/6px 6px no-repeat,
    linear-gradient(#ffb900,#ffb900) 8px 8px/6px 6px no-repeat; }
.login-hint { font-size: 12px; color: var(--muted-2); margin-top: 8px; }
.login-sep { display: flex; align-items: center; gap: 10px; color: var(--muted-2); font-size: 12px; margin: 20px 0 14px; text-transform: uppercase; letter-spacing: 1px; }
.login-sep::before, .login-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.admin-toggle { display: none; color: var(--brand-blue-2); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.admin-toggle:hover { text-decoration: underline; }
.admin-form { text-align: left; display: flex; flex-direction: column; gap: 14px; }
.admin-form .field { width: 100%; }
.admin-form input { width: 100%; }
.admin-form .btn { width: 100%; margin-top: 4px; }
.login-foot { color: var(--muted-2); font-size: 11.5px; }

/* ─── Kacheln ─────────────────────────────────────────────────────────── */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.tile {
  position: relative;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 190px;
  overflow: hidden;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.tile::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(500px 200px at 100% 0%, rgba(54, 147, 255, 0.12), transparent 60%);
  opacity: 0; transition: opacity 0.2s;
}
.tile:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.tile:hover::after { opacity: 1; }
.tile .pic { width: 64px; height: 64px; }
.tile .pic img { width: 100%; height: 100%; }
.tile h3 { margin: 0; font-size: 18px; font-weight: 700; }
.tile p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.tile .go { margin-top: auto; color: var(--brand-blue-2); font-weight: 600; font-size: 13.5px; }

/* ─── Panels / Cards ──────────────────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 22px; }
/* Karten grenzen oft an ein <form> statt direkt an die Vorgängerkarte – dann greift
   die Geschwister-Regel oben nicht und der Abstand fehlt. */
form + .card, .card + form > .card:first-child,
.note + .card, form + form > .card:first-child { margin-top: 22px; }
.card h2 { margin: 0 0 4px; font-size: 17px; }
.card .hint { color: var(--muted); font-size: 13px; margin: 0 0 18px; }

/* ─── Filterleiste ────────────────────────────────────────────────────── */
.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
  margin-bottom: 22px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }
input[type="date"], input[type="text"], input[type="password"], input[type="number"],
input[type="email"], input[type="tel"], input[type="search"], input[type="month"],
select, textarea {
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 14px;
  font-family: inherit;
  min-width: 170px;
}
textarea { width: 100%; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(54, 147, 255, 0.2); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }
/* Browser-Autofill färbt Felder sonst weiß ein */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-out 0s;
}

.btn {
  background: linear-gradient(180deg, var(--brand-blue-2), var(--brand-blue));
  color: #04122b;
  border: none;
  padding: 11px 20px;
  border-radius: 11px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.05); }

/* ─── Tabelle ─────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
thead th {
  text-align: left; padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.6px;
  border-bottom: 1px solid var(--border);
}
thead th.num, tbody td.num { text-align: right; }
tbody td { padding: 15px 18px; border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
.emp { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.avatar {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; color: #cfe1ff;
  background: linear-gradient(180deg, var(--brand-navy-2), var(--brand-navy));
  border: 1px solid rgba(87, 166, 255, 0.35);
}
.hours { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; }
.hours.pos { color: var(--pos); }
.hours.neg { color: var(--neg); }
.hours.zero { color: var(--muted); }
.badge-nd { color: var(--muted-2); font-size: 12.5px; font-style: italic; }

/* ─── Status / Meldungen ──────────────────────────────────────────────── */
.note { padding: 12px 16px; border-radius: 12px; font-size: 13.5px; margin-bottom: 18px; }
.note.ok { background: rgba(53, 208, 127, 0.12); border: 1px solid rgba(53, 208, 127, 0.3); color: #9ff0c4; }
.note.err { background: rgba(255, 107, 107, 0.12); border: 1px solid rgba(255, 107, 107, 0.3); color: #ffc2c2; }
.note.warn { background: rgba(240, 160, 32, 0.12); border: 1px solid rgba(240, 160, 32, 0.35); color: #ffd79a; }
.hint-space { margin-top: 16px; }
.loading { color: var(--muted); padding: 26px; text-align: center; }
.roster-info { color: var(--muted-2); font-size: 12.5px; margin-bottom: 14px; }
.roster-info b { color: var(--muted); }

/* ─── Verlaufsgraph ───────────────────────────────────────────────────── */
#emp-chart:not(:empty) { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 18px; }
.chart-head { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.chart-head b { color: var(--text); }
.chart-legend { float: right; font-size: 12px; color: var(--muted-2); display: flex; gap: 8px; align-items: center; }
.chart-legend .lg { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-left: 8px; }
.chart-legend .lg.up { background: var(--pos); }
.chart-legend .lg.down { background: var(--neg); }
.chart-wrap { width: 100%; overflow-x: auto; }
svg.chart { width: 100%; height: auto; display: block; min-width: 520px; }
svg.chart .grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
svg.chart .zero { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; stroke-dasharray: 4 3; }
svg.chart .area { fill: rgba(54, 147, 255, 0.13); }
svg.chart .line { fill: none; stroke: var(--brand-blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
svg.chart .axis { fill: var(--muted-2); font-size: 11px; font-family: inherit; }
svg.chart .jump { stroke: #0a1420; stroke-width: 1.5; cursor: help; }
svg.chart .jump:hover { stroke: #fff; stroke-width: 2; }
svg.chart .jump.up { fill: var(--pos); }
svg.chart .jump.down { fill: var(--neg); }

/* Mouseover-Tooltip im Graph */
.chart-tip {
  position: fixed; z-index: 1000; display: none; pointer-events: none;
  background: #0b1730; border: 1px solid var(--border-strong); color: var(--text);
  padding: 8px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); max-width: 320px;
}

.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -6px 0 20px; }
.presets-label { color: var(--muted-2); font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; }
.chip {
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.chip:hover { color: var(--text); border-color: var(--brand-blue); background: rgba(54, 147, 255, 0.08); }
.chip.warn:hover { border-color: #f0a020; background: rgba(240, 160, 32, 0.1); }
.presets-sep { width: 1px; height: 22px; background: var(--border-strong); margin: 0 6px; }
.thr-input { min-width: 64px; width: 64px; padding: 6px 8px; text-align: center; }

/* ─── Anomalie-Spalte / Badges ────────────────────────────────────────── */
.anom-none { color: var(--muted-2); }
.anom-ok { color: var(--pos); font-size: 13px; }
.anom-badge {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  background: rgba(240, 160, 32, 0.14); border: 1px solid rgba(240, 160, 32, 0.4);
  color: #ffcb6b; font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.anom-badge:hover { background: rgba(240, 160, 32, 0.24); }

/* ─── Anomalie-Typ-Auswahl ────────────────────────────────────────────── */
.type-select { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; }
.type-chip {
  display: flex; align-items: center; gap: 9px;
  background: var(--bg-2); border: 1px solid var(--border-strong); color: var(--muted);
  padding: 10px 15px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all 0.15s;
}
.type-chip .tc-ico { font-size: 16px; }
.type-chip:hover { color: var(--text); border-color: var(--brand-blue); }
.type-chip.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(180deg, var(--brand-blue-2), var(--brand-blue));
}
.type-desc { color: var(--muted); font-size: 13px; margin: 0 0 18px; min-height: 1em; }

tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: rgba(54, 147, 255, 0.06); }
tr.clickable.active td { background: rgba(54, 147, 255, 0.14); }
tr.clickable.active td:first-child { box-shadow: inset 3px 0 0 var(--brand-blue); }
.table-hint { color: var(--muted-2); font-size: 12.5px; margin: 10px 2px 0; }

/* Inline aufklappende Detailzeile (unter dem jeweiligen Mitarbeiter) */
tr.detail-row > td { padding: 0; background: rgba(54, 147, 255, 0.05); border-bottom: 1px solid var(--border); }
tr.detail-row:hover > td { background: rgba(54, 147, 255, 0.05); }
.inline-detail { padding: 6px 18px 18px; }
.inline-detail .anom-day:first-child { margin-top: 10px; }

.anom-headline { font-weight: 600; font-size: 14px; }
h2.section-gap { margin-top: 26px; }

/* Kontext: Tag löste weitere Anomalien aus */
.also-line { font-size: 12.5px; color: #ffcb6b; margin: 2px 0 8px; }
.also-line b { color: #ffdd9c; }
.also-badge {
  display: inline-block; background: rgba(240,160,32,0.16); border: 1px solid rgba(240,160,32,0.4);
  color: #ffcb6b; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; margin-left: 6px;
}
.also-mini { font-size: 11.5px; color: #ffcb6b; margin-top: 3px; }
.also-mini b { color: #ffdd9c; }
.hide-hint.warn { color: #ffcb6b; }
.hide-hint.warn b { color: #ffdd9c; }

/* Kompakte Tabelle (System-Gehen) */
table.mini { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.mini th { text-align: left; padding: 9px 14px; color: var(--muted-2); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
table.mini th.num, table.mini td.num { text-align: right; }
table.mini td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
table.mini tbody tr:last-child td { border-bottom: none; }
table.mini .wd { color: var(--muted); }
table.mini td.cmt { color: var(--text); }
table.mini .hide-form { margin: 2px 0; }
table.mini .row-muted td { opacity: 0.65; }
table.mini .row-text td { padding-top: 0; color: var(--muted-2); font-size: 11.5px; }
.st-ok { color: var(--pos); font-weight: 600; font-size: 12.5px; }
.st-no { color: #ffcb6b; font-weight: 600; font-size: 12.5px; }
.sub-note { color: var(--muted-2); font-size: 11.5px; font-weight: 400; margin-top: 3px; }
.next-send { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(88,166,255,0.10); border: 1px solid rgba(88,166,255,0.35);
  border-radius: 12px; padding: 13px 18px; margin-bottom: 18px; font-size: 15px; }
.next-send span { color: var(--muted-2); text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.6px; }
.next-send b { color: var(--text); font-size: 15px; }
.user-toggle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 22px; margin: 6px 0 4px; }
.user-toggle-grid .check { font-size: 13.5px; }
.log-stat-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; }
.log-badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.4px; }
.log-badge.err { background: rgba(220,38,38,0.16); color: #fca5a5; border: 1px solid rgba(220,38,38,0.4); }
.log-badge.warn { background: rgba(217,119,6,0.16); color: #fcd34d; border: 1px solid rgba(217,119,6,0.42); }
.log-badge.info { background: rgba(88,166,255,0.12); color: #93c5fd; border: 1px solid rgba(88,166,255,0.35); }
.log-filter { display: flex; gap: 18px; flex-wrap: wrap; margin: 6px 0 14px; align-items: flex-end; }
.log-filter .field { min-width: 200px; }
.log-filter-actions { display: flex; gap: 10px; align-items: flex-end; }
.log-detail { color: var(--muted-2); font-size: 12px; margin-top: 3px; }
.stat-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; }
/* Rechte-Spalten: die Überschriften dürfen umbrechen, damit mehr Rechte
   nebeneinander passen. Ohne Umbruch wuchs die Tabelle mit jedem neuen Recht in die
   Breite. Die Häkchen selbst bleiben einzeilig und mittig. */
.users-table th.chk-col { text-align: center; white-space: normal; vertical-align: bottom;
  width: 96px; min-width: 96px; font-size: 11px; line-height: 1.28; letter-spacing: 0.2px;
  padding: 9px 6px; }
/* Bewusst OHNE hyphens: auto – die Trennung zerlegte Wörter zu „ANMEL-DUNG" und
   „ZEITERFAS-SUNG". Umgebrochen wird nur an Leerzeichen; die Spaltenbreite richtet
   sich am längsten Einzelwort aus. */
.users-table td.chk-col { text-align: center; white-space: nowrap; padding-left: 6px;
  padding-right: 6px; }
.users-table td.chk-col input { width: 18px; height: 18px; accent-color: var(--brand-blue); }
.users-table select { min-width: 110px; }
.users-table .u-name { font-weight: 600; }
.users-table .u-mail { color: var(--muted-2); font-size: 12px; }
.users-table .row-inactive { opacity: 0.5; }
/* Gedrehte Rechtematrix: Benutzer als Spalten, Rechte als Zeilen */
.users-matrix { table-layout: fixed; }
.users-matrix th.m-label, .users-matrix td.m-label {
  width: 190px; min-width: 190px; text-align: left; white-space: nowrap; font-weight: 600;
  position: sticky; left: 0; background: var(--panel); z-index: 1; }
.users-matrix th.m-user { width: 96px; text-align: center; vertical-align: bottom; padding: 8px 4px;
  white-space: normal; hyphens: manual; font-size: 12px; line-height: 1.25; }
.users-matrix th.m-user .u-name { font-weight: 600; word-break: break-word; }
.users-matrix td.chk-col { text-align: center; padding: 6px 4px; }
.users-matrix td.chk-col select { min-width: 0; width: 88px; padding: 4px 6px; font-size: 12px; }
.users-matrix tbody tr:hover td { background: rgba(255,255,255,0.03); }
.users-matrix tr.m-role td, .users-matrix tr.m-view td { border-bottom: 1px solid var(--border-strong); }
.users-matrix .impersonate-link { font-size: 12px; white-space: nowrap; }
.u-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: #fca5a5;
  border: 1px solid rgba(220,38,38,0.4); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.impersonate-link { color: var(--brand-blue-2); font-weight: 600; font-size: 13px; }
.impersonate-link:hover { text-decoration: underline; }
.imp-banner { background: rgba(217,119,6,0.16); border: 1px solid rgba(217,119,6,0.45);
  color: #fcd34d; border-radius: 12px; padding: 11px 16px; margin-bottom: 16px; font-size: 14px; }
.imp-banner a { color: #fff; font-weight: 700; margin-left: 10px; text-decoration: underline; }

/* ─── Sales ───────────────────────────────────────────────────────────────── */
.sales-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.sales-bar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.st-badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px;
  border-radius: 20px; white-space: nowrap; border: 1px solid var(--border); color: var(--muted); }
.st-termin_geplant { background: rgba(148,163,184,0.14); color: #cbd5e1; }
.st-aufnahme { background: rgba(88,166,255,0.14); color: #93c5fd; border-color: rgba(88,166,255,0.4); }
.st-vertrag_versendet { background: rgba(217,119,6,0.16); color: #fcd34d; border-color: rgba(217,119,6,0.42); }
.st-bestaetigt { background: rgba(139,92,246,0.16); color: #c4b5fd; border-color: rgba(139,92,246,0.42); }
.st-gewonnen { background: rgba(53,208,127,0.16); color: #9ff0c4; border-color: rgba(53,208,127,0.4); }
.st-verloren { background: rgba(220,38,38,0.14); color: #fca5a5; border-color: rgba(220,38,38,0.38); }
.ro-value { font-size: 14.5px; color: var(--text); padding: 9px 0 2px; }
.step-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.step-box { flex: 1 1 150px; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 3px; background: rgba(255,255,255,0.02); }
.step-box b { font-size: 13.5px; }
.step-box span { font-size: 12px; color: var(--muted-2); }
.step-box.done { border-color: rgba(53,208,127,0.4); background: rgba(53,208,127,0.08); }
.step-box.done b { color: #9ff0c4; }
.btn.danger { background: linear-gradient(180deg, #b91c1c, #991b1b); color: #fff; }
.grp-contract { font-size: 12px; font-weight: 600; color: var(--brand-blue-2); margin-left: 8px;
  text-transform: none; letter-spacing: 0; }
.grp-contract.none { color: var(--muted-2); }
.price-table input.wide { width: 100%; min-width: 180px; font-size: 13.5px; padding: 6px 9px; }
.price-table input.price-input { width: 100px; text-align: right; font-size: 13.5px; padding: 6px 9px; }
.price-table td { vertical-align: top; }
/* Feste Spaltenbreiten, damit alle Preistabellen untereinander gleich aussehen */
.price-table { table-layout: fixed; width: 100%; }
.price-table th.num, .price-table td.num { text-align: right; white-space: nowrap; }
.price-table col.c-name { width: 38%; }
.price-table col.c-unit { width: 15%; }
.price-table col.c-price { width: 150px; }
/* Fragenkatalog: eigene Breiten, damit der Hinweis lesbar bleibt */
.price-table col.c-q { width: 27%; }
.price-table col.c-type { width: 110px; }
.price-table col.c-opts { width: 17%; }
/* Eingabefeld füllt die Zelle, damit der rechtsbündige Betrag nicht abgeschnitten wird */
.price-table td.num input { width: calc(100% - 22px); min-width: 0; }
.price-table col.c-hint { width: auto; }
.price-table col.c-chk { width: 62px; }
.price-table th.chk-col, .price-table td.chk-col { text-align: center; }
.price-table td.hint-col input.note-input,
.price-table td input.wide { width: 100%; min-width: 0; font-size: 13.5px; padding: 6px 9px; }
.price-table td { overflow-wrap: anywhere; }
/* Name + Fragezeichen mit Erklärung (Mouseover) in einer Zeile */
.name-cell { display: flex; align-items: center; gap: 8px; }
.name-cell input { flex: 1 1 auto; }
.hint-dot { flex: 0 0 auto; width: 19px; height: 19px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(255,255,255,0.05);
  color: var(--muted); font-size: 11.5px; font-weight: 700; line-height: 17px;
  font-family: inherit; text-align: center; cursor: pointer; user-select: none; }
.hint-dot.empty { color: var(--muted-2); border-style: dashed; background: none; }
.hint-dot.changed { border-color: #f0b429; color: #f0b429; background: rgba(240,180,41,0.14); }
.hint-dot:hover, .hint-dot:focus-visible { border-color: var(--brand-blue); color: var(--brand-blue-2);
  background: rgba(88,166,255,0.12); outline: none; }
/* Tooltip liegt per position:fixed am <body> – sonst schneidet die scrollbare
   Tabelle (.table-wrap, overflow:auto) den Kasten ab. */
#tipbox {
  position: fixed; z-index: 200; max-width: 340px; pointer-events: none;
  background: #16223c; border: 1px solid var(--brand-blue);
  color: var(--text); font-size: 12.5px; line-height: 1.45;
  padding: 8px 11px; border-radius: 9px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.55);
  opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s;
}
#tipbox.on { opacity: 1; transform: none; }

/* Hinweis-Editor am Fragezeichen */
#noteedit {
  position: fixed; z-index: 210; width: 360px; max-width: calc(100vw - 24px);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--brand-blue); border-radius: 13px;
  padding: 14px; box-shadow: 0 18px 40px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; gap: 8px;
}
#noteedit label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }
#noteedit textarea { width: 100%; min-width: 0; font-size: 13px; }
.noteedit-foot { display: flex; align-items: center; gap: 8px; }
.noteedit-hint { flex: 1; font-size: 11px; color: var(--muted-2); }
.btn.small { padding: 7px 13px; font-size: 12.5px; }
.save-pending { color: var(--warn, #f0b429); font-size: 12.5px; align-self: center; }

/* Autosave-Anzeige und Feld-Rückmeldung */
.autosave-status { font-size: 12px; color: var(--muted-2); margin-top: 6px; }
.autosave-status.busy { color: var(--muted); }
.autosave-status.ok { color: #46c07a; }
.autosave-status.err { color: #ff6b6b; }
.autosave-status.ok::before, .autosave-status.busy::before { content: '● '; }
.saved-flash { border-color: #46c07a !important; box-shadow: 0 0 0 3px rgba(70,192,122,0.18) !important;
  transition: border-color .3s, box-shadow .3s; }
.save-failed { border-color: #ff6b6b !important; }

/* Wechsel zwischen den Stammdaten-Seiten */
.stamm-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.stamm-nav-label { color: var(--muted-2); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.6px; margin-right: 4px; }
.btn.active-page { border-color: var(--brand-blue); color: #fff;
  background: rgba(88,166,255,0.16); pointer-events: none; }
.lic-table td:first-child input.wide { min-width: 250px; }
.lic-table input.price-input { width: 84px; }
.lic-table td:last-child, .lic-table th:last-child { text-align: center; }

/* Aufnahmebogen */
.asm-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 16px; }
.asm-progress { width: 260px; max-width: 60vw; height: 8px; border-radius: 6px;
  background: rgba(255,255,255,0.08); overflow: hidden; margin-bottom: 5px; }
.asm-progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-2)); }
.req { color: #fca5a5; }
a.step-box { text-decoration: none; color: inherit; transition: border-color .12s, background .12s; }
a.step-box:hover { border-color: var(--brand-blue); background: rgba(88,166,255,0.10); }
.step-box.open { border-color: rgba(88,166,255,0.45); background: rgba(88,166,255,0.08); }
.step-box.open b { color: #93c5fd; }

/* Konfigurator */
/* Feste Spaltenbreiten – nur so stehen die Spalten aller Bereiche und aller
   Vertragskarten exakt untereinander (sonst richtet sich jede Tabelle nach dem
   längsten Produktnamen in ihrem Block). */
.cfg-table { table-layout: fixed; width: 100%; }
.cfg-table col.c-qty { width: 130px; }
.cfg-table col.c-price { width: 150px; }
.cfg-table col.c-sum { width: 150px; }
.cfg-table col.c-act { width: 132px; }
.cfg-table td { vertical-align: top; }
.cfg-table td.num { white-space: nowrap; }
.cfg-table input.qty-input,
.cfg-table input.price-input { width: 100%; min-width: 0; text-align: right;
  font-size: 13.5px; padding: 6px 9px; }
.cfg-table td.num input { width: calc(100% - 22px); min-width: 0; }
.cfg-table .row-once { background: rgba(255,255,255,0.02); }
.btn.btn-mini { padding: 5px 10px; font-size: 13px; min-width: 0; }
.sums-card { border-color: rgba(88,166,255,0.35); }
.asm-save { border-color: rgba(53,208,127,0.35); }
.log-table td { vertical-align: top; }
.test-result { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.test-result h3 { margin: 0 0 12px; font-size: 15px; }
.test-result .actions form { margin: 0; }
.detail-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.detail-chip {
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--muted);
}

/* ─── Anomalie-Detail ─────────────────────────────────────────────────── */
.anom-group { padding: 16px 0; border-bottom: 1px solid var(--border); }
.anom-group:last-child { border-bottom: none; }
.anom-emp { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15.5px; margin-bottom: 12px; }
.anom-count { color: var(--muted-2); font-size: 12.5px; font-weight: 500; }
.anom-day { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin: 10px 0; }
.anom-day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.anom-date { font-weight: 700; font-size: 14.5px; }
.anom-date .wd { color: var(--muted); font-weight: 500; }
.anom-soll { color: var(--muted-2); font-size: 12.5px; margin-left: auto; }
.anom-day-head .anom-action { margin-left: auto; }
.anom-day-head .hours { font-size: 14px; }
.anom-action {
  background: transparent; border: 1px solid var(--border-strong); color: var(--muted);
  padding: 6px 12px; border-radius: 9px; font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all 0.15s;
}
.anom-action:hover { color: var(--pos); border-color: rgba(53,208,127,0.5); background: rgba(53,208,127,0.08); }
.anom-action.restore:hover { color: var(--brand-blue); border-color: var(--brand-blue); background: rgba(54,147,255,0.08); }
.anom-soll + .anom-action { margin-left: 0; }
.anom-day.is-hidden { opacity: 0.85; }

/* Inline-Kommentarfeld beim Ausblenden */
.hide-form { display: flex; gap: 8px; align-items: center; margin: 4px 0 12px; flex-wrap: wrap; }
.hide-comment {
  flex: 1; min-width: 240px; padding: 9px 12px; font-size: 13.5px;
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 9px; color: var(--text);
}
.hide-comment.invalid { border-color: var(--neg); box-shadow: 0 0 0 3px rgba(255,107,107,0.18); }
.hide-hint { flex-basis: 100%; color: var(--muted-2); font-size: 11.5px; }
.hide-hint b { color: var(--muted); }
.anom-action.confirm { color: var(--pos); border-color: rgba(53,208,127,0.5); background: rgba(53,208,127,0.1); }
.anom-action.confirm:hover { background: rgba(53,208,127,0.2); }

/* Kommentar-Banner bei ausgeblendeten Anomalien */
.hide-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(54,147,255,0.09); border: 1px solid rgba(54,147,255,0.28);
  border-radius: 9px; padding: 9px 12px; margin-bottom: 12px;
}
.hide-note .hn-ico { flex: none; }
.hide-note .hn-text { color: var(--text); font-size: 13.5px; font-weight: 600; }
.hide-note .hn-at { color: var(--muted-2); font-size: 11.5px; margin-left: auto; white-space: nowrap; }

.anom-emp-inline { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13.5px; margin: 14px 0 -2px; color: var(--muted); }
.avatar.sm { width: 26px; height: 26px; font-size: 10.5px; }

.hidden-anoms { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 8px; }
.hidden-anoms > summary {
  cursor: pointer; list-style: none; padding: 12px 6px; font-weight: 700; font-size: 14px;
  color: var(--muted); display: flex; align-items: center; gap: 8px; user-select: none;
}
.hidden-anoms > summary::-webkit-details-marker { display: none; }
.hidden-anoms > summary::before { content: "▸"; color: var(--muted-2); transition: transform 0.15s; }
.hidden-anoms[open] > summary::before { transform: rotate(90deg); }
.hidden-anoms > summary:hover { color: var(--text); }

/* Zeitstrahl */
.timeline { padding: 4px 2px 2px; }
.tl-track { position: relative; height: 30px; margin: 4px 0; background: rgba(255,255,255,0.03); border-radius: 7px; }
.tl-track.overlay { height: 16px; opacity: 0.8; }
.tl-seg { position: absolute; top: 0; bottom: 0; border-radius: 6px; min-width: 2px; overflow: hidden; display: flex; align-items: center; }
.tl-seg-label { font-size: 10.5px; color: #06122a; font-weight: 700; padding: 0 6px; white-space: nowrap; text-shadow: 0 1px 0 rgba(255,255,255,0.15); }
.tl-axis { position: relative; height: 16px; margin-top: 2px; }
.tl-tick { position: absolute; transform: translateX(-50%); font-size: 10px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.tl-empty { color: var(--muted-2); font-size: 13px; font-style: italic; padding: 6px 0; }
.tl-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 12.5px; color: var(--muted); }
.tl-list b { color: var(--text); font-variant-numeric: tabular-nums; }
.tl-list .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

/* Typ-Farben */
.seg-WORK { background: linear-gradient(180deg, #57a6ff, #3693ff); }
.seg-DOCUMENTED_SUPPORT { background: linear-gradient(180deg, #7ad0ff, #4bb8e8); }
.seg-ILLNESS { background: linear-gradient(180deg, #ff8080, #ff6b6b); }
.seg-VACATION { background: linear-gradient(180deg, #5fe0a0, #35d07f); }
.seg-OVERTIME { background: linear-gradient(180deg, #c99bff, #a875f0); }
.seg-ABSENCE_PAID { background: linear-gradient(180deg, #b8c4d8, #8ea0bd); }
.seg-ABSENCE_UNPAID { background: linear-gradient(180deg, #8a97ad, #64748b); }
.seg-ERRAND, .seg-INHOUSE { background: linear-gradient(180deg, #57d6d0, #2bb8b0); }

.summary { display: flex; gap: 26px; flex-wrap: wrap; margin: 6px 0 20px; color: var(--muted); font-size: 13px; }
.summary:last-child { margin-bottom: 0; }
.summary b { color: var(--text); font-size: 15px; }

/* ─── Admin ───────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid .field { width: 100%; }
.form-grid input, .form-grid select { width: 100%; min-width: 0; }
.set-flag { font-size: 12px; color: var(--muted-2); margin-top: 2px; }

/* ─── Hosting-Kalkulator: Serverkacheln ───────────────────────────────────
   Höchstens **zwei** Kacheln je Zeile – drei wären zwar möglich, die Felder werden
   dann aber unlesbar klein. Unter 1440 px läuft eine Kachel über die ganze Breite.
   Die Erklärungen zu den Regeln stehen im Mouseover (.hint-dot.mini) statt als eigene
   Zeile unter jedem Feld; das ist der eigentliche Platzgewinn. */
.srv-grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
@media (min-width: 1440px) { .srv-grid { grid-template-columns: 1fr 1fr; } }
.srv-grid .card + .card, .srv-grid .card { margin-top: 0; }
.srv-card { padding: 18px 20px 20px; }
.srv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.srv-nr { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
  background: rgba(54,147,255,0.16); border: 1px solid rgba(54,147,255,0.4);
  color: var(--brand-blue-2); font-size: 13.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.srv-head .srv-name { flex: 1 1 auto; min-width: 0; padding: 8px 11px; font-size: 15px;
  border-radius: 9px; font-weight: 600; }
.srv-head .btn.small { padding: 3px 10px; font-size: 16px; line-height: 1.3; }
.srv-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px 14px; }
.srv-fields .field { gap: 5px; min-width: 0; }
.srv-fields .w2 { grid-column: span 2; }
.srv-fields .w3 { grid-column: span 3; }
.srv-fields label { display: flex; align-items: center; gap: 6px; font-size: 12px;
  letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; }
.srv-fields label em { font-style: normal; color: var(--muted-2); text-transform: none;
  letter-spacing: 0; }
.srv-fields label b.warn-text { text-transform: none; letter-spacing: 0; font-size: 12px; }
.srv-fields input, .srv-fields select { width: 100%; min-width: 0; padding: 9px 11px;
  font-size: 14px; border-radius: 10px; }
.srv-fields input:disabled, .srv-fields select:disabled { opacity: 0.45; cursor: not-allowed; }
.srv-checks { flex-direction: row; align-items: center; gap: 24px; padding-top: 20px; }
.srv-checks label.check { font-size: 14px; gap: 8px; }
.srv-checks label.check input { width: 17px; height: 17px; }
.hint-dot.mini { width: 17px; height: 17px; font-size: 10.5px; line-height: 15px;
  border-width: 1px; cursor: help; }
/* Rechenzentrums-Optionen: vier Felder in einer Zeile. Die Namen kommen aus dem
   Artikelstamm und sind teils lang – hier darf die Beschriftung umbrechen (Blocksatz
   statt Flexbox, sonst schneidet der Text ab statt zu fließen). */
.opt-fields label { display: block; white-space: normal; line-height: 1.35;
  overflow: visible; }
.opt-fields label .hint-dot { display: inline-flex; vertical-align: middle;
  margin-left: 4px; }

/* ─── Anomalien: Nachverfolgung (GF) – Knopf oben rechts + Fenster ─────────── */
.todo-kopf { display: flex; justify-content: flex-end; margin: -6px 0 14px; }
.todo-karte { width: min(1100px, 94vw); max-height: 86vh; overflow: auto;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border-strong); border-radius: 16px; padding: 20px 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.7); }
.todo-karte-kopf { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; }
.todo-karte-kopf h3 { margin: 0; font-size: 16px; }
#todo-schliessen { border: 0; background: none; color: var(--muted); font-size: 16px;
  cursor: pointer; }
#todo-schliessen:hover { color: var(--text); }
.todo-filter { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; }
.todo-filter label { color: var(--muted); font-size: 13px; }
#todo-tabelle tbody tr[hidden] { display: none; }

/* ─── Anomalien: Ausnahmen je Art ────────────────────────────────────────── */
.sub-card { margin: 18px 0 0; padding: 18px 20px; }
.sub-card h3 { margin: 0 0 4px; font-size: 15px; }
.excl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 18px; margin-top: 12px; }
.excl-grid label.check { font-size: 13.5px; }

/* ─── Stammdaten: Migrationstypen ─────────────────────────────────────────── */
.mig-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  flex-wrap: wrap; }
.mig-nr { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  background: rgba(54,147,255,0.16); border: 1px solid rgba(54,147,255,0.4);
  color: var(--brand-blue-2); font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.mig-label { flex: 1 1 320px; min-width: 0; font-size: 15.5px; font-weight: 600;
  padding: 8px 11px; border-radius: 9px; }
.mig-faktor { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.mig-faktor label { font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.5px; }
.mig-faktor .mig-mal { color: var(--muted-2); font-size: 15px; }
.mig-faktor input { width: 84px; min-width: 0; text-align: right; padding: 8px 10px;
  border-radius: 9px; font-size: 15px; font-weight: 600; }

/* ─── Stammdaten: Übersichtskarten ───────────────────────────────────────── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px; margin-bottom: 22px; }
.cards-grid .card { margin-top: 0; }
a.link-card { display: block; text-decoration: none; color: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; }
a.link-card:hover { transform: translateY(-3px); border-color: var(--brand-blue);
  box-shadow: var(--shadow); }
a.link-card h2 { color: var(--brand-blue-2); }
a.link-card .hint { margin-bottom: 12px; }
.set-flag code { background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 4px; }
.hint code { background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.ok-text { color: var(--ok, #4ade80); }
.warn-text { color: var(--warn, #fbbf24); }
label.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); text-transform: none; letter-spacing: 0; cursor: pointer; }
label.check input { width: 18px; height: 18px; accent-color: var(--brand-blue); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 20px; align-items: stretch; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; }
  .main { padding: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .srv-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srv-fields .w2, .srv-fields .w3 { grid-column: span 2; }
}

/* ─── Kalkulatoren (Migration, Hosting) ─────────────────────────────────── */
.calc-total { display: flex; flex-wrap: wrap; gap: 34px; align-items: flex-end;
  padding: 4px 0 20px; }
.calc-total-label { display: block; font-size: 11.5px; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; }
.calc-total-value { font-size: 30px; font-weight: 700; color: var(--brand-blue-2);
  letter-spacing: -0.5px; }
.calc-total-sub { font-size: 19px; font-weight: 600; color: var(--text); }
.calc-table col.c-price { width: 150px; }
.calc-table tr.calc-head td { padding-top: 16px; font-size: 11.5px; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: 0.7px; border-bottom: 1px solid var(--border); }
.calc-table tr.calc-sum td { font-weight: 600; border-top: 1px solid var(--border); }
.calc-table tr.calc-total-row td { font-weight: 700; font-size: 15px; color: var(--brand-blue-2);
  border-top: 2px solid var(--brand-blue); }
.hint-list { margin: 0; padding-left: 20px; }
.hint-list li { margin-bottom: 8px; line-height: 1.5; font-size: 13.5px; }
.hint-list li.always { color: var(--muted); }

/* ─── Kundenansicht (Präsentation, Vollbild, Druck) ─────────────────────── */
/* Kundenansicht: dieselbe nahtlose Grundströmung wie im Dashboard (aus body),
   nur mit kräftigeren Lichtern – hier ist die Seite besonders lang. */
body.cust-body::before {
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(54,147,255,0.20), transparent 62%),
    radial-gradient(980px 560px at 100% -2%, rgba(11,42,115,0.62), transparent 58%),
    radial-gradient(900px 600px at 92% 104%, rgba(54,147,255,0.13), transparent 60%),
    radial-gradient(700px 480px at -8% 72%, rgba(88,166,255,0.09), transparent 62%); }
.cust-wrap { max-width: 1420px; margin: 0 auto; padding: 42px 36px 130px; }
/* Die Konstellation braucht Breite: in der visuellen Ansicht darf die Seite den ganzen
   Bildschirm nutzen, die Tabellenansicht bleibt bei angenehmer Lesebreite. */
body.cv-view-visual .cust-wrap { max-width: min(2100px, 100%); }
.cust-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.cust-logo { width: 220px; max-width: 45%; height: auto; }
.cust-head-right { text-align: right; }
.cust-for { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted-2); }
.cust-company { font-size: 20px; font-weight: 700; margin-top: 2px; }
.cust-addr { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Unsichtbarer Schalter am Satzende: sieht aus wie der Punkt, ist aber anklickbar. */
#cv-nurpflicht { border: 0; background: none; padding: 0; margin: 0; font: inherit;
  color: inherit; letter-spacing: inherit; cursor: default; }
#cv-nurpflicht:focus { outline: none; }
.cust-title { font-size: 40px; font-weight: 800; letter-spacing: -1px; margin: 44px 0 10px; }
.cust-lead { font-size: 16px; color: var(--muted); max-width: 720px; line-height: 1.6; margin: 0 0 34px; }

.cust-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 22px; }
.cust-area { background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.cust-area-head { display: flex; gap: 14px; align-items: flex-start;
  padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.cust-area-icon { font-size: 26px; line-height: 1; }
.cust-area-head h2 { margin: 0; font-size: 17.5px; }
.cust-area-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.cust-blocks { list-style: none; margin: 0; padding: 0; flex: 1; }
.cust-blocks li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.cust-blocks li:last-child { border-bottom: none; }
.cust-block-qty { color: var(--muted-2); font-size: 12.5px; white-space: nowrap; }
.cust-block-price { font-weight: 600; white-space: nowrap; }
.cust-block-price em { font-style: normal; font-weight: 400; color: var(--muted-2); font-size: 11.5px; }
.cust-area-sum { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border-strong); font-size: 17px; font-weight: 700;
  color: var(--brand-blue-2); }
.cust-area-sum em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--muted); }
.cust-area-sum .once { color: var(--text); }

/* Die Summenleiste läuft am unteren Rand mit: beim Durchgehen der Bausteine soll
   der Kunde jederzeit sehen, was die Auswahl kostet. Deckender Hintergrund, damit
   der Inhalt darunter nicht durchscheint. Im Ausdruck steht sie wieder normal im
   Fluss (siehe @media print). */
.cust-total { position: sticky; bottom: calc(20px + var(--cv-note-h, 0px)); z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  /* Der Abstand nach oben macht Platz für die Werkzeugleiste, die zwischen
     Inhalt und Banner schwebt: 20 px Luft, Leistenhöhe, nochmal 20 px. */
  gap: 30px; margin: calc(var(--cv-leiste-h, 54px) + 40px) 0 0; padding: 20px 30px;
  background: linear-gradient(120deg, rgba(20,36,74,0.97), rgba(11,28,66,0.97));
  border: 1px solid var(--brand-blue); border-radius: var(--radius);
  backdrop-filter: blur(6px);
  box-shadow: 0 -12px 30px rgba(4,8,18,0.55); }
.cust-total-value { font-size: 38px !important; }
.cust-total-label { display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--muted); }
.cust-total-value { display: block; font-size: 46px; font-weight: 800; letter-spacing: -1.5px;
  line-height: 1.1; margin: 2px 0; }
.cust-total-note { font-size: 12.5px; color: var(--muted); }
.cust-total-side { display: flex; gap: 34px; }
.cust-total-side span { display: block; font-size: 22px; font-weight: 700; }
.cust-total-side em { font-style: normal; font-size: 12px; color: var(--muted); }
.cust-total + * { margin-top: 18px; }
/* Auslauf unter dem Inhalt: Banner und Werkzeugleiste laufen mit und würden sonst
   die letzten Zeilen dauerhaft verdecken. Der Wert wird gemessen (--cv-unten). */
.cust-wrap { padding-bottom: var(--cv-unten, 200px); }

.cust-project, .cust-hints, .cust-terms { margin-top: 26px; padding: 22px 24px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius); }
.cust-project h2, .cust-hints h2, .cust-terms h2 { margin: 0 0 4px; font-size: 16px; }
.cust-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.cust-hints ul, .cust-terms ul { margin: 8px 0 0; padding-left: 20px; }
.cust-hints li, .cust-terms li { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 6px; }
.cust-hints { border-color: rgba(240,180,41,0.4); }
.cust-hints li { color: var(--text); }
.cust-empty { text-align: center; padding: 90px 20px; }
.cust-empty h1 { font-size: 26px; margin: 0 0 10px; }
.cust-empty p { color: var(--muted); margin: 0; }
.cust-foot { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 11.5px; color: var(--muted-2); }

/* Werkzeugleiste: links unten, waagerecht, läuft beim Scrollen mit */
/* Die Werkzeugleiste steht über dem Preisbanner und bündig mit dessen linker Kante.
   Beide Werte werden gemessen (--cv-total-h, --cv-total-left), weil Höhe und Lage des
   Banners von Angebot und Fensterbreite abhängen. Der Abstand dazwischen entspricht
   dem Abstand des Banners zum Seitenende: 20 px. */
.cust-toolbar[style*="top"] { bottom: auto !important; }

.cust-toolbar { position: fixed; z-index: 20;
  left: var(--cv-total-left, 20px);
  top: auto; bottom: calc(40px + var(--cv-total-h, 110px));
  display: flex; gap: 6px; background: rgba(10,16,30,0.9);
  border: 1px solid var(--border-strong); padding: 7px; border-radius: 14px;
  backdrop-filter: blur(6px); }
.ct-btn { display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid transparent;
  background: none; color: var(--muted); cursor: pointer; text-decoration: none; }
.ct-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ct-btn:hover { color: var(--text); border-color: var(--brand-blue);
  background: rgba(88,166,255,0.12); }

/* Logo: helle Fassung am Bildschirm, dunkle im Druck */
.nur-druck { display: none; }

@media print {
  body.cust-body { background: #fff; color: #111; }
  body::before, body.cust-body::before { display: none; }
  .nur-bildschirm { display: none !important; }
  .nur-druck { display: block !important; }
  .cust-toolbar { display: none; }
  .cust-area, .cust-total, .cust-project, .cust-hints, .cust-terms {
    background: #fff !important; border-color: #bbb !important; box-shadow: none !important; }
  .cust-title, .cust-total-value, .cust-area-sum, .cust-block-price { color: #0b2a73 !important; }
  .cust-lead, .cust-addr, .cust-hints li, .cust-terms li, .cust-block-qty,
  .cust-total-note, .cust-total-side em, .cust-area-head p { color: #444 !important; }
  .cust-areas { display: block; }
  .cust-area { break-inside: avoid; margin-bottom: 14px; }
}

/* ─── Rückfrage-Dialog (ersetzt window.confirm) ─────────────────────────── */
.confirm-overlay { position: fixed; inset: 0; z-index: 400; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(4, 8, 18, 0.72); backdrop-filter: blur(3px); }
/* Muss sein: „display: flex" oben schlägt das display:none, das der Browser für
   [hidden] setzt – ohne diese Zeile stünde jedes Fenster sofort offen. */
.confirm-overlay[hidden] { display: none; }
.confirm-card { width: 100%; max-width: 460px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 26px 28px; box-shadow: 0 24px 60px rgba(0,0,0,0.7); }
.confirm-card h3 { margin: 0 0 10px; font-size: 18px; }
.confirm-card p { margin: 0 0 22px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* ─── Konfigurator: Bereiche, Lesbarkeit, Aktionen ──────────────────────── */
.cfg-section + .cfg-section { margin-top: 26px; }
.cfg-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  padding: 0 0 8px; margin-bottom: 6px; border-bottom: 2px solid var(--brand-blue);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px;
  color: var(--brand-blue-2); }
.cfg-section-sum { margin-left: auto; font-size: 12.5px; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--text); }
/* Produktname klar vom Untertitel unterscheiden */
.pos-name { font-size: 14.5px; font-weight: 650; color: var(--text); line-height: 1.35; }
.pos-meta { margin-top: 3px; font-size: 11.5px; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: 0.5px; }
.cfg-actions { text-align: right; white-space: nowrap; padding-left: 4px !important; }
.disc-flag { margin-top: 4px; font-size: 12px; color: #f0b429; }
.btn-icon { width: 30px; height: 30px; padding: 0; margin-left: 3px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: rgba(255,255,255,0.05);
  color: var(--muted); font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; vertical-align: middle; }
.btn-icon:hover { border-color: var(--brand-blue); color: var(--brand-blue-2);
  background: rgba(88,166,255,0.14); }
.btn-icon.on { border-color: #f0b429; color: #f0b429; background: rgba(240,180,41,0.16); }
.btn-icon.danger:hover { border-color: var(--neg); color: var(--neg);
  background: rgba(255,107,107,0.14); }

/* Rabatt-Fenster */
#discbox { position: fixed; z-index: 220; width: 430px; max-width: calc(100vw - 24px);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid #f0b429; border-radius: 13px; padding: 16px 18px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.65); }
.discbox-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.discbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.discbox-grid label { display: flex; flex-direction: column; gap: 5px;
  font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }
.discbox-grid input { min-width: 0; width: 100%; }
.discbox-hint { margin: 10px 0 14px; font-size: 11.5px; color: var(--muted-2); line-height: 1.5; }
.discbox-foot { display: flex; align-items: center; gap: 8px; }
.discbox-foot .spacer { flex: 1; }

/* ─── Prozess-Schrittleiste ─────────────────────────────────────────────── */
/* Schrittleiste bleibt beim Scrollen oben angedockt: bei langen Seiten (Aufnahme,
   Konfigurator) kommt man so ohne Zurückscrollen zum nächsten Schritt. Der negative
   Rand plus dasselbe Innenmaß halten die Leiste über die volle Inhaltsbreite, damit
   beim Durchscrollen nichts seitlich darunter hervorschaut. */
.pnav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  position: sticky; top: 0; z-index: 60;
  margin: 0 -40px 22px; padding: 10px 40px;
  /* deckend: bei halbdurchsichtigem Grund scheint beim Scrollen Text durch */
  background: #070c18; border-bottom: 1px solid var(--border-strong); }
@media (max-width: 860px) {
  /* dieselben 22px wie .main in dieser Breite */
  .pnav { margin: 0 -22px 18px; padding: 10px 22px; }
}
.pnav-step { display: flex; align-items: center; gap: 7px; padding: 7px 12px;
  border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px;
  color: var(--muted); background: rgba(255,255,255,0.03); white-space: nowrap; }
.pnav-step:hover { border-color: var(--border-strong); color: var(--text); }
.pnav-step.done { color: var(--text); border-color: rgba(53,208,127,0.45); }
.pnav-step.done .pnav-num { background: rgba(53,208,127,0.22); color: #6ee7a8; }
.pnav-step.current { color: #fff; border-color: var(--brand-blue);
  background: rgba(54,147,255,0.16); font-weight: 600; }
.pnav-num { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.08);
  font-size: 11px; font-weight: 700; }
.pnav-step.current .pnav-num { background: var(--brand-blue); color: #04122b; }
.pnav-next { margin-left: auto; }
.price-table col.c-sec { width: 190px; }
.price-table col.c-sort { width: 96px; }
/* Sortierspalte mit drei Knöpfen (hoch, runter, löschen) */
.price-table col.c-sort.wide { width: 132px; }
.price-table th.sort-col, .price-table td.sort-col { text-align: right; white-space: nowrap; }
.sec-select { min-width: 0; width: 100%; font-size: 12.5px; padding: 7px 9px; }
/* Feingliederung innerhalb eines Bereichs (Hosting: eine Gruppe je Server).
   Deutlich kräftiger als früher – die Überschrift trägt jetzt einen ganzen Server. */
.cfg-table tr.cfg-grouprow td { padding-top: 22px; padding-bottom: 7px; font-size: 15px;
  font-weight: 700; color: var(--brand-blue-2); letter-spacing: -0.1px;
  border-bottom: 1px solid var(--brand-blue); }
.cfg-table tr.cfg-grouprow td.num { text-align: right; text-transform: none;
  letter-spacing: 0; color: var(--text); }
.cust-group { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 2px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--brand-blue-2); }
.cust-group span { margin-left: auto; font-size: 12.5px; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--text); }
#autosave-status { margin-bottom: 12px; }
.discbox-hint.warn { color: #f0b429; }
/* Aus dem Hosting-Kalkulator übernommene Zeilen: nur lesend */
.cfg-table tr.row-locked { background: rgba(255,255,255,0.015); }
.cfg-table td.ro-cell { color: var(--muted); padding-top: 12px; white-space: nowrap; }
a.btn-icon { display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; }
.hd-edit { margin-left: 12px; vertical-align: middle; }
.price-input.custom { border-color: #f0b429; color: #f0b429; }
.discbox-reason { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px;
  font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }
.discbox-reason input { width: 100%; min-width: 0; }
.discbox-preview { margin: 12px 0 14px; padding: 9px 11px; border-radius: 9px;
  background: rgba(240,180,41,0.10); border: 1px solid rgba(240,180,41,0.35);
  font-size: 12px; color: var(--text); line-height: 1.5; }
.svc-row { padding: 14px 0; border-bottom: 1px dashed var(--border); }
.svc-row:last-of-type { border-bottom: none; }
.pos-desc { margin-top: 4px; font-size: 12.5px; color: var(--muted); line-height: 1.45;
  white-space: pre-line; }
.pos-desc.missing { color: #f0b429; }
.hint-dot.btn-icon { width: 30px; height: 30px; line-height: 26px; border-radius: 9px; }
.hint-dot.btn-icon.on { border-color: var(--brand-blue); color: var(--brand-blue-2);
  background: rgba(88,166,255,0.14); }
.hint-dot.btn-icon.empty { border-style: dashed; color: #f0b429; border-color: rgba(240,180,41,0.6); }
.cust-desc { display: block; margin-top: 3px; font-size: 12px; color: var(--muted);
  line-height: 1.45; white-space: pre-line; }
/* Wirksamer Einzelpreis bei Rabatt, darunter der Listenpreis */
.price-eff { color: #f0b429; }
.price-list { margin-top: 2px; font-size: 11.5px; color: var(--muted-2);
  text-decoration: line-through; white-space: nowrap; }

/* ═══ Kundenansicht: Umschalter, Bühne, Tabelle ═════════════════════════ */
/* Mehrfachauswahl im Aufnahmebogen: Haken in mehreren Spalten, damit sieben
   Optionen nicht die Karte in die Länge ziehen. */
/* Zweites Symbol in der Preisliste: Angebotstext statt interner Hinweis */
.hint-dot.text-dot { border-color: rgba(88,166,255,0.5); color: #9ecbff; }
.hint-dot.text-dot.empty { border-color: var(--border-strong); color: var(--muted-2); }
/* Drittes Symbol: Kurzname der Plakette */
.hint-dot.short-dot { border-color: rgba(53,208,127,0.5); color: #6ee7a8; }
.hint-dot.short-dot.empty { border-color: var(--border-strong); color: var(--muted-2); }

/* Migrations-Kalkulator: die Rechnung in Sätzen statt in einer Minutentabelle */
.calc-sub-head { font-size: 13px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--muted-2); margin: 22px 0 10px; }
.calc-story { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.calc-story li { padding: 9px 0 9px 26px; position: relative;
  border-bottom: 1px dashed var(--border); line-height: 1.5; }
.calc-story li::before { content: '+'; position: absolute; left: 4px; color: var(--muted-2); }
.calc-story li:first-child::before { content: '·'; }
.calc-story li.calc-story-sum::before,
.calc-story li.calc-story-total::before { content: ''; }
.calc-story li.calc-story-sum { border-top: 1px solid var(--border-strong);
  border-bottom: 0; color: var(--brand-blue-2); }
.calc-story li.calc-story-total { border-top: 1px solid var(--brand-blue);
  border-bottom: 0; font-size: 15px; }

.multi-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px 18px; margin-top: 6px; }
.multi-box .check { margin: 0; font-size: 13.5px; }

.cv-toolbar { display: flex; align-items: center; justify-content: center; gap: 20px;
  flex-wrap: wrap; margin: 4px 0 26px; }
.cv-switch { display: flex; border: 1px solid var(--border-strong); border-radius: 999px;
  overflow: hidden; background: rgba(255,255,255,0.04); }
.cv-switch button { border: 0; background: none; color: var(--muted); font: inherit;
  font-weight: 600; font-size: 13.5px; padding: 9px 24px; cursor: pointer; }
.cv-switch button.on { background: linear-gradient(180deg, var(--brand-blue-2), var(--brand-blue));
  color: #04122b; }
.cv-tools { display: flex; align-items: center; gap: 14px; }
.cv-gaps { display: flex; gap: 7px; align-items: center; font-size: 12.5px;
  color: var(--muted); cursor: pointer; }
.cv-gaps:hover { color: var(--text); }
/* Beide Werkzeugknöpfe teilen dasselbe Aussehen – ohne die gemeinsame Regel bekam
   „Alle Beschreibungen" das Standardaussehen des Browsers (weiß auf hell). */
#cv-replay, #cv-alldesc { border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.04); color: var(--muted); border-radius: 999px;
  padding: 8px 15px; font: inherit; font-size: 12.5px; cursor: pointer; }
#cv-replay:hover, #cv-alldesc:hover { color: var(--text); border-color: var(--brand-blue); }
/* Der Schalter gehört zur Tabelle: in der visuellen Ansicht stehen die
   Beschreibungen im Detailfenster einer Insel, dort wirkt er nicht sichtbar. */
body.cv-view-visual #cv-alldesc { display: none; }

#cv-table { display: none; }
body.cv-view-table #cv-table { display: block; }
body.cv-view-table #cv-visual { display: none; }

/* ── Mobilgeräte: nur die Tabelle ──
   Die Konstellation braucht Breite, auf dem Telefon ist sie nicht lesbar. Also
   entfällt sie samt Umschalter, Potenzialen und Animation. Die Werkzeugleiste läuft
   dort nicht mit, sondern hängt am Seitenende – sonst verdeckt sie Tabellenzeilen. */
@media (max-width: 780px) {
  #cv-visual { display: none !important; }
  #cv-table { display: block !important; }
  .cv-toolbar { display: none; }
  .cust-wrap { padding: 26px 14px 30px; }
  .cust-title { font-size: 28px; margin: 26px 0 8px; }
  .cust-toolbar { position: static; margin: 0 auto 26px; width: max-content;
    padding: 5px; gap: 4px; }
  .ct-btn { width: 34px; height: 34px; }
  .ct-btn svg { width: 18px; height: 18px; }
  .cust-table { font-size: 12.5px; }
  .cust-table th, .cust-table td { padding: 7px 6px; }
  /* Menge und Einzelpreis wandern in die Leistungszeile, damit die beiden
     Summenspalten ohne Querscrollen sichtbar bleiben. */
  .cust-table { table-layout: fixed; }
  .cust-table .cc-name { width: 47%; }
  .cust-table .cc-qty, .cust-table .cc-unit { width: 0; }
  .cust-table .cc-m, .cust-table .cc-o { width: 26.5%; }
  /* Mit Jahresspalte teilen sich drei Geldspalten die Breite */
  .cust-table:has(.cc-y) .cc-name { width: 40%; }
  .cust-table:has(.cc-y) .cc-m,
  .cust-table:has(.cc-y) .cc-y,
  .cust-table:has(.cc-y) .cc-o { width: 20%; }
  .cust-table thead th { font-size: 9.5px; letter-spacing: 0.3px; padding: 8px 8px; }
  .cust-table td, .cust-table tr.ct-head td, .cust-table tr.ct-sub td { padding-left: 8px;
    padding-right: 8px; }
  /* Nicht display:none – das verschiebt bei fester Spaltenaufteilung alle folgenden
     Zellen eine Spalte nach links. Die Zellen bleiben stehen, sind aber nullbreit. */
  .cust-table .ct-qty, .cust-table .ct-unit { padding: 0; font-size: 0; line-height: 0;
    color: transparent; overflow: hidden; }
  .cust-table .ct-name { overflow-wrap: break-word; }
  .cust-table .ct-mini { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted-2); }
}

/* ── Bühne ── */
#cv-visual { position: relative; padding: 6px 0 10px; }
.cv-stage { position: relative; margin: 0 auto; }
#cv-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  overflow: visible; }
.cv-line { fill: none; stroke: rgba(88,166,255,0.32); stroke-width: 1.6;
  transition: stroke-dashoffset 1s ease var(--ld, 0.6s); }
.cv-pulse { fill: #9ecbff; opacity: 0; filter: drop-shadow(0 0 6px rgba(88,166,255,0.9)); }

.cv-hub { position: relative; z-index: 4; display: flex; align-items: center; gap: 14px;
  justify-content: center; margin-bottom: 40px; opacity: 0; transform: translateY(-12px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s; }
#cv-visual.go .cv-hub { opacity: 1; transform: none; }
/* Konstellation: conpro sitzt exakt in der Mitte, die Bereiche liegen berechnet darum */
.cv-stage.radial .cv-hub { position: absolute; margin: 0;
  flex-direction: column; gap: 10px; text-align: center;
  transform: translate(-50%,-50%) scale(0.9); }
#cv-visual.go .cv-stage.radial .cv-hub { transform: translate(-50%,-50%); }
.cv-stage.radial .cv-hub-badge { width: 92px; height: 92px; }
.cv-stage.radial .cv-hub-badge img { width: 56px; }
/* Weiche Abdeckung: die Strahlen starten dicht am Logo und laufen dadurch hinter dem
   Kundennamen durch. Der Verlauf blendet sie dort aus, ohne eine harte Kante zu zeigen. */
.cv-stage.radial .cv-hub-text { position: relative; padding: 4px 20px; }
.cv-stage.radial .cv-hub-text::before { content: ''; position: absolute;
  inset: -14px -34px -18px -34px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, #070b16 0%, #070b16 58%, rgba(7,11,22,0) 100%); }
.cv-stage.radial .cv-hub-text span { display: block; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted-2); }
.cv-stage.radial .cv-hub-text b { display: block; font-size: 18px; max-width: 260px; }
.cv-stage.radial .cv-islands { position: absolute; inset: 0; display: block; }
.cv-stage.radial .cv-island { position: absolute; transform: translate(-50%,-50%);
  margin: 0; width: 384px; }
.cv-hub-badge { width: 56px; height: 56px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; border: 1px solid rgba(88,166,255,0.6);
  background: radial-gradient(circle at 35% 30%, rgba(88,166,255,0.25), rgba(11,42,115,0.5));
  box-shadow: 0 0 22px rgba(54,147,255,0.35); }
#cv-visual.cv-done .cv-hub-badge { animation: cvHub 3.4s ease-in-out infinite; }
@keyframes cvHub { 0%,100% { box-shadow: 0 0 18px rgba(54,147,255,0.3); }
  50% { box-shadow: 0 0 34px rgba(54,147,255,0.6); } }
.cv-hub-badge img { width: 34px; height: auto; }
.cv-hub-text { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.cv-hub-text b { color: var(--text); font-size: 15.5px; }

.cv-islands { position: relative; z-index: 1; display: flex; flex-wrap: wrap;
  justify-content: center; align-items: flex-start; gap: 46px 30px; }
.cv-island { width: 340px; display: flex; flex-direction: column; align-items: center; }
.cv-island.small { width: 250px; }
.cv-scene { position: relative; margin: 0 auto; }
.cv-ringsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cv-ringsvg .rbg { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 1.5; }
.cv-ringsvg .rfg { fill: none; stroke: rgba(88,166,255,0.55); stroke-width: 2;
  stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  transform: rotate(-90deg); transform-origin: center;
  transition: stroke-dashoffset 1.1s ease calc(var(--d, 1s) + 0.35s);
  filter: drop-shadow(0 0 8px rgba(88,166,255,0.35)); }
#cv-visual.go .rfg { stroke-dashoffset: 0; }
#cv-visual.cv-done .rfg { animation: cvShield 4.5s ease-in-out infinite; }
@keyframes cvShield { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }

.cv-device { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 160px; border: 0; background: none; color: inherit; font: inherit;
  cursor: pointer; text-align: center; opacity: 0.12; will-change: opacity;
  transition: opacity 0.7s ease var(--d, 1s); }
#cv-visual.go .cv-device { opacity: 1; }
.cv-device svg { width: 82px; height: 82px; stroke: #8fc2ff; stroke-width: 1.4; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(88,166,255,0.35)); }
.cv-island.small .cv-device svg { width: 58px; height: 58px; }
.cv-device:hover svg { filter: drop-shadow(0 0 16px rgba(88,166,255,0.65)); }
.cv-count { margin-top: 5px; font-size: 13.5px; font-weight: 700; }
.cv-count2 { font-size: 11.5px; color: var(--muted); }
.cv-island.small .cv-count { font-size: 12px; }
.cv-island.small .cv-count2 { font-size: 10.5px; }

.cv-badge { position: absolute; transform: translate(-50%,-50%) scale(0.5); z-index: 3;
  display: flex; align-items: center; gap: 6px; white-space: nowrap; border-radius: 999px;
  border: 1px solid rgba(88,166,255,0.55); background: rgba(13,26,50,0.94);
  color: var(--text); font: inherit; font-size: 11px; font-weight: 600; line-height: 1.25;
  padding: 6px 11px; cursor: pointer; opacity: 0; text-align: left;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  will-change: opacity, transform;
  transition: opacity 0.4s ease var(--bd, 1.6s),
              transform 0.4s cubic-bezier(0.3,1.25,0.5,1) var(--bd, 1.6s),
              border-color 0.2s, background 0.2s; }
#cv-visual.go .cv-badge { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.cv-island.small .cv-badge { font-size: 10px; padding: 5px 9px; }
.cv-badge i { font-style: normal; display: inline-flex; align-items: center;
  justify-content: center; flex: 0 0 15px; width: 15px; height: 15px; border-radius: 50%;
  background: rgba(53,208,127,0.22); color: #6ee7a8; font-size: 9.5px; }
.cv-badge:hover { border-color: #9ecbff; }
.cv-badge.off { opacity: 0.35 !important; border-style: dashed; filter: grayscale(0.8); }
/* Ganze Insel abgewählt (nur Managed Hosting): gleiche Sprache wie bei den
   Plaketten – ausgegraut, aber weiterhin anklickbar. */
.cv-off .cv-device, .cv-off .cv-cluster-icon, .cv-off .cv-cluster-text,
.cv-off .cv-inname, .cv-off .cv-count, .cv-off .cv-count2 {
  opacity: 0.35; filter: grayscale(1); }
.cv-off .rfg { stroke: rgba(255,255,255,0.18); }
.cv-cluster.cv-off .cv-cluster-kids { opacity: 0.35; filter: grayscale(1); }
.cv-moon.cv-off .cv-moon-disc, .cv-moon.cv-off .cv-moon-label {
  opacity: 0.32; filter: grayscale(1); }
/* Abgeschaltete Insel: auch ihre Plaketten verblassen, damit der ganze Baustein
   als „nicht dabei" lesbar ist. Der Schalter selbst bleibt kräftig. */
.cv-island.cv-off .cv-badge { opacity: 0.3; filter: grayscale(1); }
.cv-island.cv-off .cv-isl-toggle { opacity: 1; filter: none; }
.cv-island { position: relative; }
.cv-isl-toggle { position: absolute; top: 50%; left: 50%; z-index: 4;
  transform: translate(-50%, -50%) translate(0, -74px);
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border-strong); background: rgba(10,16,30,0.9);
  color: var(--brand-blue-2); font-size: 13px; line-height: 20px; padding: 0; }
.cv-isl-toggle:hover { border-color: var(--brand-blue); color: #fff; }
.cv-isl-toggle.off { color: var(--muted-2); border-style: dashed; }
.cv-cluster-head { position: relative; }
.cv-cluster-head .cv-isl-toggle { top: 50%; left: auto; right: 12px;
  transform: translateY(-50%); }
.cv-badge.off i { background: rgba(255,255,255,0.08); color: var(--muted-2); }
.cv-badge.ghost { border-style: dashed; border-color: rgba(240,180,41,0.55);
  color: var(--muted); background: rgba(26,22,12,0.85); }
.cv-badge.ghost i { background: rgba(240,180,41,0.16); color: #f0b429; }
.cv-badge.ghost.active { border-style: solid; color: var(--text); border-color: #f0b429;
  background: rgba(240,180,41,0.14); }
.cv-badge.dep-off { opacity: 0.3 !important; border-style: dotted; }
.cv-badge.lock { cursor: default; }
.cv-badge.lock:hover { border-color: rgba(88,166,255,0.55); }
.cv-badge.ghost.lock:hover { border-color: rgba(240,180,41,0.55); }
.cv-badge.inline { position: static; transform: none; opacity: 1; }
#cv-visual.go .cv-badge.inline { transform: none; }

.cv-island.ghost .cv-device { opacity: 0.35 !important; filter: grayscale(1) !important; }
.cv-island.ghost .rfg { stroke: rgba(240,180,41,0.35); }
.cv-island.ghost .cv-isum { color: #f0b429; }

.cv-ilabel { margin-top: 26px; text-align: center; padding-bottom: 6px; }
.cv-ilabel b { font-size: 15px; }
.cv-island.small .cv-ilabel b { font-size: 13px; }
.cv-isum { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600;
  color: var(--brand-blue-2); }

/* Hosting-Cluster: Mutter-Insel mit Servern darum */
.cv-cluster { position: relative; width: 100%; max-width: 1180px; margin: 6px auto 0;
  border: 1px solid rgba(88,166,255,0.28); border-radius: 26px; padding: 26px 26px 8px;
  background: radial-gradient(520px 260px at 50% 0%, rgba(54,147,255,0.10), transparent 72%);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s ease var(--d, 1s), transform 0.6s ease var(--d, 1s); }
#cv-visual.go .cv-cluster { opacity: 1; transform: none; }
.cv-cluster-head { display: flex; align-items: center; justify-content: center; gap: 15px;
  width: 100%; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  text-align: left; padding: 0 0 4px; }
.cv-cluster-icon { display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; flex: 0 0 62px; border-radius: 50%;
  border: 1px solid rgba(88,166,255,0.55);
  background: radial-gradient(circle at 35% 30%, rgba(88,166,255,0.22), rgba(11,42,115,0.45));
  box-shadow: 0 0 20px rgba(54,147,255,0.28); }
.cv-cluster-icon svg { width: 34px; height: 34px; stroke: #8fc2ff; stroke-width: 1.4;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }
#cv-visual.cv-done .cv-cluster-icon { animation: cvHub 3.8s ease-in-out infinite; }
.cv-cluster-text b { display: block; font-size: 19px; letter-spacing: -0.2px; }
.cv-cluster-text em { display: block; font-style: normal; font-size: 12.5px;
  color: var(--muted); margin-top: 1px; }
.cv-cluster-text .cv-isum { margin-top: 3px; font-size: 14px; }
.cv-cluster-kids { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 24px 26px; margin-top: 20px; padding-top: 22px;
  border-top: 1px dashed rgba(88,166,255,0.22); }
.cv-cluster-kids .cv-island { margin: 0; }

/* Trabanten: kleine Server-Scheiben, die vom Hosting nach außen aufgefächert sind */
/* Konstellation: Name, Menge und Summen stehen im Kreis – außen bleibt alles frei */
.cv-island.cv-inside .cv-device { width: 230px; }
.cv-island.cv-inside .cv-device svg { width: 66px; height: 66px; }
.cv-inname { margin-top: 7px; font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.cv-island.cv-inside .cv-count { margin-top: 3px; font-size: 12px; font-weight: 500;
  color: var(--muted); }
.cv-island.cv-inside .cv-count2 { font-size: 11px; }
.cv-island.cv-inside .cv-isum { margin-top: 7px; font-size: 12.5px; }
.cv-isum span { display: block; }
.cv-isum span.once { color: var(--text); font-weight: 600; }

.cv-moon { position: absolute; transform: translate(-50%,-50%) scale(0.6); z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  width: 116px; border: 0; background: none; color: inherit; font: inherit;
  cursor: pointer; text-align: center; opacity: 0; will-change: opacity, transform;
  transition: opacity 0.45s ease var(--bd, 1.9s),
              transform 0.45s cubic-bezier(0.3,1.25,0.5,1) var(--bd, 1.9s); }
#cv-visual.go .cv-moon { opacity: 1; transform: translate(-50%,-50%); }
#cv-lines .cv-line-fix { stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
  opacity: 0.5; }
.cv-moon-disc { display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; margin: 0 auto; border-radius: 50%;
  border: 1px solid rgba(88,166,255,0.42); background: rgba(13,26,50,0.85); }
.cv-moon:hover .cv-moon-disc { border-color: #9ecbff;
  box-shadow: 0 0 16px rgba(88,166,255,0.35); }
.cv-moon-disc svg { width: 34px; height: 34px; stroke: #8fc2ff; stroke-width: 1.4;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Beschriftung exakt mittig unter der Scheibe – die Flex-Spalte zentriert beides */
.cv-moon-label { display: block; margin-top: 5px; line-height: 1.3;
  width: 124px; text-align: center; }
.cv-moon-label b { display: block; font-size: 11.5px; }
.cv-moon-label .cv-isum { font-size: 11.5px; margin-top: 1px; }

.cv-ribbon { position: relative; z-index: 1; margin: 26px auto 6px; max-width: 1020px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 24px;
  border: 1px solid rgba(88,166,255,0.4); border-radius: 16px;
  background: linear-gradient(120deg, rgba(54,147,255,0.13), rgba(11,42,115,0.28));
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s ease 2.4s, transform 0.6s ease 2.4s; }
#cv-visual.go .cv-ribbon { opacity: 1; transform: none; }
.cv-ribbon-icon svg { width: 34px; height: 34px; stroke: #8fc2ff; fill: none;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cv-ribbon-main b { display: block; font-size: 15px; }
.cv-ribbon-main span { font-size: 12.5px; color: var(--muted); }
.cv-ribbon-badges { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.cv-ribbon-sum { font-weight: 700; color: var(--brand-blue-2); min-width: 132px;
  text-align: right; }
.cv-ribbon.ghost { border-style: dashed; border-color: rgba(240,180,41,0.5);
  background: rgba(240,180,41,0.05); }

/* Die Simulationszeile gehört zur mitlaufenden Gruppe: sie erscheint nur während
   einer Simulation und muss dann genauso sichtbar bleiben wie der Preis darüber. */
.cv-simnote { position: sticky; bottom: 20px; z-index: 29;
  margin: 12px 0 0; padding: 11px 16px; border-radius: 12px;
  backdrop-filter: blur(6px); box-shadow: 0 -8px 22px rgba(4,8,18,0.45);
  border: 1px solid rgba(240,180,41,0.5); background: rgba(240,180,41,0.1);
  font-size: 13px; }
.cv-simnote button { margin-left: 12px; border: 1px solid rgba(240,180,41,0.6);
  background: none; color: #f0b429; border-radius: 999px; padding: 4px 12px;
  font: inherit; font-size: 12px; cursor: pointer; }

/* ── Tabellen-Ansicht ── */
.cust-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cust-table thead th { text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--muted-2); padding: 10px 16px;
  border-bottom: 1px solid var(--border-strong); }
.cust-table th.num, .cust-table td.num { text-align: right; white-space: nowrap; }
.cust-table td { padding: 11px 16px; border-bottom: 1px solid var(--border); }
.cust-table tr.ct-head td { padding-top: 30px; font-size: 14px; font-weight: 700;
  color: var(--brand-blue-2); border-bottom: 2px solid var(--brand-blue); }
.ct-ico { margin-right: 9px; }
.cust-table tr.ct-sub td { padding: 17px 16px 5px; font-size: 13.5px; font-weight: 700;
  letter-spacing: -0.1px; color: #9ecbff; border-bottom: 0; }
.cust-table tr.ct-sub td.num { color: var(--text); }
.ct-mini { display: none; }
.ct-desc { display: block; margin-top: 3px; font-size: 12px; color: var(--muted);
  font-weight: 400; }
/* Das display:block oben schlägt das HTML-Attribut „hidden" – ohne diese Zeile
   stehen die eingeklappten Beschreibungen trotzdem sichtbar da. */
.ct-desc[hidden] { display: none; }
/* Beschreibungen als echte Aufzählung: der Punkt hängt links außen, umgebrochene
   Zeilen beginnen auf Texthöhe. Der Einzug in ch-Einheiten, damit er bei jeder
   Schriftgröße zum Zeichen passt – am Bildschirm wie im Ausdruck. */
/* Eigener Punkt statt des Browser-Markers: nur so sind Einzug und Abstand exakt
   steuerbar. „padding-left" der Liste ist der Einzug des Punktes, „padding-left"
   des Eintrags der Abstand zwischen Punkt und Text. */
/* Bindestrich wie im gepflegten Text: Er steht genau dort, wo auch eine Zeile
   ohne Aufzählung beginnt – die Liste hat deshalb keinen eigenen Einzug. Der
   Abstand dahinter entspricht dem Leerzeichen aus „- ". Neu ist nur, dass
   umgebrochene Zeilen auf Texthöhe weiterlaufen statt unter dem Strich. */
.desc-list { margin: 2px 0 0; padding-left: 0; list-style: none; }
.desc-list li { position: relative; margin: 0 0 1px; padding-left: 0.75em; }
.desc-list li::before { content: "-"; position: absolute; left: 0; top: 0;
  line-height: inherit; }
.desc-p { margin: 3px 0 0; }
.desc-p:first-child, .desc-list:first-child { margin-top: 2px; }
.ct-dim { color: var(--muted-2); }

/* Detail-Fenster einer Insel */
#cv-detail[hidden] { display: none; }
#cv-detail { position: fixed; inset: 0; z-index: 300; background: rgba(4,8,18,0.72);
  backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center;
  padding: 24px; }
.cvd-card { width: 100%; max-width: 700px; max-height: 80vh; overflow: auto;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border-strong); border-radius: 16px; padding: 22px 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.7); }
.cvd-head { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; }
.cvd-head h3 { margin: 0; font-size: 17px; }
#cvd-close { border: 0; background: none; color: var(--muted); font-size: 16px;
  cursor: pointer; }
#cvd-close:hover { color: var(--text); }
.cvd-body table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cvd-body td { padding: 9px 10px; border-bottom: 1px dashed var(--border);
  vertical-align: top; }
.cvd-body td.num { text-align: right; white-space: nowrap; }
.cvd-body em { font-style: normal; font-size: 11px; color: var(--muted-2); }
/* Rubrikzeile im Detailfenster – gleiche Sprache wie in der Tabellenansicht */
.cvd-body tr.cvd-grp td { padding: 15px 10px 4px; font-size: 13px; font-weight: 700;
  color: #9ecbff; border-bottom: 0; }
.cvd-body tr.cvd-grp:first-child td { padding-top: 4px; }

@media print {
  .cv-toolbar, #cv-visual, .cv-simnote, #cv-detail { display: none !important; }
  /* Im Ausdruck keine mitlaufende Leiste – sie steht am Ende im Fluss. */
  .cust-total, .cv-simnote { position: static !important; box-shadow: none !important;
    backdrop-filter: none !important; }
  #cv-table { display: block !important; }
  .cust-table td, .cust-table th { color: #111 !important; border-color: #bbb !important; }
  .cust-table tr.ct-head td { color: #0b2a73 !important; }
  /* Im Ausdruck stehen ALLE Beschreibungen – unabhängig davon, was am Bildschirm
     auf- oder zugeklappt war. Das Aufklapp-Zeichen selbst wird nicht gedruckt. */
  .ct-desc { color: #444 !important; display: block !important; }
  .ct-desc[hidden] { display: block !important; }
  .desc-plus { display: none !important; }

  /* Spaltenaufteilung für A4. Die Regeln der Mobilansicht greifen hier mit (die
     Druckbreite liegt unter 780 px) und gaben den Geldspalten je 20–26 % – bei
     Beträgen wie „144,00 €" ist das weit mehr als nötig, und der Produktname
     musste auf 275 px umbrechen. Jetzt bekommen die Geldspalten eine feste,
     knappe Breite, der Rest gehört dem Namen. */
  .cust-table { font-size: 11.5px; }
  .cust-table .cc-name,
  .cust-table:has(.cc-y) .cc-name { width: auto; }
  /* Der Ausdruck bringt IMMER dieselbe Aufteilung mit – unabhängig davon, welche
     Seitenränder im Druckdialog stehen. Vorher hing das an der Bildschirmregel
     „schmaler als 780 px": bei A4 mit Rändern (718 px) griff sie, ohne Ränder
     (794 px) nicht, und dann standen plötzlich Menge und Einzelpreis als eigene
     Spalten da – zusätzlich zur Angabe hinter dem Produktnamen. */
  .cust-table { table-layout: fixed; }
  .cust-table .cc-qty, .cust-table .cc-unit { width: 0; }
  .cust-table .ct-qty, .cust-table .ct-unit { padding: 0; font-size: 0; line-height: 0;
    color: transparent; overflow: hidden; }
  .cust-table thead th.ct-qty, .cust-table thead th.ct-unit { padding: 0; font-size: 0;
    line-height: 0; color: transparent; overflow: hidden; }
  .cust-table .ct-name { overflow-wrap: break-word; }

  /* Spaltenbreiten nach dem größten vorgesehenen Betrag, gemessen bei 11,5 px
     zuzüglich 12 px Innenabstand:
       monatlich  bis  9.999,99 €  → 65 + 12 = 78 px
       jährlich   bis 99.999,99 €  → 73 + 12 = 86 px
       einmalig   bis 99.999,99 €  → 73 + 12 = 86 px
     Alles darüber liefe aus der Zelle – bei diesen Größenordnungen gehört ohnehin
     ein Blick auf das Angebot. */
  .cust-table .cc-m, .cust-table:has(.cc-y) .cc-m { width: 78px; }
  .cust-table .cc-o, .cust-table:has(.cc-y) .cc-o,
  .cust-table:has(.cc-y) .cc-y { width: 86px; }
  .cust-table thead th { font-size: 8.5px; padding: 6px 6px; }
  .cust-table td, .cust-table tr.ct-head td, .cust-table tr.ct-sub td {
    padding: 5px 6px; }
  /* Menge × Einzelpreis läuft im Ausdruck hinter dem Produktnamen weiter, mit
     Bindestrich getrennt – das spart je Position eine Zeile. Am Bildschirm und auf
     dem Telefon bleibt es eine eigene Zeile. */
  .cust-table .ct-mini { display: inline; font-size: 10px; margin: 0;
    white-space: nowrap; }
  .cust-table .ct-mini::before { content: " - "; }
  .ct-desc { font-size: 10px; margin-top: 2px; line-height: 1.4; }
  /* Rubrik- und Gruppenzeilen: im Ausdruck standen ihre Beträge deutlich größer da
     als die Zahlen der Positionen darunter. Jetzt nur noch leicht abgesetzt. */
  .cust-table tr.ct-head td { font-size: 11.5px; padding-top: 14px; }
  .cust-table tr.ct-sub td { font-size: 11px; padding-top: 8px; }
}

/* ─── Beschreibung je Position: Aufklapp-Zeichen ─────────────────────────── */
.desc-plus { margin-left: 7px; padding: 0; width: 17px; height: 17px; flex: 0 0 auto;
  border: 1px solid var(--border-strong); border-radius: 5px; background: none;
  color: var(--muted); font-size: 12px; line-height: 13px; cursor: pointer;
  vertical-align: middle; }
.desc-plus:hover, .desc-plus[aria-expanded="true"] { border-color: var(--brand-blue);
  color: var(--brand-blue-2); background: rgba(88,166,255,0.12); }
#cv-alldesc.on { border-color: var(--brand-blue); color: var(--brand-blue-2);
  background: rgba(88,166,255,0.14); }
#cv-visual.cv-noanim, #cv-visual.cv-noanim * {
  transition: none !important; animation: none !important; }

/* ─── Vertragsdokument ───────────────────────────────────────────────────────
   Weißes Blatt auch am Bildschirm: der Vertrag ist ein Dokument, keine
   Dashboard-Seite. Bildschirm und Ausdruck sehen dadurch gleich aus. */
body.vtr-body { background: #4a5468; padding: 0 0 60px; }
body.vtr-body::before { display: none; }
.vtr-bar { position: sticky; top: 0; z-index: 10; display: flex; gap: 8px;
  justify-content: flex-end; padding: 12px 20px;
  background: rgba(12,18,32,0.86); backdrop-filter: blur(6px); }
.vtr-page { max-width: 850px; margin: 26px auto; padding: 54px 62px 46px;
  background: #fff; color: #14181f; border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  font-size: 13px; line-height: 1.65; }
.vtr-page p { margin: 0 0 10px; }

.vtr-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; padding-bottom: 18px; border-bottom: 2px solid #0b2a73; }
.vtr-logo { height: 46px; width: auto; }
.vtr-nr { text-align: right; font-size: 11.5px; color: #555; line-height: 1.6; }
.vtr-nr b { color: #0b2a73; }

.vtr-title { margin: 26px 0 2px; font-size: 23px; color: #0b2a73; letter-spacing: -0.2px; }
.vtr-sub { margin: 0 0 22px; color: #666; font-size: 12.5px; }

.vtr-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 30px; }
.vtr-party { border: 1px solid #ccd3e0; border-radius: 6px; padding: 14px 16px; }
.vtr-party-role { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
  color: #0b2a73; font-weight: 700; margin-bottom: 6px; }
.vtr-party-name { font-size: 14.5px; font-weight: 700; }
.vtr-party-meta { margin-top: 5px; font-size: 11.5px; color: #555; }

.vtr-sec { margin-bottom: 18px; break-inside: avoid; }
/* Ein Abschnitt mit Positionstabelle kann länger als eine Seite sein: dort darf
   umbrochen werden, aber nie mitten in einer Zeile. */
.vtr-sec:has(.vtr-tab) { break-inside: auto; }
.vtr-tab tr { break-inside: avoid; }
/* Kopfzeile auf jeder Seite wiederholen, die Summenzeilen aber NICHT: Chromium
   behandelt tfoot sonst als Seitenfuß und druckt die Gesamtsummen auf jede Seite. */
.vtr-tab thead { display: table-header-group; }
.vtr-tab tfoot { display: table-row-group; }
.vtr-sec h2 { margin: 0 0 8px; font-size: 14px; color: #0b2a73;
  border-bottom: 1px solid #dde2ec; padding-bottom: 4px; }
.vtr-list { margin: 8px 0 0; padding-left: 20px; }
.vtr-list li { margin-bottom: 6px; }
.vtr-leer { color: #a33; }

.vtr-tab { width: 100%; border-collapse: collapse; margin: 12px 0 8px; font-size: 12px;
  table-layout: fixed; }
.vtr-tab th { background: #f1f4fa; color: #0b2a73; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.6px; padding: 7px 8px;
  border-bottom: 1px solid #ccd3e0; }
.vtr-tab td { padding: 7px 8px; border-bottom: 1px solid #e8ebf2; vertical-align: top; }
.vtr-tab .l { text-align: left; }
.vtr-tab .r { text-align: right; white-space: nowrap; }

.vtr-tab .c { text-align: center; white-space: nowrap; }
/* Beschreibungen dürfen mehrzeilig sein (Aufzählungen) – wie im Konfigurator
   und in der Kundenansicht bleiben die Zeilenumbrüche erhalten. */
.vtr-desc { margin-top: 3px; font-size: 11px; color: #555; white-space: pre-line; }
.vtr-unit { color: #777; font-size: 11px; }
/* Abrechnungsart klein unter dem Betrag – spart eine eigene Spalte, damit die
   Produktnamen einzeilig bleiben. */
.vtr-turnus { display: block; font-size: 10px; color: #777; font-weight: 400; }
.vtr-grp td { background: #f7f9fd; font-weight: 700; color: #0b2a73; font-size: 12.5px;
  padding-top: 10px; }
.vtr-grp-sum td { font-size: 11.5px; color: #444; border-bottom: 1px solid #ccd3e0; }
.vtr-tab tfoot td { font-weight: 700; color: #0b2a73; border-bottom: none;
  border-top: 1px solid #ccd3e0; }

.vtr-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  margin: 30px 0 0; break-inside: avoid; }
.vtr-sign-line { border-bottom: 1px solid #14181f; height: 46px; }
.vtr-sign-label { margin-top: 5px; font-size: 11px; color: #555; }
.vtr-sign-name { font-size: 12px; }
/* Unterschriftenblock und Fußzeile bilden einen Block: die Fußzeile darf nie
   allein auf einer Seite landen, und mitten durch die Unterschriften wird nicht
   umbrochen. */
.vtr-close { break-inside: avoid; }
.vtr-foot { margin-top: 22px; padding-top: 12px; border-top: 1px solid #ccd3e0;
  font-size: 10.5px; color: #666; line-height: 1.6; }

/* Anlage beginnt auf einer neuen Seite und ist am Bildschirm klar abgesetzt */
.vtr-annex { margin-top: 46px; padding-top: 34px; border-top: 3px double #ccd3e0;
  break-before: page; }

@media print {
  body.vtr-body { background: #fff; padding: 0; }
  .vtr-annex { margin-top: 0; padding-top: 0; border-top: none; }
  .vtr-bar { display: none !important; }
  .vtr-page { max-width: none; margin: 0; padding: 0; box-shadow: none; border-radius: 0; }
  .vtr-party { border-color: #bbb; }
  /* Im Druck übernimmt Chromium die laufende Fußzeile (Impressum + Seitenzahl,
     siehe app/core/pdf.py). Sie sitzt im Seitenrand und kann deshalb nie Inhalt
     überdecken – der Block im Fluss wird dafür ausgeblendet. */
  .vtr-foot { display: none; }
}
@media screen and (max-width: 700px) {
  .vtr-page { padding: 26px 20px; margin: 12px; }
  .vtr-parties, .vtr-sign { grid-template-columns: 1fr; }
  .vtr-head { flex-direction: column; }
  .vtr-nr { text-align: left; }
}

/* Vertragsübersicht im Prozess */
.vtr-cards { display: grid; gap: 16px; }
.vtr-card { border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 18px 20px; background: linear-gradient(180deg, var(--panel), var(--panel-2)); }
.vtr-card.inaktiv { opacity: 0.55; }
.vtr-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.vtr-card-head h3 { margin: 0; font-size: 16px; }
.vtr-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.8px;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-strong);
  color: var(--muted); }
.vtr-tag.pflicht { border-color: var(--brand-blue); color: var(--brand-blue-2); }
.vtr-tag.ok { border-color: #3fb950; color: #56d364; }
.vtr-tag.warn { border-color: #f0b429; color: #f0b429; }
.vtr-card-sub { margin: 4px 0 14px; color: var(--muted); font-size: 12.5px; }
.vtr-sums { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px;
  font-size: 12.5px; color: var(--muted); }
.vtr-sums b { color: var(--text); font-size: 14px; }
.vtr-vers { margin-top: 12px; font-size: 12px; color: var(--muted-2); }


/* ─── Skill-Matrix ──────────────────────────────────────────
   Ein Zeilen-Bauteil für ALLE Listen (Bereiche, Top-Fähigkeiten, Interessen,
   Engste Stellen), damit die Blöcke gleich aussehen und gleich hoch werden. */
.sk-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 18px; }
.sk-nav .btn.on { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }

.sk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.sk-kpi { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.sk-kpi span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.sk-kpi b { display: block; font-size: 30px; margin: 4px 0 2px; }
.sk-kpi i { color: var(--muted-2); font-size: 12px; font-style: normal; }

/* Zwei Karten nebeneinander, immer gleich hoch */
.duo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.duo-cards > .card { margin-top: 0; display: flex; flex-direction: column; }
.duo-cards > .card > .sk-rows { flex: 1; }
@media (max-width: 1100px) { .duo-cards { grid-template-columns: 1fr; } }

/* Einheitliche Listenzeile */
.sk-rows { display: flex; flex-direction: column; margin-top: 4px; }
.sk-rows.scroll { max-height: 470px; overflow-y: auto; }
.sk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 9px 2px; border-bottom: 1px solid var(--border); min-height: 46px; }
.sk-row:last-child { border-bottom: 0; }
.sk-row.bar { grid-template-columns: minmax(0, 210px) minmax(80px, 1fr) 104px; }
.sk-row-main { min-width: 0; }
.sk-row-title { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-row-title a { color: var(--text); }
.sk-row-title a:hover { color: var(--brand-blue-2); }
.sk-row-sub { color: var(--muted-2); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-row-val { display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.sk-row-num { font-variant-numeric: tabular-nums; }
.sk-row-lead { display: flex; align-items: center; gap: 10px; min-width: 0; }

.sk-bar-track { height: 12px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 4px; overflow: hidden; display: block; }
.sk-bar-track i { display: block; height: 100%; background: var(--brand-blue); }
.sk-pill { display: inline-block; min-width: 22px; text-align: center; padding: 1px 6px; border-radius: 5px;
  font-size: 12px; font-weight: 700; color: #07121f; flex: none; }
.sk-pill.lv1 { background: #ef7b7b; } .sk-pill.lv2 { background: #f0a868; }
.sk-pill.lv3 { background: #edd06a; } .sk-pill.lv4 { background: #cee29d; }
.sk-pill.lv5 { background: #8fd39a; } .sk-pill.lv6 { background: #57c5b6; }
.sk-bar-track i.lv1 { background: #ef7b7b; } .sk-bar-track i.lv2 { background: #f0a868; }
.sk-bar-track i.lv3 { background: #edd06a; } .sk-bar-track i.lv4 { background: #cee29d; }
.sk-bar-track i.lv5 { background: #8fd39a; } .sk-bar-track i.lv6 { background: #57c5b6; }
.sk-int { color: #57a6ff; font-size: 13px; }
.sk-w { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: 11px;
  background: rgba(54,147,255,.16); color: var(--brand-blue-2); }
.sk-leer { color: var(--muted); font-size: 13px; margin: 10px 0 0; }

/* Entwicklung */
.sk-verlauf { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; }
.sk-verlauf .sk-line { flex: 1; min-height: 150px; height: auto; }
.sk-delta { display: flex; align-items: baseline; gap: 10px; }
.sk-delta b { font-size: 30px; }
.sk-delta span { color: var(--muted); font-size: 13px; }
.sk-delta .up { color: var(--pos); } .sk-delta .down { color: var(--neg); }
.sk-line { width: 100%; height: 160px; }
.sk-punkte { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }

/* Fragebogen */
.sk-skala { padding: 12px 18px; font-size: 13px; color: var(--muted); }
.sk-form-table td { vertical-align: top; }
.sk-name { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.sk-info { border: 1px solid var(--border-strong); background: none; color: var(--muted);
  border-radius: 50%; width: 18px; height: 18px; font-size: 11px; cursor: pointer; line-height: 1; }
.sk-info:hover { color: var(--text); }
.sk-stufen { margin-top: 6px; font-size: 12.5px; color: var(--muted); max-width: 620px; }
.sk-stufen div { padding: 1px 0; }
.sk-choice { display: inline-flex; gap: 3px; }
.sk-choice button { border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--muted);
  border-radius: 6px; min-width: 28px; height: 28px; font: inherit; font-size: 12.5px; cursor: pointer; }
.sk-choice button:hover { color: var(--text); border-color: var(--brand-blue); }
.sk-choice button.on { color: #07121f; font-weight: 700; border-color: transparent; }
.sk-choice button.on.lv1 { background: #ef7b7b; } .sk-choice button.on.lv2 { background: #f0a868; }
.sk-choice button.on.lv3 { background: #edd06a; } .sk-choice button.on.lv4 { background: #cee29d; }
.sk-choice button.on.lv5 { background: #8fd39a; } .sk-choice button.on.lv6 { background: #57c5b6; }
.sk-choice button.on[data-wert=""] { background: var(--muted-2); color: var(--text); }
.sk-int-choice button.on.i-1 { background: #ef7b7b; }
.sk-int-choice button.on.i0 { background: var(--muted-2); color: var(--text); }
.sk-int-choice button.on.i1 { background: #57a6ff; }
.sk-gew button.on { background: var(--brand-blue); color: #fff; }
.sk-choice.gesperrt button { cursor: default; opacity: .75; }
.sk-choice.gesperrt button:hover { border-color: var(--border-strong); color: var(--muted); }
.sk-choice.gesperrt button.on:hover { color: #07121f; }
.sk-ok { color: var(--pos); } .sk-warn { color: #f0a868; }
.sk-top3 { margin: 8px 0 0; padding-left: 20px; }
.sk-top3 li { padding: 7px 0; border-bottom: 1px solid var(--border); }
.sk-top3 li:last-child { border-bottom: 0; }
.sk-top3-name { font-weight: 600; margin: 0 8px; }

/* Katalog-Verwaltung: Vorschau kompakt, Bearbeiten über die volle Breite */
.sk-kat { table-layout: fixed; width: 100%; }
.sk-kat td { vertical-align: top; }
.sk-kat-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-kat-aktionen { white-space: nowrap; text-align: right; }
.sk-icon { border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--muted);
  border-radius: 6px; width: 30px; height: 28px; font-size: 14px; cursor: pointer; line-height: 1;
  margin-left: 4px; }
.sk-icon:hover { color: var(--text); border-color: var(--brand-blue); }
.sk-edit-zeile > td { background: rgba(54,147,255,.05); border-top: 1px solid var(--brand-blue);
  padding: 16px 18px 18px; }
.sk-edit-form .sk-edit-kopf { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.sk-edit-form .sk-edit-kopf .field { flex: 1; min-width: 200px; margin: 0; }
.sk-edit-text { width: 100%; font-size: 13px; line-height: 1.5; resize: vertical; }

/* ─── Skill-Matrix: Zusammenfassung im Skills-Base-Stil ─────────────────────── */
/* .card h2 hat höhere Spezifität – deshalb hier mit .card davor */
.card .sk-h, .sk-h { font-size: 17px; color: var(--muted); font-weight: 600; margin: 0 0 24px; text-transform: none; display: flex; align-items: center; gap: 6px; }
.sk-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 22px; align-items: stretch; }
.sk-grid21 { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; margin-top: 22px; align-items: stretch; }
.sk-grid3 > .card, .sk-grid21 > .card { margin-top: 0; }
@media (max-width: 1250px) { .sk-grid3 { grid-template-columns: 1fr 1fr; } .sk-grid21 { grid-template-columns: 1fr; } }
.sk-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--brand-navy); color: #fff; font-size: 26px;
  font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; border: 3px solid var(--brand-blue); }
.sk-ueber-kopf { display: flex; gap: 16px; align-items: center; }
.sk-ueber-name { font-size: 20px; font-weight: 700; }
.sk-ueber-meta { color: var(--muted); font-size: 13px; margin-top: 2px; }
.sk-ueber-status { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13.5px; }
.sk-btn-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; background: rgba(255,255,255,.2); font-size: 12px; }
.sk-glance { display: flex; gap: 22px; align-items: flex-end; justify-content: center; padding: 6px 0; }
.sk-gauge { text-align: center; }
.sk-gauge-bar { width: 58px; height: 120px; background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 6px;
  display: flex; align-items: flex-end; overflow: hidden; margin: 0 auto 8px; }
.sk-gauge-bar i { display: block; width: 100%; }
.sk-gauge b { display: block; font-size: 26px; } .sk-gauge span { color: var(--muted); font-size: 12px; }
.sk-punkte-gross { text-align: center; padding-bottom: 6px; }
.sk-punkte-gross b { display: block; font-size: 46px; line-height: 1; }
.sk-punkte-gross span { color: var(--muted); font-size: 12px; display: block; margin-top: 6px; }
.sk-punkte-gross small { color: var(--muted-2); font-size: 11px; display: block; margin-top: 4px; }
.sk-chart-card { display: flex; flex-direction: column; }
.sk-chart-wrap { flex: 1; display: flex; min-height: 300px; }
.sk-katchart { width: 100%; height: 100%; flex: 1; min-height: 0; display: block; }
.sk-farblegende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.sk-farblegende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.sk-rank { list-style: none; margin: 0; padding: 0; }
.sk-rank li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; }
.sk-rank li:nth-child(odd) { background: rgba(255,255,255,.03); }
.sk-rank li a { color: var(--brand-blue-2); }
.sk-rank-n { color: var(--muted); width: 18px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.sk-rank .sk-leer { margin: 0; }
.sk-pill.lv0 { background: var(--muted-2); color: var(--text); }
.sk-pill.adj { box-shadow: 0 0 0 2px var(--brand-blue); }
.sk-pill.i1 { background: #57a6ff; } .sk-pill.i0 { background: var(--muted-2); color: var(--text); } .sk-pill.i-1 { background: #ef7b7b; }
.sk-adj-tag { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 11px; background: rgba(54,147,255,.18); color: var(--brand-blue-2); }
/* Matrix */
.sk-mx { border-top: 1px solid var(--border); }
.sk-mx summary { display: grid; grid-template-columns: minmax(0, 1fr) 220px 70px 60px; gap: 14px; align-items: center;
  padding: 10px 6px; cursor: pointer; list-style: none; }
.sk-mx summary::-webkit-details-marker { display: none; }
.sk-mx summary:hover { background: rgba(255,255,255,.03); }
.sk-mx-kat { font-weight: 600; }
.sk-mx-mini { display: flex; height: 10px; border-radius: 3px; overflow: hidden; background: var(--panel-2); }
.sk-mx-mini i { display: block; }
.sk-mx-avg { text-align: right; }
.sk-mx-rows { padding: 2px 0 10px 18px; }
.sk-mx-row { display: grid; grid-template-columns: minmax(0, 1fr) 22px 44px 96px minmax(0, 190px) 36px; gap: 12px; align-items: center;
  padding: 5px 4px; border-bottom: 1px dashed var(--border); font-size: 13px; }
.sk-mx-row:last-child { border-bottom: 0; }
.sk-mx-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-mx-name:hover { color: var(--brand-blue-2); }
.sk-mx-int { text-align: center; color: #57a6ff; }
.sk-mx-lv { text-align: center; }
.sk-mx-delta .up { color: var(--pos); } .sk-mx-delta .down { color: var(--neg); } .sk-mx-delta { font-size: 12px; white-space: nowrap; }
.sk-mx-name2 { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-mx-edit { text-align: right; }
/* Anpassungs-Dialog + Fragebogen: vertikale Auswahllisten */
.sk-adj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sk-vlist { display: flex; flex-direction: column; gap: 4px; }
.sk-vlist button { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--border); background: var(--panel-2);
  color: var(--muted); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.sk-vlist button:hover { border-color: var(--brand-blue); color: var(--text); }
.sk-vlist button.on { border-color: var(--brand-blue); background: rgba(54,147,255,.14); color: var(--text); font-weight: 600; }
.sk-vlist button.prev:not(.on) { border-style: dashed; border-color: #8fd39a; }
.sk-vlist button.prev::after { content: "vorher"; margin-left: auto; font-size: 11px; color: #8fd39a; font-weight: 400; }
.sk-vlist.gesperrt button { cursor: default; } .sk-vlist.gesperrt button:hover { border-color: var(--border); color: var(--muted); }
.sk-prev-dot { display: inline-block; width: 10px; height: 10px; border: 2px dashed #8fd39a; border-radius: 50%; vertical-align: -1px; margin-right: 4px; }
/* Fragebogen-Layout */
.sk-fkopf { display: flex; gap: 20px; align-items: center; }
.sk-fkopf-mitte { flex: 1; min-width: 0; }
.sk-fkopf-name { font-size: 22px; font-weight: 700; }
.sk-ring-wrap { display: flex; gap: 16px; align-items: center; flex: none; }
.sk-ring { width: 96px; height: 96px; }
.sk-ring-text { font-size: 13px; color: var(--muted); max-width: 220px; }
.sk-ring-text b { color: var(--text); font-size: 16px; }
.sk-flayout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; margin-top: 22px; align-items: start; }
@media (max-width: 1100px) { .sk-flayout { grid-template-columns: 1fr; } .sk-fnav { position: static; } }
.sk-fnav { position: sticky; top: 16px; padding: 16px 18px; }
.sk-fnav-item { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--text); font-size: 13px; }
.sk-fnav-item:hover { background: rgba(255,255,255,.04); }
.sk-fnav-item.fertig { color: var(--muted-2); }
.sk-fnav-count { font-style: normal; align-self: center; line-height: 20px; height: 20px; background: var(--brand-blue); color: #fff; border-radius: 10px; padding: 0 8px; font-size: 11.5px; min-width: 22px; text-align: center; }
.sk-fnav-item.fertig .sk-fnav-count { background: var(--panel-2); color: var(--muted-2); }
.sk-fbereich-h { font-size: 16px; margin: 8px 0 12px; padding: 10px 14px; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--border); border-radius: 12px; }
.sk-fbereich.leer { display: none; }
.sk-fcard { padding: 18px 20px; margin: 0 0 14px !important; }
.sk-fcard.erledigt { display: none; }
body.zeige-erledigte .sk-fcard.erledigt { display: block; opacity: .6; }
.sk-fcard-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sk-fcard-kopf h3 { margin: 0; font-size: 15.5px; }
.sk-fcard-actions { display: flex; gap: 8px; align-items: center; }
.sk-erledigt-tag { color: var(--pos); font-size: 12.5px; }
.sk-fdef { margin: 10px 0 14px; padding-left: 0; list-style: none; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.sk-fdef b { color: var(--text); }
.sk-fwahl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .sk-fwahl { grid-template-columns: 1fr; } }
.sk-fwahl-h { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.sk-fende { text-align: center; padding: 22px; margin-top: 8px; }
.sk-delta .up { color: var(--pos); } .sk-delta .down { color: var(--neg); }

/* Skill-Matrix: Tooltips, Unterzeilen, „Weitere anzeigen“, Listen-Overlay */
.sk-sub { margin: 0 0 16px !important; }
.card .sk-h:has(+ .sk-sub), .sk-h:has(+ .sk-sub) { margin-bottom: 10px; }
.sk-tip { display: inline-flex; width: 16px; height: 16px; border-radius: 50%; align-items: center; justify-content: center;
  font-size: 13px; color: var(--muted-2); cursor: help; position: relative; margin-left: auto; font-weight: 400; }
.sk-tip:hover, .sk-tip:focus { color: var(--brand-blue-2); outline: none; }
.sk-tip::after { content: attr(data-tip); position: absolute; right: 0; top: 24px; z-index: 50; width: 320px; max-width: 70vw;
  background: var(--brand-navy); color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.5; font-weight: 400; text-transform: none; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .12s, transform .12s; white-space: normal; text-align: left; }
.sk-tip:hover::after, .sk-tip:focus::after { opacity: 1; transform: translateY(0); }
.sk-mehr { display: block; width: 100%; margin-top: 12px; padding: 8px 10px; border: 1px dashed var(--border-strong); background: transparent;
  color: var(--brand-blue-2); border-radius: 8px; font: inherit; font-size: 12.5px; cursor: pointer; text-align: center; }
.sk-mehr:hover { background: rgba(54,147,255,.08); border-color: var(--brand-blue); }
.sk-liste-karte { width: min(760px, 94vw); }
.sk-liste-karte .todo-karte-kopf { gap: 12px; }
.sk-liste-karte .todo-karte-kopf h3 { margin-right: auto; }
#liste-suche { width: 220px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; }
.sk-liste-scroll { max-height: 62vh; overflow-y: auto; overflow-x: hidden; margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; }
.sk-liste-tab { width: 100%; table-layout: fixed; }
.sk-liste-tab th, .sk-liste-tab td { padding: 8px 10px; overflow-wrap: anywhere; vertical-align: top; }
.sk-liste-tab td[style*="nowrap"] { overflow-wrap: normal; }
.sk-liste-tab .sk-pill { vertical-align: middle; }
/* Spaltenbreiten je Modus – Summe passt in 760px ohne horizontales Scrollen */
.sk-liste-tab.m-liste th:nth-child(1) { width: 44px; } .sk-liste-tab.m-liste th:nth-child(3) { width: 30%; }
.sk-liste-tab.m-liste th:nth-child(4) { width: 70px; } .sk-liste-tab.m-liste th:nth-child(5) { width: 100px; }
.sk-liste-tab th { white-space: nowrap; overflow: visible; }
.sk-liste-tab td:first-child { white-space: nowrap; }
.sk-liste-tab.m-anpassungen th:nth-child(1) { width: 44px; } .sk-liste-tab.m-anpassungen th:nth-child(3) { width: 190px; }
.sk-liste-tab.m-anpassungen th:nth-child(4) { width: 150px; } .sk-liste-tab.m-anpassungen th:nth-child(5) { width: 118px; }
.sk-liste-tab.m-anpassungen td:nth-child(4) { white-space: nowrap; }
.sk-liste-tab.m-protokoll th:nth-child(1) { width: 128px; } .sk-liste-tab.m-protokoll th:nth-child(2) { width: 118px; }
.sk-liste-tab.m-protokoll th:nth-child(3) { width: 124px; } .sk-liste-tab.m-protokoll th:nth-child(5) { width: 118px; }
.sk-liste-scroll { scrollbar-gutter: stable; }
.sk-liste-tab th:last-child, .sk-liste-tab td:last-child { padding-right: 14px; }
@media (max-width: 700px) { .sk-liste-tab.m-liste th:nth-child(3), .sk-liste-tab.m-liste td:nth-child(3) { display: none; } }
.sk-liste-tab thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }

.sk-bitte { display: none; font-style: normal; text-transform: none; letter-spacing: 0; color: #f0a868; margin-left: 8px; font-size: 12px; }
.sk-fwahl > div:has(.sk-vlist.bestaetigen) .sk-bitte { display: inline; }
.sk-vlist.bestaetigen button.on { border-color: #f0a868; box-shadow: 0 0 0 1px rgba(240,168,104,.5); }

/* Skill-Matrix: Team-Tabelle kompakt */
.sk-team-runde { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-team-actions { white-space: nowrap; text-align: right; }
.sk-team-actions .sk-icon { margin-left: 4px; text-decoration: none; }

/* Skill-Matrix: Kommentare je Fähigkeit */
.sk-comment-btn.has { color: var(--brand-blue-2); border-color: var(--brand-blue); background: rgba(54,147,255,.14); }
.sk-comment-box { margin: 10px 0 14px; }
.sk-comment { width: 100%; box-sizing: border-box; resize: vertical; min-height: 56px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; }
.sk-comment:focus { outline: none; border-color: var(--brand-blue); }
.sk-comment-hint { margin-top: 4px; font-size: 11.5px; }
.sk-mx-comment { text-decoration: none; margin-left: 6px; cursor: pointer; }
.sk-kommentare { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.sk-kommentare h3 { margin: 0 0 12px; font-size: 15px; }
.sk-kommentar { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.03); margin-bottom: 8px; border-left: 3px solid var(--brand-blue); }
.sk-kommentar-kopf { font-size: 13px; margin-bottom: 4px; }
.sk-kommentar-text { font-size: 13.5px; white-space: pre-wrap; color: var(--text); }
.sk-kommentar:target { outline: 2px solid var(--brand-blue); }

.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }