/* SpaceCamper Konfigurator — Basis-Styles.
   Alles ist unter .scc-root gescoped, um Konflikte mit dem WordPress-Theme
   und Elementor zu vermeiden. Farben/Schrift/Radius kommen als CSS-Custom-
   Properties aus dem Theme-Objekt der Konfiguration (via JS gesetzt). */

.scc-root, .scc-root *, .scc-root *::before, .scc-root *::after {
  box-sizing: border-box;
}

.scc-root {
  --scc-ink: #585858;
  --scc-blue: #4d7182;
  --scc-grey: #e8e8e8;
  --scc-stormy: #69818c;
  --scc-mustard: #dbc788;
  --scc-pool: #c3ded8;
  --scc-white: #ffffff;
  --scc-sand-mid: #d8d8d8;
  --scc-stone: #888888;
  --scc-stone-light: #f2f2f2;
  --scc-moss-light: #eaf1f4;
  --scc-amber-light: #faf6e8;
  --scc-border: rgba(88,88,88,0.12);
  --scc-border-mid: rgba(88,88,88,0.22);
  --scc-r: 14px;
  --scc-r-sm: 8px;
  --scc-font: 'Barlow', sans-serif;
  --scc-max-width: 820px;
  --scc-btn-radius: 99px;

  font-family: var(--scc-font);
  color: var(--scc-ink);
  background: var(--scc-grey);
  min-height: 100%;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 300;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  position: relative;
  overflow-x: hidden;
  /* Macht .scc-root zu einem Container-Query-Container: Layout-Regeln
     unten reagieren dadurch auf die tatsächliche Breite des Elementor-
     Containers, in den der Konfigurator eingebettet ist — nicht auf die
     Breite des Browserfensters. Löst das Problem, dass mehrspaltige
     Layouts einen schmalen Container sprengen, obwohl der Viewport breit
     genug wäre. */
  container-type: inline-size;
  container-name: scc;
}

.scc-loading { padding: 3rem; text-align: center; color: var(--scc-stone); font-family: var(--scc-font); }

.scc-header{background:var(--scc-blue);padding:1.5rem 2.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;}
.scc-logo{font-size:1.4rem;font-weight:600;color:var(--scc-white);letter-spacing:.06em;text-transform:uppercase;}
.scc-logo em{color:var(--scc-mustard);font-style:italic;font-weight:600;}
.scc-header-tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);}

.scc-progress-wrap{background:var(--scc-white);border-bottom:1px solid var(--scc-border);padding:.9rem 2.5rem;display:flex;align-items:center;gap:1.25rem;}
.scc-progress-track{flex:1;height:3px;background:var(--scc-sand-mid);border-radius:99px;overflow:hidden;}
.scc-progress-fill{height:100%;background:var(--scc-blue);border-radius:99px;transition:width .45s cubic-bezier(.4,0,.2,1);}
.scc-progress-text{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--scc-stone);white-space:nowrap;min-width:90px;text-align:right;}

.scc-main{max-width:var(--scc-max-width) !important;width:100%;margin:0 auto !important;padding:2.5rem 1.5rem 5rem;box-sizing:border-box;}

.scc-step{display:none;}
.scc-step.scc-active{display:block;animation:scc-rise .35s ease both;}
@keyframes scc-rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.scc-step-num{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--scc-blue);margin-bottom:.4rem;font-weight:600;}
.scc-step-q{font-family:var(--scc-heading-font,var(--scc-font));font-size:1.9rem;line-height:1.2;color:var(--scc-ink);margin-bottom:.4rem;font-weight:var(--scc-heading-weight,600);letter-spacing:.01em;text-transform:var(--scc-heading-transform,none);}
.scc-step-hint{font-size:13px;color:var(--scc-stone);margin-bottom:2rem;font-weight:300;}

.scc-opts{display:grid;gap:10px;margin-bottom:1.75rem;min-width:0;}
.scc-opts > *{min-width:0;}
.scc-opts-2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.scc-opts-3{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}
.scc-opts-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
/* Wichtig: .scc-opt ist technisch ein <button> — viele WordPress-Themes
   geben allen <button>-Elementen eine eigene Standard-Optik (z. B. dunkler
   Hintergrund, weiße Schrift). Damit unser Kartendesign davon nicht
   überschrieben wird, sind Hintergrund/Text/Rahmen/Schrift hier bewusst mit
   !important abgesichert. */
