/* HDC BAFA-Portal: Tabler (MIT) als Designsystem, HDC-Farben, Navy-Seitenleiste wie HDC Projekte. */
:root {
  --hdc-blue: #010B80; --hdc-blue-2: #1B2BD6; --hdc-sky: #9DAAFF; --hdc-navy: #0B0F2E; --hdc-navy-2: #141A45;
  --tblr-primary: #1B2BD6; --tblr-primary-rgb: 27, 43, 214; --tblr-primary-text: #1B2BD6; --tblr-primary-lt: #E9ECFF; --tblr-primary-darken: #010B80;
  --tblr-link-color: #1B2BD6; --tblr-link-color-rgb: 27, 43, 214; --tblr-link-hover-color: #010B80;
  --tblr-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --tblr-body-bg: #F4F6FB; --tblr-body-font-size: .875rem;
  --tblr-border-radius: 8px; --tblr-border-radius-lg: 12px; --tblr-card-border-radius: 12px;
  --side: 248px;
  --lane: #ECEFF6; --lane-line: #DDE2EE;
  --sh-card: 0 1px 2px rgba(16, 24, 64, .06), 0 1px 1px rgba(16, 24, 64, .04);
  --sh-pop: 0 12px 32px -6px rgba(16, 24, 64, .22), 0 2px 6px rgba(16, 24, 64, .08);
  --k-termin: #206BC4; --k-kunde: #F59F00; --k-zusatz: #AE3EC9;
  --a-gruen: #2FB344; --a-gelb: #F59F00; --a-rot: #D63939; --a-grau: #94A3B8;
}
html, body { min-height: 100%; }
body { background: var(--tblr-body-bg); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
.btn-primary { --tblr-btn-bg: #1B2BD6; --tblr-btn-border-color: #1B2BD6; --tblr-btn-hover-bg: #010B80; --tblr-btn-hover-border-color: #010B80; --tblr-btn-active-bg: #010B80; box-shadow: 0 1px 2px rgba(1, 11, 128, .25), inset 0 1px 0 rgba(255, 255, 255, .12); }
.form-control:focus, .form-select:focus { border-color: #8E99F5; box-shadow: 0 0 0 .2rem rgba(27, 43, 214, .15); }
.form-check-input:checked { background-color: #1B2BD6; border-color: #1B2BD6; }
.ico { width: 18px; height: 18px; stroke-width: 1.75; flex: none; vertical-align: -3px; }
.ico.sm { width: 15px; height: 15px; } .ico.lg { width: 22px; height: 22px; }
.btn .ico { margin-right: 6px; } .btn-icon .ico { margin: 0; }
.text-muted, .text-secondary { color: #667085 !important; }
.fw-medium { font-weight: 500; }
.nowrap { white-space: nowrap; }
.mini { font-size: 12px; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Rahmen: Seitenleiste ---------- */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; color: #C7CCEA; display: flex; flex-direction: column;
  background: radial-gradient(120% 60% at 0% 0%, rgba(43, 64, 255, .28) 0%, rgba(43, 64, 255, 0) 55%), radial-gradient(90% 40% at 100% 100%, rgba(157, 170, 255, .12) 0%, rgba(157, 170, 255, 0) 60%), linear-gradient(180deg, #0D1238 0%, #0A0D29 100%);
  border-right: 1px solid rgba(255, 255, 255, .06); z-index: 40; }
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; color: #fff; text-decoration: none !important; }
.brand img { height: 22px; }
.brand .tag { font-size: 10.5px; letter-spacing: 1.8px; font-weight: 600; color: var(--hdc-sky); border: 1px solid rgba(157, 170, 255, .35); padding: 2px 7px; border-radius: 999px; }
.side .search-btn { margin: 4px 14px 10px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); color: #9AA2D0; cursor: pointer; font-size: 13px; text-align: left; }
.side .search-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.side .search-btn kbd { margin-left: auto; background: rgba(255, 255, 255, .08); color: #9AA2D0; border: 0; font-size: 11px; padding: 1px 6px; box-shadow: none; }
.nav-sec { padding: 14px 18px 6px; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #6E76A8; font-weight: 600; }
.nav-i { display: flex; align-items: center; gap: 10px; margin: 1px 10px; padding: 8px 10px; border-radius: 8px; color: #C7CCEA; text-decoration: none !important; font-weight: 500; font-size: 13.5px; position: relative; }
.nav-i .ico { color: #8C95CC; }
.nav-i:hover { background: rgba(255, 255, 255, .06); color: #fff; } .nav-i:hover .ico { color: #fff; }
.nav-i.on { background: linear-gradient(90deg, rgba(43, 64, 255, .45), rgba(43, 64, 255, .18)); color: #fff; box-shadow: inset 0 0 0 1px rgba(157, 170, 255, .22); }
.nav-i.on .ico { color: #fff; }
.nav-i .cnt { margin-left: auto; font-size: 11px; font-weight: 600; color: #8C95CC; }
.nav-i .bad { margin-left: auto; font-size: 11px; font-weight: 700; color: #fff; background: #E5484D; border-radius: 999px; padding: 0 7px; line-height: 18px; }
.nav-p { display: flex; align-items: center; gap: 9px; margin: 0 10px; padding: 6px 10px 6px 12px; border-radius: 8px; color: #AEB4DA; text-decoration: none !important; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-p:hover { background: rgba(255, 255, 255, .06); color: #fff; } .nav-p.on { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-p span.t { overflow: hidden; text-overflow: ellipsis; }
.side .grow { flex: 1; }
.me-box { margin: 10px; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); display: flex; align-items: center; gap: 10px; }
.me-box .n { color: #fff; font-weight: 600; font-size: 13px; line-height: 1.2; } .me-box .r { font-size: 11.5px; color: #8C95CC; }
.me-box button { margin-left: auto; background: none; border: 0; color: #8C95CC; padding: 4px; border-radius: 6px; } .me-box button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.mobile-top { display: none; }
@media (max-width: 991px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; top: 0; width: 272px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--sh-pop); }
  .side.open { transform: none; }
  .mobile-top { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #0D1238; color: #fff; position: sticky; top: 0; z-index: 30; }
  .mobile-top img { height: 18px; } .mobile-top button { background: none; border: 0; color: #fff; padding: 4px; }
  .scrim { position: fixed; inset: 0; background: rgba(10, 13, 41, .45); z-index: 35; }
}

/* ---------- Seite ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.page { padding: 26px 32px 56px; display: flex; flex-direction: column; gap: 20px; min-width: 0; max-width: 1680px; width: 100%; }
@media (max-width: 767px) { .page { padding: 18px 16px 40px; } }
.phead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.phead .tt { flex: 1; min-width: 240px; }
.phead .pre { font-size: 12px; font-weight: 600; color: #667085; letter-spacing: .3px; display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.phead .pre a { color: #667085; } .phead .pre a:hover { color: var(--tblr-primary); }
.phead h1 { font-size: 22px; font-weight: 700; letter-spacing: -.3px; margin: 0; color: #101828; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.phead .sub { color: #667085; margin-top: 4px; font-size: 13.5px; }
.phead .acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card { border: 1px solid #E4E7F0; box-shadow: var(--sh-card); }
.card-header { border-bottom-color: #EEF0F6; } .card-title { font-weight: 600; }
.card-header .card-title .ico { color: #667085; margin-right: 4px; }
.seg { display: inline-flex; background: #E9ECF4; border-radius: 8px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; padding: 5px 11px; border-radius: 6px; font-size: 13px; color: #475467; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.seg button:hover { color: #101828; }
.seg button.on { background: #fff; color: #101828; box-shadow: 0 1px 2px rgba(16, 24, 64, .12); }
.seg button .c { font-size: 11px; color: #98A2B3; font-weight: 600; } .seg button.on .c { color: #667085; }

/* Kennzahlen */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { background: #fff; border: 1px solid #E4E7F0; border-radius: 12px; padding: 14px 16px; box-shadow: var(--sh-card); display: flex; gap: 12px; align-items: flex-start; }
.stat .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--tblr-primary-lt); color: var(--tblr-primary); }
.stat .ic.red { background: #FDECEC; color: #D63939; } .stat .ic.amber { background: #FFF4E0; color: #C77700; } .stat .ic.green { background: #E6F7EA; color: #2B8A3E; }
.stat .v { font-size: 22px; font-weight: 700; color: #101828; line-height: 1.15; letter-spacing: -.3px; }
.stat .l { font-size: 12.5px; color: #667085; }
.stat .bar { height: 5px; border-radius: 3px; background: #EEF0F6; margin-top: 8px; overflow: hidden; } .stat .bar i { display: block; height: 100%; border-radius: 3px; background: var(--tblr-primary); }
.stat .bar i.mid { background: #F59F00; } .stat .bar i.over { background: #D63939; }

/* ---------- BAFA-Portal ---------- */
.badge { font-weight: 600; }
.st-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: #EEF0FF; color: #1B2BD6; }
.st-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-0, .st-1 { background: #EEF0FF; color: #3540C9; } .st-2, .st-3 { background: #E8F1FF; color: #175CD3; }
.st-4, .st-5, .st-6 { background: #F4EBFF; color: #7F35C9; } .st-7, .st-8 { background: #FFF4E0; color: #B54708; } .st-9 { background: #E6F7EA; color: #2B8A3E; }
.hold-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.hold-orange { background: #FFF1E6; color: #C4320A; } .hold-red { background: #FDECEC; color: #B42318; } .hold-yellow { background: #FEF7C3; color: #854A0E; }
.hold-purple { background: #F4EBFF; color: #6941C6; } .hold-secondary { background: #F2F4F7; color: #475467; } .hold-dark { background: #1D2939; color: #fff; }
.due { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.due.late { color: #D63939; font-weight: 700; } .due.soon { color: #C77700; font-weight: 600; } .due.ok { color: #475467; }
.due .est { font-weight: 400; color: #98A2B3; font-size: 11px; }
.warn-dot { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #FFF4E0; color: #B54708; font-size: 11px; font-weight: 700; }
.tbl-cases td { vertical-align: middle; } .tbl-cases tr { cursor: pointer; } .tbl-cases tr:hover td { background: #F8F9FD; }
.tbl-cases .firm { font-weight: 600; color: #101828; } .tbl-cases .sub { font-size: 12px; color: #667085; }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* Pipeline */
.pipe { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 1200px) { .pipe { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pipe a { display: block; padding: 10px 10px 9px; border-radius: 10px; background: #F6F7FB; border: 1px solid #E8EBF3; text-decoration: none !important; color: #344054; }
.pipe a:hover { border-color: #B9C0F5; background: #fff; }
.pipe .n { font-size: 20px; font-weight: 700; color: #101828; line-height: 1.1; } .pipe .t { font-size: 11.5px; color: #667085; line-height: 1.25; margin-top: 3px; }
.pipe a.zero .n { color: #C0C6D4; }

/* Board */
.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.lane { flex: 0 0 248px; background: var(--lane); border: 1px solid var(--lane-line); border-radius: 12px; padding: 10px; }
.lane h4 { font-size: 12.5px; font-weight: 700; color: #344054; margin: 2px 4px 10px; display: flex; justify-content: space-between; }
.lane h4 span { color: #98A2B3; }
.bcard { background: #fff; border: 1px solid #E4E7F0; border-radius: 10px; padding: 10px 11px; margin-bottom: 8px; box-shadow: var(--sh-card); cursor: pointer; }
.bcard:hover { border-color: #B9C0F5; } .bcard .f { font-weight: 600; font-size: 13px; color: #101828; } .bcard .m { font-size: 12px; color: #667085; margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }

/* Stepper */
.stepper { display: flex; gap: 4px; overflow-x: auto; padding: 2px; }
.step { flex: 1 1 0; min-width: 92px; border: 0; background: #F2F4F7; color: #667085; padding: 8px 8px 7px; border-radius: 8px; font-size: 11.5px; font-weight: 600; text-align: left; line-height: 1.25; position: relative; }
.step .no { display: block; font-size: 10.5px; font-weight: 700; opacity: .7; margin-bottom: 2px; }
.step.done { background: #E6F7EA; color: #2B8A3E; } .step.cur { background: #1B2BD6; color: #fff; box-shadow: 0 2px 8px rgba(27, 43, 214, .35); }
.step:hover:not(.cur) { outline: 2px solid #B9C0F5; }

/* Detail */
.kv { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 6px 14px; font-size: 13.5px; }
.kv dt { color: #667085; font-weight: 500; } .kv dd { margin: 0; color: #101828; word-break: break-word; }
@media (max-width: 600px) { .kv { grid-template-columns: 1fr; } .kv dd { margin-bottom: 6px; } }
.next-box { border-radius: 12px; padding: 14px 16px; background: linear-gradient(135deg, #EEF0FF, #F7F8FF); border: 1px solid #DCE0FF; }
.next-box .l { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #3540C9; }
.next-box .t { font-size: 15px; font-weight: 600; color: #101828; margin-top: 3px; }
.warn-list { margin: 0; padding: 0; list-style: none; } .warn-list li { padding: 6px 0; border-bottom: 1px dashed #EEF0F6; display: flex; gap: 8px; color: #93370D; font-size: 13px; }
.warn-list li:last-child { border: 0; } .warn-list .ico { color: #F59F00; margin-top: 1px; }
.tl { list-style: none; margin: 0; padding: 0 0 0 4px; }
.tl li { position: relative; padding: 0 0 14px 22px; border-left: 2px solid #E4E7F0; margin-left: 6px; }
.tl li:last-child { border-color: transparent; }
.tl li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #98A2B3; }
.tl li.k-status::before { border-color: #1B2BD6; background: #1B2BD6; } .tl li.k-rueckfrage::before { border-color: #D63939; }
.tl li.k-kunde::before { border-color: #2FB344; } .tl li.k-dokument::before { border-color: #AE3EC9; } .tl li.k-mail::before { border-color: #F59F00; }
.tl .d { font-size: 12px; color: #667085; font-variant-numeric: tabular-nums; } .tl .t { font-weight: 600; color: #101828; font-size: 13.5px; }
.tl .x { font-size: 13px; color: #475467; white-space: pre-wrap; margin-top: 2px; } .tl .s { font-size: 11.5px; color: #98A2B3; }
.tl li:hover .del { opacity: 1; } .tl .del { opacity: 0; border: 0; background: none; color: #98A2B3; padding: 0 4px; }
.doc-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #F0F2F7; }
.doc-row:last-child { border: 0; } .doc-row .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chk { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #EEF0F6; font-size: 13.5px; }
.chk:last-child { border: 0; } .chk .s { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none; }
.chk .s.ok { background: #E6F7EA; color: #2B8A3E; } .chk .s.no { background: #FDECEC; color: #D63939; } .chk .s.na { background: #F2F4F7; color: #98A2B3; }
.dropzone { border: 2px dashed #C9CFE8; border-radius: 12px; padding: 18px; text-align: center; color: #667085; background: #FAFBFF; transition: .15s; }
.dropzone.over { border-color: #1B2BD6; background: #EEF0FF; color: #1B2BD6; }
.nav-tabs .nav-link { font-weight: 500; } .nav-tabs .nav-link .cnt { font-size: 11px; color: #98A2B3; margin-left: 4px; }
dialog#dlg { border: 0; border-radius: 14px; padding: 0; width: min(720px, calc(100vw - 32px)); box-shadow: var(--sh-pop); }
dialog#dlg::backdrop { background: rgba(10, 13, 41, .45); }
dialog#dlg .dh { padding: 16px 20px; border-bottom: 1px solid #EEF0F6; display: flex; align-items: center; gap: 10px; } dialog#dlg .dh h3 { margin: 0; flex: 1; font-size: 16px; }
dialog#dlg .db { padding: 16px 20px; max-height: 70vh; overflow-y: auto; } dialog#dlg .df { padding: 12px 20px; border-top: 1px solid #EEF0F6; display: flex; justify-content: flex-end; gap: 8px; }
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast-m { background: #101828; color: #fff; padding: 10px 14px; border-radius: 10px; box-shadow: var(--sh-pop); font-size: 13px; max-width: 360px; }
.toast-m.err { background: #B42318; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(80% 60% at 10% 0%, rgba(43, 64, 255, .35), transparent 60%), linear-gradient(180deg, #0D1238, #0A0D29); }
.login-card { width: min(400px, 100%); background: #fff; border-radius: 16px; padding: 28px; box-shadow: var(--sh-pop); }
.form-label { font-weight: 500; font-size: 13px; } .form-hint { font-size: 11.5px; color: #98A2B3; margin-top: 2px; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.fgrid .full { grid-column: 1 / -1; } @media (max-width: 700px) { .fgrid { grid-template-columns: 1fr; } }
.rep-sec { border: 1px solid #E4E7F0; border-radius: 12px; padding: 14px 16px; background: #fff; }
.rep-sec h4 { font-size: 14px; margin: 0 0 10px; }
.reco-box { border: 1px solid #E4E7F0; border-radius: 10px; padding: 12px; margin-bottom: 10px; background: #FAFBFF; }
.empty { text-align: center; padding: 34px 16px; color: #98A2B3; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters .form-control, .filters .form-select { width: auto; min-width: 160px; }
.mail-pre { white-space: pre-wrap; font-family: inherit; font-size: 13px; background: #F8F9FD; border: 1px solid #E4E7F0; border-radius: 10px; padding: 12px; }