/* RESET + THEME */
* { box-sizing:border-box; margin:0; padding:0 }
:root{
  --clr-bg:#F9FBFC;
  --clr-border:#D9E2E5;
  --clr-accent:#00C27C;
  --clr-text:#20282D;
  --clr-basic-head:#E5ECEF;
  --clr-pro-head:#3F7F8B;
  --clr-prem-head:#2D3B44;
  --clr-bottom:#1F2B30;
}
body { font-family:"Manrope", Arial, sans-serif; line-height:1.5; background:#fafafa; color:#20282d }
a { color:inherit; text-decoration:none }
.btn { background:#00ff94; color:#20282d; border:0; padding:1rem 2rem; border-radius:8px; cursor:pointer }
.container {
  max-width:none;
  width:100vw;
  margin:0;
  padding-left:8vw;
  padding-right:8vw;
  box-sizing:border-box;
}
.bottom-bar, .plan-table, .wizard-grid, .plan-head {
  max-width:none !important;
  width:auto !important;
  margin-left:0;
  margin-right:0;
}
/* kleine farbige Hinterlegung für gebrochene Überschriften */
.hl-grey{display:inline-block;background:#EEF3F4;padding:.1rem .25rem}

/* HEADER */
.header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem; background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.05) }
.header__nav a { margin:0 .75rem; font-weight:600 }
.header__logout { font-size:.875rem }

/* PRICING BLOCKS */
.pricing-block { margin:4rem 0 }
.pricing-block__title { font-size:2rem; margin-bottom:1.25rem }


/* SUMMARY */
.summary { background:#20282d; color:#fff; border-radius:10px; padding:2rem; margin:4rem 0; text-align:center }
.summary__price { font-size:2rem; font-weight:600; margin:1rem 0 }
.example-config { text-align:center; margin:1rem 0 4rem; font-size:.875rem; }

/* --- bottom summary --- */
.summary--bottom {
  position: static;
  margin-top: 2rem;
  border-top: 2px solid #f0f0f0;
}
@media (min-width: 1024px) {
  .summary--bottom { display: none; }
}

/* LOGIN PAGE */
.login-page { display:flex; align-items:center; justify-content:center; height:100vh }
.login-box { background:#fff; padding:2rem 3rem; border-radius:10px; max-width:350px; width:100%; box-shadow:0 4px 14px rgba(0,0,0,.15) }
.login-box input { width:100%; padding:.75rem 1rem; margin-bottom:1rem; border:1px solid #e3e3e3; border-radius:6px }
.login-box button { width:100%; }

/* BREAKPOINTS */
@media (max-width: 768px){
  .header__nav { display:none }          /* hamburger later */
  .pricing-block__title { font-size:1.5rem }
}

/* PRICING INTRO */
.pricing-intro{margin:1.5rem auto 2rem;text-align:center}
@media(min-width:1024px){
  .pricing-intro{margin-top:.75rem}
}
.pricing-intro__subtitle{font-weight:600}
.pricing-intro__text{max-width:700px;margin:0.5rem auto 0;font-size:.95rem}


.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.hero img {
  width:100%;
  max-height:260px;
  object-fit:cover;
  display:block;
}

.logo {
  height:32px;
}

@media (min-width:768px) {
  .summary--floating {
    position:fixed;
    right:1.5rem; bottom:1.5rem;
    width:280px;
    transform-origin:bottom right;
    transition:transform .45s cubic-bezier(.4,0,.2,1), opacity .3s;
  }
  .summary--hidden {
    opacity:0;
    pointer-events:none;
    transform:scale(.85) translateY(50px);
  }
}


/* ---------- GRID-BASIS für Steps --------------------------------- */
#wizard{margin:1rem 0}
.wizard-step{margin-bottom:5rem}
.wizard-step[hidden]{display:none}

.wizard-headline{font-size:2rem;font-weight:600;margin-bottom:1.5rem;line-height:1.2}

/* linke Spalte jetzt 260px */
.wizard-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:1.5rem}
/* Karten bleiben in Spalte 2 – die Tabelle soll über **beide** Spalten laufen */
.wizard-grid > .plan-head{grid-column:2}
.wizard-grid > table.plan-table{grid-column:1 / span 2}
@media(max-width:800px){ .wizard-grid{grid-template-columns:1fr} .wizard-headline{text-align:center} }

/* ---------- Plan Cards (Step 1/2) -------------------------------- */
.plan-head{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.plan-card{flex:1;background:var(--clr-bg);border:1px solid var(--clr-border);padding:1rem;border-radius:6px;cursor:pointer;position:relative}
/* eigenes Radio-Design mit Korthauer-Grün */
.plan-card__radio{
  position:absolute;top:1rem;left:1rem;
  width:18px;height:18px;border:2px solid var(--clr-border);border-radius:50%;
  transition:background .25s,border-color .25s;
 }
.plan-card input:checked + .plan-card__radio{
  background:#01FF94;
  border-color:#01FF94;
 }
.plan-card h3{font-size:1rem;margin:1.5rem 0 .5rem;font-weight:600}
.plan-card .price{font-size:1.3rem;font-weight:700;margin-bottom:.25rem}
.plan-card .desc{font-size:.8rem;line-height:1.3;height:96px;overflow:hidden}
.plan-card.active{outline:2px solid #01FF94}

/* ---------- Tabellendesign -------------------------------------- */
.plan-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:.85rem;
  margin-bottom:.75rem
}
.plan-table th,
.plan-table td{min-width:70px}
.plan-table thead th{
  background:var(--clr-basic-head);
  font-weight:600;
  padding:.5rem 1rem
}
/* Spaltenbreiten: 780px (= linke Headline-Spalte) + 3 gleich große */
.plan-table th:first-child,
.plan-table td:first-child{
  width:780px !important;
  min-width:300px;
  padding-left:5px;
  padding-right:5px;
}
.plan-table td{
  text-align:center;padding:.5rem;border-left:1px solid var(--clr-border)
}
.plan-table td.ok::before{content:"✔";color:var(--clr-accent)}
.plan-table td.no::before{content:"✕";color:#C9CDD0}
/* Alle X in BASIC blockieren → in ✔ umwandeln */
tbody[data-scope="basic"]  td.no::before{content:"✔";color:var(--clr-accent)}
/* PROFESSIONAL: erste Zeile überall ✔ */
tbody[data-scope="pro"]    tr:nth-child(2) td.no::before{content:"✔";color:var(--clr-accent)}
/* PREMIUM: erste Zeile ✔ bei Spalten 2+3 */
tbody[data-scope="premium"] tr:nth-child(2) td:nth-child(n+3).no::before{content:"✔";color:var(--clr-accent)}
/* Professional-Bereich: in der Premium-Spalte immer ✔ */
tbody[data-scope="pro"] tr td:last-child::before{content:"✔";color:var(--clr-accent)}

/* horizontale Zeilen */
.plan-table tr:not(.scope-head)    td,
.plan-table tr:not(.scope-head)    th{
   border-top:1px solid var(--clr-border);
}

/* Extras – rechts 1 Spalte untereinander */
.extras-grid{
  display:flex;               /* statt 2-spaltigem Grid */
  flex-direction:column;
  gap:1rem;
}




/* ---------- Extra Cards (Step 3) – gleicher Look wie Plan-Cards ---- */
.extra-card{
  width:100%;                               /* volle Breite */
  display:grid; grid-template-columns:18px 1fr;
  gap:1.25rem; padding:1rem;
  background:var(--clr-bg);
  border:1px solid var(--clr-border);
  border-radius:6px; cursor:pointer; position:relative;
  transition:border .25s, outline .25s, background .25s;
}
.extra-card__radio{
  grid-row:1 / span 3; grid-column:1;       /* eine Radio-Spalte links */
  width:18px; height:18px; border:2px solid var(--clr-border); border-radius:50%;
  transition:background .25s,border-color .25s;
}
.extra-card input:checked + .extra-card__radio{background:#01FF94;border-color:#01FF94}
.extra-card.checked{outline:2px solid #01FF94; border-color:#01FF94; background:#e9fff5}

.extra-card h3,
.extra-card .price,
.extra-card .desc{grid-column:2}            /* ganzer Text in Spalte 2 */
.extra-card h3   {margin:0;font-size:1rem;font-weight:600}
.extra-card .price{margin:.2rem 0;font-size:1.3rem;font-weight:700}
.extra-card .desc {font-size:.82rem;white-space:pre-line}

/* ---------- Review (Step 4) ------------------------------------- */
.review-list{list-style:none;margin:1.5rem 0 1rem;padding:0}
.review-list li{padding:.4rem 0;border-bottom:1px solid var(--clr-border)}
.review-price{font-size:1.75rem;font-weight:700;margin-bottom:1.5rem}
.review-block{display:grid;grid-template-columns:160px 1fr;margin-bottom:1rem}
.review-block > :first-child{background:#fff;font-weight:600;padding:1rem}
.review-block > :last-child {background:#f3f7f8;padding:1rem}
.btn-xl{width:100%;padding:1.25rem;font-size:1.25rem;border-radius:8px;margin-top:1.5rem}
.checkbox-grant{display:flex;align-items:center;gap:.5rem;background:var(--clr-bottom);color:#fff;padding:1rem;border-radius:4px;margin-top:2rem}
.checkbox-grant input{width:20px;height:20px}

/* neue Review-Struktur */
.review-row{display:flex;align-items:flex-start;gap:2rem;margin-bottom:2rem}
.review-label{font-weight:700;width:220px;min-width:180px}
.review-detail{flex:1}
.review-card{cursor:default}
@media(max-width:768px){
  .review-row{flex-direction:column}
  .review-label{width:auto}
}

/* styled select & checkbox */
.styled-select{width:100%;padding:.5rem;border:1px solid var(--clr-border);border-radius:6px}
.check-row{position:relative;display:block;padding-left:28px;margin:.5rem 0}
.check-row input{position:absolute;left:0;top:0;width:18px;height:18px;opacity:0;cursor:pointer}
.fake-check{position:absolute;left:0;top:0;width:18px;height:18px;border:2px solid var(--clr-border);border-radius:4px}
.check-row input:checked + .fake-check{background:#01FF94;border-color:#01FF94}
.check-row input:checked + .fake-check::after{content:'\2713';position:absolute;left:3px;top:-3px;color:#1F2B30;font-size:1rem}

/* ---------- Bottom-Bar-Sticky ----------------------------------- */
.nav-btn{background:#01FF94;border:0;color:#1f2b30;font-weight:700;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;cursor:pointer}
.btn-book{background:#01FF94;color:#1F2B30;border:0;padding:.9rem 2.75rem;font-size:1.1rem;border-radius:8px;display:none;margin-left:1rem;cursor:pointer}
.bottom-info{
  flex:1 1 50%;
  min-width:160px;
  overflow:hidden;
}
.bottom-info .small{font-size:.7rem;opacity:.7;margin-bottom:.1rem}
.bottom-price{font-size:1.75rem;font-weight:700;white-space:nowrap;margin-left:auto}

.nav-btn:focus,
.plan-card input:focus-visible + .plan-card__radio,
.extra-card input:focus-visible + .extra-card__radio{
  outline:2px solid var(--clr-accent);
  outline-offset:2px;
}

body{ padding-bottom:120px; }
@media(max-width:1023px){
  body{ padding-bottom:80px; }
}

/* coloured row-groups (basic / pro / premium) */
.scope-basic   tr:nth-child(even){background:#f0f5f6}
.scope-pro     {background:#edf6f8}
.scope-premium {background:#e7f0f2}

.bottom-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background:#1F2B30;
  color:#fff;
  display:flex;
  gap:.75rem;
  align-items:center;
  padding:1.75rem 2rem;
  min-height:110px;
  z-index:100;
  max-width:none !important;
  width:100vw !important;
  margin:0;
  padding-left:8vw;
  padding-right:8vw;
  box-sizing:border-box;
  pointer-events:auto;
}

/* ---------- Accordion (sichtbarer Header, ausblendbare Zeilen) --- */
tbody.accordion .scope-head{
  cursor:pointer;
  user-select:none;
  position:relative;
  padding:0 .75rem;                /* links/rechts Luft */
  font-size:.9rem;                 /* etwas kleiner */
}
tbody.accordion .scope-head th{
  height:50px;                /* fix 50 px */
  padding:8px 0 8px 10px;     /* 10 px links, je 8 px oben/unten */
  font-size:1rem; font-weight:700;
  text-align:left;
}
tbody.accordion{border-top:30px solid transparent}   /* 30 px vertikal */
tbody.accordion:first-of-type{border-top:0}          /* oberstes ohne Abstand */
tbody.accordion tr th,
tbody.accordion tr td{padding-top:8px;padding-bottom:8px;line-height:1.2}

tbody.accordion .scope-head::after{
  content:"\25BC";
  position:absolute;
  right:.75rem;
  top:50%;
  transform:translateY(-50%) rotate(0deg);
  transition:transform .25s;
  font-size:1.2em;
  color:#01FF94;
  pointer-events:none;
}

tr.scope-head::after{ display:none !important; }

tbody.accordion.open .scope-head::after{
  transform:translateY(-50%) rotate(180deg);
}

/* wenn geschlossen → nur Kopfzeile zeigen */
tbody.accordion:not(.open) > tr:not(.scope-head){display:none}

/* senkrechte Linien nur bei offenen Zeilen sichtbar */
tbody.accordion:not(.open) td{border-left:none}

/* Bereichfarben – Header UND Feature-Spalte */
tbody[data-scope="basic"]    .scope-head,
tbody[data-scope="basic"]    tr:not(.scope-head) > *:first-child{
  background:var(--clr-basic-head);color:#000}

tbody[data-scope="pro"]      .scope-head,
tbody[data-scope="pro"]      tr:not(.scope-head) > *:first-child{
  background:var(--clr-pro-head);color:#fff}

tbody[data-scope="premium"]  .scope-head,
tbody[data-scope="premium"]  tr:not(.scope-head) > *:first-child{
  background:var(--clr-prem-head);color:#fff}

/* Optional sticky header */
tbody .scope-head{position:sticky; top:0; z-index:1}

/* kleine Zusatzzeile unter dem Preis */
.bottom-price .extra{
  font-size:.8rem;
  display:block;
  margin-top:.15rem;
}

/* ----- Vorteile & Förderung (Step 4) --------------------------- */
.acc-btn{background:none;border:0;color:var(--clr-pro-head);font-weight:600;cursor:pointer;margin-top:.5rem}
.acc-btn::after{
  content:'';
  display:inline-block;
  width:1.25em;
  height:1.25em;
  margin-left:.4em;
  vertical-align:middle;
  transition:transform .25s, filter .3s;
  background:url('data:image/svg+xml;utf8,<svg width="20" height="20" fill="none" stroke="%2301FF94" stroke-width="2" viewBox="0 0 20 20"><polyline points="6 8 10 12 14 8"/></svg>') no-repeat center center / contain;
  filter:grayscale(1) opacity(.6);
}
.acc-btn[aria-expanded="true"]::after{
  transform:rotate(180deg);
  filter:none;
}
.benefits-card,.grant-card{background:#fff;border:1px solid var(--clr-border);border-radius:6px;padding:1rem;margin-top:1rem}
.benefits-list{list-style:none;padding-left:1rem;margin-top:.5rem}
.benefits-list li::before{content:"\2713\0020";color:var(--clr-accent)}
.grant-content label{display:block;margin:.5rem 0}
.grant-result{margin-top:.5rem;font-weight:600}
.grant-result.success{color:green}
.grant-result.error{color:red}

/*  Bottom-Bar-Buttons dürfen unsichtbar sein … */
.bottom-bar .btn-book         { display: none; }

/*  … aber der Prüf-Button IM Accordion NIE */
.grant-card  #btn-check-grant { display: block !important; }

/* ----- Angebots-Preview (Step 5) ------------------------------- */
.offer-zoom-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0 1.5rem 0;
}

.offer-zoom-controls button {
  background: #f8f8f8;
  border: 1px solid #d9e2e5;
  color: #1f2b30;
  padding: 0.5rem 1.2rem;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background .18s, color .18s, border .18s;
  font-weight: 600;
}

.offer-zoom-controls button.active,
.offer-zoom-controls button:focus {
  background: #00c27c;
  color: #fff;
  border: 1px solid #00c27c;
  outline: none;
}

.offer-wrapper{display:flex;flex-direction:column;align-items:center;gap:20px}
.offer-page{
  width:794px;height:1123px;
  background-position:0 0;
  background-repeat:no-repeat;
  background-size:cover;  
  position:relative;font-family:Arial,sans-serif;
  box-shadow:0 0 12px rgba(0,0,0,.15)
}
.offer-content{position:absolute;top:95px;left:94px;right:75px;bottom:170px;font-size:.9rem;line-height:1.4;overflow:hidden}
.offer-meta{font-size:.9rem;margin-bottom:28px}
.offer-recipient{margin-bottom:40px;line-height:1.4}
.offer-table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.9rem}
.offer-table th,.offer-table td{border:1px solid #ccc;padding:6px 8px}
.offer-total{font-weight:700;text-align:right;margin-top:12px}
.offer-foot{position:absolute;bottom:0;left:0;right:0;font-size:.7rem}
.page-no{position:absolute;right:40px;bottom:30px;font-size:.7rem;z-index:10;pointer-events:none;color:#222;background:transparent}

.offer-page[data-page="2"] .offer-table,
.offer-page[data-page="3"] .offer-table,
.offer-page[data-page="4"] .offer-table{
  margin-top:100px !important;
}

.offer-preview-footer{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  background:#fff;
  padding:2rem 0 1rem 0;
  border-top:1px solid #eee;
  position:sticky;
  bottom:0;
  z-index:10;
}

/* ----- Modal "Angebot personalisieren" ----------------------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal[hidden]{display:none}
.modal-body{position:relative;background:#fff;padding:2rem;border-radius:6px;max-width:520px;width:100%}
.modal-body label{display:block;margin:.5rem 0}
.modal-body input,.modal-body select,.modal-body textarea{width:100%;padding:.5rem;margin-top:.25rem}
.modal-close{position:absolute;top:1.2rem;right:1.2rem;background:transparent;border:none;font-size:2rem;color:#333;cursor:pointer;z-index:10;line-height:1;padding:0;transition:color .2s}
.modal-close:hover,.modal-close:focus{color:#00C27C;outline:none}
.offer-terms-list{margin-left:1.5em;padding-left:.5em;font-size:.97em;margin-bottom:1em}
.offer-terms-list li{margin-bottom:.7em;line-height:1.5}

main, body, html {
  overflow-x: auto;
}


/* Trennlinien nur bei Hauptzeilen, NICHT bei Feature Bullets */
.offer-table tr.feature-row td {
  border-top: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  border-left: 1px solid #ccc;  /* Damit die Zelle links nicht “aufreißt” */
  border-right: 1px solid #ccc; /* Rechts bleibt die Linie wie gehabt */
}

.offer-table tr.feature-row.first-bullet td {
  border-top: 1px solid #ccc !important;   /* Nur die erste Bullet bekommt die Linie oben */
}

.offer-table tr.feature-row.last-bullet td {
  border-bottom: 1px solid #ccc !important; /* Letzte Bullet wieder mit Linie unten */
}

.offer-table tbody tr:last-child td {
  border-bottom: 1px solid #ccc !important;
}

body.step-5, body.step-5 main, body.step-5 html {
  overflow-x: visible !important;
}

/* ===== Intro Overlay ===== */
.intro-overlay{
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  background: #fff; /* solid white like the screenshot */
}

/* Overlay wirklich verstecken, wenn hidden gesetzt ist */
.intro-overlay[hidden] { display: none !important; }
.intro-card{
  text-align: center;
  max-width: 820px;
  padding: 3.5rem 2rem;
  border-radius: 12px;
  background: #fff;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
.intro-card::after{
  /* subtle “wavy” light background */
  content: "";
  position: absolute;
  inset: -140px -260px -220px -260px;
  z-index: -1;
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(0,194,124,0.09), rgba(0,194,124,0) 60%),
    radial-gradient(55% 55% at 0% 100%, rgba(31,43,48,0.06), rgba(31,43,48,0) 60%);
}
.intro-logo{ height: 28px; margin-bottom: 1rem; opacity: .9; }
.intro-card h1{ font-size: 2.2rem; margin: .25rem 0 1rem; }
.intro-card p{ font-size: 1rem; max-width: 640px; margin: 0 auto 1.75rem; color: #394247; }
.intro-btn{ font-weight: 700; }
@media (max-width: 640px){
  .intro-card{ padding: 2rem 1.25rem; }
  .intro-card h1{ font-size: 1.6rem; }
}