/* ═══════════════════════════════════════════════════════════════
   medVS Liquiditätsrechner – Refined Medical-Fintech
   Typography: Plus Jakarta Sans + JetBrains Mono
   Palette: Deep Navy + Teal accent
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800&display=swap');

:root {
    /* Brand */
    --navy:       #142E4F;
    --navy-deep:  #0B1D33;
    --navy-mid:   #1B3F6B;
    --teal:       #009393;
    --teal-dark:  #007A7A;
    --teal-light: #2EC4B6;
    --teal-vivid: #00D4B8;
    --teal-sub:   #E4F9F6;
    --teal-glow:  rgba(0,147,147,0.15);

    /* Neutrals – cool-toned */
    --white:      #FFFFFF;
    --g50:        #F5F7FA;
    --g100:       #EAEEF3;
    --g200:       #D4DBE5;
    --g300:       #B0BDCC;
    --g400:       #8495A8;
    --g500:       #5C6F82;
    --g600:       #3E5060;
    --g700:       #283848;
    --g900:       #0F1C2B;

    /* Semantic */
    --primary: var(--teal); --primary-dark: var(--teal-dark);
    --primary-light: var(--teal-light); --primary-subtle: var(--teal-sub);
    --accent: var(--teal-vivid); --accent-light: var(--teal-light);
    --text-primary: var(--g900); --text-secondary: var(--g600);
    --text-muted: var(--g400);
    --bg-body: var(--g50); --bg-white: var(--white); --bg-section: var(--g100);
    --border: var(--g200); --border-light: var(--g100);

    /* Elevation */
    --sh-1: 0 1px 2px rgba(11,29,51,0.05);
    --sh-2: 0 2px 8px rgba(11,29,51,0.06), 0 1px 2px rgba(11,29,51,0.04);
    --sh-3: 0 8px 24px rgba(11,29,51,0.08), 0 2px 6px rgba(11,29,51,0.04);
    --sh-glow: 0 0 20px rgba(0,147,147,0.18);

    /* Radius */
    --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px;

    /* Quartale */
    --q0-bg:#FFF9E6;--q0-border:#D4A017;
    --q1-bg:#E4F9F6;--q1-border:#009393;
    --q2-bg:#E7F5EA;--q2-border:#2D8F45;
    --q3-bg:#FDE8E6;--q3-border:#C62828;
    --q4-bg:#ECF0F5;--q4-border:#546E7A;

    /* Status */
    --positive:#0E8345; --negative:#C62828; --warning:#D4A017;
}

/* Reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'cv01','cv02','cv03';
}

/* ══════════ HEADER ══════════ */
.site-header {
    background: var(--navy-deep);
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(46,196,182,0.12);
}

.header-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
}

.brand { display:flex;align-items:center;gap:12px;text-decoration:none;color:white }
.brand-logo { font-size:1.2em;font-weight:800;letter-spacing:-0.5px }
.brand-logo span { color:var(--teal-light);font-weight:300 }
.brand-sub { font-size:0.68em;opacity:0.4;font-weight:400;letter-spacing:0.8px;text-transform:uppercase }

.header-contact { display:flex;gap:20px;font-size:0.78em }
.header-contact a { color:rgba(255,255,255,0.5);text-decoration:none;font-weight:500;transition:color .2s }
.header-contact a:hover { color:var(--teal-light) }

/* ══════════ HERO ══════════ */
.page-hero {
    background: var(--navy);
    color: white;
    padding: 20px 24px 16px;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content:'';position:absolute;top:-80%;right:-15%;width:600px;height:600px;
    background:radial-gradient(circle,rgba(0,212,184,0.08) 0%,transparent 60%);
    border-radius:50%;pointer-events:none;
}
.page-hero::after {
    content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent 5%,var(--teal) 50%,transparent 95%);opacity:0.2;
}

.hero-inner { max-width:1320px;margin:0 auto;position:relative;z-index:1 }
.hero-inner h1 { font-size:1.4em;font-weight:800;letter-spacing:-0.8px;line-height:1.15;margin-bottom:3px }
.hero-inner p { opacity:0.45;font-size:0.82em;max-width:520px;font-weight:400 }

