/* ==========================================================================
   Chriskey.de — Design System
   Cinematisch, intim, dunkel-warm. Reduziert, aber mit Charakter.
   ========================================================================== */

:root {
  /* Farben */
  --color-bg: #14161b;
  --color-bg-alt: #1b1e25;
  --color-bg-card: #21252e;
  --color-bg-elevated: #262b35;
  --color-border: #33394633;
  --color-border-soft: #ffffff14;

  --color-text: #ede7dc;
  --color-text-muted: #a9a296;
  --color-text-faint: #8f8a7f;

  --color-accent: #c8964f;
  --color-accent-hover: #dcaa63;
  --color-accent-dark: #96703a;
  --color-accent-text: #14161b;

  --color-focus: #e3b97a;

  /* Typografie */
  --font-headline: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.4rem, 5vw + 1rem, 4.4rem);
  --fs-h2: clamp(1.9rem, 3vw + 1rem, 3rem);
  --fs-h3: clamp(1.35rem, 1.6vw + 1rem, 1.9rem);
  --fs-lead: clamp(1.1rem, 1vw + 0.9rem, 1.35rem);
  --fs-body: 1.05rem;
  --fs-small: 0.9rem;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 7rem;

  --radius: 6px;
  --radius-lg: 14px;

  --max-width: 1180px;
  --transition: 220ms ease;
}

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

html {
  scroll-behavior: smooth;
  background: var(--color-bg);
  /* Verhindert das elastische Überscrollen nach oben (Trackpad/Mobile) —
     sonst wird beim Hochziehen über den Seitenanfang hinaus kurz der
     Hintergrund dahinter sichtbar (wirkt wie ein schwarzer Rand). Die
     aktuelle Scroll-Position 0 ist dadurch die tatsächliche Topposition,
     man kommt nicht mehr darüber hinaus. */
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  /* Der Header ist "position: fixed" (siehe .site-header) und nimmt daher
     keinen Platz mehr im Dokumentfluss ein. Dieses Padding schiebt den
     normalen Seiteninhalt (auf allen Seiten außer der Startseite) wieder
     um die Headerhöhe nach unten, damit nichts darunter verschwindet. Die
     Startseite hebt den Hero eigens wieder darüber (siehe .hero-reveal),
     damit das Bild bis ganz nach oben reicht und der Header direkt
     darüber liegt. */
  padding-top: 76px;
  overscroll-behavior-y: none;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  letter-spacing: 0.005em;
}

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

p { margin: 0 0 var(--space-2); color: var(--color-text); }

.lead {
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
  max-width: 46em;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

/* Fokus-Stile für Barrierefreiheit */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-accent);
  color: var(--color-accent-text);
  padding: 0.8em 1.2em;
  z-index: 1000;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
  top: 0;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

section {
  padding: var(--space-6) 0;
}

@media (max-width: 640px) {
  section { padding: var(--space-5) 0; }
  .container { padding: 0 var(--space-2); }
}

.section-alt {
  background: var(--color-bg-alt);
}

.section-head {
  max-width: 44em;
  margin-bottom: var(--space-4);
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- Header / Navigation ----------
   Schwebt über dem Inhalt (position: fixed statt sticky) — auf der
   Startseite reicht das Klavier-Bild dadurch bis zur obersten Kante, der
   Header liegt direkt darüber statt eine eigene Zeile einzunehmen.
*/
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(20, 22, 27, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border-soft);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.logo {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--color-text);
}
.logo span { color: var(--color-accent); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  width: 44px;
  height: 44px;
  color: var(--color-text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.3rem;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.social-link:hover,
.social-link:focus-visible {
  color: var(--color-accent);
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.9rem;
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  transition: color var(--transition);
  padding: 0.4em 0;
  border-bottom: 1px solid transparent;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    height: calc(100vh - 76px);
    height: calc(100dvh - 76px);
    background: var(--color-bg);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
    overflow-y: auto;
  }
  .main-nav.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: var(--space-3);
  }
  .main-nav a {
    display: block;
    padding: var(--space-2) 0;
    font-size: 1.15rem;
    border-bottom: 1px solid var(--color-border-soft);
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.95em 1.7em;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.98rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-text);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-soft);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ---------- Hero: Klavier-Reveal ----------
   Das Bild füllt den kompletten Bildschirm (100vh/100dvh) und läuft ganz
   normal im Dokumentfluss mit — kein Scroll-Jacking, kein Pin, daher
   stockt das Scrollen nie. Die Text-Ebene ("hero-content-panel") liegt
   NICHT über dem Bild, sondern beginnt erst direkt darunter (ganz normaler
   Dokumentfluss, kein negativer Außenabstand) — der Text "hovert" also nie
   über dem Foto. Sichtbar (eingeblendet) wird sie erst, wenn sie beim
   Scrollen tatsächlich in den Viewport kommt — das steuert js/main.js per
   IntersectionObserver (Klasse ".is-visible", siehe unten).
   Ohne JS bzw. mit "prefers-reduced-motion" ist der Text sofort an seiner
   Endposition sichtbar (kein Warten aufs Scrollen nötig).
   Das Standbild ist in vier übereinanderliegende Ebenen zerlegt (Basis ohne
   Kopf/Arme, Kopf, linker und rechter Arm — alle exakt deckungsgleich, da aus
   demselben Foto freigestellt). Jede Ebene bekommt ihre eigene, unabhängige
   Mikro-Bewegung (Rotation/Verschiebung um das jeweilige Gelenk als
   Transform-Origin), wodurch aus dem Standbild eine glaubwürdige
   Bewegungsillusion von Kopf und Armen beim Klavierspiel entsteht — ganz
   ohne Video. Die Basis-Ebene selbst bleibt bewusst ruhig, damit die
   Kopf-/Arm-Bewegung nicht von einem zusätzlichen Ganzbild-Zoom überlagert
   wird.
