: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;
}



/* === FINAL BUTTON + MOBILE FIX === */
.btn-subtext{
  display:block !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  opacity:.98 !important;
  margin-top:3px !important;
}

#downloadPdfBtn{
  background: linear-gradient(135deg, #12b3f4, #0d8fd0) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:none !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}

#sendInquiryBtn{
  background: linear-gradient(135deg, #245dd8, #1e40af) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:none !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}

#downloadPdfBtn:hover,
#sendInquiryBtn:hover{
  transform: translateY(-2px) !important;
  filter: brightness(1.12) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18) !important;
}

#downloadPdfBtn:active,
#sendInquiryBtn:active{
  transform: translateY(0) !important;
  filter: brightness(1.04) !important;
}

#downloadPdfBtn,
#sendInquiryBtn{
  white-space: normal !important;
  text-align:center !important;
}

/* Mobile-Fix: linke/rechte Bereiche dürfen sich nicht überlagern */
@media (max-width: 900px){
  html, body{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    height:auto !important;
    min-height:100% !important;
  }

  .wrap{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    align-items:start !important;
    gap:16px !important;
  }

  .grid > .card,
  .grid > .card:first-child,
  .grid > .card:last-child{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    z-index:auto !important;
    width:100% !important;
  }

  #downloadPdfBtn,
  #sendInquiryBtn{
    width:100% !important;
    max-width:none !important;
    display:block !important;
    margin-bottom:10px !important;
  }
}


/* Delete Button leicht rot (3. Button in Reihe) */
button:nth-of-type(3){
  background: linear-gradient(135deg,#dc2626,#b91c1c) !important;
  color:#fff !important;
  border:none !important;
}

button:nth-of-type(3):hover{
  filter: brightness(1.1) !important;
  transform: translateY(-2px) !important;
}


/* === Header Classic an Industrie-Header angepasst === */
.header{
  align-items:flex-start !important;
  margin-bottom:14px !important;
}

.title-row{
  align-items:center !important;
  gap:8px !important;
}

h1{
  font-size:26px !important;
  line-height:1.05 !important;
  font-weight:800 !important;
  letter-spacing:.1px !important;
}

.company-info{
  font-size:12px !important;
  line-height:1.25 !important;
  margin-top:6px !important;
  margin-bottom:0 !important;
}

.site-logo{
  width:clamp(160px, 19vw, 245px) !important;
  max-height:54px !important;
  object-fit:contain !important;
}

.info-icon{
  width:20px !important;
  height:20px !important;
  font-size:12px !important;
}

@media (max-width: 720px){
  h1{
    font-size:22px !important;
  }
  .site-logo{
    width:clamp(110px, 30vw, 150px) !important;
    max-height:42px !important;
  }
}

/* === Artikelnummer direkt unter Artikeltitel + Tooltip vor Artikelnummer === */
.option-article-meta{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  margin-top:6px !important;
  color:rgba(226,232,240,.88) !important;
  font-size:12px !important;
  line-height:1.25 !important;
  font-weight:500 !important;
}

.option-article-meta .inline-info-icon{
  margin-left:0 !important;
  margin-right:0 !important;
  flex:0 0 16px !important;
  position:relative !important;
  top:auto !important;
}

.option-article-number{
  white-space:nowrap !important;
  color:rgba(226,232,240,.88) !important;
  font-size:12px !important;
  line-height:1.25 !important;
  font-weight:500 !important;
}

/* Sicherheit: Info-Icon nicht mehr hinter dem Artikeltitel anzeigen */
.option-title > .inline-info-icon{
  display:none !important;
}


/* === Größere Vorschaubilder wie Industrie-Konfigurator === */
.option .color-swatch{
  width:72px !important;
  height:52px !important;
  min-width:72px !important;
  border-radius:10px !important;
  object-fit:contain !important;
  padding:4px !important;
  background:rgba(255,255,255,.03) !important;
}

.option{
  align-items:center !important;
}

@media (max-width: 720px){
  .option .color-swatch{
    width:64px !important;
    height:46px !important;
    min-width:64px !important;
  }
}


/* === Gesamtsumme über komplette rechte Spaltenbreite === */
.preview .selection-card:has(.total-card){
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

.preview .total-card{
  width:100% !important;
}

.preview-box{
  width:100% !important;
  max-width:none !important;
}


/* === Name/Firma + Telefon in einer Zeile wie Industrie === */
.offer-form-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
  align-items:start !important;
}

.form-row.full-width{
  grid-column:1 / -1 !important;
}

@media (max-width: 900px){
  .offer-form-grid{
    grid-template-columns:1fr !important;
  }
}


/* === Pflichtfelder + Datenschutz rot wie Industrie === */
.offer-required-hint{
  color:#ff3b3b !important;
  font-weight:600 !important;
}

.offer-privacy-consent,
.offer-privacy-consent span,
.offer-privacy-consent label{
  color:#ff3b3b !important;
  font-weight:500 !important;
}

.offer-privacy-consent a{
  color:#7cc4ff !important;
}


/* === Buttons komplette Breite wie Industrie === */
.offer-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
  width:100% !important;
}

