#skc, #skc *, #skc *::before, #skc *::after{box-sizing:border-box;margin:0;padding:0}
#skc{
  font-family:"Titillium Web",Helvetica,Arial,sans-serif;
  --green:#198754;--green-light:#e8f5ee;--green-dark:#13693f;--green-border:#a3d9bf;
  --amber:#ef7d0a;--amber-bg:#fff8e1;
  --text:#555;--text-dark:#454545;--muted:#6b6b6b;--subtle:#888;
  --bg:#fff;--bg-soft:#f6f6f4;--border:#e2e2de;--border-soft:#eeeeec;
  --shadow:0 1px 3px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05);
}
#skc a{text-decoration:none;color:inherit}
/* NAV */
/* SHELL */
/* Kein eigener max-width-Deckel: soll exakt die Breite von main.container
   ausfüllen (dieselbe Bootstrap-Containerbreite, an der auch Logo/Icons in
   der Navigation ausgerichtet sind), nicht schmäler und nicht breiter. */
#skc .wizard-shell{max-width:100%;margin:0 auto;padding:1.75rem 0 4rem;width:100%}
#skc .wizard-head{margin-bottom:2rem}
#skc .wizard-eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);margin-bottom:.5rem}
#skc .wizard-title{font-family:"Titillium Web",sans-serif;font-size:32px;font-weight:600;color:var(--text-dark);line-height:1.2}
#skc .wizard-sub{font-size:16px;color:var(--muted);margin-top:.5rem;max-width:560px}
/* LAYOUT */
#skc .wizard-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:3rem;align-items:start}
/* STAGE */
#skc .stage{background:#fff;overflow:visible;min-width:0}
/* PROGRESS (bewusst nicht ".progress", das kollidiert mit Bootstraps eigener
   .progress-Komponente, die auf der Seite bereits global geladen ist) */
