@font-face { font-family:'Nexa'; src:url('roi-kalkulator-extern/_ds/hello-again-design-system-kyra-019ddd7f-9a79-76c2-9b63-6b22e35c0f14/fonts/Nexa-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Nexa'; src:url('roi-kalkulator-extern/_ds/hello-again-design-system-kyra-019ddd7f-9a79-76c2-9b63-6b22e35c0f14/fonts/Nexa-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Brutal'; src:url('roi-kalkulator-extern/_ds/hello-again-design-system-kyra-019ddd7f-9a79-76c2-9b63-6b22e35c0f14/fonts/BrutalType.otf') format('opentype'); font-weight:400; font-display:swap; }

* { box-sizing:border-box; }
body { margin:0; font-family:'Brutal',system-ui,sans-serif; font-weight:400; color:var(--ha-ink); background:var(--ha-surface-1); -webkit-font-smoothing:antialiased; }
a { color:var(--ha-smart); text-decoration:none; }
a:hover { color:#0089b8; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input[type=number] { -moz-appearance:textfield; }
input:focus { border-color:var(--ha-smart) !important; }

.container { max-width:1240px; margin:0 auto; padding:26px 24px 72px; }
.header { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--ha-line); margin-bottom:32px; }
.header-left { display:flex; align-items:center; gap:16px; }
.logo { height:52px; width:auto; display:block; }
.divider { width:1px; height:24px; background:var(--ha-line); }
.header-title { font-size:13px; color:var(--ha-ink-3); letter-spacing:0.08em; text-transform:uppercase; }

.hero { margin-bottom:32px; max-width:720px; }
.hero h1 { font-family:'Nexa',sans-serif; font-weight:700; font-size:clamp(30px,5vw,44px); line-height:1.16; letter-spacing:-0.025em; margin:0 0 14px; text-wrap:balance; }
.gradient-text { background:var(--ha-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; display:inline-block; padding-bottom:0.08em; }
.hero p { margin:0; font-size:17px; line-height:1.6; color:var(--ha-ink-2); }

.layout-grid { display:grid; grid-template-columns:392px 1fr; gap:24px; align-items:start; }
.inputs-panel { background:#fff; border:1px solid var(--ha-line); border-radius:20px; box-shadow:0 1px 2px rgba(38,45,53,.06); position:sticky; top:20px; overflow:hidden; }
.panel-section { padding:22px 22px 20px; }
.panel-divider { height:1px; background:var(--ha-line); }
.section-header { display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.step-badge { font-family:'Brutal',sans-serif; font-weight:700; font-size:11px; line-height:1; color:#fff; background:var(--ha-ink); width:20px; height:20px; border-radius:999px; display:flex; align-items:center; justify-content:center; }
.step-title { font-size:11.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ha-ink-3); }

.branch-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.branch-btn { display:flex; flex-direction:column; align-items:center; gap:7px; padding:11px 6px; border:1px solid var(--ha-line); background:#fff; border-radius:14px; color:var(--ha-ink-3); cursor:pointer; font-family:Brutal,sans-serif; transition:all .18s cubic-bezier(.22,1,.36,1); }
.branch-btn.active { border:1.5px solid var(--ha-smart); background:var(--info-bg); color:var(--ha-ink); }
.branch-btn img { width:28px; height:28px; display:block; opacity:0.82; }
.branch-btn span { font-size:11.5px; font-weight:600; line-height:1.2; text-align:center; }
.branch-hint { margin:12px 0 0; font-size:11.5px; line-height:1.45; color:var(--ha-ink-3); }

.input-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.input-grid-1 { display:grid; gap:14px; }
label { display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; margin-bottom:7px; color:var(--ha-ink-2); }
.input-field { width:100%; border:1px solid var(--ha-line); border-radius:10px; padding:11px 13px; font-family:Brutal,sans-serif; font-size:15px; color:var(--ha-ink); background:#fff; outline:none; transition:border-color .14s; }
.input-field.error { border-color:var(--warn); background:var(--warn-bg); }
.input-with-icon { position:relative; }
.icon-left { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ha-ink-3); font-size:14px; }
.icon-right { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--ha-ink-3); font-size:14px; }
.pad-left { padding-left:28px; }
.pad-right { padding-right:30px; }

.ziel-gesamt-box { background:var(--ha-surface-2); border-radius:10px; padding:11px 14px; margin-bottom:16px; display:flex; align-items:baseline; justify-content:space-between; }
.ziel-gesamt-box span:first-child { font-size:12px; color:var(--ha-ink-3); }
.ziel-gesamt-val { font-family:'Nexa',sans-serif; font-weight:700; font-size:18px; }

.plan-grid, .pay-grid { display:flex; gap:7px; }
.seg-btn { flex:1; border:1px solid var(--ha-line); background:#fff; border-radius:10px; padding:10px 6px; font-family:Brutal,sans-serif; font-size:13px; font-weight:600; color:var(--ha-ink-3); cursor:pointer; transition:all .18s cubic-bezier(.22,1,.36,1); }
.seg-btn.active { border:1.5px solid var(--ha-smart); background:var(--info-bg); font-weight:700; color:var(--ha-ink); }

.results-panel { display:grid; gap:18px; }
.kpi-row { display:grid; grid-template-columns:1.45fr 1fr 1fr; gap:16px; }
.kpi-card { background:#fff; border:1px solid var(--ha-line); border-radius:20px; padding:24px 24px; display:flex; flex-direction:column; }
.kpi-card.brand-bg { background:linear-gradient(100deg,var(--ha-smart),var(--ha-loyal)); color:#fff; box-shadow:var(--shadow-brand); padding:26px 28px; border:none; }
.kpi-label { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ha-ink-3); margin-bottom:12px; }
.brand-bg .kpi-label { color:#fff; opacity:0.9; }
.kpi-value { font-family:'Nexa',sans-serif; font-weight:700; font-size:32px; line-height:1.06; letter-spacing:-0.02em; }
.brand-bg .kpi-value { font-size:clamp(44px,7vw,60px); line-height:1.04; letter-spacing:-0.03em; padding-bottom:0.04em; }
.kpi-suffix { font-family:'Brutal',sans-serif; font-weight:400; font-size:0.42em; letter-spacing:0; margin-left:5px; }
.kpi-subline { font-size:12.5px; line-height:1.5; color:var(--ha-ink-3); margin-top:auto; padding-top:14px; }
.brand-bg .kpi-subline { font-size:13.5px; color:#fff; opacity:0.95; margin-top:12px; padding-top:0; }

.chart-section { background:#fff; border:1px solid var(--ha-line); border-radius:20px; padding:22px 26px 20px; }
.chart-header { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.chart-label { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ha-ink-3); margin-bottom:5px; }
.chart-title { font-family:'Nexa',sans-serif; font-weight:700; font-size:17px; }
.chart-legend { display:flex; gap:20px; flex-wrap:wrap; font-size:12px; color:var(--ha-ink-3); }
.chart-legend span { display:flex; align-items:center; gap:7px; }
.legend-color { width:20px; height:3px; border-radius:2px; background:var(--ha-gradient); display:inline-block; }
.legend-dash { width:14px; height:0; border-top:2px dashed var(--ha-ink-3); display:inline-block; }
.chart-container { margin-top:12px; position:relative; }
.chart-x-axis { display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--ha-ink-3); }
.year-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; padding-top:18px; border-top:1px solid #E6E8EB; }
.year-col-label { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ha-ink-3); margin-bottom:7px; }
.year-col-val { font-family:'Nexa',sans-serif; font-weight:700; font-size:21px; letter-spacing:-0.02em; }
.year-col-cum { font-size:11.5px; color:var(--ha-ink-3); margin-top:5px; }

.breakdown-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.breakdown-card { background:#fff; border:1px solid var(--ha-line); border-radius:20px; padding:22px 24px; }
.breakdown-label { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ha-ink-3); margin-bottom:10px; }
.breakdown-total { font-family:'Nexa',sans-serif; font-weight:700; font-size:30px; letter-spacing:-0.02em; margin-bottom:20px; }
.breakdown-rows { display:grid; gap:12px; }
.bd-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bd-row-label { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ha-ink-2); }
.bd-row-val { font-size:13.5px; font-weight:600; }
.bd-dot { width:9px; height:9px; border-radius:3px; }

.scenario-section { background:#fff; border:1px solid var(--ha-line); border-radius:20px; padding:22px 26px; }
.scenario-header { display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.scenario-label { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ha-ink-3); margin-bottom:5px; }
.scenario-title { font-family:'Nexa',sans-serif; font-weight:700; font-size:17px; }
.scenario-desc { font-size:12.5px; color:var(--ha-ink-3); max-width:360px; line-height:1.5; }
.scenario-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.sc-card { background:var(--ha-surface-2); border:1px solid transparent; border-radius:14px; padding:16px 18px; }
.sc-card.active { background:var(--info-bg); border:1.5px solid var(--ha-smart); }
.sc-label { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ha-ink-3); margin-bottom:11px; }
.sc-card.active .sc-label { color:#0089b8; }
.sc-roi { display:flex; align-items:baseline; gap:5px; margin-bottom:15px; }
.sc-roi-val { font-family:'Nexa',sans-serif; font-weight:700; font-size:29px; letter-spacing:-0.02em; }
.sc-roi-suf { font-family:'Brutal',sans-serif; font-size:16px; font-weight:600; color:var(--ha-ink-3); position:relative; top:-1px; }
.sc-rows { display:grid; gap:9px; }
.sc-row { display:flex; justify-content:space-between; gap:10px; font-size:12.5px; }
.sc-row span:first-child { color:var(--ha-ink-3); }
.sc-row span:last-child { font-weight:600; }

.cta-section { background:var(--ha-ink); border-radius:20px; padding:26px 30px; display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; }
.cta-title { font-family:'Nexa',sans-serif; font-weight:700; font-size:20px; color:#fff; margin-bottom:6px; }
.cta-desc { font-size:14px; color:#C4CBD3; max-width:460px; line-height:1.55; }
.cta-buttons { display:flex; gap:10px; flex-wrap:wrap; }
.btn-outline { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:13px 22px; font-family:'Brutal',sans-serif; font-size:14px; font-weight:600; cursor:pointer; }
.btn-primary { background:var(--ha-gradient); color:#fff; border-radius:999px; padding:13px 26px; font-family:'Brutal',sans-serif; font-size:14px; font-weight:700; display:inline-block; }

.method-note { margin:2px 2px 0; font-size:11.5px; color:var(--ha-ink-3); line-height:1.55; }

@media (max-width:1080px){
  .layout-grid{ grid-template-columns:1fr !important; }
  .inputs-panel{ position:static !important; }
}
@media (max-width:760px){
  .kpi-row{ grid-template-columns:1fr !important; }
  .scenario-grid{ grid-template-columns:1fr !important; }
  .breakdown-grid{ grid-template-columns:1fr !important; }
}
@media (max-width:480px){
  .branch-grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .no-print{ display:none !important; }
  body{ background:#fff; }
  .layout-grid{ grid-template-columns:1fr !important; gap:14px !important; }
  .inputs-panel{ display:none !important; }
  .kpi-row{ grid-template-columns:1.4fr 1fr 1fr !important; }
  .breakdown-grid{ grid-template-columns:1fr 1fr !important; }
  main > div, .breakdown-grid > div, .kpi-row > div{ box-shadow:none !important; break-inside:avoid; }
  @page{ margin:14mm; }
}