.offer-actions .action-btn{
  width:100% !important;
  min-width:0 !important;
  justify-content:center !important;
  text-align:center !important;
}

.save-restore-row{
  display:grid !important;
  grid-template-columns:1fr 1fr 1fr !important;
  gap:14px !important;
  width:100% !important;
}

.save-restore-row .save-restore-btn{
  width:100% !important;
  min-width:0 !important;
  text-align:center !important;
}

@media (max-width: 900px){
  .offer-actions{
    grid-template-columns:1fr !important;
  }

  .save-restore-row{
    grid-template-columns:1fr !important;
  }
}


/* === Buttons exakt wie Industrie === */
.offer-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:16px !important;
  width:100% !important;
  align-items:stretch !important;
}

.offer-actions .action-btn{
  width:100% !important;
  min-height:74px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  border-radius:999px !important;
  padding:14px 20px !important;
}

.save-restore-row{
  display:grid !important;
  grid-template-columns:1fr 1fr 1fr !important;
  gap:12px !important;
  width:100% !important;
  align-items:stretch !important;
}

.save-restore-row .save-restore-btn{
  width:100% !important;
  min-height:46px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  border-radius:999px !important;
  padding:10px 16px !important;
  line-height:1.2 !important;
}

@media (max-width: 900px){
  .offer-actions{
    grid-template-columns:1fr !important;
  }

  .save-restore-row{
    grid-template-columns:1fr !important;
  }
}


/* === Industrie-Buttonlayout: maximal 2 Zeilen === */
.offer-actions .action-btn{
  font-size:15px !important;
  line-height:1.18 !important;
  white-space:normal !important;
  word-break:keep-all !important;
}

.offer-actions .action-btn .btn-subtext{
  display:block !important;
  margin-top:2px !important;
  font-size:13px !important;
  line-height:1.15 !important;
}

#downloadPdfBtn{
  padding-left:18px !important;
  padding-right:18px !important;
}

#sendInquiryBtn{
  padding-left:18px !important;
  padding-right:18px !important;
  font-size:14px !important;
}


/* === Finaler Industrie-Zeilenumbruch Buttons === */
.offer-actions .action-btn{
  min-height:92px !important;
  padding:14px 22px !important;
}

.offer-actions .action-btn{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}

.offer-actions .action-btn > span:first-child,
.offer-actions .action-btn{
  line-height:1.15 !important;
}

.btn-subtext{
  display:block !important;
  margin-top:4px !important;
  white-space:nowrap !important;
  font-size:13px !important;
}


/* === FINAL FIX: exakt 2 Zeilen pro Hauptbutton === */
.offer-actions{
  grid-template-columns:1fr 1fr !important;
  gap:18px !important;
}

.offer-actions .action-btn{
  min-height:86px !important;
  padding:14px 18px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1.12 !important;
  overflow:hidden !important;
}

.offer-actions .action-btn .btn-subtext{
  display:block !important;
  margin-top:4px !important;
  font-size:13px !important;
  line-height:1.12 !important;
  white-space:nowrap !important;
}

