/* tonyc.link — one stylesheet, no preprocessor, no framework.
   Die Farben stammen aus dem Quelltext der Builder-Seite, nicht aus dem Auge:
   Grund schwarz, Schrift weiss, Primaerbutton weiss auf Schwarz mit #1d1e20,
   Hover-Akzent #e93a55 (Navigation) und #425980 (Button). Aendern: nur hier. */

:root {
  /* Native controls (date picker icon, select, autofill) drawn for a dark page */
  color-scheme: dark;

  /* Ground and ink */
  --bg:          #0d0d0f;
  --bg-raised:   #16161a;
  --bg-sunken:   #08080a;
  --line:        #26262c;
  --ink:         #f4f4f6;
  --ink-muted:   #a1a1ab;
  --ink-faint:   #7a7a84;   /* 4.6:1 auf dem Grund - Platzhaltertext muss lesbar sein */

  /* Der Akzent der Builder-Seite: Hover-Farbe der Navigation. Sparsam
     eingesetzt, sonst bedeutet er nichts mehr. */
  --accent:      #e93a55;
  --accent-ink:  #1a0509;
  --accent-soft: rgba(233, 58, 85, .14);
  --accent-cool: #425980;   /* Button-Hover der Builder-Seite */
  --star:        #f5b544;   /* Sterne bleiben golden, alles andere waere Kosmetik */

  --focus:       #7fb3ff;

  /* Type — Montserrat is the only family the builder loaded */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(1.75rem, 1.35rem + 1.9vw, 2.8rem);
  --step-4:  clamp(2.1rem, 1.5rem + 2.8vw, 4.2rem);

  /* Rhythm */
  --gap:      1rem;
  --gap-lg:   2rem;
  --section:  clamp(2.75rem, 5.5vw, 5.5rem);
  --wrap:     min(100% - 2.5rem, 75rem);
  --wrap-narrow: min(100% - 2.5rem, 44rem);
  --radius:   .6rem;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-0)/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Lange URLs und Bezeichner wie com.android.vending.BILLING stehen in den
     Rechtstexten. Bei 360px schieben sie sonst die ganze Seite seitwaerts. */
  overflow-wrap: break-word;
}

img, picture, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
h1, h2, h3 { text-wrap: balance; }
/* Ohne Silbentrennung reisst Chrome "Datenschutzerklaerung" mitten im Wort
   auseinander - die Sprache steht im <html lang>, das Woerterbuch kommt vom
   Browser. */
