:root{
  --ssc-slide-text-max: 720px;
  --ssc-slide-text-gutter: 18px;

  --ssc-media-radius: 18px;
  --ssc-media-shadow: 0 22px 60px rgba(0,0,0,.16), 0 6px 18px rgba(0,0,0,.10);

  --ssc-nav-btn: 58px;

  /* Hover-Farbe (blaugrün) */
  --ssc-nav-hover: rgba(36, 156, 150, .92);
  --ssc-nav-hover-border: rgba(255,255,255,.26);
  --ssc-nav-hover-ring: rgba(255,255,255,.22);

  --ssc-bar-gap: 18px;
  --ssc-bar-padding-top: 12px;
  --ssc-bar-border: 2px solid rgba(0,0,0,.14);

  --ssc-pagination-color: #3f5060;
}

.ssc-slide{ position: relative; }
.ssc-slide.ssc-slide--hidden{ display:none !important; }

.entry-content .ssc-slide > *,
.entry-content .ssc-slide > .wp-block-group__inner-container > *{
  max-width: var(--ssc-slide-text-max);
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left: var(--ssc-slide-text-gutter);
  padding-right: var(--ssc-slide-text-gutter);
  box-sizing:border-box;
}

.entry-content .ssc-slide.wp-block-group,
.entry-content .ssc-slide.wp-block-group > .wp-block-group__inner-container{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ===== Media-Card ===== */
.ssc-media-card{
  position:relative;
  width:100%;
  border-radius: var(--ssc-media-radius);
  overflow:hidden;
  box-shadow: var(--ssc-media-shadow);
  background:#fff;
  padding:0 !important;
}

.ssc-media-card figure,
.ssc-media-card .wp-block-image{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  max-width:100% !important;
  display:block !important;
  border:0 !important;
}

.ssc-media-card .wp-block-html,
.ssc-media-card .wp-block-shortcode,
.ssc-media-card .wp-block-custom-html,
.ssc-media-card [data-ssc-media],
.ssc-media-card glomex-integration,
.ssc-media-card [id^="TargetVideo_"]{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}

.ssc-media-card img,
.ssc-media-card video,
.ssc-media-card iframe{
  width:100% !important;
  max-width:100% !important;
  height:auto;
  display:block;
  border-radius: inherit;
}

.ssc-media-card [id^="TargetVideo_"] iframe,
.ssc-media-card [id^="TargetVideo_"] video,
.ssc-media-card [id^="TargetVideo_"] > *{
  width:100% !important;
  max-width:100% !important;
  display:block !important;
}

.ssc-media-card figure{ line-height:0; }
.ssc-media-card img{ line-height:0; }

.ssc-media-card figcaption,
.ssc-media-card .wp-element-caption{
  display:none !important;
}

/* ===== Overlay Buttons ===== */
.ssc-bnav{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:20;
}

/* ✅ Hidden-State gewinnt IMMER (für erste/letzte Seite) */
.ssc-media-card .ssc-bnav__btn.ssc-bnav__btn--hidden{
  display:none !important;
}

.ssc-media-card .ssc-bnav__btn{
  pointer-events:auto !important;
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;

  width:var(--ssc-nav-btn) !important;
  height:var(--ssc-nav-btn) !important;
  min-width:var(--ssc-nav-btn) !important;
  min-height:var(--ssc-nav-btn) !important;

  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;

  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background:rgba(0,0,0,.55) !important;

  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  box-shadow:0 12px 26px rgba(0,0,0,.22) !important;

  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;

  opacity:.96 !important;

  font-size:0 !important;
  line-height:1 !important;
  text-decoration:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;

  transition: background .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease, border-color .18s ease !important;
}

.ssc-media-card .ssc-bnav__btn--prev{ left:14px !important; }
.ssc-media-card .ssc-bnav__btn--next{ right:14px !important; }

/* ✅ Hover/Fokus: blaugrün + Ring, damit auch auf dunklen Playern sichtbar */
.ssc-media-card .ssc-bnav__btn:hover,
.ssc-media-card .ssc-bnav__btn:focus-visible{
  background: var(--ssc-nav-hover) !important;
  border-color: var(--ssc-nav-hover-border) !important;
  opacity:1 !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.26),
    0 0 0 2px var(--ssc-nav-hover-ring) !important;
}

