/* ===== HERO (Video + Buttons) ===== */
.custom-slider-background{
  position: relative;
  width: 100%;
  height: var(--hero-h);
  overflow: hidden;
  z-index: 1;
}
.custom-slider-background.edge-to-edge{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.custom-slider-background video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
}
.custom-slider-background::before{
  content: "";
  position: absolute; inset: 0;
  background-color: rgba(120, 0, 150, 0.30);
  z-index: 2;
  pointer-events: none;
}
.custom-text-container{
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding: 0 2%;
  text-align: center;
  z-index: 3;
}
.custom-text-container h1, .custom-text-container h2{
  margin: 0;
  color: #fff;
  font-weight: 400;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
}
.custom-text-container h1{
  font-size: 48px;
  line-height: 1.28;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}
.custom-text-container h2{
  font-size: 24px;
  line-height: 1.35;
  font-weight: 300;
  margin-bottom: 10px;
}
.custom-slider-container{
  position: absolute;
  left: 0; right: 0;
  bottom: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  text-align: center;
}
.custom-slider-actions{
  display:flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.custom-slider-button,
.custom-slider-button--secondary{
  display:inline-block;
  box-sizing:border-box;
  height: 52px;
  line-height: 52px;
  padding: 0 34px;
  font-size: 18px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration:none;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.22) !important;
  transition: transform .2s ease, filter .2s ease;
  white-space: nowrap;
  border:0;
}
.custom-slider-button:hover,
.custom-slider-button--secondary:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.custom-slider-button{
  background-image: linear-gradient(135deg,#b9f4ef,#2fbfb6) !important;
}
.custom-slider-button--secondary{
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(6px) !important;
  border: 2px solid #c58aff !important;
}
@media (max-width: 768px){
  :root{ --hero-h: 400px; }
  .custom-slider-background video{ transform: scale(1.2); }
  .custom-text-container{ top: 25%; padding: 0 5%; }
  .custom-text-container h1{ font-size: 32px; margin-bottom: 18px; }
  .custom-text-container h2{ font-size: 18px; }
  .custom-slider-button,
  .custom-slider-button--secondary{
    height: 46px;
    line-height: 46px;
    padding: 0 26px;
    font-size: 16px;
  }
  .custom-slider-container{ bottom: 25px !important; }
}

/* ===== STEPS (3 Karten) ===== */
.ss-glass-steps{ margin-top:-20px; }
.ss-glass-steps .slogan-container{
  position: relative;
  background: linear-gradient(160deg, rgba(58,196,190,.14), rgba(123,59,180,.14)), rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 16px !important;
  padding: 0px 5px !important;
  text-align: center;
  box-shadow: 0 14px 30px rgba(0,0,0,.20) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  color: #fff !important;
  overflow: hidden;
}
.ss-glass-steps .slogan-container::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(120deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 40%);
  mix-blend-mode: screen; opacity:.25;
}
.ss-glass-steps .slogan-text{
  font-family: 'Indie Flower', cursive;
  font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: .6px;
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.24);
}
.ss-glass-steps .main-title{
  text-align: center; font-size: 20px; font-weight: 600;
  color: #f9b874 !important; margin: 20px 0 18px;
}
.ss-glass-steps .product-cards1{
  display:flex; justify-content:center; align-items:stretch;
  gap:32px; flex-wrap:wrap; padding: 10px 4px;
}
.ss-glass-steps .product-card1{
  position: relative; width: 300px; min-height: 220px;
  background: linear-gradient(160deg, rgba(58,196,190,.16), rgba(123,59,180,.16)), rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.22) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  padding: 18px 18px 22px !important;
  text-align: left;
  color:#eaf3fb !important;
  overflow: hidden;
}
.ss-glass-steps .product-card1::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 28%);
  opacity:.7;
}
.ss-glass-steps .product-card1 h4{
  margin: 46px 0 10px; font-size: 18px; font-weight: 600; color:#fff !important;
}
.ss-glass-steps .product-card1 .content p{
  margin: 0; font-size: 16px; line-height: 1.55; color:#e6eff8 !important;
}
.ss-glass-steps .product-card1 .step-badge{
  position: absolute; top: 12px; right: 12px;
  width: 46px; height: 46px; border-radius: 999px !important;
  display: inline-flex; align-items:center; justify-content:center;
  font-size: 16px; font-weight: 900; color:#fff !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.25) !important;
  z-index: 2;
}
.ss-glass-steps .step-1 .step-badge{ background-image: linear-gradient(135deg,#b9f4ef,#2fbfb6) !important; }
.ss-glass-steps .step-2 .step-badge{ background-image: linear-gradient(135deg,#caa6f3,#7b3bb4) !important; }
.ss-glass-steps .step-3 .step-badge{ background-image: linear-gradient(135deg,#ffdca8,#ff9435) !important; }
@media (max-width: 768px){
  .ss-glass-steps .slogan-text{ font-size: 22px; }
  .ss-glass-steps .product-cards1{ gap:16px; }
  .ss-glass-steps .product-card1{ width:90%; }
}

/* ===== TEAM TEASER ===== */
.ss-teaser-alt .teaser-title{
  text-align:center; font-size:1.25em; font-weight:900;
  color:#fff !important; margin:8px 0 18px;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
}
.ss-teaser-alt .members{
  display:grid; gap:18px;
  grid-template-columns: 1fr;
  max-width: 900px; margin: 0 auto;
}
@media (min-width: 820px){
  .ss-teaser-alt .members{ grid-template-columns: 1fr 1fr; }
}
.ss-teaser-alt .member-card{
  position:relative; display:grid; grid-template-columns: 120px 1fr; gap:16px;
  align-items:center; padding:16px;
  border-radius:20px !important;
  background: linear-gradient(160deg, rgba(10,14,30,.35), rgba(22,26,52,.28)), rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.22) !important;
  overflow:hidden; color:#eaf3fb !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover:hover){
  .ss-teaser-alt .member-card:hover{ transform: translateY(-2px); box-shadow:0 20px 44px rgba(0,0,0,.28) !important; }
}
.ss-teaser-alt .member-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; opacity:.95;
  background: linear-gradient(var(--tone-deg,180deg), var(--tone-a), var(--tone-b));
}
.ss-teaser-alt .tone-turquoise{ --tone-a:#67dcd6; --tone-b:#35c0b8; }
.ss-teaser-alt .tone-violet{ --tone-a:#caa6f3; --tone-b:#7b3bb4; }
.ss-teaser-alt .avatar{
  width:120px; height:120px; border-radius:24px; overflow:hidden;
  background: rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.22) !important;
}
.ss-teaser-alt .avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.ss-teaser-alt .name{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:6px 0 6px;
}
.ss-teaser-alt .name .label{
  font-size:1.05em; font-weight:900; color:#fff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
}
.ss-teaser-alt .name .underline{
  flex:1 1 auto; height:2px; min-width:80px; border-radius:999px;
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.6), rgba(255,255,255,.0));
}
.ss-teaser-alt .role-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:.36rem .66rem; border-radius:999px !important; font-size:.86em; font-weight:800;
  color:#fff !important;
  background: linear-gradient(135deg, var(--tone-a), var(--tone-b)) !important;
  box-shadow:0 8px 16px rgba(0,0,0,.22) !important; border:0 !important;
}
.ss-teaser-alt .desc{ margin:8px 0 0; font-size:.98em; line-height:1.55; color:#e6eff8 !important; }
.ss-teaser-alt .teaser-divider{
  margin: 22px auto 0; width: 82%; height:1px; border:0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
}
@media (max-width: 600px){
  .ss-teaser-alt .member-card{ grid-template-columns: 96px 1fr; padding:14px; width: 90%; margin-left: 5%; }
  .ss-teaser-alt .avatar{ width:96px; height:96px; border-radius:18px; }
}

/* ===== PRODUCT CARDS (2 Stück) ===== */
.ss-cardglass .header-section{ text-align:center; margin-bottom:20px; margin-top:-20px; color:#fff; }
.ss-cardglass .header-section img{ width:41px; height:36px; margin:10px auto; display:block; }
.ss-cardglass .header-section p{ color:#e6eff8; margin:6px 0 0; }
.ss-cardglass .product-cards{
  display:flex; justify-content:center; align-items:stretch;
  gap:40px; flex-wrap:wrap; margin-top:20px;
}
.ss-cardglass .product-card{
  position:relative; width:300px; min-height:300px;
  background: linear-gradient(160deg, rgba(58,196,190,.16), rgba(123,59,180,.16)), rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding:20px; text-align:left; display:flex; flex-direction:column;
  overflow:visible; transition: box-shadow .2s ease, transform .2s ease;
}
@media(hover:hover){
  .ss-cardglass .product-card:hover{ transform: translateY(-2px); box-shadow:0 20px 44px rgba(0,0,0,.28); }
}
.ss-cardglass .product-card h3{
  font-size:20px; font-weight:600; color:#fff;
  margin:36px 0 10px;
}
.ss-cardglass .product-card .content{ display:flex; flex-direction:column; flex:1 1 auto; }
.ss-cardglass .product-card p{ color:#e6eff8; font-size:16px; margin:8px 0 12px; }
.ss-cardglass .type-banner{
  position:absolute; top:12px; left:12px;
  padding:.46rem .82rem; font-size:.84rem; font-weight:600; color:#fff !important;
  border-radius:999px !important;
  background: linear-gradient(90deg,#67dcd6,#35c0b8) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.18) !important;
  z-index: 3;
}
.ss-cardglass .product-card.ki-song .type-banner{
  background: linear-gradient(90deg,#ffd89e,#ff9a3b) !important;
}
.ss-cardglass .favorite-badge{
  position:absolute; top:10px; right:10px;
  height:32px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:999px; color:#4b3a00; font-weight:700; font-size:12px;
  background: linear-gradient(135deg,#ffe89a,#ffc84a) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  box-shadow:0 10px 18px rgba(0,0,0,.25) !important;
}
.ss-cardglass .favorite-badge::before{ content:"★"; color:#8a6b00; font-size:14px; }
.ss-cardglass .choose-btn{
  display:inline-block; align-self:flex-start;
  padding:12px 18px; border:none; border-radius:999px;
  font-size:16px; color:#fff; text-decoration:none; font-weight:600;
  box-shadow:0 12px 26px rgba(0,0,0,.22);
  transition: transform .2s ease, filter .2s ease;
  margin-top:auto;
}
.ss-cardglass .choose-btn:hover{ transform: translateY(-1px); filter:brightness(1.05); }
.ss-cardglass .individueller-song .choose-btn{ background: linear-gradient(135deg,#caa6f3,#7b3bb4); }
.ss-cardglass .ki-song .choose-btn{ background: linear-gradient(135deg,#ffdca8,#ff9435); }
.ss-cardglass .individueller-song{
  background-image:url('https://songstory.de/media/image/36/7c/c4/note_2_trans2.png');
  background-repeat:no-repeat; background-position:100% 100%; background-size:100px auto;
}
@media (max-width: 768px){
  .ss-cardglass .product-cards{ flex-direction:column; gap:24px; align-items:center; }
  .ss-cardglass .product-card{ width:90%; min-height:unset; }
}

/* ===== TESTIMONIALS ===== */
.ss-testimonials-contrast{ margin:36px 0; }
.ss-testimonials-contrast .testimonial-container{
  max-width:1100px; margin:0 auto; text-align:center; color:#fff; padding:0 16px;
}
.ss-testimonials-contrast .divider{
  width:82%; height:1px; margin:6px auto 18px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
}
.ss-testimonials-contrast .title{
  font-size:20px; font-weight:900; margin:0 0 6px;
  color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.25);
}
.ss-testimonials-contrast .soft-intro{
  font-size:16px; color:#e6eff8; opacity:.9; margin-bottom:14px;
}
.ss-testimonials-contrast .cards{
  display:grid; gap:18px; grid-template-columns:1fr;
}
@media (min-width: 900px){
  .ss-testimonials-contrast .cards{ grid-template-columns: repeat(12, 1fr); }
  .ss-testimonials-contrast .card.featured{ grid-column: 1 / -1; }
  .ss-testimonials-contrast .card.compact{ grid-column: span 6; }
}
.ss-testimonials-contrast .card{
  position:relative; text-align:left; padding:22px 20px 18px;
  border-radius:16px;
  background: linear-gradient(160deg, rgba(10,14,30,.55), rgba(22,26,52,.45)) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.28) !important;
  overflow:hidden;
}
.ss-testimonials-contrast .card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; opacity:.95;
  background: linear-gradient(var(--tone-deg,180deg), var(--tone-a), var(--tone-b));
}
.ss-testimonials-contrast .tone-violet{ --tone-a:#caa6f3; --tone-b:#7b3bb4; }
.ss-testimonials-contrast .tone-turquoise{ --tone-a:#67dcd6; --tone-b:#35c0b8; }
.ss-testimonials-contrast .tone-orange{ --tone-a:#ffd89e; --tone-b:#ff9435; }
.ss-testimonials-contrast .quote-mark{
  position:absolute; top:-10px; right:12px; font-size:64px;
  color:rgba(255,255,255,.14); font-family:Georgia, serif; line-height:1;
}
.ss-testimonials-contrast .stars{
  font-size:14px; margin-bottom:8px; letter-spacing:1px;
  background: linear-gradient(90deg,#ffd89e,#ff9435);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ss-testimonials-contrast .card p{ font-size:16px; line-height:1.6; color:#e6eff8; margin:6px 0 10px; }
.ss-testimonials-contrast .name{ font-weight:900; color:#fff; margin-top:8px; }
.ss-testimonials-contrast .location{ display:block; font-size:.92em; color:rgba(255,255,255,.78); }
.ss-testimonials-contrast .card.featured{ padding:28px 26px 24px; }
.ss-testimonials-contrast .card.featured p{ font-size:18px; line-height:1.7; }

/* ===== LIVE VIDEOS ===== */
.live-videos-wrapper{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:30px;
  padding: 60px 20px;
  background:none;
}
.video-thumb{
  position:relative;
  width:480px;
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  transition: transform .3s, box-shadow .3s;
}
.video-thumb:hover{
  transform: scale(1.02);
  box-shadow: 0 0 25px rgba(255,255,255,0.25);
}
.video-thumb::before{ content:""; display:block; padding-top:100%; }
.video-thumb > *{ position:absolute; inset:0; }
.video-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:20px;
}
.play-overlay{
  width:64px; height:64px;
  background: var(--primary);
  border-radius:50%;
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}
.play-triangle{
  width:0; height:0; margin-left:4px;
  border-left:16px solid white;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}
@media (max-width: 1029px){
  .video-thumb{ width:45%; max-width:420px; }
}
@media (max-width: 768px){
  .video-thumb{ width:100%; max-width:340px; }
}