h1 { font-size: var(--step-4); hyphens: auto; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--ink-faint); text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { width: var(--wrap); margin-inline: auto; }
.wrap-narrow { width: var(--wrap-narrow); margin-inline: auto; }
.eyebrow {
  font-size: var(--step--1); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .8rem;
}
.lead { font-size: var(--step-1); color: var(--ink-muted); font-weight: 500; }
.muted { color: var(--ink-muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: .6rem 1rem; border-radius: var(--radius); font-weight: 700;
  transition: top .15s;
}
.skip-link:focus { top: 1rem; }

section { padding-block: var(--section); }
section + section { padding-top: 0; }

/* ── Masthead ────────────────────────────────────────────────────────────── */

.mast {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.mast-inner {
  width: var(--wrap); margin-inline: auto;
  display: flex; align-items: center; gap: var(--gap);
  min-height: 4.25rem;
}
.mast-logo { flex: 0 0 auto; margin-right: auto; }
/* Phone: logo centred, balanced by an empty slot as wide as the menu button */
@media (max-width: 59.999rem) {
  .mast-inner::before { content: ""; width: 2.75rem; flex: none; }
  .mast-logo { margin-inline: auto; }
  .mast .mast-toggle { margin-left: 0; }   /* beats the later margin-left: auto */
}
.mast-logo img { height: 2.3rem; width: auto; }

.mast-toggle {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); cursor: pointer;
}
.mast-toggle svg { width: 1.25rem; height: 1.25rem; }
.mast-toggle .icon-close, .mast[data-open="true"] .mast-toggle .icon-open { display: none; }
.mast[data-open="true"] .mast-toggle .icon-close { display: block; }

.mast-panel {
  display: none;
  position: absolute; inset-inline: 0; top: 100%;
  background: var(--bg-raised); border-bottom: 1px solid var(--line);
  padding: var(--gap) 0 var(--gap-lg);
}
/* Nur unterhalb der Desktop-Breite oeffnet sich ueberhaupt ein Panel. Sonst
   schlaegt der offene Mobilzustand beim Vergroessern des Fensters noch in die
   Leiste durch - er ist spezifischer als das display:contents weiter unten. */
@media (max-width: 59.999rem) {
  .mast[data-open="true"] .mast-panel { display: block; }
}

.mast-nav ul { list-style: none; margin: 0; padding: 0; }
.mast-nav .sub { display: none; }
.mast-nav a {
  display: block; padding: .7rem 0;
  text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.mast-nav a[aria-current="page"] { color: var(--accent); }

/* Sammelpunkt "Artist Hub": am Handy ein Akkordeon im Panel, ab Desktop ein
   Aufklappmenue. Beides derselbe Knopf - kein zweites Markup, kein Dubletten-
   Menue, das irgendwann auseinanderlaeuft. */
.sub-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  width: 100%; padding: .7rem 0;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font: 600 var(--step-0)/1.4 var(--font); color: var(--ink); cursor: pointer;
  text-align: left;
}
.sub-toggle[data-current="true"] { color: var(--accent); }
.sub-toggle .chevron { width: 1.1rem; height: 1.1rem; transition: transform .15s ease; }
.has-sub[data-open="true"] .chevron { transform: rotate(180deg); }
.sub { margin: 0; padding: 0 0 .4rem .9rem; list-style: none; }
.mast-nav .has-sub[data-open="true"] .sub { display: block; }
.sub a { font-weight: 500; }

.mast-tools {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-top: var(--gap);
}
.mast-lang {
  display: inline-flex; gap: .35rem; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .45rem .7rem; font-size: var(--step--1); font-weight: 700;
  text-decoration: none; color: var(--ink-faint); letter-spacing: .06em;
}
.mast-lang .on { color: var(--ink); }
.mast-lang:hover { border-color: var(--accent); }

@media (min-width: 60rem) {
  .mast-toggle { display: none; }
  .mast-panel {
    display: contents;                      /* Nav und Tools direkt in die Leiste */
  }
  .mast-nav > ul { display: flex; gap: 1.4rem; align-items: center; }
  .mast-nav a { padding: .3rem 0; border: 0; font-size: var(--step--1); }
  .mast-tools { margin: 0; }

  .has-sub { position: relative; }
  .sub-toggle {
    width: auto; padding: .3rem 0; border: 0; font-size: var(--step--1);
    letter-spacing: inherit;
  }
  .sub {
    position: absolute; top: calc(100% + .6rem); left: -1rem; z-index: 20;
    min-width: max-content; padding: .4rem 0;
    background: var(--bg-raised); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: 0 12px 30px rgba(0,0,0,.5);
  }
  /* Der Streifen schliesst die Luecke zwischen Knopf und Menue - sonst klappt
     es beim Hinuntergehen der Maus wieder zu. */
  .has-sub::after { content: ""; position: absolute; inset-inline: -1rem; top: 100%; height: .8rem; }
  .has-sub:hover .sub,
  .has-sub:focus-within .sub,
  .has-sub[data-open="true"] .sub { display: block; }
  .sub a { display: block; padding: .5rem 1.4rem; white-space: nowrap; font-size: var(--step--1); }
  .sub a:hover { color: var(--accent); }

  /* Layout: logo left, links centred, language + CTA flush right.
     .wrap on nav and tools is for the phone panel only - here it would give
     them their own width and push everything to the left. */
  .mast-inner { min-height: 4.75rem; gap: 2rem; }
  .mast-logo { margin-right: 0; }
  .mast-nav.wrap, .mast-tools.wrap { width: auto; margin-inline: 0; }
  .mast-nav { flex: 1; display: flex; justify-content: center; }
  .mast-nav > ul { gap: clamp(1.25rem, 2.6vw, 2.25rem); }

  /* Links: quieter at rest, an accent line under the current page and on hover */
  .mast-nav a, .sub-toggle { font-size: var(--step-0); font-weight: 500; color: var(--ink-muted); }
  .mast-nav > ul > li > a, .sub-toggle { position: relative; }
  .mast-nav > ul > li > a::after, .sub-toggle::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem; height: 2px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform .2s ease;
  }
  .mast-nav a:hover, .sub-toggle:hover { color: var(--ink); }
  .mast-nav > ul > li > a:hover::after, .mast-nav > ul > li > a[aria-current="page"]::after,
  .sub-toggle:hover::after, .sub-toggle[data-current="true"]::after { transform: scaleX(1); }
  .mast-nav a[aria-current="page"], .sub-toggle[data-current="true"] { color: var(--ink); }
  .sub a { color: var(--ink-muted); }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem;
  border: 1px solid transparent; border-radius: var(--radius);
  background: transparent;   /* <button> keeps the UA's light grey otherwise - white on white */
  font: 700 var(--step--1)/1 var(--font);
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: transform .12s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn-primary { background: var(--ink); color: #1d1e20; }
.btn-primary:hover { color: var(--accent-cool); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { position: relative; padding-block: clamp(2.5rem, 9vh, 6rem); text-align: center; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--hero-image) center / cover no-repeat;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Helle Fotos schlucken duenne Verlaeufe - unter .68 steht die Schrift im
     Matsch, sobald jemand im Gegenlicht fotografiert hat. */
  background: linear-gradient(180deg, rgba(13,13,15,.68) 0%, rgba(13,13,15,.88) 60%, var(--bg) 100%);
}
.hero h1 { margin-bottom: .3em; }
/* Trust band under the hero. The experience mark is type, not an image:
   the builder's gold crest was unreadable below ~220px and blurry on phones. */
.band { padding-block: clamp(1.5rem, 4vw, 2.5rem); background: var(--bg-raised);
        border-block: 1px solid var(--line); }
.band + section { padding-top: var(--section); }
.crest { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap; }
.plaque {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 8.5rem; aspect-ratio: 1; margin: 0; text-align: center; line-height: 1;
  border: 2px solid var(--accent); border-radius: 50%;
  box-shadow: inset 0 0 0 5px var(--bg-raised), inset 0 0 0 6px var(--line);
}
.plaque strong { font-size: 2.9rem; font-weight: 800; color: var(--ink); }
.plaque span {
  margin-top: .3rem; font-size: var(--step--1); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
}
.plaque small { margin-top: .4rem; font-size: .7rem; color: var(--ink-muted); }
.crest .trust { flex: 1 1 16rem; display: grid; gap: 1rem 2rem; font-size: var(--step-0); }
@media (min-width: 60rem) { .crest .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.crest .trust li { padding-left: 1rem; border-left: 2px solid var(--line); }
.crest .trust strong { display: block; color: var(--ink); }
.crest .trust span { font-size: var(--step--1); }
.hero .lead { margin-inline: auto; max-width: 34ch; }
.hero .btn-row { justify-content: center; margin-top: 2rem; }

/* Home: one full screen for the brand, the slate texture shows through */
.hero-full {
  display: grid; place-items: center;
  min-height: calc(100svh - 4.25rem);          /* minus the sticky mast */
  padding-block: 3rem 5.5rem;
}
.hero-full::after { background: linear-gradient(180deg, rgba(13,13,15,.35) 0%, rgba(13,13,15,.55) 70%, var(--bg) 100%); }
.hero-logo { display: block; width: min(30rem, 72vw); height: auto; margin: 0 auto clamp(1.5rem, 5vh, 3rem); }
.hero-full h1 { font-size: var(--step-2); }
.hero-scroll {
  position: absolute; left: 50%; bottom: 1.25rem; translate: -50% 0;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  color: var(--ink-muted); animation: nudge 2.2s ease-in-out infinite;
}
.hero-scroll:hover { color: var(--accent); }
@keyframes nudge { 50% { translate: -50% .4rem; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll { animation: none; } }

/* DJ page: more room for the photo, headline and button still above the fold */
.hero-tall { display: grid; place-items: center; min-height: 70svh; }

/* ── Cards ───────────────────────────────────────────────────────────────── */

.cards { display: grid; gap: var(--gap-lg); }
@media (min-width: 48rem) { .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56rem) { .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.card h2 { font-size: var(--step-2); margin-top: 0; }
.card h3 { font-size: var(--step-1); margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.quote {
  margin: 0;   /* <figure> brings a 40px UA indent */
  background: var(--bg-raised); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(1.4rem, 3vw, 2rem);
}
.quote blockquote { margin: 0 0 1rem; font-size: var(--step-1); font-weight: 500; }
.quote figcaption { color: var(--ink-muted); font-size: var(--step--1); }
.stars { color: var(--star); letter-spacing: .15em; }

.facts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
  list-style: none; margin: 0; padding: 0; text-align: center;
}
@media (min-width: 48rem) {
  .facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 3.5rem; }
  .facts li { max-width: 12rem; }
}
.facts strong { display: block; font-size: var(--step-2); color: var(--accent); line-height: 1.1; }
.facts span { color: var(--ink-muted); font-size: var(--step--1); }

/* ── Fliesstext: Rechtstexte, lange Absaetze ────────────────────────────── */

.prose h1 { font-size: var(--step-3); }
.prose h2 { font-size: var(--step-1); margin-top: 2.8rem; }
.prose h3 { font-size: var(--step-0); margin-top: 2rem; text-transform: uppercase;
            letter-spacing: .08em; color: var(--ink-muted); }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left;
                       vertical-align: top; font-size: var(--step--1); }

/* ── Releases: Cover-Raster, ein Link pro Kachel ─────────────────────────── */

.releases {
  display: grid; gap: var(--gap-lg) var(--gap); margin: 2rem 0 0; padding: 0;
  list-style: none; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}
/* Produktkacheln zeigen Programmfenster - unter ~13rem erkennt man nichts. */
.more { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.releases.products { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.release { display: grid; }
/* Titel darf wachsen, der Preis steht immer unten - sonst tanzen die Preise
   zwischen Kacheln mit ein- und zweizeiligem Namen. */
.release > a, a.release {
  display: grid; grid-template-rows: auto 1fr auto; gap: .35rem;
  text-decoration: none; min-width: 0;
}
.release-kind, .release-title { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.release-title { font-size: var(--step--1); }
.release img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius);
  transition: transform .15s ease;
}
/* Produktbilder sind Programmfenster, keine Cover: quadratisch beschnitten
   erkennt man nichts mehr. Ganz zeigen, auf ruhigem Grund. */
.release-product img {
  aspect-ratio: 4 / 3; object-fit: contain;
  background: var(--bg-sunken); padding: .35rem;
}
.release-price { color: var(--accent); font-weight: 700; font-size: var(--step--1); }
.release:hover img { transform: translateY(-3px); }
.release-kind {
  font-size: var(--step--1); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.release-title { font-weight: 500; line-height: 1.3; }

/* ── Image rotation: native scroll-snap, no carousel library ─────────────── */

/* One large photo at a time, the neighbours peek in at the edges.
   The inline padding lets the first and last slide sit centred too. */
/* main is a size container, so 100cqw is the page width even inside .wrap:
   the strip breaks out of the text column up to 90rem, centred. */
main { container-type: inline-size; }
.gallery {
  --peek: 6%;
  --w: min(100cqw, 90rem);
  width: var(--w); margin-inline: calc((100% - var(--w)) / 2);
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 100%;          /* of the content box, i.e. inside the peek */
  padding-inline: var(--peek);
  gap: var(--gap);
  overflow-x: auto; overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;            /* arrows and dots replace the bar */
}
.gallery::-webkit-scrollbar { display: none; }
@media (min-width: 48rem) { .gallery { --peek: 11%; } }
.gallery > * { scroll-snap-align: center; }
.gallery img { border-radius: var(--radius); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

/* Controls, added by page.js. --slide-ms must match SLIDE_MS there. */
.gallery-nav {
  --slide-ms: 5s;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 1.25rem;
}
.gallery-arrow {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg-raised); color: var(--ink); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.gallery-arrow:hover { border-color: var(--accent); color: var(--accent); }
.gallery-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem; }
.gallery-dot {
  display: grid; place-items: center; height: 2.75rem; min-width: 1.1rem; padding: 0 .2rem;
  border: 0; background: none; cursor: pointer;
}
.gallery-dot span {
  position: relative; display: block; width: .5rem; height: .5rem; overflow: hidden;
  border-radius: 999px; background: var(--line);
  transition: width .3s ease, background .3s ease;
}
.gallery-dot:hover span { background: var(--ink-faint); }
.gallery-dot[aria-current] span { width: 1.75rem; background: var(--accent-soft); }
.gallery-dot[aria-current] span::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
}
/* While running, the active dot fills up over the slide time */
.gallery-nav[data-running] .gallery-dot[aria-current] span::after {
  transform-origin: left; animation: gallery-fill var(--slide-ms) linear both;
}
@keyframes gallery-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 30rem) { .gallery-arrow { display: none; } }   /* phones swipe */

/* ── Forms ───────────────────────────────────────────────────────────────── */

.form { display: grid; gap: 1.1rem; }
.form-row { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .form-row-2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: var(--step--1); }
.field .req { color: var(--accent); }
.field input, .field textarea, .field select {
  width: 100%; padding: .8rem .9rem;
  background: var(--bg-sunken); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  font: 400 var(--step-0)/1.4 var(--font);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.field input:user-invalid { border-color: #e0685f; }

/* Honeypot: unsichtbar für Menschen, ein Feld wie jedes andere für Bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

fieldset { border: 0; margin: 0; padding: 0; }
fieldset legend { font-weight: 600; font-size: var(--step--1); margin-bottom: .5rem; }
.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choices label {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; font-size: var(--step--1); font-weight: 600;
}
.choices input { accent-color: var(--accent); }
.choices label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choices label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--step--1); }
.consent input { margin-top: .25rem; accent-color: var(--accent); flex: 0 0 auto; }

.form-error {
  background: rgba(224, 104, 95, .12);
  border: 1px solid #e0685f; border-radius: var(--radius);
  padding: .9rem 1.1rem; color: #ffb9b3;
}
.trust {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  color: var(--ink-muted); font-size: var(--step--1);
  list-style: none; margin: 0; padding: 0;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.foot {
  background: var(--bg-sunken); border-top: 1px solid var(--line);
  padding-block: var(--section) 2.5rem; margin-top: var(--section);
}
.foot-grid { display: grid; gap: var(--gap-lg); }
@media (min-width: 52rem) { .foot-grid { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.foot h2 { font-size: var(--step-2); }

.social { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.social a {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--line); border-radius: 50%;
  text-decoration: none; color: var(--ink-muted); font-size: var(--step--1); font-weight: 700;
}
.social a:hover { border-color: var(--accent); color: var(--accent); }

.foot-links {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  list-style: none; margin: 2.5rem 0 0; padding: 2rem 0 0;
  border-top: 1px solid var(--line);
  font-size: var(--step--1); color: var(--ink-muted);
}
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--accent); }

/* ── FAQ: native <details>, keine Akkordeon-Library ──────────────────────── */

.qa {
  border-bottom: 1px solid var(--line);
  padding: .2rem 0;
}
.qa summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 2.5rem 1rem 0;
  font-weight: 600;
  position: relative;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  position: absolute; right: .25rem; top: 50%;
  translate: 0 -50%;
  font-size: var(--step-2); font-weight: 400; line-height: 1;
  color: var(--accent);
}
.qa[open] summary::after { content: "\2212"; }
.qa summary:hover { color: var(--accent); }
.qa > p {
  margin: 0 0 1.2rem;
  color: var(--ink-muted);
  max-width: 62ch;
}

/* ── Split: text and photo side by side, alternating ────────────────────── */

.split { display: grid; gap: var(--gap-lg); align-items: center; }
.split + .split { margin-top: var(--section); }
.split img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.split h2 { font-size: var(--step-3); }
.split h3 { font-size: var(--step-2); }
@media (min-width: 48rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
  .split-flip > :first-child { order: 2; }   /* photo left, text right */
}

/* ── Print: legal pages are attached to offers as PDF ─────────────────────
   Browsers drop dark backgrounds when printing, which would leave light grey
   text on white paper. Print is black on white, without site chrome. */
@media print {
  :root {
    color-scheme: light;
    --bg: #fff; --bg-raised: #fff; --bg-sunken: #fff; --line: #ccc;
    --ink: #000; --ink-muted: #333; --ink-faint: #555; --accent: #000;
  }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .mast, .foot, .skip-link, .gallery-nav, .hero-scroll { display: none !important; }
  .hero::before, .hero::after { display: none; }
  a { color: #000; }
  .prose h2 { break-after: avoid; }
  section { padding-block: 0 !important; }
}

/* ── Club feel ───────────────────────────────────────────────────────────────
   1. Every page hero: a warm-white follow spot tracks the mouse. page.js adds
      the span and sets --mx/--my; desktop pointer only. */
.hero-light {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 40%),
              rgba(255, 236, 214, .14), transparent 70%);   /* warm white; red: rgba(233,58,85,.22) */
  transition: opacity .4s ease;
}
.hero .wrap { position: relative; z-index: 1; }
.hero:hover .hero-light { opacity: 1; }

/* 2. Home hero: three moving heads sweep slowly from the rig above.
   A conic gradient is the cone; the mask fades it out towards the floor. */
.hero-full { overflow: clip; }
.hero-beams { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-beams i {
  position: absolute; top: -1rem; left: var(--x); width: 70rem; height: 120%;
  margin-left: -35rem; transform-origin: 50% 0; rotate: var(--a);
  background: conic-gradient(from 168deg at 50% 0, transparent,
              rgba(255, 236, 214, .12) 10deg, rgba(255, 236, 214, .12) 14deg, transparent 24deg);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  animation: sweep var(--t) ease-in-out infinite alternate;
}
.hero-beams i:nth-child(1) { --x: 12%; --a: -30deg; --b: 18deg; --t: 11s; }
.hero-beams i:nth-child(2) { --x: 50%; --a: 22deg;  --b: -22deg; --t: 14s; }
.hero-beams i:nth-child(3) { --x: 88%; --a: 30deg;  --b: -16deg; --t: 9s; }
@keyframes sweep { from { rotate: var(--a); } to { rotate: var(--b); } }

/* 3. Home logo: tap along, page.js shows the tempo (a nod to BPMcountR) */
.hero-logo { cursor: pointer; user-select: none; -webkit-user-select: none;
             -webkit-touch-callout: none; touch-action: manipulation; }
.hero-logo.tap { animation: tap .16s ease-out; }
@keyframes tap { 40% { scale: .97; } }
.tap-bpm { position: absolute; inset-inline: 0; margin: 0; font-size: var(--step--1);
           color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.tap-bpm strong { color: var(--accent); }

/* 4. Facts count up over one bar at 124 BPM (page.js) */
.facts strong { font-variant-numeric: tabular-nums; }

/* 5. Gallery: the shown photo drifts closer while its five seconds run.
   page.js wraps each image in .slide, which clips the zoom. */
.gallery .slide { overflow: hidden; border-radius: var(--radius); }
.gallery .slide img { transition: scale .6s ease; }
.gallery .slide[data-active] img { scale: 1.06; transition: scale 6s linear; }

/* The current menu item breathes at 124 BPM, a house tempo (60/124 s) */
@media (min-width: 60rem) {
  .mast-nav > ul > li > a[aria-current="page"]::after,
  .sub-toggle[data-current="true"]::after { animation: beat .4839s ease-out infinite; }
}
@keyframes beat { 0% { opacity: 1; } 60%, 100% { opacity: .45; } }

@media (prefers-reduced-motion: reduce), (hover: none) {
  .hero-light { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-beams { display: none; }
  .gallery .slide[data-active] img { scale: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mast-nav > ul > li > a[aria-current="page"]::after,
  .sub-toggle[data-current="true"]::after { animation: none; }
}

/* A short closing block, centred like the facts above it */
.center { text-align: center; }
.center .social { justify-content: center; }