:root {
  --text:#0f172a;
  --muted:#6b7280;
  --bg:#ffffff;
  --card:#f8fafc;
  --brand:#22c55e;
  --accent:#27304a;
  --accent-2:#2f335a;
  --border:#e6e8ef;
  --shadow:0 6px 18px rgba(2,8,20,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Space Grotesk','Lato','Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);
  background:var(--bg)
}

.topbar{padding:18px 24px 0}
.progress{height:8px;background:#e8eef6;border-radius:999px;overflow:hidden}
.progress .bar{display:block;height:100%;background:var(--brand);border-radius:999px}
.wrap{max-width:100%;margin:32px auto;padding:0 120px}
.intro{margin-bottom:18px}
.eyebrow{font-weight:600;color:#26b972;margin:.2rem 0 .25rem}
.headline{font-size:26px;line-height:1.3;margin:0 0 10px}

/* ========= GRID-LAYOUT (zentriert, 2 sichtbare Spalten) ========= */
/* Die linke formulas-Spalte ist per CSS display:none; deshalb definieren
   wir das Grid direkt mit 2 Tracks (Form + Results) und zentrieren den Block. */
.grid3{
  display:grid;
  grid-template-columns: minmax(600px, 760px) minmax(600px, 720px);
  gap:32px;
  align-items:start;
  justify-content:center;
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
}

/* Fallback: falls irgendwo .no-left gesetzt wird, ist es identisch */
.grid3.no-left{
  grid-template-columns: minmax(600px, 760px) minmax(600px, 720px);
  justify-content:center;
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
}


@media screen and (max-width:1400px){
  .grid3,
  .grid3.no-left{
    grid-template-columns: minmax(520px, 640px) minmax(600px, 680px);
  }
}

@media screen and (max-width:1180px){
  .grid3,
  .grid3.no-left{
    grid-template-columns:1fr;
    width:100%;
  }
  .results{ width:100%; }
}

/* ========= KARTEN UND FORMEN ========= */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:10px;
}

.formulas{
  padding:18px 18px 12px;
  position:sticky;
  top:14px;
  display:none;
}
.formulas summary{font-weight:600;cursor:pointer;margin:8px 0 6px}

.panel-title{margin:4px 0 8px;font-size:16px}
.row{display:grid;gap:12px;margin:10px 0}
.row.two{grid-template-columns:1fr 1fr}
label{display:block;font-size:13px;color:#384055}

input[type=number],select,input#revenue{
  width:100%;
  appearance:none;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:#222;
  font-size:14px;
  outline:none
}

/* ========= RANGE SLIDER ========= */
.range{display:flex;align-items:center;gap:10px}
.range input[type=range]{
  width:100%;
  height:8px;
  border-radius:999px;
  appearance:none;
  outline:none;
  background:linear-gradient(to right,var(--brand) 0%,var(--brand) var(--p,0%),#e5e7eb var(--p,0%),#e5e7eb 100%);
}

/* webkit thumb */
.range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:#fff;border:2px solid var(--brand);
  box-shadow:0 2px 6px rgba(2,8,20,.2);cursor:pointer;
}
/* firefox */
.range input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:#fff;border:2px solid var(--brand);cursor:pointer;
}
.range input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:#e5e7eb}
.range input[type=range]::-moz-range-progress{height:8px;border-radius:999px;background:var(--brand)}
.range output{min-width:30px;text-align:right;display:inline-block}

.sep{border:0;border-top:1px dashed var(--border);margin:18px 0}
.regs-table{display:grid;grid-template-columns:1fr 90px;gap:6px 10px}
.regs-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 18px;margin:12px 0 6px}
.action-row{display:flex;gap:12px;margin-top:12px}

