.evcc-safe-wrap,
.evcc-safe-wrap * { box-sizing: border-box; }
.evcc-safe-wrap { max-width: 1450px; margin: 0 auto; padding: 14px 10px; font-family: Arial, sans-serif; }
.evcc-safe-stage { position: relative; width: 100%; height: 610px; overflow: hidden; touch-action: pan-y; }
.evcc-safe-card { position: absolute; top: 50%; left: 50%; width: 440px; height: 550px; aspect-ratio: 4 / 5; margin-left: -220px; margin-top: -275px; background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid #dfe7ef; box-shadow: 0 14px 34px rgba(0,0,0,.12); transition: transform .7s ease, opacity .7s ease; opacity: 0; outline: none; cursor: pointer; }
.evcc-safe-img { position: absolute; inset: 0; background: #eef2f5; overflow: hidden; }
.evcc-card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #eef2f5; opacity: 0; transition: opacity .35s ease; }
.evcc-card-image.is-current { opacity: 1; }
.evcc-safe-name { position: absolute; left: 14px; right: 14px; bottom: 14px; background: rgba(255,255,255,.95); color: #132232; padding: 13px 15px; border-radius: 15px; text-align: center; font-size: 18px; font-weight: 700; line-height: 1.25; box-shadow: 0 8px 20px rgba(0,0,0,.08); z-index: 2; transition: opacity .3s ease; }
.evcc-safe-name span:first-child { display:block; }
.evcc-safe-name small { display:none; margin-top:6px; font-size:11px; font-weight:600; opacity:.7; }
.evcc-safe-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(9,22,36,.10) 20%,rgba(9,22,36,.72) 58%,rgba(9,22,36,.94) 100%); color:#fff; padding:24px 20px 20px; display:flex; flex-direction:column; justify-content:flex-end; opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:3; }
.evcc-safe-card.active.details-open .evcc-safe-overlay { opacity:1; pointer-events:auto; }
.evcc-safe-card.active.details-open .evcc-safe-name { opacity:0; }
.evcc-safe-overlay h3 { margin:0 0 12px; text-align:center; font-size:28px; line-height:1.15; }
.evcc-safe-desc { margin:0 0 12px; font-size:15px; line-height:1.45; text-align:center; }
.evcc-safe-prices { margin:0 0 16px; font-size:15px; line-height:1.5; text-align:center; }
.evcc-safe-prices .price { color:#00c0ff; font-weight:700; }
.evcc-safe-btnwrap { display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; text-align:center; }
.evcc-safe-btn { display:inline-block; background:#00c0ff; color:#fff !important; text-decoration:none; padding:12px 22px; border-radius:999px; font-size:14px; font-weight:700; text-transform:uppercase; border:2px solid #00c0ff; }
.evcc-safe-btn:hover { filter:brightness(.95); }
.evcc-safe-btn-info { background:rgba(255,255,255,.14); border-color:#fff; }
.evcc-detail-close { display:none; }
.evcc-image-nav { position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border:0; border-radius:50%; background:rgba(19,34,50,.75); color:#fff; font-size:28px; line-height:34px; z-index:5; cursor:pointer; }
.evcc-image-prev { left:12px; }
.evcc-image-next { right:12px; }
.evcc-image-dots { position:absolute; left:50%; bottom:100px; transform:translateX(-50%); display:flex; gap:6px; z-index:4; }
.evcc-image-dots span { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.65); box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.evcc-image-dots span.is-current { background:#00c0ff; }
.evcc-admin-empty { padding:16px 18px; border:1px dashed #c3d0dc; border-radius:12px; background:#f8fbff; }
@media (max-width:1100px) {
 .evcc-safe-stage { height:535px; }
 .evcc-safe-card { width:380px; height:475px; margin-left:-190px; margin-top:-237.5px; }
 .evcc-safe-overlay h3 { font-size:24px; }
 .evcc-safe-desc,.evcc-safe-prices { font-size:14px; }
}
@media (max-width:767px) {
 .evcc-safe-wrap { padding:8px 0; }
 .evcc-safe-stage { height:min(125vw,475px); min-height:400px; }
 .evcc-safe-card { width:min(88vw,340px); height:min(110vw,425px); margin-left:max(-44vw,-170px); margin-top:max(-55vw,-212.5px); border-radius:20px; }
 .evcc-safe-name { display:block; left:10px; right:10px; bottom:10px; padding:11px 12px; font-size:16px; }
 .evcc-safe-name small { display:block; }
 .evcc-safe-overlay { opacity:0; pointer-events:none; padding:56px 16px 18px; background:rgba(9,22,36,.94); overflow-y:auto; justify-content:center; }
 .evcc-safe-card.active.details-open .evcc-safe-overlay { opacity:1; pointer-events:auto; }
 .evcc-safe-card.active.details-open .evcc-safe-name { opacity:0; }
 .evcc-safe-overlay h3 { font-size:22px; margin-bottom:10px; }
 .evcc-safe-desc,.evcc-safe-prices { font-size:14px; line-height:1.45; }
 .evcc-safe-btnwrap { gap:8px; }
 .evcc-safe-btn { padding:11px 16px; font-size:12px; }
 .evcc-detail-close { display:block; position:absolute; top:12px; right:12px; width:36px; height:36px; border:0; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; font-size:25px; line-height:32px; cursor:pointer; }
 .evcc-image-nav { width:34px; height:34px; font-size:24px; line-height:30px; }
 .evcc-image-prev { left:8px; }
 .evcc-image-next { right:8px; }
 .evcc-image-dots { bottom:96px; }
}


/* v1.6.0 – auswählbare Bildformen je Kategorie */
.evcc-shape-square .evcc-safe-img,
.evcc-shape-circle .evcc-safe-img,
.evcc-shape-star .evcc-safe-img {
  inset: auto;
  width: 88%;
  height: auto;
  aspect-ratio: 1 / 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.evcc-shape-rectangle .evcc-safe-img,
.evcc-shape-ellipse .evcc-safe-img {
  inset: auto;
  width: 94%;
  height: auto;
  aspect-ratio: 3 / 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.evcc-shape-square .evcc-safe-img {
  border-radius: 14px;
}

.evcc-shape-rectangle .evcc-safe-img {
  border-radius: 16px;
}

.evcc-shape-circle .evcc-safe-img {
  border-radius: 50%;
}

.evcc-shape-ellipse .evcc-safe-img {
  border-radius: 50%;
}

.evcc-shape-star .evcc-safe-img {
  clip-path: polygon(
    50% 0%,
    61% 34%,
    98% 35%,
    68% 56%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 56%,
    2% 35%,
    39% 34%
  );
}

.evcc-shape-square .evcc-safe-name,
.evcc-shape-circle .evcc-safe-name,
.evcc-shape-star .evcc-safe-name,
.evcc-shape-rectangle .evcc-safe-name,
.evcc-shape-ellipse .evcc-safe-name {
  bottom: 10px;
}

.evcc-shape-square .evcc-safe-overlay,
.evcc-shape-circle .evcc-safe-overlay,
.evcc-shape-star .evcc-safe-overlay,
.evcc-shape-rectangle .evcc-safe-overlay,
.evcc-shape-ellipse .evcc-safe-overlay {
  background: rgba(9,22,36,.94);
}


/* v1.7.0 – Schriftarten und Schriftfarben */
.evcc-safe-wrap {
  font-family: var(--evcc-font-family, inherit);
}

.evcc-safe-name span:first-child,
.evcc-safe-overlay h3 {
  font-family: var(--evcc-item-title-font, var(--evcc-font-family, inherit));
  color: var(--evcc-item-title-color, var(--evcc-title-color, inherit));
}

.evcc-safe-name small {
  font-family: var(--evcc-item-hint-font, var(--evcc-font-family, inherit));
  color: var(--evcc-item-hint-color, var(--evcc-hint-color, inherit));
}

.evcc-safe-desc {
  font-family: var(--evcc-item-description-font, var(--evcc-font-family, inherit));
  color: var(--evcc-item-description-color, var(--evcc-text-color, inherit));
}

.evcc-safe-prices {
  font-family: var(--evcc-item-prices-font, var(--evcc-font-family, inherit));
  color: var(--evcc-item-prices-color, var(--evcc-text-color, inherit));
}

.evcc-safe-prices .price {
  color: var(--evcc-item-prices-color, var(--evcc-price-color, inherit));
}

.evcc-safe-btn {
  font-family: var(--evcc-item-button-font, var(--evcc-font-family, inherit));
  color: var(--evcc-item-button-color, var(--evcc-button-color, inherit)) !important;
}