/* ══════════ CONTAINER ══════════ */
.container { max-width:1320px;margin:0 auto;padding:14px 24px 36px }

/* ══════════ SECTION CARDS ══════════ */
.section {
    background:var(--white);
    border-radius:var(--r-lg);
    border:1px solid var(--g200);
    padding:16px 20px;
    margin-bottom:12px;
    box-shadow:var(--sh-1);
    transition:box-shadow .25s,border-color .25s;
}
.section:hover { box-shadow:var(--sh-2);border-color:var(--g300) }

.section-title {
    font-size:0.95em;font-weight:700;color:var(--navy);
    margin-bottom:12px;display:flex;align-items:center;gap:8px;
    letter-spacing:-0.3px;
}
.section-title::before {
    content:'';width:3px;height:15px;
    background:linear-gradient(180deg,var(--teal),var(--teal-light));
    border-radius:2px;flex-shrink:0;
}

/* ══════════ INPUT GRID ══════════ */
.input-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px }

.input-group { display:flex;flex-direction:column }
.input-group label {
    font-weight:600;font-size:0.72em;color:var(--g500);
    margin-bottom:3px;letter-spacing:0.3px;text-transform:uppercase;
}

.input-group input,.input-group select {
    padding:7px 11px;
    border:1.5px solid var(--g200);
    border-radius:var(--r-sm);
    font-family:inherit;font-size:0.9em;
    color:var(--text-primary);background:var(--white);
    transition:border-color .15s,box-shadow .15s;
    -moz-appearance:textfield;
}
.input-group input::-webkit-outer-spin-button,
.input-group input::-webkit-inner-spin-button { -webkit-appearance:none;margin:0 }
.input-group input:focus,.input-group select:focus {
    outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-glow);
}
.input-group input:disabled {
    background:var(--g50);color:var(--g400);cursor:not-allowed;border-color:var(--g100);
}

.input-hint {
    font-size:0.7em;color:var(--g400);margin-top:3px;
    font-family:'JetBrains Mono',monospace;letter-spacing:-0.2px;
}

.kv-select-wrapper { grid-column:1/-1;margin-bottom:2px }
.kv-select-wrapper select { width:100%;max-width:640px }

/* ══════════ SZENARIO TOGGLE ══════════ */
.szenario-toggle { display:flex;gap:8px;flex-wrap:wrap }
.szenario-option { flex:1;min-width:200px;cursor:pointer }
.szenario-option input[type="radio"] { display:none }

.szenario-label {
    display:block;padding:9px 13px;
    border:1.5px solid var(--g200);border-radius:var(--r-md);
    background:var(--white);transition:all .15s ease;
}
.szenario-label strong { display:block;font-size:0.85em;margin-bottom:1px;color:var(--navy) }
.szenario-label small { display:block;font-size:0.72em;color:var(--g400);line-height:1.35 }

.szenario-option input:checked+.szenario-label {
    border-color:var(--teal);background:var(--teal-sub);
    box-shadow:0 0 0 3px var(--teal-glow);
}
.szenario-option:hover .szenario-label { border-color:var(--teal-light);background:var(--g50) }
.szenario-option input:checked+.szenario-label:hover { background:var(--teal-sub) }

/* ══════════ ADVANCED SETTINGS ══════════ */
.advanced-settings {
    margin-top:10px;border:1px solid var(--g200);
    border-radius:var(--r-md);background:var(--g50);overflow:hidden;
}
.advanced-settings summary {
    padding:8px 13px;cursor:pointer;font-size:0.82em;font-weight:500;
    color:var(--g500);user-select:none;list-style:none;transition:color .15s;
}
.advanced-settings summary:hover { color:var(--teal) }
.advanced-settings summary::-webkit-details-marker { display:none }
.advanced-settings summary::before { content:'\25B8 ';font-size:0.85em }
.advanced-settings[open] summary::before { content:'\25BE ' }
.advanced-settings[open] summary { border-bottom:1px solid var(--g200) }
.advanced-settings .input-grid { padding:10px 13px }

