:root{
  --bg:#07080a;
  --fg:#f5f6f7;
  --muted:rgba(245,246,247,.72);
  --faint:rgba(245,246,247,.55);
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.14);
  --glass:rgba(17,19,24,.46);
  --glass2:rgba(17,19,24,.62);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 26px;
  --radius2: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background:var(--bg);
  overflow-x:hidden;
}

/* Legal pages: keep footer at the bottom (match main site) */
.pageLegal{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
.pageLegal .wrap.legal{
  flex:1;
  display:flex;
  flex-direction:column;
  /* override the default big bottom padding so the footer can sit at the bottom */
  padding-bottom: 22px;
}
.pageLegal .footer{margin-top:auto;}

/* Datenschutz/Privacy: same layout, a touch more air for long paragraphs */
.pagePrivacy .wrap.legal{ padding-bottom: 28px; }







/* iPad / iPadOS: prevent hero head crop + respect safe area */
@media only screen and (min-width: 768px) and (max-width: 1024px){
  .heroMedia{inset:-10px -60px 0 -60px}
  .heroImg{object-position:60% 18%; transform:scale(1.0)}
}

/* iPad Pro (landscape) + larger iPads: keep the face in frame */
@media (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse){
  .heroMedia{inset:-22px -80px 0 -80px !important;}
  .heroImg{object-position:72% 18% !important; transform:scale(1.0) !important;}
}

/* Fallback: any touch tablet in that range (some iPadOS report pointer differently) */
@media (min-width: 768px) and (max-width: 1366px) and (hover: none){
  .heroImg{object-position:60% 18%;}
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.92}

.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
.bgHero{
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(1200px 900px at 20% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 700px at 75% 20%, rgba(120,140,255,.10), transparent 60%),
    radial-gradient(900px 700px at 50% 80%, rgba(255,150,120,.08), transparent 60%),
    linear-gradient(180deg, rgba(7,8,10,0) 0%, rgba(7,8,10,.85) 70%, rgba(7,8,10,1) 100%);
  filter:saturate(1.05) contrast(1.05);
}
.bgVignette{
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 800px at 50% 20%, transparent 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.78) 100%);
}
.bgGrain{
  position:absolute;
  inset:-20%;
  opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  transform:translate3d(0,0,0);
  animation: grain 7.5s steps(2,end) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  10%{transform:translate(-2%, -3%)}
  20%{transform:translate(-4%, 1%)}
  30%{transform:translate(3%, -2%)}
  40%{transform:translate(2%, 4%)}
  50%{transform:translate(-3%, 2%)}
  60%{transform:translate(-1%, -4%)}
  70%{transform:translate(4%, 1%)}
  80%{transform:translate(-2%, 3%)}
  90%{transform:translate(1%, -2%)}
  100%{transform:translate(0,0)}
}
.bgLines{
  position:absolute;
  inset:0;
  opacity:.12;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,0) 80%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 38px);
  mask-image: radial-gradient(900px 520px at 55% 12%, black 0%, transparent 72%);
}

.wrap{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
  /* Account for iOS/iPadOS safe area (fixed topbar) */
  padding:calc(86px + env(safe-area-inset-top)) 0 60px;
}

.topbar{
  position:fixed;
  top:calc(16px + env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  width:min(1120px, calc(100% - 26px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 12px;
  z-index:50;

  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,11,14,.38);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-radius:999px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
}
.brandMark{
  width:18px;height:18px;object-fit:contain;opacity:.92;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}
.brandName{
  font-weight:650;
  letter-spacing:.14em;
  font-size:12px;
  opacity:.92;
}
.nav{
  display:flex;
  gap:18px;
  font-size:13px;
  opacity:.84;
}
.nav a{padding:8px 10px;border-radius:999px}
.nav a:hover{background:rgba(255,255,255,.06)}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  font-size:12px;
  letter-spacing:.02em;
  color:rgba(255,255,255,.88);
}
.chipGhost{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.10);
}