.btn{
  border-radius:28px;
  padding:10px 16px;
  border:1px solid var(--border);
  cursor:pointer;
  background:#fff
}
.btn.primary{background:#e6fbf3;border-color:#1ec28b;color:#0e7a54;display:none}
.btn.ghost{background:#fff}
.btn.success{
  width:100%;
  background:#2dbf6b;
  border-color:#2dbf6b;
  color:#fff;
  font-weight:600;
  padding:14px 18px;
}

/* ========= ERGEBNISSE / RESULTS ========= */
.results{
  background:var(--accent-2);
  color:#fff;
  padding:22px;
  position:sticky;
  top:14px;
}
.results .title{font-size:24px;line-height:1.15;margin:4px 0 16px}
.total-label{opacity:.75;margin:0 0 2px}
.total{font-size:32px;margin:0 0 16px}
.breakdown{display:grid;gap:12px}
.tile{background:#1f2340;border-radius:10px;padding:16px}
.tile-title{margin:0 0 4px;font-size:14px;opacity:.9}
.tile-sub{margin:0 0 6px;font-size:12px;opacity:.7}
.tile-value{margin:0;font-size:18px}
.hint{font-size:12px;opacity:.8;margin:14px 0 12px}

/* ========= MODAL ========= */
.modal{position:fixed;inset:0;display:none;z-index:9990}
.modal.open{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(21,25,40,.6)}
.modal__dialog{
  position:relative;
  z-index:1;
  width:min(840px,96vw);
  max-height:min(88vh,100%);
  margin:4vh auto;
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
}
.modal__head{display:flex;justify-content:space-between;align-items:center;padding:1px 16px}
.modal__body{padding:10px;overflow:auto}
.modal__close{appearance:none;border:0;background:#eef2f7;border-radius:10px;padding:8px 10px;cursor:pointer}

/* ========= BOXEN & HILFETEXTE ========= */
.box{border:1px solid #e5e7eb;background:#fafafa;border-radius:10px;padding:16px;margin-bottom:16px}
.hint{color:#666;font-size:14px;margin:0 0 12px}
.small{font-size:12px;color:#6b7280;margin-top:10px}

/* ========= FORMELN AUSBLENDEN ========= */
.formula-line{display:none!important}

/* ========= DRUCK UND PRINTFIXES ========= */
@media print{
  @page{size:A4;margin:0}
  .page-wrapper{page-break-after:always;break-after:page;overflow:hidden}
  .page-wrapper:last-of-type{page-break-after:auto;break-after:auto}

  a,a:link,a:visited,a:hover,a:active{
    text-decoration:none!important;
    color:inherit!important;
    border:0!important;
    outline:0!important
  }

  .gradient-text{
    background:none!important;
    -webkit-background-clip:initial!important;
    -webkit-text-fill-color:#00ACAB!important;
    color:#00ACAB!important;
    text-decoration:none!important
  }

  .page-wrapper,.p1-inner-bg,.container-ss,.p1-footer-conts ul,
  .p1-footer-conts li,.hero-contents{
    transform:translateZ(0);
    backface-visibility:hidden;
  }

  *{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}

/* ========= HINT IN RESULTS ========= */
.results .hint{
  color:#ffffff;
  opacity:1;
}

/* ====== Moved from inline <style> in index.html (non-breaking) ====== */
/* Choices.js appearance */
.choices__inner{min-height:auto;padding:6px 10px;border-radius:10px;border:1px solid var(--border);background:#fff;font-size:14px}
.choices__list--single .choices__item{padding:6px 0;font-size:14px;display:flex;align-items:center;gap:10px}
.choices__list--dropdown{border-radius:10px;border:1px solid var(--border);box-shadow:var(--shadow);font-size:14px;overflow:hidden}
.choices__list--dropdown .choices__item,
.choices__item--selectable,
.choices__item{display:flex;align-items:center;gap:10px}
.fi.flag{width:16px;height:12px;border-radius:2px;box-shadow:0 0 1px rgba(0,0,0,.3);margin-right:6px;flex:0 0 auto}
.choices__list--dropdown .choices__item--selectable.is-highlighted{background:#f3f4f6}

/* Helpbox blocks */
.helpbox-full{margin-top:32px;padding:22px 28px;background:var(--accent-2);border-radius:14px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px;grid-column:1 / -1}
.helpbox-full h3{margin:0;font-size:18px}
.helpbox-full p{margin:4px 0 0;font-size:14px;opacity:.85}
.helpbox-full .btn.success{width:auto;padding:10px 18px;font-size:14px}

.helpbox{margin-top:24px;padding:18px 20px;background:var(--accent-2);border-radius:14px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px}
.helpbox h3{margin:0;font-size:18px}
.helpbox p{margin:4px 0 0;font-size:14px;opacity:.85}
.helpbox .btn.success{width:auto;padding:10px 18px;font-size:14px}

/* Wrap padding adjustments */
.wrap{max-width:75%;margin:32px auto;padding:0 120px}
@media screen and (max-width:768px){.wrap{padding:0 0px}}

/* Centered grid when left formulas column hidden */
.grid3.no-left{display:grid;grid-template-columns:minmax(600px,max-content) minmax(360px,420px);gap:32px;justify-content:center;width:fit-content;margin-left:auto;margin-right:auto}
@media screen and (max-width:1400px){.grid3.no-left{grid-template-columns:minmax(520px,max-content) minmax(320px,380px);width:fit-content;margin-left:auto;margin-right:auto}}
@media screen and (max-width:1180px){.grid3.no-left{grid-template-columns:1fr;width:100%;margin-left:0;margin-right:0}}