/* ═══ UX PATCH v10 — April 10, 2026 ═══ */

/* Prevent horizontal page shift when scrollbar appears/disappears */
html { overflow-y: scroll; }

/* hidden always wins */
[hidden] { display: none !important; }

/* Flash-free MZ timeline — hide empty slot + class-based toggle */
#rz-timeline-slot:empty { display: none !important; }
#section-referenzzins.mz-tl-active .dash-panel-inner > *:not(#rz-timeline-slot) { display: none !important; }
#section-referenzzins.mz-tl-active .hb,
#section-referenzzins.mz-tl-active .ban { display: none !important; }
#section-referenzzins.mz-tl-active #rz-timeline-slot { display: block !important; }

/* Flash-free NK timeline — hide cases-list content during transition */
#cases-list:empty { min-height: 200px; }

/* Card padding reset */
.card.dc, .card.ck--amber, .card.ck--green, .card.cc, .card[class*="ck--"] { padding: 0 !important; }

/* Dashboard container */
.pro-dash-panels { max-width: 1120px !important; padding: 28px !important; padding-bottom: 40px !important; }
@media (min-width: 768px) { .pro-dash-panels { padding: 32px 28px 48px !important; } }
@media (max-width: 767px) { .pro-dash-panels { padding: 16px !important; padding-bottom: 32px !important; } }

:root { --amber: #8a6d00; --green-bg: #f0f8f3; }

.ov-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 16px !important; }
@media (max-width: 767px) { .ov-grid { grid-template-columns: 1fr !important; gap: 0 !important; } }

/* Layout */
.lay:not([hidden]) { display: grid !important; grid-template-columns: 1fr !important; gap: 20px !important; }
@media (min-width: 700px) { .lay:not([hidden]) { grid-template-columns: 3fr 2fr !important; } }
@media (min-width: 700px) { .dk-side:not([hidden]) { display: flex !important; flex-direction: column !important; gap: 16px !important; } }
@media (max-width: 699px) { .dk-side { display: none !important; } }
/* Per-section dk-side mobile overrides: sections where the sidebar must stack
   below main content on mobile. Global .dk-side display:none keeps case detail
   and timeline sidebars hidden. Add a section here instead of patching globally. */