.hero{
  position:relative;
  min-height: calc(100svh - 120px);
  display:grid;
  align-items:center;
  padding:18px 0 0;
}
.heroMedia{
  position:absolute;
  inset:-40px -80px 0 -80px;
  overflow:hidden;
  border-radius: 36px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}
.heroImg{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform:none;
  filter: saturate(1.05) contrast(1.06);
}
.heroMedia::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 600px at 30% 30%, rgba(0,0,0,.12), rgba(0,0,0,.72) 70%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.82));
}

.heroGlass{
  position:relative;
  width:min(640px, 92%);
  padding:26px 26px 22px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(20,22,28,.38), rgba(10,11,14,.56));
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
}

.heroTop{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.kicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.80);
}
.metaRow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:rgba(255,255,255,.70);
}
.metaDot{
  width:7px;height:7px;border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:0 0 0 6px rgba(255,255,255,.07);
}
.metaSep{opacity:.5}
.metaLink{
  color:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.metaLink:hover{border-bottom-color:rgba(255,255,255,.32)}

.heroTitle{
  margin:18px 0 10px;
  font-size: clamp(42px, 6.2vw, 72px);
  line-height: .92;
  letter-spacing: .04em;
  font-weight: 780;
}
.heroCopy{
  margin:0 0 18px;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
  max-width: 52ch;
}
.heroActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size:13px;
  letter-spacing:.02em;
}
.btn.primary{
  background: rgba(255,255,255,.92);
  color: rgba(10,11,14,.98);
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 14px 44px rgba(0,0,0,.45);
}
.btn.primary:hover{transform: translateY(-1px)}
.btn.ghost{
  background: rgba(255,255,255,.06);
}
.btn:hover{
  background: rgba(255,255,255,.10);
}
.heroBadges{
  margin-top:14px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.badge{
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
}

.scrollHint{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  opacity:.85;
}
.scrollPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:72px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
  animation: floaty 2.2s ease-in-out infinite;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

.section{
  padding: 52px 0 14px;
}
.sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}
.sectionHead h2{
  margin:0;
  font-size: 24px;
  letter-spacing:.015em;
}
.sectionHead p{
  margin:0;
  color: rgba(255,255,255,.68);
  max-width: 54ch;
  font-size: 13.5px;
  line-height: 1.5;
}

/* Stacked section head (VIP uses this to avoid "floating" right text) */
.sectionHead.stack{
  display:block;
}
.sectionHead.stack p{
  margin-top: 6px;
  max-width: 72ch;
}


.glassCard{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(20,22,28,.34), rgba(10,11,14,.60));
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: var(--shadow);
}

.soundGrid{
  display:grid;
  grid-template-columns: 1.35fr .85fr;
  gap:16px;
}
.soundCard{padding: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);

  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.soundCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  background: rgba(0,0,0,.42);
  box-shadow: 0 18px 60px rgba(0,0,0,.52);
}

.soundFrame iframe{display:block; filter: brightness(.72) contrast(1.08) saturate(.92); }
.soundFrame:hover iframe{filter: brightness(.82) contrast(1.08) saturate(.95); }
.soundFooter{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 2px 2px;
}