#skc .kfg-progress{display:flex;align-items:center;gap:0;padding:0 0 1.75rem;max-width:100%;border-bottom:1px solid var(--border-soft);margin-bottom:.5rem}
#skc .pstep{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
#skc .pdot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;background:#fff;border:2px solid var(--border);color:var(--subtle);transition:.25s;flex-shrink:0}
#skc .pstep.active .pdot{background:var(--green);border-color:var(--green);color:#fff;transform:scale(1.08)}
#skc .pstep.done .pdot{background:var(--green);border-color:var(--green);color:#fff}
#skc .pstep.done .pdot::after{content:"✓"}
#skc .pstep.done .pdot span{display:none}
#skc .plabel{font-size:14px;font-weight:500;color:var(--subtle);white-space:nowrap}
#skc .pstep.active .plabel{color:var(--green-dark);font-weight:600}
#skc .pstep.done .plabel{color:var(--text)}
#skc .pstep.clickable{cursor:pointer}
#skc .pstep.clickable .pdot{cursor:pointer}
#skc .pstep.clickable:hover .pdot{border-color:var(--green);background:var(--green-light);color:var(--green-dark);transform:scale(1.05)}
#skc .pstep.clickable.done:hover .pdot{background:var(--green-dark);border-color:var(--green-dark)}
#skc .pstep.clickable:hover .plabel{color:var(--green-dark)}
#skc .pline{flex:1;height:2px;background:var(--border);margin:0 .75rem;min-width:20px}
#skc .pline.filled{background:var(--green)}
@media(max-width:560px){#skc .plabel{display:none}
#skc .pline{margin:0 .4rem}}
/* PANEL */
#skc .panel{padding:2rem 0}
#skc .panel-q{font-family:"Titillium Web",sans-serif;font-size:24px;font-weight:600;color:var(--text-dark);margin-bottom:.4rem}
#skc .panel-subq{font-family:"Titillium Web",sans-serif;font-size:19px;font-weight:600;color:var(--text-dark);margin:.5rem 0 1rem}
#skc .panel-hint{font-size:15px;color:var(--muted);margin-bottom:1.5rem}
#skc .step-pane{display:none;animation:fade .35s ease}
#skc .step-pane.active{display:block}
#skc from{opacity:0;transform:translateY(8px)}
#skc to{opacity:1;transform:translateY(0)}
/* TILES */
#skc .tile-grid{display:grid;gap:12px}
#skc .tile-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
#skc .tile-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
#skc .tile-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){#skc .tile-grid.cols-4{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media(max-width:620px){#skc .tile-grid.cols-3, #skc .tile-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
#skc .tile{border:2px solid var(--border);border-radius:6px;padding:1rem;cursor:pointer;transition:.18s;background:#fff;text-align:left;font-family:inherit;position:relative;display:flex;flex-direction:column;gap:.35rem}
#skc .tile:hover{border-color:var(--green-border);background:var(--green-light)}
#skc .tile.sel{border-color:var(--green);background:var(--green-light);box-shadow:0 0 0 3px rgba(46,125,50,.12)}
#skc .tile.sel::after{content:"✓";position:absolute;top:10px;right:12px;width:20px;height:20px;background:var(--green);color:#fff;border-radius:50%;font-size:12px;display:flex;align-items:center;justify-content:center}
#skc .tile-title{font-size:16px;font-weight:600;color:var(--text-dark)}
#skc .tile-sub{font-size:14.5px;color:var(--muted)}
#skc .tile-specs{display:flex;flex-direction:column;gap:2px;margin-top:.15rem}
#skc .tile-spec{font-size:14px;color:var(--muted);line-height:1.4}
#skc .tile-link{font-size:13.5px;font-weight:600;color:var(--green);margin-top:.3rem;align-self:flex-start;text-decoration:none}
#skc .tile-link:hover{text-decoration:underline}
#skc .tile-price{font-size:15.5px;font-weight:700;color:var(--text-dark);margin-top:.15rem}
#skc .tile-thumb{width:100%;height:88px;border-radius:9px;object-fit:cover;background:var(--bg-soft);margin-bottom:.4rem;border:1px solid var(--border-soft);position:relative}
#skc .sys-thumb{height:auto;aspect-ratio:1/1;width:100%}
#skc .tile.mini{padding:.7rem 1rem;flex-direction:row;align-items:center;justify-content:space-between}
#skc .tile.mini .tile-title{font-size:15px}
/* SWATCH */
#skc .swatch{width:38px;height:38px;border-radius:6px;border:1px solid rgba(0,0,0,.12);flex-shrink:0}
#skc .tile.color{flex-direction:row;align-items:center;gap:.7rem;padding:.7rem 1.9rem .7rem .9rem;min-height:62px}
#skc .tile.color .color-text{display:flex;flex-direction:column;gap:0;line-height:1.25;min-width:0}
#skc .tile.color .tile-title{font-size:15px}
#skc .tile.color .tile-sub{font-size:14px}
#skc .tile.color::after{top:8px;right:8px}
/* NAV BUTTONS */
#skc .panel-nav{display:flex;justify-content:space-between;align-items:center;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-soft)}
#skc .btn{font-family:inherit;font-size:16px;font-weight:600;border-radius:4px;cursor:pointer;transition:.18s;border:none;padding:12px 26px}
#skc .btn-primary{background:var(--green);color:#fff}
#skc .btn-primary:hover{background:var(--green-dark)}
#skc .btn-primary:disabled{background:var(--border);color:var(--subtle);cursor:not-allowed}
#skc .btn-ghost{background:transparent;color:var(--muted);padding:12px 18px}
#skc .btn-ghost:hover{color:var(--text)}
#skc .btn-ghost:disabled{opacity:.35;cursor:not-allowed}
/* INPUTS */
#skc .cut-wrap{background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.25rem}
#skc .cut-note{font-size:13.5px;color:var(--muted);margin-bottom:1rem}
#skc .cut-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
#skc .dim-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;margin-bottom:1.5rem}
#skc .masse-skizze{margin:1.5rem 0 0;padding:1rem 1rem .6rem;background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:10px}
#skc .masse-skizze svg{width:100%;max-width:520px;height:auto;display:block;margin:0 auto}
#skc .skizze-note{font-size:13.5px;color:var(--muted);text-align:center;margin:.4rem 0 0;line-height:1.5}
@media(max-width:620px){#skc .masse-skizze{padding:.7rem .5rem .5rem}
#skc .skizze-note{font-size:13px}}
#skc .dim-select{width:100%;padding:11px 38px 11px 13px;font-size:16px;font-weight:600;color:var(--text-dark);border:1.5px solid var(--border);border-radius:10px;font-family:inherit;outline:none;background:#fff;cursor:pointer;transition:.18s;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23198754' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
#skc .dim-select:hover{border-color:var(--green)}
#skc .dim-select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(25,135,84,.12)}
#skc .fld label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:6px}
#skc .fld input{width:100%;padding:10px 12px;font-size:15px;border:1.5px solid var(--border);border-radius:9px;font-family:inherit;outline:none;transition:.18s}
#skc .fld input:focus{border-color:var(--green)}
#skc .warn{font-size:12.5px;color:#c62828;margin-top:5px;display:none}
#skc .qty-row{display:flex;align-items:center;gap:.75rem;margin-top:1.25rem}
#skc .qty-row label{font-size:14px;font-weight:500;color:var(--muted)}
#skc .stepper{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:9px;overflow:hidden}
#skc .stepper button{width:38px;height:38px;border:none;background:#fff;font-size:18px;cursor:pointer;color:var(--green);font-family:inherit}
#skc .stepper button:hover{background:var(--green-light)}
#skc .stepper input{width:48px;text-align:center;border:none;font-size:15px;font-family:inherit;outline:none;border-left:1.5px solid var(--border);border-right:1.5px solid var(--border)}
/* OPTIONAL ACCORDION */
#skc .optional-wrap{margin-top:1.75rem}
#skc .optional-head{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem}
#skc .optional-head::after{content:"";flex:1;height:1px;background:var(--border-soft)}
#skc .acc{border:1px solid var(--border);border-radius:6px;margin-bottom:10px;overflow:hidden;background:#fff;transition:.2s}
#skc .acc.selected{border-color:var(--green-border);box-shadow:0 4px 16px rgba(46,125,50,.06)}
#skc .acc-head{display:flex;align-items:center;gap:.9rem;padding:1rem 1.2rem;cursor:pointer;user-select:none}
#skc .acc-check{width:22px;height:22px;border-radius:6px;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;transition:.18s;cursor:pointer}
#skc .acc-check:hover{border-color:var(--green)}
#skc .acc-check.checked{background:var(--green);border-color:var(--green)}
#skc .acc-check.checked::after{content:"✓"}
#skc .acc-titles{flex:1}
#skc .acc-title{font-size:16px;font-weight:600;color:var(--text-dark)}
#skc .acc-meta{font-size:14.5px;color:var(--muted)}
#skc .acc-desc{font-size:14.5px;color:var(--text);line-height:1.5;margin:0 0 1rem}
#skc .acc-price{font-size:14px;font-weight:600;color:var(--green);white-space:nowrap}
#skc .acc-toggle{font-size:14px;font-weight:600;color:var(--green);padding:6px 14px;border:1.5px solid var(--green-border);border-radius:8px;background:var(--green-light);white-space:nowrap;cursor:pointer;transition:.18s}
#skc .acc-toggle:hover{background:var(--green);color:#fff;border-color:var(--green)}
#skc .acc.selected .acc-toggle{background:#fff;border-color:var(--border);color:var(--muted)}
#skc .acc.selected .acc-toggle:hover{background:#fff;border-color:#c62828;color:#c62828}
#skc .acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
#skc .acc.open .acc-body{max-height:1200px}
#skc .acc-inner{padding:0 1.2rem 1.3rem;display:grid;grid-template-columns:160px 1fr;gap:1.2rem;align-items:start}
@media(max-width:560px){#skc .acc-inner{grid-template-columns:1fr}}
#skc .acc-img{width:160px;height:160px;border-radius:6px;object-fit:cover;border:1px solid var(--border-soft);background:var(--bg-soft)}
/* ENTWÄSSERUNGSSET KARTE */
#skc .entw-card{display:flex;align-items:center;gap:1rem;border:1.5px solid var(--border);border-radius:8px;padding:.85rem;background:var(--bg-soft);transition:.18s}
#skc .entw-card.on{border-color:var(--green);background:var(--green-light);box-shadow:0 0 0 3px rgba(25,135,84,.12)}
#skc .entw-img{width:70px;height:70px;border-radius:6px;background:#e8e8e4;border:1px solid var(--border-soft);flex-shrink:0;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
#skc .entw-ph{font-size:11px;color:var(--subtle);text-align:center;line-height:1.2}
#skc .entw-info{flex:1;min-width:0}
#skc .entw-title{font-size:15px;font-weight:600;color:var(--text-dark)}
#skc .entw-desc{font-size:14px;color:var(--muted);line-height:1.45;margin:2px 0 4px}
#skc .entw-price{font-size:14px;font-weight:600;color:var(--green)}
#skc .entw-contents{margin:4px 0 6px}
#skc .entw-contents summary{font-size:13.5px;font-weight:600;color:var(--green);cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:4px;user-select:none;width:fit-content}
#skc .entw-contents summary::-webkit-details-marker{display:none}
#skc .entw-contents summary::before{content:"▸";font-size:10px;transition:transform .2s}
#skc .entw-contents[open] summary::before{transform:rotate(90deg)}
#skc .entw-contents ul{margin:6px 0 2px;padding-left:1.1rem;list-style:none}
#skc .entw-contents li{font-size:13.5px;color:var(--muted);line-height:1.6;position:relative}
#skc .entw-contents li::before{content:"•";position:absolute;left:-.9rem;color:var(--green)}
#skc .entw-toggle{font-size:14px;font-weight:600;color:var(--green);padding:8px 16px;border:1.5px solid var(--green-border);border-radius:4px;background:#fff;white-space:nowrap;cursor:pointer;font-family:inherit;flex-shrink:0;transition:.18s}
#skc .entw-card.on .entw-toggle{background:var(--green);color:#fff;border-color:var(--green)}
@media(max-width:560px){#skc .entw-card{flex-wrap:wrap}
#skc .entw-toggle{width:100%}}

@media(max-width:560px){#skc .acc-img{width:200px;max-width:100%;height:200px;aspect-ratio:1/1;margin:0 auto;display:block}}
/* SUMMARY */
#skc .summary{background:#fff;border-left:1px solid var(--border-soft);border-radius:0;box-shadow:none;padding:0 0 0 2.5rem;position:sticky;top:88px}
#skc .sum-title{font-size:17px;font-weight:700;color:var(--text-dark);margin-bottom:.2rem}
#skc .sum-subtitle{font-size:13.5px;color:var(--muted);margin-bottom:1.1rem}
#skc .sum-rows{display:flex;flex-direction:column;gap:0;margin-bottom:1.1rem}
#skc .sum-row{display:flex;justify-content:space-between;gap:1rem;padding:8px 0;font-size:14.5px;border-bottom:1px solid var(--border-soft)}
#skc .sum-row:last-child{border-bottom:none}
#skc .sum-k{color:var(--muted);flex-shrink:0}
#skc .sum-v{font-weight:500;text-align:right}
#skc .sum-row.optional .sum-v{color:var(--green)}
#skc .sum-total{background:var(--green-light);border:1px solid var(--green-border);border-radius:13px;padding:1rem 1.2rem;margin-bottom:1rem}
#skc .sum-total-k{font-size:13px;color:var(--green-dark)}
#skc .sum-total-v{font-size:29px;font-weight:700;color:var(--green);line-height:1.1}
#skc .sum-total-sub{font-size:12.5px;color:#4a7c4b;margin-top:2px}
#skc .sum-cta{width:100%;font-size:16px;padding:14px}
#skc .sum-trust{display:flex;flex-direction:column;gap:.5rem;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--border-soft)}
#skc .sum-trust div{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:.5rem}
#skc .sum-trust svg{color:var(--green);flex-shrink:0}
@media(max-width:920px){#skc .wizard-grid{grid-template-columns:minmax(0,1fr);gap:1.25rem}
#skc .summary{position:static;order:2}}

@media(max-width:560px){#skc .wizard-shell{padding:1rem .75rem 3rem}
#skc .panel{padding:1.25rem 0}
#skc .kfg-progress{padding:0 0 1.25rem}
#skc nav{padding:.7rem 1rem}
/* Demo-Navigation (auf der echten Seite kommt sie vom Shop-Template) */
  #skc .nav-links{display:none}
#skc .nav-phone{font-size:13px}
/* Farb-/Optionskacheln einspaltig, damit lange Labels nicht die Spalte sprengen.
   Systemauswahl (sys-tiles) und Untergrund (bef-tiles) bleiben nebeneinander. */
  #skc .tile-grid.cols-2:not(#sys-tiles):not(#bef-tiles){grid-template-columns:minmax(0,1fr)}
#skc #sys-tiles, #skc #bef-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
#skc #sys-tiles .tile, #skc #bef-tiles .tile{padding:.7rem}
#skc #sys-tiles .tile-title, #skc #bef-tiles .tile-title{font-size:14.5px}
#skc #sys-tiles .tile-sub{font-size:13px;line-height:1.4}
/* Profilbilder quadratisch lassen – sonst wird das Profil beschnitten */
  #skc #sys-tiles .sys-thumb{height:auto;aspect-ratio:1/1;object-fit:contain;background:var(--bg-soft);padding:4px}
/* Plattenkacheln kompakter: weniger Luft, Bild bleibt wie im Original */
  #skc #qual-tiles{gap:.6rem}
#skc #qual-tiles .tile{padding:.7rem;gap:.2rem}
#skc #qual-tiles .tile-title{font-size:14.5px;line-height:1.25}
#skc #qual-tiles .tile-spec{font-size:13px;line-height:1.3}
#skc #qual-tiles .tile-price{font-size:14.5px}
#skc #qual-tiles .tile-link{font-size:13px}
#skc .acc-inner{min-width:0}
#skc .acc-head{flex-wrap:wrap;gap:.6rem}
#skc .acc-titles{min-width:0;flex:1 1 60%}
#skc .acc-toggle{flex-shrink:0}
#skc .entw-card{flex-wrap:wrap}
#skc .entw-info{min-width:0;flex:1 1 100%}}

@media(max-width:360px){#skc #qual-tiles .tile-link{font-size:12.5px}
#skc #qual-tiles .tile-title{font-size:14px}}
/* MOBILE STICKY BAR */
#skc .mobile-bar{display:none}
@media(max-width:920px){#skc .mobile-bar{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--border);padding:.75rem 1rem;justify-content:space-between;align-items:center;gap:.75rem;z-index:40;box-shadow:0 -4px 16px rgba(0,0,0,.08)}
#skc .mobile-bar .mb-info{min-width:0;flex:0 1 auto}
#skc .mobile-bar .mb-price{font-size:20px;font-weight:700;color:var(--green);line-height:1.15;white-space:nowrap}
#skc .mobile-bar .mb-label{font-size:12px;color:var(--muted);white-space:nowrap}
#skc .mobile-bar .btn{flex:0 0 auto;padding:.75rem 1.15rem;white-space:nowrap}
/* Platz schaffen, damit die schwebende Leiste nichts verdeckt */
  #skc .wizard-shell{padding-bottom:5.5rem}
/* Weiter/Warenkorb im Panel entfällt auf dem Handy –
     die schwebende Leiste unten übernimmt beides. Zurück bleibt. */
  #skc #btnNext{display:none}
#skc .panel-nav{justify-content:flex-start;padding-top:1rem;margin-top:1.5rem}}
/* MODAL */
#skc .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:center;justify-content:center;padding:1rem}
#skc .modal-overlay.show{display:flex}
#skc .modal{background:#fff;border-radius:10px;max-width:540px;width:100%;max-height:90vh;overflow-y:auto;padding:2rem;position:relative}
#skc .modal-close{position:absolute;top:1.1rem;right:1.1rem;background:none;border:none;font-size:20px;cursor:pointer;color:var(--subtle)}
#skc .modal h2{font-family:"Titillium Web",sans-serif;font-size:25px;font-weight:600;color:var(--text-dark);margin-bottom:1.25rem}
#skc .modal-list{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:1.25rem}
#skc .modal-list .mr{display:flex;justify-content:space-between;gap:1rem;padding:10px 14px;font-size:14.5px}
#skc .modal-list .mr:nth-child(even){background:var(--bg-soft)}
#skc .modal-list .mr .mk{color:var(--muted)}
#skc .modal-list .mr .mv{font-weight:500;text-align:right}