.scc-opt{background:var(--scc-white) !important;border:1.5px solid var(--scc-border) !important;border-radius:var(--scc-r) !important;padding:1.1rem 1.25rem !important;cursor:pointer;text-align:left !important;font-family:var(--scc-font) !important;font-size:14px !important;color:var(--scc-ink) !important;font-weight:300 !important;line-height:1.6 !important;white-space:normal !important;transition:border-color .18s,box-shadow .18s,transform .15s;position:relative;min-height:44px;min-width:0;width:100%;overflow:hidden;box-shadow:none !important;text-transform:none !important;letter-spacing:normal !important;}
.scc-opt:hover{border-color:var(--scc-select,var(--scc-blue)) !important;transform:translateY(-2px);box-shadow:0 5px 18px rgba(28,26,23,.07) !important;}
.scc-opt.scc-sel{border-color:var(--scc-select,var(--scc-blue)) !important;background:var(--scc-moss-light) !important;box-shadow:0 0 0 3px rgba(77,113,130,.15) !important;}
.scc-opt.scc-disabled{opacity:.35;pointer-events:none;}
/* ── Icon: schlicht, ohne Rahmen/Box — wie im ursprünglichen Design. ── */
.scc-opt-icon{font-size:1.6rem;margin-bottom:.4rem;display:block;line-height:1;}
.scc-opt-row-icon{font-size:1.05rem;margin-right:8px;line-height:1;flex-shrink:0;}
/* WordPress wandelt Emoji-Zeichen automatisch in <img class="emoji"> SVGs um
   (Twemoji, für einheitliche Darstellung über alle Betriebssysteme hinweg).
   WordPress liefert dafür normalerweise eine eigene 1em-Größenregel mit —
   manche Cache-/Performance-Plugins oder Themes entfernen aber genau diese
   Regel, während die Umwandlung selbst weiterläuft. Ergebnis: die SVGs
   werden ohne Größenbegrenzung eingefügt und wirken riesig. Diese Regel
   erzwingt die korrekte, an die Schriftgröße gekoppelte Größe unabhängig
   davon, ob WordPress' eigenes Emoji-CSS vorhanden ist. */
.scc-opt-icon img.emoji,
.scc-opt-row-icon img.emoji,
.scc-root img.emoji{
  height: 1em !important;
  width: 1em !important;
  max-width: 1em !important;
  margin: 0 .05em 0 .1em !important;
  vertical-align: -0.1em !important;
  display: inline-block !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  padding: 0 !important;
}

/* ── Hochgeladenes Bild: bekommt (anders als das Icon) einen festen,
   abgerundeten Rahmen, damit ein großes Foto nicht die Karte sprengt. ── */
.scc-visual-img{width:100%;height:110px;border-radius:calc(var(--scc-r) - 6px);margin-bottom:.6rem;overflow:hidden;background:var(--scc-stone-light);flex-shrink:0;}
.scc-visual-img img{width:100%;height:100%;object-fit:cover;display:block;}
.scc-visual-img-sm{width:28px;height:28px;border-radius:7px;margin-right:8px;overflow:hidden;display:inline-flex;background:var(--scc-stone-light);flex-shrink:0;vertical-align:middle;}
.scc-visual-img-sm img{width:100%;height:100%;object-fit:cover;display:block;}

