/* ============================================================
   Multi-Norm-Kalkulator (iecalc) — Assets v5
   Fix: Leroux-Theme-Grid (qodef-*) neutralisieren, damit die
   Section ihren Viewport-Mittelpunkt findet. Content bleibt
   im inneren Container auf max-width:1000px zentriert.
   ============================================================ */

/* --- Full-Width-Breakout: Leroux-Theme-Grid neutralisieren ----
   Die Seiten sind Single-HTML-Widget-Layouts (Hero/Timeline/... alles
   in einem Elementor-HTML-Widget mit eigener Namespaced CSS-Wrapper-
   Klasse wie .nis2-wrap, .iso27-wrap). Der Theme-Grid (qodef-*)
   würde den gesamten Inhalt einschnüren. Weil iecalc.css nur auf
   Seiten mit data-iecalc geladen wird, ist das hier de-facto
   page-scoped.                                                     */
.qodef-page-outer,
.qodef-content-grid,
#qodef-page-outer,
.qodef-grid,
.qodef-gutenberg-content{
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.elementor-section-wrap > section{padding:0 !important;margin:0 !important}
.elementor-widget-wrap{padding:0 !important}

/* --- Section-Rahmen ----------------------------------------- */
/* Die Section selbst bricht aus dem Theme-Content-Grid
   (qodef-col--content o.ä.) über die volle Viewport-Breite aus
   und wird am Viewport-Mittelpunkt zentriert. Dadurch ist der
   Inhalt darin ebenfalls auf dem Viewport zentriert — egal wie
   schmal/links-versetzt der Parent-Container ist.                 */
.iecalc{
  position:relative;
  display:block;
  box-sizing:border-box;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  max-width:100vw;
  /* !important: die Hub-Seiten haben einen Wildcard-Reset
     (".dora-page *", ".nis2-page *" etc. mit padding:0) der sonst
     die Sektion-Padding zerstoert. */
  padding:72px 0 88px !important;
  margin:0 !important;
  background:#0b1220;
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(20,184,166,.2), transparent 60%),
    linear-gradient(180deg,#0b1220 0%,#0f172a 100%);
  color:#e2e8f0;
  scroll-margin-top:80px;
  z-index:0;
  text-align:center;
}
.iecalc *{box-sizing:border-box}

/* WICHTIG: Selektor MUSS .iecalc-Prefix haben (Spezifität 0,2,0),
   sonst überschreibt das seiten-eigene Wildcard-Reset (".dora-page *" /
   ".nis2-page *" mit Spezifität 0,1,1) unser margin:0 auto. */
.iecalc .iecalc-inner{
  position:relative;
  max-width:1000px;
  margin:0 auto !important;
  padding:0 24px !important;
  text-align:center;
}

/* --- Eyebrow / Titel / Subtitel ----------------------------- */
.iecalc .iecalc-ey{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;
  background:rgba(20,184,166,.12);
  border:1px solid rgba(20,184,166,.35);
  border-radius:50px;
  font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#5eead4;margin:0 auto 16px;
}
.iecalc .iecalc-ey-dot{width:6px;height:6px;border-radius:50%;background:#14b8a6;box-shadow:0 0 0 3px rgba(20,184,166,.25)}
.iecalc .iecalc-ttl{
  font-size:clamp(1.7rem,3vw,2.3rem);
  font-weight:800;color:#ffffff;
  margin:0 0 14px;line-height:1.22;
  letter-spacing:-.01em;text-align:center;
}
.iecalc .iecalc-ttl em{color:#2dd4bf;font-style:normal}
.iecalc .iecalc-sub{
  font-size:15px;color:#cbd5e1;
  margin:0 auto;max-width:640px;line-height:1.6;text-align:center;
}
.iecalc .iecalc-div{width:48px;height:3px;background:#14b8a6;border-radius:2px;margin:22px auto 32px}

/* --- Box mit Fragen ----------------------------------------- */
.iecalc .iecalc-wrap{
  background:#111b31;
  border:1px solid rgba(148,163,184,.18);
  border-radius:20px;
  padding:40px 32px;
  margin:8px auto 0;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  text-align:left;
}

/* --- Fortschrittspunkte ------------------------------------- */
.iecalc .iecalc-progress{display:flex;justify-content:center;gap:8px;margin-bottom:32px}
.iecalc .iecalc-dot{width:10px;height:10px;border-radius:50%;background:rgba(148,163,184,.3);transition:background .25s}
.iecalc .iecalc-dot.active{background:#14b8a6}

/* --- Frageschritt ------------------------------------------- */
.iecalc .iecalc-step{min-height:200px;text-align:center}
.iecalc .iecalc-q{font-size:19px;color:#ffffff;margin:0 0 26px;font-weight:700;line-height:1.4;text-align:center}
.iecalc .iecalc-opts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.iecalc .iecalc-opt{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;
  background:#1e293b;
  border:1px solid rgba(148,163,184,.28);
  border-radius:12px;
  color:#f1f5f9;
  font-size:14px;font-weight:600;
  cursor:pointer;transition:all .18s;user-select:none;
}
.iecalc .iecalc-opt:hover{background:#233247;border-color:#14b8a6;color:#fff;transform:translateY(-1px)}
.iecalc .iecalc-opt.selected{background:rgba(20,184,166,.18);border-color:#2dd4bf;color:#fff;box-shadow:0 0 0 3px rgba(20,184,166,.2)}
.iecalc .iecalc-opt svg{color:#14b8a6}

/* --- Navigation --------------------------------------------- */
.iecalc .iecalc-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:12px;flex-wrap:wrap}
.iecalc .iecalc-ghost{
  background:transparent;border:1px solid rgba(148,163,184,.35);
  color:#cbd5e1;padding:10px 18px;border-radius:10px;
  font-size:13px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:all .15s;
}
.iecalc .iecalc-ghost:hover{background:rgba(148,163,184,.12);color:#fff;border-color:#cbd5e1}
.iecalc .iecalc-counter{font-size:12px;color:#94a3b8}

/* --- Ergebnis ----------------------------------------------- */
.iecalc .iecalc-result{display:none;text-align:left}
.iecalc .iecalc-result.visible{display:block;animation:iecalcFadeIn .4s ease}
@keyframes iecalcFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.iecalc .iecalc-res-head{text-align:center;margin-bottom:28px}
.iecalc .iecalc-res-ico{
  width:48px;height:48px;border-radius:14px;
  background:rgba(20,184,166,.15);border:1px solid rgba(20,184,166,.3);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:#2dd4bf;
}
.iecalc .iecalc-res-ttl{font-size:1.3rem;color:#ffffff;margin:0 0 4px;font-weight:700;text-align:center}
.iecalc .iecalc-res-sub{font-size:13px;color:#94a3b8;margin:0;text-align:center}
.iecalc .iecalc-res-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;
  margin:0 auto 22px;max-width:720px;
}
.iecalc .iecalc-res-card{
  background:#17223b;border:1px solid rgba(148,163,184,.18);
  border-radius:12px;padding:18px 14px;text-align:center;
}
.iecalc .iecalc-res-card .val{display:block;font-size:17px;font-weight:800;color:#ffffff;margin-bottom:4px}
.iecalc .iecalc-res-card .lbl{display:block;font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em}

/* --- Aufschlüsselung ---------------------------------------- */
.iecalc .iecalc-res-break{
  max-width:560px;margin:0 auto 16px;
  background:rgba(15,23,42,.55);border:1px solid rgba(148,163,184,.16);
  border-radius:12px;padding:18px 22px;
}
.iecalc .iecalc-res-break .hd{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#94a3b8;margin:0 0 12px}
.iecalc .iecalc-res-break .row{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 0;border-bottom:1px solid rgba(148,163,184,.1);font-size:13px;gap:12px}
.iecalc .iecalc-res-break .row:last-child{border-bottom:0}
.iecalc .iecalc-res-break .k{color:#e2e8f0;flex:1;min-width:0}
.iecalc .iecalc-res-break .v{font-weight:700;white-space:nowrap;text-align:right;flex-shrink:0}
.iecalc .iecalc-res-break .hint{display:block;font-size:11px;color:#94a3b8;font-weight:500;margin-top:3px;line-height:1.4}

.iecalc .iecalc-notes{max-width:560px;margin:0 auto 20px;text-align:left;font-size:12px;color:#94a3b8;line-height:1.7}
.iecalc .iecalc-cta-link{
  display:inline-flex;align-items:center;gap:6px;
  margin:12px 0 24px;padding:11px 20px;
  background:rgba(20,184,166,.12);border:1px solid rgba(20,184,166,.35);
  border-radius:10px;color:#2dd4bf!important;
  font-size:13px;font-weight:700;text-decoration:none;transition:all .15s;
}
.iecalc .iecalc-cta-link:hover{background:rgba(20,184,166,.22);color:#5eead4!important;text-decoration:none;border-color:#2dd4bf}

/* --- Kontakt-Formular (helle Inputs, mit !important gegen Theme-Overrides) --- */
.iecalc .iecalc-contact{max-width:560px;margin:26px auto 0;padding-top:22px;border-top:1px solid rgba(148,163,184,.18)}
.iecalc .iecalc-contact-ttl{font-size:15px;color:#ffffff;font-weight:700;margin:0 0 6px;text-align:center}
.iecalc .iecalc-contact-sub{font-size:12px;color:#94a3b8;text-align:center;margin:0 0 18px}
.iecalc .iecalc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:540px){.iecalc .iecalc-form-grid{grid-template-columns:1fr}}
.iecalc .iecalc-form-grid input[type="text"],
.iecalc .iecalc-form-grid input[type="email"],
.iecalc .iecalc-form-grid input[type="tel"],
.iecalc .iecalc-form-grid input{
  width:100% !important;
  padding:12px 14px !important;
  background:#ffffff !important;
  border:1px solid #cbd5e1 !important;
  border-radius:10px !important;
  color:#0f172a !important;
  font-size:14px !important;
  font-family:inherit !important;
  line-height:1.4 !important;
  box-shadow:none !important;
  -webkit-text-fill-color:#0f172a !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}
.iecalc .iecalc-form-grid input::placeholder{color:#64748b !important;opacity:1 !important;-webkit-text-fill-color:#64748b !important}
.iecalc .iecalc-form-grid input:focus{outline:none !important;border-color:#14b8a6 !important;box-shadow:0 0 0 3px rgba(20,184,166,.25) !important}

.iecalc .iecalc-consent{
  display:flex;align-items:flex-start;gap:8px;margin-top:12px;
  font-size:13px;color:#cbd5e1;cursor:pointer;line-height:1.5;
}
.iecalc .iecalc-consent input{margin-top:3px;flex-shrink:0;accent-color:#14b8a6;width:16px !important;height:16px !important;padding:0 !important;background:#fff !important}
.iecalc .iecalc-consent a{color:#2dd4bf;text-decoration:underline}
.iecalc .iecalc-consent a:hover{color:#5eead4}

.iecalc .iecalc-submit{
  width:100%;margin-top:18px;padding:14px 24px;
  background:linear-gradient(135deg,#14b8a6,#0d9488);
  color:#fff;border:0;border-radius:12px;
  font-size:15px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:opacity .2s,transform .1s;
  box-shadow:0 10px 25px -10px rgba(20,184,166,.6);
}
.iecalc .iecalc-submit:hover{opacity:.95;transform:translateY(-1px)}
.iecalc .iecalc-submit:disabled{opacity:.55;cursor:not-allowed;transform:none}
.iecalc .iecalc-status{display:none;margin-top:12px;padding:12px 16px;border-radius:10px;font-size:13px;font-weight:600;text-align:center}
.iecalc .iecalc-status.ok{display:block;background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.4);color:#86efac}
.iecalc .iecalc-status.err{display:block;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.4);color:#fca5a5}
.iecalc .iecalc-privacy{font-size:11px;color:#94a3b8;margin:10px 0 0;text-align:center}

/* --- Mobile-Feintuning -------------------------------------- */
@media (max-width:720px){
  .iecalc{padding:56px 0 72px}
  .iecalc-inner{padding:0 16px}
  .iecalc .iecalc-wrap{padding:28px 20px;border-radius:16px}
  .iecalc .iecalc-q{font-size:17px}
  .iecalc .iecalc-opt{padding:12px 18px;font-size:13px}
}