.signatureCard{padding:18px}
.sigPills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.sigTitle{margin:0 0 8px;font-size:20px;letter-spacing:.02em}
.sigCopy{margin:0 0 14px;color:rgba(255,255,255,.70);line-height:1.55;font-size:13.5px}
.sigFields{display:grid;grid-template-columns:1fr;gap:10px}
.sigField{padding:12px 12px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.sigLabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.sigValue{margin-top:4px;font-size:13px;color:rgba(255,255,255,.86)}


.manifesto{
  padding:18px 18px 16px;
}
.pillRow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.pill{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-size:11px;
  color: rgba(255,255,255,.74);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.manifesto h3{
  margin:0 0 8px;
  font-size:18px;
  letter-spacing:.02em;
}
.manifesto p{
  margin:0 0 12px;
  color: rgba(255,255,255,.70);
  line-height:1.55;
  font-size:13.5px;
}
.miniFacts{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.miniFact{
  padding:12px 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.miniLabel{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,.62);
}
.miniValue{
  margin-top:4px;
  font-size:13px;
  color: rgba(255,255,255,.86);
}

.aboutGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:stretch;
}
.aboutMedia{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}
.aboutImg{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.04);
  filter: saturate(1.05) contrast(1.04);
}
.aboutOverlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 520px at 30% 30%, rgba(0,0,0,.18), rgba(0,0,0,.72) 70%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.55));
}
.aboutCard{
  padding:20px 20px 18px;
}
.aboutTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.aboutCard h3{margin:0;font-size:18px;letter-spacing:.08em}
.monoTag{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(255,255,255,.68);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.aboutCard p{
  margin:0 0 10px;
  color: rgba(255,255,255,.74);
  line-height:1.6;
  font-size:13.5px;
}
.aboutChips{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

.bookingGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
}
.bookingCard{padding:18px}
.bookingTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.bookingTitle{
  font-weight:680;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:12px;
  color: rgba(255,255,255,.86);
}
.bookingHint{
  font-size:12px;
  color: rgba(255,255,255,.60);
}
.bookingForm .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.bookingForm label{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.bookingForm label span{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,.64);
}
input,textarea{
  font: inherit;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding:12px 12px;
  outline:none;
}
input:focus,textarea:focus{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
}
textarea{resize:vertical;min-height:110px}
.grow{grid-column:span 1}
.formActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.fineprint{
  margin-top:12px;
  font-size:12px;
  color: rgba(255,255,255,.58);
  line-height:1.5;
}

.contactCard{padding:18px}
.contactTitle{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(255,255,255,.80);
  margin-bottom:12px;
}
.contactRows{display:flex;flex-direction:column;gap:10px}
.contactRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.contactRow .label{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,.60);
}
.contactRow .value{
  color: rgba(255,255,255,.88);
  font-size:13px;
}
.contactBottom{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}


