/* =====================================================================
   e-Komet – Wallbox-Konfigurator (ergänzt style.css)
   ===================================================================== */

/* ---------- Kompakter Seiten-Hero ---------- */
.page-hero{
  position:relative;overflow:hidden;padding:70px 0 76px;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-image:
    linear-gradient(90deg,rgba(4,17,31,.92) 0%,rgba(4,17,31,.70) 40%,rgba(4,17,31,.35) 100%),
    url('../img/Bilder/banner_wallbox.png');
}
.page-hero .badge-aktion{margin-bottom:16px}
.page-hero h1{
  font-size:clamp(2.1rem,5vw,3.4rem);font-weight:300;text-transform:uppercase;
  letter-spacing:.5px;line-height:1.1;
}
.page-hero h1 b{color:var(--green);font-weight:600}
.page-hero p{color:var(--text-dim);margin-top:16px;max-width:56ch;font-size:1.05rem}
.page-hero .breadcrumb{font-size:.85rem;color:var(--text-mute);margin-bottom:18px}
.page-hero .breadcrumb a{color:var(--text-dim);text-decoration:none}
.page-hero .breadcrumb a:hover{color:var(--green-bright)}

/* ---------- Konfigurator-Layout ---------- */
.konfig{padding:70px 0 90px;background:var(--night-1)}
.konfig-layout{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}

/* Fortschritt */
.kf-progress{margin-bottom:30px}
.kf-progress-bar{height:6px;border-radius:4px;background:var(--panel);overflow:hidden}
.kf-progress-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--green-bright));transition:width .35s ease}
.kf-progress-meta{display:flex;justify-content:space-between;margin-top:10px;font-size:.85rem;color:var(--text-mute)}
.kf-progress-meta b{color:var(--text)}

/* Panel */
.kf-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:38px}
.kf-step{display:none;animation:kffade .35s ease}
.kf-step.current{display:block}
@keyframes kffade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kf-step .step-num{color:var(--green);font-size:.8rem;letter-spacing:2px;text-transform:uppercase;font-weight:700}
.kf-step h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:400;margin:8px 0 6px}
.kf-step .hint{color:var(--text-dim);font-size:.95rem;margin-bottom:26px;max-width:56ch}

/* Optionskarten */
.kf-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.kf-options.cols-2{grid-template-columns:repeat(2,1fr)}
.kf-option{
  position:relative;display:flex;flex-direction:column;gap:6px;
  border:1.5px solid var(--line);border-radius:12px;padding:20px 18px;cursor:pointer;
  background:var(--night-2);color:var(--text);
  transition:border-color .2s,background .2s,transform .15s;text-align:left;font:inherit;
}
.kf-option:hover{border-color:rgba(134,196,64,.5);transform:translateY(-2px)}
.kf-option.selected{border-color:var(--green);background:rgba(134,196,64,.08)}
.kf-option .ico{width:34px;height:34px;color:var(--green)}
.kf-option .ico svg{width:100%;height:100%}
.kf-option b{font-size:1.02rem;font-weight:600}
.kf-option small{color:var(--text-mute);font-size:.85rem}
/* Preise werden bewusst NICHT bei der Auswahl gezeigt – nur am Ende (Schritt 11). */
.kf-option .price{display:none}
.kf-option .check{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--green);color:#06140b;display:none;align-items:center;justify-content:center;font-size:.8rem}
.kf-option.selected .check{display:flex}

/* Eingabefelder */
.kf-field{margin-top:22px}
.kf-field.first{margin-top:0}
.kf-field label{display:block;font-size:.82rem;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px}
.kf-field input,.kf-field textarea{
  width:100%;background:#0e2033;border:1px solid var(--line);border-radius:8px;
  padding:13px 15px;color:var(--text);font:inherit;font-size:.97rem;transition:border-color .2s;
}
.kf-field input:focus,.kf-field textarea:focus{outline:none;border-color:var(--green)}
.kf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* bedingte Blöcke */
.kf-conditional{margin-top:24px;padding-top:22px;border-top:1px dashed var(--line);display:none}
.kf-conditional.show{display:block}

/* Slider (Entfernung) */
.kf-slider{display:flex;align-items:center;gap:16px}
.kf-slider input[type=range]{flex:1;accent-color:var(--green)}
.kf-slider .val{min-width:96px;text-align:right;font-weight:700}
.kf-slider .val b{color:var(--green-bright);font-size:1.2rem}