#sendInquiryBtn{
  font-size:14px !important;
}

#downloadPdfBtn{
  font-size:14px !important;
}


/* === KORREKTUR: Buttontexte sicher auf maximal 2 Zeilen === */
.offer-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:18px !important;
  width:100% !important;
}

.offer-actions .action-btn{
  width:100% !important;
  min-height:84px !important;
  padding:14px 22px !important;
  border-radius:999px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  gap:4px !important;
}

.offer-actions .btn-maintext{
  display:block !important;
  width:100% !important;
  font-size:14px !important;
  line-height:1.12 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}

.offer-actions .btn-subtext{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  font-size:13px !important;
  line-height:1.12 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}

.save-restore-row .save-restore-btn{
  white-space:nowrap !important;
  line-height:1.12 !important;
  gap:2px !important;
}

#clearSavedConfigBtn{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:normal !important;
}

#clearSavedConfigBtn span{
  display:block !important;
  white-space:nowrap !important;
}

@media (max-width: 900px){
  .offer-actions{
    grid-template-columns:1fr !important;
  }
}


/* === Feintuning obere Hauptbuttons wie Industrie === */
.offer-actions{
  grid-template-columns:0.92fr 1.08fr !important;
  gap:18px !important;
}

.offer-actions .action-btn{
  min-height:78px !important;
  padding:12px 18px !important;
}

.offer-actions .btn-maintext{
  font-size:12.5px !important;
  line-height:1.08 !important;
}

.offer-actions .btn-subtext{
  font-size:11.5px !important;
  line-height:1.08 !important;
  margin-top:2px !important;
}

#sendInquiryBtn .btn-maintext{
  font-size:12px !important;
}

#sendInquiryBtn .btn-subtext{
  font-size:11px !important;
}


/* === Hauptbuttons etwas niedriger === */
.offer-actions .action-btn{
  min-height:68px !important;
  padding-top:9px !important;
  padding-bottom:9px !important;
}

.offer-actions .btn-maintext{
  line-height:1.02 !important;
}

.offer-actions .btn-subtext{
  line-height:1.02 !important;
  margin-top:1px !important;
}


/* === Variante 1 Badge Doppelanlage/Pendelstütze zweizeilig === */
.pill{
  line-height:1.15 !important;
  text-align:center !important;
  white-space:normal !important;
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:36px !important;
  padding:5px 10px !important;
}


/* === Tooltip-Zeilenumbrüche erlauben === */
#inlineInfoText{
  white-space:normal !important;
}

#inlineInfoText br{
  display:block !important;
  content:"" !important;
  margin-bottom:6px !important;
}


/* === Tooltip-Farben über einfache Markierungen === */
#inlineInfoText .tooltip-color-red{ color:#ff3b3b !important; }
#inlineInfoText .tooltip-color-orange{ color:#ff8a00 !important; }
#inlineInfoText .tooltip-color-blue{ color:#38bdf8 !important; }
#inlineInfoText .tooltip-color-green{ color:#22c55e !important; }


/* === Tooltip Variante 5 Fundament === */
.foundation-summary-tooltip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:16px !important;
  height:16px !important;
  margin-left:7px !important;
  border:none !important;
  border-radius:999px !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  font-size:11px !important;
  font-weight:700 !important;
  cursor:pointer !important;
  line-height:1 !important;
  vertical-align:middle !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.08) !important;
}

.foundation-summary-tooltip:hover{
  filter:brightness(1.08) !important;
}


/* === Fix Tooltip Variante 5 in Zusammenfassung === */
#foundationBarrierSelectionValue.closest-fix{}

.selection-label .foundation-summary-tooltip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:16px !important;
  height:16px !important;
  margin-left:7px !important;
  border:none !important;
  border-radius:999px !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  font-size:11px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  line-height:1 !important;
  vertical-align:middle !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.08) !important;
}