*/
.hero-reveal {
  position: relative;
  /* Hebt den Hero über das globale body-padding-top (siehe body-Regel)
     zurück an die oberste Kante der Seite, damit das Bild ganz oben
     beginnt und der fixierte Header direkt darüber liegt. */
  margin-top: -76px;
}

.hero-media {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.hero-media-inner {
  position: absolute;
  inset: -3%;
}
.hero-media-inner picture {
  position: absolute;
  inset: 0;
}
.hero-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  will-change: transform;
}

.hero-layer-head {
  transform-origin: 41% 45%;
  animation: hero-head-move 8.5s ease-in-out infinite;
}
@keyframes hero-head-move {
  0%   { transform: rotate(0deg) translate(0, 0); }
  30%  { transform: rotate(-0.6deg) translate(-0.15%, 0.25%); }
  55%  { transform: rotate(0.35deg) translate(0.1%, -0.15%); }
  80%  { transform: rotate(-0.2deg) translate(-0.05%, 0.1%); }
  100% { transform: rotate(0deg) translate(0, 0); }
}

.hero-layer-arm-left {
  transform-origin: 27% 76%;
  animation: hero-arm-left-move 5.2s ease-in-out infinite;
}
@keyframes hero-arm-left-move {
  0%   { transform: rotate(0deg) translateY(0); }
  40%  { transform: rotate(0.9deg) translateY(0.35%); }
  70%  { transform: rotate(-0.4deg) translateY(-0.15%); }
  100% { transform: rotate(0deg) translateY(0); }
}

.hero-layer-arm-right {
  transform-origin: 58% 70%;
  animation: hero-arm-right-move 4.6s ease-in-out infinite;
  animation-delay: -1.4s;
}
@keyframes hero-arm-right-move {
  0%   { transform: rotate(0deg) translateY(0); }
  45%  { transform: rotate(-0.8deg) translateY(0.3%); }
  75%  { transform: rotate(0.35deg) translateY(-0.12%); }
  100% { transform: rotate(0deg) translateY(0); }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Bewusst dezent: Das Bild (inkl. Hände/Tasten unten) soll komplett
     sichtbar bleiben. Nur ganz am unteren Rand ein kurzer Übergang, damit
     der Schnitt zum Text-Bereich darunter nicht hart wirkt. */
  background: linear-gradient(180deg, rgba(15,16,20,0) 0%, rgba(15,16,20,0) 72%, rgba(15,16,20,0.5) 92%, rgba(15,16,20,0.88) 100%);
}

.hero-scroll-hint {
  display: none;
}

/* ---------- Hero: Klick-Hotspot "Ton einschalten" ----------
   Reiner visueller Hinweis (kein Button-Look: kein Rahmen, keine Füllung,
   kein Text) — ein pulsierender Punkt mitten im Bild, rechts von der
   Person, der zum Antippen einlädt. Ein Klick irgendwo auf der Seite
   macht den (aus Autoplay-Policy-Gründen stummen) Sample-Player hörbar,
   siehe unlockAudio() in js/main.js. Blendet sich beim ersten Klick/Touch
   aus. */
