:root{
      --bg-1:#0b0f14;
      --bg-2:#06080c;
      --card:rgba(17,24,39,.88);
      --line:#243040;
      --text:#e5e7eb;
      --muted:#94a3b8;
      --accent:#0ea5e9;
      --accent-2:#0284c7;
      --danger:#d60000;
      --option-bg:rgba(255,255,255,.03);
      --option-hover:rgba(255,255,255,.06);
      --option-active:rgba(14,165,233,.12);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth;}
    html,body{margin:0;padding:0}
    body{
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--text);
      background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
    }

    .wrap{
      max-width:1180px;
      margin:0 auto;
      padding:24px;
    }

    .header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-bottom:18px;
    }

    .title-row{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    h1{
      margin:0;
      font-size:22px;
      line-height:1.15;
      font-weight:800;
      letter-spacing:.2px;
    }

    .site-logo{
      width:clamp(140px, 22vw, 220px);
      max-width:100%;
      max-height:70px;
      height:auto;
      object-fit:contain;
      display:block;
      flex-shrink:1;
    }

    .info-wrap{position:relative;display:inline-flex;align-items:center}
    .info-icon{
      width:22px;
      height:22px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:13px;
      font-weight:800;
      color:#fff;
      background:linear-gradient(180deg,#ff2a2a,var(--danger));
      border:1px solid rgba(255,255,255,.24);
      box-shadow:0 6px 18px rgba(214,0,0,.35);
      cursor:pointer;
      user-select:none;
    }

    .info-panel{
      position:absolute;
      top:34px;
      left:0;
      width:min(560px,calc(100vw - 40px));
      background:#111827;
      border:1px solid var(--line);
      border-radius:14px;
      padding:14px;
      box-shadow:0 10px 30px rgba(0,0,0,.45);
      color:var(--text);
      display:none;
      z-index:30;
    }

    .info-panel h2{
      margin:0 0 8px 0;
      font-size:15px;
    }

    .info-panel p{
      margin:0;
      font-size:13px;
      line-height:1.55;
      color:#d6deeb;
      white-space:pre-line;
    }

    .info-wrap.open .info-panel{
      display:block;
      position:fixed;
      left:50%;
      top:88px;
      transform:translateX(-50%);
      width:min(560px,calc(100vw - 40px));
      max-height:74vh;
      overflow:auto;
      z-index:40;
    }

    .info-wrap.open .info-panel .info-close{display:inline-flex}

    .info-close{
      display:none;
      margin-top:12px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      color:var(--text);
      border-radius:10px;
      padding:8px 10px;
      cursor:pointer;
      font-weight:700;
    }

    .info-backdrop{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.55);
      backdrop-filter:blur(2px);
      display:none;
      z-index:20;
    }

    .info-backdrop.show{display:block}

    .grid{
      display:grid;
      grid-template-columns:430px minmax(0,1fr);
      gap:16px;
      align-items:start;
    }

    .grid > .card:first-child{
      position:sticky;
      top:8px;
      height:calc(100vh - 8px);
      min-height:calc(100vh - 8px);
      max-height:calc(100vh - 8px);
      overflow-y:auto;
      overflow-x:hidden;
      scrollbar-gutter:stable;
      padding-bottom:28px;
      align-self:start;
    }

    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:18px;
      padding:16px;
      box-shadow:0 10px 30px rgba(0,0,0,.35);
    }

    .section-title{
      margin:0 0 6px 0;
      font-size:17px;
      font-weight:750;
    }

    .section-subtitle{
      margin:0 0 14px 0;
      color:var(--muted);
      font-size:13px;
      line-height:1.45;
    }

    fieldset{
      margin:0;
      padding:12px;
      border:1px solid var(--line);
      border-radius:14px;
    }

    legend{
      padding:0 8px;
      color:var(--muted);
      font-size:12px;
      letter-spacing:.2px;
    }

    .option-list{
      display:grid;
      gap:10px;
    }

    .option{
      position:relative;
      display:flex;
      align-items:flex-start;
      gap:12px;
      padding:12px 12px;
      border:1px solid rgba(255,255,255,.06);
      border-radius:14px;
      background:var(--option-bg);
      cursor:pointer;
      transition:background .18s ease,border-color .18s ease,transform .18s ease;
    }

    .option:hover{
      background:var(--option-hover);
      border-color:rgba(255,255,255,.12);
      transform:translateY(-1px);
    }

    .option input{
      margin-top:2px;
      transform:scale(1.12);
      accent-color:var(--accent);
      cursor:pointer;
    }

    .option.active{
      background:var(--option-active);
      border-color:rgba(14,165,233,.35);
      box-shadow:inset 0 0 0 1px rgba(14,165,233,.12);
    }

    .option-title{
      font-size:14px;
      font-weight:700;
      line-height:1.4;
      color:#f4f7fb;
    }

    .color-swatch{
      margin-left:auto;
      width:46px;
      height:28px;
      object-fit:cover;
      border-radius:6px;
      border:1px solid rgba(255,255,255,.25);
      box-shadow:0 2px 6px rgba(0,0,0,.35);
    }

    .pill{
      margin-left:auto;
      white-space:nowrap;
      font-size:11px;
      color:var(--muted);
      border:1px solid var(--line);
      border-radius:999px;
      padding:4px 8px;
      background:rgba(255,255,255,.02);
    }

    .preview{
      display:grid;
      place-items:center;
      min-height:620px;
      text-align:center;
    }

    .preview-box{
      width:min(760px,100%);
    }

    .config-actions{
      display:flex;
      gap:10px;
      justify-content:flex-start;
      margin-bottom:12px;
      flex-wrap:wrap;
    }

    .action-btn{
      border:1px solid rgba(255,255,255,.16);
      border-radius:12px;
      padding:10px 16px;
      font-weight:700;
      cursor:pointer;
      transition:transform .18s ease, background .18s ease, border-color .18s ease;
    }

    .action-btn:hover{ transform:translateY(-1px); }
    .action-btn.primary-btn{ background:linear-gradient(180deg,#1ca3ec,#0284c7); color:white; }
    .action-btn.reset-btn{ background:#1e293b; color:#e5e7eb; }

    .image-frame{
      min-height:520px;
      border:1px dashed rgba(255,255,255,.14);
      border-radius:18px;
      background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
      display:grid;
      place-items:center;
      overflow:hidden;
      padding:24px;
    }

    .layer-stage{
      position:relative;
      width:min(100%,680px);
      aspect-ratio:1600 / 1700;
      display:block;
    }

    .layer-stage img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:contain;
      pointer-events:none;
    }

    .double-layer{
      display:none;
      transform-origin:center center;
    }

    .selection-card{
      margin-top:14px;
      padding:14px;
      border:1px solid var(--line);
      border-radius:16px;
      background:rgba(0,0,0,.18);
      text-align:left;
    }

    .selection-title{
      font-size:14px;
      font-weight:800;
      margin-bottom:12px;
      color:#f4f7fb;
    }

    .selection-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:10px 12px;
    }

    .selection-item{
      padding:10px 12px;
      border:1px solid rgba(255,255,255,.07);
      border-radius:12px;
      background:rgba(255,255,255,.02);
      min-width:0;
    }

    .selection-item.full-width{
      grid-column:1 / -1;
    }

    .selection-label{
      color:var(--muted);
      font-size:11px;
      margin-bottom:4px;
      line-height:1.35;
    }

    .selection-value{
      font-size:15px;
      font-weight:700;
      line-height:1.35;
      word-break:break-word;
    }

    .selection-value.compact{
      font-size:12px;
      font-weight:600;
      line-height:1.45;
    }

    
    .accessory-card{
      margin-top:14px;
    }

    .accessory-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:12px;
    }

    .accessory-item{
      padding:12px;
      border:1px solid rgba(255,255,255,.07);
      border-radius:14px;
      background:rgba(255,255,255,.02);
      text-align:center;
      min-width:0;
      transition:transform .18s ease, border-color .18s ease, background .18s ease;
    }

    .accessory-thumb-wrap{
      aspect-ratio:1 / 1;
      display:grid;
      place-items:center;
      border-radius:12px;
      background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
      border:1px solid rgba(255,255,255,.05);
      padding:10px;
      overflow:hidden;
      margin-bottom:8px;
      transition:border-color .18s ease, background .18s ease;
    }

    .accessory-thumb{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      transition:transform .18s ease;
    }

    @media (hover:hover){
      .accessory-item:hover{
        transform:translateY(-2px);
        border-color:rgba(255,255,255,.14);
        background:rgba(255,255,255,.035);
      }

      .accessory-item:hover .accessory-thumb-wrap{
        border-color:rgba(255,255,255,.12);
        background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
      }

      .accessory-item:hover .accessory-thumb{
        transform:scale(1.06);
      }
    }

    .accessory-caption{
      font-size:12px;
      line-height:1.35;
      color:#e5e7eb;
      word-break:break-word;
    }

    .accessory-empty{
      color:var(--muted);
      font-size:12px;
      line-height:1.4;
    }

    .accessory-card.has-items .accessory-empty{display:none}
    .accessory-card:not(.has-items) .accessory-grid{display:none}

    @media (max-width: 980px){
      .grid{grid-template-columns:1fr}
      .preview{min-height:auto}
    }

    @media (max-width: 720px){
      .wrap{padding:16px}
      .header{
        flex-direction:row;
        align-items:flex-start;
        justify-content:space-between;
        gap:12px;
        text-align:left;
      }
      .title-row{
        justify-content:flex-start;
        min-width:0;
        flex:1 1 auto;
      }
      h1{font-size:20px}
      .site-logo{
        width:clamp(96px, 28vw, 140px);
        max-height:none;
        align-self:flex-start;
      }
      .info-panel{
        position:fixed;
        left:50%;
        top:12%;
        transform:translateX(-50%);
        width:min(92vw,560px);
        max-height:74vh;
        overflow:auto;
      }
      .info-wrap.open .info-panel{display:block}
      .info-close{display:inline-flex}
      .grid{
        grid-template-columns:1fr;
      }
      .grid > .card:first-child{
        max-height:none;
        overflow:visible;
      }
      .image-frame{min-height:360px;padding:16px}
      .selection-grid{grid-template-columns:1fr}
      .accessory-grid{grid-template-columns:1fr}
    }
  


    .variant-toggle-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin:0 0 10px 0;
    }

    .variant-toggle-row h3{
      min-width:0;
      line-height:1.3;
    }

    .variant-toggle-btn{
      width:28px;
      height:28px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      color:var(--text);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      flex:0 0 auto;
      transition:transform .18s ease, background .18s ease, border-color .18s ease;
      font-size:14px;
      padding:0;
    }

    .variant-toggle-btn:hover{
      background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.2);
    }

    .variant-toggle-btn.is-open{
      transform:rotate(180deg);
    }

    .option-list.is-collapsed{
      display:none;
    }


    .variant-toggle-meta{
      display:flex;
      align-items:center;
      gap:8px;
      flex:0 0 auto;
      min-width:0;
    }

    .variant-selection-info{
      font-size:12px;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:170px;
      text-align:right;
    }

    @media (max-width: 720px){
      .variant-toggle-row{
        align-items:flex-start;
      }

      .variant-toggle-meta{
        gap:6px;
      }

      .variant-selection-info{
        max-width:120px;
        white-space:normal;
        line-height:1.2;
      }
    }

