/* =========================================================
   DJ LagXury – Stylesheet
   Dunkel mit violetter Stimmung – ohne Neon-Glow.
   Palette aus dem Pressekit (Bone, Sand, Stone, Lila #7B4FD6)
   auf einem violett getönten Schwarz.
   ========================================================= */

/* ---------- Fonts (wie im Pressekit, lokal gehostet, DSGVO-konform) ---------- */
@font-face { font-family: "Unbounded"; src: url("assets/fonts/unbounded-variable.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("assets/fonts/manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("assets/fonts/manrope-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("assets/fonts/manrope-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --bg: #0c0a10;
  --bg-2: #131019;
  --bg-3: #1b1724;
  --line: rgba(190, 165, 255, 0.12);
  --line-strong: rgba(190, 165, 255, 0.22);

  --bone: #f4f0ea;
  --sand: #e4dcd2;
  --stone: #9a92a8;            /* Stone mit leichtem Violett-Stich */
  --lila: #7b4fd6;
  --lila-soft: #a98ce8;
  --lila-tint: rgba(123, 79, 214, 0.14);

  --font-display: "Unbounded", "Arial Black", sans-serif;     /* Überschriften & Logo – wie im Pressekit */
  --font-alt: "Unbounded", "Arial", sans-serif;                /* Unterzeilen, leichter Schnitt */
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 14px;
  --nav-h: 76px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ink: #09080b;                                   /* Off-Black statt #000 */
  --shadow-tint: 8, 5, 16;                          /* Schatten im Farbton des Hintergrunds */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0; background: var(--bg); color: var(--bone);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; }
p { margin: 0 0 1em; }
::selection { background: var(--lila); color: var(--bone); }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container, .wrap { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }

.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 200; padding: .7rem 1rem; background: var(--bone); color: var(--bg); border-radius: 8px; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--lila-soft); outline-offset: 3px; border-radius: 4px; }

.accent { color: var(--lila-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.6rem;
  font: 700 .9rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--bone); background: var(--lila);
  border: 1px solid var(--lila); border-radius: 999px; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease);
  will-change: transform;
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn span { transition: transform .25s var(--ease); }
.btn:hover { background: #8a62df; border-color: #8a62df; }
.btn:active { transform: scale(.98) translateY(1px); }
.btn:hover span { transform: translateX(4px); }
.btn--ghost { background: transparent; color: var(--bone); border-color: var(--line-strong); }
.btn--ghost:hover { background: rgba(123, 79, 214, .12); border-color: var(--lila-soft); }
.btn--dark { background: var(--bg); border-color: var(--bg); }
.btn--dark:hover { background: var(--lila); border-color: var(--lila); }
.btn--small { padding: .65rem 1.15rem; font-size: .78rem; }
.btn--full { width: 100%; }

/* ---------- Navigation ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.nav.is-scrolled {
  background: rgba(12, 10, 16, .72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-color: rgba(255, 255, 255, .06); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .03), 0 10px 30px -20px rgba(var(--shadow-tint), .9);
}
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.logo__mark { width: 40px; height: auto; color: var(--bone); }
.nav .logo__mark { width: 50px; }
.logo__text { font: 700 1rem/1 var(--font-display); letter-spacing: .02em; white-space: nowrap; }
.logo__x { font-size: 1.5em; vertical-align: -.1em; color: var(--lila-soft); }

.nav__links { display: flex; align-items: center; gap: 1.8rem; }
.nav__links a:not(.btn) { position: relative; text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--stone); transition: color .2s; }
.nav__links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--lila-soft); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav__links a:not(.btn):hover, .nav__links a.is-active { color: var(--bone); }
.nav__links a:not(.btn):hover::after, .nav__links a.is-active::after { transform: scaleX(1); }

.nav__toggle { display: none; width: 44px; height: 44px; padding: 12px 8px; background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: center; gap: 7px; }
.nav__toggle span { display: block; height: 2px; background: var(--bone); transition: transform .3s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* ---------- Hero: wie ein Plattencover – Name oben als Lichtquelle, Gesicht blickt hinauf ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: stretch;
  padding: calc(var(--nav-h) + clamp(1.5rem, 5vh, 3.5rem)) 0 clamp(2.5rem, 7vh, 5rem);
  overflow: hidden; isolation: isolate;
  background: var(--ink);
}

/* Visuals im Hintergrund – schwarz-weiß und gedimmt */
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__video { width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: grayscale(1) contrast(1.1); }
.hero__shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 80% at 72% 60%, rgba(0, 0, 0, .55), transparent 70%),
    linear-gradient(0deg, var(--ink) 0%, rgba(9, 8, 11, .55) 30%, rgba(9, 8, 11, .25) 60%, rgba(9, 8, 11, .6) 100%);
}

/* Portrait – läuft links und unten weich aus */
.hero__photo { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero__photo img {
  position: absolute; right: -2%; bottom: -16%;
  height: 132%; width: auto; max-width: none;
  filter: grayscale(1) contrast(1.25) brightness(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(0deg, transparent 8%, #000 34%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(0deg, transparent 8%, #000 34%);
  mask-composite: intersect;
}

/* Lichtkegel: vom Namen oben links auf das Gesicht */
.hero__beam {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 22% at 34% 25%, rgba(255, 255, 255, .16), transparent 70%),
    conic-gradient(from 100deg at 34% 25%, transparent 0deg, rgba(255, 255, 255, .2) 12deg, rgba(225, 215, 255, .1) 22deg, transparent 30deg);
  filter: blur(22px);
  mix-blend-mode: screen;
}

/* weicher Übergang vom schwarzen Header in den Seitenhintergrund */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 160px; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }

.hero__content { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--stone);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lila-soft); }

