/* ============================================================
   main.css — Struktur & Komponenten (Tokens aus theme.css)
   Day-to-Night: heller Standard, dunkle Sektionen via [data-theme]
   ============================================================ */

/* ---------- FONTS (lokal) ---------- */
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:400 800;
  font-display:swap; src:url("/assets/fonts/Manrope-Variable.woff2") format("woff2");
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);font-size:var(--step-0);line-height:1.6;
  color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,picture,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------- TYPO ---------- */
h1,h2,h3{font-family:var(--font-head);font-weight:var(--fw-black);line-height:1.06;letter-spacing:-.02em}
h1{font-size:var(--step-4)}h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);font-weight:var(--fw-bold);line-height:1.2}
p{color:var(--text-muted)}strong{color:var(--text);font-weight:var(--fw-bold)}
.eyebrow{font-size:var(--step--1);font-weight:var(--fw-semi);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.accent-text{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:var(--step-1);color:var(--text-muted);max-width:56ch}

/* ---------- SEKTIONS-BAUKASTEN ---------- */
.section{padding-block:var(--section-pad);position:relative}
.section--tight{padding-block:clamp(40px,6vw,80px)}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:var(--container-narrow)}
.section-head{max-width:64ch;margin-bottom:clamp(32px,4vw,56px)}
.section-head .eyebrow{margin-bottom:16px;display:block}
.section-head h2+p{margin-top:18px}

/* Sektions-Theme: dunkle Sektionen bekommen eigenen Grund + warmen Glow */
[data-theme="dark"]{position:relative}
.section[data-theme="dark"]::before{content:"";position:absolute;inset:0;background:var(--glow);pointer-events:none}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.5em;border-radius:var(--radius-pill);
  font-weight:var(--fw-bold);font-size:var(--step-0);background:var(--surface);color:var(--text);
  border:1px solid var(--line);cursor:pointer;text-align:center;line-height:1.1;white-space:nowrap;
  transition:transform var(--transition),box-shadow var(--transition),background var(--transition),color var(--transition)}
.btn:hover{transform:translateY(-2px)}
.btn .ico{width:1.02em;height:1.02em;flex:none}
.btn--primary{border:none;color:var(--on-accent);position:relative;isolation:isolate;background:transparent}
.btn--primary::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grad-accent);transition:filter var(--transition)}
.btn--primary:hover{box-shadow:var(--shadow-gold)}
.btn--primary:hover::before{filter:brightness(1.08)}
.btn--ghost{background:transparent}
.btn--wa{background:#1FA855;color:#fff;border-color:transparent;gap:.45em}
.btn--wa:hover{background:#1c9a4e}
.btn--lg{padding:1.05em 1.8em;font-size:var(--step-1)}

/* ---------- HEADER / NAV ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;border-bottom:1px solid transparent;
  transition:background var(--transition),border-color var(--transition),backdrop-filter var(--transition)}
.nav{display:flex;align-items:center;gap:24px;min-height:76px}
.brand{display:flex;align-items:center;gap:.6em;font-weight:var(--fw-black);letter-spacing:-.02em;font-size:var(--step-1);color:#fff}
.brand .dot{width:.5em;height:.5em;border-radius:50%;background:var(--grad-accent)}
.nav-list{display:flex;flex-wrap:nowrap;align-items:center;gap:2px;margin-left:auto}
.nav-list>li{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:.4em;padding:.5em .66em;border-radius:10px;white-space:nowrap;
  color:rgba(255,255,255,.82);font-weight:var(--fw-medium);transition:color var(--transition),background var(--transition)}
.nav-link:hover,.nav-link[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.1)}
.nav-link .chev{width:.7em;height:.7em;transition:transform var(--transition)}
.nav-link[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* gescrollt: heller Balken, dunkle Schrift */
.site-header.is-scrolled{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(140%) blur(14px);border-bottom-color:var(--line)}
.site-header.is-scrolled .brand{color:var(--text)}
.site-header.is-scrolled .nav-link{color:var(--text-muted)}
.site-header.is-scrolled .nav-link:hover{color:var(--text);background:var(--surface-2)}

.submenu{position:absolute;top:calc(100% + 10px);left:0;min-width:250px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:8px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--transition),transform var(--transition),visibility var(--transition)}
.nav-list li:hover>.submenu,.nav-list li:focus-within>.submenu,.submenu.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{display:block;padding:.7em .8em;border-radius:9px;color:var(--text-muted);font-weight:var(--fw-medium);transition:background var(--transition),color var(--transition)}
.submenu a:hover{background:var(--surface-2);color:var(--text)}
.nav-cta{display:flex;align-items:center;gap:8px;margin-left:10px}
.nav-cta .btn{padding:.5em .95em;font-size:var(--step--1);white-space:nowrap}

.nav-toggle{display:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:10px;width:46px;height:46px;align-items:center;justify-content:center;margin-left:auto}
.site-header.is-scrolled .nav-toggle{background:var(--surface-2);border-color:var(--line)}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:20px;height:2px;background:currentColor;color:#fff;transition:transform var(--transition),opacity var(--transition)}
.site-header.is-scrolled .nav-toggle span,.site-header.is-scrolled .nav-toggle span::before,.site-header.is-scrolled .nav-toggle span::after{background:var(--text)}
.nav-toggle span::before{transform:translateY(-6px)}.nav-toggle span::after{transform:translateY(4px)}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg) translateY(-2px)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,12,20,.35) 0%,rgba(9,12,20,.30) 45%,rgba(15,20,32,.92) 100%),
             linear-gradient(90deg,rgba(9,12,20,.75),transparent 62%)}