.ssc-media-card .ssc-bnav__btn:active{
  transform:translateY(-50%) scale(.98) !important;
  background: rgba(24, 132, 126, .96) !important;
}

.ssc-media-card .ssc-bnav__chev{
  width:16px !important;
  height:16px !important;
  border-right:5px solid #fff !important;
  border-bottom:5px solid #fff !important;
  transform:rotate(-45deg);
  display:block !important;
}
.ssc-media-card .ssc-bnav__btn--prev .ssc-bnav__chev{ transform:rotate(135deg); }

/* ===== Infobar ===== */
.entry-content .ssc-bbar{
  width:100%;
  margin: var(--ssc-bar-gap) 0 0 0;
  padding: var(--ssc-bar-padding-top) 0 0 0;
  border-top: var(--ssc-bar-border);
  display:flex;
  align-items:baseline;
  gap:12px;
  box-sizing:border-box;
}

.entry-content .ssc-bbar__cap{
  flex:1;
  min-width:0;
  font-size:12.5px;
  line-height:1.35;
  color:rgba(0,0,0,.58);
}

.entry-content .ssc-bbar__count{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:12.5px;
  color:rgba(0,0,0,.72);
}

.entry-content .ssc-bbar__count strong{
  font-weight:700;
  color:rgba(0,0,0,.88);
}

.entry-content .ssc-bbar--no-cap{ justify-content:flex-end; }
.entry-content .ssc-bbar--no-cap .ssc-bbar__cap{ display:none; }

/* ===== Pager ===== */
.single .entry-content .ssc-pager{
  margin: 26px 0 26px;
}

.single .entry-content .ssc-pager-prev-next{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin: 0 0 16px;
  gap:12px;
}

.single .entry-content .ssc-pager-prev-next.single-button{
  justify-content: center;
}

.single .entry-content .ssc-pager-prev-next a{
  display:inline-block;
  height: 44px;
  line-height: 44px !important;
  padding: 0 28px;
  border-radius: 999px;
  border: 2px solid var(--ssc-pagination-color);
  background: var(--ssc-pagination-color) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out;
}

.single .entry-content .ssc-pager-prev-next a:hover,
.single .entry-content .ssc-pager-prev-next a:focus,
.single .entry-content .ssc-pager-prev-next a:active{
  background: #323f4c !important;
  border-color: #323f4c !important;
  color:#fff !important;
  box-shadow:none !important;
}

.single .entry-content .ssc-pager-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap: 8px;
  margin: 0;
  font-size:0;
}

.single .entry-content .ssc-pager-links .ssc-pager-title{
  font-size:17px !important;
  font-weight:600;
  margin-right:6px;
  display:inline-block;
  color: var(--ssc-pagination-color);
  line-height: 1.2;
}

.single .entry-content .ssc-pager-links > a,
.single .entry-content .ssc-pager-links > span.ssc-pager-current{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding: 0 14px;
  border-radius:999px;
  border:2px solid var(--ssc-pagination-color);
  box-sizing:border-box;
  font-size:17px !important;
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
  background:#fff !important;
  color: var(--ssc-pagination-color) !important;
  line-height: 1 !important;
  transition: background .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
}

.single .entry-content .ssc-pager-links > a:hover{
  background: var(--ssc-pagination-color) !important;
  border-color: var(--ssc-pagination-color) !important;
  color:#fff !important;
}

.single .entry-content .ssc-pager-links > span.ssc-pager-current{
  background: var(--ssc-pagination-color) !important;
  border-color: var(--ssc-pagination-color) !important;
  color:#fff !important;
}

@media (max-width:600px){
  :root{
    --ssc-media-radius:16px;
    --ssc-nav-btn:64px;
    --ssc-bar-gap: 16px;
    --ssc-bar-padding-top: 12px;
  }
}

@media (max-width:480px){
  .single .entry-content .ssc-pager-prev-next{ gap:8px; }
  .single .entry-content .ssc-pager-prev-next a{
    height:40px;
    line-height:40px !important;
    padding: 0 22px;
    font-size:17px !important;
  }
  .single .entry-content .ssc-pager-links{ gap:6px; }
  .single .entry-content .ssc-pager-links > a,
  .single .entry-content .ssc-pager-links > span.ssc-pager-current{
    min-width:36px;
    height:36px;
    padding: 0 10px;
    font-size:16px !important;
  }
}