/* Hochzeit-DJ | Responsive design | CSS v1.9 */
:root {
  --ink: #29252a;
  --muted: #6f6970;
  --plum: #34222e;
  --plum-dark: #221820;
  --wine: #693f50;
  --gold: #cfad77;
  --gold-dark: #a37d47;
  --cream: #f8f5f0;
  --cream-deep: #f0e9df;
  --white: #fff;
  --line: #e8e0d8;
  --serif: 'Iowan Old Style', 'Baskerville', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --sans: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --shadow: 0 20px 70px rgba(37, 25, 32, .10);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 95px; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); line-height: 1.65; -webkit-font-smoothing: antialiased; }
body, button, a { -webkit-tap-highlight-color: transparent; }
::selection { color: #fff; background: var(--wine); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 3px solid #d8aa5c; outline-offset: 5px; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.container { width: min(100% - 104px, 1276px); margin-inline: auto; }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 1000; padding: 12px 18px; color: var(--plum); background: #fff; border-radius: 4px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 400; }
h2 { font-family: var(--serif); font-size: clamp(2.6rem, 4.5vw, 5rem); letter-spacing: -.045em; line-height: 1.13; }
h2 em, h3 em { font-weight: 400; color: var(--wine); }
p { line-height: 1.85; }
.section-padding { padding: 133px 0; }
.section-eyebrow { display: flex; align-items: center; gap: 15px; font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: .235em; color: var(--wine); margin-bottom: 26px; }
.section-eyebrow span { color: var(--gold-dark); }
.section-eyebrow.light { color: #eadccf; }
.section-eyebrow.light span { color: var(--gold); }
.section-eyebrow.centered { justify-content: center; }
.heading-period { color: var(--gold-dark); }

/* Header and accessible dropdown */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; color: #fff; transition: background .25s ease, box-shadow .25s ease, color .25s ease; }
.header-inner { position: relative; display: flex; min-height: 108px; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-symbol { display: grid; place-items: center; width: 84px; height: 84px; flex: 0 0 auto; }
.brand-symbol img { width: 84px; height: 84px; display: block; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; gap: 5px; }
.brand-copy strong { font-size: 20px; font-weight: 700; letter-spacing: .08em; }
.brand-copy small { font-size: 9px; font-weight: 600; letter-spacing: .2em; opacity: .82; }
.header-actions { display: flex; align-items: center; gap: 28px; }
.header-contact { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.header-contact span { padding-left: 10px; color: var(--gold); font-size: 19px; }
.menu-toggle { display: flex; align-items: center; justify-content: center; gap: 16px; min-width: 116px; min-height: 48px; padding: 10px 17px 10px 19px; border: 1px solid rgba(255,255,255,.48); border-radius: 40px; background: rgba(255,255,255,.10); color: currentColor; cursor: pointer; transition: background .2s, border-color .2s; }
.menu-toggle:hover { background: rgba(255,255,255,.22); }
.menu-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.hamburger { width: 19px; height: 14px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.hamburger i { display: block; height: 1.5px; width: 100%; background: currentColor; transition: transform .2s ease, width .2s; }
.hamburger i:last-child { width: 70%; align-self: flex-end; }
.menu-open .hamburger i:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-open .hamburger i:last-child { transform: translateY(-3.25px) rotate(-45deg); width: 100%; }
.site-header.is-scrolled, .page-inner .site-header { color: var(--ink); background: rgba(250,247,242,.97); box-shadow: 0 5px 30px rgba(0,0,0,.05); backdrop-filter: blur(15px); }
.site-header.is-scrolled .header-contact, .page-inner .header-contact { color: var(--ink); }
.site-header.is-scrolled .menu-toggle, .page-inner .menu-toggle { background: transparent; border-color: #a6a09d; }
.site-header.is-scrolled .menu-toggle:hover, .page-inner .menu-toggle:hover { background: #eee6dd; }
.menu-panel { position: absolute; right: max(52px, calc((100vw - 1276px)/2)); top: 91px; width: min(420px, calc(100vw - 40px)); color: #f8f1ea; background: var(--plum); border: 1px solid rgba(255,255,255,.11); border-radius: 6px; box-shadow: 0 28px 80px rgba(0,0,0,.28); overflow: hidden; }
.menu-panel-inner { padding: 37px 38px 24px; }
.menu-kicker { display: block; font-size: 10px; letter-spacing: .24em; font-weight: 700; color: var(--gold); padding-bottom: 18px; }
.menu-panel-inner > a { display: flex; justify-content: space-between; align-items: center; padding: 13px 1px; color: #fff; font-family: var(--serif); font-size: 26px; line-height: 1.28; border-bottom: 1px solid rgba(255,255,255,.12); transition: color .2s, padding .2s; }
.menu-panel-inner > a:hover, .menu-panel-inner > a:focus-visible { color: var(--gold); padding-left: 7px; }
.menu-panel-inner > a > span { font-family: var(--sans); font-size: 17px; color: var(--gold); }
.menu-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 25px; font-size: 10px; color: #cfbfc4; }
.menu-meta a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* Hero */
.hero { position: relative; display: flex; align-items: center; min-height: min(900px, 100svh); min-height: max(700px, 100svh); color: #fff; overflow: hidden; background: #5b4345; isolation: isolate; }
.hero-visual { position: absolute; inset: 0; z-index: -3; background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1600&q=78'); background-color: #685455; background-position: center 48%; background-size: cover; transform: scale(1.025); }
.hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(27, 18, 25, .90) 0%, rgba(37, 25, 30, .72) 41%, rgba(39, 25, 30, .18) 100%), linear-gradient(0deg, rgba(30,21,27,.55), transparent 29%, rgba(30,21,27,.2)); }
.hero::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 53%; width: 560px; height: 560px; border: 1px solid rgba(235,211,177,.16); border-radius: 50%; transform: translate(-79%, -50%); pointer-events: none; }
.hero-content { position: relative; padding-top: 124px; padding-bottom: 100px; }
.hero-eyebrow { display: flex; align-items: center; gap: 17px; font-size: 11px; letter-spacing: .23em; font-weight: 700; color: #ead5b1; margin-bottom: 40px; }
.eyebrow-line { width: 42px; height: 1px; background: var(--gold); }
.hero h1 { margin-bottom: 27px; font-size: clamp(4.5rem, 9.6vw, 10rem); line-height: .99; letter-spacing: -.065em; font-family: var(--serif); }
.hero-heading-second { display: block; font-size: clamp(2.4rem, 5.1vw, 5.5rem); letter-spacing: -.048em; margin-top: 17px; }
.hero-heading-second em { color: #e9c992; font-weight: 400; }
.hero-content > p { max-width: 570px; color: #f4edf0; line-height: 1.9; font-size: 16px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 35px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 60px; padding: 17px 25px; font-size: 12px; font-weight: 700; letter-spacing: .025em; border: 1px solid transparent; transition: background .2s, transform .2s, color .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 19px; line-height: 1; font-weight: 400; }
.button-gold { background: var(--gold); color: #251c20; }
.button-gold:hover { background: #dfc292; }
.button-ghost { border-color: rgba(255,255,255,.52); color: #fff; background: rgba(255,255,255,.07); }
.button-ghost:hover { background: rgba(255,255,255,.18); }
.button-dark { background: var(--plum); color: #fff; }
.button-dark:hover { background: var(--wine); }
.button-full { width: 100%; }
.hero-foot { position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 10px; font-weight: 600; letter-spacing: .16em; color: #f1e3d8; }
.scroll-note { display: flex; gap: 12px; align-items: center; }
.scroll-mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #b4a197; border-radius: 50%; font-size: 15px; }

/* Intro */
.intro { background: var(--cream); }
.intro-layout { display: grid; grid-template-columns: 1.06fr 1fr; gap: 9%; align-items: start; }
.intro-title-col h2 { margin-bottom: 0; }
.intro-copy-col { padding-top: 43px; }
.intro-copy-col p { color: var(--muted); font-size: 15px; }
.intro-copy-col .lead { font-family: var(--serif); font-size: clamp(21px, 2.2vw, 27px); line-height: 1.5; color: var(--ink); letter-spacing: -.013em; margin-bottom: 22px; }
.text-link { display: inline-flex; align-items: center; gap: 22px; color: var(--wine); font-size: 12px; font-weight: 700; padding-bottom: 7px; border-bottom: 1px solid var(--gold-dark); margin-top: 17px; }
.text-link span { font-size: 18px; transition: transform .2s; }
.text-link:hover span { transform: translate(3px,-2px); }

/* Atmosphere section */
.experience { display: grid; grid-template-columns: 50% 50%; min-height: 625px; background: var(--plum); color: #fff; }
.experience-photo { position: relative; min-height: 550px; background-size: cover; background-position: center; background-color: #a78572; }
.photo-wedding { background-image: url('https://images.unsplash.com/photo-1537633552985-df8429e8048b?auto=format&fit=crop&w=1100&q=78'); }
.experience-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30,18,24,.52), transparent 45%); }
.image-label { position: absolute; z-index: 1; bottom: 38px; left: 55px; color: #fff; letter-spacing: .19em; font-size: 10px; font-weight: 700; }
.experience-content { display: flex; align-items: center; padding: 75px min(7vw, 110px); }
.experience-inner { max-width: 510px; }
.experience h2 { font-size: clamp(2.65rem, 4vw, 4.6rem); margin-bottom: 24px; }
.experience h2 em { color: var(--gold); }
.experience p { font-size: 15px; line-height: 1.9; color: #d8cdd4; margin-bottom: 35px; }
.moment-list { border-top: 1px solid rgba(255,255,255,.25); }
.moment-list span { display: flex; align-items: center; gap: 28px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.25); color: var(--gold); font-size: 11px; }
.moment-list b { color: #fff; font-size: 13px; font-weight: 500; }

/* Team */
.team-section { background: #fff; }
.center-title { text-align: center; max-width: 810px; margin: 0 auto 21px; }
.center-description { max-width: 610px; color: var(--muted); text-align: center; font-size: 15px; margin: 0 auto 65px; }
.team-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.value-card { padding: 41px 45px 52px; }
.value-card:not(:last-child) { border-right: 1px solid var(--line); }
.value-icon { width: 56px; height: 56px; display: grid; place-items: center; color: var(--gold-dark); margin-bottom: 29px; }
.value-icon svg { width: 46px; height: 46px; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.value-card h3 { margin-bottom: 12px; font-size: 27px; font-family: var(--serif); letter-spacing: -.025em; }
.value-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.team-bottom { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 28px; margin-top: 35px; font-size: 14px; color: var(--muted); }
.team-bottom .text-link { margin-top: 0; }

/* References */
.references { background: var(--cream); }
.section-head-inline { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 47px; }
.section-head-inline h2 { margin: 0; }
.section-head-inline > p { max-width: 310px; font-size: 13px; line-height: 1.75; color: var(--muted); margin: 0 0 9px; }
.gallery-grid { display: grid; grid-template-columns: 1.22fr .81fr .81fr; gap: 17px; }
.gallery-card { min-width: 0; background: #ddd1c5; position: relative; height: 450px; overflow: hidden; }
.gallery-photo { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #a18b81; transition: transform .5s ease; }
.gallery-card:hover .gallery-photo { transform: scale(1.045); }
.gallery-card::after { content:''; position: absolute; inset: 50% 0 0; background: linear-gradient(0deg, rgba(24, 16, 22, .85), transparent); pointer-events:none; }
.gallery-caption { position: absolute; bottom: 28px; left: 26px; right: 22px; z-index: 1; color: #fff; }
.gallery-caption span { display: block; font-size: 9px; font-weight: 700; letter-spacing: .15em; color: #ecd0a3; margin-bottom: 9px; }
.gallery-caption strong { font-size: 25px; font-weight: 400; font-family: var(--serif); line-height: 1.25; }
.references-note { font-size: 11px; color: #847e7c; margin: 18px 0 0; }

/* Fotobox */
.photobooth { background: #e9dcd1; overflow: hidden; }
.photobooth-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 610px; gap: 90px; align-items: center; }
.photobooth-art { height: 610px; position: relative; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #f8eee6, transparent 49%), linear-gradient(125deg, #e7d1c4, #d8b9aa); }
.photobooth-art::before, .photobooth-art::after { position: absolute; content: ''; width: 360px; height: 360px; border: 1px solid rgba(105,63,80,.25); border-radius: 50%; }
.photobooth-art::before { top: 40px; left: 30px; }.photobooth-art::after { width: 280px; height: 280px; bottom: 45px; right: 15px; }
.photo-booth-silhouette { position: relative; z-index: 1; height: 390px; width: 240px; border-radius: 125px 125px 16px 16px; background: linear-gradient(135deg, #fcf8f3 5%, #f1e2d5 98%); box-shadow: 27px 30px 45px rgba(79,48,44,.18), inset -8px 0 15px rgba(98,66,58,.06); border: 8px solid rgba(255,255,255,.67); display: flex; flex-direction: column; align-items: center; }
.booth-top { display: flex; flex-direction: column; text-align: center; margin-top: 36px; letter-spacing: .3em; line-height: 1.7; color: var(--wine); font-size: 12px; font-weight: 700; }
.booth-lens { margin-top: 25px; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 45% 40%, #b89e9f 0 12%, #362e38 14% 38%, #18191e 39% 50%, #8c7570 52% 62%, #e8d7cd 64% 100%); box-shadow: 0 0 0 8px #faf4ef, 0 4px 14px #ba9d92; }
.booth-flash { width: 42px; height: 11px; border: 2px solid #d8b59e; border-radius: 3px; background: #fff; margin-top: 23px; }
.booth-strip { position: absolute; bottom: -26px; left: -49px; display: flex; flex-direction: column; gap: 7px; padding: 8px; width: 72px; height: 180px; background: #fff; transform: rotate(-11deg); box-shadow: 6px 12px 20px #997d7250; }
.booth-strip i { display: block; flex: 1; background: linear-gradient(135deg, #ac8d82, #755360, #ead3c1); }
.photo-star { position: absolute; z-index: 2; color: var(--wine); }
.photo-star-one { font-size: 67px; right: 19%; top: 11%; }.photo-star-two { font-size: 37px; left: 12%; bottom: 22%; }
.photobooth-copy { max-width: 525px; padding: 80px 0; }
.photobooth-copy h2 { margin-bottom: 26px; }
.photobooth-copy p { font-size: 15px; color: #62545a; }
.photobooth-copy .button { margin-top: 18px; }

/* Notdienst */
.emergency { position: relative; background: var(--plum); color: #fff; padding: 107px 0; }
.emergency::after { content: '✳'; position: absolute; top: 0; right: 4%; font-size: 300px; opacity: .035; line-height: 1; pointer-events: none; }
.emergency-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12%; align-items: center; position: relative; z-index: 1; }
.emergency h2 { margin-bottom: 24px; }
.emergency h2 em { color: var(--gold); }
.emergency p { max-width: 660px; font-size: 15px; color: #d7cbd2; }
.emergency .button { margin-top: 17px; }
.emergency-number { border-left: 1px solid #826c79; padding: 35px 0 35px 40px; }
.emergency-number > span { display: block; font-size: 11px; letter-spacing: .2em; color: var(--gold); font-weight: 700; }
.emergency-number > a { display: block; font-family: var(--serif); font-size: clamp(2rem, 3vw, 3.2rem); white-space: nowrap; margin: 11px 0; }
.emergency-number > a:hover { color: var(--gold); }
.emergency-number > small { color: #c2b4bd; font-size: 11px; }

/* Contact */
.contact { background: #faf7f2; }
.contact-layout { display: grid; grid-template-columns: 1fr .86fr; gap: 11%; align-items: center; }
.contact h2 { max-width: 650px; }
.contact p { max-width: 560px; font-size: 15px; color: var(--muted); }
.contact-details { display: flex; flex-direction: column; gap: 12px; margin-top: 43px; }
.contact-details > span { font-size: 11px; color: var(--wine); letter-spacing: .15em; font-weight: 700; }
.contact-details > a { font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 3.5rem); white-space: nowrap; line-height: 1.25; }
.contact-details > a span { font-size: 20px; color: var(--gold-dark); }
.contact-card { background: var(--plum); color: #fff; padding: 61px 62px 55px; box-shadow: var(--shadow); position: relative; }
.contact-card::after { content: ''; pointer-events: none; position: absolute; inset: 13px; border: 1px solid rgba(215,181,124,.24); }
.contact-card > * { position: relative; z-index: 1; }
.contact-card-icon { font-size: 42px; line-height: 1; color: var(--gold); margin-bottom: 20px; }
.contact-card-kicker { font-size: 10px; letter-spacing: .18em; color: var(--gold); font-weight: 700; }
.contact-card h3 { font-family: var(--serif); font-size: clamp(2.5rem, 3.4vw, 4rem); letter-spacing: -.045em; margin: 15px 0 18px; }
.contact-card h3 em { color: var(--gold); }
.contact-card p { color: #d7cad1; font-size: 14px; }
.contact-card .button { margin: 15px 0 18px; }
.contact-card small { display: block; font-size: 11px; line-height: 1.6; color: #d0c1c9; }

/* Footer */
.site-footer { color: #ece5e9; background: #241b23; }
.footer-top { padding: 68px 0; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.footer-wordmark { font-family: var(--serif); font-size: 44px; line-height: 1.1; }
.footer-wordmark span { color: var(--gold); }
.footer-top p { color: #b9aeb7; margin: 9px 0 0; font-size: 13px; }
.footer-phone { font-family: var(--serif); font-size: clamp(21px, 2.3vw, 33px); white-space: nowrap; }
.footer-phone span { font-size: 17px; color: var(--gold); }
.footer-bottom { padding: 26px 0; border-top: 1px solid #493b46; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 11px; color: #b9aeb7; }
.footer-links { display: flex; gap: 27px; }
.footer-links a:hover { color: var(--gold); }

/* Legal page */
.legal-main { min-height: 76vh; padding: 180px 0 120px; }
.legal-wrap { max-width: 900px; }
.back-link { display: inline-block; font-size: 13px; margin-bottom: 70px; color: var(--wine); }
.back-link:hover { text-decoration: underline; }
.legal-wrap h1 { font-family: var(--serif); font-size: clamp(4rem, 8vw, 7rem); letter-spacing: -.055em; line-height: 1; margin-bottom: 18px; }
.legal-intro { color: var(--muted); font-size: 15px; margin-bottom: 40px; }
.legal-card { padding: 45px 50px 50px; background: #fff; border: 1px solid var(--line); }
.legal-card h2 { font-family: var(--serif); font-size: 29px; margin: 25px 0 12px; }
.legal-card h2:first-child { margin-top: 0; }
.legal-card address { font-style: normal; line-height: 1.85; }
.legal-card p { margin-bottom: 6px; font-size: 15px; }
.legal-card a { color: var(--wine); text-decoration: underline; text-underline-offset: 3px; }
.legal-card .missing-data { color: #ab412f; font-weight: 600; }
.legal-card .legal-note { font-size: 12px; color: var(--muted); margin-top: 12px; }

/* Responsive */
@media (min-width: 1440px) { .experience-content { padding-right: 15%; } }
@media (max-width: 1100px) {
  .container { width: min(100% - 72px, 1276px); }
  .menu-panel { right: 36px; }
  .section-padding { padding: 100px 0; }
  .value-card { padding: 38px 24px 45px; }
  .photobooth-layout { gap: 55px; }
  .contact-layout { gap: 6%; }
  .contact-card { padding: 53px 43px; }
  .emergency-layout { gap: 6%; }
}
@media (max-width: 820px) {
  .container { width: min(100% - 48px, 1276px); }
  .header-inner { min-height: 88px; }
  .header-contact { display: none; }
  .menu-panel { right: 24px; top: 76px; }
  .hero { min-height: max(690px, 96svh); }
  .hero-visual { background-position: 58% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(27,18,25,.83) 0%, rgba(39,25,30,.46) 100%), linear-gradient(0deg, rgba(28,20,27,.42), transparent 60%); }
  .hero-content { padding-top: 130px; }
  .hero h1 { font-size: clamp(4.5rem, 10vw, 7rem); }
  .hero-heading-second { font-size: clamp(2.4rem, 5.5vw, 4rem); }
  .intro-layout { grid-template-columns: 1fr; gap: 24px; }
  .intro-copy-col { padding-top: 0; max-width: 680px; }
  .experience { grid-template-columns: 1fr; }
  .experience-photo { min-height: 410px; }
  .experience-content { padding: 80px 7%; }
  .experience-inner { max-width: 660px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-main { grid-row: span 2; height: 650px; }
  .gallery-secondary, .gallery-third { height: 316px; }
  .photobooth-layout { grid-template-columns: 1fr 1fr; gap: 30px; }
  .photobooth-art { height: 520px; }
  .photobooth-copy { padding: 65px 0; }
  .photo-booth-silhouette { transform: scale(.8); }
  .contact-layout { grid-template-columns: 1fr; gap: 47px; }
  .contact-card { max-width: 630px; }
  .emergency-layout { grid-template-columns: 1fr; gap: 45px; }
  .emergency-number { max-width: 630px; padding: 22px 0 22px 30px; }
  .footer-bottom > span:last-child { display: none; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 74px; }
  .container { width: min(100% - 38px, 1276px); }
  .section-padding { padding: 79px 0; }
  .section-eyebrow { margin-bottom: 20px; font-size: 10px; }
  .header-inner { min-height: 76px; }
  .brand { gap: 4px; }
  .brand-symbol, .brand-symbol img { width: 63px; height: 63px; }
  .brand-copy strong { font-size: 15px; letter-spacing: .06em; }
  .brand-copy small { font-size: 7px; letter-spacing: .11em; }
  .menu-toggle { min-height: 44px; min-width: 50px; padding: 10px 14px; }
  .menu-label { display: none; }
  .menu-panel { top: 67px; right: 19px; width: calc(100vw - 38px); }
  .menu-panel-inner { padding: 26px 27px 22px; }
  .menu-panel-inner > a { padding: 12px 0; font-size: 24px; }
  .hero { min-height: max(690px, 100svh); }
  .hero-visual { background-position: 60% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(23,16,23,.83), rgba(27,17,22,.4)), linear-gradient(0deg, rgba(22,13,18,.6), transparent 50%); }
  .hero::before { width: 360px; height: 360px; left: 32%; top: 52%; }
  .hero-content { padding-top: 110px; padding-bottom: 93px; }
  .hero-eyebrow { font-size: 9px; line-height: 1.6; gap: 10px; letter-spacing: .15em; margin-bottom: 26px; }
  .eyebrow-line { flex: 0 0 22px; }
  .hero h1 { font-size: clamp(3.45rem, 13.5vw, 5.65rem); margin-bottom: 25px; }
  .hero-heading-second { font-size: clamp(2.0rem, 8.7vw, 3.3rem); line-height: 1.14; margin-top: 13px; }
  .hero-content > p { font-size: 14px; line-height: 1.8; max-width: 400px; }
  .hero-buttons { margin-top: 25px; gap: 10px; }
  .button { min-height: 54px; padding: 14px 19px; font-size: 12px; }
  .hero-buttons .button { width: 100%; max-width: 330px; }
  .hero-foot { bottom: 20px; font-size: 9px; letter-spacing: .12em; }
  .hero-foot > span:first-child { max-width: 200px; }
  .scroll-note { display: none; }
  h2 { font-size: clamp(2.5rem, 10vw, 3.8rem); }
  .intro-copy-col .lead { font-size: 21px; }
  .intro-copy-col p, .experience p, .contact p, .photobooth-copy p, .emergency p { font-size: 14px; }
  .experience-photo { min-height: 330px; }
  .experience-content { padding: 65px 19px; }
  .image-label { left: 25px; bottom: 28px; }
  .experience h2 { font-size: 2.9rem; }
  .center-description { margin-bottom: 36px; }
  .team-grid { grid-template-columns: 1fr; }
  .value-card { padding: 28px 4px 31px; }
  .value-card:not(:last-child) { border-right: none; border-bottom: 1px solid var(--line); }
  .value-icon { margin-bottom: 15px; }
  .team-bottom { align-items: flex-start; justify-content: flex-start; }
  .section-head-inline { display: block; margin-bottom: 30px; }
  .section-head-inline h2 { margin-bottom: 22px; }
  .section-head-inline > p { max-width: 460px; }
  .gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
  .gallery-main { grid-row: auto; grid-column: span 2; height: 365px; }
  .gallery-secondary, .gallery-third { height: 248px; }
  .gallery-caption { left: 15px; bottom: 19px; right: 10px; }
  .gallery-caption strong { font-size: 19px; }
  .gallery-caption span { font-size: 8px; }
  .photobooth-layout { width: 100%; display: flex; flex-direction: column; gap: 0; }
  .photobooth-art { width: 100%; height: 360px; }
  .photobooth-art::before { left: -40px; }
  .photobooth-copy { width: min(100% - 38px, 1276px); padding: 65px 0 80px; }
  .photobooth-copy h2 { max-width: 450px; }
  .photo-booth-silhouette { transform: scale(.64); }
  .emergency { padding: 76px 0; }
  .emergency h2 { font-size: clamp(2.5rem, 10vw, 3.8rem); }
  .emergency-number > a { font-size: clamp(1.9rem, 7vw, 3rem); }
  .contact-details > a { font-size: clamp(1.9rem, 8vw, 3rem); }
  .contact-card { padding: 45px 37px 43px; }
  .contact-card h3 { font-size: 3.2rem; }
  .footer-top { align-items: flex-start; flex-direction: column; padding: 58px 0 42px; }
  .footer-wordmark { font-size: 40px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 14px; padding: 24px 0; }
  .footer-links { flex-wrap: wrap; }
  .legal-main { padding: 120px 0 80px; }
  .back-link { margin-bottom: 55px; }
  .legal-card { padding: 28px 24px; }
}
@media (max-width: 350px) {
  .brand-symbol, .brand-symbol img { width: 51px; height: 51px; }
  .brand-copy strong { font-size: 13px; }
  .brand-copy small { font-size: 6px; }
  .hero h1 { font-size: 3.35rem; }
  .hero-eyebrow { font-size: 8px; }
  .gallery-caption strong { font-size: 16px; }
  .contact-card { padding: 40px 27px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* References – curated showcases and expandable complete directory */
.reference-showcase { margin-top: 66px; }
.reference-showcase-heading { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 25px; }
.reference-overline { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--wine); }
.reference-showcase-heading h3 { margin: 10px 0 0; font-family: var(--serif); font-size: clamp(1.85rem,3vw,2.9rem); line-height: 1.2; letter-spacing: -.03em; }
.reference-showcase-heading h3 em { color: var(--wine); }
.reference-count { white-space: nowrap; font-size: 11px; letter-spacing: .11em; font-weight: 700; color: var(--gold-dark); padding-bottom: 7px; }
.reference-highlight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.reference-highlight { min-width: 0; padding: 25px 24px 24px; display: flex; align-items: flex-start; gap: 13px; background: #fff; border: 1px solid #eae2d9; }
.reference-highlight-mark { color: var(--gold-dark); font-size: 19px; line-height: 1; flex: 0 0 auto; margin-top: 4px; }
.reference-highlight strong { display: block; font-size: 14px; line-height: 1.45; font-weight: 650; color: var(--ink); }
.reference-highlight div > span { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.reference-directory { margin-top: 24px; border-top: 1px solid #d9cfc4; border-bottom: 1px solid #d9cfc4; }
.reference-directory summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 17px; min-height: 76px; padding: 19px 8px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--ink); }
.reference-directory summary::-webkit-details-marker { display: none; }
.reference-directory summary:focus-visible { outline: 3px solid var(--gold-dark); outline-offset: -3px; }
.reference-directory-count { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); }
.reference-directory-chevron { font-size: 28px; color: var(--wine); line-height: 1; transition: transform .2s ease; }
.reference-directory[open] .reference-directory-chevron { transform: rotate(180deg); }
.reference-directory-content { padding: 12px 2px 36px; display: grid; gap: 35px; }
.reference-directory-group h4 { margin: 0 0 15px; font-size: 11px; letter-spacing: .16em; color: var(--wine); text-transform: uppercase; }
.reference-directory-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.reference-directory-list li { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; padding: 10px 0; min-width: 0; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.6; }
.reference-directory-list li > span { font-weight: 600; }
.reference-directory-list li small { color: var(--muted); font-size: 11px; }

/* BookItUp's official embedded form – own CSS deliberately scoped around widget */
.contact-card.contact-card-bookitup { background: #fffaf5; color: var(--ink); border: 1px solid #e8ded4; }
.contact-card.contact-card-bookitup::after { border-color: rgba(163,125,71,.2); }
.contact-card-bookitup .contact-card-kicker { color: var(--gold-dark); }
.contact-card-bookitup h3 em { color: var(--wine); }
.contact-card-bookitup > p { color: var(--muted); }
.bookitup-embed { width: 100%; min-width: 0; margin-top: 26px; overflow-wrap: anywhere; }
#bookitup-form { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 130px; }
#bookitup-form iframe, #bookitup-form > * { max-width: 100%; }
#bookitup-form iframe { width: 100%; border: 0; display: block; }
.bookitup-noscript { color: var(--wine); font-size: 13px; }
@media (max-width: 1000px) {
  .reference-highlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-directory-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .reference-showcase { margin-top: 43px; }
  .reference-showcase-heading { display: block; }
  .reference-count { display: block; margin-top: 12px; }
  .reference-highlight-grid { grid-template-columns: 1fr; gap: 9px; }
  .reference-highlight { padding: 18px; }
  .reference-directory-list { grid-template-columns: 1fr; }
  .reference-directory summary { font-size: 14px; }
  .reference-directory-count { margin-left: 0; }
  .contact-card.contact-card-bookitup { padding: 36px 23px; }
  .contact-card-bookitup h3 { font-size: 2.65rem; }
}

/* v1.4 – BookItUp: full-width contact area instead of the too narrow sidebar.
   The third-party widget remains untouched; only its available space is fixed. */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(35px, 5vw, 72px);
  align-items: stretch;
}
.contact-intro {
  max-width: 840px;
  min-width: 0;
}
.contact-intro h2 { max-width: 840px; }
.contact-card.contact-card-bookitup {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding: clamp(28px, 4.6vw, 66px);
  min-width: 0;
}
.contact-card-bookitup > p { max-width: 750px; }
.bookitup-embed {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: clamp(20px, 3vw, 32px);
  overflow-wrap: normal;
}
#bookitup-form,
#bookitup-form > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
#bookitup-form :is(input, select, textarea) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}
#bookitup-form iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  border: none;
}
@media (max-width: 820px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-card.contact-card-bookitup { max-width: none; }
}
@media (max-width: 600px) {
  .contact .container.contact-layout { width: calc(100% - 24px); }
  .contact-layout { gap: 38px; }
  .contact-card.contact-card-bookitup {
    padding: 28px 16px 34px;
  }
  .contact-card-bookitup h3 { font-size: clamp(2.4rem, 9vw, 3.2rem); }
  .contact-card-bookitup::after { inset: 8px; }
  .bookitup-embed { margin-top: 22px; }
  /* Best effort for forms that BookItUp injects directly into the DOM.
     Vendor iframes cannot be restyled internally by the host page. */
  #bookitup-form :is(.form-row, .form-grid, .grid, .columns,
                     [class*="grid-cols-"], [style*="grid-template-columns"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #bookitup-form :is(.form-row, .row) {
    flex-direction: column !important;
  }
  #bookitup-form :is(.form-col, [class*="col-span-"]) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-column: auto !important;
  }
}

/* v1.5 – Privacy page and prominently accessible legal links */
.menu-legal-links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.contact-privacy-hint { margin-top: 20px; padding: 15px 18px; border-left: 3px solid var(--gold-dark); background: #f6eee5; color: var(--ink); font-size: 13px; line-height: 1.75; }
.contact-privacy-hint a { color: var(--wine); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.privacy-main .legal-wrap { max-width: 960px; }
.privacy-content { font-size: 15px; line-height: 1.8; overflow-wrap: break-word; }
.privacy-content h2 { font-size: clamp(23px, 3.3vw, 30px); line-height: 1.25; margin: 32px 0 12px; }
.privacy-content h2:first-child { margin-top: 0; }
.privacy-content p { margin: 0 0 18px; font-size: inherit; line-height: 1.8; }
.privacy-content address { margin-bottom: 19px; }
.privacy-content code { font-size: .93em; overflow-wrap: anywhere; }
.privacy-end-link { margin-top: 26px; color: var(--muted); font-size: 13px; }
.privacy-end-link a { color: var(--wine); text-decoration: underline; }
@media (max-width: 600px) {
  .contact-privacy-hint { font-size: 12px; padding: 13px; }
  .privacy-main .legal-wrap h1 { font-size: clamp(2.9rem, 12vw, 4.4rem); overflow-wrap: anywhere; }
  .privacy-content { font-size: 14px; }
  .privacy-content h2 { margin-top: 27px; }
  .menu-meta { align-items: flex-start; }
  .menu-legal-links { justify-content: flex-start; }
}

/* SEO / UX v1.7: readable regional service context; flexible semantic FAQ */
.hero-region { margin: -8px 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: #f2d9b3; }
.gallery-photo { display: block; height: 100%; width: 100%; object-fit: cover; background-color: #a18b81; }
.photo-dance { object-position: 58% center; }
.faq-section { background: #fff; }
.faq-layout { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(32px,8vw,125px); }
.faq-layout > div:first-child > p { max-width: 430px; color: var(--muted); font-size: 15px; }
.faq-questions details { border-bottom: 1px solid var(--line); }
.faq-questions details:first-child { border-top: 1px solid var(--line); }
.faq-questions summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 2px; font-size: 16px; font-weight: 650; line-height: 1.4; }
.faq-questions summary::-webkit-details-marker { display: none; }
.faq-questions summary::after { content: '+'; color: var(--wine); font-weight: 400; font-size: 27px; line-height: 1; }
.faq-questions details[open] summary::after { content: '−'; }
.faq-questions summary:focus-visible { outline: 3px solid var(--gold-dark); outline-offset: 3px; }
.faq-questions details p { padding: 0 20px 22px 2px; margin: 0; font-size: 14px; color: var(--muted); }
@media (max-width: 820px) { .faq-layout { grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 600px) { .hero-region { margin-top: -10px; font-size: 11px; } .faq-questions summary { font-size: 14px; } }

/* v1.8 – Public album gallery */
.public-gallery { background: var(--cream); }
.gallery-page-hero { padding: clamp(150px, 17vw, 220px) 0 85px; background: var(--plum); color: #fff; }
.gallery-page-hero .section-eyebrow { color: #efdfc1; }
.gallery-page-hero h1 { max-width: 920px; margin: 0 0 24px; font: 400 clamp(3.5rem, 7.8vw, 7.8rem)/1.05 var(--serif); letter-spacing: -.06em; }
.gallery-page-hero h1 em { color: var(--gold); }
.gallery-page-hero p { max-width: 620px; font-size: clamp(15px, 2vw, 18px); color: #e1d7d9; }
.gallery-albums { padding-block: clamp(45px, 8vw, 105px); }
.gallery-album { padding-bottom: clamp(55px, 8vw, 100px); margin-bottom: clamp(40px, 6vw, 70px); border-bottom: 1px solid var(--line); }
.gallery-album:last-child { border: none; margin-bottom: 0; }
.gallery-album-header { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 28px; }
.gallery-album-overline { display: block; margin-bottom: 9px; font-size: 10px; font-weight: 700; letter-spacing: .24em; color: var(--gold-dark); }
.gallery-album h2 { margin: 0 0 8px; font-size: clamp(2.2rem, 4vw, 4.2rem); }
.gallery-album-header p { margin: 0; color: var(--muted); font-size: 15px; }
.gallery-album-count { font-size: 12px; white-space: nowrap; color: var(--wine); font-weight: 700; }
.gallery-album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.album-image { position: relative; display: block; overflow: hidden; background: #e7d9cd; aspect-ratio: 4/3; }
.album-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.album-image:hover img { transform: scale(1.035); }
.album-image span { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px; color: white; font-size: 13px; font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.gallery-empty { padding: 58px; background: white; border: 1px solid var(--line); }
.gallery-empty h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
.gallery-cta { padding: clamp(65px, 8vw, 115px) 0; text-align: center; color: white; background: var(--plum); }
.gallery-cta h2 { max-width: 900px; margin-inline: auto; }
.gallery-cta h2 em { color: var(--gold); }
.gallery-cta p { max-width: 550px; margin-inline: auto; color: #e1d7d9; }
.gallery-cta .button { margin-top: 22px; }
@media (max-width: 820px) { .gallery-album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 530px) {
  .gallery-page-hero { padding-bottom: 55px; }
  .gallery-album-grid { grid-template-columns: 1fr; gap: 14px; }
  .gallery-album-header { align-items: start; flex-direction: column; gap: 12px; }
  .gallery-empty { padding: 30px 20px; }
}

/* More navigation entries (Galerie) must remain scrollable on compact phones. */
.menu-panel { max-height: calc(100dvh - 105px); overflow-y: auto; overscroll-behavior: contain; }


/* Version 1.9: persönliche Vorstellung mit DJ-Porträt auf der Startseite. */
.intro-layout-portrait {
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, .88fr);
  grid-template-areas: "heading portrait" "story portrait";
  column-gap: clamp(38px, 8vw, 132px);
  row-gap: 18px;
  align-items: center;
}
.intro-layout-portrait .intro-title-col { grid-area: heading; align-self: end; }
.intro-layout-portrait .intro-copy-col { grid-area: story; align-self: start; padding-top: 0; }
.intro-portrait { grid-area: portrait; position: relative; width: 100%; max-width: 510px; margin: 0; justify-self: end; padding: 19px 18px 20px 0; isolation: isolate; }
.intro-portrait::before { content: ''; position: absolute; inset: 0 0 45px 30px; border: 1px solid rgba(163, 125, 71, .75); z-index: -1; }
.intro-portrait-frame { position: relative; aspect-ratio: 3 / 4; background: #151316; overflow: hidden; box-shadow: 0 26px 54px rgba(27, 22, 25, .19); }
.intro-portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%; }
.intro-portrait-frame::after { content: ''; position: absolute; inset: 70% 0 0; pointer-events: none; background: linear-gradient(0deg, rgba(23, 14, 22, .28), transparent); }
.intro-portrait-caption { position: absolute; bottom: 0; left: -26px; min-width: 235px; display: flex; flex-direction: column; gap: 3px; padding: 16px 30px 19px; color: #fff; background: var(--plum); border-left: 3px solid var(--gold); box-shadow: 0 12px 35px rgba(32, 20, 28, .16); }
.intro-portrait-caption span { font-size: 9px; font-weight: 700; letter-spacing: .21em; color: #ead1a8; }
.intro-portrait-caption strong { font: 400 28px/1.2 var(--serif); letter-spacing: -.025em; }
@media (max-width: 1000px) {
  .intro-layout-portrait { column-gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); }
}
@media (max-width: 820px) {
  .intro-layout-portrait { grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr); gap: 23px 32px; }
  .intro-portrait-caption { left: -12px; padding-inline: 20px; }
}
@media (max-width: 680px) {
  .intro-layout-portrait { grid-template-columns: 1fr; grid-template-areas: "heading" "portrait" "story"; row-gap: 27px; }
  .intro-portrait { width: min(100% - 12px, 440px); max-width: none; justify-self: center; margin: 2px 0 7px; padding: 12px 12px 15px 0; }
  .intro-portrait::before { inset: 0 0 29px 20px; }
  .intro-portrait-caption { left: -8px; bottom: 0; min-width: 210px; padding: 13px 21px 15px; }
  .intro-portrait-caption strong { font-size: 24px; }
  .intro-layout-portrait .intro-copy-col { max-width: 570px; }
}
@media (max-width: 360px) {
  .intro-portrait-caption { min-width: 188px; padding: 11px 16px 13px; }
  .intro-portrait-caption strong { font-size: 21px; }
}

/* v1.18 – DJ-Profile mit Hover-Vorschau und zugänglichem Klick-Lightbox */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.dj-team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;isolation:isolate}
.dj-profile{position:relative;min-width:0;z-index:0}
.dj-profile:hover,.dj-profile:focus-within{z-index:3}
.dj-profile-open{width:100%;padding:0;border:0;background:transparent;cursor:pointer;text-align:left;color:var(--ink);font:inherit;display:block}
.dj-profile-image{display:block;position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--cream);border-radius:2px}
.dj-profile-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.dj-profile-open:hover .dj-profile-image img,.dj-profile-open:focus-visible .dj-profile-image img{transform:scale(1.055)}
.dj-profile-name{display:flex;gap:9px;justify-content:space-between;align-items:baseline;padding:18px 2px 14px;border-bottom:1px solid var(--line)}
.dj-profile-name strong{font:normal clamp(22px,2.1vw,29px)/1.2 var(--serif);overflow-wrap:anywhere}
.dj-profile-name>span{font-size:11px;color:var(--wine);white-space:nowrap}
.dj-hover-preview{display:none}
@media(hover:hover) and (pointer:fine){
  .dj-hover-preview{display:block;position:absolute;z-index:5;top:46%;left:50%;width:min(390px,95vw);max-width:calc(100vw - 30px);background:#fff;box-shadow:0 28px 75px rgba(23,19,23,.28);border:1px solid var(--line);border-radius:5px;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,-47%) scale(.88);transition:opacity .19s ease,transform .19s ease,visibility .19s ease}
  .dj-profile:hover .dj-hover-preview{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
  .dj-hover-preview img{display:block;width:100%;height:min(40vh,330px);object-fit:cover;object-position:center 28%}
  .dj-hover-preview>div{padding:15px 21px 19px}
  .dj-hover-preview strong{font:normal 25px/1.25 var(--serif)}
  .dj-hover-preview p{color:var(--muted);font-size:13px;line-height:1.6;margin:9px 0 0;max-height:125px;overflow:hidden;overflow-wrap:anywhere}
}
.dj-lightbox{border:0;padding:0;width:min(620px,calc(100vw - 28px));max-height:calc(100dvh - 28px);border-radius:7px;background:white;color:var(--ink);box-shadow:0 35px 95px #160c19a8;overflow-y:auto;overscroll-behavior:contain}
.dj-lightbox:not([open]){display:none}
.dj-lightbox::backdrop{background:rgba(16,10,18,.83);backdrop-filter:blur(5px)}
.dj-lightbox img{display:block;width:100%;height:auto;max-height:min(60dvh,640px);object-fit:contain;background:#ece5dd}
.dj-lightbox-info{padding:25px 28px 31px}
.dj-lightbox-info h3{font:normal clamp(27px,5vw,37px)/1.2 var(--serif);margin:0 0 12px}
.dj-lightbox-info p{font-size:15px;line-height:1.7;white-space:pre-line;color:var(--muted);margin:0;overflow-wrap:anywhere}
.dj-lightbox-close{position:sticky;float:right;z-index:2;top:10px;margin:10px 10px -55px 0;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#36202f;font-size:30px;line-height:1;cursor:pointer;box-shadow:0 2px 12px #0004}
.dj-lightbox-close:hover{background:var(--gold)}
body.dj-modal-open{overflow:hidden}
@media(max-width:900px){.dj-team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}}
@media(max-width:580px){.dj-team-grid{grid-template-columns:1fr;gap:24px}.dj-profile-image{aspect-ratio:4/4.2}.dj-profile-name{padding:14px 0}.dj-lightbox-info{padding:21px}.dj-lightbox img{max-height:55dvh}}
@media(prefers-reduced-motion:reduce){.dj-profile-image img,.dj-hover-preview{transition:none!important}}