.hero__inner{padding-block:150px 96px;position:relative}
.hero .eyebrow{margin-bottom:20px;color:var(--gold-bright)}
.hero h1{max-width:16ch;margin-bottom:22px;color:#fff}
.hero .lead{margin-bottom:34px;color:rgba(246,241,234,.86)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:38px}
.hero__trust{display:flex;flex-wrap:wrap;gap:26px;color:rgba(246,241,234,.7);font-size:var(--step--1);font-weight:var(--fw-semi);letter-spacing:.04em}
.hero__trust b{color:#fff;font-weight:var(--fw-black)}
.hero__wave{position:absolute;left:0;right:0;bottom:0;z-index:-1;height:150px;padding-inline:var(--gutter);--wf-h:150px;opacity:.7}

/* Hero-Headline: Wort-für-Wort einfließend */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.hero h1 .w i{display:inline-block;font-style:normal;transform:translateY(115%);transition:transform .85s cubic-bezier(.2,.7,.2,1)}
.hero.is-ready h1 .w i{transform:none}
.hero h1 .w:nth-child(2) i{transition-delay:.12s}
.hero h1 .w:nth-child(3) i{transition-delay:.24s}
.hero h1 .w:nth-child(4) i{transition-delay:.36s}

/* ---------- WAVEFORM (Signatur) ---------- */
.waveform{display:flex;align-items:flex-end;gap:4px;height:var(--wf-h,54px)}
.waveform span{flex:1;min-width:3px;border-radius:3px;background:var(--grad-accent);transform-origin:bottom;height:100%;opacity:.92;
  transform:scaleY(var(--s,.4));animation:wf 1.15s ease-in-out infinite}
.waveform span:nth-child(6n+1){--s:.22}.waveform span:nth-child(6n+2){--s:.85}.waveform span:nth-child(6n+3){--s:.42}
.waveform span:nth-child(6n+4){--s:1}.waveform span:nth-child(6n+5){--s:.62}.waveform span:nth-child(6n){--s:.90}
.waveform span:nth-child(4n+2){animation-delay:.15s}.waveform span:nth-child(4n+3){animation-delay:.30s}.waveform span:nth-child(4n){animation-delay:.45s}
@keyframes wf{0%,100%{transform:scaleY(var(--s,.4))}50%{transform:scaleY(1)}}

/* ---------- SPLIT „ZWEI WELTEN" ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.split--reverse .split__media{order:2}
.split__media{position:relative;border-radius:var(--radius);overflow:hidden;min-height:clamp(300px,42vw,480px);
  background-size:cover;background-position:center;box-shadow:var(--shadow)}
.split__media.is-wedding{background-image:linear-gradient(180deg,rgba(28,22,34,.05),rgba(28,22,34,.15)),var(--img-hochzeit)}
.split__media.is-event{background-image:linear-gradient(180deg,rgba(9,12,20,.25),rgba(9,12,20,.55)),var(--img-event)}
.split__body h2{margin-bottom:16px}
.taglist{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.taglist span{padding:.55em 1em;border:1px solid var(--line);border-radius:var(--radius-pill);font-size:var(--step--1);font-weight:var(--fw-semi);color:var(--text-muted)}
.split__body .btn{margin-top:28px}

/* ---------- PILLARS / KARTEN ---------- */
.grid{display:grid;gap:clamp(16px,2vw,24px)}.grid--3{grid-template-columns:repeat(3,1fr)}.grid--2{grid-template-columns:repeat(2,1fr)}
.pillar{padding:26px 0}
.pillar .k{font-size:var(--step--1);color:var(--gold);font-weight:var(--fw-bold);letter-spacing:.12em;text-transform:uppercase}
.pillar h3{margin:12px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{display:inline-flex;align-items:center;gap:.6em;padding:.8em 1.1em;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--text-muted);font-weight:var(--fw-semi);transition:transform var(--transition),border-color var(--transition),color var(--transition)}
.chip:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gold) 55%,var(--line));color:var(--text)}

/* ---------- MIXING / LIVE ---------- */
.live{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:clamp(28px,5vw,56px);overflow:hidden}
.live h2{max-width:18ch}.live .lead{margin-top:14px}
.live__wave{--wf-h:clamp(130px,26vw,210px);margin-top:28px}

/* ---------- BEWERTUNGEN ---------- */
.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,22px)}
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,2.5vw,30px);box-shadow:var(--shadow)}
.review .stars{color:var(--gold-bright);letter-spacing:.15em;font-size:.95rem;margin-bottom:12px}
.review p{color:var(--text);font-size:var(--step-0)}
.review .who{margin-top:16px;font-weight:var(--fw-bold);color:var(--text)}
.review .who small{display:block;font-weight:var(--fw-medium);color:var(--text-dim);margin-top:2px}
.reviews-more{margin-top:28px}

/* ---------- CTA ---------- */
.cta-band{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface-2);padding:clamp(32px,5vw,64px);text-align:center}
.cta-band::after{content:"";position:absolute;inset:0;background:var(--glow);pointer-events:none}
.cta-band h2{max-width:22ch;margin:0 auto 16px}
.cta-band .lead{margin-inline:auto}
.cta-band .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px;position:relative}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;font-weight:var(--fw-bold);font-size:var(--step-1);color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:26px;height:26px;position:relative;transition:transform var(--transition)}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;inset:50% 0 auto;height:2px;background:var(--gold);transform:translateY(-50%)}
.faq summary .pm::after{transform:translateY(-50%) rotate(90deg);transition:opacity var(--transition)}
.faq details[open] summary .pm::after{opacity:0}
.faq details[open] summary{color:var(--gold)}
.faq p{padding:0 0 24px;max-width:70ch}

/* ---------- FOOTER (Nacht) ---------- */
.site-footer{padding-block:clamp(48px,6vw,72px) 32px}
.site-footer .btn--wa{padding:.5em 1em;font-size:var(--step--1);line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:.5em;white-space:nowrap}
.site-footer .btn--wa svg{width:18px;height:18px;flex:none;display:block}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.footer-grid h4{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.14em;color:var(--text-dim);margin-bottom:16px;font-weight:var(--fw-bold)}
.footer-grid a{display:block;padding:.35em 0;color:var(--text-muted);transition:color var(--transition)}
.footer-grid a:hover{color:var(--text)}
.footer-bottom{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;color:var(--text-dim);font-size:var(--step--1)}
.footer-legal{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.link-reset{background:none;border:none;padding:0;cursor:pointer;color:var(--text-dim);font-size:inherit}
.link-reset:hover{color:var(--text)}

/* ---------- FLOATING WA + CONSENT ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:55;width:58px;height:58px;border-radius:50%;background:#1FA855;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -10px rgba(31,168,85,.7);transition:transform var(--transition)}
.wa-float:hover{transform:scale(1.06)}.wa-float svg{width:30px;height:30px;fill:#fff}
.to-top{position:fixed;right:20px;bottom:88px;z-index:55;width:48px;height:48px;border-radius:50%;background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity var(--transition),transform var(--transition),background var(--transition)}
.to-top.is-vis{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--surface-2)}
.to-top svg{width:20px;height:20px}
.consent{position:fixed;inset:auto 16px 16px;z-index:70;max-width:480px;margin-inline:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);transform:translateY(140%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.consent.is-open{transform:translateY(0)}
.consent p{font-size:var(--step--1);color:var(--text-muted);margin-bottom:16px}
.consent a{color:var(--gold);text-decoration:underline}
.consent__row{display:flex;gap:10px;flex-wrap:wrap}.consent .btn{padding:.7em 1.1em;font-size:var(--step--1)}

/* ---------- UTILITIES ---------- */
.mt-s{margin-top:14px}.center{text-align:center}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--gold);color:#fff;padding:.6em 1em;border-radius:8px;z-index:100;font-weight:var(--fw-bold)}
.skip-link:focus{left:8px}