/* VIP contact section (single row, like main site footer/contact style) */
.contactCardSimple{
  padding: 20px 22px;
  border-radius: 26px;
}
.contactRowSimple{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.contactRowSimple + .contactRowSimple{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Contact hard overrides (keep row on desktop) */
#contact .contactRowSimple{ display:flex !important; }
#contact .contactMail{ justify-self:flex-end; }
.contactLabel{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,.72);
}
.contactMail{
  white-space:nowrap;
}

@media (max-width: 640px){
  .contactCardSimple{padding: 16px 16px}
  .contactRowSimple{flex-direction:column;align-items:flex-start}
  .contactMail{align-self:stretch;text-align:center}
}

/* QR contact (clean, no glass) */
.contactQrGlass{
  display:block;
  width: fit-content;
  margin: 18px auto 10px;
  padding: 0;
  border-radius: 0;
  text-align:center;
  text-decoration:none;
}
.contactQrGlass img{
  width: 118px;
  height: 118px;
  display:block;
  margin: 0 auto 10px;
  border-radius: 18px;
  background:#fff;
}
.contactQrLabel{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
@media (max-width: 600px){
  .contactQrGlass img{width: 132px; height: 132px}
}

.footer{
  /* Keep footer aligned with the main layout on ALL pages (incl. legal pages). */
  width:min(1120px, calc(100% - 40px));
  margin:34px auto 0;
  padding:18px 0 0;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.footerName{
  font-weight:720;
  letter-spacing:.14em;
  font-size:12px;
  opacity:.9;
}
.footerSub{
  margin-top:6px;
  color: rgba(255,255,255,.62);
  font-size:12px;
}
.footerRight{display:flex;gap:14px;color: rgba(255,255,255,.62);font-size:12px}
.footerRight a:hover{color: rgba(255,255,255,.86)}

/* Footer button should feel like a link (for SoundCloud consent reset) */
.footerLink{
  appearance:none;
  border:0;
  background:transparent;
  color: inherit;
  padding:0;
  font: inherit;
  cursor:pointer;
}
.footerLink:hover{color: rgba(255,255,255,.86)}

/* SoundCloud embeds (simple, stable, no custom player logic) */
.scSets{display:grid;gap:14px}
.scTabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.scTab{cursor:pointer}
.scStage{position:relative}
.scStage .scSet{display:none}
.scStage .scSet.isActive{display:block}
.scStage .scSet[hidden]{display:none !important}
.scSet{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:18px;overflow:hidden}
.scSetHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.scSetTitle{font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.scSetLink{font-size:12px;opacity:.72}
.scSetLink:hover{opacity:.92}
.scFrame{position:relative;width:100%;height:420px}
.scFrame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 2-click gate for embedded SoundCloud (no auto-loading) */
.scGate{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(7,8,10,.72);backdrop-filter: blur(12px);}
.scGate[hidden]{display:none !important}
.scGateCard{width:min(520px, 92%);border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(12,13,16,.70);box-shadow: var(--shadow);padding:16px 16px 14px;text-align:center;}
.scGateTitle{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:10px;}
.scGateText{color:rgba(255,255,255,.74);font-size:13px;line-height:1.45;margin:0 0 12px;}
.scFrame.isLoaded .scGate{display:none}

@media (min-width: 920px){
  .scFrame{height:460px}
}

@media (max-width: 920px){
  .soundGrid{grid-template-columns:1fr}
  .aboutGrid{grid-template-columns:1fr}
  .bookingGrid{grid-template-columns:1fr}
  .topbar{top:calc(10px + env(safe-area-inset-top))}
  .nav{display:none}
  .heroMedia{inset:-20px -20px 0 -20px}
}
@media (max-width: 520px){
  .heroImg{object-position:78% 14%; transform:scale(1.0)}
  .wrap{width:calc(100% - 22px);padding-top:calc(78px + env(safe-area-inset-top))}
  .heroGlass{padding:18px}
  .bookingForm .row{grid-template-columns:1fr}
}

.reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.in{
  opacity:1;
  transform: translateY(0);
}

/* Legal pages */
.legal{max-width:980px;margin:0 auto;padding:110px 20px 70px}
.legal h1{font-size:44px;letter-spacing:-.03em;margin:0 0 10px}
.legalSub{color:rgba(255,255,255,.72);margin:0 0 22px}
.legalCard{
  padding:22px 22px 18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(12,13,16,.55);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.legalCard h2{margin:18px 0 8px;font-size:16px;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.legalCard p{margin:0 0 12px;color:rgba(255,255,255,.86);line-height:1.55}
.legalHint{margin:14px 0 0;color:rgba(255,255,255,.62);font-size:13px;line-height:1.5}



}

/* SoundCloud embed (styled to match RG Glass) */
.scWrap{
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: rgba(10,12,18,.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.scWrap::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(700px 420px at 90% 0%, rgba(255,120,60,.10), transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.12));
  pointer-events:none;
  opacity: .9;
}
.scWrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 6px 6px;
  opacity:.05;
  pointer-events:none;
}
.scFrame{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 310px;
  border: 0;
  display: block;
  /* Trick: SoundCloud UI in dark, damit es ins Glass-Design passt */
  filter: none;
  opacity: .96;
}
@media (max-width: 860px){
  .scFrame{ height: 280px; }
}


/* RG custom SoundCloud player (sexy, dark, stable) */
.rgPlayer{position:relative;border-radius:18px;overflow:hidden;background:rgba(10,12,18,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);}
.rgPlayer::before{content:"";position:absolute;inset:-40px;background:radial-gradient(900px 420px at 20% 10%, rgba(255,255,255,.10), transparent 60%),radial-gradient(700px 420px at 90% 0%, rgba(186,140,110,.14), transparent 55%),linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.10));pointer-events:none;opacity:.95;}
.rgPlayer::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);background-size:6px 6px;opacity:.05;pointer-events:none;}