/* Der Name ist die Lichtquelle */
.hero__title {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 6.4vw, 6rem);
  line-height: .95; letter-spacing: -.02em; white-space: nowrap; color: #fffdf8;
  text-shadow: 0 0 48px rgba(255, 253, 248, .22);
}
.hero__x { display: inline-block; font-size: 1.35em; line-height: .8; vertical-align: -.05em; color: var(--lila-soft); }

.hero__bottom { max-width: 560px; }
.hero__lead { margin: 0 0 2rem; font-family: var(--font-alt); font-weight: 300; font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1.35; color: #d8d2cb; max-width: 30ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero__scroll { position: absolute; right: clamp(1.25rem, 4vw, 3rem); bottom: 2rem; width: 24px; height: 40px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 14px; }
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--lila-soft); animation: scroll 1.8s ease-in-out infinite; }
@keyframes scroll { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {
  .hero__photo img { right: -14%; bottom: -10%; height: 105%; }
  .hero__beam { background:
    radial-gradient(40% 18% at 30% 14%, rgba(255, 255, 255, .14), transparent 70%),
    conic-gradient(from 118deg at 30% 13%, transparent 0deg, rgba(255, 255, 255, .13) 12deg, rgba(220, 210, 255, .07) 22deg, transparent 32deg); }
}

/* Handy: Name oben, Gesicht groß direkt darunter (schaut zum Namen hinauf), Text kompakt unten */
@media (max-width: 600px) {
  .hero { padding: calc(var(--nav-h) + 1.25rem) 0 2rem; }
  /* Visuals sichtbar lassen: kräftiger, Verlauf nur unten hinter dem Text dicht */
  .hero__video { opacity: .21; filter: grayscale(1) contrast(1.15); }
  .hero__shade { background: linear-gradient(0deg, var(--ink) 0%, rgba(9, 8, 11, .66) 24%, rgba(9, 8, 11, .3) 50%, rgba(9, 8, 11, .3) 72%, rgba(9, 8, 11, .5) 100%); }

  /* Gesicht füllt die Mitte; Bildausschnitt so gewählt, dass Stirn bis Kinn zwischen Name und Text liegen */
  .hero__photo img { top: 0; bottom: auto; right: -29vw; height: 92%; }
  .hero__photo img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(0deg, transparent 14%, #000 27%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(0deg, transparent 14%, #000 27%);
  }
  .hero__beam { background:
    radial-gradient(55% 10% at 45% 16%, rgba(255, 255, 255, .18), transparent 70%),
    conic-gradient(from 152deg at 45% 15%, transparent 0deg, rgba(255, 255, 255, .2) 12deg, rgba(225, 215, 255, .09) 22deg, transparent 32deg); }

  .eyebrow { margin-bottom: 1rem; font-size: .68rem; letter-spacing: .2em; }
  .hero__title { font-size: clamp(2.1rem, 10.5vw, 3.4rem); }
  .hero__lead { margin-bottom: 1.4rem; font-size: 1.05rem; }
  .hero__cta { gap: .6rem; flex-wrap: nowrap; }
  .hero__cta .btn { padding: .85rem 1rem; font-size: .74rem; letter-spacing: .04em; }
  .hero__scroll { display: none; }
}

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(5rem, 11vw, 9rem) 0; }
.section__num { margin-bottom: 1rem; font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--lila-soft); }
.section__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; margin-bottom: 1.5rem; }
.section__intro { max-width: 52ch; color: var(--stone); font-size: 1.15rem; margin-bottom: 3.5rem; }
.section__head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: 2rem; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.section__head .section__title { margin-bottom: 0; }
.section__head .section__intro { margin: 0 0 .6rem; justify-self: end; max-width: 34ch; padding-left: 1.25rem; border-left: 1px solid var(--line-strong); }

/* ---------- About ---------- */
.about { background: radial-gradient(60% 60% at 0% 50%, rgba(123, 79, 214, .12), transparent 70%); }
.about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.about__photo { margin-top: clamp(2rem, 8vw, 7rem); }
.about__photo { position: relative; }
.about__photo img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 75%;
  background: radial-gradient(60% 50% at 50% 42%, #2a2140, transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.about__badge {
  position: absolute; right: -1.6rem; top: 1.6rem;
  display: grid; place-items: center;
  width: 136px; aspect-ratio: 1; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line-strong);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .8);
}
.about__badge-ring { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); animation: badge-spin 26s linear infinite; }
.about__badge-ring text { font-family: var(--font-body); font-weight: 700; font-size: 9px; letter-spacing: 2px; fill: var(--stone); }
.about__badge strong { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1; letter-spacing: -.01em; color: var(--bone); }
.about__badge strong::after { content: ""; display: block; width: 18px; height: 2px; margin: .45rem auto 0; border-radius: 2px; background: var(--lila-soft); }
@keyframes badge-spin { to { transform: rotate(360deg); } }