.hero-sound-hint {
  position: absolute;
  z-index: 2;
  left: 68%;
  top: 44%;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: opacity 350ms ease, transform 350ms ease;
}
.hero-sound-hint:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 8px;
  border-radius: 50%;
}

.hero-sound-hint-dot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-text);
  box-shadow: 0 0 0 3px rgba(15,16,20,0.35), 0 1px 8px rgba(0,0,0,0.55);
  transition: transform 200ms ease;
}
.hero-sound-hint:hover .hero-sound-hint-dot {
  transform: scale(1.1);
}

.hero-sound-hint-ring {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent);
  animation: hero-sound-ping 2.4s cubic-bezier(.2,.6,.35,1) infinite;
}
.hero-sound-hint-ring-b {
  animation-delay: 1.2s;
}
@keyframes hero-sound-ping {
  0%   { transform: scale(1); opacity: 0.85; }
  100% { transform: scale(2.15); opacity: 0; }
}

/* Kurzer "Antipp"-Effekt genau im Klickmoment */
.hero-sound-hint.is-tapped .hero-sound-hint-dot {
  animation: hero-sound-tap 420ms ease;
}
@keyframes hero-sound-tap {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.7); }
  100% { transform: scale(1); }
}

.hero-sound-hint.is-dismissed {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  pointer-events: none;
}

@media (max-width: 640px) {
  .hero-sound-hint { left: 70%; top: 40%; width: 56px; height: 56px; }
  .hero-sound-hint-dot { width: 30px; height: 30px; }
  .hero-sound-hint-dot svg { width: 14px; height: 14px; }
  .hero-sound-hint-ring { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-sound-hint-ring { animation: none; opacity: 0.4; }
}

/* Der Text beginnt bewusst ERST unterhalb des Bilds (kein Überlappen,
   kein "Hovern" über dem Foto) — ganz normaler Dokumentfluss. */
.hero-content-panel {
  position: relative;
  z-index: 2;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.hero-content { max-width: 780px; }

.hero-content .eyebrow { color: var(--color-accent-hover); }

.hero-content h1 {
  text-wrap: balance;
}

.hero-content .lead {
  color: #f0ece3cc;
  margin-top: var(--space-2);
}

/* ---------- Reveal aktiv (JS + keine reduzierte Bewegung) ----------
   Startzustand leicht versetzt/unsichtbar; sobald das Panel beim
   Scrollen in den Viewport kommt, setzt js/main.js die Klasse
   ".is-visible" (IntersectionObserver) und es blendet sanft ein. */
.hero-reveal.hero-reveal-js .hero-content-panel {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: transform, opacity;
}
.hero-reveal.hero-reveal-js .hero-content-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hero-reveal.hero-reveal-js .hero-scroll-hint {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  z-index: 2;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 1;
  transition: opacity 400ms ease;
  animation: hero-hint-bob 2.4s ease-in-out infinite;
}
.hero-reveal.hero-reveal-js .hero-scroll-hint.is-hidden {
  opacity: 0;
}
@keyframes hero-hint-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-layer { animation: none; }
}

/* ---------- Page header (non-hero pages) ---------- */
.page-header {
  padding: var(--space-6) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
}

/* ---------- Grid / Cards ---------- */
.grid {
  display: grid;
  gap: var(--space-3);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition);
}

.card-body { padding: var(--space-3); }

.card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* ---------- Split layout (Bild + Text) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}
.split.reverse .split-media { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: var(--space-3); }
  .split.reverse .split-media { order: 0; }
}

.split-media img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Landscape-Fotos (3:2) — Standardfall für Split-Sektionen */
.split-media img.ratio-landscape {
  aspect-ratio: 3 / 2;
}
/* Portrait-Fotos (2:3) — für hochkant aufgenommene Bilder */
.split-media img.ratio-portrait {
  aspect-ratio: 2 / 3;
  max-height: 640px;
  margin: 0 auto;
}

/* ---------- Prozess-Schritte (Zusammenarbeit) ---------- */
.process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  counter-reset: step;
}
.process-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}
.process-step .step-number {
  counter-increment: step;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: 1.3rem;
}
.process-step .step-number::before { content: counter(step); }
.process-step h3 { margin-bottom: 0.35em; }
@media (max-width: 560px) {
  .process-step { grid-template-columns: 1fr; }
  .process-step .step-number { margin-bottom: 0.2em; }
}