.rgPlayerHeader{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 0;}
.rgPlayerTabs{display:flex;gap:8px;flex-wrap:wrap;}
.rgTab{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.78);border-radius:999px;padding:8px 12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease;}
.rgTab:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.90)}
.rgTab.isActive{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.95)}

.rgOut{color:rgba(255,255,255,.62);font-size:12px;border-bottom:1px solid rgba(255,255,255,.14);text-decoration:none;white-space:nowrap;}
.rgOut:hover{color:rgba(255,255,255,.88);border-bottom-color:rgba(255,255,255,.28)}

.rgPlayerMain{position:relative;z-index:1;display:grid;grid-template-columns:220px 1fr;gap:16px;padding:16px;}

/* SoundCloud Widget (only as audio engine, never visible) */
.rgWidget{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.rgCover{
  border-radius:16px;
  width:100%;
  aspect-ratio:1 / 1;
  /* show the full artwork (no cropping) */
  background-color: rgba(0,0,0,.28);
  --rg-art: none;
  /* artwork + subtle glass tint */
  background-image:
    var(--rg-art),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  position:relative;
  overflow:hidden;
}
.rgCover::after{content:"";position:absolute;inset:0;background:radial-gradient(180px 180px at 20% 20%, rgba(255,255,255,.14), transparent 60%),linear-gradient(to top, rgba(0,0,0,.55), transparent 55%);opacity:.9;}

.rgMeta{display:flex;flex-direction:column;justify-content:center;min-width:0;}
.rgTitle{font-weight:800;letter-spacing:-.01em;font-size:18px;line-height:1.2;color:rgba(255,255,255,.95);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rgSub{margin-top:6px;color:rgba(255,255,255,.70);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.rgControls{margin-top:12px;display:flex;align-items:center;gap:10px;}
.rgBtn{width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);cursor:pointer;display:grid;place-items:center;transition:transform .12s ease, background .18s ease, border-color .18s ease;}
.rgBtn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
.rgBtn:active{transform:translateY(1px)}

.rgIcon{display:block;width:16px;height:16px;position:relative;}
.rgIconPlay::before{content:"";position:absolute;left:5px;top:2px;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent rgba(255,255,255,.92);}
.rgIconPause::before,.rgIconPause::after{content:"";position:absolute;top:2px;width:4px;height:12px;background:rgba(255,255,255,.92);border-radius:2px;}
.rgIconPause::before{left:3px;}
.rgIconPause::after{left:9px;}
.rgIconNext::before,.rgIconNext::after{content:"";position:absolute;top:2px;border-style:solid;border-width:6px 0 6px 8px;border-color:transparent transparent transparent rgba(255,255,255,.88);}
.rgIconNext::before{left:2px;}
.rgIconNext::after{left:8px;opacity:.78}

.rgTime{margin-left:auto;color:rgba(255,255,255,.62);font-size:12px;letter-spacing:.06em;white-space:nowrap;}
.rgTime .rgSep{opacity:.5;margin:0 6px;}

.rgSeek{margin-top:12px;width:100%;appearance:none;height:3px;border-radius:999px;background:rgba(255,255,255,.10);outline:none;}
.rgSeek::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid rgba(0,0,0,.18);box-shadow:0 8px 16px rgba(0,0,0,.35);}
.rgSeek::-moz-range-thumb{width:14px;height:14px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid rgba(0,0,0,.18);box-shadow:0 8px 16px rgba(0,0,0,.35);}

/* Track list (when playlists have multiple songs) */
.rgTrackList{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
  max-height:180px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.rgTrackItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  transition:background .18s ease,border-color .18s ease,color .18s ease;
  user-select:none;
}
.rgTrackItem + .rgTrackItem{margin-top:8px;}
.rgTrackItem:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.92)}
.rgTrackItem.isActive{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.95)}
.rgTrackTitle{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;}
.rgTrackTime{flex:0 0 auto;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.55)}