.variant-toggle-btn.has-selection{
  border-color:#3b82f6;
  background:rgba(59,130,246,.15);
  color:#93c5fd;
}



/* Punkt nur anzeigen, wenn Variante eingeklappt UND Auswahl vorhanden */
fieldset.variant-has-selection.variant-collapsed h3::before{
  content:"● ";
  color:#3b82f6;
  font-weight:700;
}

/* Zubehör Button deaktiviert wenn keine Auswahl */
#jumpAccessoriesBtn.is-disabled{
  opacity:0.5;
  cursor:not-allowed;
  pointer-events:none;
}


.with-scroll-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.scroll-top-btn{
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  flex:0 0 auto;
  padding:0;
  font-size:16px;
  line-height:1;
}

.scroll-top-btn:hover{
  background:rgba(14,165,233,.12);
  border-color:rgba(14,165,233,.35);
  color:#7dd3fc;
  transform:translateY(-2px);
}




.variant-title:hover{
  color:#fb923c;
}




.variant-title:hover{
  color:#fb923c;
}


/* Variant Titles */
.variant-title{
  color:#f97316;
  font-weight:500; /* lighter than before */
  letter-spacing:0.2px;
}

/* Divider between variants */
fieldset{
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding-bottom:16px;
  margin-bottom:16px;
}

