/* ===========================================================================
   DJ ANDREAS STEFANI — Hochzeits- & Event-DJ, Chiemgau
   ---------------------------------------------------------------------------
   Eine Datei, keine Abhängigkeiten, kein Build-Schritt.

   Aufbau:
     01  Design-Tokens
     02  Reset & Grundlagen
     03  Layout-Bausteine
     04  Typografie
     05  Buttons & Links
     06  Navigation
     07  Hero & Verfügbarkeits-Check
     08  Karten (Leistungen, Vorteile, Pakete)
     09  Ablauf (Timeline)
     10  Referenzen & Galerie
     11  Stimmen
     12  Zahlen-Band
     13  FAQ
     14  Formular & Anfrage-Assistent
     15  Playlist-Einbettung (DSGVO)
     16  Ratgeber & Fließtext
     17  Footer & mobile Aktionsleiste
     18  Animationen
     19  Druckansicht

   Farbkontraste gegen --bg (#0B0C0E) gemessen:
     --text        16,4:1   AAA
     --text-muted   8,9:1   AAA
     --text-dim     4,9:1   AA
     --brass        8,9:1   AAA
   Reines Schwarz wird bewusst vermieden — auf OLED-Displays schmiert die
   Bewegung sonst sichtbar.
   =========================================================================== */

@import url('../fonts/fonts.css');

/* ===========================================================================
   01  DESIGN-TOKENS
   =========================================================================== */

:root {
  /* Flächen */
  --bg:            #0B0C0E;
  --bg-raised:     #101216;
  --surface:       #16181C;
  --surface-2:     #1C1F24;
  --surface-glass: rgba(16, 18, 22, 0.72);

  /* Linien */
  --line:          rgba(255, 255, 255, 0.08);
  --line-strong:   rgba(255, 255, 255, 0.15);

  /* Text */
  --text:          #F2F4F7;
  --text-muted:    #A8AFB9;
  --text-dim:      #78808B;

  /* Akzent — Messing */
  --brass:         #DCA54A;
  --brass-bright:  #F0C066;
  --brass-deep:    #9C6B22;
  --brass-wash:    rgba(220, 165, 74, 0.12);
  --brass-line:    rgba(220, 165, 74, 0.32);
  --brass-glow:    rgba(220, 165, 74, 0.22);

  /* Signalfarben */
  --ok:            #4ADE80;
  --err:           #F87171;

  /* Abstände — 4/8er-Raster */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* Radien — bewusst keine.
     Die Seite arbeitet durchgehend mit scharfen Kanten. Es gibt deshalb auch
     keine Radius-Token: eine Rundung soll nicht versehentlich zurückkommen,
     weil irgendwo noch ein Token danebenliegt. Kanten trennen hier über
     Linien, Flächenkontrast und Abstand, nicht über weiche Ecken. */

  /* Schatten */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-3: 0 24px 64px -16px rgba(0, 0, 0, 0.75);
  --shadow-brass: 0 8px 32px -8px var(--brass-glow);

  /* Bewegung — eine Kurve für alles, damit die Seite einen Rhythmus hat */
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --t-fast:  160ms;
  --t-base:  240ms;
  --t-slow:  420ms;

  /* Ebenen */
  --z-grain:   1;
  --z-base:    2;
  --z-sticky:  40;
  --z-nav:     60;
  --z-overlay: 80;

  /* Maße */
  --container:        1200px;
  --container-narrow: 760px;
  --container-wide:   1440px;
  --nav-h:            72px;

  /* Typografie — fluide Skala, verankert an 375px und 1440px */
  --fs-display: clamp(2.75rem, 1.6rem + 4.9vw, 5.25rem);
  --fs-h1:      clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --fs-h2:      clamp(1.875rem, 1.35rem + 2.2vw, 3rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.85vw, 1.75rem);
  --fs-h4:      clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
}

@media (max-width: 640px) {
  :root { --space-9: 4.5rem; --space-10: 5.5rem; --nav-h: 64px; }
}

/* ===========================================================================
   02  RESET & GRUNDLAGEN
   =========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--space-5));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Fängt die Randfälle ab, die trotz aller Sorgfalt entstehen — etwa der
     seitliche Versatz der einlaufenden Abschnitte, bevor sie ihre Endlage
     erreichen. Kein Ersatz für sauberes Layout, sondern die letzte Bremse. */
  overflow-x: hidden;
  overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

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

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

a { color: inherit; }

/* Fokus — sichtbar, aber nur bei Tastaturbedienung */
:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 3px;
}