.scc-opt-title{font-weight:500 !important;font-size:14px !important;margin-bottom:3px;white-space:normal !important;overflow-wrap:break-word;text-transform:none !important;letter-spacing:normal !important;}
.scc-opt-desc{font-size:12px !important;color:var(--scc-stone) !important;line-height:1.45 !important;white-space:normal !important;overflow-wrap:break-word;font-weight:300 !important;text-transform:none !important;letter-spacing:normal !important;}
.scc-opt-price{margin-top:8px;font-size:12px;font-weight:600;color:var(--scc-blue);}
.scc-opt-check{position:absolute;top:10px;right:10px;width:18px;height:18px;background:var(--scc-select,var(--scc-blue));border-radius:50%;display:none;align-items:center;justify-content:center;color:#fff;font-size:10px;}
.scc-opt.scc-sel .scc-opt-check{display:flex;}

.scc-hint-badge{display:inline-flex;align-items:center;gap:6px;background:#faf6e8;border:1px solid rgba(219,199,136,.4);border-radius:99px;padding:5px 14px;font-size:12px;color:#8a7840;margin-bottom:1.25rem;}
.scc-info-badge{display:inline-flex;align-items:center;gap:6px;background:#eef6f4;border:1px solid rgba(195,222,216,.5);border-radius:99px;padding:5px 14px;font-size:12px;color:#4a7068;margin-bottom:1rem;}

.scc-two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin-bottom:1.75rem;min-width:0;}
.scc-two-col > *{min-width:0;}
.scc-col-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--scc-stone);margin-bottom:.75rem;font-weight:400;}
.scc-opts-col{display:flex;flex-direction:column;gap:8px;}
.scc-opt-row{background:var(--scc-white) !important;border:1.5px solid var(--scc-border) !important;border-radius:var(--scc-r-sm) !important;padding:.7rem 2.4rem .7rem 1rem !important;cursor:pointer;text-align:left !important;font-family:var(--scc-font) !important;font-size:13px !important;color:var(--scc-ink) !important;font-weight:300 !important;line-height:1.6 !important;white-space:normal !important;box-shadow:none !important;text-transform:none !important;letter-spacing:normal !important;transition:border-color .18s,background .18s;position:relative;min-height:44px;min-width:0;width:100%;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;}
.scc-opt-row:hover{border-color:var(--scc-select,var(--scc-blue)) !important;}
.scc-opt-row.scc-sel{border-color:var(--scc-select,var(--scc-blue)) !important;background:var(--scc-moss-light) !important;}
.scc-opt-row .scc-opt-check{top:50%;right:10px;transform:translateY(-50%);}
.scc-opt-row.scc-disabled{opacity:.35;pointer-events:none;}
.scc-opt-row-main{display:flex;align-items:center;flex:1 1 auto;min-width:0;}
.scc-opt-row-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scc-opt-row-sub{flex:1 0 100%;font-size:11px;color:var(--scc-stone);margin-top:3px;padding-left:44px;}

.scc-energy-group{margin-bottom:1.5rem;}
.scc-energy-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--scc-stone);margin-bottom:.6rem;font-weight:400;}

.scc-nav{display:flex;gap:10px;align-items:center;margin-top:.5rem;flex-wrap:wrap;}
.scc-btn-next{background:var(--scc-btn-bg,var(--scc-ink)) !important;color:var(--scc-btn-text,var(--scc-white)) !important;border:var(--scc-btn-border-width,0px) solid var(--scc-btn-border,transparent) !important;box-sizing:border-box;padding:.85rem 2rem;border-radius:var(--scc-btn-radius);font-family:var(--scc-btn-font,var(--scc-font)) !important;font-size:13px;font-weight:var(--scc-btn-font-weight,500) !important;cursor:pointer;letter-spacing:.04em;transition:background var(--scc-btn-transition,.2s),color var(--scc-btn-transition,.2s),border-color var(--scc-btn-transition,.2s),transform .15s;min-height:44px;}
.scc-btn-next:hover{background:var(--scc-btn-bg-hover,var(--scc-blue)) !important;color:var(--scc-btn-text-hover,var(--scc-white)) !important;transform:translateY(-1px);}
.scc-btn-next:disabled{opacity:.3;cursor:not-allowed;transform:none;}
.scc-btn-back{background:none !important;border:var(--scc-btn-border-width,1.5px) solid var(--scc-btn-border,var(--scc-border-mid)) !important;box-sizing:border-box;color:var(--scc-stone) !important;padding:.85rem 1.4rem;border-radius:var(--scc-btn-radius);font-family:var(--scc-btn-font,var(--scc-font)) !important;font-size:13px;font-weight:var(--scc-btn-font-weight,400) !important;cursor:pointer;transition:border-color var(--scc-btn-transition,.2s),color var(--scc-btn-transition,.2s);min-height:44px;}
.scc-btn-back:hover{border-color:var(--scc-stone) !important;color:var(--scc-ink) !important;}

.scc-root textarea,.scc-root input[type=text],.scc-root input[type=email],.scc-root input[type=tel]{width:100%;background:var(--scc-white);border:1.5px solid var(--scc-border);border-radius:var(--scc-r);padding:.85rem 1.25rem;font-family:var(--scc-font);font-size:14px;font-weight:300;color:var(--scc-ink);outline:none;transition:border-color .18s;line-height:1.6;}
.scc-root textarea{resize:vertical;min-height:90px;}
.scc-root textarea:focus,.scc-root input:focus{border-color:var(--scc-blue);}

.scc-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:1rem;}
.scc-form-field{display:flex;flex-direction:column;gap:6px;}
.scc-form-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--scc-stone);}
.scc-form-field.scc-full{grid-column:1/-1;}