/* IMPORTANT: do NOT use display:none for the widget iframe.
   SoundCloud's Widget API needs the iframe to exist in the render tree.
   We keep it fully hidden via offscreen positioning above. */

@media (max-width: 680px){
  .rgPlayerMain{grid-template-columns:1fr;}
  .rgCover{max-width:320px;margin:0 auto;}
}


.topbarRight{display:flex;align-items:center;gap:10px;}
.langToggle{min-width:auto;text-align:center;display:flex;align-items:center;gap:6px;padding-left:14px;padding-right:14px;}
.langToggle .langSep{opacity:.45;font-size:12px;letter-spacing:.12em;}
.langToggle .langOpt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.65;transition:opacity .18s ease, transform .18s ease;}
.langToggle .langOpt.isActive{opacity:1;font-weight:700;transform:translateY(-0.5px);}
.rgChip{padding-left:14px;padding-right:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}


.aboutP{margin:0 0 10px;color:rgba(255,255,255,.74);line-height:1.6;font-size:13.5px}
.aboutP.lead{color:rgba(255,255,255,.86)}
.appearances{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.appearTitle{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.appearCopy{
  margin-top:6px;
  color:rgba(255,255,255,.78);
  font-size:13px;
}
.appearLink{
  display:inline-block;
  margin-top:10px;
  color:rgba(255,255,255,.72);
  font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.appearLink:hover{color:rgba(255,255,255,.90);border-bottom-color:rgba(255,255,255,.30)}


/* VIP PAGE — layout polish */
.vipGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
  align-items:start;
}
@media (max-width: 980px){
  .vipGrid{ grid-template-columns: 1fr; }
}

.vipCard, .vipPriceCard{
  padding: 18px;
}
/* Make cards feel more premium */
.vipCard.glassCard, .vipPriceCard.glassCard, .contactCard.glassCard{
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 14px 44px rgba(0,0,0,.55);
}

.vipH3{
  margin: 6px 0 8px;
  font-size: 20px;
  letter-spacing: .02em;
}
.vipList{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.86);
  line-height: 1.55;
}
.vipList li{ margin: 6px 0; }

.vipPriceCard{
  position: relative;
  overflow: hidden;
}
.vipPriceCard:before{
  content:'';
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius: inherit;
  background: radial-gradient(900px 220px at 20% 0%, rgba(255,255,255,.08), transparent 60%);
  opacity:.9;
}

.priceBadge{
  position:absolute;
  top: 14px;
  right: 14px;
  z-index:2;
}

.vipPriceTop{ margin-top: 6px; }
.vipPriceTitle{ font-size: 16px; font-weight: 650; }
.vipPriceSub{ color: rgba(255,255,255,.70); font-size: 13px; margin-top: 2px; }

.vipAmountRow{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin: 14px 0 8px;
}
.vipAmount{
  font-size: 44px;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1;
}
.vipPer{ color: rgba(255,255,255,.65); font-size: 14px; padding-bottom: 6px; }

.vipDesc{ color: rgba(255,255,255,.76); line-height: 1.55; max-width: 56ch; }

.vipActions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }
.vipMiniChips{ margin-top: 12px; }

.vipOptional{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}


/* FAQ wrapper — one elegant card like FULL3 */
.faqCard{
  padding: 18px;
  max-width: 920px;
}
@media (max-width: 640px){
  .faqCard{ padding: 16px; }
}

