:root {
  --quiet-action: linear-gradient(155deg, #fffaf1, #ece0f1);
  --action-radius: 10px;
}

body[data-preview] :is(a.btn, button.btn, a.spotify-3d) {
  box-sizing: border-box;
  min-height: 46px;
  max-width: 100%;
  padding: 10px 15px !important;
  border-radius: var(--action-radius) !important;
  text-align: center;
  line-height: 1.3;
}

body[data-preview] a.btn:not([href*="express-buchung"], [href$="#booking"], [href="#anfrage"], [href="#express-kauf"], .academy-secondary, [data-course]),
body[data-preview] button.btn.secondary {
  background: var(--quiet-action) !important;
  color: var(--deep) !important;
  border-color: #c2a6cf !important;
  box-shadow: inset 0 1px #fff8, 0 2px #a88ab6 !important;
}

body[data-preview] a.spotify-3d {
  gap: 8px;
  background: var(--cream-white) !important;
  color: var(--charcoal) !important;
  border-color: #b5a697 !important;
  box-shadow: none !important;
  transform: none;
  margin: 0;
}

body[data-preview] a.spotify-3d svg {
  width: 19px;
  height: 19px;
}

[data-preview="index"] .music-card > div:last-child {
  display: grid;
  justify-content: center;
  grid-template-columns: minmax(0, 260px);
  grid-template-rows: repeat(2, minmax(46px, auto));
  gap: 9px;
}
[data-preview="index"] .music-card > div:last-child > a {
  width: 100%;
  max-width: 260px;
}
[data-preview="index"] .music-jump { margin-bottom: 25px; }

[data-preview="index"] .wedding-music-label {
  display: grid;
  place-items: center;
  min-height: 110px;
  padding: 16px;
  background: var(--purple);
  color: var(--lavender);
  font: 500 clamp(1.05rem, 3vw, 1.45rem) Georgia, serif;
}

[data-preview="index"] .express-hero-slot { display: none; }

@media (max-width: 850px) {
  body[data-preview] :is(a.btn, button.btn, a.spotify-3d) {
    min-height: 44px;
    padding: 9px 12px !important;
  }

  [data-preview="index"] .hero { --hero-photo-height: clamp(270px, 52vw, 390px); }
  [data-preview="index"] .hero::before { height: var(--hero-photo-height); background-position: center 8%; }
  [data-preview="index"] .hero-content { padding-top: calc(var(--hero-photo-height) + 8px); }
  [data-preview="index"] .express-hero-slot { display: flex; margin-bottom: 14px; }
  body[data-preview="index"] a.btn.express-hero-button {
    letter-spacing: .08em;
    background: var(--cream-white) !important;
    color: var(--deep) !important;
    border-color: var(--champagne) !important;
    box-shadow: 0 3px 10px #21032e90 !important;
  }

  [data-preview="index"] .hero h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); margin-block: 15px; }
  [data-preview="index"] .hero .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  [data-preview="index"] .hero .actions .btn { letter-spacing: .06em; }
  [data-preview="index"] .hero .subline { margin-top: 23px; }
  [data-preview="index"] main > section { padding-block: clamp(40px, 7vw, 62px); }
  [data-preview="index"] .sectiontitle,
  [data-preview$="-wedding"] .sectiontitle { font-size: clamp(1.7rem, 5.1vw, 2.35rem); }
  [data-preview$="-wedding"] main > section { padding-block: 38px; }
}

@media (min-width: 851px) {
  [data-preview="index"] .music-card > div:last-child {
    grid-template-rows: repeat(2, minmax(51px, auto));
  }
}