/* Foto-Upload */
.kf-upload{
  margin-top:14px;border:1.5px dashed var(--line);border-radius:12px;padding:26px 22px;
  text-align:center;cursor:pointer;transition:border-color .2s,background .2s;
  background:rgba(255,255,255,.02);
}
.kf-upload:hover,.kf-upload.over{border-color:var(--green);background:rgba(134,196,64,.07)}
.kf-upload .up-drop b{display:block;margin-bottom:6px;font-size:1.02rem}
.kf-upload .up-drop small{display:block;color:var(--text-mute);font-size:.85rem;max-width:44ch;margin:0 auto;line-height:1.5}
.kf-upload .up-ico{display:block;width:38px;height:38px;margin:0 auto 12px;color:var(--green)}
.kf-upload .up-ico svg{width:100%;height:100%}
.kf-upload input[type=file]{display:none}
.kf-upload .btn{margin-top:16px;padding:12px 22px}

.kf-foto-status{display:none;margin-top:12px;font-size:.88rem;color:var(--green-bright);line-height:1.5}
.kf-foto-status.show{display:block}
.kf-foto-status.warn{color:#f2c98a}

.kf-preview{margin-top:14px;display:none;flex-wrap:wrap;align-items:center;gap:12px}
.kf-preview.show{display:flex}
.kf-preview-item{
  position:relative;display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--text-dim);
  background:var(--night-2);border:1px solid var(--line);border-radius:10px;
  padding:6px 34px 6px 6px;max-width:230px;
}
.kf-preview-item img{width:48px;height:48px;object-fit:cover;border-radius:6px;flex:none}
.kf-preview-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kf-preview-del{
  position:absolute;top:50%;right:4px;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;border:0;background:transparent;
  color:var(--text-mute);cursor:pointer;font:inherit;font-size:.9rem;line-height:1;
}
.kf-preview-del:hover{background:rgba(255,255,255,.08);color:#f2a8a8}
.kf-preview-clear{background:none;border:0;color:var(--text-mute);cursor:pointer;text-decoration:underline;font:inherit;font-size:.82rem;padding:8px 4px}
.kf-preview-clear:hover{color:var(--green-bright)}

/* Navigation */
.kf-nav{display:flex;justify-content:space-between;gap:14px;margin-top:32px}
.kf-nav .spacer{flex:1}
.kf-error{color:#f2a8a8;font-size:.88rem;margin-top:16px;display:none}
.kf-error.show{display:block}

/* Skip-Link */
.kf-skip{background:none;border:0;color:var(--text-mute);cursor:pointer;font:inherit;text-decoration:underline;margin-top:18px}
.kf-skip:hover{color:var(--green-bright)}

/* ---------- Zusammenfassung / Preis-Sidebar ---------- */
.kf-summary{
  position:sticky;top:96px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:28px;
}
.kf-summary h3{font-size:1.15rem;font-weight:600;margin-bottom:6px}
.kf-summary .sub{color:var(--text-mute);font-size:.82rem;margin-bottom:20px}
.kf-sumlist{list-style:none;display:grid;gap:10px;margin-bottom:18px;font-size:.9rem}
.kf-sumlist li{display:flex;justify-content:space-between;gap:12px;color:var(--text-dim)}
.kf-sumlist li span:last-child{color:var(--text);font-weight:600;white-space:nowrap}
.kf-sumlist li.muted span{color:var(--text-mute);font-weight:400}
/* Live-Preisbox ausgeblendet – Preis erscheint nur in der End-Übersicht (Schritt 11). */
.kf-price-rows{display:none;border-top:1px solid var(--line);padding-top:16px;gap:9px}
.kf-price-rows .row{display:flex;justify-content:space-between;font-size:.92rem;color:var(--text-dim)}
.kf-price-rows .row b{color:var(--text)}
.kf-price-rows .row.discount b{color:var(--green-bright)}
.kf-price-rows .total{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.kf-price-rows .total span{font-size:.9rem;color:var(--text-dim)}
.kf-price-rows .total b{font-size:1.7rem;color:var(--green)}
.kf-summary .note{margin-top:16px;font-size:.76rem;color:var(--text-mute);line-height:1.5}
.kf-badge{display:inline-block;background:var(--green);color:#06140b;font-weight:800;font-size:.72rem;letter-spacing:.5px;padding:5px 10px;border-radius:6px;margin-bottom:16px;text-transform:uppercase}

/* Erfolgs-/Fehlermeldung nach Absenden */
.kf-result{display:none;text-align:center;padding:30px 10px}
.kf-result.show{display:block}
.kf-result .ok-ico{width:70px;height:70px;border-radius:50%;background:rgba(134,196,64,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.kf-result .ok-ico svg{width:36px;height:36px;color:var(--green)}
.kf-result h2{font-weight:400;margin-bottom:10px}
.kf-result p{color:var(--text-dim);max-width:46ch;margin:0 auto}

/* Endabrechnung im letzten Schritt */
.kf-final{display:grid;gap:12px;margin:8px 0 4px}
.kf-final .line{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);color:var(--text-dim)}
.kf-final .line b{color:var(--text)}
.kf-disclaimer{
  margin-top:18px;padding:14px 16px;border-radius:10px;font-size:.85rem;line-height:1.5;
  color:var(--text-dim);background:rgba(255,255,255,.04);border:1px solid var(--line);
}
.kf-disclaimer b{color:var(--text)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.86rem;color:var(--text-dim);margin-top:20px}
.consent input{width:auto;flex:none;margin-top:4px;accent-color:var(--green)}
.consent a{color:var(--green)}

/* =====================================================================
   MOBIL
   Grundsatz: die Frage steht oben, die Zusammenfassung darunter, und
   "Zurück / Weiter" klebt am unteren Rand – so ist der nächste Schritt
   immer mit dem Daumen erreichbar, ohne zu scrollen.
   ===================================================================== */
@media(max-width:900px){
  .konfig{padding:34px 0 40px}
  .konfig-layout{grid-template-columns:1fr;gap:24px}

  /* Wizard zuerst, Zusammenfassung darunter (vorher stand oben nur
     "Noch keine Auswahl" und die eigentliche Frage war weggescrollt) */
  .konfig-layout > div{order:1}
  .kf-summary{position:static;order:2;padding:22px 20px}

  .kf-panel{padding:24px 18px 18px}
  .kf-row{grid-template-columns:1fr;gap:0}
  .kf-progress{margin-bottom:20px}
  .kf-step .hint{font-size:.9rem;margin-bottom:20px}

  /* Optionskarten: untereinander, kompakter, große Tippfläche */
  .kf-options,.kf-options.cols-2{grid-template-columns:1fr;gap:10px}
  .kf-option{
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px;
    padding:16px 46px 16px 16px;min-height:60px;
  }
  .kf-option .ico{width:26px;height:26px;flex:none}
  .kf-option b{flex:1 1 auto;min-width:0}
  .kf-option small{flex-basis:100%;margin-left:0}
  .kf-option .ico + b{flex:1 1 auto}
  .kf-option:hover{transform:none}          /* kein Hover-Sprung bei Touch */
  .kf-option .check{top:50%;right:14px;transform:translateY(-50%)}

  /* iOS zoomt bei Schriftgrößen < 16px in das Feld hinein */
  .kf-field input,.kf-field textarea{font-size:16px;padding:14px 15px}
  .kf-field{margin-top:18px}

  .kf-slider{gap:12px}
  .kf-slider input[type=range]{height:28px}
  .kf-slider .val{min-width:64px}

  /* "Überspringen" war als reiner Textlink zu klein zum Antippen */
  .kf-skip{display:block;width:100%;margin-top:14px;padding:14px 10px;min-height:48px;
    border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--text-dim)}

  .kf-upload{padding:22px 16px}
  .kf-upload .up-drop small{font-size:.82rem}
  .kf-preview{gap:10px}
  .kf-preview-item{max-width:100%;flex:1 1 100%}

  .kf-final .line{padding:11px 0;gap:14px;font-size:.92rem}
  .kf-final .line b{text-align:right}

  /* Feste Bedienleiste unten */
  .kf-nav{
    position:sticky;bottom:0;z-index:20;
    margin:22px -18px -18px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    background:rgba(21,42,63,.96);backdrop-filter:blur(8px);
    border-top:1px solid var(--line);gap:10px;
    border-radius:0 0 var(--radius-lg) var(--radius-lg);
  }
  .kf-nav .spacer{display:none}
  .kf-nav .btn{flex:1;justify-content:center;padding:15px 12px;min-height:52px}
  .kf-nav #kf-back{flex:0 0 38%}

  /* WhatsApp-Button würde sonst genau auf "Weiter" liegen */
  .wa-float{bottom:96px}
}

@media(max-width:600px){
  .page-hero{padding:44px 0 48px}
  .page-hero p{font-size:.97rem;margin-top:12px}
  .page-hero .breadcrumb{margin-bottom:12px}
  .kf-panel{padding:20px 14px 14px}
  .kf-nav{margin:20px -14px -14px;padding-left:14px;padding-right:14px}
  .kf-step h2{font-size:1.3rem;line-height:1.25}
  .kf-summary{padding:20px 16px}
  .kf-sumlist li{font-size:.88rem}
  .kf-disclaimer{font-size:.8rem;padding:12px 14px}
  .consent{font-size:.84rem}
  .kf-final .line{flex-direction:column;align-items:flex-start;gap:2px}
  .kf-final .line b{text-align:left}
}