:root{
  --oc-glass: rgba(255,255,255,0.14);
  --oc-glass-2: rgba(255,255,255,0.10);
  --oc-border: rgba(255,255,255,0.18);
  --oc-text: rgba(255,255,255,0.92);
  --oc-muted: rgba(255,255,255,0.68);
  --oc-shadow: 0 18px 60px rgba(0,0,0,0.35);
  --oc-primary: #6a46ff;
  --oc-primary-2:#c850bb;
}

.oc-hero{
  position:relative;
  min-height: 520px;
  padding: 56px 22px;
  background-size: cover;
  background-position: center;
  border-radius: 0; /* Headerbild ohne abgerundete Ecken */
  overflow:hidden;
  color: var(--oc-text);
}

.oc-hero__overlay{ position:absolute; inset:0; pointer-events:none; }

.oc-hero__inner{
  position:relative;
  max-width: 1200px;
  margin: 0 auto;
  display:flex;
  gap: 26px;
  align-items: stretch;
}

.oc-hero__left{ flex: 1 1 58%; padding: 18px 8px; }
.oc-hero__right{ flex: 1 1 42%; min-width: 360px; display:flex; }

.oc-hero__eyebrow{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin-bottom: 16px;
}

.oc-hero__headline{
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  margin: 0 0 14px 0;
  text-shadow: 0 8px 26px rgba(0,0,0,0.35);
}

.oc-hero__text{
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  margin: 0 0 18px 0;
}

.oc-hero__buttons{ display:flex; flex-wrap:wrap; gap: 10px; margin: 18px 0 14px; }

.oc-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 600;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.oc-btn--primary{
  background: linear-gradient(135deg, var(--oc-primary), var(--oc-primary-2));
  border-color: rgba(255,255,255,0.22);
  color: #fff;
}
.oc-btn--ghost{ background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.92); }

.oc-hero__tags{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 12px; }

.oc-tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.82);
  font-size: 13px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.oc-panel{
  width:100%;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08));
  border: 1px solid var(--oc-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--oc-shadow);
  padding: 18px;
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.oc-panel__kicker{ font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.oc-panel__title{ font-weight: 800; font-size: 18px; margin-top: 6px; }
.oc-panel__subtitle{ font-size: 13px; color: rgba(255,255,255,0.70); margin-top: 2px; }

.oc-tracks{ display:flex; flex-direction:column; gap: 14px; }
.oc-track__meta{ margin-bottom: 8px; }
.oc-track__title{ font-weight: 800; font-size: 14px; }
.oc-track__sub{ color: rgba(255,255,255,0.68); font-size: 12px; margin-top: 2px; }

.oc-player{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
}

.oc-iconbtn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.92);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.oc-iconbtn:hover{ background: rgba(0,0,0,0.26); }

.oc-progress{
  position:relative;
  flex: 1 1 auto;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  overflow:hidden;
}
.oc-progress__bar{
  position:absolute; inset:0;
  width:0%;
  background: linear-gradient(90deg, var(--oc-primary), var(--oc-primary-2));
}
.oc-progress__range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }

.oc-buy{
  margin-left: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--oc-primary), var(--oc-primary-2));
  color:#fff;
  text-decoration:none;
  font-weight: 800;
  white-space:nowrap;
}
.oc-buy--disabled{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.64);
}

.oc-muted{ color: rgba(255,255,255,0.70); font-size: 13px; }

@media (max-width: 980px){
  .oc-hero__inner{ flex-direction: column; }
  .oc-hero__right{ min-width: 0; }
  .oc-hero{ padding: 34px 16px; }
}


/* Ensure Dashicons render even if theme overrides icon fonts */
.dashicons{font-family:dashicons !important; font-size:18px; width:auto; height:auto; line-height:1;}
.oc-btn .dashicons, .oc-tag .dashicons{font-size:18px;}