/* ---------- SCROLL-REVEAL ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal-2{transition-delay:.1s}.reveal-3{transition-delay:.2s}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px){
  .nav-toggle{display:flex}
  .nav-list{position:fixed;inset:76px 0 auto;flex-direction:column;align-items:stretch;gap:2px;background:var(--surface);border-bottom:1px solid var(--line);padding:16px var(--gutter) 26px;transform:translateY(-120%);transition:transform var(--transition);margin:0;max-height:calc(100svh - 76px);overflow:auto}
  .nav-list.is-open{transform:translateY(0)}
  .nav-link,.site-header .nav-list .nav-link{color:var(--text-muted);padding:.9em .6em;font-size:var(--step-1)}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:transparent;padding:0 0 6px 14px;min-width:0}
  .nav-cta{width:100%;margin:12px 0 0}.nav-cta .btn{flex:1}
  .split,.offers,.grid--3,.grid--2,.reviews,.footer-grid{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
  .footer-grid{gap:28px}
}
@media (max-width:520px){.hero__actions .btn{width:100%}.hero__trust{gap:14px 22px}}

/* ---------- Waveform mobil deutlicher ---------- */
@media (max-width:680px){
  .waveform{gap:6px}
  .waveform span{min-width:8px;border-radius:3px;opacity:1;animation-duration:1s}
  .waveform span:nth-child(n+19){display:none}
  .hero__wave{height:190px;--wf-h:190px;opacity:.95}
  .live__wave{--wf-h:200px}
  .cta-wave{--wf-h:140px;opacity:.9}
  .site-footer .btn--wa{padding:.38em .8em}
}

/* ---------- MOTION-REDUZIERUNG ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .waveform span{transform:scaleY(.5)}
  .hero h1 .w i{transform:none}
}

/* ---------- Utility-Ergänzungen ---------- */
.mt-1{margin-top:16px}.mt-2{margin-top:18px}.mx-auto{margin-inline:auto}
.cta-wave{--wf-h:clamp(80px,14vw,120px);margin-top:34px;opacity:.7}


/* ---------- ANGEBOTS-KARTEN (DJ / Fotobox / Event) ---------- */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.offer{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform var(--transition),border-color var(--transition)}
.offer:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
.offer__media{aspect-ratio:4/3;background-size:cover;background-position:center;position:relative}
.offer--dj .offer__media{background-image:linear-gradient(180deg,rgba(9,12,20,.12),rgba(9,12,20,.42)),var(--img-mixing)}
.offer--fotobox .offer__media{background-image:linear-gradient(180deg,rgba(9,12,20,.12),rgba(9,12,20,.42)),var(--img-fotobox)}
.offer--event .offer__media{background-image:linear-gradient(180deg,rgba(9,12,20,.12),rgba(9,12,20,.42)),var(--img-event)}
.offer__body{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:10px;flex:1}
.offer__body h3{margin:0}
.offer__body p{flex:1}
.badge{position:absolute;top:14px;left:14px;z-index:2;padding:.4em .8em;border-radius:var(--radius-pill);background:var(--grad-accent);color:var(--on-accent);font-size:.68rem;font-weight:var(--fw-black);letter-spacing:.1em;text-transform:uppercase;box-shadow:var(--shadow-gold)}

/* Hero-Leistungszeile: DJ • Fotobox • Events */
.hero__svc{display:flex;flex-wrap:wrap;align-items:center;gap:.35em .6em;margin:0 0 18px;font-weight:var(--fw-black);font-size:var(--step-1);letter-spacing:.01em}
.hero__svc b{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:var(--fw-black)}
.hero__svc i{color:var(--gold-bright);font-style:normal;opacity:.9}

/* Fotobox-Wow */
.split__media.is-fotobox{background-image:linear-gradient(180deg,rgba(28,22,34,.05),rgba(28,22,34,.22)),var(--img-fotobox)}
.split__note{display:inline-block;margin-top:16px;padding:.5em 1em;border-radius:var(--radius-pill);border:1px solid var(--gold);color:var(--gold);font-weight:var(--fw-bold);font-size:var(--step--1);letter-spacing:.03em}

/* Angebots-Karten am Handy untereinander (nach der Basis-Regel, damit es greift) */
@media (max-width:900px){ .offers{grid-template-columns:1fr} }

/* ============================================================
   UNTERSEITEN – Page-Hero (Kopfband), Preis-Karten, Info-Band
   ============================================================ */
.page-hero{position:relative;isolation:isolate;padding-block:clamp(120px,15vw,162px) clamp(44px,7vw,72px)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--glow);pointer-events:none}
.page-hero .eyebrow{margin-bottom:14px;display:block}
.page-hero h1{max-width:18ch}
.page-hero .lead{margin-top:16px}
.page-hero__price{display:inline-block;margin-top:22px;padding:.5em 1.1em;border:1px solid var(--gold);border-radius:var(--radius-pill);color:var(--gold);font-weight:var(--fw-bold)}