::selection { background: var(--brass); color: #0B0C0E; }

/* Feines Filmkorn über der gesamten Seite. Ein einziges Data-URI-SVG, keine
   Bilddatei, kein Netzwerk-Request — kostet praktisch nichts und nimmt großen
   dunklen Flächen das Digitale. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--brass);
  color: #0B0C0E;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform var(--t-base) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ===========================================================================
   03  LAYOUT-BAUSTEINE
   =========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

@media (min-width: 768px)  { .container { padding-inline: var(--space-6); } }
@media (min-width: 1280px) { .container { padding-inline: var(--space-7); } }

.section {
  position: relative;
  z-index: var(--z-base);
  padding-block: var(--space-9);
}
.section--tight { padding-block: var(--space-8); }
.section--roomy { padding-block: var(--space-10); }
.section--raised { background: var(--bg-raised); }

/* Haarlinie als Sektionstrenner — an den Rändern ausgeblendet, damit sie nicht
   wie ein hartes Kastenende wirkt. */
.section--edge::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
}

.stack > * + * { margin-top: var(--space-4); }
.stack--lg > * + * { margin-top: var(--space-6); }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 560px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 560px)  { .grid--6 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--6 { grid-template-columns: repeat(3, 1fr); } }

.split { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .split--wide-left  { grid-template-columns: 1.1fr 0.9fr; }
  .split--wide-right { grid-template-columns: 0.9fr 1.1fr; }
}

/* ===========================================================================
   04  TYPOGRAFIE
   =========================================================================== */

h1, h2, h3, .display {
  font-family: 'Bodoni Moda', 'Bodoni Fallback', Georgia, serif;
  font-weight: 500;
  line-height: 1.08;
  /* Bodoni Moda ist eine Didone: senkrechte Achse, harter Wechsel zwischen
     Haar- und Grundstrich. Enge Laufweite drückt die Haarstriche in die
     Nachbarbuchstaben, deshalb hier deutlich weniger negatives Tracking als
     bei einer Renaissance-Antiqua üblich. */
  letter-spacing: -0.008em;
  text-wrap: balance;
  /* Deutsch ist voller langer Komposita. „Firmenweihnachtsfeier“ ist in der
     Hero-Größe breiter als ein Handy-Display — ohne Trennung schiebt ein
     einziges Wort die ganze Seite auseinander. Das lang-Attribut im
     <html>-Tag liefert dem Browser die deutschen Trennregeln. */
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

/* Ab hier wird es klein genug, dass die Haarstriche auf dunklem Grund
   wegzubrechen drohen. Etwas mehr Gewicht fängt das ab, ohne den Charakter
   der Schrift zu verlieren. */
h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 600; letter-spacing: 0; }
h4 {
  font-family: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.display { font-size: var(--fs-display); }

/* Betontes Wort in Kursiv-Messing — der wiederkehrende Akzent der Seite */
.accent { font-style: italic; color: var(--brass-bright); }

/* Vorzeile über jeder Überschrift, mit Haarlinie davor */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
  text-wrap: pretty;
}

.muted { color: var(--text-muted); }
.dim   { color: var(--text-dim); }
.small { font-size: var(--fs-sm); }
.nowrap { white-space: nowrap; }

.section-head { margin-bottom: var(--space-7); max-width: 68ch; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head h2 + .lead { margin-top: var(--space-5); }

/* ===========================================================================
   05  BUTTONS & LINKS
   =========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-fast) var(--ease);
}

.btn:active { transform: scale(0.975); }

.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary {
  background: var(--brass);
  color: #0B0C0E;
  box-shadow: var(--shadow-brass);
}
.btn--primary:hover { background: var(--brass-bright); box-shadow: 0 10px 40px -8px var(--brass-glow); }

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
}
.btn--ghost:hover { border-color: var(--brass-line); color: var(--brass-bright); background: var(--brass-wash); }

.btn--quiet { color: var(--text-muted); padding-inline: var(--space-4); }
.btn--quiet:hover { color: var(--brass-bright); }

.btn--wide { width: 100%; }
.btn--sm { min-height: 40px; padding: var(--space-2) var(--space-5); font-size: var(--fs-xs); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.btn-row--center { justify-content: center; }

/* Textlink mit Pfeil — die Unterlinie wächst beim Überfahren von links */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--brass-bright);
  font-weight: 500;
  font-size: var(--fs-sm);
  text-decoration: none;
  padding-block: var(--space-1);
}
.link-arrow svg {
  width: 16px; height: 16px;
  transition: transform var(--t-base) var(--ease);
}
.link-arrow:hover svg { transform: translateX(4px); }

.link-underline {
  color: var(--text-muted);
  text-decoration: none;
  background-image: linear-gradient(var(--brass), var(--brass));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.link-underline:hover { color: var(--text); background-size: 100% 1px; }

/* ===========================================================================
   06  NAVIGATION
   =========================================================================== */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color var(--t-slow) var(--ease),
              border-color var(--t-slow) var(--ease),
              backdrop-filter var(--t-slow) var(--ease);
  border-bottom: 1px solid transparent;
}

/* Solange der Hero im Bild ist, schwebt die Leiste transparent darüber.
   Ab dem ersten Scrollen legt sich Milchglas darunter. */