/* ---------- Quote ---------- */
.quote-block {
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-3);
  margin: var(--space-2) 0;
}
.quote-block p {
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--color-text);
  font-style: italic;
}

/* ---------- Audio Player ---------- */
.track {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
}
.track img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius);
}
.track-icon {
  width: 96px;
  height: 96px;
  border-radius: var(--radius);
  background: var(--color-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
}
.track-info h3 { margin-bottom: 0.2em; font-size: 1.2rem; }
.track-context { color: var(--color-text-muted); font-size: var(--fs-small); margin-bottom: var(--space-2); }

/* ---------- Spotify-Embeds (Sound/Portfolio) ---------- */
.track-embed {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.track-embed h2 { margin-bottom: 0.3em; font-size: 1.3rem; }
.track-embed .track-credit {
  color: var(--color-accent-hover);
  font-size: var(--fs-small);
  margin-bottom: 0.6em;
  display: block;
}
.track-embed .track-context { margin-bottom: var(--space-2); }
.track-embed .spotify-embed-mount {
  min-height: 352px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-elevated);
}
.track-embed .spotify-embed-mount iframe {
  border-radius: 12px;
  width: 100%;
  display: block;
}

/* Kompakte Variante für Homepage-Teaser */
.track-compact {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
}
.track-compact h3 { font-size: 1.05rem; margin-bottom: 0.2em; }
.track-compact .track-credit {
  color: var(--color-text-faint);
  font-size: 0.82rem;
  display: block;
  margin-bottom: 0.6em;
}
.track-compact .spotify-embed-mount {
  min-height: 152px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-elevated);
}
.track-compact .spotify-embed-mount iframe {
  border-radius: 12px;
  width: 100%;
  display: block;
}

.player {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.player-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-text);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition);
}
.player-btn:hover { background: var(--color-accent-hover); }

.player-track {
  flex: 1;
  height: 6px;
  background: var(--color-bg-elevated);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}
.player-progress {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--color-accent);
  border-radius: 4px;
}
.player-time {
  font-size: 0.8rem;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
  min-width: 74px;
  text-align: right;
}

.track-note {
  font-size: 0.78rem;
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}

/* ---------- Audio-Bar: persistenter Sample-Player als Fußleiste ----------
   Liegt außerhalb von <main id="main"> (siehe HTML), bleibt beim SPA-
   Seitenwechsel unangetastet im DOM und läuft dadurch einfach weiter.
   Von Anfang an sichtbar: die Bar ist standardmäßig eingeblendet (reine
   CSS-Animation beim ersten Laden) und hängt für ihre Sichtbarkeit NICHT
   von JavaScript ab — falls die Wiedergabe-Logik aus irgendeinem Grund
   (Browser-Eigenheit, Cache, o. Ä.) nicht greift, bleibt die Leiste selbst
   trotzdem sichtbar statt komplett zu verschwinden. */
body { padding-bottom: 78px; }
@media (max-width: 560px) {
  body { padding-bottom: 96px; }
}