.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px);align-items:stretch;margin-top:14px}
.price-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,2.2vw,28px)}
.price-card--featured{border-color:var(--gold);box-shadow:var(--shadow-gold)}
.price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:.35em .85em;border-radius:var(--radius-pill);background:var(--grad-accent);color:var(--on-accent);font-size:.64rem;font-weight:var(--fw-black);letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--shadow-gold)}
.price-card h3{margin:0}
.price-card .price{margin:10px 0 2px;font-size:var(--step-2);font-weight:var(--fw-black);color:var(--text);line-height:1.1}
.price-card .price span{font-size:var(--step--1);font-weight:var(--fw-semi);color:var(--text-dim)}
.price-card .feat{margin:16px 0 0;display:flex;flex-direction:column;gap:9px;flex:1}
.price-card .feat li{position:relative;padding-left:1.6em;color:var(--text-muted);font-size:var(--step-0)}
.price-card .feat li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold);font-weight:var(--fw-black)}
.price-card details{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.price-card summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:var(--fw-bold);color:var(--gold);font-size:var(--step--1)}
.price-card summary::-webkit-details-marker{display:none}
.price-card summary .chev{width:.72em;height:.72em;transition:transform var(--transition);flex:none}
.price-card details[open] summary .chev{transform:rotate(180deg)}
.price-card .more{margin-top:12px;color:var(--text-muted);font-size:var(--step--1);line-height:1.65}
.price-card .btn{margin-top:18px;width:100%;justify-content:center}
.price-legal{margin-top:22px;color:var(--text-dim);font-size:var(--step--1);max-width:80ch}

.info-band{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);padding:clamp(28px,4vw,52px)}
.info-band::after{content:"";position:absolute;inset:0;background:var(--glow);pointer-events:none}
.info-band>*{position:relative}
.info-band .price{margin:14px 0 4px;font-weight:var(--fw-black);color:var(--gold);font-size:var(--step-1)}
.info-band .btn{margin-top:22px}

@media (max-width:1100px){ .price-grid{grid-template-columns:repeat(2,1fr)} .price-badge{font-size:.6rem} }
@media (max-width:600px){ .price-grid{grid-template-columns:1fr} }

/* ============================================================
   PREMIUM-PAKETSYSTEM (/hochzeits-dj/) — 4 Karten, Smooth-Expand
   ============================================================ */
.pkg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.8vw,24px);align-items:start;margin-top:12px}
.pkg{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,2vw,28px);transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition)}
.pkg:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gold) 40%,var(--line))}
.pkg--featured{border-color:var(--gold);box-shadow:var(--shadow-gold)}
.pkg__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:.4em .9em;border-radius:var(--radius-pill);background:var(--grad-accent);color:var(--on-accent);font-size:.66rem;font-weight:var(--fw-black);letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--shadow-gold)}
.pkg__tag{font-size:var(--step--1);font-weight:var(--fw-bold);letter-spacing:.05em;color:var(--gold)}
.pkg__name{margin:6px 0 0;font-size:var(--step-1)}
.pkg__price{margin:10px 0 0;font-size:var(--step-2);font-weight:var(--fw-black);line-height:1.05;color:var(--text)}
.pkg__price span{font-size:var(--step--1);font-weight:var(--fw-semi);color:var(--text-dim)}
.pkg__aud{margin:8px 0 0;color:var(--text-muted);font-size:var(--step--1);font-weight:var(--fw-semi)}
.pkg__feat{margin:16px 0 0;display:flex;flex-direction:column;gap:8px}
.pkg__feat li{position:relative;padding-left:1.6em;color:var(--text-muted);font-size:var(--step-0)}
.pkg__feat li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold);font-weight:var(--fw-black)}
.pkg__actions{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.pkg__actions .btn{width:100%;justify-content:center}
.pkg__toggle{background:none;border:1px solid var(--line);border-radius:var(--radius-pill);padding:.7em 1em;font-weight:var(--fw-bold);color:var(--text);cursor:pointer;font-size:var(--step--1);transition:background var(--transition),border-color var(--transition)}
.pkg__toggle:hover{background:var(--surface-2);border-color:var(--gold)}
.pkg__wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.pkg.is-open .pkg__wrap{grid-template-rows:1fr;margin-top:16px}
.pkg__detail{overflow:hidden;min-height:0}
.pkg__detail>*+*{margin-top:16px}
.dsec h4{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:8px}
.dsec ul{display:flex;flex-direction:column;gap:6px}
.dsec li{position:relative;padding-left:1.4em;color:var(--text-muted);font-size:var(--step--1)}
.dsec li::before{content:"–";position:absolute;left:0;color:var(--gold)}
.dhl{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;background:var(--surface-2)}
.dhl--gold{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
.dhl .k{font-weight:var(--fw-black);font-size:var(--step--1);letter-spacing:.04em;color:var(--gold);text-transform:uppercase}
.dhl p{margin-top:6px;font-size:var(--step--1);color:var(--text-muted)}
.dhl ul{margin-top:8px}
.dhl a.teaser-link{margin-top:8px}
.teaser-link{display:inline-flex;align-items:center;gap:.4em;color:var(--gold);font-weight:var(--fw-bold);font-size:var(--step--1)}
.adv{display:grid;grid-template-columns:1fr 1fr;gap:8px;list-style:none;padding:0}
.adv li{font-size:var(--step--1);color:var(--text-muted);padding-left:1.4em;position:relative}
.adv li::before{content:"★";position:absolute;left:0;color:var(--gold)}

.trustbar{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);padding:clamp(24px,3vw,36px);text-align:center}
.trustbar h2{font-size:var(--step-1)}
.trust-grid{margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust-grid .ti{display:flex;flex-direction:column;gap:4px}
.trust-grid .ti .st{color:var(--gold);font-size:1.4em;line-height:1}
.trust-grid .ti b{font-size:var(--step--1)}
.trust-grid .ti small{color:var(--text-dim);font-size:var(--step--1)}

.xgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.xtile{display:flex;align-items:center;gap:12px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);transition:transform var(--transition),border-color var(--transition)}
.xtile:hover{transform:translateY(-3px);border-color:var(--gold)}
.xtile .em{font-size:1.5em;flex:none}
.xtile b{font-weight:var(--fw-bold);font-size:var(--step-0)}
.xtile small{display:block;color:var(--text-dim);font-size:var(--step--1)}

@media (max-width:1100px){.pkg-grid{grid-template-columns:repeat(2,1fr)}.trust-grid{grid-template-columns:repeat(2,1fr)}.xgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.pkg-grid{grid-template-columns:1fr}}
@media (max-width:640px){.trust-grid{grid-template-columns:1fr 1fr}.xgrid{grid-template-columns:1fr}}

/* ============ Hochwertige Inline-Icons ============ */
.ico-i{width:1.05em;height:1.05em;display:inline-block;vertical-align:-0.15em;flex:none}
.dhl .k,.eyebrow{display:inline-flex;align-items:center;gap:.45em}
.pkg__badge{display:inline-flex;align-items:center;gap:.4em}
.pkg__tag{display:inline-flex;align-items:center;gap:.4em}
.xtile .em{display:inline-flex;align-items:center;justify-content:center}
.xtile .em .ico-i{width:1.5em;height:1.5em;color:var(--gold)}
.trust-grid .ti .st{display:inline-flex;justify-content:center}
.trust-grid .ti .st .ico-i{width:1.2em;height:1.2em}

/* ============ Wort-für-Wort-Reveal für Unterseiten-Überschriften ============ */
.reveal-head .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.reveal-head .w i{display:inline-block;font-style:normal;transform:translateY(115%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal-head.is-ready .w i{transform:none}
.reveal-head .w:nth-child(2) i{transition-delay:.06s}
.reveal-head .w:nth-child(3) i{transition-delay:.12s}
.reveal-head .w:nth-child(4) i{transition-delay:.18s}
.reveal-head .w:nth-child(5) i{transition-delay:.24s}
.reveal-head .w:nth-child(6) i{transition-delay:.30s}

/* ============ Dezenter Schimmer am Featured-Badge ============ */
.pkg__badge{position:absolute;overflow:hidden}
.pkg__badge::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-130%);animation:badge-sheen 4s ease-in-out infinite}
@keyframes badge-sheen{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

@media (prefers-reduced-motion:reduce){
  .reveal-head .w i{transform:none;transition:none}
  .pkg__badge::after{animation:none;display:none}
}

/* ============ Formular (Kontakt) ============ */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field>label,.field .label{font-weight:var(--fw-bold);font-size:var(--step--1)}
.field input,.field select,.field textarea{padding:.75em .9em;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:inherit;width:100%;transition:border-color var(--transition),box-shadow var(--transition)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}
.field textarea{resize:vertical;min-height:120px}
.field.has-error input,.field.has-error select{border-color:#c0392b}
.field .err{color:#c0392b;font-size:var(--step--1)}
.checks{display:flex;flex-wrap:wrap;gap:10px 18px}
.check{display:flex;align-items:center;gap:.5em;font-size:var(--step-0);cursor:pointer}
.check input,.consent input{width:auto;accent-color:var(--gold)}
.consent{display:flex;gap:.6em;align-items:flex-start;font-size:var(--step--1);cursor:pointer}
.consent input{margin-top:.2em}
.form-hint{margin-top:12px;color:var(--text-dim);font-size:var(--step--1)}
.form-error-top{background:#fbeae8;border:1px solid #e2b6b0;color:#8e2b20;padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:18px}
.paket-chip{display:inline-block;margin-bottom:18px;padding:.5em 1em;border:1px solid var(--gold);border-radius:var(--radius-pill);color:var(--gold);font-size:var(--step--1)}
.form-success{text-align:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);padding:clamp(28px,4vw,48px)}
.form-success h2{color:var(--gold)}
.form-success .btn{margin-top:16px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}

/* ============ Preisvorteil-Versprechen ============ */
#preisvorteil{scroll-margin-top:90px}
.preisvorteil{position:relative;overflow:hidden;border:1.5px solid color-mix(in srgb,var(--gold) 65%,var(--line));border-radius:var(--radius);background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 9%,var(--surface-2)),var(--surface-2));padding:clamp(34px,4.5vw,60px);text-align:center;box-shadow:var(--shadow-gold)}
.preisvorteil::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-accent);z-index:1}
.preisvorteil::after{content:"";position:absolute;inset:0;background:var(--glow);pointer-events:none}
.preisvorteil>*{position:relative;max-width:62ch;margin-left:auto;margin-right:auto}
.pv-medal{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--grad-accent);color:var(--on-accent);box-shadow:var(--shadow-gold);margin-bottom:16px}
.pv-medal .ico-i{width:30px;height:30px}
.pv-title{font-size:var(--step-2);margin-bottom:12px}
.pv-lead{font-size:var(--step-0);color:var(--text-muted)}
.pv-strong{font-size:var(--step-1);font-weight:var(--fw-bold);color:var(--text);margin:6px 0 14px}
.preisvorteil p{margin-bottom:12px}
.pv-claim{font-size:var(--step-1);font-weight:var(--fw-black);color:var(--gold);letter-spacing:.02em;margin:16px auto}
.pv-legal{font-size:var(--step--1);color:var(--text-dim);line-height:1.6;max-width:72ch}