.nav.is-scrolled {
  background: var(--surface-glass);
  border-bottom-color: var(--line);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.nav__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
@media (min-width: 1280px) { .nav__inner { padding-inline: var(--space-7); } }

.nav__brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  /* Die Schriftzeile ist nur 28px hoch. Die Polsterung bringt die
     Trefferfläche auf die geforderten 44px, ohne die Grundlinie der beiden
     Wortmarken gegeneinander zu verschieben. */
  min-height: 44px;
  padding-block: var(--space-2);
  text-decoration: none;
  font-family: 'Bodoni Moda', 'Bodoni Fallback', Georgia, serif;
  font-size: 1.0625rem;
  /* Versalien in einer Didone bei 17px: ohne zusätzliches Gewicht und etwas
     Luft zwischen den Buchstaben franst die Wortmarke aus. */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__brand strong { font-weight: 600; }
.nav__brand span {
  font-family: 'Archivo', 'Archivo Fallback', sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  color: var(--brass);
  text-transform: uppercase;
}

.nav__links { display: none; }

@media (min-width: 1024px) {
  .nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
}

.nav__link {
  position: relative;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 2px;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current='page'] { color: var(--text); }
.nav__link[aria-current='page']::after { transform: scaleX(1); background: var(--brass); }

.nav__actions { display: flex; align-items: center; gap: var(--space-3); }
.nav__actions .btn { display: none; }
@media (min-width: 640px) { .nav__actions .btn { display: inline-flex; } }

/* Menü-Schalter — drei Linien, die sich zum Kreuz falten */
.nav__toggle {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: calc(var(--space-3) * -1);
}
@media (min-width: 1024px) { .nav__toggle { display: none; } }

.nav__toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav__toggle span + span { margin-top: 5px; }
.nav__toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobiles Menü — vollflächig, Einträge laufen gestaffelt ein */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(11, 12, 14, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: calc(var(--nav-h) + var(--space-6)) var(--space-5) var(--space-7);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  /* visibility wird nicht weich überblendet, sondern hart geschaltet — beim
     Öffnen sofort, beim Schließen erst nach dem Ausblenden. Sonst hinge das
     Umschalten am Fortschritt der Animation, und der erste Menüpunkt liesse
     sich in dem Moment, in dem app.js ihm den Fokus geben will, noch gar
     nicht fokussieren: ein Element mit visibility:hidden nimmt keinen. */
  transition: opacity var(--t-base) var(--ease),
              visibility 0s linear var(--t-base);
}
.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-base) var(--ease),
              visibility 0s linear 0s;
}
@media (min-width: 1024px) { .drawer { display: none; } }

.drawer__nav { display: flex; flex-direction: column; }

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
  font-family: 'Bodoni Moda', 'Bodoni Fallback', Georgia, serif;
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--text);
  opacity: 0;
  transform: translateY(14px);
}
.drawer.is-open .drawer__link {
  animation: drawer-in var(--t-slow) var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 45ms + 60ms);
}
.drawer__link span { font-family: 'Archivo', 'Archivo Fallback', sans-serif; font-size: var(--fs-xs); color: var(--brass); letter-spacing: 0.14em; }
.drawer__link[aria-current='page'] { color: var(--brass-bright); }

@keyframes drawer-in {
  to { opacity: 1; transform: translateY(0); }
}

.drawer__foot { margin-top: var(--space-7); display: grid; gap: var(--space-3); }

/* ===========================================================================
   07  HERO & VERFÜGBARKEITS-CHECK
   =========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + var(--space-8));
  padding-bottom: var(--space-8);
  overflow: hidden;
  isolation: isolate;
}
.hero--compact { min-height: 62svh; align-items: flex-end; }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  /* Sehr langsames Heranfahren. Nur transform — kein Layout, keine Reflows. */
  animation: hero-drift 24s var(--ease) forwards;
}
@keyframes hero-drift {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* Zwei Verläufe übereinander: einer nimmt dem Foto von unten die Helligkeit,
   damit die Schrift trägt, der zweite dunkelt die obere Kante für die
   Navigationsleiste ab. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,12,14,0.82) 0%, rgba(11,12,14,0.18) 32%, rgba(11,12,14,0.72) 72%, var(--bg) 100%),
    linear-gradient(90deg, rgba(11,12,14,0.72) 0%, rgba(11,12,14,0.12) 60%, rgba(11,12,14,0.35) 100%);
}