/* Handschranken-Konfigurator Ergänzungen */
.variant-title{margin:0 0 10px 0;font-size:15px;font-weight:750;}
.option-meta{margin-top:4px;font-size:12px;color:rgba(220,232,255,.64);line-height:1.35;}
.preview-stage{position:relative;min-height:660px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));overflow:hidden;margin:0 0 14px 0;display:flex;align-items:center;justify-content:center;padding:10px;}
.preview-layer{position:absolute;width:118%;height:118%;max-width:none;max-height:none;object-fit:contain;left:50%;top:50%;transform:translate(-50%,-50%);} 
.preview-layer-double{
  width:155% !important;
  height:155% !important;
}

.preview-placeholder{color:rgba(220,232,255,.65);font-size:14px;}
.summary-empty{color:rgba(220,232,255,.75);font-size:14px;}
.summary-price{font-weight:800;white-space:nowrap;margin-left:auto;align-self:center;}
.summary-qty-label{display:flex;gap:8px;align-items:center;font-size:12px;color:rgba(220,232,255,.78);margin:6px 12px 0 0;}
.summary-qty-select{border-radius:10px;border:1px solid rgba(255,255,255,.16);background:#fff;color:#111827;padding:4px 8px;}
.request-form{margin-top:16px;display:flex;flex-direction:column;gap:10px;}
.request-form h3{margin:0 0 2px 0;font-size:16px;}
.request-form input,.request-form textarea{width:100%;box-sizing:border-box;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.94);color:#111827;padding:10px 12px;font-size:14px;}
.request-form textarea{min-height:82px;resize:vertical;}
.privacy-check{display:flex;gap:8px;font-size:12px;line-height:1.35;color:rgba(220,232,255,.78);}
.action-row{display:flex;gap:10px;flex-wrap:wrap;}
.primary-btn{border:0;border-radius:14px;padding:11px 16px;font-weight:800;cursor:pointer;background:#ed0c1a;color:#fff;box-shadow:0 10px 22px rgba(0,0,0,.24);}
.form-status{min-height:20px;font-size:13px;color:rgba(220,232,255,.86);}
@media(max-width:720px){.preview-stage{min-height:460px}.summary-price{width:100%;margin-left:0}.action-row .primary-btn{width:100%;}.option-meta{font-size:11px;}}

/* === KORREKTUR Handschranken Bildvorschau Doppelanlage ===
   Die Doppelanlagen-Grafiken wurden auf den relevanten Bildbereich zugeschnitten.
   Deshalb dürfen sie hier nicht mehr künstlich über die transparente Originalfläche skaliert werden. */
.preview-stage{
  min-height:520px !important;
  padding:10px !important;
}
.preview-layer{
  width:118% !important;
  height:118% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
}
.preview-layer.preview-layer-double{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
}
@media(max-width:720px){
  .preview-stage{min-height:360px !important;}
  .preview-layer.preview-layer-double{width:108% !important;height:108% !important;}
}

.barrier-accordion{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.barrier-accordion-item{border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025);padding:12px;}
.barrier-accordion-item .variant-toggle-row{margin:0;}
.barrier-accordion-item .option-list:not(.is-collapsed){margin-top:12px;}

/* === Handschranken: rechter Bereich Buttons + Zubehörvorschau wie Industrie === */
.right-action-tabs{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  margin:0 0 14px 0 !important;
}
.right-action-tab{
  border:1px solid rgba(255,255,255,.10) !important;
  background:#1e3a5f !important;
  color:#fff !important;
  border-radius:12px !important;
  padding:11px 17px !important;
  font-weight:800 !important;
  font-size:13px !important;
  line-height:1 !important;
  cursor:pointer !important;
  box-shadow:none !important;
}
.right-action-tab:hover{ filter:brightness(1.08); }
.right-action-tab-red{
  background:#ff2b2f !important;
  border-color:rgba(255,255,255,.12) !important;
}
.right-action-tab.is-disabled,
.right-action-tab:disabled{
  background:#334155 !important;
  color:rgba(226,232,240,.62) !important;
  opacity:.65 !important;
  cursor:not-allowed !important;
  filter:none !important;
}
.selected-accessory-preview{
  margin:14px 0 18px 0 !important;
  padding:14px !important;
  border:1px solid rgba(148,163,184,.22) !important;
  border-radius:18px !important;
  background:rgba(15,23,42,.58) !important;
}
.accessory-preview-head{ margin-bottom:12px !important; }
.accessory-preview-head h3{
  margin:0 !important;
  font-size:15px !important;
  line-height:1.25 !important;
  color:#f8fafc !important;
  font-weight:900 !important;
}
.selected-accessory-preview .accessory-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
}
.selected-accessory-preview .accessory-item{
  padding:12px !important;
  border:1px solid rgba(148,163,184,.25) !important;
  border-radius:14px !important;
  background:rgba(30,41,59,.54) !important;
  text-align:center !important;
}
.selected-accessory-preview .accessory-thumb-wrap{
  aspect-ratio:1 / 1 !important;
  display:grid !important;
  place-items:center !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.035) !important;
  padding:10px !important;
  overflow:hidden !important;
  margin-bottom:10px !important;
}
.selected-accessory-preview .accessory-thumb{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}
.selected-accessory-preview .accessory-caption{
  font-size:12px !important;
  line-height:1.25 !important;
  color:#fff !important;
  font-weight:800 !important;
}
.selected-accessory-preview:not(.has-items){ display:none !important; }
.summary-heading.with-scroll-top{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:12px !important;
}
@media (max-width:720px){
  .right-action-tabs{ gap:8px !important; }
  .right-action-tab{ padding:10px 12px !important; font-size:12px !important; }
  .selected-accessory-preview .accessory-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* === Handschranken finale Reparatur: rechter Bereich wie Industrie, ohne alte Formularansicht === */
.summary-card.right-card{
  overflow-y:auto !important;
  max-height:calc(100vh - 110px) !important;
  padding:24px !important;
}
.summary-heading{
  margin:22px 0 18px 0 !important;
  font-size:28px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  color:#f8fafc !important;
}
.preview-hint{
  text-align:center !important;
  margin:8px 0 12px 0 !important;
  color:rgba(220,232,255,.68) !important;
  font-size:12px !important;
}
.summary-grid{
  margin-top:14px !important;
}
.summary-item-line{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:16px !important;
  align-items:start !important;
  padding:16px 0 !important;
  border-bottom:1px solid rgba(148,163,184,.20) !important;
}
.summary-item-main strong{
  display:block !important;
  margin-bottom:4px !important;
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  color:#f8fafc !important;
}
.summary-item-title{
  font-size:15px !important;
  line-height:1.35 !important;
  color:#e5edf8 !important;
}
.summary-meta{
  font-size:13px !important;
  line-height:1.35 !important;
  color:#9fb0c6 !important;
}
.summary-side{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:10px !important;
  min-width:110px !important;
}
.summary-price{
  font-size:20px !important;
  font-weight:900 !important;
  color:#f8fafc !important;
  margin:0 !important;
  white-space:nowrap !important;
}
.summary-qty-label{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:3px !important;
  margin:0 !important;
  font-size:11px !important;
  color:#9fb0c6 !important;
}
.summary-qty-select{
  min-width:66px !important;
  border-radius:9px !important;
  border:1px solid rgba(148,163,184,.35) !important;
  background:#152235 !important;
  color:#ffffff !important;
  padding:6px 9px !important;
  font-size:14px !important;
  font-weight:800 !important;
}
.total-card{
  margin:20px 0 18px 0 !important;
  padding:20px !important;
  border:1px solid rgba(148,163,184,.22) !important;
  border-radius:18px !important;
  background:rgba(15,23,42,.58) !important;
}
.total-card-title{
  font-size:14px !important;
  font-weight:900 !important;
  margin-bottom:16px !important;
  color:#f8fafc !important;
}
.total-row{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:16px !important;
  margin:10px 0 !important;
  color:#f8fafc !important;
  font-size:16px !important;
}
.total-row strong{font-size:17px !important;font-weight:900 !important;white-space:nowrap !important;}
.total-separator{height:1px !important;background:rgba(148,163,184,.22) !important;margin:16px 0 !important;}
.total-row-brutto span,.total-row-brutto strong{font-size:22px !important;font-weight:950 !important;}
.total-card small{display:block !important;margin-top:14px !important;color:#b8c4d6 !important;font-size:12px !important;}
.request-card{
  margin-top:18px !important;
  padding:20px !important;
  border:1px solid rgba(148,163,184,.22) !important;
  border-radius:18px !important;
  background:rgba(15,23,42,.58) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}
.request-card h3{font-size:20px !important;font-weight:900 !important;margin:0 0 4px 0 !important;color:#f8fafc !important;}
.request-card label{font-size:12px !important;color:#f8fafc !important;font-weight:700 !important;}
.request-card label span,.request-card .required-note{color:#ff3338 !important;}
.request-card input,.request-card textarea{
  width:100% !important;
  box-sizing:border-box !important;
  margin-top:5px !important;
  border-radius:12px !important;
  border:1px solid rgba(148,163,184,.18) !important;
  background:#1f2937 !important;
  color:#e5edf8 !important;
  padding:12px 14px !important;
  font-size:14px !important;
}
.request-card textarea{min-height:72px !important;resize:vertical !important;}
.form-grid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:12px !important;}
.privacy-check{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  color:#ff3338 !important;
  font-size:12px !important;
  line-height:1.35 !important;
}
.privacy-check input{
  width:16px !important;height:16px !important;min-width:16px !important;margin:2px 0 0 0 !important;padding:0 !important;accent-color:#0ea5e9 !important;
}
.privacy-check a{color:#16b7ff !important;text-decoration:underline !important;}
.main-actions{display:grid !important;grid-template-columns:1fr 1.55fr !important;gap:14px !important;margin-top:4px !important;}
.primary-btn{border:none !important;border-radius:18px !important;color:#fff !important;font-weight:900 !important;padding:14px 18px !important;cursor:pointer !important;}
.primary-btn small{display:block !important;font-size:11px !important;font-weight:800 !important;margin-top:2px !important;}
.pdf-btn{background:linear-gradient(135deg,#18c0f2,#038ed5) !important;}
.send-btn{background:linear-gradient(135deg,#3f7cff,#1e49d8) !important;}
.save-row{display:grid !important;grid-template-columns:1fr 1fr 1fr !important;gap:12px !important;border-top:1px solid rgba(148,163,184,.18) !important;margin-top:10px !important;padding-top:16px !important;}
.secondary-btn,.danger-btn{border:none !important;border-radius:16px !important;padding:14px 16px !important;color:#fff !important;font-weight:900 !important;cursor:pointer !important;}
.secondary-btn{background:#1e3a5f !important;}
.danger-btn{background:#f33034 !important;}
.footer-note{color:#b8c4d6 !important;font-size:11px !important;line-height:1.35 !important;}
.scroll-top-btn{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  width:32px !important;height:32px !important;border-radius:999px !important;
  border:1px solid rgba(148,163,184,.25) !important;background:#1f2937 !important;color:#dbeafe !important;
  cursor:pointer !important;font-size:18px !important;font-weight:900 !important;flex:0 0 auto !important;
}
.with-scroll-top{display:flex !important;justify-content:space-between !important;align-items:center !important;gap:12px !important;}
#selectedAccessoryPreview:not(.has-items){display:none !important;}
#selectedAccessoryPreview .accessory-empty{display:none !important;}
.variant-toggle-btn.is-open{transform:rotate(180deg) !important;}
@media(max-width:720px){
  .summary-card.right-card{max-height:none !important;padding:16px !important;}
  .summary-heading{font-size:23px !important;}
  .form-grid,.main-actions,.save-row{grid-template-columns:1fr !important;}
  .summary-item-line{grid-template-columns:1fr !important;}
  .summary-side{align-items:flex-start !important;}
  .summary-qty-label{align-items:flex-start !important;}
}

/* === FIX: Reihenfolge rechter Scrollbereich exakt wie Industrie ===
   Reihenfolge: Buttons -> große Bildvorschau -> Hinweis -> Zubehörvorschau -> Überschrift Zusammenfassung -> Positionsliste -> Summe -> Formular */
.summary-card.right-card{
  display:flex !important;
  flex-direction:column !important;
}
#rightActionTabs{ order:1 !important; }
#previewStage{ order:2 !important; }
.preview-hint{ order:3 !important; }
#selectedAccessoryPreview{ order:4 !important; }
#summaryTitle{
  order:5 !important;
  margin:28px 0 16px 0 !important;
}
#summaryGrid{ order:6 !important; }
#totalCard{ order:7 !important; }
#requestForm{ order:8 !important; }

/* === FINAL FIX 2026-05-20: Zusammenfassung Typografie exakt kleiner wie Industrie === */
#summaryTitle.summary-heading,
.summary-card.right-card #summaryTitle,
.summary-card.right-card .summary-heading{
  font-size:18px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  margin:22px 0 12px 0 !important;
  letter-spacing:0 !important;
}
.summary-card.right-card #summaryGrid{
  margin-top:0 !important;
}
.summary-card.right-card #summaryGrid .summary-item-line{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:12px !important;
  align-items:start !important;
  padding:10px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.09) !important;
}
.summary-card.right-card #summaryGrid .summary-item-main strong{
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  margin:0 0 2px 0 !important;
  color:var(--text) !important;
}
.summary-card.right-card #summaryGrid .summary-item-title{
  font-size:13px !important;
  line-height:1.35 !important;
  font-weight:400 !important;
  color:var(--text) !important;
  margin:0 !important;
}
.summary-card.right-card #summaryGrid .summary-meta{
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:400 !important;
  color:var(--muted) !important;
  margin:0 !important;
}
.summary-card.right-card #summaryGrid .summary-side{
  min-width:82px !important;
  gap:6px !important;
  align-items:flex-end !important;
}
.summary-card.right-card #summaryGrid .summary-price{
  font-size:15px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  margin:0 !important;
  color:var(--text) !important;
}
.summary-card.right-card #summaryGrid .summary-qty-label{
  font-size:11px !important;
  line-height:1.2 !important;
  gap:3px !important;
  color:var(--muted) !important;
}
.summary-card.right-card #summaryGrid .summary-qty-select{
  min-width:66px !important;
  padding:5px 24px 5px 8px !important;
  border-radius:8px !important;
  background:#172232 !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
  font-size:13px !important;
  font-weight:900 !important;
}
@media(max-width:720px){
  #summaryTitle.summary-heading,
  .summary-card.right-card #summaryTitle,
  .summary-card.right-card .summary-heading{font-size:18px !important;}
}


/* === Handschranken Haupt-Tooltip: Industrie-Optik, komplett orange, Überschriften fett === */
.info-panel.show,
.info-wrap.open .info-panel{
  display:block !important;
  position:fixed !important;
  left:50% !important;
  top:84px !important;
  transform:translateX(-50%) !important;
  width:min(620px,calc(100vw - 32px)) !important;
  max-height:78vh !important;
  overflow:auto !important;
  z-index:80 !important;
}
.main-info-panel,
.main-info-panel *{
  color:#ff7a00 !important;
}
.main-info-panel h2{
  font-weight:900 !important;
  font-size:16px !important;
  margin:0 0 7px 0 !important;
}
.main-info-panel p,
.main-info-panel li{
  font-size:14px !important;
  line-height:1.45 !important;
}
.main-info-panel ul{
  margin:6px 0 12px 0 !important;
  padding-left:18px !important;
}
.main-info-panel .info-close{
  color:#ffffff !important;
}

/* Mengenfelder dunkel wie Industrie */
.summary-qty-select{
  background:#12223a !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.18) !important;
}

/* === FIX Handschranken 2026-05-21: Haupt-Bildvorschau stabil anzeigen === */
#previewStage.has-preview-image{
  background-color:#151e2c !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:contain !important;
}
#previewStage.has-preview-image .preview-layer{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:2 !important;
  pointer-events:none !important;
}