/* dezenter Karten-Hinweis */
.pkg__hint{display:flex;align-items:center;gap:.5em;margin-top:14px;padding:.65em .85em;font-size:var(--step--1);
  color:var(--text-muted);text-decoration:none;line-height:1.35;
  border:1px solid color-mix(in srgb,var(--gold) 42%,var(--line));border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--gold) 8%,var(--surface));transition:background var(--transition),border-color var(--transition)}
.pkg__hint .ico-i{width:1.15em;height:1.15em;color:var(--gold);flex:none}
.pkg__hint span{color:var(--gold);font-weight:var(--fw-black)}
@media (hover:hover){.pkg__hint:hover{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,var(--surface))}}

/* ============ Unterseiten-Kopfbild (optional, SEO-.webp aus theme.css) ============ */
.page-hero--img{background-size:cover;background-position:center;background-repeat:no-repeat}
.page-hero--img::before{background:linear-gradient(180deg,rgba(9,12,20,.62),rgba(9,12,20,.80))}
.page-hero.ph-hochzeit{background-image:var(--img-hochzeit)}
.page-hero.ph-kontakt{background-image:var(--img-kontakt)}
.page-hero.ph-ueber{background-image:var(--img-ueber)}
.page-hero.ph-musik{background-image:var(--img-musik)}

/* ============================================================
   ANIMATIONS-STANDARD UNTERSEITEN (dezent, Premium)
   ============================================================ */
/* Reduzierte „Signatur": dezente Gold-Schimmerlinie statt großem Equalizer */
.accent-line{height:2px;width:88px;margin-top:22px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);background-size:200% 100%;
  animation:accent-shimmer 3.6s ease-in-out infinite}
@keyframes accent-shimmer{0%{background-position:150% 0}100%{background-position:-150% 0}}

/* Hover-Effekte NUR auf echten Zeigergeräten – kein „Sticky-Hover" auf Touch */
@media (hover:none){
  .pkg:hover,.offer:hover,.xtile:hover{transform:none}
}

/* Reduced Motion: Bewegung weitgehend deaktivieren, Inhalte sofort sichtbar */
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-2,.reveal-3{opacity:1!important;transform:none!important;transition:none!important}
  .accent-line{animation:none}
  html{scroll-behavior:auto}
}