.hero__inner { width: 100%; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-5);
}
.hero__eyebrow::before {
  content: '';
  width: 40px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.hero h1 { max-width: 15ch; }

.hero__lead {
  margin-top: var(--space-5);
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: var(--text-muted);
}

.hero__meta {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.hero__meta li { display: flex; align-items: center; gap: var(--space-2); list-style: none; }
.hero__meta svg { width: 16px; height: 16px; color: var(--brass); flex: none; }

/* Verfügbarkeits-Check — die erste Frage jedes Paares ist das Datum, also
   steht sie ganz oben und nicht am Seitenende. */
.availability {
  margin-top: var(--space-7);
  padding: var(--space-4);
  background: var(--surface-glass);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-3);
  max-width: 720px;
}
.availability__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-3);
  padding-inline: var(--space-1);
}
.availability__title svg { width: 15px; height: 15px; }

.availability__row {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .availability__row { grid-template-columns: 1fr 1fr auto; align-items: end; }
}

/* ===========================================================================
   08  KARTEN
   =========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}

/* Der Messing-Schimmer folgt beim Überfahren dem Zeiger. Die Koordinaten
   setzt app.js als --mx/--my; ohne JS bleibt der Punkt einfach mittig. */
.card::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), var(--brass-wash), transparent 70%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
  pointer-events: none;
}
.card:hover::before { opacity: 1; }

.card__num {
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  font-family: 'Bodoni Moda', 'Bodoni Fallback', Georgia, serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--text);
  opacity: 0.06;
  pointer-events: none;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--brass-wash);
  border: 1px solid var(--brass-line);
  color: var(--brass-bright);
  margin-bottom: var(--space-2);
  transition: background-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.card__icon svg { width: 21px; height: 21px; }
.card:hover .card__icon { background: rgba(220, 165, 74, 0.2); transform: translateY(-2px); }

.card p { color: var(--text-muted); font-size: var(--fs-sm); }
.card h3, .card h4 { color: var(--text); }

/* Kartenüberschriften sind in der Gliederung eine Ebene unter der
   Abschnittsüberschrift, sehen aber nicht wie eine dritte Überschriftenebene
   aus. Deshalb h3 im Quelltext, Archivo in der Darstellung — Vorleseprogramme
   bekommen die richtige Struktur, das Auge die richtige Gewichtung. */
.card__title {
  font-family: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--text);
}

/* Verlinkte Karte — hebt sich beim Überfahren leicht an */
.card--link { text-decoration: none; }
.card--link:hover {
  border-color: var(--brass-line);
  background: var(--surface-2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.card--link .link-arrow { margin-top: auto; padding-top: var(--space-4); }

/* Karte mit Bildkopf, für die drei Event-Arten */
.card--feature { padding: 0; }
.card--feature .card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(150deg, var(--surface-2), var(--bg));
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.card--link:hover .card__media img { transform: scale(1.045); }
.card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(11,12,14,0.6) 100%);
}

/* Platzhalter, solange ein Foto fehlt: bewusst gestaltet statt grauer Kasten */
.media-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(220,165,74,0.10), transparent 60%),
    linear-gradient(150deg, var(--surface-2), var(--bg));
  color: var(--text-dim);
  text-align: center;
  padding: var(--space-5);
}
.media-placeholder svg { width: 30px; height: 30px; color: var(--brass); opacity: 0.5; margin-bottom: var(--space-2); }
.media-placeholder span { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; }

/* Vorteilsliste mit Häkchen */
.checklist { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.checklist li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.checklist svg { width: 20px; height: 20px; color: var(--brass); margin-top: 2px; }

/* --- Pakete ------------------------------------------------------------- */

.price-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  margin-bottom: var(--space-7);
  border: 1px solid var(--brass-line);
  background: linear-gradient(180deg, var(--brass-wash), transparent);
  text-align: center;
}
.price-band__value {
  font-family: 'Bodoni Moda', 'Bodoni Fallback', Georgia, serif;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  line-height: 1;
  color: var(--text);
}
.price-band__value small {
  display: block;
  font-family: 'Archivo', 'Archivo Fallback', sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-2);
}

.package {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.package:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.package--featured {
  border-color: var(--brass-line);
  background: linear-gradient(180deg, var(--brass-wash) 0%, var(--surface) 30%);
  box-shadow: var(--shadow-brass);
}
.package__tag {
  position: absolute;
  top: calc(var(--space-3) * -1);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-4);
  background: var(--brass);
  color: #0B0C0E;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.package__name {
  font-family: 'Bodoni Moda', 'Bodoni Fallback', Georgia, serif;
  font-size: var(--fs-h3);
}
.package__hours {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: var(--space-2);
}
.package__list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--space-3);
  flex: 1;
}
.package__list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.package__list svg { width: 18px; height: 18px; color: var(--brass); margin-top: 3px; }
.package__list li strong { color: var(--text); font-weight: 500; }
.package .btn { margin-top: var(--space-6); }

/* ===========================================================================
   09  ABLAUF (TIMELINE)
   =========================================================================== */

.timeline { position: relative; list-style: none; padding: 0; display: grid; gap: var(--space-6); }

