/* ==============================
   Forderungsbewertung – B2 Design
   Steel Grey · Rounded · Spacious
   ============================== */

:root {
  --navy:       #002e63;
  --navy-d:     #001a3d;
  --navy-l:     #EFF6FF;
  --slate:      #475569;
  --slate-l:    #64748B;
  --text:       #0F172A;
  --muted:      #64748B;
  --border:     #E2E8F0;
  --surface:    #F8FAFC;
  --card:       #ffffff;
  --green:      #059669;
  --green-l:    #F0FDF4;
  --amber:      #D97706;
  --amber-l:    #FFFBEB;
  --red:        #DC2626;
  --red-l:      #FFF1F2;
  --r-pill:     999px;
  --r-card:     14px;
  --r-btn:      8px;
}

/* ─── PRINT ──────────────────────────────────────── */
.print-header { display: none; }
@page { size: A4 portrait; margin: 1.2cm; }
@media print {
  .no-print,.mud-stepper-header,.mud-stepper-nav,.mud-appbar,.app-footer { display:none!important; }
  .print-header { display:block!important; }
  html,body { background:#fff!important; margin:0!important; padding:0!important; font-size:9pt!important; }
  .mud-main-content { padding:0!important; margin:0!important; background:#fff!important; }
  .results-container { max-width:none!important; width:100%!important; padding:0!important; margin:0!important; zoom:.72; }
  .kpi-grid { grid-template-columns:repeat(4,1fr)!important; }
  .chart-grid { grid-template-columns:repeat(2,1fr)!important; }
  .mud-paper,.mud-table-container { break-inside:avoid; box-shadow:none!important; border:1px solid #ccc!important; }
  .mud-progress-linear { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .mud-table { display:table!important; width:100%!important; font-size:7.5pt!important; }
  .mud-table thead { display:table-header-group!important; }
  .mud-table tbody tr { display:table-row!important; border:none!important; box-shadow:none!important; }
  .mud-table tbody td { display:table-cell!important; border-bottom:1px solid #e0e0e0!important; padding:3px 6px!important; }
  .mud-table tbody td::before { display:none!important; }
  .risk-meter .risk-bar { display:none!important; }
}

/* ─── BASE ───────────────────────────────────────── */
html,body {
  font-family: 'Open Sans', Arial, sans-serif;
  background: var(--surface);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─── NAVBAR ─────────────────────────────────────── */
.mud-appbar {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 var(--border) !important;
}

/* ─── LANDING PAGE ───────────────────────────────── */

/* Hero */
.hero-section {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 460px;
  align-items: stretch;
  min-height: calc(100vh - 64px);
}
.hero-left {
  padding: 72px 64px 72px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-logo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
.hero-logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
}
.hero-logo-text-wrap { display: flex; flex-direction: column; }
.hero-logo-name { font-weight: 800; color: var(--text); font-size: 1.1rem; line-height: 1.2; }
.hero-logo-sub  { font-size: 0.72rem; color: #94A3B8; font-weight: 500; }

.hero-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-title {
  font-size: 2.9rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.09;
  letter-spacing: -0.035em;
  margin-bottom: 16px;
}
.hero-title em { font-style:normal; color:var(--navy); }

.hero-subtitle {
  color: var(--muted);
  font-size: 1rem;
  max-width: 440px;
  line-height: 1.78;
  margin-bottom: 32px;
}
.hero-cta-row {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-btn-primary {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 13px 28px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,46,99,.22);
  font-family: inherit;
  transition: background .15s;
}
.hero-btn-primary:hover { background: #001e45; }
.hero-btn-secondary {
  background: #F1F5F9;
  color: var(--slate);
  border: none;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.hero-btn-secondary:hover { background: #E2E8F0; }
.hero-btn-link {
  background: none;
  border: none;
  color: #94A3B8;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  font-family: inherit;
}
.hero-cta-sub {
  margin-top: 10px;
}
.hero-btn-tertiary {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  padding: 11px 26px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.hero-btn-tertiary:hover { background: var(--navy); color: #fff; }
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #F8FAFC;
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--slate);
}
.hero-pill-dot { width:5px; height:5px; border-radius:50%; background:var(--green); flex-shrink:0; }
.hero-pill-dot.blue { background: var(--navy); }

/* Hero right (dashboard preview) */
.hero-right {
  background: var(--navy);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 40px;
  position: relative;
  overflow: hidden;
}
.hero-right::before {
  content:'';
  position:absolute;
  top:-100px; right:-80px;
  width:300px; height:300px;
  border-radius:50%;
  background:rgba(255,255,255,.03);
}
.dash-lbl { font-size:.63rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.35); margin-bottom:16px; position:relative; z-index:1; }
.dash-kpis { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:18px; position:relative; z-index:1; }
.dash-kpi  { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:9px; padding:12px; }
.dk-label  { font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.36); margin-bottom:3px; }
.dk-value  { font-size:1.1rem; font-weight:800; color:#fff; }
.dk-value.green { color:#4ade80; }
.dk-value.red   { color:#f87171; }
.dash-divider   { height:1px; background:rgba(255,255,255,.07); margin-bottom:16px; position:relative; z-index:1; }
.dash-risk-lbl  { font-size:.63rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.35); margin-bottom:12px; position:relative; z-index:1; }
.dash-risk-rows { display:flex; flex-direction:column; gap:9px; position:relative; z-index:1; }
.dash-risk-row  { display:grid; grid-template-columns:64px 1fr 24px; align-items:center; gap:7px; }
.drr-label { font-size:.71rem; color:rgba(255,255,255,.58); }
.drr-track { height:5px; background:rgba(255,255,255,.07); border-radius:999px; overflow:hidden; }
.drr-fill  { height:100%; border-radius:999px; }
.drr-fill.g  { background:#34d399; }
.drr-fill.a  { background:#fbbf24; }
.drr-fill.r  { background:#f87171; }
.drr-fill.dr { background:#ef4444; }
.drr-count { font-size:.68rem; color:rgba(255,255,255,.32); text-align:right; }
.dash-footer { margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.07); display:flex; justify-content:space-between; position:relative; z-index:1; }
.dash-footer-item { font-size:.68rem; color:rgba(255,255,255,.38); }
.dash-footer-item strong { color:rgba(255,255,255,.72); display:block; font-weight:700; font-size:.78rem; }

/* How it works */
.how-section { background:var(--card); border-bottom:1px solid var(--border); padding:72px 0; }
.landing-section-inner { max-width:1200px; margin:0 auto; padding:0 56px; }
.landing-eyebrow { font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-align:center; margin-bottom:10px; }
.landing-title { font-size:2rem; font-weight:800; color:var(--text); text-align:center; letter-spacing:-.025em; margin-bottom:8px; }
.landing-sub { text-align:center; color:var(--muted); font-size:.92rem; max-width:480px; margin:0 auto 48px; line-height:1.7; }
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.steps-grid::before { content:''; position:absolute; top:27px; left:calc(12.5% + 10px); right:calc(12.5% + 10px); height:1px; background:var(--border); z-index:0; }
.step-item { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 20px; position:relative; z-index:1; }
.step-circle { width:54px; height:54px; border-radius:50%; background:#F1F5F9; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:18px; flex-shrink:0; transition:all .2s; }
.step-circle.active { background:var(--navy); border-color:var(--navy); }
.step-circle.active .step-num-txt { color:#fff; }
.step-num-txt { font-weight:800; font-size:1rem; color:var(--navy); }
.step-title { font-weight:700; font-size:.92rem; color:var(--text); margin-bottom:8px; }
.step-body  { font-size:.8rem; color:var(--muted); line-height:1.65; }

/* Features */
.features-section { background:var(--surface); border-bottom:1px solid var(--border); padding:72px 0; }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feat-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:28px; display:flex; flex-direction:column; gap:12px; }
.feat-icon-wrap { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.feat-icon-wrap.navy  { background:var(--navy-l); }
.feat-icon-wrap.green { background:var(--green-l); }
.feat-icon-wrap.amber { background:var(--amber-l); }
.feat-icon-wrap.red   { background:var(--red-l); }
.feat-icon-wrap.slate { background:#F1F5F9; }
.feat-icon-wrap.teal  { background:#F0FDFA; }
.feat-card-title { font-weight:700; font-size:.95rem; color:var(--text); }
.feat-card-sub   { font-size:.8rem; color:var(--slate-l); line-height:1.6; }
.feat-bullets { list-style:none; padding:0; display:flex; flex-direction:column; gap:5px; margin-top:4px; }
.feat-bullets li { font-size:.78rem; color:var(--slate); display:flex; align-items:flex-start; gap:7px; line-height:1.5; }
.feat-bullets li::before { content:'✓'; color:var(--green); font-weight:700; flex-shrink:0; margin-top:1px; }

/* Trust */
.trust-section { background:var(--navy); padding:64px 0; }
.trust-inner { max-width:1200px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.trust-eyebrow { font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:10px; }
.trust-title { font-size:1.9rem; font-weight:800; color:#fff; letter-spacing:-.025em; margin-bottom:10px; line-height:1.15; }
.trust-sub  { color:rgba(255,255,255,.58); font-size:.9rem; line-height:1.75; }
.trust-items { display:flex; flex-direction:column; gap:14px; }
.trust-item { display:flex; align-items:flex-start; gap:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:16px 18px; }
.trust-item-icon  { font-size:18px; flex-shrink:0; margin-top:1px; }
.trust-item-title { font-weight:700; font-size:.86rem; color:#fff; margin-bottom:3px; }
.trust-item-body  { font-size:.77rem; color:rgba(255,255,255,.54); line-height:1.6; }

/* Bottom CTA */
.cta-section { background:var(--card); border-top:1px solid var(--border); padding:72px 0; }
.cta-inner { max-width:600px; margin:0 auto; text-align:center; padding:0 40px; }
.cta-title { font-size:1.9rem; font-weight:800; color:var(--text); letter-spacing:-.025em; margin-bottom:12px; }
.cta-sub   { color:var(--muted); font-size:.92rem; line-height:1.75; margin-bottom:32px; }
.cta-btns  { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Datenschutz box in hero */
.datenschutz-hinweis {
  max-width:680px; margin:1.25rem auto 0;
  background:var(--green-l); border:1px solid #BBF7D0;
  border-radius:8px; padding:14px 20px;
  text-align:left; font-size:.84rem; color:#1a4d2e;
}
.datenschutz-hinweis-title { font-weight:700; font-size:.88rem; margin-bottom:8px; color:#155d27; }
.datenschutz-hinweis-list { margin:0 0 8px; padding:0; list-style:none; line-height:1.8; }
.datenschutz-hinweis-list li::before { content:'✓'; color:var(--green); font-weight:700; margin-right:8px; }
.datenschutz-hinweis-para { margin:0; line-height:1.6; color:#2d6a4f; }

/* ─── WIZARD CONTAINER ───────────────────────────── */
.wizard-container   { max-width:900px; margin:0 auto; padding:2rem 1.5rem 5rem; }
.results-container  { max-width:1200px; margin:0 auto; padding:2rem 1.5rem 5rem; }

/* ─── KPI GRID ───────────────────────────────────── */
.kpi-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.25rem;
  margin-bottom:2rem;
}
.kpi-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-card); position:relative; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.05); transition:box-shadow .2s,transform .2s;
}
.kpi-card:hover { box-shadow:0 6px 20px rgba(0,0,0,.08); transform:translateY(-1px); }
.kpi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--r-card) var(--r-card) 0 0; }
.kpi-blue::before   { background:var(--navy); }
.kpi-green::before  { background:var(--green); }
.kpi-orange::before { background:var(--amber); }
.kpi-red::before    { background:var(--red); }
.kpi-label { font-size:.7rem; font-weight:700; color:#94A3B8; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.5rem; }
.kpi-value { font-size:1.65rem; font-weight:800; color:var(--text); letter-spacing:-.02em; line-height:1.2; }
.kpi-sub   { font-size:.75rem; color:#94A3B8; margin-top:.25rem; }

/* ─── CHART GRID ─────────────────────────────────── */
.chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-bottom:2rem; }

/* ─── RISK METER ─────────────────────────────────── */
.risk-meter { display:flex; align-items:center; gap:.5rem; min-width:120px; }
.risk-bar   { flex:1; height:6px; background:#E2E8F0; border-radius:999px; overflow:hidden; }
.risk-fill  { height:100%; border-radius:999px; transition:width .4s; }
.risk-fill.low       { background:var(--green); }
.risk-fill.medium    { background:var(--amber); }
.risk-fill.high      { background:var(--red); }
.risk-fill.very-high { background:#991B1B; }
.risk-fill.not-due   { background:#94A3B8; }
.risk-pct { font-size:.75rem; font-weight:600; min-width:38px; text-align:right; color:var(--muted); }

/* ─── MAPPING ITEMS ──────────────────────────────── */
.mapping-item {
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:1rem; padding:1rem 1.5rem;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-card); margin-bottom:.75rem; transition:border-color .2s;
}
.mapping-item.mapped { border-color:var(--green); background:rgba(5,150,105,.03); }

/* ─── QUESTION CARDS ─────────────────────────────── */
.question-card {
  padding:1.25rem 1.5rem; background:var(--card);
  border:1px solid var(--border); border-left:3px solid var(--navy);
  border-radius:var(--r-card); margin-bottom:.75rem;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}

/* ─── FOOTER ─────────────────────────────────────── */
.app-footer {
  position:fixed; bottom:0; left:0; right:0;
  text-align:center; padding:.5rem 1rem;
  color:var(--muted); font-size:.82rem;
  border-top:1px solid var(--border);
  background:rgba(248,250,252,.97);
  backdrop-filter:blur(6px); z-index:100;
}
.datenschutz-link { color:var(--navy); cursor:pointer; text-decoration:none; }
.datenschutz-link:hover { text-decoration:underline; }

/* ─── DATENSCHUTZ MODAL ──────────────────────────── */
.datenschutz-content h3 { font-size:.95rem; font-weight:700; color:var(--text); margin:20px 0 6px; }
.datenschutz-content h4 { font-size:.88rem; font-weight:600; color:#444; margin:14px 0 4px; }
.datenschutz-content p  { font-size:.88rem; color:var(--muted); margin:0 0 8px; line-height:1.6; }
.datenschutz-content ul { font-size:.88rem; color:var(--muted); margin:0 0 8px 1.4em; padding:0; line-height:1.7; }
.mud-step-label-content { color:var(--muted) !important; }

/* ─── ANIMATIONS ─────────────────────────────────── */
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
.animate-fade-in { animation:fadeIn .4s ease; }

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-right { display:none; }
  .hero-left { padding:56px 40px; }
  .trust-inner { grid-template-columns:1fr; gap:32px; }
}
@media (max-width:768px) {
  /* Grids */
  .chart-grid { grid-template-columns:1fr; }
  .kpi-grid   { grid-template-columns:repeat(2,1fr); }
  .mapping-item { grid-template-columns:1fr; text-align:center; }
  .features-grid { grid-template-columns:1fr; }
  .steps-grid { grid-template-columns:1fr 1fr; }
  .steps-grid::before { display:none; }
  /* Hero */
  .hero-left { padding:36px 24px 40px; }
  .hero-title { font-size:2.1rem; letter-spacing:-.02em; }
  .hero-subtitle { max-width:100%; }
  /* Sections */
  .landing-section-inner { padding:0 20px; }
  .trust-inner { padding:0 20px; }
  .cta-inner { padding:0 20px; }
  .how-section { padding:48px 0; }
  .features-section { padding:48px 0; }
  .trust-section { padding:40px 0; }
  .cta-section { padding:48px 0; }
  .landing-title { font-size:1.65rem; }
  .trust-title { font-size:1.5rem; }
}
@media (max-width:480px) {
  .kpi-grid { grid-template-columns:1fr; }
  .steps-grid { grid-template-columns:1fr; }
  /* Hero */
  .hero-left { padding:28px 16px 36px; }
  .hero-title { font-size:1.75rem; }
  .hero-cta-row { flex-direction:column; align-items:stretch; }
  .hero-btn-primary,
  .hero-btn-secondary,
  .hero-btn-tertiary { text-align:center; width:100%; }
  .hero-cta-sub { width:100%; }
  /* Sections */
  .landing-section-inner { padding:0 16px; }
  .trust-inner { padding:0 16px; }
  .cta-inner { padding:0 16px; }
  .landing-title { font-size:1.45rem; }
}

/* ─── EXPERTENMODUS ──────────────────────────────── */
.results-container.results-expert { max-width:1480px; }
.expert-criteria { background:#FFF3E0 !important; border:1px dashed #FF9800; border-radius:6px !important; }
.expert-title { font-weight:600 !important; color:#E65100; text-transform:uppercase; font-size:.72rem !important; letter-spacing:.05em; }
.expert-panels .mud-expand-panel { background:#ffffff; border:1px solid #FFE0B2; margin-bottom:6px !important; border-radius:6px !important; }
.expert-panels .mud-expand-panel::before { display:none; }
.expert-panels .mud-expand-panel-header { font-weight:600; font-size:.9rem; }
.expert-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px 28px; }

.expert-age-table { border-collapse:collapse; width:100%; max-width:560px; }
.expert-age-table th { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); text-align:left; font-weight:600; padding:2px 8px 4px 0; }
.expert-age-table td { padding:2px 8px 2px 0; vertical-align:middle; }
.expert-age-table td.age-label { font-size:.85rem; font-weight:600; white-space:nowrap; min-width:110px; }
.expert-age-table .mud-input-control { margin:0 !important; max-width:140px; }
.expert-age-table .age-open { font-size:.8rem; color:var(--muted); font-style:italic; }

.expert-table-hint { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:8px 16px; font-size:.8rem; color:#9A3412; background:var(--amber-l); border-bottom:1px solid #FDE68A; }
.expert-table-hint kbd { font-family:inherit; font-size:.72rem; padding:1px 5px; border:1px solid #FCD34D; border-bottom-width:2px; border-radius:4px; background:#fff; }

tr.claim-row { cursor:pointer; }
tr.claim-row-overridden > td:first-child { box-shadow:inset 3px 0 0 var(--amber); }
tr.claim-row-editing { background:var(--amber-l) !important; cursor:default; }
tr.claim-row-editing > td { vertical-align:top; padding-top:8px !important; padding-bottom:8px !important; }
tr.claim-row-editing > td:first-child { box-shadow:inset 3px 0 0 var(--amber); }

.edit-input { margin:0 !important; }
.edit-input .mud-input { font-size:.85rem; background:#fff; }
.edit-w-xs { width:78px; }
.edit-w-sm { width:108px; }
.edit-w-md { width:128px; }
.edit-w-pct { width:86px; }
tr.claim-row-editing > td { padding-left:6px !important; padding-right:6px !important; }
tr.claim-row-editing .mud-input-adornment-end .mud-icon-button { padding:2px; }
.edit-right input { text-align:right; }
.edit-sub { font-size:.7rem; color:var(--muted); margin-top:3px; white-space:nowrap; }
.override-mark { color:var(--amber) !important; font-size:.95rem !important; }

@media print {
  tr.claim-row-overridden > td:first-child, tr.claim-row-editing > td:first-child { box-shadow:none; }
  .override-mark { display:none !important; }
}
.pdf-option-switch .mud-typography { font-size:.8rem; color:#9A3412; }
.pdf-option-switch { margin-right:4px; }