/* ============ Fotobox-Seite: 3er-Grid, Vorteile-/Leistungs-Grids, Kopfbild ============ */
.page-hero.ph-fotobox{background-image:var(--img-fotobox-hero)}
.pkg-grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.pkg-grid.cols-3{grid-template-columns:1fr}}

.feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-top:8px}
.feat3 .fi{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.feat3 .fi .ico-i{width:1.7em;height:1.7em;color:var(--gold);flex:none}
.feat3 .fi b{display:block;font-size:var(--step-0)}
.feat3 .fi small{color:var(--text-dim)}
@media (max-width:820px){.feat3{grid-template-columns:1fr}}

.incl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-top:16px;text-align:left}
.incl-grid .ii{display:flex;gap:12px;align-items:flex-start}
.incl-grid .ii .ico-i{width:1.5em;height:1.5em;color:var(--gold);flex:none;margin-top:.1em}
.incl-grid .ii b{display:block}
.incl-grid .ii small{color:var(--text-dim)}
@media (max-width:820px){.incl-grid{grid-template-columns:1fr}}

/* ============ DJ-Hub-Seite (/preise/) ============ */
.page-hero.ph-preise{background-image:var(--img-preise)}

.evt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:12px}
.evt{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,3vw,32px);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-decoration:none;color:inherit;transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition)}
.evt__ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--grad-accent);color:var(--on-accent)}
.evt__ico .ico-i{width:26px;height:26px}
.evt h3{margin:0;font-size:var(--step-1)}
.evt p{color:var(--text-dim);margin:0}
.evt .card__link{margin-top:auto;color:var(--gold);font-weight:var(--fw-bold)}
@media (hover:hover){.evt:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gold) 45%,var(--line));box-shadow:var(--shadow-md)}}
@media (max-width:820px){.evt-grid{grid-template-columns:1fr}}

.sorglos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:14px;text-align:left}
.sg{padding:clamp(22px,3vw,30px);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.sg__head{display:flex;align-items:center;gap:.6em;margin-bottom:16px}
.sg__head .ico-i{width:1.5em;height:1.5em;color:var(--gold);flex:none}
.sg__head h3{margin:0;font-size:var(--step-1)}
.sg ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.sg li{padding-left:1.4em;position:relative;color:var(--text-dim);font-size:var(--step--1);line-height:1.55}
.sg li::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.sg li strong{display:block;color:var(--text);margin-bottom:2px}
@media (max-width:900px){.sorglos-grid{grid-template-columns:1fr}}

.fbx-band{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;padding:clamp(20px,3vw,32px);border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));border-radius:var(--radius);background:color-mix(in srgb,var(--gold) 6%,var(--surface-2))}
.fbx__t{display:flex;align-items:center;gap:.6em;font-size:var(--step-1);font-weight:var(--fw-bold)}
.fbx__t .ico-i{width:1.4em;height:1.4em;color:var(--gold);flex:none}
@media (max-width:640px){.fbx-band{flex-direction:column;align-items:flex-start}}

/* Hervorgehobene Hinweis-Box (z. B. Anfahrt & Pfalz-Regel) */
.note-band{margin-top:clamp(18px,2.5vw,28px);padding:clamp(20px,3vw,28px);border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));border-radius:var(--radius);background:color-mix(in srgb,var(--gold) 6%,transparent);text-align:left}
.note-band .sg__head{margin-bottom:10px}
.note-band p{color:var(--text-dim);margin-bottom:8px;line-height:1.55}
.note-band p:last-child{margin-bottom:0}
.note-band p strong{color:var(--text)}

/* ============ Geburtstag: Deal-Karte, Check-Listen, Tipp-Band ============ */
.page-hero.ph-geburtstag{background-image:var(--img-geburtstag)}

.deal{position:relative;overflow:hidden;border:1.5px solid color-mix(in srgb,var(--gold) 55%,var(--line));border-radius:var(--radius);background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 8%,var(--surface-2)),var(--surface-2));padding:clamp(26px,4vw,46px);box-shadow:var(--shadow-gold)}
.deal::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-accent)}
.deal__head{text-align:center;max-width:52ch;margin:0 auto 22px}
.deal__badge{display:inline-flex;align-items:center;gap:.4em;padding:.35em .85em;border-radius:var(--radius-pill);background:var(--grad-accent);color:var(--on-accent);font-weight:var(--fw-black);font-size:var(--step--1)}
.deal__badge .ico-i{width:1.05em;height:1.05em}
.deal__head h2{margin:14px 0 0}
.deal__music{display:inline-flex;align-items:center;gap:.4em;color:var(--text-dim);margin:10px 0}
.deal__music .ico-i{width:1.05em;height:1.05em;color:var(--gold)}
.deal__price{font-size:clamp(2rem,5vw,2.8rem);font-weight:var(--fw-black);color:var(--gold);margin:6px 0 16px;line-height:1.1}
.deal__price span{display:block;font-size:var(--step--1);font-weight:600;color:var(--text-dim);margin-top:6px}
.deal__opt{color:var(--text-dim);font-size:var(--step--1);margin-top:14px}
.deal__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,34px);margin-top:6px}
@media (max-width:760px){.deal__cols{grid-template-columns:1fr}}

.chk{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.chk li{position:relative;padding-left:1.7em;color:var(--text-muted);line-height:1.5}
.chk li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold);font-weight:700}

.tip-band{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;padding:clamp(20px,3vw,30px);border:1px solid color-mix(in srgb,var(--gold) 50%,var(--line));border-radius:var(--radius);background:color-mix(in srgb,var(--gold) 9%,var(--surface-2))}
.tip__t{display:flex;flex-direction:column;gap:4px;max-width:60ch}
.tip__t b{display:flex;align-items:center;gap:.5em;font-size:var(--step-1)}
.tip__t b .ico-i{width:1.3em;height:1.3em;color:var(--gold);flex:none}
.tip__t small{color:var(--text-dim)}
@media (max-width:600px){.tip-band{flex-direction:column;align-items:flex-start}}

/* ============ Startseiten-Ergänzungen (Chips, Extra-Badges, Highlights) ============ */
.tc{text-align:center}
.muted{color:var(--text-dim)}
.mt-3{margin-top:clamp(24px,4vw,40px)}
.claim-hi{font-size:var(--step-1);font-weight:var(--fw-black);color:var(--gold);margin:16px 0}