.scc-res-hero{background:var(--scc-blue);border-radius:var(--scc-r);padding:2rem 2.5rem;margin-bottom:1.25rem;position:relative;overflow:hidden;}
.scc-res-eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:.5rem;}
.scc-vehicle-pill{display:inline-block;padding:3px 14px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.6rem;background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);}
.scc-res-title{font-family:var(--scc-heading-font,var(--scc-font));font-size:2.2rem;color:var(--scc-white);letter-spacing:.02em;line-height:1.15;margin-bottom:.25rem;font-weight:600;text-transform:var(--scc-heading-transform,uppercase);}
.scc-res-title em{color:var(--scc-mustard);font-style:italic;}
.scc-res-sub{font-size:13px;color:rgba(255,255,255,.7);font-weight:300;}

.scc-res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:1.25rem;}
.scc-res-card{background:var(--scc-white);border:1px solid var(--scc-border);border-radius:var(--scc-r);padding:1.1rem 1.4rem;}
.scc-res-card-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--scc-stone);margin-bottom:.4rem;}
.scc-res-card-val{font-size:1.05rem;color:var(--scc-ink);line-height:1.3;font-weight:600;}
.scc-res-card-val small{font-size:12px;color:var(--scc-stone);font-weight:300;display:block;margin-top:2px;}

.scc-features-box{background:var(--scc-white);border:1px solid var(--scc-border);border-radius:var(--scc-r);padding:1.4rem 1.5rem;margin-bottom:1.25rem;}
.scc-features-box-title{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--scc-stone);margin-bottom:1rem;}
.scc-features-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 2rem;}
.scc-feat{font-size:13px;color:var(--scc-ink);display:flex;align-items:flex-start;gap:7px;padding:3px 0;font-weight:300;}
.scc-feat::before{content:'✓';color:var(--scc-blue);font-weight:600;flex-shrink:0;margin-top:1px;}

.scc-opts-box{background:var(--scc-amber-light);border:1px solid rgba(219,199,136,.35);border-radius:var(--scc-r);padding:1.4rem 1.5rem;margin-bottom:1.25rem;}
.scc-opts-box-title{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#a89560;margin-bottom:.75rem;font-weight:600;}

.scc-warnings-box{background:#f0f7f6;border:1px solid rgba(195,222,216,.6);border-radius:var(--scc-r);padding:1.1rem 1.4rem;margin-bottom:1.25rem;}
.scc-warn-item{font-size:13px;color:#4a7068;display:flex;align-items:flex-start;gap:8px;padding:3px 0;font-weight:300;}
.scc-warn-item::before{content:'ℹ';font-weight:500;flex-shrink:0;}

.scc-price-bar{background:var(--scc-stormy);border-radius:var(--scc-r);padding:1.4rem 2rem;margin-bottom:1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.scc-price-lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:3px;}
.scc-price-val{font-size:2.2rem;color:var(--scc-white);line-height:1;letter-spacing:.02em;font-weight:600;}
.scc-price-note{font-size:11px;color:rgba(255,255,255,.5);margin-top:4px;}
.scc-price-discount{display:inline-block;margin-top:9px;font-size:12px;font-weight:500;color:var(--scc-ink);background:var(--scc-mustard);padding:5px 12px;border-radius:99px;}

.scc-alt-section{border-top:1px solid var(--scc-border);padding-top:1.5rem;margin-top:1.5rem;}
.scc-alt-title{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--scc-stone);margin-bottom:.75rem;}
.scc-alt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;}
.scc-alt-card{background:var(--scc-stone-light);border-radius:var(--scc-r-sm);padding:.9rem 1.1rem;cursor:pointer;transition:background .18s;border:1px solid transparent;}
.scc-alt-card:hover{background:var(--scc-moss-light);border-color:rgba(77,113,130,.15);}
.scc-alt-card-name{font-size:13px;font-weight:500;color:var(--scc-ink);}
.scc-alt-card-sub{font-size:12px;color:var(--scc-stone);}

.scc-res-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:1.5rem;}
.scc-btn-action{background:var(--scc-btn-bg,var(--scc-ink)) !important;color:var(--scc-btn-text,var(--scc-white)) !important;border:var(--scc-btn-border-width,0px) solid var(--scc-btn-border,transparent) !important;box-sizing:border-box;padding:.85rem 1.75rem;border-radius:var(--scc-btn-radius);font-family:var(--scc-btn-font,var(--scc-font)) !important;font-size:13px;font-weight:var(--scc-btn-font-weight,500) !important;cursor:pointer;transition:background var(--scc-btn-transition,.2s),color var(--scc-btn-transition,.2s),border-color var(--scc-btn-transition,.2s);letter-spacing:.02em;min-height:44px;}
.scc-btn-action:hover{background:var(--scc-btn-bg-hover,var(--scc-blue)) !important;color:var(--scc-btn-text-hover,var(--scc-white)) !important;}
.scc-btn-action.scc-out{background:none !important;border:var(--scc-btn-border-width,1.5px) solid var(--scc-btn-border,var(--scc-border-mid)) !important;box-sizing:border-box;color:var(--scc-ink) !important;}
.scc-btn-action.scc-out:hover{background:var(--scc-stone-light);}