.about__name { font-family: var(--font-alt); font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; color: var(--sand); }
.about__text > p:not(.section__num):not(.about__name) { color: var(--stone); max-width: 62ch; }
.about__text strong { color: var(--bone); font-weight: 500; }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; margin: 3rem 0 0; }
.facts div { padding: 1.1rem 0; border-top: 1px solid var(--line-strong); }
.facts dt { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); margin-bottom: .3rem; }
.facts dd { margin: 0; font-weight: 500; }

/* ---------- Anlässe: Plattenkiste (Produktfoto-Stil) ---------- */
.crate { --col-gap: clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(3.5rem, 6vw, 5rem) var(--col-gap); align-items: start; }
.record { position: relative; text-align: center; outline-offset: 8px; }
.record__stage { position: relative; aspect-ratio: 25 / 18; margin-bottom: 2.4rem; }
/* Regalbrett – stößt an das Brett der Nachbarplatte, so entsteht ein durchgehendes Regal */
.record__stage::after {
  content: ""; position: absolute; z-index: 0; left: calc(var(--col-gap) / -2); right: calc(var(--col-gap) / -2); bottom: -18px; height: 18px;
  /* Oberseite (heller, perspektivisch) + Vorderkante */
  background:
    linear-gradient(180deg, #3d3549 0, #2c2637 6px, transparent 6px),
    linear-gradient(180deg, #221d2b 0%, #18141f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 22px 26px -14px rgba(var(--shadow-tint), 1);
}

/* kleines Etikett oben links – wie „Pre-Order“ im Shop */
.record__tag {
  position: absolute; z-index: 4; top: 0; left: 4%;
  padding: .35rem .7rem; background: var(--bg);
  font-size: .68rem; font-weight: 700; letter-spacing: .22em; color: var(--sand);
}

/* Cover */
.record__cover {
  position: absolute; z-index: 2; left: 4%; bottom: 0; width: 68%; aspect-ratio: 1;
  overflow: hidden; background: var(--cover-bg); color: var(--cover-fg);
  box-shadow: 0 30px 50px -22px rgba(var(--shadow-tint), .95), 0 4px 12px rgba(var(--shadow-tint), .4);
  transition: transform .6s var(--ease);
}
.record__cover::after {
  /* Kartonkante & leichter Glanz */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .1), transparent 35%, transparent 70%, rgba(0, 0, 0, .18));
}
.record__brand {
  position: absolute; z-index: 1; top: 7%; left: 8%;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(.55rem, .8vw, .72rem); letter-spacing: .08em;
}
.record__brand b { font-size: 1.4em; color: var(--cover-accent, inherit); }
.record__name {
  position: absolute; z-index: 1; left: 8%; right: 8%; bottom: 8%; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.7vw, 1.45rem); line-height: 1; letter-spacing: -.02em;
}

