.modal-overlay{z-index:200;backdrop-filter:blur(4px);background:#141618b8;justify-content:center;align-items:center;padding:24px;animation:.2s ease-out vccFadeUp;position:fixed;inset:0}.modal-overlay:not([hidden]){display:flex}.modal-card{--zoom-dur:.45s;--zoom-ease:cubic-bezier(.22, .61, .36, 1);--media-pad:32px;--nav-h:0px;background:var(--color-surface);border-radius:var(--radius-panel);width:100%;max-width:920px;min-height:440px;max-height:90vh;box-shadow:var(--shadow-modal);transition:min-height var(--zoom-dur) var(--zoom-ease);grid-template-columns:380px minmax(0,1fr);display:grid;position:relative;overflow:hidden;container-type:inline-size}.modal-card:has(.modal-nav:not([hidden])){--nav-h:50px}.modal-card:before{content:"";grid-column:1}.modal-card.is-zoomed{min-height:min(86vh,720px)}.modal-close-btn{z-index:3;width:38px;height:38px;color:var(--color-text);cursor:pointer;background:#1e22240f;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:16px;right:16px}.modal-close-btn:hover{background:#1e222424}.modal-close-btn svg{width:20px;height:20px}.modal-media{z-index:2;background:var(--color-neutral-light);width:380px;padding:var(--media-pad);transition:width var(--zoom-dur) var(--zoom-ease), height var(--zoom-dur) var(--zoom-ease), padding var(--zoom-dur) var(--zoom-ease);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;container-type:size}.modal-card.is-zoomed .modal-media{width:100%}.modal-image{width:100%;height:min(75cqw, calc(100cqh - var(--nav-h)));border:1px solid var(--color-border);background:#fff;border-radius:10px;flex:none;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.modal-image.is-zoomable{cursor:zoom-in}.modal-card.is-zoomed .modal-image.is-zoomable{cursor:zoom-out}.modal-image:focus-visible{outline:2px solid var(--color-primary-dark);outline-offset:2px}.modal-image img{object-fit:contain;width:100%;height:100%;transition:padding var(--zoom-dur) var(--zoom-ease);padding:8%;animation:.3s ease-out modalBildEin;position:absolute;inset:0}.modal-card.is-zoomed .modal-image img{padding:4%}@keyframes modalBildEin{0%{opacity:0}to{opacity:1}}.modal-zoom-hint{color:#fff;opacity:0;pointer-events:none;background:#1e2224b8;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;transition:opacity .2s,transform .2s;display:flex;position:absolute;bottom:10px;right:10px;transform:scale(.85)}.modal-image .modal-zoom-hint svg{stroke:currentColor;stroke-width:2px;width:16px;height:16px}.modal-image.is-zoomable:hover .modal-zoom-hint,.modal-image.is-zoomable:focus-visible .modal-zoom-hint{opacity:1;transform:scale(1)}@media (hover:none){.modal-image.is-zoomable .modal-zoom-hint{opacity:.85;transform:scale(1)}}.modal-card.is-zoomed .modal-image.is-zoomable .modal-zoom-hint{opacity:0}.modal-image svg{stroke:#c9cbc4;stroke-width:1.2px;width:84px;height:84px}.modal-nav{align-items:center;gap:16px;margin-top:16px;display:flex}.modal-nav-btn{border:1px solid var(--color-border);cursor:pointer;background:#fff;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.modal-nav-btn svg{width:18px;height:18px}.modal-counter{font-family:var(--font-mono);color:var(--color-text-tertiary-2);font-size:13px}.modal-details{flex-direction:column;grid-column:2;gap:14px;max-height:90vh;padding:36px 36px 28px;transition:opacity .3s .15s,visibility linear;display:flex;overflow-y:auto}.modal-card.is-zoomed .modal-details{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s linear .2s}.modal-cat-badge{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;background:var(--color-secondary);color:var(--color-primary);border-radius:var(--radius-chip);align-self:flex-start;padding:4px 10px;font-size:11px;font-weight:700}.modal-name{font-family:var(--font-display);letter-spacing:-.02em;color:var(--color-text);margin:0;font-size:30px;font-weight:800;line-height:1.08}.modal-pills{flex-wrap:wrap;gap:6px;display:flex}.modal-mehrwert{background:var(--color-info-bg);border:1px solid var(--color-info-border);border-left:4px solid var(--color-info-border);border-radius:8px;margin-top:4px;padding:14px 16px}.modal-mehrwert-label{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text);margin-bottom:5px;font-size:12px;font-weight:700}.modal-mehrwert p{font-family:var(--font-body);color:var(--color-text);margin:0;font-size:15px;line-height:1.55}.modal-long{font-family:var(--font-body);color:var(--color-text-secondary);font-size:15px;line-height:1.6}.modal-specs{border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);margin-top:4px;padding:14px 0}.modal-spec-row{justify-content:space-between;gap:16px;padding:5px 0;display:flex}.modal-spec-key{font-family:var(--font-body);color:var(--color-text-tertiary);font-size:14px}.modal-spec-value{font-family:var(--font-display);color:var(--color-text);text-align:right;font-size:14px;font-weight:600}.modal-footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:6px;display:flex}.modal-price{font-family:var(--font-display);color:var(--color-text);font-size:26px;font-weight:800;line-height:1}.modal-price-note{color:var(--color-text-tertiary);font-size:12px}.modal-cta{font-family:var(--font-display);background:var(--color-primary);color:var(--color-secondary);border-radius:var(--radius-btn);padding:13px 26px;font-size:15px;font-weight:700}.modal-cta:hover{background:var(--color-primary-hover)}@media (width<=720px){.modal-card{--media-pad:24px;--media-h:calc((100cqw - 2 * var(--media-pad)) * .75 + 2 * var(--media-pad) + var(--nav-h));grid-template-columns:minmax(0,1fr);min-height:0;overflow-y:auto}.modal-card.is-zoomed{overflow:hidden}.modal-card:before{height:var(--media-h)}.modal-media{width:auto;height:var(--media-h);bottom:auto;right:0}.modal-card.is-zoomed .modal-media{width:auto;height:100%;padding:12px}.modal-details{grid-column:1;max-height:none;overflow:visible}}@media (prefers-reduced-motion:reduce){.modal-card,.modal-media,.modal-image img,.modal-details,.modal-card.is-zoomed .modal-details{transition:none;animation:none}}