.scc-restart{text-align:center;margin-top:1.25rem;}
.scc-restart button{background:none;border:none;color:var(--scc-stone);font-family:var(--scc-font);font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}

.scc-root input[type=range]{width:100%;-webkit-appearance:none;height:5px;background:var(--scc-sand-mid);border-radius:99px;outline:none;cursor:pointer;}
.scc-root input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--scc-ink);border:3px solid var(--scc-white);box-shadow:0 2px 8px rgba(28,26,23,.2);cursor:pointer;}
.scc-root input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--scc-ink);border:3px solid var(--scc-white);cursor:pointer;}

.scc-kanal-row{flex-direction:row;flex-wrap:wrap;gap:8px;}
.scc-kanal-row .scc-opt-row{flex:0 0 auto;padding:.6rem 1.1rem;font-size:12px;min-height:auto;}

.scc-chip{background:var(--scc-white);border:1px solid rgba(219,199,136,.5);border-radius:99px;padding:4px 14px;font-size:12px;color:#8a7840;font-weight:500;display:inline-flex;align-items:center;gap:6px;}

/* ── Button-Stile (via Theme steuerbar) ── */
.scc-root.scc-btnstyle-rounded .scc-btn-next,
.scc-root.scc-btnstyle-rounded .scc-btn-back,
.scc-root.scc-btnstyle-rounded .scc-btn-action{ --scc-btn-radius: 8px; }
.scc-root.scc-btnstyle-square .scc-btn-next,
.scc-root.scc-btnstyle-square .scc-btn-back,
.scc-root.scc-btnstyle-square .scc-btn-action{ --scc-btn-radius: 2px; }

/* ── Normale Bildschirmbreiten (reagiert auf das Browserfenster) ── */
@media (max-width: 600px){
  .scc-opts-2,.scc-opts-3,.scc-opts-4,.scc-two-col,.scc-res-grid,.scc-features-cols,.scc-alt-cards,.scc-form-grid{grid-template-columns:1fr;}
  .scc-step-q{font-size:1.5rem;}
  .scc-header{padding:1.25rem 1rem;}
  .scc-main{padding:1.5rem 1rem 4rem;}
  .scc-progress-wrap{padding:.8rem 1rem;}
}

/* ── Schmaler Elementor-Container (reagiert auf die tatsächliche
   Container-Breite, unabhängig vom Browserfenster) ── */
@container scc (max-width: 600px){
  .scc-opts-2,.scc-opts-3,.scc-opts-4,.scc-two-col,.scc-res-grid,.scc-features-cols,.scc-alt-cards,.scc-form-grid{grid-template-columns:1fr;}
  .scc-step-q{font-size:1.5rem;}
  .scc-header{padding:1.25rem 1rem;}
  .scc-main{padding:1.5rem 1rem 4rem;}
  .scc-progress-wrap{padding:.8rem 1rem;}
}

/* ── Hochkant-Kiosk-Modus: aktiv, wenn der Bildschirm deutlich höher als
   breit ist (typisch für Messe-Displays wie 1080×1920). Der Konfigurator
   füllt dann die volle Höhe, Schrift/Touch-Ziele werden großzügiger. ── */
@media (min-aspect-ratio: 0/1) and (max-aspect-ratio: 4/5) and (min-width: 500px){
  .scc-root{ font-size: 17px; }
  .scc-main{ max-width: 100%; padding: 3rem 3rem 6rem; }
  .scc-step-q{ font-size: 2.3rem; }
  .scc-opt, .scc-opt-row{ padding: 1.4rem 1.5rem; font-size: 16px; }
  .scc-opt-desc{ font-size: 13px; }
  .scc-btn-next, .scc-btn-back, .scc-btn-action{ padding: 1.1rem 2.4rem; font-size: 15px; }
  .scc-header{ padding: 2rem 3rem; }
  .scc-progress-wrap{ padding: 1.2rem 3rem; }
}