.audio-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(140% 260% at 10% 0%, #341c0e55 0%, transparent 45%),
    linear-gradient(180deg, #1d1410 0%, #14100c 100%);
  border-top: 1px solid #4a2a1580;
  box-shadow: 0 -8px 30px #00000080;
  transform: translateY(0);
  animation: audio-bar-intro 480ms cubic-bezier(.32,.72,.35,1);
  transition: border-radius 260ms ease, width 260ms ease;
}
@keyframes audio-bar-intro {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}

/* verkohlte Maserung */
.audio-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 8% 30%, #00000090 0, transparent 3%),
    radial-gradient(circle at 22% 70%, #00000080 0, transparent 2%),
    radial-gradient(circle at 40% 25%, #00000090 0, transparent 2.5%),
    radial-gradient(circle at 63% 60%, #00000080 0, transparent 2%),
    radial-gradient(circle at 78% 20%, #00000090 0, transparent 3%),
    radial-gradient(circle at 90% 70%, #00000080 0, transparent 2%);
}
/* leises Glutglimmen im Hintergrund, während gespielt wird */
.audio-bar::after {
  content: "";
  position: absolute;
  inset: -40% -10%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle at 10% 50%, rgba(255,130,40,0.18), transparent 55%);
  opacity: 0;
  transition: opacity 600ms ease;
}
.audio-bar.is-playing::after { opacity: 1; animation: ember-glow-drift 5s ease-in-out infinite; }

@keyframes ember-glow-drift {
  0%, 100% { transform: translateX(0) scale(1); opacity: 0.85; }
  50% { transform: translateX(3%) scale(1.06); opacity: 1; }
}

/* Aufsteigende Glutfunken beim Sample-Wechsel */
.audio-bar-embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}
.ember-spark {
  position: absolute;
  bottom: 40%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe3a8 0%, #ff8a3d 55%, transparent 75%);
  box-shadow: 0 0 6px 1px rgba(255,150,60,0.85);
  animation: ember-rise 950ms ease-out forwards;
}
@keyframes ember-rise {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 1; }
  65% { opacity: 0.9; }
  100% { transform: translateY(-70px) translateX(var(--drift, 12px)) scale(0.25); opacity: 0; }
}

.audio-bar-play {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ffdca0 0%, #f0a13c 38%, #c0501c 68%, #5c2410 100%);
  color: #1a0e06;
  border: 1px solid #ffb35e40;
  box-shadow: 0 0 12px 1px rgba(255,140,40,0.45), inset 0 0 8px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 2;
  transition: box-shadow var(--transition), transform var(--transition);
}
.audio-bar-play:hover { box-shadow: 0 0 18px 3px rgba(255,160,60,0.6), inset 0 0 8px rgba(0,0,0,0.3); }
.audio-bar-play:active { transform: scale(0.94); }
.audio-bar.is-playing .audio-bar-play {
  animation: ember-pulse 1.8s ease-in-out infinite;
}
@keyframes ember-pulse {
  0%, 100% { box-shadow: 0 0 12px 1px rgba(255,140,40,0.45), inset 0 0 8px rgba(0,0,0,0.35); }
  50% { box-shadow: 0 0 24px 6px rgba(255,170,60,0.8), inset 0 0 8px rgba(0,0,0,0.25); }
}

.audio-bar-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
  flex-shrink: 0;
  z-index: 2;
}
.audio-bar-bars span {
  width: 3px;
  height: 30%;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffd27a 0%, #ff7a30 55%, #c23a12 100%);
  box-shadow: 0 0 5px rgba(255,120,40,0.5);
  opacity: 0.6;
  transform-origin: bottom;
  transition: height 120ms ease, opacity 200ms ease;
}
.audio-bar.is-playing .audio-bar-bars span {
  opacity: 1;
  animation: sample-bar-bounce 900ms ease-in-out infinite;
}
.audio-bar-bars span:nth-child(1) { animation-delay: 0ms; }
.audio-bar-bars span:nth-child(2) { animation-delay: 150ms; }
.audio-bar-bars span:nth-child(3) { animation-delay: 300ms; }
.audio-bar-bars span:nth-child(4) { animation-delay: 450ms; }
.audio-bar-bars span:nth-child(5) { animation-delay: 200ms; }

@keyframes sample-bar-bounce {
  0%, 100% { height: 20%; }
  50% { height: 100%; }
}

.audio-bar-info {
  flex: 1;
  min-width: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.audio-bar-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-headline);
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--color-accent-hover);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-bar-title:hover { text-decoration: underline; }
.audio-bar-title-icon { flex-shrink: 0; }
.audio-bar-meta {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-bar-meta.is-charring {
  animation: char-flicker 700ms ease;
}
@keyframes char-flicker {
  0% { color: var(--color-text-muted); text-shadow: none; filter: none; }
  25% { color: #ffb35e; text-shadow: 0 0 10px rgba(255,130,40,0.85); filter: none; }
  55% { color: #4a2410; text-shadow: 0 0 4px rgba(0,0,0,0.6); filter: blur(0.4px); }
  100% { color: var(--color-text-muted); text-shadow: none; filter: none; }
}

.audio-bar-volume {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-shrink: 0;
  z-index: 2;
}
.audio-bar-volume-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #4a2a1580;
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition), color var(--transition);
}
.audio-bar-volume-btn:hover { color: #ffb35e; border-color: #c0501c; }

/* Eigenes Slider-Design statt Browser-Standard (accent-color rendert in
   Safari deutlich anders/klobiger als in Chrome/Firefox) — dadurch sieht
   der Regler in allen Browsern gleich aus. */
.audio-bar-volume-range {
  --vol: 80%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f0a13c 0%, #f0a13c var(--vol), #4a2a1580 var(--vol), #4a2a1580 100%);
  cursor: pointer;
  outline: none;
}
.audio-bar-volume-range::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 4px;
  background: transparent;
}
.audio-bar-volume-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #ffdca0;
  border: 1px solid #c0501c;
  box-shadow: 0 0 4px rgba(255,140,40,0.6);
  cursor: pointer;
}
.audio-bar-volume-range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: transparent;
}
.audio-bar-volume-range::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: #f0a13c;
}
.audio-bar-volume-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffdca0;
  border: 1px solid #c0501c;
  box-shadow: 0 0 4px rgba(255,140,40,0.6);
  cursor: pointer;
}
.audio-bar-volume-range:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.audio-bar-next {
  flex-shrink: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  height: 38px;
  padding: 0 0.9em;
  border-radius: 999px;
  background: transparent;
  border: 1px solid #4a2a1580;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition), color var(--transition);
}
.audio-bar-next:hover { color: #ffb35e; border-color: #c0501c; }

.audio-bar-minimize {
  flex-shrink: 0;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #4a2a1580;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.audio-bar-minimize:hover { color: #ffb35e; border-color: #c0501c; }

/* Minimiert: kleine Kapsel unten rechts statt volle Fußleiste. Wiedergabe
   läuft unverändert weiter, nur die restlichen Bedienelemente werden
   ausgeblendet. */
.audio-bar.is-minimized {
  left: auto;
  right: var(--space-3);
  bottom: var(--space-3);
  width: auto;
  border-radius: 999px;
  border: 1px solid #4a2a1580;
  padding: 8px 10px;
  gap: 8px;
  box-shadow: 0 6px 24px #000000a0;
}
.audio-bar.is-minimized .audio-bar-info,
.audio-bar.is-minimized .audio-bar-volume,
.audio-bar.is-minimized .audio-bar-next { display: none; }

@media (max-width: 720px) {
  .audio-bar-volume-range { display: none; }
  .audio-bar-next-label { display: none; }
  .audio-bar-next { padding: 0; width: 38px; height: 38px; justify-content: center; }
}

@media (max-width: 560px) {
  .audio-bar { gap: var(--space-2); padding: var(--space-2); }
  .audio-bar-meta { display: none; }
}

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  gap: var(--space-2);
}
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
@media (max-width: 640px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

label {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 0.4em;
}

input, textarea, select {
  width: 100%;
  padding: 0.85em 1em;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
}

input::placeholder, textarea::placeholder { color: var(--color-text-faint); }

textarea { min-height: 140px; resize: vertical; }

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.form-note {
  font-size: 0.85rem;
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}

.form-status {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-bg-elevated);
  display: none;
}
.form-status.visible { display: block; }

.form-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}
.form-checkbox input[type="checkbox"] {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  margin-top: 0.15em;
  accent-color: var(--color-accent);
}
.form-checkbox a { color: var(--color-accent); text-decoration: underline; }
.form-checkbox a:hover, .form-checkbox a:focus-visible { color: var(--color-accent-hover); }

