*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:#070311;color:#fff;line-height:1.6;overflow-x:hidden}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}
.site-bg{position:fixed;inset:0;background:radial-gradient(circle at 20% 10%, rgba(236,72,153,.20), transparent 30%),radial-gradient(circle at 85% 20%, rgba(56,189,248,.16), transparent 24%),radial-gradient(circle at 50% 80%, rgba(168,85,247,.12), transparent 30%),linear-gradient(180deg,#13041e 0%,#070311 55%,#05020d 100%);z-index:-2}
.site-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent 85%);opacity:.18}
.container{width:min(1180px,calc(100% - 40px));margin:0 auto}
.section{padding:88px 0}
.section-alt{background:rgba(255,255,255,.025);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}

.site-header{position:sticky;top:0;z-index:20;background:rgba(7,3,17,.55);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.07)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.18rem;flex-shrink:0}
.logo{height:48px;width:auto;display:block;filter:drop-shadow(0 0 6px rgba(255,255,255,.35)) drop-shadow(0 0 12px rgba(255,75,193,.35)) drop-shadow(0 0 16px rgba(83,214,255,.25));transition:.3s ease}
.logo:hover{filter:drop-shadow(0 0 8px rgba(255,255,255,.45)) drop-shadow(0 0 16px rgba(255,75,193,.55)) drop-shadow(0 0 22px rgba(83,214,255,.4));transform:scale(1.04)}
.main-nav{display:flex;align-items:center;gap:28px}
.main-nav a{color:#ddd;transition:.25s}
.main-nav a:hover{color:#fff}
.nav-cta{padding:11px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(135deg, rgba(236,72,153,.24), rgba(56,189,248,.18));box-shadow:0 0 24px rgba(236,72,153,.16)}
.menu-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:12px;padding:8px 12px;font-size:1.2rem}

.hero{position:relative;padding-top:128px;padding-bottom:120px;background:url('../images/hero.png') center center/cover no-repeat}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(7,3,17,.45), rgba(7,3,17,.78)),radial-gradient(circle at 20% 20%, rgba(236,72,153,.12), transparent 28%),radial-gradient(circle at 80% 30%, rgba(56,189,248,.10), transparent 25%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(8,6,18,.38);backdrop-filter:blur(10px);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:#f5b3e7}
.hero h1{font-size:clamp(2.9rem,6vw,5.7rem);line-height:1.02;margin:18px 0 18px;font-weight:800;text-shadow:0 0 20px rgba(255,75,193,.22),0 0 40px rgba(83,214,255,.12)}
.hero h1 span{background:linear-gradient(90deg,#ff7adf,#ffb8e8 38%,#79d6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.2rem;color:#f0eafa;max-width:700px}
.sublead{color:#ddd5eb;max-width:660px;margin-top:14px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin:28px 0}

.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;padding:14px 22px;font-weight:700;transition:.25s;border:1px solid rgba(255,255,255,.12);cursor:pointer}
.btn:hover{transform:none}
.btn-primary{background:linear-gradient(135deg,#ff4bc1,#53d6ff);box-shadow:0 0 28px rgba(255,75,193,.25);color:#fff}
.btn-secondary{background:rgba(255,255,255,.06);backdrop-filter:blur(10px);color:#fff}
.btn-small{padding:11px 16px;border-radius:13px;font-size:.93rem}
.full{width:100%}

.hero-badges,.chips,.tag-row{display:flex;gap:12px;flex-wrap:wrap}
.hero-badges span,.chips span,.tag-row span,.pill,.pricing-note,.package-hint,.album-tags span,.player-badge{padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.05);color:#efeefe}
.highlight-hint{background:linear-gradient(135deg, rgba(255,75,193,.22), rgba(83,214,255,.20))}

.hero-card{position:relative}
.hero-card::before{content:"";position:absolute;inset:-12px;background:linear-gradient(135deg, rgba(255,80,190,.18), rgba(83,214,255,.18));filter:blur(24px);z-index:-1}
.hero-card-inner{min-height:520px;border-radius:34px;padding:28px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),radial-gradient(circle at 50% 0%, rgba(255,82,190,.20), transparent 40%),linear-gradient(135deg,#311048,#12182d);box-shadow:0 20px 70px rgba(0,0,0,.35)}
.card-label{font-size:.9rem;letter-spacing:.18em;text-transform:uppercase;color:#f1b8e4}
.hero-card h2{font-size:2.2rem;line-height:1.18;margin:20px 0 28px}
.bars,.mini-bars,.player-wave{display:flex;align-items:flex-end;gap:8px}
.bars{height:120px;margin-top:120px}
.bars span,.mini-bars span,.player-wave span{display:block;flex:1;border-radius:999px;background:linear-gradient(to top,#73d4ff,#ff4bc1 55%,#ffd1f1)}
.card-meta,.audio-top,.audio-meta,.footer-wrap,.album-actions,.price-top,.package-footer,.player-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.card-meta{margin-top:30px}
.card-meta small,.audio-top small,.player-panel-head small{display:block;color:#b5b6ca}
.card-meta strong{display:block;margin-top:4px}

.chips-section{padding-top:18px;padding-bottom:18px}
.section-head{max-width:860px;margin-bottom:34px}
.section-head h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.1;margin:14px 0 12px}
.section-head p{color:#b0b2ca;font-size:1.08rem}

.card-grid{display:grid;gap:20px}
.card-grid.four{grid-template-columns:repeat(4,1fr)}
.info-card,.text-box,.steps,.audio-box,.contact-form,.contact-copy,.album-card,.price-card,.album-feature,.player-panel{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);backdrop-filter:blur(16px)}
.info-card{padding:26px;border-radius:28px;transition:.25s}
.info-card:hover,.album-card:hover,.price-card:hover,.track-item:hover{background:rgba(255,255,255,.065)}
.icon{width:52px;height:52px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg, rgba(255,75,193,.22), rgba(83,214,255,.22));font-size:1.3rem;margin-bottom:18px}
.info-card h3,.album-body h3,.price-card h3{margin:0 0 10px;font-size:1.2rem}
.info-card p,.text-box p,.step p,.feature-copy p,.contact-copy p,.album-body p,.price-card li,.package-intro,.player-description,.player-helper{color:#b0b2ca}

.pricing-note{display:inline-flex;margin-bottom:22px}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.price-card{padding:24px;border-radius:28px;position:relative}
.price-card.featured{background:linear-gradient(180deg, rgba(255,75,193,.13), rgba(83,214,255,.10));box-shadow:0 0 35px rgba(255,75,193,.18);transform:translateY(-8px)}
.price-card.featured:hover{transform:translateY(-11px)}
.price-badge{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:.82rem;font-weight:700}
.price-badge.highlight{background:linear-gradient(135deg, rgba(255,75,193,.35), rgba(83,214,255,.32))}
.price{font-size:2rem;font-weight:800;color:#fff}
.price-card ul{padding-left:18px;margin:14px 0 20px}
.price-card li{margin-bottom:10px}
.package-intro{margin:2px 0 12px;font-weight:600;color:#f6c7e8;min-height:48px}
.package-intro.strong{color:#fff}
.package-footer{flex-direction:column;align-items:stretch;margin-top:auto}
.ribbon{position:absolute;top:16px;right:16px;background:linear-gradient(135deg,#ff4bc1,#53d6ff);color:#fff;padding:8px 12px;border-radius:999px;font-size:.78rem;font-weight:800;box-shadow:0 0 22px rgba(255,75,193,.3)}

.album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.album-card{border-radius:30px;overflow:hidden}
.album-cover{aspect-ratio:1/1;position:relative;padding:20px}
.gradient-a{background:linear-gradient(135deg,#53124f,#1a1d3c 45%,#0f2a4a)}
.gradient-b{background:linear-gradient(135deg,#4a123a,#25174a 45%,#112548)}
.gradient-c{background:linear-gradient(135deg,#2d114c,#181a43 45%,#143d56)}
.album-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center, rgba(255,255,255,.16), transparent 36%)}
.album-cover-inner{position:relative;z-index:1;height:100%;border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))}
.album-tag{display:inline-block;margin-bottom:auto;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);font-size:.8rem}
.album-cover-inner strong{font-size:1.7rem;line-height:1.1;margin-top:18px}
.album-cover-inner small{margin-top:8px;color:#ddd}
.album-body{padding:22px}

.album-showcase{display:grid;gap:28px}
.album-feature{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:stretch;border-radius:34px;overflow:hidden}
.album-feature-cover{position:relative;min-height:100%;background:linear-gradient(135deg,#2b103e,#111d3a)}
.album-feature-cover img{display:block;width:100%;height:100%;object-fit:cover}
.album-feature-body{padding:30px}
.album-feature-topline{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-size:.82rem;color:#f3d1ea;margin-bottom:16px}
.album-feature-body h3{margin:0 0 12px;font-size:clamp(2rem,4vw,3rem);line-height:1.06}
.album-tags{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 20px}

.deluxe-player{display:grid;grid-template-columns:.88fr 1.12fr;gap:18px;margin-top:18px}
.track-list{display:grid;gap:12px}
.track-item{display:flex;align-items:center;gap:14px;text-align:left;padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;transition:.25s}
.track-item:hover{transform:translateY(-1px);background:rgba(255,255,255,.07)}
.track-item.is-active{background:linear-gradient(135deg, rgba(255,75,193,.16), rgba(83,214,255,.12));border-color:rgba(255,255,255,.18);box-shadow:0 0 24px rgba(255,75,193,.12)}
.track-index{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg, rgba(255,75,193,.25), rgba(83,214,255,.22));font-weight:800;flex-shrink:0}
.track-copy strong{display:block;font-size:1rem;line-height:1.25}
.track-copy small{display:block;margin-top:4px;color:#b8bad0}

.player-panel{padding:22px;border-radius:26px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03))}
.player-panel-head h4{margin:0;font-size:1.3rem;line-height:1.2}
.player-description{margin:0 0 18px}
.player-wave{height:72px;margin-bottom:18px}
.player-wave span{box-shadow:0 0 14px rgba(255,75,193,.18);opacity:.55;transition:opacity .2s ease, transform .2s ease}
.player-panel.is-playing .player-wave span{opacity:1;transform:scaleY(1.03)}

.neon-player-ui{display:grid;grid-template-columns:74px 1fr;gap:16px;align-items:center}
.play-toggle{width:74px;height:74px;border:none;border-radius:50%;cursor:pointer;color:#fff;font-size:1.35rem;font-weight:700;background:linear-gradient(135deg,#ff4bc1,#53d6ff);box-shadow:0 0 22px rgba(255,75,193,.28), inset 0 1px 0 rgba(255,255,255,.25);transition:.25s}
.play-toggle:hover{transform:scale(1.04)}
.play-toggle.is-playing{box-shadow:0 0 28px rgba(83,214,255,.35), 0 0 40px rgba(255,75,193,.18)}
.player-main{display:grid;gap:10px}
.player-times{display:flex;justify-content:space-between;font-size:.92rem;color:#d7d8e7}
.progress-wrap{cursor:pointer}
.progress-bar{position:relative;height:14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.progress-fill{position:absolute;left:0;top:0;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#53d6ff,#ff4bc1);box-shadow:0 0 18px rgba(255,75,193,.22)}
.hidden-audio{display:none}
.audio-player.deluxe-audio{width:100%;height:54px;border-radius:16px;overflow:hidden;filter:drop-shadow(0 0 14px rgba(255,75,193,.12))}
.player-helper{margin:14px 0 20px;font-size:.95rem;color:#bfc1d6}
.album-grid-secondary{grid-template-columns:repeat(2,1fr)}

.split-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px}
.text-box{padding:34px;border-radius:30px}
.steps{padding:28px;border-radius:30px}
.step{display:grid;grid-template-columns:72px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.step:last-child{border-bottom:0}
.step span{font-size:2rem;font-weight:800;color:#ff8fdb}
.step h3{margin:0 0 6px}

.feature-grid,.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start}
.audio-box,.contact-copy,.contact-form{padding:28px;border-radius:30px}
.feature-copy h2,.contact-copy h2{font-size:clamp(2rem,4vw,3rem);line-height:1.12;margin:14px 0 12px}
.mini-bars{height:86px;margin:24px 0}
.audio-meta{font-size:.95rem;color:#c1c2d8;margin-bottom:18px}

.benefits{padding-left:20px;color:#f7f7ff}
.benefits li{margin-bottom:10px}
.server-note{margin-top:22px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:#f0efff}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;margin-bottom:16px}
label span{display:block;margin:0 0 8px;color:#e7e6f3}
input,select,textarea{width:100%;background:#12091f;color:#fff;border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:14px 16px;outline:none}
input:focus,select:focus,textarea:focus{border-color:rgba(255,75,193,.55);box-shadow:0 0 0 3px rgba(255,75,193,.12)}

.site-footer{padding:28px 0;border-top:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.14)}
.footer-wrap p,.footer-links a{color:#a6a8bf}
.footer-links{display:flex;gap:20px}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.delay-1{transition-delay:.08s}
.delay-2{transition-delay:.16s}
.delay-3{transition-delay:.24s}

@media (max-width:1180px){
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1060px){
  .hero-grid,.split-grid,.feature-grid,.contact-grid,.card-grid.four,.album-grid,.album-feature,.deluxe-player{grid-template-columns:1fr}
  .album-grid article:last-child{grid-column:1/-1}
}
@media (max-width:780px){
  .menu-toggle{display:block}
  .main-nav{position:absolute;left:20px;right:20px;top:74px;display:none;flex-direction:column;align-items:stretch;padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(10,4,22,.96)}
  .main-nav.open{display:flex}
  .hero{padding-top:110px;padding-bottom:90px;background-position:center center}
  .hero-grid,.split-grid,.feature-grid,.contact-grid,.card-grid.four,.album-grid,.pricing-grid,.form-row,.album-grid-secondary{grid-template-columns:1fr}
  .hero-card-inner{min-height:unset}
  .bars{margin-top:56px}
  .section{padding:72px 0}
  .container{width:min(100% - 28px, 1180px)}
  .hero h1{font-size:clamp(2.5rem,12vw,4rem)}
  .feature-copy h2,.contact-copy h2,.section-head h2{font-size:2rem}
  .footer-wrap{flex-direction:column;align-items:flex-start}
  .price-card.featured{transform:none}
  .price-card.featured:hover{transform:translateY(-3px)}
  .logo{height:42px}
  .album-feature-body{padding:22px}
  .player-panel-head{flex-direction:column;align-items:flex-start}
  .neon-player-ui{grid-template-columns:1fr}
  .play-toggle{width:64px;height:64px}
}


/* Hard stop for package card movement */
.pricing-grid .price-card,
.pricing-grid .price-card:hover,
.pricing-grid .price-card.featured,
.pricing-grid .price-card.featured:hover,
.pricing-grid .price-card.deluxe-highlight,
.pricing-grid .price-card.deluxe-highlight:hover {
  transform: none !important;
}

.pricing-grid .price-card,
.pricing-grid .price-card.featured,
.pricing-grid .price-card.deluxe-highlight {
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}


/* =========================================================
   Header / Mobile Menu Final Fix
   Wichtig: Header und Navigation dürfen NICHT vertikal clippen,
   sonst wirkt der mobile Menübutton funktionslos.
   ========================================================= */

.site-header {
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  overflow: visible !important;
}

.site-header .container,
.site-header .nav,
.nav {
  overflow: visible !important;
}

.menu-toggle {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 100001 !important;
}

@media (max-width: 860px) {
  .site-header .nav {
    position: relative !important;
    overflow: visible !important;
  }

  .main-nav {
    z-index: 100000 !important;
  }

  .main-nav.open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Mobile Overflow Fix, aber ohne Header/Nav zu beschneiden */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

@media (max-width: 780px) {
  .section,
  .container:not(.nav),
  .hero,
  .hero-inner,
  .split-grid,
  .steps,
  .pricing-grid,
  .album-showcase,
  .album-feature,
  .album-feature-cover,
  .album-feature-body,
  .deluxe-player,
  .track-list,
  .player-panel,
  .contact-grid,
  .contact-form,
  .contact-form-deluxe,
  .form-row,
  .voice-grid,
  .footer,
  .legal-card {
    max-width: 100%;
    overflow-x: hidden;
  }
}


/* =========================================================
   Final Mobile No-JS Menu + Overflow Fix
   Stoppt seitliches Wackeln, ohne das mobile Menü abzuschneiden.
   ========================================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

body {
  position: relative;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* Header darf vertikal sichtbar bleiben, damit das Dropdown nicht abgeschnitten wird */
.site-header,
.site-header .nav,
.site-header .container {
  overflow: visible !important;
}

.site-header {
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
}

/* No-JS Menü sicher innerhalb der mobilen Bildschirmbreite halten */
.ns-mobile-menu {
  max-width: 100%;
}

.ns-mobile-panel {
  right: 0 !important;
  left: auto !important;
  max-width: calc(100vw - 28px) !important;
  width: min(320px, calc(100vw - 28px)) !important;
  overflow-x: hidden !important;
}

/* Mobile Container begrenzen, aber Header/Nav NICHT clippen */
@media (max-width: 780px) {
  .section,
  .container:not(.nav),
  .hero,
  .hero-inner,
  .split-grid,
  .steps,
  .pricing-grid,
  .album-showcase,
  .album-feature,
  .album-feature-cover,
  .album-feature-body,
  .deluxe-player,
  .track-list,
  .player-panel,
  .contact-grid,
  .contact-form,
  .contact-form-deluxe,
  .form-row,
  .voice-grid,
  .footer,
  .legal-card {
    max-width: 100%;
    overflow-x: hidden;
  }

  .btn,
  .contact-submit-btn,
  .album-actions a,
  .track-item,
  .price-card,
  .info-card,
  .album-card,
  input,
  select,
  textarea {
    max-width: 100%;
  }

  .album-actions,
  .package-footer,
  .player-panel-head,
  .neon-player-ui {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .hero h1,
  .section-head h2,
  .legal-card h1,
  .contact-form-intro h3,
  .album-feature-body h3,
  .price-card h3,
  .track-copy strong,
  .track-copy small,
  .player-description,
  .contact-privacy-note {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}