/* Die Linie wird beim Scrollen mitgezeichnet — scaleY, kein Layout. */
.timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, var(--brass), var(--brass-deep));
  transform: scaleY(var(--draw, 0));
  transform-origin: top;
  transition: transform 900ms var(--ease);
}
@media (min-width: 900px) { .timeline::before { left: 19px; } }

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 900px) { .timeline__item { grid-template-columns: 40px 1fr; gap: var(--space-6); } }

.timeline__dot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--bg);
  border: 1px solid var(--brass-line);
  color: var(--brass);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  z-index: 1;
}
@media (min-width: 900px) { .timeline__dot { width: 40px; height: 40px; font-size: var(--fs-sm); } }

.timeline__body { padding-bottom: var(--space-2); }
.timeline__body h3 { font-size: var(--fs-h4); font-family: 'Archivo', 'Archivo Fallback', sans-serif; font-weight: 600; }
.timeline__body p { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--fs-sm); max-width: 62ch; }
.timeline__when {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* ===========================================================================
   10  REFERENZEN & GALERIE
   =========================================================================== */

.gallery { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }

.gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
}
.gallery__item--tall { grid-row: span 2; aspect-ratio: 2 / 3; }
@media (max-width: 899px) { .gallery__item--tall { grid-row: span 1; aspect-ratio: 4 / 3; } }

.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.gallery__item:hover img { transform: scale(1.05); }

.gallery__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: linear-gradient(180deg, transparent, rgba(11,12,14,0.9));
  display: grid;
  gap: 2px;
}
.gallery__caption strong { font-size: var(--fs-sm); font-weight: 600; }
.gallery__caption span { font-size: var(--fs-xs); color: var(--brass); letter-spacing: 0.08em; }

/* Laufband der Locations — reine transform-Animation, pausiert bei Hover */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-5);
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--space-7);
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.marquee__item::after { content: ''; width: 4px; height: 4px; background: var(--brass); opacity: 0.7; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===========================================================================
   11  STIMMEN
   =========================================================================== */

.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  height: 100%;
}
.quote::before {
  content: '\201C';
  position: absolute;
  top: -6px;
  left: var(--space-5);
  font-family: 'Bodoni Moda', 'Bodoni Fallback', Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--brass);
  opacity: 0.22;
  pointer-events: none;
}
.quote blockquote {
  font-family: 'Bodoni Moda', 'Bodoni Fallback', Georgia, serif;
  font-size: 1.1875rem;
  line-height: 1.45;
  color: var(--text);
  position: relative;
  z-index: 1;
}
.quote__stars { display: flex; gap: 3px; color: var(--brass); }
.quote__stars svg { width: 15px; height: 15px; }
.quote__by { margin-top: auto; display: grid; gap: 2px; }
.quote__by strong { font-size: var(--fs-sm); font-weight: 600; }
.quote__by span { font-size: var(--fs-xs); color: var(--text-dim); }

/* --- Verweis auf die Google-Bewertungen ----------------------------------
   Die Zitate oben stehen ohne Gegenprobe da — jeder kann sich drei nette
   Sätze ausdenken. Der Verweis auf ein Profil, das der Gastgeber nicht
   redigieren kann, ist deshalb mehr wert als ein viertes Zitat.

   Bewusst ohne Google-Logo: die Marke hat eigene Gestaltungsvorgaben, und
   ein fremdes Logo in fremden Farben würde die Seite zerreissen. Der
   Schriftzug allein genügt und ist markenrechtlich unbedenklich. */

.reviews {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  max-width: 720px;
  margin: var(--space-7) auto 0;
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(180deg, var(--brass-wash), transparent);
  border: 1px solid var(--brass-line);
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}
.reviews:hover { border-color: var(--brass); background: var(--brass-wash); }

.reviews__note {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex: none;
}
.reviews__zahl {
  font-family: 'Bodoni Moda', 'Bodoni Fallback', Georgia, serif;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.reviews__sterne { display: flex; gap: 3px; color: var(--brass); }
.reviews__sterne svg { width: 15px; height: 15px; }

.reviews__text { flex: 1 1 14rem; display: grid; gap: 2px; }
.reviews__text strong { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.reviews__text span { font-size: var(--fs-xs); color: var(--text-muted); }

.reviews__pfeil {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--brass-bright);
  transition: transform var(--t-base) var(--ease);
}
.reviews:hover .reviews__pfeil { transform: translate(3px, -3px); }

/* ===========================================================================
   12  ZAHLEN-BAND
   =========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  padding: var(--space-7) 0;
  border-block: 1px solid var(--line);
}
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }

.stat { text-align: center; display: grid; gap: var(--space-2); }
.stat__value {
  font-family: 'Bodoni Moda', 'Bodoni Fallback', Georgia, serif;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1;
  color: var(--brass-bright);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ===========================================================================
   13  FAQ
   =========================================================================== */

.faq { display: grid; gap: var(--space-3); }

.faq__item {
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease);
}
.faq__item:hover { border-color: var(--line-strong); }
.faq__item.is-open { border-color: var(--brass-line); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 60px;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text);
}
.faq__q svg {
  width: 20px; height: 20px;
  flex: none;
  color: var(--brass);
  transition: transform var(--t-base) var(--ease);
}
.faq__item.is-open .faq__q svg { transform: rotate(45deg); }