/* optional hover */
.variant-title:hover{
  color:#fb923c;
}


/* FORCE variant title styling (override existing styles) */
.variant-title,
h3.variant-title{
  color:#f97316 !important;
  font-weight:400 !important; /* wirklich dünn */
}

/* Divider - use wrapper instead of fieldset fallback */
.variant-block,
fieldset{
  border-bottom:1px solid rgba(255,255,255,0.12) !important;
  padding-bottom:18px;
  margin-bottom:18px;
}


/* V73: clearer card-style separation for each variant */
fieldset{
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,0.02);
  padding:14px !important;
  margin:0 0 16px 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

fieldset:hover{
  border-color:rgba(249,115,22,0.18) !important;
  background:rgba(255,255,255,0.028);
}

legend{
  padding:0 8px;
}


/* V74: clearly visible orange variant boxes */
fieldset{
  border:1px solid rgba(249,115,22,0.35) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,0.02);
  padding:16px !important;
  margin-bottom:18px !important;
}

/* stronger hover effect */
fieldset:hover{
  border-color:#f97316 !important;
  box-shadow:0 0 0 1px rgba(249,115,22,0.25);
}


/* Inline-Info-Button bei Variante 1 */
.inline-info-icon{
  width:16px;
  height:16px;
  min-width:16px;
  margin-left:6px;
  padding:0;
  border:none;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(180deg,#ff2a2a,var(--danger));
  box-shadow:0 4px 12px rgba(214,0,0,.28);
  cursor:pointer;
  vertical-align:middle;
}

/* Fixed panel: gleiche Grundlogik wie oben, aber unabhängig vom Options-Layout */
.inline-fixed-panel{
  position:fixed !important;
  top:88px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(560px,calc(100vw - 40px)) !important;
  z-index:40 !important;
  display:none;
}

.inline-fixed-panel.show{
  display:block !important;
}

.inline-fixed-panel h2{
  margin:0 0 8px 0;
}

.inline-fixed-panel p{
  margin:0;
  white-space:normal;
}

.inline-fixed-panel .info-close{
  display:inline-flex;
}

@media (max-width: 720px){
  .inline-fixed-panel{
    top:72px !important;
    width:min(560px,calc(100vw - 24px)) !important;
  }
}


/* V110 Fix: oberer Classic-Info-Tooltip kompakter */
.info-panel {
  padding: 12px !important;
}

.info-panel h2 {
  margin: 0 0 6px 0 !important;
}

.info-panel p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.28 !important;
  white-space: normal !important;
}