/* FAQ — turn into real "cards" */
.faqStack{
  display:grid;
  gap: 8px;
  margin-top: 0;
}
.faqItem{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  overflow:hidden;
}
.faqItem:hover{ border-color: rgba(255,255,255,.16); background: rgba(0,0,0,.36); }
.faqItem summary{
  cursor:pointer;
  list-style:none;
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  font-weight: 650;
  font-size: 14px;
  letter-spacing: .01em;
  color: rgba(255,255,255,.92);
}
.faqItem summary::marker{ content:""; }
.faqItem summary::-webkit-details-marker{ display:none; }

/* FAQ hard overrides (avoid browser default markers) */
#faq details > summary::-webkit-details-marker{ display:none !important; }
#faq details > summary::marker{ content:"" !important; }
#faq details{ list-style:none; }
.faqItem summary:after{
  content: '›';
  opacity: .65;
  transform: rotate(90deg);
  transition: transform .18s ease, opacity .18s ease;
  font-size: 20px;
  line-height: 1;
}
.faqItem[open] summary:after{
  transform: rotate(-90deg);
  opacity: .95;
}
.faqBody{
  padding: 0 14px 14px 14px;
  color: rgba(255,255,255,.76);
  line-height: 1.6;
  font-size: 13.5px;
  max-width: 78ch;
}

.contactCard{
  margin-top: 16px;
  padding: 16px 18px;
}



/* VIP page — align with FULL layout */
.vipGrid2{ grid-template-columns: 1.15fr .85fr; }
@media (max-width: 980px){
  .vipGrid2{ grid-template-columns: 1fr; }
}
.vipBenefitCard h3{ margin-top: 6px; }

.vipBullets{
  margin: 12px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.88);
  line-height: 1.6;
  font-size: 14px;
}
.vipBullets li{ margin: 8px 0; }

.vipTopRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.vipPriceLine{
  margin-top: 6px;
  display:flex;
  align-items:baseline;
  gap:6px;
  font-weight: 760;
  letter-spacing: -0.02em;
}
.vipEuro{ font-size: 18px; opacity:.9; padding-bottom: 4px; }
.vipNum{ font-size: 40px; line-height: 1; }
.vipPer2{ font-size: 14px; color: rgba(255,255,255,.70); padding-bottom: 6px; font-weight: 600; letter-spacing: 0; }

.vipActions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }
.vipSupport{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.vipSupportCopy{ margin-top: 6px; color: rgba(255,255,255,.78); font-size: 13.5px; line-height: 1.55; }


/* ACCESS — Backstage / Private Listening */
.accessGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:stretch;
}
@media (max-width: 980px){
  .accessGrid{ grid-template-columns: 1fr; }
}

.accessCard{
  padding: 20px;
  overflow:hidden;
  position:relative;
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 14px 44px rgba(0,0,0,.55);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.accessCard:before{
  content:'';
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius: inherit;
  background: radial-gradient(900px 260px at 20% 0%, rgba(255,255,255,.08), transparent 60%);
  opacity:.85;
}
.accessCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 60px rgba(0,0,0,.62);
}

.accessTop{ position:relative; z-index:1; }
.accessKicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.accessTitle{
  margin: 12px 0 8px;
  font-size: 22px;
  letter-spacing: .01em;
}
.accessSub{
  margin: 0;
  color: rgba(255,255,255,.70);
  line-height: 1.55;
  font-size: 13.5px;
  max-width: 56ch;
}

.accessList{
  position:relative;
  z-index:1;
  margin: 14px 0 0;
  padding: 0;
  list-style:none;
}
.accessList li{
  position:relative;
  padding-left: 18px;
  margin: 10px 0;
  color: rgba(255,255,255,.90);
  line-height: 1.5;
  font-size: 13.5px;
}
.accessList li:before{
  content:'';
  position:absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 0 0 3px rgba(255,255,255,.07);
}

.accessActions{
  position:relative;
  z-index:1;
  margin-top: 14px;
}
.accessNote{
  position:relative;
  z-index:1;
  margin-top: 12px;
  max-width: 70ch;
}