.form-note a { color: var(--color-accent); text-decoration: underline; }
.form-note a:hover, .form-note a:focus-visible { color: var(--color-accent-hover); }

/* ---------- Fit-check lists (Für wen ich arbeite) ---------- */
.fit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.fit-list li {
  display: flex;
  gap: 0.8em;
  align-items: flex-start;
  padding: var(--space-2);
  background: var(--color-bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--color-border-soft);
}
.fit-list .mark {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
}
.fit-list.yes .mark { background: #4f7a5e33; color: #8fc7a1; }
.fit-list.no .mark { background: #7a4f4f33; color: #c78f8f; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-border-soft);
  padding: var(--space-5) 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}
.footer-grid h4 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6em; }
.footer-grid a:hover { color: var(--color-accent-hover); }
.footer-grid a.logo:hover { color: var(--color-text); }
.footer-bottom {
  border-top: 1px solid var(--color-border-soft);
  padding-top: var(--space-2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: 0.82rem;
}

/* ---------- CTA band ---------- */
.cta-band {
  text-align: center;
  padding: var(--space-6) 0;
  background: linear-gradient(180deg, var(--color-bg-alt), var(--color-bg));
}
.cta-band .section-head { margin-left: auto; margin-right: auto; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-soft);
}
.price-tag {
  font-family: var(--font-headline);
  font-size: 1.6rem;
  color: var(--color-accent-hover);
  margin: var(--space-1) 0;
}
.divider {
  height: 1px;
  background: var(--color-border-soft);
  margin: var(--space-4) 0;
  border: none;
}