/* === V110 Tooltip-Text orange + kompakter === */
.info-panel {
  padding: 12px !important;
}

.info-panel h2,
.info-panel h3,
.info-panel .title {
  margin: 0 0 6px 0 !important;
  color: #ff7a00 !important;
}

.info-panel p,
.info-panel li,
.info-panel span,
.info-panel div {
  color: #ff7a00 !important;
  font-size: 13px !important;
  line-height: 1.28 !important;
  white-space: normal !important;
}

.info-panel ul {
  margin: 6px 0 !important;
  padding-left: 18px !important;
}

.info-panel li {
  margin-bottom: 3px !important;
}

/* Fallbacks für weitere Tooltip-/Overlay-Container */
.tooltip-content,
.overlay-content,
.tooltip-box,
.tooltip-popup,
.tooltip-panel,
.inline-tooltip,
.info-tooltip,
.info-popup,
.tooltip,
.tooltip-inner,
.tooltip-text,
.modal-tooltip,
.help-tooltip {
  color: #ff7a00 !important;
}

.tooltip-content *,
.overlay-content *,
.tooltip-box *,
.tooltip-popup *,
.tooltip-panel *,
.inline-tooltip *,
.info-tooltip *,
.info-popup *,
.tooltip *,
.tooltip-inner *,
.tooltip-text *,
.modal-tooltip *,
.help-tooltip * {
  color: #ff7a00 !important;
}

.tooltip-content,
.overlay-content,
.tooltip-box,
.tooltip-popup,
.tooltip-panel,
.tooltip,
.tooltip-inner,
.tooltip-text {
  line-height: 1.35 !important;
}

.tooltip-content ul,
.overlay-content ul,
.tooltip-box ul,
.tooltip-popup ul,
.tooltip-panel ul,
.tooltip ul {
  margin: 6px 0 !important;
  padding-left: 18px !important;
}

.tooltip-content li,
.overlay-content li,
.tooltip-box li,
.tooltip-popup li,
.tooltip-panel li,
.tooltip li {
  margin-bottom: 3px !important;
}