/* 0fr → 1fr ist die einzige Art, eine unbekannte Höhe ohne JS-Rechnerei
   zu animieren. Kein Sprung, kein Layout-Shift. */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  max-width: 70ch;
}

/* ===========================================================================
   14  FORMULAR & ANFRAGE-ASSISTENT
   =========================================================================== */

.field { display: grid; gap: var(--space-2); }
.field__label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.field__label .req { color: var(--brass); margin-left: 2px; }
.field__hint { font-size: var(--fs-xs); color: var(--text-dim); }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 1rem; /* 16px verhindert das Zoomen auf iOS */
  transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
  appearance: none;
}
.textarea { min-height: 132px; padding-top: var(--space-3); resize: vertical; line-height: 1.6; }

.input::placeholder, .textarea::placeholder { color: var(--text-dim); }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(255,255,255,0.24); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brass);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--brass-wash);
}

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23DCA54A' stroke-width='1.6'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 20px;
  padding-right: var(--space-8);
  cursor: pointer;
}
.select option { background: var(--surface); color: var(--text); }

/* Datumsfeld: das native Kalendersymbol ist im Dunkelmodus fast unsichtbar */
input[type='date'] { color-scheme: dark; }

.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] {
  border-color: var(--err);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
}
.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--err);
}
.field__error svg { width: 14px; height: 14px; flex: none; }
.field__error:empty { display: none; }

/* Auswahlkacheln statt Radiobuttons — größere Trefferfläche, klarere Wirkung */
.choices { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .choices { grid-template-columns: repeat(3, 1fr); } }
.choices--2 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .choices--2 { grid-template-columns: repeat(2, 1fr); } }

.choice { position: relative; display: block; cursor: pointer; }
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.choice__box {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 96px;
  padding: var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.choice__box svg { width: 22px; height: 22px; color: var(--brass); }
.choice__box strong { font-size: var(--fs-sm); font-weight: 600; }
.choice__box span { font-size: var(--fs-xs); color: var(--text-dim); }
.choice:hover .choice__box { border-color: rgba(255,255,255,0.24); }
.choice input:checked + .choice__box {
  border-color: var(--brass);
  background: var(--brass-wash);
}
.choice input:focus-visible + .choice__box { outline: 2px solid var(--brass-bright); outline-offset: 3px; }
.choice:active .choice__box { transform: scale(0.985); }

/* Kontrollkästchen für die Einwilligung */
.consent { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3); align-items: start; cursor: pointer; }
.consent input { width: 22px; height: 22px; margin: 0; accent-color: var(--brass); cursor: pointer; }
.consent span { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.55; }
.consent a { color: var(--brass-bright); }

/* --- Assistent ---------------------------------------------------------- */

.wizard {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
}
@media (min-width: 768px) { .wizard { padding: var(--space-7); } }

