@charset "UTF-8";

: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);
}
/* === Thin, subtle scrollbars for ROI app (iframe content) === */
/* Firefox */
html { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.28) transparent; }
/* Chromium/WebKit */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.28);
  border-radius: 8px;
  border: 2px solid transparent; /* creates inner padding */
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,.38); }
::-webkit-scrollbar-corner { background: transparent; }
*{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;display:none}
.progress .bar{display:block;height:100%;background:var(--brand);border-radius:999px}
.wrap{max-width:100%;margin:32px auto;padding:0 24px}
.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}

.grid3{display:grid;grid-template-columns:minmax(320px,380px) minmax(600px,1fr) minmax(360px,420px);gap:32px;align-items:start}
@media (max-width:1400px){.grid3{grid-template-columns:minmax(300px,360px) minmax(520px,1fr) minmax(320px,380px)}}
@media (max-width:1180px){.grid3{grid-template-columns:1fr}}

.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}
.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{display:flex;align-items:center;gap:10px}
.range input[type=range]{
  width:100%;
  height:8px;
  border-radius:999px;
  appearance:none;
  -webkit-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}
.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 30px}
.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}

/* im popup genutzte box/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}
/* Ensure hint text in the dark results panel is white for readability */
.results .hint{color:#fff; font-weight:300}
.small{font-size:12px;color:#6b7280;margin-top:10px}
/* === A4 Cover-Seite wie page_01 === */
.page-wrapper {
  width: 210mm;
  height: 297mm;
  margin: auto;
  background-color: #fff;
}

.p1-inner-bg {
  background-image: url(images/p1-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.container-ss { height: 297mm; }

.hero-contents { padding-top: 75px; }
.hero-contents h2 {
  font-size: 62px;
  color: #fff;
  padding-bottom: 5px;
  font-weight: 400;
  font-family: "Space Grotesk", sans-serif;
}
.hero-contents p {
  font-size: 20px;
  color: #fff;
  font-weight: 300;
  font-family: "Space Grotesk", sans-serif;
}

.p1-footer-conts ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 18px;
  color: #969696;
  font-family: "Space Grotesk", sans-serif;
  padding-bottom: 15px;
}

.gradient-text {
  background: -webkit-linear-gradient(left, #4fbb61, #04b5c5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* seitenumbruch im druck */
@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; }
}
/* ==== Print-Fixes für Seite 1 (und generell) ==== */
@media print {
  /* Links nie unterstreichen, keine Link-Farbe */
  a, a:link, a:visited, a:hover, a:active {
    text-decoration: none !important;
    color: inherit !important;
    border: 0 !important;
    outline: 0 !important;
  }

  /* Gradient-Text sauber drucken (ohne Clip-Artefakte) */
  .gradient-text {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #00ACAB !important; /* dein Verlaufsmittelwert */
    color: #00ACAB !important;
    text-decoration: none !important;
  }

  /* Verhindert Haarlinien durch Subpixel-Rendern */
  .page-wrapper, .p1-inner-bg, .container-ss, .p1-footer-conts ul,
  .p1-footer-conts li, .hero-contents {
    transform: translateZ(0);              /* flaches Layering */
    backface-visibility: hidden;
  }
  
 /* CI-Styles für HubSpot-Form im Popup (Screen) */
.hs-ci .hs-form {
  display: grid;
  gap: 12px;
  font-family: var(--font, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}
.hs-ci .hs-form fieldset { border: 0; padding: 0; margin: 0; }
.hs-ci .hs-form .hs-form-field { display: grid; gap: 6px; }
.hs-ci .hs-form label { font-size: 14px; color: var(--text, #111827); }

.hs-ci .hs-form input[type="text"],
.hs-ci .hs-form input[type="email"],
.hs-ci .hs-form input[type="tel"],
.hs-ci .hs-form input[type="number"],
.hs-ci .hs-form textarea,
.hs-ci .hs-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  outline: none;
}

.hs-ci .hs-form textarea { min-height: 96px; resize: vertical; }

.hs-ci .hs-form input:focus,
.hs-ci .hs-form textarea:focus,
.hs-ci .hs-form select:focus {
  border-color: var(--accent, #16a34a);
  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
}

/* Checkbox / Einwilligung */
.hs-ci .hs-form .inputs-list { list-style: none; padding: 0; margin: 0; }
.hs-ci .hs-form input[type="checkbox"] { transform: translateY(1px); }
.hs-ci .hs-form .hs-richtext,
.hs-ci .hs-form .legal-consent-container {
  font-size: 13px;
  color: var(--muted, #4b5563);
  line-height: 1.5;
}
.hs-ci .hs-form .hs-richtext a { color: var(--accent, #16a34a); text-decoration: underline; }

/* Fehlermeldungen */
.hs-ci .hs-form .hs-error-msg,
.hs-ci .hs-form .hs-error-msgs li label {
  color: #b91c1c;
  font-size: 12px;
}

/* Submit an deine Buttons anlehnen */
.hs-ci .hs-form input[type="submit"],
.hs-ci .hs-form button[type="submit"] {
  all: unset;
  display: inline-block;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--success, #16a34a);
  color: #fff;
  font-size: 14px;
  text-align: center;
}
.hs-ci .hs-form input[type="submit"]:hover,
.hs-ci .hs-form button[type="submit"]:hover { filter: brightness(0.95); }

  /* Sorgt dafür, dass Hintergründe/Farben exakt übernommen werden */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}