/* Container */
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* Hero */
.scnvp-hero{margin:18px 0 8px}
.scnvp-hero-title{font-weight:800;font-size:28px;margin:0 0 6px}
.scnvp-hero-sub{color:#4b5563;margin:0}

/* Layouts Grid */
.scnvp-layouts{margin:24px 0}
.scnvp-layouts-title{font-weight:700;margin-bottom:8px}
.scnvp-layouts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
}
.scnvp-layout-tile{
  border:0;background:transparent;padding:0;cursor:pointer;
}
.scnvp-layout-tile .thumb{
  position:relative;border-radius:14px;overflow:hidden;
  aspect-ratio: 16/10; /* kompakter */
  box-shadow:0 3px 14px rgba(0,0,0,.08);
}
.scnvp-layout-tile img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:translateZ(0);
}
.scnvp-layout-tile .badge{
  position:absolute;left:8px;top:8px;
  background:rgba(11,30,36,.85);color:#fff;font-weight:600;
  padding:4px 8px;border-radius:999px;font-size:12px;line-height:1;
}

/* Produktkarten */
.scnvp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:12px}
.scnvp-card-price{
  border:1px solid #e5e7eb;border-radius:16px;padding:16px;background:#fff;
  display:flex;flex-direction:column;gap:10px;box-shadow:0 2px 12px rgba(0,0,0,.05)
}
.scnvp-price-card{font-weight:800;font-size:22px}
.scnvp-card-custom .scnvp-label{font-weight:600;margin-bottom:6px}
.scnvp-input-wrap{position:relative}
.scnvp-input-wrap input{
  width:100%;padding:12px 56px 12px 12px;border:1px solid #e5e7eb;border-radius:12px;font-size:16px
}
.scnvp-input-suffix{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#6b7280}

.button{background:#41b1cd;border:none;color:#fff;border-radius:999px;padding:10px 16px;cursor:pointer}
.button:hover{opacity:.92}
.button-outline{background:#fff;color:#41b1cd;border:1px solid #41b1cd}
.muted{color:#6b7280}

.scnvp-format{display:flex;gap:12px;margin:6px 0}
.scnvp-actions{display:flex;gap:10px}

.scnvp-disclaimer{margin:16px 0 6px;color:#4b5563;font-size:.95rem}

/* Modal Suchliste */
.scnvp-post-item{
  display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;
  border:1px solid #e5e7eb;border-radius:12px;padding:8px;margin-bottom:8px;background:#fff
}
.scnvp-post-item img{width:100%;height:90px;object-fit:cover;border-radius:10px}
.scnvp-post-item .title{font-weight:600}
.scnvp-post-item .price{color:#374151}

/* fallback if Bootstrap is not present */
.modal{display:none}
.modal.show{display:block}


/* Kein Backdrop, also Modal-Box deutlich schatten */
#scnvpPostModal .modal-content {
  box-shadow: 0 24px 70px rgba(0,0,0,.38);
  border-radius: 16px;
}
#scnvpPostModal .modal-content {
  border-radius: 16px;
  overflow: hidden;
}

/* Optional: leichte Kontur, damit sich die Box vom Hintergrund löst */
#scnvpPostModal .modal-content {
  outline: 1px solid rgba(0,0,0,.06);
}


/* Button-Loading-State */
.button.is-loading{ position:relative; pointer-events:none; opacity:.75 }
.button.is-loading::after{
  content:""; width:1em; height:1em; border:2px solid #41b1cd;
  border-top-color: transparent; border-radius:50%;
  animation: scnvp-spin .8s linear infinite;
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
}
@keyframes scnvp-spin{ to{ transform:translateY(-50%) rotate(360deg);} }

/* Progress-Modal optisch schwebend */
#scnvpProgress .modal-content{ box-shadow:0 24px 70px rgba(0,0,0,.35); }
#scnvpProgress .modal-content{ border-radius:16px; }


/* Zweispaltig, luftiger */
#scnvp-claim .row { row-gap: 16px; }

/* Canvas: A5 Portrait standard, Landscape per .landscape */
.scnvp-canvas-wrap{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.14);background:#000}
.scnvp-canvas{position:relative;width:100%;aspect-ratio:148/210}   /* A5P */
.scnvp-canvas.landscape{aspect-ratio:210/148}                      /* A5L */
.scnvp-canvas .scnvp-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
}

/* --- VARIANTEN WIE IM PDF (Prozentwerte spiegeln die mm-Logik) --- */
/* Card-Breite ~ 78% der Seitenbreite, Start Y ~ 10% + Logo-Offset (~12mm) + 15mm => ~ 26% */
.scnvp-card{
  position:absolute; left:50%; transform:translateX(-50%);
  width:78%; background:rgba(255,255,255,.74); border-radius:6px; padding:14px 16px;
  text-align:center; color:#2b2b2b; font-family:'Rubik','Helvetica','Arial',sans-serif;
  box-shadow:0 8px 26px rgba(0,0,0,.12);
  top:26%;
}
/* Logo oben mittig, PDF: 75mm von 148mm Breite ≈ 50.6% Breite, Y ~ 10% (Start) */
.scnvp-logo{
  position:absolute; left:50%; transform:translateX(-50%);
  width:50.7%; height:auto; top:12%;
  display:block;
}

/* Typo-Farben wie PDF */
.scnvp-title{color:#41b1cd; font-size:20pt; font-weight:800; margin-bottom:6px}
.scnvp-value{font-size:12pt; font-weight:700; margin-top:3mm}
.scnvp-code{font-family:monospace; border:1px dashed #bbb; border-radius:6px; padding:2px 6px; display:inline-block; margin-top:2mm}
.scnvp-meta > *{margin-top:3mm; font-size:11pt}
.scnvp-valid{font-size:9.8pt; font-style:italic}

/* Disclaimer-Box unten, gleiche Breite wie Card, Abstand ~ 18mm vom unteren Rand */
.scnvp-disc{
  position:absolute; left:50%; transform:translateX(-50%);
  width:78%; bottom:8mm; background:rgba(255,255,255,.74); border-radius:4px;
  padding:8mm 6mm 6mm; text-align:center; color:#2b2b2b; font-size:9pt; line-height:1.35;
  box-shadow:0 8px 26px rgba(0,0,0,.12);
}
.scnvp-disc span{color:#41b1cd}

/* Landscape-Feintuning (Proportionen bleiben an PDF-Formel angelehnt) */
.scnvp-canvas.landscape .scnvp-logo{ top:10% }
.scnvp-canvas.landscape .scnvp-card{ top:22% }
.scnvp-canvas.landscape .scnvp-disc{ bottom:8mm }

/* Layout-Grid kompakt (wie zuvor) */
.scnvp-layouts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.scnvp-layout-tile{position:relative;border:0;background:transparent;padding:0;cursor:pointer;border-radius:12px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 3px 12px rgba(0,0,0,.08)}
.scnvp-layout-tile img{width:100%;height:100%;object-fit:cover;display:block}
.scnvp-layout-tile .badge{
  position:absolute;left:8px;top:8px;background:rgba(11,30,36,.85);color:#fff;font-weight:600;
  padding:4px 8px;border-radius:999px;font-size:11px;line-height:1
}
.scnvp-layout-tile .check{
  position:absolute;right:8px;top:8px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.85);
  box-shadow:0 1px 6px rgba(0,0,0,.12); display:none;
}
.scnvp-layout-tile.active .check{display:block;background:#41b1cd}
.scnvp-layout-tile.active .check::after{content:"";position:absolute;left:6px;top:4px;width:8px;height:12px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}


/* Mini-Modal: schöner Shadow */
#scnvpMini .modal-content{ box-shadow:0 24px 70px rgba(0,0,0,.35); }
#scnvpMini .modal-content{ border-radius:16px; }

input.form-control {
    margin:0px !important; 
}

div.scnvp-canvas.landscape > div, .scnvp-canvas.landscape > img.scnvp-logo {
    zoom: 0.6; 
}


/* Zweispaltig, responsive */
.scnvp-two-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
@media (max-width: 992px){
  .scnvp-two-cards{ grid-template-columns:1fr; }
}

/* Karten */
.scnvp-card-picker,
.scnvp-card-summary{
  background:#fff; border-radius:14px; padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* Slider */
.scnvp-range-value span{ font-weight:700; }
.scnvp-quick .button{ margin-right:8px; margin-bottom:8px; }

/* Preis-Highlight rechts */
.scnvp-summary-title{ font-size:14px; color:#6b7b84; margin-bottom:4px; }
.scnvp-summary-price{
  font-size:28px; font-weight:800; color:#0b1e24; margin-bottom:8px;
}