/* Angebot / Kundendaten */
.total-card{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.total-amount{
  font-size:28px;
  font-weight:800;
  color:var(--accent);
}
.total-note{
  font-size:12px;
  color:var(--muted);
}
.offer-form-grid{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
}
.form-row,
.form-row.full-width{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  width:100% !important;
  gap:6px !important;
}
.form-row label{
  display:block !important;
  width:100% !important;
  font-size:13px;
  color:var(--text);
  margin:0 !important;
}
.form-row input,
.form-row textarea{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:10px 12px !important;
  border-radius:12px !important;
  border:1px solid var(--line) !important;
  background:rgba(255,255,255,.04) !important;
  color:var(--text) !important;
  font:inherit !important;
}
.form-row textarea{
  min-height:88px;
  resize:vertical;
}
.offer-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px !important;
}
.action-btn{
  appearance:none;
  border:none;
  border-radius:999px;
  padding:12px 18px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(2,132,199,.25);
}
.action-btn.secondary{
  background:rgba(255,255,255,.08);
  box-shadow:none;
  border:1px solid var(--line);
}
.offer-hint{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
}
@media (max-width: 900px){
  .offer-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .action-btn{
    width:100%;
  }
}


.preview-box.pdf-capture-mode{
  background:#0b0f14 !important;
}
.preview-box.pdf-capture-mode *{
  animation:none !important;
  transition:none !important;
}


.preview-stage-capture{
  background:#0b0f14 !important;
}
.preview-stage-capture *{
  animation:none !important;
  transition:none !important;
}


.total-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-size:16px;
  margin-bottom:6px;
}
.total-row strong{
  font-weight:700;
}
.total-row-brutto{
  margin-top:4px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:18px;
}


.company-info{
  font-size:12px;
  font-weight:400;
  color:rgba(255,255,255,.7);
  margin-top:6px;
  margin-bottom:12px;
  display:block;
}


.title-row h1{
  order:1;
}
.title-row .info-wrap{
  order:2;
}
.title-row .company-info{
  order:3;
  flex-basis:100%;
  margin-top:6px;
  margin-bottom:12px;
}

.app-footer{
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,.6);
  margin:20px 0 10px;
}


.summary-item-line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.summary-item-main{
  min-width:0;
  flex:1 1 auto;
}
.summary-qty-wrap{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  min-width:72px;
}
.summary-qty-label{
  font-size:11px;
  color:var(--muted);
}
.summary-qty-select{
  min-width:64px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
}.summary-subprice{
  margin-top:4px;
  font-size:11px;
  color:var(--muted);
}


.required-mark{
  color:#ff6b6b;
  font-weight:800;
}

.offer-required-hint{
  margin-bottom:10px;
  font-size:12px;
  color:rgba(255,255,255,.72);
}


.offer-privacy-consent{
  margin-bottom:12px;
}

.privacy-consent-label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12px;
  color:rgba(255,255,255,.82);
  line-height:1.45;
}

.privacy-consent-label input{
  margin-top:2px;
  flex:0 0 auto;
}

.privacy-consent-label a{
  color:#7cc4ff;
  text-decoration:underline;
}

.privacy-consent-label a:hover{
  color:#a6d8ff;
}


/* Exakte Schriftgrößen-Anpassung für Zusammenfassung Variante 1 und 2 */
#selectionValue,
#boomSelectionValue{
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:600 !important;
}

#selectionValue .summary-item-title,
#boomSelectionValue .summary-item-title{
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:600 !important;
}

#selectionValue .summary-meta,
#boomSelectionValue .summary-meta{
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:600 !important;
}

#selectionValue .summary-subprice,
#boomSelectionValue .summary-subprice{
  font-size:11px !important;
  line-height:1.35 !important;
}

#selectionValue .summary-qty-label,
#boomSelectionValue .summary-qty-label{
  font-size:10px !important;
}

#selectionValue .summary-qty-select,
#boomSelectionValue .summary-qty-select{
  font-size:12px !important;
}



.left-column .card,
  .config-column .card,
  .configurator-left .card,
  .configurator-panel,
  .config-card{
    max-height:none !important;
    height:auto !important;
  }

  .left-column .card-body,
  .config-column .card-body,
  .configurator-left .card-body,
  .configurator-panel .card-body,
  .config-card .card-body{
    max-height:calc(100vh - 120px) !important;
    min-height:calc(100vh - 120px) !important;
    overflow-y:auto !important;
    padding-bottom:28px !important;
  }
}