.wizard__progress { margin-bottom: var(--space-6); }
.wizard__steps { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.wizard__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  white-space: nowrap;
}
.wizard__step b {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border: 1px solid var(--line-strong);
  font-size: 11px;
  font-weight: 600;
  flex: none;
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.wizard__step.is-active { color: var(--text); }
.wizard__step.is-active b { background: var(--brass); border-color: var(--brass); color: #0B0C0E; }
.wizard__step.is-done b { border-color: var(--brass); color: var(--brass); }
.wizard__step span { display: none; }
@media (min-width: 560px) { .wizard__step span { display: inline; } }
.wizard__step + .wizard__step::before {
  content: '';
  width: 14px; height: 1px;
  background: var(--line-strong);
  margin-right: var(--space-2);
}
@media (min-width: 560px) { .wizard__step + .wizard__step::before { width: 28px; } }

.wizard__bar { height: 3px; background: var(--line); overflow: hidden; }
.wizard__bar i {
  display: block;
  height: 100%;
  width: 33.33%;
  background: linear-gradient(90deg, var(--brass-deep), var(--brass-bright));
  transition: width var(--t-slow) var(--ease);
}

/* Ohne JavaScript stehen alle drei Abschnitte untereinander, durch eine Linie
   getrennt, und das Formular sendet klassisch per POST. Erst wenn app.js läuft
   und die Klasse .js gesetzt hat, wird daraus ein Assistent, der einen Schritt
   nach dem anderen zeigt.

   Die Reihenfolge ist wichtig: sichtbar ist der Grundzustand, versteckt die
   Ausnahme. Andersherum bliebe bei ausbleibendem Skript ein Formular übrig,
   das sich nicht ausfüllen lässt. */
.wizard__panel { display: grid; gap: var(--space-5); }
.wizard__panel + .wizard__panel {
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
}

.js .wizard__panel {
  display: none;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.js .wizard__panel.is-active { display: grid; animation: panel-in var(--t-slow) var(--ease); }

/* Fortschrittsbalken und Schritt-Knöpfe steuern etwas, das es ohne Skript
   nicht gibt. Sie wären dort tote Bedienelemente. */
html:not(.js) .wizard__progress,
html:not(.js) .wizard__nav [data-prev],
html:not(.js) .wizard__nav [data-next] { display: none; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Rechtsbündig, „Zurück“ per auto-Rand nach links. So bleibt der
   Weiter-Knopf an derselben Stelle, auch wenn „Zurück“ im ersten Schritt
   ausgeblendet ist — ein Knopf, der zwischen den Schritten hin- und
   herspringt, kostet jedes Mal einen Wimpernschlag Orientierung. */
.wizard__nav {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.wizard__nav [data-prev] { margin-right: auto; }

/* [hidden] allein reicht nicht: display:inline-flex aus .btn gewinnt sonst. */
.btn[hidden] { display: none; }

.wizard__summary {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.wizard__summary dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.wizard__summary dt { color: var(--text-dim); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.wizard__summary dd { margin: 0; color: var(--text); }

/* Sammelmeldung über dem Formular */
.form-alert {
  display: none;
  gap: var(--space-3);
  padding: var(--space-4);
  font-size: var(--fs-sm);
  border: 1px solid;
  margin-bottom: var(--space-5);
}
.form-alert.is-visible { display: flex; }
.form-alert--error { border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.08); color: #FCA5A5; }
.form-alert--ok    { border-color: rgba(74,222,128,0.4);  background: rgba(74,222,128,0.08);  color: #86EFAC; }
.form-alert svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.form-alert a { color: inherit; }

/* Schaltfläche im Ladezustand */
.btn.is-loading { pointer-events: none; opacity: 0.75; }
.btn__spinner { display: none; width: 16px; height: 16px; animation: spin 800ms linear infinite; }
.btn.is-loading .btn__spinner { display: block; }
.btn.is-loading .btn__label { opacity: 0.7; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===========================================================================
   15  PLAYLIST-EINBETTUNG (DSGVO)
   ---------------------------------------------------------------------------
   Spotify wird erst nach Klick geladen. Bis dahin steht dort eine gestaltete
   Vorschau statt eines grauen Cookie-Kastens.
   =========================================================================== */

.embed {
  position: relative;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
  min-height: 352px;
  display: grid;
}
.embed__placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(220,165,74,0.12), transparent 62%),
    linear-gradient(160deg, var(--surface-2), var(--bg));
}
.embed__placeholder h3 {
  font-family: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.35;
}
.embed__placeholder p { font-size: var(--fs-sm); color: var(--text-muted); max-width: 44ch; }
.embed__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  background: var(--brass-wash);
  border: 1px solid var(--brass-line);
  color: var(--brass-bright);
}
.embed__icon svg { width: 26px; height: 26px; }
.embed iframe { width: 100%; height: 352px; border: 0; display: block; }

/* ===========================================================================
   16  RATGEBER & FLIESSTEXT
   =========================================================================== */

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--space-8); }
.prose h3 {
  font-family: 'Archivo', 'Archivo Fallback', sans-serif;
  font-size: var(--fs-h4);
  font-weight: 600;
  margin-top: var(--space-7);
}
.prose p, .prose li { color: var(--text-muted); }
.prose ul, .prose ol { padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.prose li::marker { color: var(--brass); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--brass-bright); text-underline-offset: 3px; }
.prose blockquote {
  padding-left: var(--space-5);
  border-left: 2px solid var(--brass);
  font-family: 'Bodoni Moda', 'Bodoni Fallback', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--text);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--space-7); }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-2);
}
.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  /* Die Zeile ist nur 21px hoch — zu wenig zum sicheren Treffen. Die Höhe
     kommt über den Link statt über die Liste, damit die Trennstriche auf
     der Textlinie bleiben. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.breadcrumb a:hover { color: var(--brass-bright); }
.breadcrumb li + li::before { content: '/'; margin-right: var(--space-2); color: var(--text-dim); opacity: 0.5; }
.breadcrumb li { display: flex; align-items: center; }

/* Seitenkopf der Unterseiten */
.pagehead {
  position: relative;
  padding-top: calc(var(--nav-h) + var(--space-8));
  padding-bottom: var(--space-8);
  background:
    radial-gradient(90% 120% at 78% 0%, rgba(220,165,74,0.09), transparent 58%),
    linear-gradient(180deg, var(--bg-raised), var(--bg));
  border-bottom: 1px solid var(--line);
}
.pagehead h1 { max-width: 18ch; }
.pagehead .lead { margin-top: var(--space-5); }