.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.chip{display:inline-flex;align-items:center;padding:.42em .9em;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);font-size:var(--step--1);color:var(--text-muted)}

.ex-badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:16px 0 22px}
.ex-badge{display:inline-flex;align-items:center;gap:.5em;padding:.6em 1.05em;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);text-decoration:none;color:var(--text);font-size:var(--step--1);transition:transform var(--transition),border-color var(--transition)}
.ex-badge .ico-i{width:1.1em;height:1.1em;color:var(--gold);flex:none}
@media (hover:hover){.ex-badge:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}}

/* ============ Geburtstag – Aufwertung (Hero-Preis, Stats, Feature-Karten, Party-Break, Booster) ============ */
.hero-price{display:flex;flex-direction:column;gap:2px;margin:8px 0 14px}
.hp__amt{font-size:clamp(2.2rem,6vw,3rem);font-weight:var(--fw-black);color:var(--gold);line-height:1}
.hp__sub{color:var(--text-dim);font-size:var(--step--1)}
.hero-opt{display:inline-flex;align-items:center;gap:.45em;color:var(--text-dim);font-size:var(--step--1);margin-top:4px}
.hero-opt .ico-i{width:1.05em;height:1.05em;color:var(--gold)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px);margin-top:18px;text-align:center}
.stat{padding:22px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.stat b{display:block;font-size:clamp(1.7rem,4vw,2.5rem);font-weight:var(--fw-black);color:var(--gold);line-height:1}
.stat small{display:block;margin-top:8px;color:var(--text-dim);font-size:var(--step--1)}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}

.fcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(16px,2vw,22px);margin-top:14px}
.fcard{padding:clamp(20px,3vw,28px);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:transform var(--transition),border-color var(--transition)}
.fcard__ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:color-mix(in srgb,var(--gold) 12%,var(--surface-2));color:var(--gold);margin-bottom:12px}
.fcard__ico .ico-i{width:24px;height:24px}
.fcard h3{margin:0 0 6px;font-size:var(--step-0)}
.fcard p{margin:0;color:var(--text-dim);font-size:var(--step--1);line-height:1.5}
@media (hover:hover){.fcard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--gold) 40%,var(--line))}}

.party-break{position:relative;overflow:hidden;border-radius:var(--radius);min-height:300px;display:flex;align-items:center;justify-content:center;text-align:center;background-image:var(--img-event);background-size:cover;background-position:center;padding:clamp(40px,8vw,90px) 24px}
.party-break::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,12,20,.58),rgba(9,12,20,.78))}
.party-break>*{position:relative;max-width:54ch}
.party-break h2{color:#fff;margin-bottom:8px}
.party-break p{color:rgba(255,255,255,.9);font-size:var(--step-1)}

.chk--2{columns:2;column-gap:36px}
.chk--2 li{break-inside:avoid}
@media (max-width:640px){.chk--2{columns:1}}

.booster{position:relative;overflow:hidden;text-align:center;border:1.5px solid color-mix(in srgb,var(--gold) 60%,var(--line));border-radius:var(--radius);background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 12%,var(--surface-2)),var(--surface-2));padding:clamp(30px,5vw,56px);box-shadow:var(--shadow-gold)}
.booster::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-accent)}
.booster__ico{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--grad-accent);color:var(--on-accent);margin-bottom:14px}
.booster__ico .ico-i{width:32px;height:32px}
.booster h2{margin:0 0 10px}
.booster p{max-width:58ch;margin:0 auto 20px;color:var(--text-muted)}

/* ============ Rechtsseiten (Impressum, Datenschutz …) ============ */
.legal h2{font-size:var(--step-1);margin:32px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--text-muted);line-height:1.65;margin-bottom:14px}
.legal a{color:var(--gold);text-decoration:underline;word-break:break-word}
.legal .btn{text-decoration:none}

.legal ul{margin:0 0 14px 1.2em;color:var(--text-muted);line-height:1.65}
.legal li{margin-bottom:8px}

/* ============ Marken-Logo (Header/Footer) ============ */
.brand{display:inline-flex;align-items:center;gap:8px}
.brand__logo{height:clamp(30px,4.4vw,40px);width:auto;display:block}

/* ============ Kontaktseite (Editorial-Portrait, WhatsApp-Wahl, Vertrauen) ============ */
.hero-note{color:var(--text-dim);font-size:var(--step--1);margin-top:10px;max-width:58ch}

.editorial{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(24px,4vw,48px);align-items:center}
.editorial__img{background-image:var(--img-portrait);background-size:cover;background-position:center top;border-radius:var(--radius);min-height:clamp(340px,42vw,470px);border:1px solid var(--line)}
.editorial__text h2{margin:6px 0 12px}
.editorial__text p{color:var(--text-muted);line-height:1.65;margin-bottom:12px}
@media (max-width:820px){.editorial{grid-template-columns:1fr}.editorial__img{min-height:300px}}

.contact-choice{text-align:center;padding:clamp(24px,4vw,38px);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.contact-choice h2{margin:0 0 8px}
.contact-choice p{color:var(--text-muted);max-width:52ch;margin:0 auto 16px}
.contact-choice__sub{margin:14px auto 0;max-width:52ch}

.or-divider{display:flex;align-items:center;gap:16px;text-align:center;color:var(--text-dim);margin:clamp(26px,4vw,38px) 0}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.or-divider span{font-size:var(--step--1);white-space:nowrap}

.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px}
.why{display:flex;align-items:flex-start;gap:.55em;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-size:var(--step--1);line-height:1.4}
.why::before{content:"✓";color:var(--gold);font-weight:800;flex:none;line-height:1.4}

/* ============ Über mich ============ */
/* Musik-Kategorien */
.music-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2vw,22px);margin-top:16px}
.music-card{padding:clamp(20px,3vw,26px);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.music-card h3{margin:0 0 12px;font-size:var(--step-0);display:flex;align-items:center;gap:.5em}
.music-card h3 .ico-i{width:1.15em;height:1.15em;color:var(--gold)}
.music-card .chips{justify-content:flex-start;margin:0}

/* Große Signal-Wörter (LIVE MIXING ENERGIE MOMENT) */
.word-row{display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,34px);justify-content:center;margin:8px 0 4px}
.word-row span{font-size:clamp(1.6rem,6vw,3rem);font-weight:var(--fw-black);letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--gold) 70%,transparent);text-stroke:1px color-mix(in srgb,var(--gold) 70%,transparent)}
.word-row span:nth-child(2){color:var(--gold);-webkit-text-stroke:0;text-stroke:0}