/* ══════════ BUTTON ══════════ */
.btn-calculate {
    display:inline-flex;align-items:center;gap:6px;
    background:var(--teal);color:white;
    padding:8px 20px;border:none;border-radius:var(--r-sm);
    font-family:inherit;font-size:0.88em;font-weight:600;
    cursor:pointer;transition:all .2s;margin-top:12px;
    letter-spacing:0.1px;
}
.btn-calculate:hover { background:var(--teal-dark);box-shadow:var(--sh-glow);transform:translateY(-1px) }
.btn-calculate:active { transform:translateY(0);box-shadow:none }
.btn-calculate svg { opacity:0.8 }
.btn-export { background:var(--navy)!important }
.btn-export:hover { background:var(--navy-mid)!important;box-shadow:0 0 20px rgba(20,46,79,0.25)!important }

/* ══════════ KPI CARDS ══════════ */
.kpi-grid {
    display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
    gap:8px;margin-top:8px;
}
.kpi-card {
    background:var(--white);border:1px solid var(--g200);
    border-radius:var(--r-md);padding:11px 13px;
    box-shadow:var(--sh-1);transition:all .2s;
    position:relative;overflow:hidden;
}
.kpi-card::before {
    content:'';position:absolute;top:0;left:0;right:0;height:2.5px;
    background:linear-gradient(90deg,var(--teal),var(--teal-light));
    opacity:0;transition:opacity .2s;
}
.kpi-card:hover { box-shadow:var(--sh-2);border-color:var(--g300) }
.kpi-card:hover::before { opacity:1 }

.kpi-label {
    font-size:0.66em;font-weight:700;color:var(--g400);
    text-transform:uppercase;letter-spacing:0.6px;margin-bottom:1px;
}
.kpi-value {
    font-size:1.25em;font-weight:800;color:var(--navy);
    font-family:'JetBrains Mono',monospace;letter-spacing:-0.5px;
}
.kpi-unit { font-size:0.5em;color:var(--g400);font-weight:500;margin-left:2px }

/* ══════════ KV INFO BANNER ══════════ */
.kv-info {
    background:var(--teal-sub);border-left:3px solid var(--teal);
    padding:7px 12px;margin-bottom:8px;
    border-radius:0 var(--r-sm) var(--r-sm) 0;
    font-size:0.82em;display:none;color:var(--g700);
}
.kv-info strong { color:var(--navy) }

/* ══════════ TABS ══════════ */
.tabs { display:flex;gap:1px;margin-bottom:10px;border-bottom:1.5px solid var(--g200) }
.tab {
    padding:7px 14px;background:none;border:none;cursor:pointer;
    font-family:inherit;font-size:0.82em;font-weight:600;
    color:var(--g400);border-bottom:2px solid transparent;
    margin-bottom:-1.5px;transition:all .15s;
}
.tab:hover { color:var(--teal) }
.tab.active { color:var(--teal);border-bottom-color:var(--teal) }
.tab-content { display:none }
.tab-content.active { display:block }

/* ══════════ CHART ══════════ */
.chart-container {
    position:relative;height:340px;background:var(--white);
    padding:8px;border-radius:var(--r-md);border:1px solid var(--g100);
}

/* ══════════ TABLE ══════════ */
.table-container { overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--g200) }
table { width:100%;border-collapse:collapse;font-size:0.82em }

thead th {
    background:var(--navy);color:white;
    padding:8px 10px;text-align:left;font-weight:600;
    font-size:0.75em;text-transform:uppercase;letter-spacing:0.5px;
    position:sticky;top:0;white-space:nowrap;
}
thead th:first-child { border-radius:var(--r-md) 0 0 0 }
thead th:last-child { border-radius:0 var(--r-md) 0 0 }

tbody td { padding:6px 10px;border-bottom:1px solid var(--g100);white-space:nowrap }
tbody tr { transition:background .1s }
tbody tr:hover { background:var(--g50) }
tbody tr.milestone-row { background:var(--q0-bg)!important;font-weight:600 }