/* Abschluss-Aufruf */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) var(--space-5);
  border: 1px solid var(--brass-line);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(220,165,74,0.16), transparent 60%),
    linear-gradient(160deg, var(--surface-2), var(--bg));
  text-align: center;
}
@media (min-width: 768px) { .cta-band { padding: var(--space-9) var(--space-8); } }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band .lead { margin-top: var(--space-4); margin-inline: auto; }
.cta-band .btn-row { margin-top: var(--space-6); justify-content: center; }

/* ===========================================================================
   17  FOOTER & MOBILE AKTIONSLEISTE
   =========================================================================== */

.footer {
  position: relative;
  z-index: var(--z-base);
  padding-top: var(--space-8);
  padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom));
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}
@media (max-width: 1023px) { .footer { padding-bottom: calc(var(--space-9) + env(safe-area-inset-bottom)); } }

.footer__grid { display: grid; gap: var(--space-7); }
@media (min-width: 720px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.footer__title {
  font-family: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-4);
}
/* Der Abstand steckt in der Höhe der Links selbst, nicht im gap: so ist jeder
   Eintrag 44px hoch und damit sicher zu treffen, ohne dass die Liste optisch
   auseinanderfällt. */
.footer ul { list-style: none; padding: 0; display: grid; gap: 0; }
.footer ul a {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.footer a { color: var(--text-muted); text-decoration: none; transition: color var(--t-base) var(--ease); }
.footer a:hover { color: var(--brass-bright); }
.footer p { color: var(--text-muted); max-width: 40ch; }

.footer__brand {
  font-family: 'Bodoni Moda', 'Bodoni Fallback', Georgia, serif;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  display: block;
  color: var(--text);
}

.footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.footer__social a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.footer__social a:hover { border-color: var(--brass-line); color: var(--brass-bright); background: var(--brass-wash); }
.footer__social svg { width: 19px; height: 19px; }

.footer__bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer__bottom nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* Feste Aktionsleiste auf schmalen Geräten */
.actionbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--surface-glass);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid var(--line-strong);
  transform: translateY(110%);
  transition: transform var(--t-slow) var(--ease);
}
.actionbar.is-visible { transform: translateY(0); }
@media (min-width: 1024px) { .actionbar { display: none; } }

/* ===========================================================================
   18  ANIMATIONEN
   ---------------------------------------------------------------------------
   Nur transform und opacity. Beides läuft auf dem Compositor und löst weder
   Layout noch Neuberechnung aus — deshalb bleibt die Seite auch auf einem
   alten Android-Gerät bei 60 fps.
   =========================================================================== */

/* Versteckt wird nur, wenn app.js tatsächlich läuft: die Klasse .js setzt das
   Skript synchron als Erstes. Bleibt das Skript aus — blockiert, Fehler beim
   Laden, abgeschaltetes JavaScript — greift diese Regel nie und die Seite ist
   vollständig lesbar. Ein unsichtbarer Abschnitt ist schlimmer als ein
   Abschnitt ohne Animation. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Nach dem Einlaufen wird will-change wieder abgeräumt, sonst hält der
   Browser dauerhaft eine eigene Ebene je Element vor. */
[data-reveal].is-done { will-change: auto; }

/* Seitliches Einlaufen erst dort, wo die Spalten tatsächlich nebeneinander
   stehen. Auf dem Handy sitzen dieselben Blöcke untereinander — eine
   Bewegung von der Seite ergäbe dort keinen Sinn und schöbe die Seite
   während der Animation über den rechten Rand hinaus. */
.js [data-reveal='left'],
.js [data-reveal='right'] { transform: translateY(22px); }

@media (min-width: 900px) {
  .js [data-reveal='left']  { transform: translateX(-26px); }
  .js [data-reveal='right'] { transform: translateX(26px); }
}

.js [data-reveal='scale'] { transform: scale(0.965); }
.js [data-reveal='fade']  { transform: none; }

/* Zeilenweiser Einlauf der Hero-Überschrift — ebenfalls nur mit .js */
.reveal-line { display: block; overflow: hidden; }
.js .reveal-line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1000ms var(--ease);
  transition-delay: var(--delay, 0ms);
}
.js .is-loaded .reveal-line > span,
.is-loaded .reveal-line > span { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .reveal-line > span { transform: none; }
  .hero__media img { animation: none; }
  .marquee__track { animation: none; }
  .timeline::before { transform: scaleY(1); }
}

/* ===========================================================================
   19  DRUCKANSICHT
   =========================================================================== */

@media print {
  .nav, .drawer, .actionbar, .hero__media, .marquee, .embed, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  body::after { display: none; }
  .section { padding-block: 1.5rem; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.75em; color: #555; }
  .card, .package, .quote { border: 1px solid #ccc; background: #fff; }
}