@media (max-width: 699px) {
  #section-referenzzins .dk-side { display: flex !important; flex-direction: column !important; gap: 16px !important; }
}
@media (max-width: 699px) {
  #section-abo .dk-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
}
@media (max-width: 699px) {
  #section-vertrag .dk-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
}
.cases-stack > .lay:not([hidden]) { display: grid !important; }
@media (min-width: 700px) { .cases-stack > .lay:not([hidden]), #cases-list > .lay:not([hidden]) { grid-template-columns: 3fr 2fr !important; } }
.lease-sidebar:not([hidden]), #rz-lease-sidebar:not([hidden]) { display: flex !important; flex-direction: column !important; gap: 16px !important; }

/* DC cards */
.card.dc, .dc { background: var(--white, #fff); border: 1px solid var(--rule, #e8e4de); border-radius: var(--radius, 6px); box-shadow: 0 2px 8px rgba(0,0,0,.06); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.2s; padding: 0 !important; }
.dc:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.dc-strip { padding: 12px 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; }
.dc-strip--green { background: #f0f8f3; border-bottom: 1px solid #b8dfc7; }
.dc-strip--amber { background: #fefbf0; border-bottom: 1px solid #f0e4b0; }
.dc-strip--empty { background: #f4f2ee; border-bottom: 1px solid #e8e4de; }
.dc-strip-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; flex: 1; }
.dc-strip--green .dc-strip-label { color: #1a6b35; }
.dc-strip--amber .dc-strip-label { color: #8a6d00; }
.dc-strip--empty .dc-strip-label { color: #888; }
.dc-dot { width: 9px; height: 9px; border-radius: 50%; }
.dc-dot--green { background: #1a6b35; }
.dc-dot--amber { background: #b8860b; }
.dc-dot--empty { background: #bbb; }
/* Issue 4: closed/erledigt — muted neutral styling */
.dc-strip--done { background: #eef0ee; border-bottom: 1px solid #d9dcd9; }
.dc-strip--done .dc-strip-label { color: #5c6b5c; }
.dc-dot--done { background: #7a8a7a; }
.card.dc.dc--done { opacity: 0.75; }
.card.dc.dc--done:hover { opacity: 1; }
.card .ck-status-badge--done { background: #eef0ee; color: #466146; border-color: #c8d1c8; }
.card.ck--done { opacity: 0.7; background: #f9f8f6; border-color: #e8e4de; }
.card.ck--done:hover { opacity: 1; }
.case-card--erledigt,
.check-card--erledigt {
  opacity: 0.7;
  background: #f9f8f6;
  border-color: #e8e4de;
}
.case-card--erledigt:hover,
.check-card--erledigt:hover {
  opacity: 1;
}
.case-card--erledigt .case-badge {
  background: #f0f0ee;
  color: #888;
}
/* RZ baseline-rate auto-detect component */
.rz-rate-auto,
.rz-rate-override {
  background: #fff;
  border: 1px solid #e0dcd5;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 12px;
}

.rz-rate-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #888;
  margin-bottom: 10px;
}

.rz-rate-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8f7f4;
  border: 1px solid #e8e4de;
  border-radius: 8px;
}

.rz-rate-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rz-rate-value {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
}

.rz-rate-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #f0faf0;
  color: #2d8a4e;
  border: 1px solid #c3e6c3;
}

.rz-rate-badge--fallback {
  background: #f5f3ee;
  color: #888;
  border-color: #e0dcd5;
}

.rz-rate-source {
  font-size: 11px;
  color: #999;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rz-rate-edit {
  font-size: 11px;
  color: #7c3aed;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  border: none;
  background: none;
  font-family: inherit;
  padding: 0;
}

.rz-rate-edit:hover { text-decoration: underline; }

.rz-rate-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.rz-rate-pill {
  padding: 8px 14px;
  border: 1.5px solid #e8e4de;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  background: #fff;
  cursor: pointer;
  transition: all 0.1s;
  font-family: inherit;
  text-align: center;
  line-height: 1.3;
}

.rz-rate-pill:hover {
  border-color: #ccc;
  background: #fdfcfa;
}

.rz-rate-pill.rz-rate-pill--selected {
  border-color: #cc0000;
  background: #fef2f2;
  color: #cc0000;
}

.rz-rate-pill-bwo {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #2d8a4e;
  display: block;
  margin-top: 1px;
}

.rz-rate-back {
  font-size: 11px;
  color: #999;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: none;
  font-family: inherit;
  padding: 0;
}

.rz-rate-back:hover { color: #666; }

.rz-rate-auto.rz-rate-auto--dont-know .rz-rate-display {
  background: #f0faf0;
  border-color: #c3e6c3;
}

.rz-rate-auto--dont-know .rz-rate-value { color: #2d8a4e; }

@media (max-width: 600px) {
  .rz-rate-value { font-size: 20px; }
  .rz-rate-source {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .rz-rate-pill {
    padding: 8px 12px;
    font-size: 12px;
  }
}
.dc-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.dc-headline { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: 17px; font-weight: 600; margin-bottom: 8px; line-height: 1.3; }
.dc-data { font-size: 13px; color: #555; line-height: 1.6; flex: 1; }
.dc-data strong { color: #333; }
.dc-amount { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: 22px; font-weight: 700; margin: 4px 0; }
.dc-amount--amber { color: #8a6d00; }
.dc-action { padding: 14px 20px; border-top: 1px solid var(--rule, #e8e4de); background: var(--paper, #fafaf8); display: flex; flex-direction: column; gap: 8px; }
.dc-action-hint { font-size: 12px; color: #555; line-height: 1.4; margin-bottom: 2px; }
.dc-action-hint strong { color: #333; }

/* CK cards */
.ck--amber { border-left: 4px solid #b8860b !important; }
.ck--green { border-left: 4px solid #1a6b35 !important; }
.ck-head { padding: 18px 20px; }
.ck-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ck-info { flex: 1; }
/* Badge row needs breathing room before the title/amount row (ck-row1).
   Applies to both NK and MZ check cards, desktop and mobile. */
.ck-date-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ck-date-actions { display: inline-flex; align-items: center; gap: 8px; }
.ck-date { font-size: 12px; color: #888; margin-bottom: 2px; }
.ck-title { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: 18px; font-weight: 600; }
.ck-meta { font-size: 13px; color: #555; margin-top: 4px; line-height: 1.5; }
.ck-verdict { text-align: right; flex-shrink: 0; }
.ck-amt { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: 22px; font-weight: 700; }
.ck-amt--a { color: #8a6d00; }
.ck-amt--g { color: #1a6b35; }
.ck-label { font-size: 12px; color: #888; margin-top: 2px; }
.ck-status-badge { padding: 4px 10px; border-radius: 16px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ck-status-badge--g { border: 1px solid #b8dfc7; color: #1a6b35; background: #f0faf0; }
.ck-status-badge--a { border: 1px solid #f0e4b0; color: #8a6d00; background: #fefbf0; }
.ck-row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 2px; }
.ck-row2 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 1px; }
.ck-row3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ck-t { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-weight: 600; color: #1a1a1a; }
.ck-v { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-weight: 700; color: #d4a017; line-height: 1; flex-shrink: 0; text-align: right; }
.ck-m1 { color: #888; }
.ck-m2 { font-size: 12px; color: #666; line-height: 1.5; }
.ck-vl { color: #999; text-align: right; flex-shrink: 0; }
.ck-annual { font-weight: 600; color: #8a6d00; text-align: right; flex-shrink: 0; }
.change-arrow { color: #d4a017; font-weight: 600; }
.ck-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; border-top: 1px solid var(--rule, #e8e4de); background: var(--paper, #fafaf8); gap: 6px; }
.ck-btns { display: flex; align-items: center; gap: 8px; }
.ck-delete-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e8e4de;
  border-radius: 6px;
  background: transparent;
  color: #bbb;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.ck-delete-btn:hover {
  border-color: #cc0000;
  color: #cc0000;
}

/* CC case cards */
.cc { border-left: 4px solid #1a4a8a !important; background: var(--white, #fff); border-radius: var(--radius, 6px); box-shadow: 0 2px 8px rgba(0,0,0,.06); overflow: hidden; transition: box-shadow 0.2s; cursor: pointer; }
.cc:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.cc-inner { padding: 18px 20px; }
.cc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cc-title { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: 17px; font-weight: 600; }
.cc-meta { font-size: 12px; color: #888; margin-top: 3px; }
.cc-foot { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--rule, #e8e4de); background: var(--paper, #fafaf8); }
.cc-foot-text { flex: 1; font-size: 13px; color: #555; }
.cc-foot-text strong { color: #333; }
.cc-foot-btn { padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; border: none; background: #cc0000; color: #fff; white-space: nowrap; flex-shrink: 0; text-align: center; cursor: pointer; }
.cc-foot-btn:hover { background: #aa0000; }
@media (max-width: 767px) { .cc-top { flex-direction: column; gap: 6px; } .cc-foot { flex-direction: column; align-items: stretch; gap: 8px; } .cc-foot-btn { width: 100%; text-align: center; } }

/* Findings */
.findings { padding: 16px 0 0; }
.fd-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-4, #999);
  margin: 0 0 8px;
}
.fd-card {
  background: #fff;
  border: 1px solid var(--rule, #e8e4de);
  border-radius: var(--radius, 8px);
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.fd-card.fd-flag-amber { border-left: 3px solid #c89400; }
.fd-card.fd-flag-green { border-left: 3px solid #2d8a4e; }
.fd-card.fd-flag-purple { border-left: 3px solid #7c3aed; }
.fd-card-header {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
}
.fd-card-header:hover { background: #fdfcfa; }
.fd-card-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}
.fd-card-header-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.fd-card-name { font-weight: 600; font-size: 14px; }
.fd-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
}
.fd-badge--amber { background: #fefbf0; color: #8a6400; border: 1px solid #f0e6c0; }
.fd-badge--green { background: #f0faf0; color: #226b2f; border: 1px solid #c0dcc8; }
.fd-badge--purple { background: #f5f3ff; color: #5b21b6; border: 1px solid #ddd6fe; }
.fd-card-amount {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  margin-left: 12px;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
}
.fd-card-amount--amber { color: #c89400; }
.fd-card-amount--green { color: var(--ink-3, #666); }
.fd-card-toggle { color: #999; font-size: 12px; flex-shrink: 0; }
.fd-card-body {
  padding: 0 16px 14px;
  border-top: 1px solid var(--paper-2, #f4f2ee);
}
.fd-card.fd-collapsed .fd-card-body { display: none; }
.fd-card-explanation {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3, #666);
  padding-top: 10px;
}
.fd-card-action {
  font-size: 12px;
  color: var(--ink-4, #999);
  margin-top: 6px;
}

/* ── Cross-reference conflict callout ── */
.xref-callout, .fd-conflict-callout {
  margin-top: 10px;
  padding: 12px 14px 12px 15px;
  background: #f8f5ff;
  border: 1px solid #d8ccf0;
  border-left: 3px solid #7c3aed;
  border-radius: 0 6px 6px 0;
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.xref-callout-label, .fd-conflict-callout-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7c3aed;
  margin-bottom: 4px;
}
.xref-callout-text, .fd-conflict-callout-text {
  font-size: 13px;
  line-height: 1.55;
  color: #4a3670;
}

/* Befunde right column cards */
.pack-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}
.pack-card__top {
  background: var(--ink);
  color: #fff;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.pack-card__body { padding: 16px; }
.pack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.doc-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 10px;
  text-align: center;
}
.doc-card__icon { font-size: 22px; margin-bottom: 4px; }
.doc-card__name { font-size: 11px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.doc-card__format { font-size: 10px; color: var(--ink-4); margin-top: 2px; }
.pack-download {
  display: block;
  width: 100%;
  padding: 14px;
  min-height: 50px;
  border: none;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 2px 8px rgba(204, 0, 0, 0.2);
  margin-bottom: 8px;
}
.pack-download:disabled { opacity: 0.55; cursor: not-allowed; }
.pack-email {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink-3);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.next-steps-card {
  border-left: 3px solid #2563eb;
  background: #eff6ff;
  border-top: 1px solid #bfdbfe;
  border-right: 1px solid #bfdbfe;
  border-bottom: 1px solid #bfdbfe;
  border-radius: 0 10px 10px 0;
  padding: 18px;
}
.next-steps-kicker {
  font-size: 10px;
  font-weight: 700;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 10px;
}
.next-step-row {
  padding: 7px 0;
}
.next-step-row + .next-step-row { border-top: 1px solid #dbeafe; }
.next-step-header {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.next-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.next-step-copy {
  flex: 1;
  min-width: 0;
}
.next-step-title { font-size: 13px; font-weight: 600; color: #1e3a5f; line-height: 1.35; }
.next-step-sub {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: #4b6b8a;
  line-height: 1.4;
}
.next-step-chevron {
  color: #2563eb;
  font-size: 11px;
  flex-shrink: 0;
  margin-left: 8px;
  margin-top: 2px;
  transition: transform 0.15s;
}
.next-step-row.is-expanded .next-step-chevron {
  transform: rotate(90deg);
}
.next-step-detail {
  margin-top: 6px;
  margin-left: 32px;
  padding-top: 6px;
  border-top: 1px solid #dbeafe;
}
.next-step-detail p {
  font-size: 12px;
  line-height: 1.55;
  color: #4b6b8a;
  margin: 0;
}
.decide-box {
  background: #fff;
  border: 1px solid var(--rule, #e8e4de);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.decide-box-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
.decide-box-sub {
  font-size: 12px;
  color: var(--ink-4, #999);
  margin-bottom: 14px;
}
.decide-box-cta {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--red, #cc0000);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 2px 8px rgba(204, 0, 0, 0.2);
}
.decide-box-cta:hover { background: #aa0000; }

/* .lay--full kept for reference, unused. */
.lay--full { grid-template-columns: 1fr !important; }

@media (min-width: 700px) {
  .nk-befunde-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
    align-items: start;
    border-top: none;
    padding: 0 0 20px;
  }
  .nk-befunde-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 24px;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 699px) {
  .nk-befunde-grid {
    border-top: none;
    padding: 0 0 14px;
  }
  .nk-befunde-main { margin-bottom: 12px; }
  .nk-befunde-side { display: flex; flex-direction: column; gap: 12px; }
  .fd-card-header { padding: 10px 12px; }
  .fd-card-body { padding: 0 12px 10px; }
  .fd-card-name { font-size: 13px; }
  .fd-card-amount { font-size: 14px; margin-left: 8px; }
  .fd-card-explanation { font-size: 12px; }
  .fd-card-action { font-size: 11px; }
  .decide-box { padding: 14px; }
  .decide-box-title { font-size: 15px; }
}

/* Health banner */
.hb { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 6px; margin-bottom: 20px; }
.hb--a { background: #fefbf0; border: 1px solid #f0e4b0; }
.hb--g { background: #f0f8f3; border: 1px solid #b8dfc7; }
.hb--e { background: #f4f2ee; border: 1px solid #e8e4de; }
.hb-i { font-size: 18px; flex-shrink: 0; }
.hb-t { font-size: 14px; color: #333; flex: 1; line-height: 1.4; }
.hb-t strong { color: #111; }
.ban { border-radius: 10px; padding: 15px 20px; margin-bottom: 18px; display: flex; gap: 14px; align-items: flex-start; }
.ban-a { background: #fefbf0; border: 1px solid #f0e4b0; }
.ban-g { background: #f0faf0; border: 1px solid #c3e6c3; }
.ban-b { background: #f0f4ff; border: 1px solid #c5d5f0; }
.ban-w { background: #fafafa; border: 1px solid #ddd; }
.ban-ico { font-size: 18px; line-height: 1.5; flex-shrink: 0; }
.ban-hl { font-size: 14px; font-weight: 600; margin-bottom: 1px; color: #222; line-height: 1.45; }
.ban-gd { font-size: 13px; color: #666; line-height: 1.55; }

/* Page titles */
.pg-t { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: 24px; font-weight: 600; margin-bottom: 4px; text-align: left; }
.pg-s { font-size: 14px; color: #888; margin-bottom: 24px; text-align: left; }
.sec { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #888; margin-bottom: 10px; }
.pill { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill--a { background: #fefbf0; color: #8a6d00; border: 1px solid #f0e4b0; }
.pill--g { background: #f0f8f3; color: #1a6b35; border: 1px solid #b8dfc7; }

/* Buttons */
.b { padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; border: none; cursor: pointer; }
.b--r { background: #cc0000; color: #fff; }
.b--r:hover { background: #aa0000; }
.b--o { background: #fff; color: #555; border: 1px solid #e8e4de; }
.b--o:hover { border-color: #cc0000; color: #cc0000; }
.b--x { background: none; border: none; color: #bbb; font-size: 13px; padding: 5px 8px; cursor: pointer; }
.b--x:hover { color: #cc0000; }
.btn-r { display: block; width: 100%; padding: 10px; border-radius: 6px; font-size: 13px; font-weight: 600; text-align: center; border: none; background: #cc0000; color: #fff; cursor: pointer; }
.btn-r:hover { background: #aa0000; }
.btn-s { display: block; width: 100%; padding: 10px; border-radius: 6px; font-size: 13px; font-weight: 600; text-align: center; border: 1px solid #e8e4de; background: #fff; color: #555; cursor: pointer; }
.btn-s:hover { border-color: #cc0000; color: #cc0000; }
.btn-danger { display: inline-block; padding: 10px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; text-align: center; border: 1px solid #f0cece; background: #fff; color: #cc0000; cursor: pointer; }
.btn-danger:hover { background: #fdf2f2; }

.cc-withdraw-btn { padding: 7px 12px; border-radius: 6px; font-size: 12px; border: 1px solid #e8e4de; background: transparent; color: #888; cursor: pointer; white-space: nowrap; }
.cc-withdraw-btn:hover { border-color: #cc0000; color: #cc0000; }
.cc-withdraw-confirm { padding: 14px 20px; background: #fefbf0; border-top: 1px solid #f0e4b0; }
.cc-withdraw-title { font-size: 13px; font-weight: 600; color: #8a6d00; margin-bottom: 6px; }
.cc-withdraw-msg { font-size: 12px; color: #555; line-height: 1.5; margin-bottom: 12px; }
.cc-withdraw-btns { display: flex; gap: 8px; }
/* D-074: "Als erledigt markieren" — green-tinted to differentiate from withdraw. */
.cc-resolve-btn { padding: 7px 12px; border-radius: 6px; font-size: 12px; border: 1px solid #b7e0c3; background: transparent; color: #1a7a3e; cursor: pointer; white-space: nowrap; }
.cc-resolve-btn:hover { background: #ecf8f0; border-color: #1a7a3e; }
@media (max-width: 767px) {
  .cc-withdraw-btn { width: 100%; text-align: center; padding: 8px; font-size: 12px; }
  .cc-foot .cc-withdraw-btn { order: 3; }
  .cc-withdraw-btns { flex-direction: column; }
  .cc-resolve-btn { width: 100%; text-align: center; padding: 8px; font-size: 12px; }
  .cc-foot .cc-resolve-btn { order: 3; }
}

/* Sidebar */
.sc { padding: 18px; }
.sc-t { font-size: 13px; font-weight: 700; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e8e4de; }
.sc-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f0ede8; font-size: 13px; }
.sc-row:last-of-type { border-bottom: none; }
.sc-row span:first-child { color: #555; }
.sc-row span:last-child { font-weight: 600; }
.sc-link { display: block; font-size: 12px; color: #888; margin-top: 10px; padding-top: 8px; border-top: 1px solid #e8e4de; text-decoration: none; }
.sc-link:hover { color: #cc0000; }
.lease-pos { margin-top: 10px; }
.lease-pos-t { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #888; margin-bottom: 6px; }
.lease-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.lease-tag { font-size: 10px; padding: 2px 7px; background: #f4f2ee; border: 1px solid #e8e4de; border-radius: 4px; color: #555; }

/* ── Prüfungsstatus sidebar (Vertrag page) ── */
.ps-domain {
  margin-bottom: 16px;
}
.ps-domain:last-child {
  margin-bottom: 0;
}
.ps-domain-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #666;
  margin-bottom: 8px;
}
.ps-domain-card {
  background: #faf9f6;
  border: 1px solid #e8e4de;
  border-radius: 8px;
  padding: 14px 16px;
}
.ps-domain-card-amber {
  border-left: 3px solid #d4a017;
}
.ps-domain-card-green {
  border-left: 3px solid #2d8a4e;
}
.ps-status-line {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2px;
}
.ps-detail {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
}
.ps-action {
  font-size: 12px;
  color: #cc0000;
  text-decoration: none;
  margin-top: 6px;
  display: inline-block;
}
.ps-action:hover {
  text-decoration: underline;
}
.ps-cta {
  font-size: 12px;
  color: #cc0000;
  text-decoration: none;
  margin-top: 4px;
  display: inline-block;
}
.ps-cta:hover {
  text-decoration: underline;
}

/* Upload */
.upload { padding: 18px; }
.upload-hdr { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; cursor: pointer; }
.upload-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #888; }
.upload-chev { font-size: 12px; color: #bbb; }
.upload-body.hide { display: none; }
.upload-drop { border: 2px dashed #e8e4de; border-radius: 6px; padding: 24px 14px; margin-bottom: 12px; text-align: center; }
.upload-icon { font-size: 22px; margin-bottom: 4px; }
.upload-t { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.upload-s { font-size: 11px; color: #888; }
.np, .new-check-card, [class*="neue-pruefung"] { border: 1.5px dashed #e0d5cc; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: none; padding: 0; }
.np-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; cursor: pointer; }
.np-lbl { font-size: 13px; color: #cc0000 !important; font-weight: 600; letter-spacing: 0.02em; text-transform: none; }
.np-bar .upload-chev, .np .upload-chev { font-size: 14px; color: #cc0000 !important; }
/* When the accordion is expanded the body needs breathing room inside the
   dashed border (the old .upload { padding: 18px } rule used to supply this). */
.np-body { padding: 0 20px 18px; }
.np-body.hide { display: none; }
/* Safety override: if an ancestor class sneaks in "card" on the np wrapper
   (e.g. legacy markup), strip the card chrome so the compact design wins. */
.np.card { border: 1.5px dashed #e0d5cc !important; box-shadow: none !important; background: #fff !important; padding: 0 !important; }

@media (min-width: 601px) {
  .ck-t { font-size: 19px; }
  .ck-v { font-size: 26px; }
  .ck-m1 { font-size: 13px; }
  .ck-vl { font-size: 11px; }
  .ck-annual { font-size: 13px; }
  .pro-user-menu { display: inline-flex !important; align-items: center; }
}

/* Timeline */
.tl-hdr { background: #fff; border: 1px solid #e8e4de; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.06); padding: 20px 24px; margin-bottom: 20px; }
.tl-hdr-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.tl-back { font-size: 13px; color: #888; background: none; border: none; cursor: pointer; }
.tl-back:hover { color: #cc0000; }
.tl-hdr-main { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tl-title { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: 22px; font-weight: 600; }
.tl-amount { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: 20px; font-weight: 700; color: #8a6d00; white-space: nowrap; }
.tl-amount--green { color: #1a6b35; }
.tl-hdr-details { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 13px; color: #555; flex-wrap: wrap; gap: 4px 16px; }
.tl-flow { display: flex; flex-direction: column; }
.tl-node { border-left: 3px solid #b8dfc7; padding-left: 20px; padding-bottom: 20px; position: relative; }
.tl-node:last-child { padding-bottom: 0; }
.tl-node--done { border-left-color: #b8dfc7; }
.tl-node--current { border-left-color: #8a6d00; }
.tl-node--wait { border-left-color: #f0e4b0; border-left-style: dashed; }
.tl-node::before { content: ""; position: absolute; left: -7px; top: 18px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; z-index: 1; }
.tl-node--done::before { background: #1a6b35; }
.tl-node--current::before { background: #b8860b; }
.tl-node--wait::before { background: #f0e4b0; }
.tl-card { background: #fff; border: 1px solid #e8e4de; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.06); overflow: hidden; }
.tl-card--wait { background: #fefbf0; border: 1px dashed #f0e4b0; box-shadow: none; }
.tl-card-body { padding: 16px 20px; }
.tl-date { font-size: 12px; color: #888; margin-bottom: 2px; }
.tl-card-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.tl-card-sum { font-size: 13px; color: #555; margin-bottom: 8px; line-height: 1.5; }
.tl-exp { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: #cc0000; background: #f4f2ee; border: 1px solid #e8e4de; border-radius: 6px; padding: 4px 12px; cursor: pointer; }
.tl-exp:hover { background: #fdf2f2; border-color: #cc0000; }
.tl-card .node-expandable { background: transparent !important; padding: 0 !important; border-radius: 0 !important; margin: 8px -20px -16px -20px !important; }
.tl-card .node-expandable .tl-findings, .tl-card .node-expandable .tl-docs { border-top: 1px solid #e8e4de; }
.tl-action-bar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid #e8e4de; background: #fafaf8; flex-wrap: wrap; }
.tl-action-bar-text { flex: 1; font-size: 13px; color: #555; }
.tl-action-bar-text strong { color: #333; }
.tl-action-btn { padding: 8px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; border: none; background: #cc0000; color: #fff; white-space: nowrap; cursor: pointer; }
.tl-action-btn:hover { background: #aa0000; }
.tl-findings { border-top: 1px solid #e8e4de; }
.tf-row { padding: 12px 20px; border-bottom: 1px solid #e8e4de; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tf-row:last-child { border-bottom: none; }
.tf-row--flag { background: #fefbf0; }
.tf-name { font-weight: 600; font-size: 13px; }
.tf-badge { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }
.tf-badge--a { background: #fefbf0; color: #8a6d00; border: 1px solid #f0e4b0; }
.tf-badge--g { background: #f0f8f3; color: #1a6b35; border: 1px solid #b8dfc7; }
.tf-desc { font-size: 12px; color: #555; margin-top: 4px; line-height: 1.6; }
.tf-ref { font-size: 11px; color: #bbb; margin-top: 3px; }
.tf-amt { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: 14px; font-weight: 700; flex-shrink: 0; white-space: nowrap; }
.tf-amt--a { color: #8a6d00; }
.tf-amt--g { color: #1a6b35; }
.tl-docs { border-top: 1px solid #e8e4de; padding: 14px 20px; }
.tl-docs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.tl-doc { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px; background: #fafaf8; border: 1px solid #e8e4de; border-radius: 6px; cursor: pointer; text-align: center; }
.tl-doc:hover { border-color: #cc0000; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.tl-doc-icon { font-size: 20px; }
.tl-doc-name { font-size: 11px; font-weight: 600; color: #333; }
.tl-doc-type { font-size: 10px; color: #bbb; text-transform: uppercase; }
.tl-docs-actions { display: flex; gap: 8px; }
.tl-docs-actions .btn-r, .tl-docs-actions .btn-s { flex: 1 !important; width: auto !important; }

/* Abo */
.abo-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.abo-plan { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: 22px; font-weight: 600; }
.abo-until { font-size: 14px; color: #888; margin-top: 4px; }
.abo-badge { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: #f0f8f3; color: #1a6b35; border: 1px solid #b8dfc7; }
.abo-section { margin-bottom: 24px; }
.abo-section-title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #888; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #e8e4de; }
.abo-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f0ede8; font-size: 14px; }
.abo-row:last-of-type { border-bottom: none; }
.abo-row span:first-child { color: #555; }
.abo-row span:last-child { font-weight: 600; }
.abo-invoice { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0ede8; font-size: 13px; }
.abo-invoice:last-of-type { border-bottom: none; }
/* ── Abo manage button (sidebar, standalone) ── */
.abo-manage-btn {
  display: block;
  width: 100%;
  padding: 13px;
  box-sizing: border-box;
  border: 1.5px solid var(--rule, #e8e4de);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-2, #333);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  transition: all 0.15s;
}
.abo-manage-btn:hover { background: #fdfcfa; border-color: #ccc; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
/* Cancel note */
.abo-cancel-note {
  font-size: 13px;
  color: var(--ink-3, #666);
  line-height: 1.5;
  padding: 10px 0 4px;
}
/* ── Features card (warm grey, outside main card) ── */
.features-card {
  margin-top: 16px;
  background: #f8f7f4;
  border: 1px solid #e8e4de;
  border-radius: 10px;
  overflow: hidden;
}
.features-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 18px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
.features-toggle:hover { background: #f4f2ee; }
.features-chev {
  font-size: 14px;
  color: #999;
  transition: transform 0.15s;
}
.features-card.is-open .features-chev { transform: rotate(180deg); }
.features-body { padding: 0 18px 14px; }
.feat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
}
.feat-label { color: #555; }
.feat-value { color: #2d8a4e; font-weight: 600; font-size: 12px; }
/* ── Konto sidebar email note ── */
.abo-email-note {
  font-size: 11px;
  color: var(--ink-4, #999);
  margin-top: 6px;
  padding-top: 0;
  border-top: none;
}
.abo-email-note a {
  color: var(--red, #cc0000);
  text-decoration: none;
  font-weight: 600;
}
/* ── Payment icons ── */
.payment-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.pay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 22px;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.pay-icon--visa {
  background: linear-gradient(135deg, #1a1f71, #2d5ba4);
  color: #fff;
  font-style: italic;
  font-size: 9px;
}
.pay-icon--mc {
  background: #fff;
  color: transparent;
  position: relative;
  overflow: hidden;
}
.pay-icon--mc::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #eb001b;
  left: 8px;
  top: 5px;
}
.pay-icon--mc::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f79e1b;
  left: 16px;
  top: 5px;
}
/* ── Danger card (simplified) ── */
.danger-card {
  background: #fff;
  border: 1px solid #e8e4de;
  border-left: 3px solid var(--red, #cc0000);
  border-radius: 0 12px 12px 0;
  padding: 18px 20px;
}
.danger-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--red, #cc0000);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.danger-text {
  font-size: 12px;
  color: #888;
  line-height: 1.55;
  margin-bottom: 12px;
}
.danger-btn {
  padding: 8px 18px;
  border: 1px solid #e8e4de;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #999;
  cursor: pointer;
}
.danger-btn:hover { color: var(--red, #cc0000); border-color: var(--red, #cc0000); }
.danger-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.danger-card-inner { transition: opacity 0.2s ease; }
.danger-confirm-btn {
  padding: 8px 18px;
  background: var(--red, #cc0000);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.danger-confirm-btn:hover { background: #aa0000; }
.danger-confirm-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.danger-cancel-btn {
  padding: 8px 18px;
  background: none;
  border: 1px solid var(--rule, #e8e4de);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #888;
  cursor: pointer;
}
.danger-cancel-btn:hover { border-color: #ccc; color: #555; }

/* RZ result */
.rz-box { background: #f0f8f3; border: 1px solid #b8dfc7; border-radius: 6px; padding: 14px 16px; margin: 8px 0; }
.rz-label { font-size: 12px; color: #1a6b35; font-weight: 600; margin-bottom: 2px; }
.rz-amount { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: 24px; font-weight: 700; color: #1a6b35; }
.rz-sub { font-size: 13px; color: #555; margin-top: 2px; }

/* Mobile */
@media (max-width: 767px) {
  .dc-strip-line2 { display: block; width: 100%; font-size: 13px; color: #333; font-weight: 500; }
  .dc.exp .dc-strip-line2 { display: none; }
  .dc-chev { display: block; font-size: 13px; color: #bbb; transition: transform 0.2s; }
  .dc.exp .dc-chev { transform: rotate(180deg); }
  .dc { border-radius: 0; box-shadow: none; border-left: none; border-right: none; border-bottom: none; }
  .dc:first-child { border-radius: 6px 6px 0 0; }
  .dc:last-child { border-radius: 0 0 6px 6px; border-bottom: 1px solid #e8e4de; }
  .dc-body, .dc-action { display: none; }
  .dc.exp .dc-body, .dc.exp .dc-action { display: flex; }
  .ck-row { flex-direction: column; gap: 10px; }
  .ck-verdict { text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .tf-row { padding: 10px 14px; flex-direction: column; gap: 4px; }
  .hb { flex-wrap: wrap; }
  .pg-t { font-size: 20px; }
  .pg-s { margin-bottom: 16px; }
  .tl-hdr { padding: 14px 16px; }
  .tl-title { font-size: 18px; }
  .tl-amount { font-size: 17px; }
  .tl-hdr-details { font-size: 12px; }
  .tl-node { padding-left: 14px; padding-bottom: 16px; }
  .tl-card-body { padding: 12px 14px; }
  .tl-card .node-expandable { margin: 8px -14px -12px -14px !important; }
  .tl-card-title { font-size: 14px; }
  .tl-action-bar { padding: 10px 14px; }
  .tl-action-btn { width: 100%; text-align: center; }
  .tl-docs { padding: 12px 14px; }
  .xref-callout { width: 100%; max-width: 100%; }
  .tl-docs-actions { flex-direction: column; }
  .rz-amount { font-size: 20px; }
}

@media (max-width: 600px) {
  .np {
    border: 1px dashed #d8d4cc !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: hidden;
    margin-bottom: 12px;
  }
  .np .upload-hdr.np-bar,
  .np .np-bar {
    padding: 14px 18px !important;
  }
  .np-bar {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
  }
  .np-lbl {
    font-size: 12px;
    color: #888;
    font-weight: 600;
  }
  .ban { padding: 13px 14px; margin-bottom: 14px; gap: 10px; }
  .ban-ico { font-size: 16px; }
  .ban-hl { font-size: 13px; line-height: 1.4; }
  .ban-gd { font-size: 12px; }
  .ck-t { font-size: 16px; }
  .ck-v { font-size: 22px; padding-left: 8px; }
  .ck-m1 { font-size: 11px; line-height: 1.5; }
  .ck-vl { font-size: 10px; padding-left: 8px; }
  .ck-annual { font-size: 12px; padding-left: 8px; }
  .np .upload-body.np-body {
    padding: 0 18px 16px !important;
  }
  .hamburger-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e8e4de;
    border-radius: 6px;
    background: #fff;
    color: #555;
    font-size: 19px;
    cursor: pointer;
    margin-left: auto;
  }
  .pro-header {
    gap: 0;
    padding: 0 14px;
    align-items: center;
  }
  .pro-header .brand {
    padding: 12px 0;
  }
  .pro-user-menu {
    display: none !important;
  }
  .lay:not([hidden]) { display: flex !important; flex-direction: column !important; }
  .nk-side-stack { display: flex; flex-direction: column; gap: 16px; }
  .nk-side-stack .np { order: 2; }
  .pro-header .h-tabs {
    width: calc(100% + 28px);
    margin: 0 -14px;
    order: 3;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #f2f0ec;
    border-bottom: 1px solid #e8e4de;
    overflow: visible;
  }
  .pro-header .h-tabs .h-tab {
    flex: 1;
    min-width: 0;
    padding: 10px 4px;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
  }
  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    z-index: 110;
  }
  .mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: min(82vw, 300px);
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 120;
    padding: 20px 18px;
  }
  .mobile-menu-close {
    border: none;
    background: none;
    color: #777;
    font-size: 18px;
    margin-left: auto;
    margin-bottom: 10px;
    display: block;
    cursor: pointer;
  }
  .mobile-menu-link {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    border-bottom: 1px solid #f4f2ee;
    background: none;
    padding: 14px 0;
    font-size: 16px;
    color: #1a1a1a;
    cursor: pointer;
  }
  .mobile-menu-email {
    padding: 14px 0;
    font-size: 14px;
    color: #888;
    border-bottom: 1px solid #f4f2ee;
    word-break: break-word;
  }
  .mobile-menu-link--logout {
    color: #cc0000;
    border-bottom: none;
  }

  .ck-btns {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 8px;
  }
  .ck-btns .b,
  .ck-btns .cc-withdraw-btn,
  .ck-btns .cc-resolve-btn {
    width: 100%;
    text-align: center;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
  .ck-btns .b--x {
    width: 100%;
    border: 1px solid #e8e4de;
    border-radius: 6px;
    color: #888;
  }
  .ck-btns .b--x:hover {
    border-color: #cc0000;
    color: #cc0000;
  }
  .cc-withdraw-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 8px;
    font-size: 12px;
    color: #999;
    background: none !important;
    border: none !important;
  }
  .cc-withdraw-btn:hover {
    color: #cc0000;
  }
  .tl-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .tl-action-btn,
  .tl-action-bar .cc-withdraw-btn,
  .tl-action-bar .cc-resolve-btn {
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    font-size: 14px;
  }

  .upload {
    padding: 10px 14px !important;
  }
  .upload-hdr {
    padding: 8px 0 !important;
  }
  .upload-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
  }
  .upload-chev {
    font-size: 13px;
  }
}

@media (min-width: 601px) {
  .hamburger-btn,
  .mobile-menu,
  .mobile-menu-overlay {
    display: none !important;
  }
}

/* ═══ Vertragsabgleich cards (CURSOR_PROMPT_9) ═══ */
/* Prompt — pre-run state */
.xref-prompt {
  background: #faf8ff;
  border: 1px solid #e8e0f5;
  border-left: 3px solid #7c3aed;
  border-radius: 0 10px 10px 0;
  padding: 18px 20px;
  margin: 16px 0;
}
.xref-prompt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.xref-prompt-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #7c3aed;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.xref-prompt-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
.xref-prompt-text {
  font-size: 12px;
  color: #666;
  line-height: 1.55;
  margin-bottom: 14px;
  padding-left: 36px;
}
.xref-prompt-btn {
  margin-left: 36px;
  padding: 9px 20px;
  border: 1.5px solid #7c3aed;
  border-radius: 8px;
  background: none;
  color: #7c3aed;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.xref-prompt-btn:hover {
  background: #f0ecff;
}
.xref-prompt-error {
  font-size: 12px;
  color: var(--red, #cc0000);
  margin-top: 8px;
  padding-left: 36px;
}

/* Done — conflicts */
.xref-done {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #faf8ff;
  border: 1px solid #e8e0f5;
  border-left: 3px solid #7c3aed;
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin: 16px 0;
}
.xref-done-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.xref-done-icon {
  font-size: 16px;
}
.xref-done-text {
  font-size: 13px;
  font-weight: 600;
  color: #5b21b6;
}
.xref-done-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #7c3aed;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}
.xref-done-link {
  font-size: 11px;
  color: #7c3aed;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.xref-done-link:hover {
  text-decoration: underline;
}

/* Clean — no conflicts */
.xref-clean {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f0faf0;
  border: 1px solid #c3e6c3;
  border-left: 3px solid #2d8a4e;
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin: 16px 0;
}
.xref-clean-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.xref-clean-check {
  font-size: 14px;
  color: #2d8a4e;
  font-weight: 700;
}
.xref-clean-text {
  font-size: 13px;
  font-weight: 600;
  color: #155724;
}

/* Locked — non-PRO users */
.xref-locked {
  background: #fff;
  border: 1px solid #e8e4de;
  border-left: 3px solid #7c3aed;
  border-radius: 0 10px 10px 0;
  padding: 18px 20px;
  margin: 16px 0;
}
.xref-locked-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.xref-locked-icon {
  font-size: 16px;
}
.xref-locked-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
.xref-locked-text {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
  margin-bottom: 14px;
  padding-left: 28px;
}
.xref-locked-cta {
  margin-left: 28px;
  padding: 9px 20px;
  border: 1.5px solid #7c3aed;
  border-radius: 8px;
  background: none;
  color: #7c3aed;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.xref-locked-cta:hover {
  background: #f5f3ff;
}
.xref-locked-price {
  margin-left: 28px;
  margin-top: 6px;
  font-size: 11px;
  color: #999;
}

/* Übersicht NK card indicator line */
.ov-xref-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0ece4;
  font-size: 11px;
  color: #7c3aed;
  font-weight: 600;
  cursor: pointer;
}
.ov-xref-line:hover {
  color: #5b21b6;
}
.ov-xref-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7c3aed;
  flex-shrink: 0;
}
.ov-xref-line--clean {
  color: #2d8a4e;
}

@media (max-width: 768px) {
  .xref-prompt {
    padding: 14px 16px;
  }
  .xref-prompt-icon {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  .xref-prompt-text {
    padding-left: 32px;
    font-size: 11px;
  }
  .xref-prompt-btn {
    margin-left: 32px;
    width: calc(100% - 32px);
    text-align: center;
    padding: 10px;
    font-size: 12px;
  }
  .xref-done {
    padding: 10px 12px;
  }
  .xref-done-text {
    font-size: 12px;
  }
  .xref-done-link {
    font-size: 10px;
  }
  .xref-clean {
    padding: 10px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .xref-clean-text {
    font-size: 12px;
  }
  .xref-locked {
    padding: 14px 16px;
  }
  .xref-locked-text {
    padding-left: 24px;
    font-size: 11px;
  }
  .xref-locked-cta {
    margin-left: 24px;
    width: calc(100% - 24px);
    text-align: center;
    padding: 10px;
    font-size: 12px;
  }
  .xref-locked-price {
    margin-left: 24px;
  }
}

/* ───────────── MZ "Neu berechnen" inline confirmation ─────────────
   Same crossfade pattern as the Mein Abo "Konto löschen" danger card. */
.recalc-inner {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity 0.2s ease;
}
.recalc-confirm-text {
  font-size: 12px;
  color: #666;
  margin-bottom: 2px;
}
.recalc-confirm-actions {
  display: flex;
  gap: 8px;
}
.recalc-confirm-btn {
  padding: 7px 16px;
  background: var(--red, #cc0000);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.recalc-cancel-btn {
  padding: 7px 16px;
  background: none;
  border: 1px solid var(--rule, #e8e4de);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #888;
  cursor: pointer;
}

/* ── sc-nav-row: tappable sidebar nav for empty states ── */
.sc-nav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--rule, #e8e4de);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.sc-nav-row:hover {
  background: var(--bg-alt, #f8f7f5);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  text-decoration: none;
}
.sc-nav-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}
.sc-nav-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sc-nav-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-1, #1a1a1a);
}
.sc-nav-sub {
  font-size: 11px;
  color: var(--ink-4, #999);
  line-height: 1.4;
}
.sc-nav-arrow {
  font-size: 14px;
  color: var(--ink-4, #999);
  flex-shrink: 0;
}

/* ── mv-empty: hero empty state for Vertrag tab ── */
.mv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px 40px;
  gap: 12px;
}
.mv-empty__icon {
  font-size: 40px;
  line-height: 1;
}
.mv-empty__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-1, #1a1a1a);
}
.mv-empty__sub {
  font-size: 14px;
  color: var(--ink-3, #666);
  max-width: 360px;
  line-height: 1.5;
  margin: 0;
}
.mv-empty__cta {
  margin-top: 8px;
  width: auto !important;
  display: inline-block !important;
  padding: 11px 24px !important;
}

/* ── abg-divider: "Abgeschlossen" section separator ── */
.abg-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0 4px;
}
.abg-divider-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-4, #999);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
}
.abg-divider-line {
  flex: 1;
  height: 1px;
  background: var(--rule, #e8e4de);
}
.abg-divider-count {
  font-size: 11px;
  color: var(--ink-5, #bbb);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Erledigt / closed-case muted visual treatment ── */
.case-card--erledigt,
.mz-case-card--erledigt {
  border-left-color: var(--ink-5, #ccc) !important;
  background: var(--bg-alt, #f8f7f5) !important;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.case-card--erledigt:hover,
.mz-case-card--erledigt:hover {
  opacity: 1;
}

.mz-closed-cases-group {
  margin-bottom: 24px;
}

/* ── PRO page footer ── */
.pro-site-footer {
  text-align: center;
  padding: 24px 16px 32px;
  font-size: 11px;
  color: var(--ink-4, #999);
  border-top: 1px solid var(--rule, #e8e4de);
  margin-top: 32px;
}
.pro-site-footer a {
  color: var(--ink-4, #999);
  text-decoration: none;
}
.pro-site-footer a:hover {
  text-decoration: underline;
}
.pro-site-footer .fsep {
  margin: 0 6px;
  opacity: 0.5;
}