.val-positive { color:var(--positive);font-weight:600 }
.val-negative { color:var(--negative);font-weight:600 }
.val-currency { font-family:'JetBrains Mono',monospace;font-size:0.88em }

/* ══════════ FOOTER ══════════ */
.site-footer {
    background:var(--navy-deep);color:rgba(255,255,255,0.4);
    padding:18px 24px;text-align:center;font-size:0.75em;line-height:1.7;
}
.site-footer strong { color:rgba(255,255,255,0.75) }
.site-footer a { color:var(--teal-light);text-decoration:none;transition:color .15s }
.site-footer a:hover { color:var(--teal-vivid) }

/* ══════════ LEGENDE ══════════ */
.q-legend { display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px;font-size:0.78em }
.q-legend-item { display:flex;align-items:center;gap:5px;color:var(--g500) }
.q-legend-dot { width:11px;height:11px;border-radius:3px;border:2px solid }

/* ══════════ HOVER PREVIEW ══════════ */
.hp-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:0;width:100%;font-size:0.8em;align-items:stretch}
.hp-col{padding:7px 10px;border-radius:var(--r-sm);min-width:0}
.hp-center{background:var(--teal-sub);border:1.5px solid var(--teal);box-shadow:var(--sh-2)}
.hp-side{opacity:0.45;background:var(--white);border:1px solid var(--g200)}
.hp-arrow{display:flex;align-items:center;justify-content:center;font-size:1.2em;color:var(--g300);padding:0 3px}
.hp-row{display:flex;justify-content:space-between;align-items:center;padding:1.5px 0;border-bottom:1px solid rgba(0,0,0,0.04);gap:6px}
.hp-row:last-child{border-bottom:none}
.hp-lbl{color:var(--g400);font-size:0.88em;white-space:nowrap}
.hp-val{font-family:'JetBrains Mono',monospace;font-weight:500;text-align:right;white-space:nowrap}
.hp-dat{font-weight:700;color:var(--navy);font-size:0.95em;margin-bottom:1px;display:flex;align-items:center;gap:5px}
.hp-vrg{font-weight:600;color:var(--g500);font-size:0.85em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-badge{display:inline-block;padding:1px 5px;border-radius:3px;font-size:0.72em;font-weight:700;line-height:1.3}

/* ══════════ INFO BOXES ══════════ */
#preisstufeInfo {
    background:var(--teal-sub);border-left:3px solid var(--teal);
    padding:7px 12px;border-radius:0 var(--r-sm) var(--r-sm) 0;
    font-size:0.82em;color:var(--g700);
}
#kvScheduleInfo {
    background:var(--teal-sub);border-left:3px solid var(--teal);
    padding:7px 12px;margin-top:8px;
    border-radius:0 var(--r-sm) var(--r-sm) 0;
    font-size:0.8em;color:var(--g700);
}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:768px){
    .hero-inner h1{font-size:1.15em}
    .header-contact{display:none}
    .input-grid{grid-template-columns:1fr}
    .kpi-grid{grid-template-columns:1fr 1fr}
    .tabs{overflow-x:auto}
    .tab{white-space:nowrap;font-size:0.78em;padding:6px 10px}
    .container{padding:10px 12px 28px}
    .section{padding:12px 14px}
    .page-hero{padding:14px 12px 12px}
    .site-header{padding:0 12px}
}
@media(max-width:480px){
    .kpi-grid{grid-template-columns:1fr}
    .container{padding:8px 8px 24px}
    .section{padding:10px 10px}
    .szenario-toggle{flex-direction:column}
    .szenario-option{min-width:unset}
}

/* ══════════ PRINT ══════════ */
@media print{
    .site-header,.btn-calculate{display:none}
    .section{break-inside:avoid;box-shadow:none;border:1px solid #ccc}
    .page-hero{background:var(--navy)!important;-webkit-print-color-adjust:exact}
}

/* ══════════ SCROLLBAR ══════════ */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--g300);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--g400)}

/* ══════════ SELECTION ══════════ */
::selection{background:var(--teal-glow);color:var(--navy-deep)}