/* Smarttec Gutschein-Verkauf – Farben/Texte unter Einstellungen → Design & Texte */
.svs-scope,.svs-modal,.svs-shop,.svs-account{--svs-primary:#0b5cff;--svs-text:#1d1d1f;--svs-muted:#667085;--svs-buy-bg:#f4bf3a;--svs-buy-text:#1d1d1f;--svs-denom-bg:#f3f4f6;--svs-denom-text:#1d1d1f;--svs-denom-active:#f4bf3a;--svs-popular-bg:#f4bf3a;--svs-hero-bg:#e3e3e5;--svs-image-card-bg:#fff;--svs-badge-bg:#f3f4f6;--svs-badge-text:#1d1d1f;--svs-input-border:#d0d5dd;--svs-faq-bg:#f4f5f6;--svs-pill-bg:#f3f4f6;--svs-pill-active:#f4bf3a;--svs-modal-bg:#fff;--svs-box-bg:#fafbfc;--svs-radius:16px}
.svs-scope *,.svs-modal *{box-sizing:border-box}
.svs-test-banner{position:fixed;left:0;right:0;bottom:0;z-index:99999;background:#ffe066;color:#5c3c00;text-align:center;font:700 13px/1.4 Arial,sans-serif;padding:8px}

/* ---------- Formular ---------- */
.svs-form{margin:14px 0;font-size:15px;color:var(--svs-text)}
.svs-form input[type=email],.svs-form input[type=text],.svs-form input[type=password],.svs-form textarea,.svs-modal select,.svs-buy-form select{width:100%;padding:11px 12px;border:1px solid var(--svs-input-border);border-radius:10px;font-size:16px;background:#fff;color:var(--svs-text)}
.svs-form input:focus,.svs-form textarea:focus,.svs-modal select:focus{outline:none;border-color:var(--svs-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--svs-primary) 15%,transparent)}
.svs-block{margin:0 0 14px;padding:14px;border:1px solid #eef0f3;border-radius:12px;background:var(--svs-box-bg)}
.svs-label{display:block;font-weight:600;margin:8px 0 6px;font-size:14px}.svs-label span{color:#d63638}
.svs-check{display:flex;gap:8px;align-items:flex-start;font-weight:600;cursor:pointer}.svs-check input{margin-top:4px}.svs-check em{font-weight:400;color:#12805c;font-style:normal}
.svs-sub{margin-top:10px}.svs-frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.svs-pin{letter-spacing:8px;text-align:center;font-size:20px!important}
.svs-help{font-size:12.5px;color:var(--svs-muted);margin:6px 0 0}.svs-counter{text-align:right}
.svs-fee-note{font-size:13px;color:var(--svs-muted);margin:0 0 10px}
.svs-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.svs-error{background:#fde8e8;color:#9b1c1c;padding:10px 12px;border-radius:10px;font-size:14px;margin:10px 0}
.svs-error[hidden]{display:none}
.svs-templates{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-bottom:8px}
.svs-tpl input{position:absolute;opacity:0;pointer-events:none}
.svs-tpl-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:82px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--tpl-a),var(--tpl-b));cursor:pointer;border:3px solid transparent;transition:transform .15s}
.svs-tpl-icon{font-size:26px;line-height:1}.svs-tpl-title{font-size:12px;font-weight:700}
.svs-tpl input:checked+.svs-tpl-card{border-color:#111;transform:scale(1.04)}
.svs-tpl input:focus-visible+.svs-tpl-card{outline:3px solid var(--svs-primary)}

/* ---------- Alter Shortcode [svs_gutscheine] ---------- */
.svs-grid{display:grid;grid-template-columns:repeat(var(--svs-cols,4),minmax(0,1fr));gap:18px}
@media(max-width:1024px){.svs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:768px){.svs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.svs-frow{grid-template-columns:1fr}}
.svs-card{background:#fff;border:1px solid #eef0f3;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(0,0,0,.04);transition:box-shadow .2s,transform .2s}
.svs-card:hover{box-shadow:0 10px 30px rgba(0,0,0,.08);transform:translateY(-2px)}
.svs-card-img{aspect-ratio:16/10;background:#f7f8fb;display:flex;align-items:center;justify-content:center}.svs-card-img img{width:100%;height:100%;object-fit:cover}
.svs-card-body{padding:14px;display:flex;flex-direction:column;gap:4px;flex:1}
.svs-card-brand{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--svs-muted)}
.svs-card-title{font-weight:700;font-size:16px}.svs-card-value{font-size:14px;color:#444}
.svs-card-price{font-size:20px;font-weight:800;margin-top:auto}.svs-card-fee{font-size:12px;color:var(--svs-muted)}
.svs-btn{margin-top:10px;background:var(--svs-buy-bg);color:var(--svs-buy-text);border:0;border-radius:10px;padding:12px 14px;font-weight:700;font-size:15px;cursor:pointer}
.svs-btn:hover{filter:brightness(1.05)}.svs-btn-full{width:100%;padding:15px;font-size:16px}.svs-btn[disabled],.svs-buy-btn[disabled]{opacity:.6;cursor:wait}

/* ---------- Modal ---------- */
.svs-modal{position:fixed;inset:0;z-index:99998;background:rgba(15,20,30,.55);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:30px 12px;color:var(--svs-text)}
.svs-modal[hidden]{display:none}
.svs-modal-box{background:var(--svs-modal-bg);border-radius:18px;max-width:560px;width:100%;padding:22px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.25);text-align:left}
.svs-modal-close{position:absolute;top:10px;right:12px;border:0;background:#eef0f3;border-radius:50%;width:34px;height:34px;font-size:22px;line-height:1;cursor:pointer;color:#111;padding:0}
.svs-modal-head{display:flex;gap:12px;align-items:center;margin-bottom:12px;padding-right:36px}.svs-modal-head img{width:64px;height:64px;object-fit:contain;border-radius:10px;border:1px solid #eef0f3}
.svs-modal-title{font-size:17px;margin:6px 0 10px}
.svs-sum{font-size:14px;color:var(--svs-muted)}.svs-sum strong{color:var(--svs-text);font-size:18px}
.svs-desc{font-size:14px;color:#444;margin-bottom:12px}.svs-secure{font-size:12.5px;color:var(--svs-muted);text-align:center;margin-top:10px}
body.svs-modal-open{overflow:hidden}
.svs-thankyou{background:#ecfdf3;border:1px solid #abefc6;border-radius:12px;padding:12px 16px;margin:16px 0}

/* ---------- Produktseite (Marke) ---------- */
.svs-main{width:100%}
.svs-bp{max-width:1280px;margin:0 auto;padding:24px 20px 40px;color:var(--svs-text)}
.svs-bp-back{display:inline-flex;align-items:center;gap:6px;color:var(--svs-text);text-decoration:none!important;font-size:17px;margin:0 0 18px}
.svs-bp-back:hover{color:var(--svs-primary)}
.svs-bp-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:start}
.svs-bp-media{position:relative;padding:44px 40px 64px 0}
.svs-bp-media:before{content:"";position:absolute;z-index:0;top:0;bottom:0;right:-10%;left:-100vw;background:linear-gradient(90deg,var(--svs-hero-bg),color-mix(in srgb,var(--svs-hero-bg) 45%,#fff));border-radius:0 50% 50% 0/0 60% 60% 0}
.svs-bp-imgcard{position:relative;z-index:1;border-radius:var(--svs-radius);box-shadow:0 6px 24px rgba(0,0,0,.08);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--svs-image-card-bg)}
.svs-bp-imgcard img{width:100%;height:100%;object-fit:contain;display:block}
.svs-bp-badges{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.svs-bp-badge{display:inline-flex;align-items:center;gap:8px;background:var(--svs-badge-bg);color:var(--svs-badge-text);padding:10px 16px;border-radius:999px;font-size:15px}
.svs-bp-buy{padding-top:36px}
.svs-bp-title{font-size:clamp(26px,3.2vw,42px);line-height:1.15;margin:0 0 26px;font-weight:700;color:var(--svs-text)}
.svs-denoms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 20px;margin-bottom:22px}
.svs-denom{position:relative;cursor:pointer;margin:0}
.svs-denom input{position:absolute;opacity:0;pointer-events:none}
.svs-denom-box{display:flex;align-items:center;justify-content:center;min-height:76px;padding:12px;background:var(--svs-denom-bg);color:var(--svs-denom-text);border:3px solid transparent;border-radius:var(--svs-radius);font-size:18px;transition:border-color .15s,transform .15s;text-align:center}
.svs-denom:hover .svs-denom-box{transform:translateY(-1px)}
.svs-denom input:checked+.svs-denom-box{border-color:var(--svs-denom-active);font-weight:700}
.svs-denom input:focus-visible+.svs-denom-box{outline:3px solid var(--svs-primary);outline-offset:2px}
.svs-denom-pop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;background:var(--svs-popular-bg);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 0 4px #fff}
.svs-custom{display:block;border:1.5px solid var(--svs-input-border);border-radius:var(--svs-radius);padding:10px 20px;margin:0 0 30px;cursor:text;background:#fff}
.svs-custom:focus-within{border-color:var(--svs-primary)}
.svs-custom.is-active{border-color:var(--svs-denom-active)}
.svs-custom-label{display:block;font-size:15px;color:var(--svs-muted)}
.svs-custom input[type=text]{width:100%;border:0;outline:0;padding:4px 0 2px;font-size:19px;background:transparent;color:var(--svs-text);box-shadow:none}
.svs-buy-btn{display:block;width:100%;border:0;border-radius:999px;background:var(--svs-buy-bg);color:var(--svs-buy-text);font-size:20px;font-weight:700;padding:18px 20px;cursor:pointer;transition:filter .15s,transform .1s}
.svs-buy-btn:hover{filter:brightness(1.04)}.svs-buy-btn:active{transform:scale(.99)}
.svs-pay{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:26px;color:var(--svs-muted);font-size:17px}
.svs-pay img{height:34px;width:auto;border:1px solid #e6e8eb;border-radius:6px;background:#fff;padding:3px 5px}
.svs-bp-unavailable{font-size:17px;color:var(--svs-muted)}
.svs-bp-banner{margin:48px 0 0}.svs-bp-banner img{display:block;width:100%;height:auto;border-radius:calc(var(--svs-radius) * 1.5)}
.svs-bp-info{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;margin-top:56px}
.svs-bp-info.is-single{grid-template-columns:1fr}
.svs-bp-desc h2,.svs-bp-faq h2{font-size:clamp(24px,2.6vw,36px);margin:0 0 20px;line-height:1.2;color:var(--svs-text)}
.svs-bp-desc{font-size:17px;line-height:1.7}.svs-bp-desc h3{font-size:24px;margin:28px 0 10px}
.svs-faq{background:var(--svs-faq-bg);border-radius:calc(var(--svs-radius) * 1.3);margin:0 0 20px;padding:0}
.svs-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;font-weight:600;font-size:17px}
.svs-faq summary::-webkit-details-marker{display:none}
.svs-faq summary svg{flex:0 0 auto;transition:transform .2s;transform:rotate(180deg)}
.svs-faq[open] summary svg{transform:none}
.svs-faq-a{padding:0 24px 20px;font-size:16.5px;line-height:1.7}.svs-faq-a p{margin:0 0 10px}
@media(max-width:900px){
 .svs-bp-top{grid-template-columns:1fr;gap:10px}
 .svs-bp-media{padding:24px 0 30px}
 .svs-bp-media:before{right:-20px;left:-20px;border-radius:0 0 40% 40%/0 0 30% 30%}
 .svs-bp-buy{padding-top:0}
 .svs-denoms{gap:16px 12px}
 .svs-denom-box{min-height:64px;font-size:17px}
 .svs-bp-info{grid-template-columns:1fr;gap:28px;margin-top:36px}
}
@media(max-width:340px){.svs-denoms{grid-template-columns:repeat(2,minmax(0,1fr))}.svs-bp-badge{font-size:14px;padding:8px 12px}}

/* ---------- Gutschein-Reihe (passt sich der Breite des Containers an) ---------- */
.svs-row{color:var(--svs-text);--svs-tile-h:auto;container-type:inline-size;width:100%}
.svs-row-title{font-size:clamp(26px,3vw,40px);font-weight:700;margin:0 0 22px;line-height:1.2}
.svs-pills{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 30px}
.svs-pill{display:inline-flex;align-items:center;gap:10px;background:var(--svs-pill-bg);border:2px solid #dfe1e5;border-radius:999px;padding:10px 22px;font-size:17px;cursor:pointer;color:var(--svs-text);font-family:inherit;line-height:1.3;white-space:nowrap}
.svs-pill:hover{border-color:#c5c8ce}
.svs-pill.is-active{background:#fff;border-color:var(--svs-pill-active)}
.svs-tiles{display:grid;grid-template-columns:repeat(var(--svs-cols,6),minmax(0,1fr));gap:40px 38px}
.svs-tile,.svs-tile:hover,.svs-tile:focus{display:flex;flex-direction:column;gap:18px;text-decoration:none!important;color:var(--svs-text)}
.svs-tile[hidden]{display:none}
.svs-tile-img{display:flex;align-items:center;justify-content:center;aspect-ratio:1.6/1;height:var(--svs-tile-h);border-radius:var(--svs-radius);overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.07);transition:transform .2s,box-shadow .2s;border:1px solid rgba(0,0,0,.05)}
.svs-tile-img img{width:100%;height:100%;display:block;margin:0;max-width:none}
.svs-fit-contain img{object-fit:contain}.svs-fit-cover img{object-fit:cover}
.svs-tile:hover .svs-tile-img{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.svs-tile-name{font-size:19px;font-weight:500;line-height:1.3}
@container (max-width:1000px){.svs-tiles{grid-template-columns:repeat(var(--svs-cols-t,4),minmax(0,1fr));gap:26px 22px}}
@container (max-width:640px){
 .svs-tiles{grid-template-columns:repeat(var(--svs-cols-m,2),minmax(0,1fr));gap:20px 14px}
 .svs-pills{flex-wrap:nowrap;overflow-x:auto;gap:10px;padding-bottom:6px;scrollbar-width:none}
 .svs-pills::-webkit-scrollbar{display:none}
 .svs-pill{font-size:15px;padding:8px 16px}
 .svs-tile{gap:10px}.svs-tile-name{font-size:16px}
}
.svs-row--scroll .svs-tiles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.svs-row--scroll .svs-tile{flex:0 0 calc((100% - (var(--svs-cols,6) - 1) * 38px) / var(--svs-cols,6));scroll-snap-align:start}
@container (max-width:1000px){.svs-row--scroll .svs-tile{flex-basis:calc((100% - (var(--svs-cols-t,4) - 1) * 22px) / var(--svs-cols-t,4))}}
@container (max-width:640px){.svs-row--scroll .svs-tile{flex-basis:calc((100% - (var(--svs-cols-m,2) - 1) * 14px) / var(--svs-cols-m,2))}}

/* ---------- Mein Konto ---------- */
.svs-account{margin:10px 0 24px;color:var(--svs-text)}
.svs-acc-item{border:1px solid #e6e8eb;border-radius:14px;padding:16px;margin:0 0 14px;background:#fff}
.svs-acc-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.svs-acc-head img{width:56px;height:40px;object-fit:contain;border-radius:8px;border:1px solid #eef0f3}
.svs-acc-meta{font-size:13px;color:var(--svs-muted)}
.svs-acc-note{margin:4px 0 0;color:var(--svs-muted)}
.svs-acc-code{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--svs-box-bg);border:1px dashed var(--svs-input-border);border-radius:12px;padding:12px 14px;margin-top:10px}
.svs-acc-pin{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:18px;font-weight:700;letter-spacing:1px;background:none;padding:0;word-break:break-all;flex:1 1 200px;color:var(--svs-text)}
.svs-acc-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.svs-acc-btn{background:var(--svs-buy-bg);color:var(--svs-buy-text);border:0;border-radius:999px;padding:9px 16px;font-weight:700;font-size:14px;cursor:pointer}
.svs-acc-btn-2{background:#eef0f3;color:var(--svs-text)}
.svs-acc-pinbox input{width:110px!important;padding:8px!important;font-size:16px!important;border:1px solid var(--svs-input-border);border-radius:10px}
.svs-acc-extra{flex-basis:100%;font-size:13px;color:var(--svs-muted)}
.svs-acc-code .svs-error{flex-basis:100%;margin:0}