/* Desktop: linker Scrollbereich bewusst deutlich länger als der Viewport */
@media (min-width: 901px){
  .grid > .card:first-child{
    height:calc(100vh - 8px) !important;
    min-height:calc(100vh - 8px) !important;
    max-height:calc(100vh - 8px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-bottom:40px !important;
    align-self:start !important;
  }
}


/* Unabhängiger Scrollbereich links auf Desktop */
@media (min-width: 901px){
  .grid{
    align-items:start !important;
  }

  .grid > .card:first-child{
    position:sticky !important;
    top:8px !important;
    height:calc(100vh - 8px) !important;
    min-height:calc(100vh - 8px) !important;
    max-height:calc(100vh - 8px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-gutter:stable !important;
    align-self:start !important;
    padding-bottom:28px !important;
  }
}



/* Zwei getrennte Scrollbereiche auf Desktop */
@media (min-width: 901px){
  html, body{
    height:100%;
    overflow:hidden !important;
  }

  .grid{
    height:100vh !important;
    max-height:100vh !important;
    align-items:start !important;
  }

  .grid > .card:first-child,
  .grid > .card:last-child{
    position:sticky !important;
    top:8px !important;
    height:calc(100vh - 8px) !important;
    min-height:calc(100vh - 8px) !important;
    max-height:calc(100vh - 8px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-gutter:stable !important;
    align-self:start !important;
    padding-bottom:28px !important;
  }
}




/* Fix: letzte Variante (10) vollständig erreichbar */
@media (min-width: 901px){
  .grid > .card:first-child{
    padding-bottom:120px !important;
  }
}



/* Fix rechter Bereich: Buttons unten sichtbar */
@media (min-width: 901px){
  .grid > .card:last-child{
    padding-bottom:120px !important;
  }
}



/* Footer wieder sichtbar unter den getrennten Scrollbereichen */
@media (min-width: 901px){
  html, body{
    overflow:auto !important;
    min-height:100% !important;
  }

  .grid{
    height:auto !important;
    min-height:calc(100vh - 24px) !important;
    max-height:none !important;
  }

  .grid > .card:first-child,
  .grid > .card:last-child{
    position:sticky !important;
    top:8px !important;
    height:calc(100vh - 56px) !important;
    min-height:calc(100vh - 56px) !important;
    max-height:calc(100vh - 56px) !important;
  }

  footer,
  .footer,
  .site-footer{
    position:relative !important;
    z-index:1 !important;
    margin-top:18px !important;
  }
}



/* Finaler Footer-Fix bei getrennten Scrollbereichen */
@media (min-width: 901px){
  html, body{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    min-height:100% !important;
  }

  .grid{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin-bottom:110px !important;
  }

  .grid > .card:first-child,
  .grid > .card:last-child{
    position:sticky !important;
    top:8px !important;
    height:calc(100vh - 120px) !important;
    min-height:calc(100vh - 120px) !important;
    max-height:calc(100vh - 120px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  footer,
  .footer,
  .site-footer{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    z-index:5 !important;
    margin-top:24px !important;
    padding-bottom:18px !important;
  }
}



/* Finales Layout:
   Header oben fest, Footer unten fest,
   links und rechts dazwischen getrennte Scrollbereiche */
@media (min-width: 901px){
  html, body{
    height:100% !important;
    overflow:hidden !important;
  }

  body{
    min-height:100vh !important;
  }

  .wrap{
    height:100vh !important;
    min-height:100vh !important;
    max-height:100vh !important;
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    gap:16px !important;
    overflow:hidden !important;
    padding-top:16px !important;
    padding-bottom:12px !important;
  }

  .header{
    margin-bottom:0 !important;
    align-self:start !important;
  }

  .grid{
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    overflow:hidden !important;
    margin-bottom:0 !important;
    align-items:stretch !important;
  }

  .grid > .card:first-child,
  .grid > .card:last-child{
    position:relative !important;
    top:auto !important;
    align-self:stretch !important;
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-gutter:stable !important;
    padding-bottom:28px !important;
  }

  .app-footer,
  footer.app-footer{
    display:block !important;
    position:relative !important;
    z-index:10 !important;
    margin:0 !important;
    padding-top:4px !important;
    padding-bottom:0 !important;
    align-self:end !important;
  }
}



}



/* Copyright sichtbar unten im rechten Scrollbereich */
@media (min-width: 901px){
  .app-footer,
  footer,
  .footer,
  .site-footer{
    display:none !important;
  }

  .grid > .card:last-child{
    display:flex !important;
    flex-direction:column !important;
  }

  .right-scroll-copyright{
    display:block !important;
    margin-top:18px !important;
    padding-top:16px !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    text-align:center !important;
    font-size:12px !important;
    line-height:1.4 !important;
    color:rgba(220,232,255,.72) !important;
  }
}

@media (max-width: 900px){
  .right-scroll-copyright{
    display:none !important;
  }
}


/* Copyright kleiner darstellen */
.right-scroll-copyright{
  font-size:11px !important;
  opacity:0.8;
}