/* Vinyl */
.record__disc {
  position: absolute; z-index: 1; left: 27%; bottom: 0; width: 66%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--vinyl);
  box-shadow: 0 22px 36px -14px rgba(var(--shadow-tint), .9), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .6s var(--ease);
}
.record__disc::before {
  /* Rillen + Lichtreflex */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    conic-gradient(from 30deg, transparent 0 8%, rgba(255, 255, 255, .22) 12%, transparent 17% 52%, rgba(255, 255, 255, .16) 62%, transparent 68%),
    repeating-radial-gradient(circle closest-side, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px);
  -webkit-mask: radial-gradient(circle closest-side, transparent 30%, #000 31%, #000 97%, transparent 98%);
  mask: radial-gradient(circle closest-side, transparent 30%, #000 31%, #000 97%, transparent 98%);
}
.record__label {
  position: absolute; inset: 35%; border-radius: 50%;
  background: var(--label, var(--bone));
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .25);
}
.record__label::after { content: ""; position: absolute; inset: 44%; border-radius: 50%; background: #0c0a10; }

/* Hover / Mitte (Handy): Platte fährt weiter heraus und dreht sich */
.record:hover .record__disc, .record:focus-visible .record__disc, .record.is-out .record__disc { transform: translateX(14%) rotate(160deg); }
.record:hover .record__cover, .record:focus-visible .record__cover, .record.is-out .record__cover { transform: translateX(-3%) rotate(-1.5deg); }

/* Text unter dem Produkt */
.record__title { margin: 0 0 .55rem; font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: .24em; text-transform: uppercase; }
.record__desc { margin: 0 auto; max-width: 32ch; font-size: .9rem; line-height: 1.5; color: var(--stone); }

/* ---- Die sechs Releases: eigene Farbwelt je Anlass ---- */
.record__disc { background: var(--vinyl) center / cover no-repeat; }
.record--01 { --vinyl: url("assets/img/vinyl/01.svg"); }
.record--02 { --vinyl: url("assets/img/vinyl/02.svg"); }
.record--03 { --vinyl: url("assets/img/vinyl/03.svg"); }
.record--04 { --vinyl: url("assets/img/vinyl/04.svg"); }
.record--05 { --vinyl: url("assets/img/vinyl/05.svg"); }
.record--06 { --vinyl: url("assets/img/vinyl/06.svg"); }

/* 01 Hochzeiten – Weiß & Rosé, feine Linien, Schreibschrift */
.record--01 { --cover-bg: #fbf8f6; --cover-fg: #1a1416; --cover-accent: #e2306f; --label: #fbf8f6; }
.record--01 .record__brand { left: 0; right: 0; text-align: center; letter-spacing: .5em; font-weight: 500; font-size: clamp(.5rem, .7vw, .62rem); }
.record--01 .record__brand b { font-size: 1em; color: inherit; }
.record--01 .record__name { display: none; }
.art-rings { position: absolute; left: 50%; top: 46%; width: 62%; translate: -50% -50%; }
.art-rings circle { fill: none; stroke: #1a1416; stroke-width: .9; }
.art-rings circle:last-child { stroke: #c9a24a; }
.art-script {
  position: absolute; left: 8%; right: 8%; bottom: 9%; text-align: center;
  font-family: "Yellowtail", cursive; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1; color: #e2306f;
  transform: rotate(-6deg);
}
.art-script::after { content: ""; display: block; height: 2px; margin: .15em 12% 0 18%; background: #e2306f; border-radius: 2px; transform: rotate(2deg); }

/* Label-Farben der Vinyls */
.record--02 { --label: #c9a24a; }
.record--03 { --label: #2ee6ff; }
.record--04 { --label: #fbf8f6; }
.record--05 { --label: #f5c400; }
.record--06 { --label: #0b0b0d; }
.record--06 .record__label::after { background: #f4f0ea; }

/* ---- Gemeinsame Cover-Serie (wie Hochzeiten): Schriftzug oben mittig, Linien-Motiv, Titel unten ---- */
.record--02 .record__brand, .record--03 .record__brand, .record--04 .record__brand,
.record--05 .record__brand, .record--06 .record__brand {
  left: 0; right: 0; text-align: center; letter-spacing: .5em; font-weight: 500; font-size: clamp(.5rem, .7vw, .62rem);
}
.record--02 .record__brand b, .record--03 .record__brand b, .record--04 .record__brand b,
.record--05 .record__brand b, .record--06 .record__brand b { font-size: 1em; color: inherit; }
.record--02 .record__name, .record--03 .record__name, .record--04 .record__name,
.record--05 .record__name, .record--06 .record__name { display: none; }

.art-line { position: absolute; left: 50%; top: 47%; width: 64%; translate: -50% -50%; overflow: visible; }
.art-line path, .art-line circle, .art-line ellipse { stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.art-line path:not([fill]), .art-line circle:not([fill]), .art-line ellipse:not([fill]) { fill: none; }
.art-line .thin, .art-line .thin * { stroke-width: .8; }
.art-line .fill { fill: currentColor; stroke: none; }
.art-title { position: absolute; z-index: 2; left: 6%; right: 6%; bottom: 9%; text-align: center; line-height: 1; }

/* 02 Firmenfeiern – Nachtblau & Gold */
.record--02 { --cover-bg: #0d1424; --cover-fg: #e8c66a; }
.record--02 .art-glasses { color: #e8c66a; width: 56%; }
.record--02 .art-glasses circle { fill: #e8c66a; stroke: none; }
.art-title--deco {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(.7rem, 1.15vw, .95rem); letter-spacing: .32em; text-transform: uppercase;
  color: #e8c66a;
}
.art-title--deco::before, .art-title--deco::after { content: ""; display: block; height: 1px; margin: 0 22% .55em; background: currentColor; opacity: .6; }
.art-title--deco::after { margin: .55em 22% 0; }

/* 03 Clubs – Laser */
.record--03 { --cover-bg: #06050b; }
.art-lasers { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-lasers line { stroke-width: .5; }
.art-lasers .b1 { stroke: #2ee6ff; }
.art-lasers .b2 { stroke: #c13cff; }
.art-lasers .src { fill: #fff; }
.record--03 .record__cover::after { background: linear-gradient(180deg, transparent 55%, rgba(6, 5, 11, .95) 80%); }
.art-title--outline {
  bottom: 8%; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.9rem); letter-spacing: .04em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.6px #2ee6ff;
}

/* 04 Festzelte – Rot-Weiß */
.record--04 { --cover-bg: #f4f0ea; --cover-fg: #1a1416; }
.record--04 .art-tent-svg { color: #1a1416; width: 74%; top: 50%; }
.art-title--tent { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.7vw, 1.4rem); letter-spacing: -.01em; color: #c8102e; }

/* 05 Feuerwehrfeste – Rot, Gelb, 122 */
.record--05 { --cover-bg: #b3121b; --cover-fg: #ffffff; }
.art-flame-icon { color: #f5c400; width: 30%; top: 44%; }
.art-flame-icon path { stroke-width: 1.6; }
.art-stripe { position: absolute; left: 0; right: 0; bottom: 24%; height: 5%; background: repeating-linear-gradient(-45deg, #f5c400 0 8px, #141414 8px 16px); }
.art-title--fire { font-family: var(--font-display); font-weight: 700; font-size: clamp(.85rem, 1.35vw, 1.15rem); letter-spacing: -.01em; color: #fff; }

/* 06 Bälle – Schwarz & Gold */
.record--06 { --cover-bg: #0b0b0d; --cover-fg: #e8c66a; }
.record--06 .art-ball { color: #e8c66a; width: 54%; top: 45%; }

/* ---------- Booking ---------- */
.booking { background: radial-gradient(60% 70% at 100% 40%, rgba(123, 79, 214, .14), transparent 70%), var(--bg-2); border-top: 1px solid var(--line); }
.booking__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.booking__info > p:not(.section__num) { color: var(--stone); font-size: 1.1rem; }

.contact { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.2rem; }
.contact li { display: grid; gap: .2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.contact__label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); }
.contact a { font-size: 1.25rem; font-weight: 500; text-decoration: none; transition: color .2s; }
.contact a:hover { color: var(--lila-soft); }

/* Request-Zettel */
.slip {
  display: grid; gap: 1.3rem; padding: clamp(1.5rem, 3.5vw, 2.4rem);
  background: var(--bone); color: #0e0e0e; border-radius: 4px;
  box-shadow: 0 40px 70px -30px rgba(var(--shadow-tint), 1), 0 2px 0 rgba(255, 255, 255, .5) inset;
  position: relative; margin-top: .5rem;
}
.slip::before {
  /* Abreißkante */
  content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
  background: radial-gradient(circle at 6px 8px, var(--bone) 5px, transparent 5.5px) 0 0 / 12px 8px repeat-x;
}
.slip__head { display: flex; justify-content: space-between; padding-bottom: .9rem; border-bottom: 1px dashed rgba(14, 14, 14, .3); font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.slip label { display: grid; gap: .25rem; align-content: start; }
.slip label > span { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5f5a54; }
.slip input, .slip select, .slip textarea {
  width: 100%; padding: .55rem 0; font: inherit; font-size: 1.02rem; color: #0e0e0e;
  background: transparent; border: 0; border-bottom: 1px solid rgba(14, 14, 14, .25); border-radius: 0;
  transition: border-color .2s;
}
.slip select { appearance: none; cursor: pointer; background: linear-gradient(45deg, transparent 50%, #5f5a54 50%) calc(100% - 10px) 55% / 5px 5px no-repeat, linear-gradient(135deg, #5f5a54 50%, transparent 50%) calc(100% - 5px) 55% / 5px 5px no-repeat; }
.slip textarea { resize: vertical; min-height: 96px; }
.slip input::placeholder, .slip textarea::placeholder { color: #a39c93; }
.slip input:focus, .slip select:focus, .slip textarea:focus { outline: none; border-color: var(--lila); box-shadow: 0 1px 0 0 var(--lila); }
.slip .is-invalid { border-color: #c4454c; }
.slip label > .field__error { font-size: .78rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #b0343b; }
.slip label > .field__error:empty { display: none; }
.slip .btn { margin-top: .4rem; }
.slip .btn:disabled { opacity: .6; cursor: wait; }
.slip__hp { position: absolute; left: -9999px; }
.form__note a { color: inherit; }
.form__note { margin: 0; font-size: .8rem; color: #5f5a54; }
.form__note.is-error { color: #b0343b; }
.form__note.is-ok { color: var(--lila); }

/* Teaser-Zettel auf der Startseite (führt zur Booking-Seite) */
.slip--teaser { text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.slip--teaser:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 50px 80px -30px rgba(var(--shadow-tint), 1); }
.slip--teaser:active { transform: translateY(-1px) scale(.99); }
.slip__lines { display: grid; gap: 1.1rem; margin: .4rem 0; }
.slip__lines > span { display: grid; grid-template-columns: 6rem 1fr; align-items: end; gap: 1rem; }
.slip__lines b { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5f5a54; }
.slip__lines i { height: 1px; background: rgba(14, 14, 14, .25); }
.slip__teaser-text { font-size: 1.02rem; color: #2a2620; }
.slip--teaser .btn { pointer-events: none; }
.slip--teaser:hover .btn { background: var(--lila); border-color: var(--lila); }

/* Eigene Booking-Seite */
.booking--page { padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 5rem)); min-height: 100vh; }
.booking--page .booking__grid { grid-template-areas: "info form" "contact form"; grid-template-rows: auto 1fr; }
.booking--page .booking__info { grid-area: info; }
.booking--page .slip, .booking--page .wiz { grid-area: form; }
.booking--page .booking__contact { grid-area: contact; }
.booking--page .contact { margin-top: 0; }
@media (max-width: 900px) {
  .booking--page .booking__grid { grid-template-areas: "info" "form" "contact"; grid-template-rows: none; }
}

/* Erfolgs-Zustand nach dem Absenden */
.slip__success { display: none; text-align: left; }
.slip.is-sent > :not(.slip__head):not(.slip__success) { display: none; }
.slip.is-sent .slip__success { display: grid; gap: .9rem; padding: 1rem 0 .4rem; }
.slip__success-mark { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--lila); color: var(--bone); }
.slip__success-mark svg { width: 24px; height: 24px; }
.slip__success h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -.02em; line-height: 1.1; }
.slip__success p { margin: 0; color: #4a453f; max-width: 42ch; }
.slip__success a { color: inherit; font-weight: 700; }

/* Handy: Anfrage-Button läuft mit */
.mcta { display: none; }
@media (max-width: 900px) {
  .mcta {
    position: fixed; z-index: 90; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
    display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: 0 1.5rem;
    border-radius: 999px; background: var(--lila); color: var(--bone); text-decoration: none;
    font: 700 .82rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 14px 30px -10px rgba(var(--shadow-tint), .9), inset 0 1px 0 rgba(255, 255, 255, .18);
    transform: translate(-50%, 160%); transition: transform .5s var(--ease);
  }
  .mcta.is-visible { transform: translate(-50%, 0); }
  .mcta:active { transform: translate(-50%, 1px) scale(.98); }
}

/* Touch: Klickflächen mindestens 44 px hoch (optisch unverändert) */
@media (pointer: coarse) {
  .nav__links a:not(.btn), .footer__links a, .contact a { display: inline-flex; align-items: center; min-height: 44px; }
  .btn { min-height: 44px; }
  .logo { min-height: 44px; }
}
.btn--small { min-height: 40px; }

/* ---------- Booking-Seite: Editorial Split – links entsteht deine Platte, rechts das offene Formular ---------- */
.bk { position: relative; padding: calc(var(--nav-h) + clamp(3.5rem, 8vw, 6.5rem)) 0 clamp(6rem, 12vw, 9rem); min-height: 100dvh; }
.bk::before {
  /* leises Licht hinter der Platte */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 18% 55%, rgba(123, 79, 214, .13), transparent 70%);
}
.bk__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 7vw, 7.5rem); align-items: start; }

/* Linke Spalte */
.bk__side { position: sticky; top: calc(var(--nav-h) + 2rem); }
.bk__title { font: 700 clamp(2.2rem, 4.2vw, 3.6rem)/1.04 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.bk__lead { margin: 1.3rem 0 0; max-width: 34ch; color: var(--stone); font-size: 1.08rem; text-wrap: pretty; }

.bk__record { position: relative; width: min(100%, 300px); aspect-ratio: 1.45; margin: 2.6rem 0 2rem; }
.bk__cover {
  position: absolute; z-index: 2; left: 0; bottom: 0; width: 69%; aspect-ratio: 1;
  display: flex; flex-direction: column; justify-content: space-between; padding: 9%;
  background: var(--rec-c, #1b1724); color: var(--rec-fg, var(--stone));
  box-shadow: 0 30px 46px -22px rgba(var(--shadow-tint), 1), inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: background .6s var(--ease), color .6s var(--ease), transform .7s var(--ease);
}
.bk__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255, 255, 255, .1), transparent 40%); pointer-events: none; }
.bk__cover-brand { font: 500 .55rem/1 var(--font-display); letter-spacing: .42em; }
.bk__cover-brand b { font-weight: 500; }
.bk__cover-name { font: 700 clamp(1rem, 1.6vw, 1.3rem)/1.05 var(--font-display); letter-spacing: -.02em; }
.bk__disc {
  position: absolute; z-index: 1; left: 20%; bottom: 2%; width: 64%; aspect-ratio: 1; border-radius: 50%;
  background: var(--rec-v, none) center / cover, repeating-radial-gradient(circle closest-side, #15121b 0 1px, #1e1a26 1.5px 2.5px);
  box-shadow: 0 20px 34px -16px rgba(var(--shadow-tint), 1);
  transition: transform .9s var(--ease);
}
.bk__disc::after { content: ""; position: absolute; inset: 36%; border-radius: 50%; background: radial-gradient(circle, var(--bg) 0 14%, var(--rec-label, #2a2433) 15%); }
.bk__record.is-set .bk__disc { transform: translateX(42%) rotate(200deg); }
.bk__record.is-set .bk__cover { transform: rotate(-2deg); }

.bk__summary { margin: 0; max-width: 380px; }
.bk__summary div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.bk__summary div:last-child { border-bottom: 1px solid var(--line); }
.bk__summary dt { font-size: .86rem; color: var(--stone); }
.bk__summary dd { margin: 0; font-weight: 500; color: var(--sand); overflow-wrap: anywhere; transition: color .4s var(--ease); }
.bk__summary dd.is-filled { color: var(--bone); }
.bk__direct { margin: 2rem 0 0; font-size: .92rem; color: var(--stone); }
.bk__direct a { color: var(--sand); text-decoration-color: rgba(169, 140, 232, .5); text-underline-offset: 3px; }
.bk__direct a:hover { color: var(--lila-soft); }

/* Formular – ohne Kasten */
.wiz { position: relative; }
.wiz__hp { position: absolute; left: -9999px; }
.wiz__progress { margin-bottom: clamp(2rem, 4vw, 3rem); }
.wiz__count { margin: 0 0 .9rem; font-size: .92rem; color: var(--stone); }
.wiz__count b { color: var(--bone); font-weight: 700; font-variant-numeric: tabular-nums; }
.wiz__count span { color: var(--sand); }
.wiz__bar { display: block; height: 2px; background: rgba(255, 255, 255, .08); border-radius: 2px; overflow: hidden; }
.wiz__bar i { display: block; height: 100%; width: 33.34%; background: var(--lila-soft); border-radius: 2px; transform-origin: left; transition: width .7s var(--ease); }
.no-js .wiz__progress, .no-js .wiz__back { display: none; }

.wiz__panel { margin: 0; padding: 0; border: 0; min-width: 0; }
.no-js .wiz__panel + .wiz__panel { margin-top: 3rem; }
.wiz__panel[hidden] { display: none; }
.wiz__panel.is-entering { animation: wiz-in .6s var(--ease) both; }
@keyframes wiz-in { from { opacity: 0; transform: translateY(12px); } }
.wiz__q { padding: 0; margin-bottom: 1.8rem; font: 700 clamp(1.5rem, 2.6vw, 2.1rem)/1.12 var(--font-display); letter-spacing: -.025em; }
.wiz__q:focus { outline: none; }

/* Anlässe: die Cover selbst sind die Auswahl */
.wiz__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 1.2rem; }
.wiz__choice { position: relative; display: grid; gap: .75rem; cursor: pointer; }
.wiz__choice input, .wiz__text-option input { position: absolute; opacity: 0; pointer-events: none; }
.wiz__sleeve { position: relative; display: block; aspect-ratio: 1.3; }
.wiz__sleeve b {
  position: absolute; z-index: 2; left: 0; bottom: 0; width: 77%; aspect-ratio: 1; border-radius: 3px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 45%), var(--c);
  box-shadow: 0 18px 26px -16px rgba(var(--shadow-tint), 1), inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: transform .5s var(--ease), box-shadow .3s var(--ease);
}
.wiz__sleeve i {
  position: absolute; z-index: 1; left: 22%; bottom: 3%; width: 71%; aspect-ratio: 1; border-radius: 50%;
  background: center / cover var(--v); box-shadow: 0 12px 20px -12px rgba(var(--shadow-tint), 1);
  transition: transform .7s var(--ease);
}
.wiz__label { font-weight: 600; font-size: .98rem; transition: color .3s var(--ease); }
.wiz__sleeve b { display: flex; flex-direction: column; justify-content: space-between; padding: 9%; color: var(--f, var(--bone)); }
.wiz__sleeve em { font: 500 clamp(.38rem, .55vw, .5rem)/1 var(--font-display); font-style: normal; letter-spacing: .38em; opacity: .85; }
.wiz__sleeve strong { font: 700 clamp(.72rem, 1.1vw, .95rem)/1.05 var(--font-display); letter-spacing: -.02em; hyphens: manual; -webkit-hyphens: manual; }
.wiz__choice:hover .wiz__sleeve i { transform: translateX(12%) rotate(60deg); }
.wiz__choice:hover .wiz__sleeve b { transform: translateY(-3px); }
.wiz__choice input:checked + .wiz__sleeve b { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--lila-soft), 0 18px 26px -16px rgba(var(--shadow-tint), 1); }
.wiz__choice input:checked + .wiz__sleeve i { transform: translateX(28%) rotate(160deg); }
.wiz__choice input:checked ~ .wiz__label { color: var(--lila-soft); }
.wiz__choice input:focus-visible + .wiz__sleeve b { outline: 2px solid var(--lila-soft); outline-offset: 6px; }

.wiz__more { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1.2rem; margin: 2rem 0 0; color: var(--stone); font-size: .95rem; }
.wiz__text-option { position: relative; cursor: pointer; }
.wiz__text-option span {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--sand);
  text-decoration: underline; text-decoration-color: rgba(169, 140, 232, .4); text-underline-offset: 4px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.wiz__text-option span:hover { color: var(--bone); text-decoration-color: var(--lila-soft); }
.wiz__text-option input:checked + span { color: var(--lila-soft); text-decoration-color: var(--lila-soft); text-decoration-thickness: 2px; }
.wiz__text-option input:focus-visible + span { outline: 2px solid var(--lila-soft); outline-offset: 2px; }

/* Felder: große Unterstrich-Felder statt Kästen */
.wiz__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2rem; }
.wiz__field { display: grid; gap: .35rem; align-content: start; }
.wiz__field--full { grid-column: 1 / -1; }
.wiz__field > span { font-size: .9rem; font-weight: 600; color: var(--sand); }
.wiz__field > span em { font-style: normal; font-weight: 400; color: var(--stone); margin-left: .35rem; }
.wiz__field small { font-size: .8rem; color: var(--stone); }
.wiz__field input, .wiz__field textarea {
  width: 100%; min-height: 52px; padding: .5rem 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  background: transparent; color: var(--bone); font: 500 1.2rem var(--font-body); color-scheme: dark;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.wiz__field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.wiz__field input::placeholder, .wiz__field textarea::placeholder { color: #625b6f; }
.wiz__field input:focus, .wiz__field textarea:focus { outline: none; border-color: var(--lila-soft); box-shadow: 0 1px 0 0 var(--lila-soft); }
.wiz__field .is-invalid { border-color: #e0707a; }
.wiz .field__error, .wiz__error { font-size: .86rem; font-weight: 500; color: #f08c95; }
.wiz__error { margin: 1rem 0 0; }
.wiz .field__error:empty, .wiz__error:empty { display: none; }
.wiz__note { margin: 1.8rem 0 0; font-size: .82rem; color: var(--stone); }
.wiz__note a { color: inherit; }

.wiz__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: clamp(2.4rem, 5vw, 3.4rem); padding-top: 1.6rem; border-top: 1px solid var(--line); }
.wiz__next { margin-left: auto; }
.wiz__back {
  min-height: 48px; padding: 0 .2rem; border: 0; background: none; cursor: pointer;
  color: var(--stone); font: 600 .95rem var(--font-body); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.wiz__back:hover { color: var(--bone); text-decoration-color: var(--line-strong); }
.wiz .form__note { margin: 1rem 0 0; color: var(--stone); }
.wiz .form__note.is-error { color: #f08c95; }

/* Button mit eigenem Pfeil-Kreis */
.btn--island { gap: .9rem; padding: .35rem .4rem .35rem 1.5rem; min-height: 54px; text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 700; }
.btn__icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); font-size: 1rem; transition: transform .5s var(--ease), background .3s var(--ease);
}
.btn--island:hover .btn__icon { transform: translateX(3px) scale(1.05); background: rgba(255, 255, 255, .24); }
.wiz__next:disabled { opacity: .65; cursor: wait; }

/* Erfolg */
.wiz.is-sent > :not(.slip__success) { display: none; }
.wiz.is-sent .slip__success { display: grid; gap: 1rem; padding: 1rem 0; }
.wiz .slip__success h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.wiz .slip__success p { color: var(--stone); max-width: 44ch; }
.wiz .slip__success a { color: var(--bone); }

@media (max-width: 900px) {
  .bk__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .bk__side { position: static; }
  /* Handy: Platte klein neben der Zusammenfassung */
  .bk__record { width: 150px; margin: 1.8rem 0 1.2rem; }
  .bk__summary { display: none; }
  .bk__direct { margin-top: .4rem; }
}
@media (max-width: 600px) {
  .wiz__choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem .7rem; }
  .wiz__label { font-size: .82rem; }
  .wiz__sleeve em { display: none; }
  .wiz__sleeve strong { font-size: .6rem; }
  .wiz__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .bk__record { display: none; }
}

/* Startseite: schlichter Booking-Abschluss */
.booking--simple { background: var(--bg-2); }
.booking__simple { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.booking__simple .section__title { margin: 0; }
.booking__simple-body > p:first-child { margin: 0 0 1.8rem; max-width: 42ch; color: var(--stone); font-size: 1.1rem; }
.booking__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.booking__links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 1.6rem 0 0; font-size: .95rem; color: var(--stone); }
.booking__links a { text-decoration: none; color: var(--sand); transition: color .2s; }
.booking__links a:hover { color: var(--lila-soft); }
@media (pointer: coarse) { .booking__links a { display: inline-flex; align-items: center; min-height: 44px; } }
@media (max-width: 900px) { .booking__simple { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---------- Footer ---------- */
.footer { padding: 4rem 0 2.5rem; border-top: 1px solid var(--line); background: #08070b; }
.footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo links" "claim links" "copy copy"; align-items: start; gap: .8rem 2rem; }
.footer__inner .logo { grid-area: logo; }
.footer__inner .footer__claim { grid-area: claim; }
.footer__inner .footer__links { grid-area: links; justify-content: flex-end; align-self: center; }
.footer__inner .footer__copy { grid-area: copy; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.footer__top { display: grid; justify-items: center; text-align: center; gap: 1.2rem; }
.footer__claim { color: var(--stone); margin: 0; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8rem; }
.footer__links a { text-decoration: none; color: var(--stone); font-size: .92rem; transition: color .2s; }
.footer__links a:hover { color: var(--bone); }
.footer__copy { margin: .8rem 0 0; font-size: .8rem; color: #918a9f; }

/* ---------- Rechtliches ---------- */
.legal { padding: calc(var(--nav-h) + 4rem) 0 6rem; }
.legal .container, .legal .wrap { max-width: 780px; }
.legal h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -.02em; margin-bottom: 2.5rem; }
.legal h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; margin: 2.5rem 0 .8rem; color: var(--sand); }
.legal p, .legal li { color: var(--stone); }
.legal a { color: var(--lila-soft); }
.legal .todo { padding: .1rem .4rem; border-radius: 4px; background: rgba(217, 117, 122, .18); color: #f0b3b6; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .crate { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --nav-h: 68px; }
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 1rem 1.25rem 1.5rem; background: rgba(12, 10, 16, .98); border-bottom: 1px solid var(--line);
    transform: translateY(-120%); visibility: hidden; transition: transform .35s var(--ease), visibility .35s;
  }
  .nav__links.is-open { transform: none; visibility: visible; }
  .nav__links a:not(.btn) { padding: 1rem 0; font-size: 1.15rem; border-bottom: 1px solid var(--line); }
  .nav__links a:not(.btn)::after { display: none; }
  .nav__links .btn { margin-top: 1.2rem; padding: 1rem; font-size: .85rem; }
  .nav.menu-open { background: rgba(12, 10, 16, .98); }


  .about__grid, .booking__grid { grid-template-columns: 1fr; }
  .about__photo { margin-top: 0; }
  .section__head { grid-template-columns: 1fr; gap: 1rem; }
  .section__head .section__intro { justify-self: start; }
  .footer__inner { grid-template-columns: 1fr; grid-template-areas: "logo" "claim" "links" "copy"; }
  .footer__inner .footer__links { justify-content: flex-start; gap: .5rem 1.4rem; }
  .about__photo { max-width: 460px; margin-inline: auto; }
  .about__badge { right: .8rem; width: 112px; }
  .about__badge strong { font-size: 1rem; }
}

@media (max-width: 600px) {
  body { font-size: 1rem; }
  .crate {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: .75rem 1.25rem 1rem; width: 100%;
    overscroll-behavior-x: contain; touch-action: pan-x pan-y;
    scrollbar-width: none;
  }
  .crate::-webkit-scrollbar { display: none; }
  .record { scroll-snap-align: center; }
  /* in der Wisch-Leiste nur einblenden, nicht verschieben – sonst ragt sie nach unten hinaus */
  .crate .record.reveal { transform: none; }
  .form__row { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; column-gap: 0; }
  .logo__text { font-size: 1rem; }
  .logo__mark { width: 34px; }
  .nav .logo__mark { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}