/* Timeline (Planung & Vorbereitung) */
.timeline{display:grid;gap:0;margin-top:18px;border-left:2px solid color-mix(in srgb,var(--gold) 40%,var(--line));padding-left:clamp(18px,3vw,28px)}
.tl{position:relative;padding:0 0 clamp(20px,3vw,28px) 4px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:calc(-1*clamp(18px,3vw,28px) - 7px);top:2px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 18%,transparent)}
.tl__no{font-size:var(--step--1);font-weight:var(--fw-black);color:var(--gold);letter-spacing:.08em}
.tl h3{margin:2px 0 4px;font-size:var(--step-0)}
.tl p{margin:0;color:var(--text-dim);font-size:var(--step--1);line-height:1.5}

/* Ablauf-/Tagesplanung-Kacheln */
.flow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:16px}
.flow{padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-align:center}
.flow .ico-i{width:26px;height:26px;color:var(--gold)}
.flow b{display:block;margin:8px 0 2px;font-size:var(--step-0)}
.flow small{color:var(--text-dim)}

/* Verlinkte Event-Karten */
.link-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(16px,2vw,22px);margin-top:16px}
a.link-card{display:block;padding:clamp(20px,3vw,26px);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-decoration:none;color:var(--text);transition:transform var(--transition),border-color var(--transition)}
a.link-card .ico-i{width:26px;height:26px;color:var(--gold)}
a.link-card h3{margin:10px 0 6px;font-size:var(--step-0)}
a.link-card p{margin:0;color:var(--text-dim);font-size:var(--step--1);line-height:1.5}
a.link-card .go{display:inline-block;margin-top:10px;color:var(--gold);font-size:var(--step--1)}
@media (hover:hover){a.link-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}}

/* Signatur-Abschluss */
.signoff{text-align:center}
.signoff__logo{height:64px;width:auto;margin:0 auto 14px;display:block}
.signoff__name{font-size:var(--step-2);font-weight:var(--fw-black);margin:0}
.signoff__sub{color:var(--text-dim);margin:2px 0 18px}
.editorial__img--liveset{background-image:var(--img-liveset)}
.editorial--rev .editorial__img{order:2}
.btn-row--center{justify-content:center}
.music-card{display:flex;flex-direction:column}
.music-card p{color:var(--text-dim);font-size:var(--step--1);line-height:1.55;margin:0 0 14px}
.music-card .chips{margin-top:auto}

/* ============ Musik-Seite: 3+2-Layout, House-Highlight, Video-Break ============ */
.music-grid--32{grid-template-columns:repeat(6,1fr)}
.music-grid--32>.music-card{grid-column:span 2}
.music-grid--32>.music-card:nth-child(4){grid-column:2 / span 2}
.music-grid--32>.music-card:nth-child(5){grid-column:4 / span 2}
@media (max-width:980px){
  .music-grid--32{grid-template-columns:repeat(2,1fr)}
  .music-grid--32>.music-card,
  .music-grid--32>.music-card:nth-child(4),
  .music-grid--32>.music-card:nth-child(5){grid-column:auto}
}
@media (max-width:620px){.music-grid--32{grid-template-columns:1fr}}
.music-card{position:relative}
.music-card--feature{border-color:color-mix(in srgb,var(--gold) 55%,var(--line));box-shadow:var(--shadow-gold)}
.music-card__badge{position:absolute;top:-11px;left:clamp(20px,3vw,26px);background:var(--grad-accent);color:var(--on-accent);font-size:.72rem;font-weight:var(--fw-black);letter-spacing:.02em;padding:.3em .85em;border-radius:var(--radius-pill)}

.video-break{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--surface-2)}
.video-break__v{display:block;width:100%;height:100%;object-fit:cover}
.video-break__cap{position:absolute;inset:auto 0 0 0;margin:0;padding:clamp(16px,3vw,30px);text-align:center;color:#fff;font-weight:800;font-size:clamp(1.05rem,2.6vw,1.5rem);background:linear-gradient(0deg,rgba(9,12,20,.75),rgba(9,12,20,0))}

/* ============ Hero mit Hintergrund-Video (z. B. /ueber-mich/) ============ */
.page-hero--video{overflow:hidden}
.page-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.page-hero--video::before{background:linear-gradient(180deg,rgba(9,12,20,.62),rgba(9,12,20,.80))}

/* ============ Hörproben (Passwort-Gate + Spotify-Slots) ============ */
.gate{max-width:460px;margin:0 auto;text-align:center;padding:clamp(26px,4vw,42px);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.gate__ico{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:color-mix(in srgb,var(--gold) 14%,var(--surface-2));color:var(--gold);margin-bottom:8px}
.gate__ico .ico-i{width:30px;height:30px}
.gate h2{margin:0 0 6px}
.gate>p{color:var(--text-muted);margin:0 0 12px}
.gate .field{text-align:left}
.gate .btn{width:100%;margin-top:6px}
.gate .form-hint{margin-top:14px}

.exklusiv-bar{display:flex;justify-content:flex-end;margin-bottom:6px}
.exklusiv-bar a{color:var(--text-dim);font-size:var(--step--1);text-decoration:underline}

.infobox{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:clamp(16px,2.5vw,22px)}
.infobox b{display:flex;align-items:center;gap:.5em;font-size:var(--step-0)}
.infobox b .ico-i{width:1.15em;height:1.15em;color:var(--gold)}
.infobox p{margin:8px 0 0;color:var(--text-dim);font-size:var(--step--1);line-height:1.55}

.spot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(16px,2vw,22px);margin-top:14px}
.spot{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:clamp(16px,2.5vw,22px)}
.spot h3{margin:0 0 4px;font-size:var(--step-0)}
.spot>p{margin:0 0 12px;color:var(--text-dim);font-size:var(--step--1);line-height:1.5}
.spot__ph{display:flex;align-items:center;justify-content:center;text-align:center;min-height:152px;border:1.5px dashed color-mix(in srgb,var(--gold) 45%,var(--line));border-radius:12px;color:var(--text-dim);font-size:var(--step--1);background:var(--surface-2);padding:16px;letter-spacing:.02em}
.spot iframe{width:100%;border:0;border-radius:12px;display:block}